use-everywhere 0.6.0 → 0.8.0

package/dist/index.js

@@ -1,15 +1,18 @@
 'use client';
 import {
   DEFAULT_NAME,
+  configureChannel,
   configureStore,
   getChannel,
   getLeader,
+  getReducer,
   getSharedStore,
   getStore,
   useClientId,
   usePeers,
+  usePresenceMetadata,
   warnOnInitialMismatch
-} from "./chunk-YOXUZYKA.js";
+} from "./chunk-75TICQ7E.js";
 
 // src/use-shared-state.ts
 import { useCallback, useSyncExternalStore } from "react";
@@ -17,7 +20,9 @@ function useSharedState(key, initial, options) {
   const storeName = options?.store ?? DEFAULT_NAME;
   const store = getStore(storeName, options?.scope ?? "everywhere");
   store.registerKey(key, initial);
-  warnOnInitialMismatch(storeName, key, initial);
+  if (process.env.NODE_ENV !== "production") {
+    warnOnInitialMismatch(storeName, key, initial);
+  }
   const value = useSyncExternalStore(
     useCallback((onChange) => store.subscribeKey(key, onChange), [store, key]),
     () => store.getSnapshot()[key],
@@ -30,27 +35,98 @@ function useSharedState(key, initial, options) {
   return [value, setValue];
 }
 
+// src/use-shared-reducer.ts
+import { useCallback as useCallback2, useSyncExternalStore as useSyncExternalStore2 } from "react";
+function useSharedReducer(reducer, initial, options) {
+  const engine = getReducer(
+    options?.name ?? DEFAULT_NAME,
+    options?.key ?? "default",
+    reducer,
+    initial
+  );
+  const value = useSyncExternalStore2(
+    useCallback2((onChange) => engine.subscribe(onChange), [engine]),
+    () => engine.getSnapshot(),
+    () => initial
+  );
+  const dispatch = useCallback2((action) => engine.dispatch(action), [engine]);
+  return [value, dispatch];
+}
+
+// src/use-shared-selector.ts
+import { useCallback as useCallback3, useRef, useSyncExternalStore as useSyncExternalStore3 } from "react";
+function useSharedStore(selector, options) {
+  const store = getStore(options?.store ?? DEFAULT_NAME, options?.scope ?? "everywhere");
+  const equal = options?.equal ?? Object.is;
+  const selectorRef = useRef(selector);
+  selectorRef.current = selector;
+  const equalRef = useRef(equal);
+  equalRef.current = equal;
+  const cache = useRef(null);
+  const getSelection = useCallback3(() => {
+    const source = store.getSnapshot();
+    const select = selectorRef.current;
+    const previous = cache.current;
+    if (previous && previous.source === source && previous.select === select) return previous.value;
+    const next = select(source);
+    const value = previous && equalRef.current(previous.value, next) ? previous.value : next;
+    cache.current = { source, select, value };
+    return value;
+  }, [store]);
+  return useSyncExternalStore3(
+    useCallback3((onChange) => store.subscribe(onChange), [store]),
+    getSelection,
+    getSelection
+  );
+}
+function shallowEqual(a, b) {
+  if (Object.is(a, b)) return true;
+  if (typeof a !== "object" || a === null || typeof b !== "object" || b === null) return false;
+  const left = a;
+  const right = b;
+  const keys = Object.keys(left);
+  if (keys.length !== Object.keys(right).length) return false;
+  return keys.every((key) => Object.is(left[key], right[key]));
+}
+
 // src/use-message.ts
-import { useEffect, useRef } from "react";
+import { useEffect, useRef as useRef2 } from "react";
 function useChannel(name) {
   return getChannel(name);
 }
-function useMessage(channel, type, handler) {
-  const handlerRef = useRef(handler);
+function useMessage(channel, type, handler, options) {
+  const handlerRef = useRef2(handler);
   useEffect(() => {
     handlerRef.current = handler;
   });
-  useEffect(
-    () => channel.on(type, (payload, meta) => handlerRef.current(payload, meta)),
-    [channel, type]
-  );
+  const enabled = options?.enabled ?? true;
+  const once = options?.once ?? false;
+  useEffect(() => {
+    if (!enabled) return;
+    return channel.on(type, (payload, meta) => handlerRef.current(payload, meta), { once });
+  }, [channel, type, enabled, once]);
+}
+function useAnswer(channel, type, responder, options) {
+  const responderRef = useRef2(responder);
+  useEffect(() => {
+    responderRef.current = responder;
+  });
+  const enabled = options?.enabled ?? true;
+  useEffect(() => {
+    if (!enabled) return;
+    return channel.answer(type, (payload, meta) => responderRef.current(payload, meta));
+  }, [channel, type, enabled]);
 }
 function useSend(channel) {
   return channel.post;
 }
+function useAsk(channel) {
+  return channel.ask;
+}
 
 // src/define-channel.ts
-function defineChannel(name) {
+function defineChannel(name, options) {
+  if (options) configureChannel(name, options);
   const useBoundSend = () => useSend(useChannel(name));
   const useBoundMessage = (type, handler) => useMessage(useChannel(name), type, handler);
   return {
@@ -68,7 +144,10 @@ function defineStore(name, options = {}) {
       persist: {
         adapter: options.persist,
         ...options.persistKeys ? { keys: options.persistKeys } : {},
-        ...options.persistDebounceMs === void 0 ? {} : { debounceMs: options.persistDebounceMs }
+        ...options.persistDebounceMs === void 0 ? {} : { debounceMs: options.persistDebounceMs },
+        ...options.persistVersion === void 0 ? {} : { version: options.persistVersion },
+        ...options.migrate ? { migrate: options.migrate } : {},
+        ...options.onRestoreError ? { onRestoreError: options.onRestoreError } : {}
       }
     });
   }
@@ -78,18 +157,35 @@ function defineStore(name, options = {}) {
   };
 }
 
+// src/use-hydrated.ts
+import { useEffect as useEffect2, useState } from "react";
+function useHydrated(options) {
+  const store = getStore(options?.store ?? DEFAULT_NAME, options?.scope ?? "everywhere");
+  const [ready, setReady] = useState(false);
+  useEffect2(() => {
+    let cancelled = false;
+    void store.hydrated.then(() => {
+      if (!cancelled) setReady(true);
+    });
+    return () => {
+      cancelled = true;
+    };
+  }, [store]);
+  return ready;
+}
+
 // src/use-leader.ts
-import { useCallback as useCallback2, useEffect as useEffect2, useRef as useRef2, useSyncExternalStore as useSyncExternalStore2 } from "react";
+import { useCallback as useCallback4, useEffect as useEffect3, useRef as useRef3, useSyncExternalStore as useSyncExternalStore4 } from "react";
 var NO_LEADER = Object.freeze({ leaderId: null, isLeader: false });
 function useLeader(options) {
   const leader = getLeader(options?.name ?? DEFAULT_NAME, options);
   const eligible = options?.eligible;
-  useEffect2(() => {
+  useEffect3(() => {
     if (eligible === void 0) return;
     leader.setEligible(eligible);
   }, [leader, eligible]);
-  return useSyncExternalStore2(
-    useCallback2((onChange) => leader.subscribe(onChange), [leader]),
+  return useSyncExternalStore4(
+    useCallback4((onChange) => leader.subscribe(onChange), [leader]),
     () => leader.getSnapshot(),
     () => NO_LEADER
   );
@@ -99,18 +195,42 @@ function useIsLeader(options) {
 }
 function useLeaderEffect(effect, options) {
   const { isLeader } = useLeader(options);
-  const effectRef = useRef2(effect);
-  useEffect2(() => {
+  const effectRef = useRef3(effect);
+  useEffect3(() => {
     effectRef.current = effect;
   });
-  useEffect2(() => {
+  useEffect3(() => {
     if (!isLeader) return;
     return effectRef.current();
   }, [isLeader]);
 }
 
+// src/namespace.ts
+import {
+  createNamespace as createCoreNamespace
+} from "@use-everywhere/core";
+function createNamespace(namespace) {
+  const core = createCoreNamespace(namespace);
+  const { busName } = core;
+  return {
+    ...core,
+    defineStore: (name, options) => defineStore(busName(name), options),
+    defineChannel: (name, options) => defineChannel(busName(name), options),
+    getSharedStore: (name, scope) => getSharedStore(busName(name), scope),
+    useSharedState: (key, initial, options) => useSharedState(key, initial, { ...options, store: busName(options?.store) }),
+    useSharedStore: (selector, options) => useSharedStore(selector, { ...options, store: busName(options?.store) }),
+    usePeers: (options) => usePeers({ ...options, name: busName(options?.name) }),
+    usePresenceMetadata: (metadata, options) => usePresenceMetadata(metadata, { ...options, name: busName(options?.name) }),
+    useHydrated: (options) => useHydrated({ ...options, store: busName(options?.store) }),
+    useClientId: (options) => useClientId({ name: busName(options?.name) }),
+    useLeader: (options) => useLeader({ ...options, name: busName(options?.name) }),
+    useIsLeader: (options) => useIsLeader({ ...options, name: busName(options?.name) }),
+    useLeaderEffect: (effect, options) => useLeaderEffect(effect, { ...options, name: busName(options?.name) })
+  };
+}
+
 // src/use-opened-window.ts
-import { useCallback as useCallback3, useEffect as useEffect3, useRef as useRef3, useState } from "react";
+import { useCallback as useCallback5, useEffect as useEffect4, useRef as useRef4, useState as useState2 } from "react";
 import { WindowClosedError } from "@use-everywhere/core";
 var IDLE = Object.freeze({
   status: "idle",
@@ -118,13 +238,13 @@ var IDLE = Object.freeze({
   error: void 0
 });
 function useOpenedWindow(factory) {
-  const [state, setState] = useState(IDLE);
-  const current = useRef3(null);
-  const factoryRef = useRef3(factory);
-  useEffect3(() => {
+  const [state, setState] = useState2(IDLE);
+  const current = useRef4(null);
+  const factoryRef = useRef4(factory);
+  useEffect4(() => {
     factoryRef.current = factory;
   });
-  const open = useCallback3(() => {
+  const open = useCallback5(() => {
     current.current?.close();
     let opened;
     try {
@@ -159,10 +279,10 @@ function useOpenedWindow(factory) {
       }
     );
   }, []);
-  const post = useCallback3((type, payload) => {
+  const post = useCallback5((type, payload) => {
     current.current?.post(type, payload);
   }, []);
-  const close = useCallback3(() => current.current?.close(), []);
+  const close = useCallback5(() => current.current?.close(), []);
   return { ...state, open, post, close };
 }
 
@@ -170,11 +290,14 @@ function useOpenedWindow(factory) {
 import {
   createChannel,
   createSharedStore,
+  createSharedReducer,
   createPresence,
   createLeader,
   webStorageAdapter,
   localStorageAdapter,
   sessionStorageAdapter,
+  indexedDbAdapter,
+  jsonSerializer,
   openWindow,
   connectToOpener,
   CID_PARAM,
@@ -184,10 +307,15 @@ import {
   observeBus,
   enableDebug,
   getBusNames,
+  getTransportKind,
+  getWireSkew,
+  WIRE_VERSION,
   BroadcastChannelTransport,
   NoopTransport,
+  StorageTransport,
   defaultTransport,
-  isBroadcastChannelAvailable
+  isBroadcastChannelAvailable,
+  isStorageEventAvailable
 } from "@use-everywhere/core";
 export {
   BroadcastChannelTransport,
@@ -195,11 +323,15 @@ export {
   DEFAULT_NAME,
   HandshakeTimeoutError,
   NoopTransport,
+  StorageTransport,
+  WIRE_VERSION,
   WindowClosedError2 as WindowClosedError,
   connectToOpener,
   createChannel,
   createLeader,
+  createNamespace,
   createPresence,
+  createSharedReducer,
   createSharedStore,
   defaultTransport,
   defineChannel,
@@ -208,21 +340,33 @@ export {
   getBusNames,
   getLeader,
   getSharedStore,
+  getTransportKind,
+  getWireSkew,
+  indexedDbAdapter,
   isBroadcastChannelAvailable,
+  isStorageEventAvailable,
+  jsonSerializer,
   localStorageAdapter,
   newer,
   observeBus,
   openWindow,
   sessionStorageAdapter,
+  shallowEqual,
+  useAnswer,
+  useAsk,
   useChannel,
   useClientId,
+  useHydrated,
   useIsLeader,
   useLeader,
   useLeaderEffect,
   useMessage,
   useOpenedWindow,
   usePeers,
+  usePresenceMetadata,
   useSend,
+  useSharedReducer,
   useSharedState,
+  useSharedStore,
   webStorageAdapter
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "use-everywhere",
-  "version": "0.6.0",
+  "version": "0.8.0",
   "description": "React hooks for state and messages shared across tabs, windows, and workers",
   "license": "MIT",
   "author": "Jonatan Kruszewski <jonakrusze@gmail.com>",
@@ -69,59 +69,71 @@
       "name": "everything (import *)",
       "path": "dist/index.js",
       "import": "*",
-      "limit": "6.6 kB"
+      "limit": "10.89 kB"
     },
     {
       "name": "useSharedState",
       "path": "dist/index.js",
       "import": "{ useSharedState }",
-      "limit": "2.85 kB"
+      "limit": "4.24 kB"
+    },
+    {
+      "name": "useSharedStore (selector)",
+      "path": "dist/index.js",
+      "import": "{ useSharedStore, shallowEqual }",
+      "limit": "4.40 kB"
+    },
+    {
+      "name": "useSharedReducer",
+      "path": "dist/index.js",
+      "import": "{ useSharedReducer }",
+      "limit": "4.21 kB"
     },
     {
       "name": "useChannel + useMessage + useSend",
       "path": "dist/index.js",
       "import": "{ useChannel, useMessage, useSend }",
-      "limit": "1.6 kB"
+      "limit": "3.07 kB"
     },
     {
       "name": "usePeers + useClientId",
       "path": "dist/index.js",
       "import": "{ usePeers, useClientId }",
-      "limit": "1.7 kB"
+      "limit": "2.77 kB"
     },
     {
       "name": "useOpenedWindow + openWindow",
       "path": "dist/index.js",
       "import": "{ useOpenedWindow, openWindow }",
-      "limit": "1.5 kB"
+      "limit": "1.47 kB"
     },
     {
       "name": "useLeader + useLeaderEffect",
       "path": "dist/index.js",
       "import": "{ useLeader, useLeaderEffect }",
-      "limit": "2.15 kB"
+      "limit": "3.65 kB"
     },
     {
       "name": "defineStore (persisted)",
       "path": "dist/index.js",
       "import": "{ defineStore, localStorageAdapter }",
-      "limit": "3.3 kB"
+      "limit": "4.67 kB"
     },
     {
       "name": "Inspector (devtools subpath)",
       "path": "dist/devtools/index.js",
       "import": "{ Inspector }",
-      "limit": "5 kB"
+      "limit": "6.32 kB"
     },
     {
       "name": "MemoryHub (testing subpath)",
       "path": "dist/testing.js",
       "import": "{ MemoryHub }",
-      "limit": "400 B"
+      "limit": "264 B"
     }
   ],
   "dependencies": {
-    "@use-everywhere/core": "0.6.0"
+    "@use-everywhere/core": "0.8.0"
   },
   "peerDependencies": {
     "react": ">=18"