From 709d1568670ca10bef0840cab7aca34eef168491 Mon Sep 17 00:00:00 2001 From: Gading Nasution Date: Tue, 11 Oct 2022 15:05:29 +0700 Subject: [PATCH 1/4] feat: add createStore helpers --- README.md | 21 ++++++++++++++++++--- src/index.ts | 20 ++++++++++++++++++-- 2 files changed, 36 insertions(+), 5 deletions(-) diff --git a/README.md b/README.md index 3f82846..c452d5b 100644 --- a/README.md +++ b/README.md @@ -108,13 +108,13 @@ export const APP_COUNT: StoreParams = { ## Best Practice ### Custom hooks -Instead of creating store object in `stores/app.js` file, you can wrap it into custom hooks. Example: `stores/count.js`. +Instead of creating store object in `stores/app.js` file, you can create a custom hooks with `createStore()`. Example: `stores/count.js`. ```js // file: stores/count.js -import useStore from "swr-global-state"; +import { createStore } from "swr-global-state"; -const useCount = () => useStore({ +const useCount = createStore({ key: "@app/count", // (Required) state key initial: 0, // <- (Required) initial state persist: true // <- (Optional) if you want to persist the state to local storage, then set it to true. @@ -168,6 +168,21 @@ export default GetCountComponent; ```ts // file: stores/count.ts +import { createStore, StoreHooks } from "swr-global-state"; + +const useCount: StoreHooks = createStore({ + key: "@app/count", + initial: 0 +}); + +export default useCount; +``` + +or you still can wrap `useStore` with yourself + +```ts +// file: stores/count.ts + import useStore, { Store } from "swr-global-state"; const useCount = (): Store => useStore({ diff --git a/src/index.ts b/src/index.ts index 1875b16..2412ea7 100644 --- a/src/index.ts +++ b/src/index.ts @@ -14,10 +14,16 @@ export type StateMutator = (data?: T|StateMutatorCallback) => void; /** * Type for returns from `useStore` hooks. - * @see https://github.com/gadingnst/swr-global-state#example-custom-hooks-with-typescript for-example case + * @see https://github.com/gadingnst/swr-global-state#example-custom-hooks-with-typescript for example case */ export type Store= readonly [T, StateMutator]; +/** + * Type for return wrapper function that wraps `Store` + * @see https://github.com/gadingnst/swr-global-state#example-custom-hooks-with-typescript for example case + */ +export type StoreHooks = () => Store; + /** * Type for params `useStore` hooks * @see https://github.com/gadingnst/swr-global-state#create-a-store-object @@ -69,7 +75,7 @@ const setCache = (key: Key, value: T): void => { * Using global state with SWR helpers * @param data state that to be shared or cached * @returns {Store} state and setter - * @see https://github.com/gadingnst/swr-global-state#best-practice for example best practice usage + * @see https://github.com/gadingnst/swr-global-state#create-a-store-object for example usage */ export function useStore(data: StoreParams): Store { const { key, initial, persist } = data; @@ -109,4 +115,14 @@ export function useStore(data: StoreParams): Store { return [state as T, setState] as const; } +/** + * Create custom hooks that wraps `useStore` to another function. + * @param data state that to be shared or cached + * @returns {StoreHooks} state and setter + * @see https://github.com/gadingnst/swr-global-state#best-practice for example best practice usage + */ +export function createStore(data: StoreParams): StoreHooks { + return () => useStore(data); +} + export default useStore; From 6e2d2d94baf19b23536538e7b8bb5bf1bba6da9b Mon Sep 17 00:00:00 2001 From: Gading Nasution Date: Tue, 11 Oct 2022 15:08:52 +0700 Subject: [PATCH 2/4] version: v1.4.0 --- package-lock.json | 4 ++-- package.json | 2 +- 2 files changed, 3 insertions(+), 3 deletions(-) diff --git a/package-lock.json b/package-lock.json index 1ca25e3..c959ec9 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1,12 +1,12 @@ { "name": "swr-global-state", - "version": "1.3.3", + "version": "1.4.0", "lockfileVersion": 2, "requires": true, "packages": { "": { "name": "swr-global-state", - "version": "1.3.3", + "version": "1.4.0", "license": "MIT", "devDependencies": { "@size-limit/preset-small-lib": "^8.1.0", diff --git a/package.json b/package.json index 5d629c7..3c9d8c1 100644 --- a/package.json +++ b/package.json @@ -2,7 +2,7 @@ "name": "swr-global-state", "author": "Sutan Gading Fadhillah Nasution ", "description": "Zero-setup & simple global state management for React Components", - "version": "1.3.3", + "version": "1.4.0", "license": "MIT", "main": "dist/index.js", "typings": "dist/index.d.ts", From ad8fba3727b18aa9e5d24e56a173d81941185162 Mon Sep 17 00:00:00 2001 From: Gading Nasution Date: Tue, 11 Oct 2022 16:04:00 +0700 Subject: [PATCH 3/4] docs: update --- README.md | 14 ++++++++------ 1 file changed, 8 insertions(+), 6 deletions(-) diff --git a/README.md b/README.md index c452d5b..c8d61f1 100644 --- a/README.md +++ b/README.md @@ -178,17 +178,19 @@ const useCount: StoreHooks = createStore({ export default useCount; ``` -or you still can wrap `useStore` with yourself +or you still can wrap `useStore` in another function with yourself ```ts // file: stores/count.ts import useStore, { Store } from "swr-global-state"; -const useCount = (): Store => useStore({ - key: "@app/count", - initial: 0 -}); +function useCount(): Store { + return useStore({ + key: "@app/count", + initial: 0 + }); +} export default useCount; ``` @@ -209,7 +211,7 @@ You can see: ## If this library can cover `Redux`, how about asynchronous state management like `redux-saga`, `redux-thunk`, or `redux-promise`? [SWR](https://swr.vercel.app) can cover this. [see](https://github.com/vercel/swr/discussions/587). -At this point, `swr-global-state` only handles synchronous global state in client-side. If you want to handle the asynchronous global state requested from the API, maybe you should use a library like [SWR](https://swr.vercel.app) or [TanStack Query](https://tanstack.com/query/v4) . But I recommend `SWR`, because this `swr-global-state` is built and depends on `SWR` helpers, so you don't need to install other libraries. +At this point, `swr-global-state` only handles synchronous global state in client-side. If you want to handle the asynchronous global state requested from the API, maybe you should use a library like [SWR](https://swr.vercel.app) or [TanStack Query](https://tanstack.com/query/v4) . But I recommend `SWR`, because this `swr-global-state` is built and depends on `SWR` helpers, and you don't need to install other libraries. So the conclusion is, if you use [SWR](https://www.npmjs.com/package/swr) + [swr-global-state](https://www.npmjs.com/package/swr-global-state), you basically don't need to use `Redux` or `Context API` anymore. From b3250ee9ecad06eb4f40b684e26eeafb931b5372 Mon Sep 17 00:00:00 2001 From: Gading Nasution Date: Tue, 11 Oct 2022 16:10:52 +0700 Subject: [PATCH 4/4] docs: add support --- .github/FUNDING.yml | 2 ++ README.md | 10 ++++++++++ 2 files changed, 12 insertions(+) create mode 100644 .github/FUNDING.yml diff --git a/.github/FUNDING.yml b/.github/FUNDING.yml new file mode 100644 index 0000000..310d3d5 --- /dev/null +++ b/.github/FUNDING.yml @@ -0,0 +1,2 @@ +ko_fi: gadingnst +custom: ['https://trakteer.id/sutanlab', 'https://karyakarsa.com/sutanlab'] diff --git a/README.md b/README.md index c8d61f1..df4d4e5 100644 --- a/README.md +++ b/README.md @@ -26,6 +26,9 @@ Zero-setup & simple global state management for React Components based on [SWR]( - [Publishing](#publishing) - [License](#license) - [Feedbacks and Issues](#feedbacks-and-issues) +- [Support](#support) + - [Global](#global) + - [Indonesia](#indonesia) # Getting Started ## Install @@ -228,6 +231,13 @@ So the conclusion is, if you use [SWR](https://www.npmjs.com/package/swr) + [swr # Feedbacks and Issues Feel free to open issues if you found any feedback or issues on `swr-global-state`. And feel free if you want to contribute too! 😄 +# Support +## Global +[![ko-fi](https://www.ko-fi.com/img/githubbutton_sm.svg)](https://ko-fi.com/gadingnst) +## Indonesia +- [Trakteer](https://trakteer.id/sutanlab) +- [Karyakarsa](https://karyakarsa.com/sutanlab) + --- Built with ❤️ by [Sutan Gading Fadhillah Nasution](https://github.com/gadingnst) on 2022