{"id":14987581,"url":"https://github.com/90pixel/zustand-macro","last_synced_at":"2025-04-12T00:16:42.377Z","repository":{"id":48486864,"uuid":"387029557","full_name":"90pixel/zustand-macro","owner":"90pixel","description":"🦄 Improve your Developer Experience (DX) when working with zustand.","archived":false,"fork":false,"pushed_at":"2021-07-26T17:05:11.000Z","size":73,"stargazers_count":10,"open_issues_count":2,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-04-12T00:16:34.348Z","etag":null,"topics":["babel-macro","babel-plugin-macros","hacktoberfest","zustand"],"latest_commit_sha":null,"homepage":"","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/90pixel.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2021-07-17T20:14:54.000Z","updated_at":"2024-08-27T11:34:50.000Z","dependencies_parsed_at":"2022-09-01T04:10:53.559Z","dependency_job_id":null,"html_url":"https://github.com/90pixel/zustand-macro","commit_stats":null,"previous_names":[],"tags_count":5,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/90pixel%2Fzustand-macro","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/90pixel%2Fzustand-macro/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/90pixel%2Fzustand-macro/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/90pixel%2Fzustand-macro/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/90pixel","download_url":"https://codeload.github.com/90pixel/zustand-macro/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248497818,"owners_count":21113984,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["babel-macro","babel-plugin-macros","hacktoberfest","zustand"],"created_at":"2024-09-24T14:14:58.002Z","updated_at":"2025-04-12T00:16:42.339Z","avatar_url":"https://github.com/90pixel.png","language":"TypeScript","readme":"\u003cdiv align=\"center\"\u003e\n\u003ch1\u003ezustand.macro\u003c/h1\u003e\n\u003cimg alt=\"babel-macro\" src=\"https://img.shields.io/badge/-babel--macro-blueviolet\" /\u003e\n\u003ca href=\"https://www.npmjs.com/package/@90pixel/zustand.macro\"\u003e\n\u003cimg alt=\"npm\" src=\"https://img.shields.io/npm/v/@90pixel/zustand.macro?label=%4090pixel%2Fzustand.macro\" /\u003e\n\u003c/a\u003e\n\u003ca href=\"https://www.npmjs.com/package/@90pixel/zustand.macro\"\u003e\n\u003cimg alt=\"npm\" src=\"https://img.shields.io/npm/dm/@90pixel/zustand.macro\" /\u003e\n\u003c/a\u003e\n\u003cimg alt=\"NPM\" src=\"https://img.shields.io/npm/l/@90pixel/zustand.macro\" /\u003e\n\u003c/div\u003e\n\n## Getting Started\n\nThis package is designed to improve the **Developer Experience (DX)** when working with `zustand` to manage the state in React applications.\n\n## Table of Contents\n\n-   [The Problem](#the-problem)\n    -   [What if we need more then one prop?](#what-if-we-need-more-than-one-prop)\n-   [Solution](#solution)\n-   [Installation](#installation)\n    -   [Updating your babel config](#updating-your-babel-config)\n    -   [Adding useShallowStore hook](#adding-useshallowstore-hook)\n    -   [Configuration](#configuration)\n\n\u003cbr /\u003e\n\n## The Problem\n\nLets say we have a store like this;\n\n```js\nimport create from \"zustand\";\n\nconst useStore = create((set) =\u003e ({\n    count: 0,\n    incrementCount: () =\u003e set((state) =\u003e ({ count: state.count + 1 })),\n    decrementCount: () =\u003e set((state) =\u003e ({ count: state.count - 1 })),\n}));\n```\n\nIf we use this store like this;\n\n```js\nexport default function CounterA() {\n    const { count } = usestore();\n    // ...\n}\n```\n\nWe will encounter re-rendering issues. The `\u003cCounterA /\u003e` component will re-render when any of the properties changed in store.\n\nWe will need to use the store like this, to avoid re-rendering issues.\n\n```js\nexport default function CounterA() {\n    const count = useStore((state) =\u003e state.count);\n    // ...\n}\n```\n\n### What if we need more than one prop?\n\nNow we need to use the store with shallow equality function.\n\n```js\nimport shallow from \"zustand/shallow\";\n\nexport default function CounterA() {\n    const { count, incrementCount, decrementCount } = useStore(\n        (s) =\u003e ({\n            count: s.count,\n            incrementCount: s.incrementCount,\n            decrementCount: s.decrementCount,\n        }),\n        shallow\n    );\n    // ...\n}\n```\n\nWe are repeating a lot.\n\n## Solution\n\nUsing `babel-plugin-macros` we can turn this code into this below, at `compile-time`.\n\n```js\nimport useStoreMacro from \"@90pixel/zustand.macro\";\n\nconst {\n  count,\n  decrementCount,\n  incrementCount,\n} = useStoreMacro();\n\n      ↓ ↓ ↓ ↓ ↓ ↓\n\n// You can replace this with your own hook. Look at the Configuration section to learn more about it.\nimport { useShallowStore as _useShallowStore } from \"hooks\";\n\nconst {\n  count,\n  decrementCount,\n  incrementCount,\n} = _useShallowStore((s) =\u003e ({\n  count: s.count,\n  decrementCount: s.decrementCount,\n  incrementCount: s.incrementCount,\n}));\n```\n\n## Installation\n\nInstallation of the dependencies.\n\n```term\nnpm install --save-dev @90pixel/zustand.macro babel-plugin-macros\n```\n\nor using yarn\n\n```term\nyarn add -D @90pixel/zustand.macro babel-plugin-macros\n```\n\n### Updating Your Babel config\n\nYou must add the `babel-plugin-macros` plugin into your babel plugin list.\n\n```js\n{\n  // ...\n  \"plugins\": [\n    // ...other plugins\n\n    // This must be added\n    \"macros\"\n  ]\n}\n```\n\n### Adding useShallowStore hook\n\nAdd this hook into your custom hooks.\n\n```js\nimport shallow from \"zustand/shallow\";\n// Your store..\nimport { useStore } from \"store\";\n\nexport default function useShallowStore(selector, equalityFn = shallow) {\n    return useStore(selector, equalityFn);\n}\n```\n\n### Configuration\n\nBy default when you import the macro, the import statement will be deleted at compile-time.\n\nShallow store implementation will be added instead.\n\n```js\nimport useStoreMacro from \"@90pixel/zustand.macro\";\n      ↓ ↓ ↓ ↓ ↓ ↓\nimport { useShallowStore as _useShallowStore } from \"hooks\";\n```\n\nAs you can see, import name `(useShallowStore)` and the import source `(import .. from 'hooks')` is hard coded.\n\nYou can change these in your `package.json` file.\n\n```json\n{\n  ...\n  \"babelMacros\": {\n\n    \"zustandMacro\": {\n      \"useStore\": {\n        \"importName\": \"useShallowStore\",\n        \"importSource\": \"hooks\"\n      }\n    }\n  }\n}\n```\n\n\n**You are ready to go now.**\n","funding_links":[],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2F90pixel%2Fzustand-macro","html_url":"https://awesome.ecosyste.ms/projects/github.com%2F90pixel%2Fzustand-macro","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2F90pixel%2Fzustand-macro/lists"}