Merge pull request #5 from react18-tools/fix-server-snapshot

Fix server snapshot

.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 }}

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)
 

examples/nextjs/CHANGELOG.md

@@ -1,5 +1,13 @@
 # nextjs-example
 
+## 0.0.4
+
+### Patch Changes
+
+- Updated dependencies
+  - [email protected]
+  - [email protected]
+
 ## 0.0.3
 
 ### Patch Changes

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",

examples/remix/CHANGELOG.md

@@ -1,5 +1,13 @@
 # remix-example
 
+## 0.0.4
+
+### Patch Changes
+
+- Updated dependencies
+  - [email protected]
+  - [email protected]
+
 ## 0.0.3
 
 ### Patch Changes

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",

examples/vite/CHANGELOG.md

@@ -1,5 +1,13 @@
 # vite-example
 
+## 0.0.4
+
+### Patch Changes
+
+- Updated dependencies
+  - [email protected]
+  - [email protected]
+
 ## 0.0.3
 
 ### Patch Changes

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",

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

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<number>("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<number>(COUNTER);
+	return (
+		<div>
+			<h2>Client component 2</h2>
+			<b>{count}</b>
+		</div>
+	);
+}
+```
+
+```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 (
+		<div>
+			<h2>Clinet component 1</h2>
+			<input
+				onChange={e => {
+					setCount(parseInt(e.target.value.trim()));
+				}}
+				type="number"
+				value={count}
+			/>
+		</div>
+	);
+}
+```
+
+## 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
 

lib/r18gs/package.json

@@ -2,18 +2,18 @@
 	"name": "r18gs",
 	"author": "Mayank Kumar Chaudhari <https://mayank-chaudhari.vercel.app>",
 	"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": {

lib/r18gs/src/use-rgs.ts

@@ -51,6 +51,6 @@ export default function useRGS<T>(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<T>(subscribe, getSnapshot);
+	const val = useSyncExternalStore<T>(subscribe, getSnapshot, () => value);
 	return [val, setRGState];
 }