{"_id":"@90pixel/zustand.macro","_rev":"4-d26fbdfebccc0a0890062362dbc8c6d4","name":"@90pixel/zustand.macro","dist-tags":{"latest":"1.1.4"},"versions":{"1.1.4":{"name":"@90pixel/zustand.macro","version":"1.1.4","author":{"name":"Serkan Bircan","email":"serkanbircan21@yandex.com","url":"https://github.com/fasetto"},"homepage":"https://github.com/90pixel/zustand-macro","bugs":{"url":"https://github.com/90pixel/zustand-macro/issues"},"license":"MIT","main":"build/index.macro.js","types":"build/index.macro.d.ts","keywords":["babel-macro","babel-plugin-macros","zustand"],"scripts":{"build":"tsc","test":"jest","test:update":"jest --updateSnapshot"},"dependencies":{"@babel/helper-module-imports":"^7.14.5","babel-plugin-macros":"^3.1.0"},"devDependencies":{"@babel/core":"^7.14.6","@types/babel-plugin-macros":"^2.8.5","@types/babel-plugin-tester":"^9.0.4","@types/jest":"^26.0.24","@types/node":"^16.3.3","babel-plugin-tester":"^10.1.0","jest":"^27.0.6","ts-jest":"^27.0.3","typescript":"^4.3.5"},"peerDependencies":{"babel-plugin-macros":"^3.1.0"},"babelMacros":{"zustandMacro":{"useStore":{"importName":"useShallowStore","importSource":"hooks"}}},"gitHead":"b6430cb25801c6df083f88e96796cecf9e575f4f","description":"

zustand.macro

\"babel-macro\" \"npm\"

zustand.macro

\"babel-macro\" \"npm\"\n

zustand.macro

\n\"babel-macro\"\n\n\"npm\"\n\n\n\"npm\"\n\n\"NPM\"\n
\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
\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) => ({\n count: 0,\n incrementCount: () => set((state) => ({ count: state.count + 1 })),\n decrementCount: () => set((state) => ({ 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 `` 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) => 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) => ({\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) => ({\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","readmeFilename":"README.md"}