From 153703b4bad087c1aa8d7702d933bc2762d5a1df Mon Sep 17 00:00:00 2001 From: Mayank Date: Sun, 25 Feb 2024 11:26:51 +0000 Subject: [PATCH 1/6] return initial value as server snapshot to avoid missing serverSnapshot error --- lib/r18gs/src/use-rgs.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/lib/r18gs/src/use-rgs.ts b/lib/r18gs/src/use-rgs.ts index 23ec5978..ebf01504 100644 --- a/lib/r18gs/src/use-rgs.ts +++ b/lib/r18gs/src/use-rgs.ts @@ -51,6 +51,6 @@ export default function useRGS(key: string, value?: T): [T, (val: SetterArgTy // eslint-disable-next-line @typescript-eslint/no-unsafe-member-access -- temp fix const getSnapshot = () => (globalThis.rgs[key]?.value ?? value) as T; - const val = useSyncExternalStore(subscribe, getSnapshot); + const val = useSyncExternalStore(subscribe, getSnapshot, () => value); return [val, setRGState]; } From 78e9b5ab44631e9db3bcdb09be22c76e02a4952b Mon Sep 17 00:00:00 2001 From: Mayank Date: Sun, 25 Feb 2024 11:27:26 +0000 Subject: [PATCH 2/6] Prepare for changing repo name --- README.md | 10 ++--- lib/r18gs/README.md | 92 +++++++++++++++++++++++++++++++++++------- lib/r18gs/package.json | 6 +-- 3 files changed, 85 insertions(+), 23 deletions(-) diff --git a/README.md b/README.md index 6dd4d597..7efd66bf 100644 --- a/README.md +++ b/README.md @@ -1,6 +1,6 @@ # React18GlobalStore -[![test](https://github.com/react18-tools/r18gs/actions/workflows/test.yml/badge.svg)](https://github.com/react18-tools/r18gs/actions/workflows/test.yml) [![Maintainability](https://api.codeclimate.com/v1/badges/41f10c0e6846d1e8a56b/maintainability)](https://codeclimate.com/github/react18-tools/r18gs/maintainability) [![codecov](https://codecov.io/gh/react18-tools/r18gs/graph/badge.svg)](https://codecov.io/gh/react18-tools/r18gs) [![Version](https://img.shields.io/npm/v/r18gs.svg?colorB=green)](https://www.npmjs.com/package/r18gs) [![Downloads](https://img.jsdelivr.com/img.shields.io/npm/dt/r18gs.svg)](https://www.npmjs.com/package/r18gs) ![npm bundle size](https://img.shields.io/bundlephobia/minzip/r18gs) [![Gitpod ready-to-code](https://img.shields.io/badge/Gitpod-ready--to--code-blue?logo=gitpod)](https://gitpod.io/from-referrer/) +[![test](https://github.com/react18-tools/react18-global-store/actions/workflows/test.yml/badge.svg)](https://github.com/react18-tools/react18-global-store/actions/workflows/test.yml) [![Maintainability](https://api.codeclimate.com/v1/badges/41f10c0e6846d1e8a56b/maintainability)](https://codeclimate.com/github/react18-tools/react18-global-store/maintainability) [![codecov](https://codecov.io/gh/react18-tools/react18-global-store/graph/badge.svg)](https://codecov.io/gh/react18-tools/react18-global-store) [![Version](https://img.shields.io/npm/v/r18gs.svg?colorB=green)](https://www.npmjs.com/package/r18gs) [![Downloads](https://img.jsdelivr.com/img.shields.io/npm/dt/r18gs.svg)](https://www.npmjs.com/package/r18gs) ![npm bundle size](https://img.shields.io/bundlephobia/minzip/r18gs) [![Gitpod ready-to-code](https://img.shields.io/badge/Gitpod-ready--to--code-blue?logo=gitpod)](https://gitpod.io/from-referrer/) ## Motivation @@ -18,7 +18,7 @@ Thus, I decided to create a bare minimum, ultra-light store that creates shared ✅ Works with all build systems/tools/frameworks for React18 -✅ Doccumented with [Typedoc](https://react18-tools.github.io/r18gs) ([Docs](https://react18-tools.github.io/r18gs)) +✅ Doccumented with [Typedoc](https://react18-tools.github.io/react18-global-store) ([Docs](https://react18-tools.github.io/react18-global-store)) ✅ Next.js, Vite and Remix examples @@ -113,7 +113,7 @@ export default function Counter() { To build all apps and packages, run the following command: ``` -cd r18gs +cd react18-global-store pnpm build ``` @@ -122,7 +122,7 @@ pnpm build To develop all apps and packages, run the following command: ``` -cd r18gs +cd react18-global-store pnpm dev ``` @@ -131,7 +131,7 @@ Also, please 1. check out discussion for providing any feedback or sugestions. 2. Report any issues or feature requests in issues tab -### 🤩 Don't forger to start [this repo](https://github.com/mayank1513/r18gs)! +### 🤩 Don't forger to star [this repo](https://github.com/mayank1513/react18-global-store)! Want hands-on course for getting started with Turborepo? Check out [React and Next.js with TypeScript](https://mayank-chaudhari.vercel.app/courses/react-and-next-js-with-typescript) and [The Game of Chess with Next.js, React and TypeScrypt](https://www.udemy.com/course/game-of-chess-with-nextjs-react-and-typescrypt/?referralCode=851A28F10B254A8523FE) diff --git a/lib/r18gs/README.md b/lib/r18gs/README.md index d5bcc07d..7efd66bf 100644 --- a/lib/r18gs/README.md +++ b/lib/r18gs/README.md @@ -1,6 +1,6 @@ # React18GlobalStore -[![test](https://github.com/react18-tools/r18gs/actions/workflows/test.yml/badge.svg)](https://github.com/react18-tools/r18gs/actions/workflows/test.yml) [![Maintainability](https://api.codeclimate.com/v1/badges/41f10c0e6846d1e8a56b/maintainability)](https://codeclimate.com/github/react18-tools/r18gs/maintainability) [![codecov](https://codecov.io/gh/react18-tools/r18gs/graph/badge.svg)](https://codecov.io/gh/react18-tools/r18gs) [![Version](https://img.shields.io/npm/v/r18gs.svg?colorB=green)](https://www.npmjs.com/package/r18gs) [![Downloads](https://img.jsdelivr.com/img.shields.io/npm/dt/r18gs.svg)](https://www.npmjs.com/package/r18gs) ![npm bundle size](https://img.shields.io/bundlephobia/minzip/r18gs) [![Gitpod ready-to-code](https://img.shields.io/badge/Gitpod-ready--to--code-blue?logo=gitpod)](https://gitpod.io/from-referrer/) +[![test](https://github.com/react18-tools/react18-global-store/actions/workflows/test.yml/badge.svg)](https://github.com/react18-tools/react18-global-store/actions/workflows/test.yml) [![Maintainability](https://api.codeclimate.com/v1/badges/41f10c0e6846d1e8a56b/maintainability)](https://codeclimate.com/github/react18-tools/react18-global-store/maintainability) [![codecov](https://codecov.io/gh/react18-tools/react18-global-store/graph/badge.svg)](https://codecov.io/gh/react18-tools/react18-global-store) [![Version](https://img.shields.io/npm/v/r18gs.svg?colorB=green)](https://www.npmjs.com/package/r18gs) [![Downloads](https://img.jsdelivr.com/img.shields.io/npm/dt/r18gs.svg)](https://www.npmjs.com/package/r18gs) ![npm bundle size](https://img.shields.io/bundlephobia/minzip/r18gs) [![Gitpod ready-to-code](https://img.shields.io/badge/Gitpod-ready--to--code-blue?logo=gitpod)](https://gitpod.io/from-referrer/) ## Motivation @@ -18,12 +18,14 @@ Thus, I decided to create a bare minimum, ultra-light store that creates shared ✅ Works with all build systems/tools/frameworks for React18 -✅ Doccumented with [Typedoc](https://react18-tools.github.io/r18gs) ([Docs](https://react18-tools.github.io/r18gs)) +✅ Doccumented with [Typedoc](https://react18-tools.github.io/react18-global-store) ([Docs](https://react18-tools.github.io/react18-global-store)) ✅ Next.js, Vite and Remix examples ## Install +> A canonical package with longer name is also published `react18-global-store` + ```bash $ pnpm add r18gs ``` @@ -40,12 +42,78 @@ or $ yarn add r18gs ``` +## Usage + +Use this hook similar to `useState` hook. + +The difference is that you need to pass an unique key - unique across the app to identify +and make this state accessible to all client components. + +```tsx +const [state, setState] = useRGS("counter", 1); +``` + +You can access the same state across all client side components using unique. + +> It is recommended to store your keys in separate file to avoid typos and unnecessary conflicts. + +### Example + +```tsx +// constants/global-states.ts +export const COUNTER = "counter"; +``` + +```tsx +// components/display.tsx +"use client"; + +import useRGS from "r18gs"; +import { COUNTER } from "../constants/global-states"; + +export default function Display() { + const [count] = useRGS(COUNTER); + return ( +
+

Client component 2

+ {count} +
+ ); +} +``` + +```tsx +// components/counter.tsx +"use client"; + +import useRGS from "r18gs"; +import { COUNTER } from "../constants/global-states"; + +export default function Counter() { + const [count, setCount] = useRGS(COUNTER, 0); + return ( +
+

Clinet component 1

+ { + setCount(parseInt(e.target.value.trim())); + }} + type="number" + value={count} + /> +
+ ); +} +``` + +## Contribute + ### Build To build all apps and packages, run the following command: ``` -cd r18gs +cd react18-global-store pnpm build ``` @@ -54,26 +122,20 @@ pnpm build To develop all apps and packages, run the following command: ``` -cd r18gs +cd react18-global-store pnpm dev ``` -## Useful Links - -Learn more about the power of Turborepo: +Also, please -- [Tasks](https://turbo.build/repo/docs/core-concepts/monorepos/running-tasks) -- [Caching](https://turbo.build/repo/docs/core-concepts/caching) -- [Remote Caching](https://turbo.build/repo/docs/core-concepts/remote-caching) -- [Filtering](https://turbo.build/repo/docs/core-concepts/monorepos/filtering) -- [Configuration Options](https://turbo.build/repo/docs/reference/configuration) -- [CLI Usage](https://turbo.build/repo/docs/reference/command-line-reference) +1. check out discussion for providing any feedback or sugestions. +2. Report any issues or feature requests in issues tab -### 🤩 Don't forger to start [this repo](https://github.com/mayank1513/r18gs)! +### 🤩 Don't forger to star [this repo](https://github.com/mayank1513/react18-global-store)! Want hands-on course for getting started with Turborepo? Check out [React and Next.js with TypeScript](https://mayank-chaudhari.vercel.app/courses/react-and-next-js-with-typescript) and [The Game of Chess with Next.js, React and TypeScrypt](https://www.udemy.com/course/game-of-chess-with-nextjs-react-and-typescrypt/?referralCode=851A28F10B254A8523FE) -![Repo Stats](https://repobeats.axiom.co/api/embed/2ef1a24385037998386148afe5a98ded6006f410.svg "Repobeats analytics image") +![Repo Stats](https://repobeats.axiom.co/api/embed/ec3e74d795ed805a0fce67c0b64c3f08872e7945.svg "Repobeats analytics image") ## License diff --git a/lib/r18gs/package.json b/lib/r18gs/package.json index 019b5f8b..26400ba3 100644 --- a/lib/r18gs/package.json +++ b/lib/r18gs/package.json @@ -8,12 +8,12 @@ "types": "./index.ts", "repository": { "type": "git", - "url": "git+https://github.com/react18-tools/r18gs.git" + "url": "git+https://github.com/react18-tools/react18-global-store.git" }, "bugs": { - "url": "https://github.com/react18-tools/r18gs/issues" + "url": "https://github.com/react18-tools/react18-global-store/issues" }, - "homepage": "https://github.com/react18-tools/r18gs/tree/main/lib/fork-me#readme", + "homepage": "https://github.com/react18-tools/react18-global-store#readme", "sideEffects": false, "license": "MIT", "scripts": { From 5ea806e96f8b15089b93f8eb9b4237200f1e970a Mon Sep 17 00:00:00 2001 From: Mayank Date: Sun, 25 Feb 2024 11:28:27 +0000 Subject: [PATCH 3/6] Changeset --- examples/nextjs/CHANGELOG.md | 8 ++++++++ examples/nextjs/package.json | 2 +- examples/remix/CHANGELOG.md | 8 ++++++++ examples/remix/package.json | 2 +- examples/vite/CHANGELOG.md | 8 ++++++++ examples/vite/package.json | 2 +- lib/r18gs/CHANGELOG.md | 6 ++++++ lib/r18gs/package.json | 2 +- 8 files changed, 34 insertions(+), 4 deletions(-) diff --git a/examples/nextjs/CHANGELOG.md b/examples/nextjs/CHANGELOG.md index add0492f..6102b1cd 100644 --- a/examples/nextjs/CHANGELOG.md +++ b/examples/nextjs/CHANGELOG.md @@ -1,5 +1,13 @@ # nextjs-example +## 0.0.4 + +### Patch Changes + +- Updated dependencies + - r18gs@0.0.4 + - shared-ui@0.0.0 + ## 0.0.3 ### Patch Changes diff --git a/examples/nextjs/package.json b/examples/nextjs/package.json index b27e59f6..a15e1a22 100644 --- a/examples/nextjs/package.json +++ b/examples/nextjs/package.json @@ -1,6 +1,6 @@ { "name": "nextjs-example", - "version": "0.0.3", + "version": "0.0.4", "private": true, "scripts": { "dev": "next dev", diff --git a/examples/remix/CHANGELOG.md b/examples/remix/CHANGELOG.md index a5547db1..b4b3c8d9 100644 --- a/examples/remix/CHANGELOG.md +++ b/examples/remix/CHANGELOG.md @@ -1,5 +1,13 @@ # remix-example +## 0.0.4 + +### Patch Changes + +- Updated dependencies + - r18gs@0.0.4 + - shared-ui@0.0.0 + ## 0.0.3 ### Patch Changes diff --git a/examples/remix/package.json b/examples/remix/package.json index 1c3c6f98..c1e16c57 100644 --- a/examples/remix/package.json +++ b/examples/remix/package.json @@ -1,6 +1,6 @@ { "name": "remix-example", - "version": "0.0.3", + "version": "0.0.4", "private": true, "sideEffects": false, "type": "module", diff --git a/examples/vite/CHANGELOG.md b/examples/vite/CHANGELOG.md index fd45b662..3ad9d27c 100644 --- a/examples/vite/CHANGELOG.md +++ b/examples/vite/CHANGELOG.md @@ -1,5 +1,13 @@ # vite-example +## 0.0.4 + +### Patch Changes + +- Updated dependencies + - r18gs@0.0.4 + - shared-ui@0.0.0 + ## 0.0.3 ### Patch Changes diff --git a/examples/vite/package.json b/examples/vite/package.json index a910ef26..b490bef3 100644 --- a/examples/vite/package.json +++ b/examples/vite/package.json @@ -1,7 +1,7 @@ { "name": "vite-example", "private": true, - "version": "0.0.3", + "version": "0.0.4", "type": "module", "scripts": { "dev": "vite --port 3001", diff --git a/lib/r18gs/CHANGELOG.md b/lib/r18gs/CHANGELOG.md index 439e8f26..6a5d3772 100644 --- a/lib/r18gs/CHANGELOG.md +++ b/lib/r18gs/CHANGELOG.md @@ -1,5 +1,11 @@ # r18gs +## 0.0.4 + +### Patch Changes + +- Fix getServerSnapshot errors on some projects. + ## 0.0.3 ### Patch Changes diff --git a/lib/r18gs/package.json b/lib/r18gs/package.json index 26400ba3..617b8e8f 100644 --- a/lib/r18gs/package.json +++ b/lib/r18gs/package.json @@ -2,7 +2,7 @@ "name": "r18gs", "author": "Mayank Kumar Chaudhari ", "private": false, - "version": "0.0.3", + "version": "0.0.4", "description": "A simple yet elegant, light weight, react18 global store to replace Zustand for better tree shaking.", "main": "./index.ts", "types": "./index.ts", From 0d485a4e69f318a35c14fa23ea51f1f092c9c23d Mon Sep 17 00:00:00 2001 From: Mayank Date: Sun, 25 Feb 2024 11:35:57 +0000 Subject: [PATCH 4/6] Fix maintainability badge --- README.md | 2 +- lib/r18gs/README.md | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/README.md b/README.md index 7efd66bf..298bdc86 100644 --- a/README.md +++ b/README.md @@ -1,6 +1,6 @@ # React18GlobalStore -[![test](https://github.com/react18-tools/react18-global-store/actions/workflows/test.yml/badge.svg)](https://github.com/react18-tools/react18-global-store/actions/workflows/test.yml) [![Maintainability](https://api.codeclimate.com/v1/badges/41f10c0e6846d1e8a56b/maintainability)](https://codeclimate.com/github/react18-tools/react18-global-store/maintainability) [![codecov](https://codecov.io/gh/react18-tools/react18-global-store/graph/badge.svg)](https://codecov.io/gh/react18-tools/react18-global-store) [![Version](https://img.shields.io/npm/v/r18gs.svg?colorB=green)](https://www.npmjs.com/package/r18gs) [![Downloads](https://img.jsdelivr.com/img.shields.io/npm/dt/r18gs.svg)](https://www.npmjs.com/package/r18gs) ![npm bundle size](https://img.shields.io/bundlephobia/minzip/r18gs) [![Gitpod ready-to-code](https://img.shields.io/badge/Gitpod-ready--to--code-blue?logo=gitpod)](https://gitpod.io/from-referrer/) +[![test](https://github.com/react18-tools/react18-global-store/actions/workflows/test.yml/badge.svg)](https://github.com/react18-tools/react18-global-store/actions/workflows/test.yml) [![Maintainability](https://api.codeclimate.com/v1/badges/a79e66d0da36cb9a86b6/maintainability)](https://codeclimate.com/github/react18-tools/reacr18-global-store/maintainability) [![codecov](https://codecov.io/gh/react18-tools/react18-global-store/graph/badge.svg)](https://codecov.io/gh/react18-tools/react18-global-store) [![Version](https://img.shields.io/npm/v/r18gs.svg?colorB=green)](https://www.npmjs.com/package/r18gs) [![Downloads](https://img.jsdelivr.com/img.shields.io/npm/dt/r18gs.svg)](https://www.npmjs.com/package/r18gs) ![npm bundle size](https://img.shields.io/bundlephobia/minzip/r18gs) [![Gitpod ready-to-code](https://img.shields.io/badge/Gitpod-ready--to--code-blue?logo=gitpod)](https://gitpod.io/from-referrer/) ## Motivation diff --git a/lib/r18gs/README.md b/lib/r18gs/README.md index 7efd66bf..298bdc86 100644 --- a/lib/r18gs/README.md +++ b/lib/r18gs/README.md @@ -1,6 +1,6 @@ # React18GlobalStore -[![test](https://github.com/react18-tools/react18-global-store/actions/workflows/test.yml/badge.svg)](https://github.com/react18-tools/react18-global-store/actions/workflows/test.yml) [![Maintainability](https://api.codeclimate.com/v1/badges/41f10c0e6846d1e8a56b/maintainability)](https://codeclimate.com/github/react18-tools/react18-global-store/maintainability) [![codecov](https://codecov.io/gh/react18-tools/react18-global-store/graph/badge.svg)](https://codecov.io/gh/react18-tools/react18-global-store) [![Version](https://img.shields.io/npm/v/r18gs.svg?colorB=green)](https://www.npmjs.com/package/r18gs) [![Downloads](https://img.jsdelivr.com/img.shields.io/npm/dt/r18gs.svg)](https://www.npmjs.com/package/r18gs) ![npm bundle size](https://img.shields.io/bundlephobia/minzip/r18gs) [![Gitpod ready-to-code](https://img.shields.io/badge/Gitpod-ready--to--code-blue?logo=gitpod)](https://gitpod.io/from-referrer/) +[![test](https://github.com/react18-tools/react18-global-store/actions/workflows/test.yml/badge.svg)](https://github.com/react18-tools/react18-global-store/actions/workflows/test.yml) [![Maintainability](https://api.codeclimate.com/v1/badges/a79e66d0da36cb9a86b6/maintainability)](https://codeclimate.com/github/react18-tools/reacr18-global-store/maintainability) [![codecov](https://codecov.io/gh/react18-tools/react18-global-store/graph/badge.svg)](https://codecov.io/gh/react18-tools/react18-global-store) [![Version](https://img.shields.io/npm/v/r18gs.svg?colorB=green)](https://www.npmjs.com/package/r18gs) [![Downloads](https://img.jsdelivr.com/img.shields.io/npm/dt/r18gs.svg)](https://www.npmjs.com/package/r18gs) ![npm bundle size](https://img.shields.io/bundlephobia/minzip/r18gs) [![Gitpod ready-to-code](https://img.shields.io/badge/Gitpod-ready--to--code-blue?logo=gitpod)](https://gitpod.io/from-referrer/) ## Motivation From 595c54bde2f4add6deb3662a88ba7d9e161561db Mon Sep 17 00:00:00 2001 From: Mayank Date: Sun, 25 Feb 2024 11:44:41 +0000 Subject: [PATCH 5/6] deprecate scopped packages --- .github/workflows/publish.yml | 5 +++++ 1 file changed, 5 insertions(+) diff --git a/.github/workflows/publish.yml b/.github/workflows/publish.yml index 2de89a4d..72eaa641 100644 --- a/.github/workflows/publish.yml +++ b/.github/workflows/publish.yml @@ -63,3 +63,8 @@ jobs: npm publish --provenance --access public env: NODE_AUTH_TOKEN: ${{ secrets.NPM_AUTH_TOKEN }} + + - name: Mark scoped package as deprecated + run: npm deprecate @mayank1513/r18gs "We initially created scoped packages to have similarities with the GitHub Public Repository (which requires packages to be scoped). We are no longer using GPR and thus deprecating all scoped packages for which corresponding un-scoped packages exist." + env: + NODE_AUTH_TOKEN: ${{ secrets.NPM_AUTH_TOKEN }} From 29a1c21d869fdd8a903ecd0052c4df5952bd1dae Mon Sep 17 00:00:00 2001 From: Mayank Date: Sun, 25 Feb 2024 11:46:04 +0000 Subject: [PATCH 6/6] fix deprecation message --- .github/workflows/publish.yml | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/.github/workflows/publish.yml b/.github/workflows/publish.yml index 72eaa641..4e97f537 100644 --- a/.github/workflows/publish.yml +++ b/.github/workflows/publish.yml @@ -65,6 +65,6 @@ jobs: NODE_AUTH_TOKEN: ${{ secrets.NPM_AUTH_TOKEN }} - name: Mark scoped package as deprecated - run: npm deprecate @mayank1513/r18gs "We initially created scoped packages to have similarities with the GitHub Public Repository (which requires packages to be scoped). We are no longer using GPR and thus deprecating all scoped packages for which corresponding un-scoped packages exist." + run: npm deprecate @mayank1513/r18gs "Please use r18gs instead. We initially created scoped packages to have similarities with the GitHub Public Repository (which requires packages to be scoped). We are no longer using GPR and thus deprecating all scoped packages for which corresponding un-scoped packages exist." env: NODE_AUTH_TOKEN: ${{ secrets.NPM_AUTH_TOKEN }}