npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

zustand-hoist

v2.0.1

Published

Hoist Zustand state and actions to the top level.

Downloads

17,725

Readme

Zustand Hoist

npm GitHub Actions

Hoist Zustand state and actions to the top level.

Description

hoist

Read state and call actions directly from the store.

import { createStore, type StoreApi } from 'zustand/vanilla'
import { hoist } from 'zustand-hoist'

interface State {
  paw: boolean
  snout: boolean
  fur: boolean
  shaveDog: () => void
}

const store = hoist<StoreApi<State>>(
  createStore((set) => ({
    paw: true,
    snout: true,
    fur: true,
    shaveDog() {
      set({ fur: false })
    },
  })),
)

store.shaveDog()
store.fur //=> false

hoistState

Read state directly from the store.

import { createStore, type StoreApi } from 'zustand/vanilla'
import { hoistActions } from 'zustand-hoist'

interface State {
  paw: boolean
  snout: boolean
  fur: boolean
  shaveDog: () => void
}

const store = hoistState<StoreApi<State>>(
  createStore((set) => ({
    paw: true,
    snout: true,
    fur: true,
    shaveDog() {
      set({ fur: false })
    },
  })),
)

store.getState().shaveDog()
store.fur //=> false

hoistActions

Call actions directly from the store.

import { createStore, type StoreApi } from 'zustand/vanilla'
import { hoistActions } from 'zustand-hoist'

interface State {
  paw: boolean
  snout: boolean
  fur: boolean
  shaveDog: () => void
}

const store = hoistActions<StoreApi<State>>(
  createStore((set) => ({
    paw: true,
    snout: true,
    fur: true,
    shaveDog() {
      set({ fur: false })
    },
  })),
)

store.shaveDog()
store.getState().fur //=> false

Installation

Add this as a dependency to your project using npm with

$ npm install zustand-hoist

Development and Testing

Quickstart

$ git clone https://github.com/seamapi/zustand-hoist.git
$ cd zustand-hoist
$ nvm install
$ npm install
$ npm run test:watch

Primary development tasks are defined under scripts in package.json and available via npm run. View them with

$ npm run

Source code

The source code is hosted on GitHub. Clone the project with

$ git clone [email protected]:seamapi/zustand-hoist.git

Requirements

You will need Node.js with npm and a Node.js debugging client.

Be sure that all commands run under the correct Node version, e.g., if using nvm, install the correct version with

$ nvm install

Set the active version for each shell session with

$ nvm use

Install the development dependencies with

$ npm install

Publishing

Automatic

New versions are released automatically with semantic-release as long as commits follow the Angular Commit Message Conventions.

Manual

Publish a new version by triggering a version workflow_dispatch on GitHub Actions. The version input will be passed as the first argument to npm-version.

This may be done on the web or using the GitHub CLI with

$ gh workflow run version.yml --raw-field version=<version>

GitHub Actions

GitHub Actions should already be configured: this section is for reference only.

The following repository secrets must be set on GitHub Actions:

  • NPM_TOKEN: npm token for installing and publishing packages.
  • GH_TOKEN: A personal access token for the bot user with packages:write and contents:write permission.
  • GIT_USER_NAME: The GitHub bot user's real name.
  • GIT_USER_EMAIL: The GitHub bot user's email.
  • GPG_PRIVATE_KEY: The GitHub bot user's GPG private key.
  • GPG_PASSPHRASE: The GitHub bot user's GPG passphrase.

Contributing

If using squash merge, edit and ensure the commit message follows the Angular Commit Message Conventions specification. Otherwise, each individual commit must follow the Angular Commit Message Conventions specification.

  1. Create your feature branch (git checkout -b my-new-feature).
  2. Make changes.
  3. Commit your changes (git commit -am 'Add some feature').
  4. Push to the branch (git push origin my-new-feature).
  5. Create a new draft pull request.
  6. Ensure all checks pass.
  7. Mark your pull request ready for review.
  8. Wait for the required approval from the code owners.
  9. Merge when ready.

License

This npm package is licensed under the MIT license.

Warranty

This software is provided by the copyright holders and contributors "as is" and any express or implied warranties, including, but not limited to, the implied warranties of merchantability and fitness for a particular purpose are disclaimed. In no event shall the copyright holder or contributors be liable for any direct, indirect, incidental, special, exemplary, or consequential damages (including, but not limited to, procurement of substitute goods or services; loss of use, data, or profits; or business interruption) however caused and on any theory of liability, whether in contract, strict liability, or tort (including negligence or otherwise) arising in any way out of the use of this software, even if advised of the possibility of such damage.