diff --git a/.github/workflows/publish.yml b/.github/workflows/publish.yml index 2de89a4d..4e97f537 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 "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 }} diff --git a/README.md b/README.md index 6dd4d597..298bdc86 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/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 @@ -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/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/README.md b/lib/r18gs/README.md index d5bcc07d..298bdc86 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/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 @@ -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..617b8e8f 100644 --- a/lib/r18gs/package.json +++ b/lib/r18gs/package.json @@ -2,18 +2,18 @@ "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", "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": { 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]; }