@streamlayer/react-polyfills 0.1.46 → 0.1.47

package/lib/index.d.ts

@@ -1,4 +1,4 @@
-import * as modern from '@nanostores/react';
 import * as modernReact from 'react';
-export declare const useStore: typeof modern.useStore;
-export declare const useTransition: (() => (boolean | ((fn: Function) => void))[]) | typeof modernReact.useTransition;
+import * as legacy from './legacy';
+export declare const useStore: typeof legacy.useStore;
+export declare const useTransition: typeof modernReact.useTransition;

package/lib/index.js

@@ -1,7 +1,6 @@
-import * as modern from '@nanostores/react';
 import * as modernReact from 'react';
 import * as legacy from './legacy';
-export const useStore = process.env.REACT_LEGACY ? legacy.useStore : modern.useStore;
+export const useStore = legacy.useStore;
 const legacyUseTransition = () => {
     return [
         false,
@@ -10,4 +9,4 @@ const legacyUseTransition = () => {
         },
     ];
 };
-export const useTransition = process.env.REACT_LEGACY ? legacyUseTransition : modernReact.useTransition;
+export const useTransition = modernReact.useTransition || legacyUseTransition;

package/lib/legacy.d.ts

@@ -1,12 +1,14 @@
 import { type Store, type StoreValue } from 'nanostores';
+import React from 'react';
 type StoreKeys<T> = T extends {
     setKey: (k: infer K, v: any) => unknown;
 } ? K : never;
 export interface UseStoreOptions<SomeStore> {
+    deps?: React.DependencyList;
     /**
      * Will re-render components only on specific key changes.
      */
     keys?: StoreKeys<SomeStore>[];
 }
-export declare function useStore<SomeStore extends Store>(store: Store, opts?: UseStoreOptions<SomeStore>): StoreValue<SomeStore>;
+export declare function useStore<SomeStore extends Store>(store: SomeStore, { keys, deps }?: UseStoreOptions<SomeStore>): StoreValue<SomeStore>;
 export {};

package/lib/legacy.js

@@ -1,10 +1,26 @@
 // eslint-disable-next-line @typescript-eslint/ban-ts-comment
 // @ts-nocheck
 import { listenKeys } from 'nanostores';
-import { useCallback } from 'react';
+import React from 'react';
 import { useSyncExternalStore } from 'use-sync-external-store/shim';
-export function useStore(store, opts = {}) {
-    const subscribe = useCallback((onChange) => (opts.keys ? listenKeys(store, opts.keys, onChange) : store.listen(onChange)), [opts.keys, store]);
-    const get = store.get.bind(store);
+const emit = (snapshotRef, onChange) => (value) => {
+    if (snapshotRef.current === value)
+        return;
+    snapshotRef.current = value;
+    onChange();
+};
+export function useStore(store, { keys, deps = [store, keys] } = {}) {
+    const snapshotRef = React.useRef();
+    snapshotRef.current = store.get();
+    const subscribe = React.useCallback((onChange) => {
+        emit(snapshotRef, onChange)(store.value);
+        return keys?.length > 0
+            ? listenKeys(store, keys, emit(snapshotRef, onChange))
+            : store.listen(emit(snapshotRef, onChange));
+    }, deps);
+    const get = () => snapshotRef.current;
+    if (React.useSyncExternalStore) {
+        return React.useSyncExternalStore(subscribe, get, get);
+    }
     return useSyncExternalStore(subscribe, get, get);
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@streamlayer/react-polyfills",
-  "version": "0.1.46",
+  "version": "0.1.47",
   "type": "module",
   "main": "./lib/index.js",
   "typings": "./lib/index.d.ts",
@@ -21,7 +21,6 @@
     }
   },
   "peerDependencies": {
-    "@nanostores/react": "^0.7.2",
     "nanostores": "^0.11.4",
     "react": "18.3.1",
     "use-sync-external-store": "^1.4.0"