Merge pull request #7 from react18-tools/enable-server-side

Enable server side

.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 "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."
+        run: npm deprecate @mayank1513/r18gs "Please use https://www.npmjs.com/package/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

@@ -8,8 +8,6 @@ I have built wonderful libraries utilizing React18 features using Zustand. They
 
 Thus, I decided to create a bare minimum, ultra-light store that creates shared state even while importing components from separate files for better treeshaking.
 
-> Will be using this library soon to fix issues with `nextjs-themes`.
-
 ## Features
 
 ✅ Full TypeScript Support
@@ -18,6 +16,8 @@ Thus, I decided to create a bare minimum, ultra-light store that creates shared
 
 ✅ Works with all build systems/tools/frameworks for React18
 
+✅ Works for both client side and server side components (be careful, separate states are created for server side and client side. Any changes done on client side will not affect the server components.)
+
 ✅ 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

examples/nextjs/CHANGELOG.md

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

examples/nextjs/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "nextjs-example",
-	"version": "0.0.5",
+	"version": "0.0.6",
 	"private": true,
 	"scripts": {
 		"dev": "next dev",

examples/remix/CHANGELOG.md

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

examples/remix/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "remix-example",
-	"version": "0.0.5",
+	"version": "0.0.6",
 	"private": true,
 	"sideEffects": false,
 	"type": "module",

examples/vite/CHANGELOG.md

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

examples/vite/package.json

@@ -1,7 +1,7 @@
 {
 	"name": "vite-example",
 	"private": true,
-	"version": "0.0.5",
+	"version": "0.0.6",
 	"type": "module",
 	"scripts": {
 		"dev": "vite --port 3001",

lib/r18gs/CHANGELOG.md

@@ -1,5 +1,11 @@
 # r18gs
 
+## 0.1.0
+
+### Minor Changes
+
+- Remove client side hooks. Now this store works well with server components as well. Though, server side use is tricky and not recommended yet.
+
 ## 0.0.5
 
 ### Patch Changes

lib/r18gs/package.json

@@ -2,7 +2,7 @@
 	"name": "r18gs",
 	"author": "Mayank Kumar Chaudhari <https://mayank-chaudhari.vercel.app>",
 	"private": false,
-	"version": "0.0.5",
+	"version": "0.1.0",
 	"description": "A simple yet elegant, light weight, react18 global store to replace Zustand for better tree shaking.",
 	"main": "./index.ts",
 	"types": "./index.ts",
@@ -13,7 +13,7 @@
 	"bugs": {
 		"url": "https://github.com/react18-tools/react18-global-store/issues"
 	},
-	"homepage": "https://github.com/react18-tools/react18-global-store#readme",
+	"homepage": "https://react18-global-store.vercel.app/",
 	"sideEffects": false,
 	"license": "MIT",
 	"scripts": {
@@ -67,4 +67,4 @@
 		"mayank1513",
 		"turborepo-trmplate"
 	]
-}
+}

lib/r18gs/src/use-rgs.ts

@@ -1,4 +1,5 @@
-import { useCallback, useSyncExternalStore } from "react";
+/* eslint-disable @typescript-eslint/non-nullable-type-assertion-style -- as ! operator is forbidden by eslint*/
+import { useSyncExternalStore } from "react";
 
 interface React18GlobalStore {
 	listeners: (() => void)[];
@@ -11,10 +12,16 @@ export type SetStateAction<T> = (val: SetterArgType<T>) => void;
 
 declare global {
 	// eslint-disable-next-line no-var -- var required for global declaration.
-	var rgs: Record<string, React18GlobalStore>;
+	var rgs: Record<string, React18GlobalStore | undefined>;
+	// eslint-disable-next-line no-var -- var required for global declaration.
+	var setters: Record<string, SetStateAction<unknown> | undefined>;
+	// eslint-disable-next-line no-var -- var required for global declaration.
+	var subscribers: Record<string, ((listener: () => void) => () => void) | undefined>;
 }
 
 globalThis.rgs = {};
+globalThis.setters = {};
+globalThis.subscribers = {};
 
 /**
  * Use this hook similar to `useState` hook.
@@ -28,29 +35,33 @@ globalThis.rgs = {};
  * ```
  */
 export default function useRGS<T>(key: string, value?: T): [T, (val: SetterArgType<T>) => void] {
-	const setRGState = useCallback(
-		(val: SetterArgType<T>) => {
-			const rgs = globalThis.rgs[key] as React18GlobalStore;
-			rgs.value = val instanceof Function ? val(rgs.value as T) : val;
-			for (const listener of rgs.listeners) listener();
-		},
-		[key],
-	);
-	const subscribe = useCallback(
-		(listener: () => void) => {
-			if (!globalThis.rgs[key]) globalThis.rgs[key] = { listeners: [], value };
+	if (!globalThis.subscribers[key]) {
+		globalThis.subscribers[key] = (listener: () => void) => {
+			if (!globalThis.rgs[key]) {
+				/** opportunity to add initializer */
+				globalThis.rgs[key] = { listeners: [], value };
+			}
 			const rgs = globalThis.rgs[key] as React18GlobalStore;
 			rgs.listeners.push(listener);
 			return () => {
 				rgs.listeners = rgs.listeners.filter(l => l !== listener);
 			};
-		},
-		[key, value],
-	);
+		};
+	}
+	const subscribe = globalThis.subscribers[key] as (listener: () => void) => () => void;
+
+	if (!globalThis.setters[key]) {
+		globalThis.setters[key] = val => {
+			const rgs = globalThis.rgs[key] as React18GlobalStore;
+			rgs.value = val instanceof Function ? val(rgs.value as T) : val;
+			/** opportunity to add custom listener */
+			for (const listener of rgs.listeners) listener();
+		};
+	}
+	const setRGState = globalThis.setters[key] as SetStateAction<T>;
 
-	// 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, () => value as T);
+	const val = useSyncExternalStore<T>(subscribe, getSnapshot, getSnapshot);
 	return [val, setRGState];
 }