@choksheak/react-utils 0.1.1 → 0.1.3

package/index.mjs

@@ -0,0 +1,12 @@
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __commonJS = (cb, mod) => function __require() {
+  return mod || (0, cb[__getOwnPropNames(cb)[0]])((mod = { exports: {} }).exports, mod), mod.exports;
+};
+
+// src/index.ts
+var require_index = __commonJS({
+  "src/index.ts"() {
+    console.log(`Hello from Chok's React Utils`);
+  }
+});
+export default require_index();

package/package.json

@@ -1,14 +1,14 @@
 {
   "name": "@choksheak/react-utils",
   "license": "The Unlicense",
-  "version": "0.1.1",
+  "version": "0.1.3",
   "description": "Miscellaneous React+TypeScript utilities with support for full tree-shaking.",
   "private": false,
   "main": "index.js",
   "module": "index.mjs",
   "types": "index.d.ts",
   "files": [
-    "dist"
+    "**/*"
   ],
   "exports": {
     "./package.json": "./package.json",

package/sharedState.d.mts

@@ -0,0 +1,55 @@
+/**
+ * The "shared state" is a React state that shares the same value across the
+ * entire app. It is largely similar to the jotai library, but is much smaller
+ * and much easier to work with when used for persisting in local storage or
+ * indexed db, with an automatic expiration for persisted values.
+ *
+ * This library aims to be the shortest, simplest, easiest to use, and most
+ * efficient implementation of shared global React states with seamless support
+ * for client persistence.
+ */
+/************************************************************************/
+/************************************************************************/
+/**
+ * These values are configurable by the user at any time.
+ */
+declare class SharedStateConfig {
+    /**
+     * Default duration for persistence expiration in milliseconds.
+     */
+    static defaultPersistExpiryMs: number;
+    /**
+     * True to load from persistence only on mount, false (default) to load in
+     * the top level scope when the shared state is defined.
+     */
+    static lazyLoad: boolean;
+}
+type SharedState<T> = {
+    subscribe: (subscriber: () => void) => () => void;
+    getSnapshot: () => T | undefined;
+    initDefaultValueOnce: () => Promise<void> | void;
+    initDone: boolean;
+    setValue: (next: T | ((prev: T | undefined) => T)) => void;
+};
+/**
+ * Create a new shared state object. Put this code at the top level scope:
+ *
+ *   const myState = sharedState<number>(0);
+ */
+declare function sharedState<T>(defaultValue: T, options?: {
+    localStorageKey?: string;
+    indexedDbKey?: string;
+    persistExpiryMs?: number;
+    lazyLoad?: boolean;
+}): SharedState<T>;
+/**
+ * React hook for subscribing to a key in the global store.
+ *   const [my, setMy] = useSharedState(myState);
+ */
+declare function useSharedState<T>(state: SharedState<T>): [T | undefined, (next: T | ((prev: T | undefined) => T)) => void];
+/** E.g. const my = useSharedStateValue(myState) */
+declare function useSharedStateValue<T>(state: SharedState<T>): T | undefined;
+/** E.g. const setMy = useSharedStateSetter(myState) */
+declare function useSharedStateSetter<T>(state: SharedState<T>): (next: T | ((prev: T | undefined) => T)) => void;
+
+export { type SharedState, SharedStateConfig, sharedState, useSharedState, useSharedStateSetter, useSharedStateValue };

package/sharedState.d.ts

@@ -0,0 +1,53 @@
+/**
+ * The "shared state" is a React state that shares the same value across the
+ * entire app. It is largely similar to the jotai library, but is much smaller
+ * and much easier to work with when used for persisting in local storage or
+ * indexed db, with an automatic expiration for persisted values.
+ *
+ * This library aims to be the shortest, simplest, easiest to use, and most
+ * efficient implementation of shared global React states with seamless support
+ * for client persistence.
+ */
+/************************************************************************/
+/************************************************************************/
+/**
+ * These values are configurable by the user at any time.
+ */
+export declare class SharedStateConfig {
+    /**
+     * Default duration for persistence expiration in milliseconds.
+     */
+    static defaultPersistExpiryMs: number;
+    /**
+     * True to load from persistence only on mount, false (default) to load in
+     * the top level scope when the shared state is defined.
+     */
+    static lazyLoad: boolean;
+}
+export type SharedState<T> = {
+    subscribe: (subscriber: () => void) => () => void;
+    getSnapshot: () => T | undefined;
+    initDefaultValueOnce: () => Promise<void> | void;
+    initDone: boolean;
+    setValue: (next: T | ((prev: T | undefined) => T)) => void;
+};
+/**
+ * Create a new shared state object. Put this code at the top level scope:
+ *
+ *   const myState = sharedState<number>(0);
+ */
+export declare function sharedState<T>(defaultValue: T, options?: {
+    localStorageKey?: string;
+    indexedDbKey?: string;
+    persistExpiryMs?: number;
+    lazyLoad?: boolean;
+}): SharedState<T>;
+/**
+ * React hook for subscribing to a key in the global store.
+ *   const [my, setMy] = useSharedState(myState);
+ */
+export declare function useSharedState<T>(state: SharedState<T>): [T | undefined, (next: T | ((prev: T | undefined) => T)) => void];
+/** E.g. const my = useSharedStateValue(myState) */
+export declare function useSharedStateValue<T>(state: SharedState<T>): T | undefined;
+/** E.g. const setMy = useSharedStateSetter(myState) */
+export declare function useSharedStateSetter<T>(state: SharedState<T>): (next: T | ((prev: T | undefined) => T)) => void;

package/sharedState.js

@@ -0,0 +1,188 @@
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/sharedState.ts
+var sharedState_exports = {};
+__export(sharedState_exports, {
+  SharedStateConfig: () => SharedStateConfig,
+  sharedState: () => sharedState,
+  useSharedState: () => useSharedState,
+  useSharedStateSetter: () => useSharedStateSetter,
+  useSharedStateValue: () => useSharedStateValue
+});
+module.exports = __toCommonJS(sharedState_exports);
+var import_kvStore = require("@choksheak/ts-utils/kvStore");
+var import_timeConstants = require("@choksheak/ts-utils/timeConstants");
+var import_react = require("react");
+var SharedStateConfig = class {
+  /**
+   * Default duration for persistence expiration in milliseconds.
+   */
+  static defaultPersistExpiryMs = import_timeConstants.MS_PER_DAY;
+  /**
+   * True to load from persistence only on mount, false (default) to load in
+   * the top level scope when the shared state is defined.
+   */
+  static lazyLoad = false;
+};
+var PubSubStore = class {
+  dataByKey = /* @__PURE__ */ new Map();
+  subscribersByKey = /* @__PURE__ */ new Map();
+  get(key) {
+    return this.dataByKey.get(key);
+  }
+  set(key, value) {
+    const prev = this.dataByKey.get(key);
+    if (prev === value) return;
+    this.dataByKey.set(key, value);
+    this.notify(key, value, prev);
+  }
+  // Subscribe to changes of a specific key
+  subscribe(key, subscriber) {
+    let subscribers = this.subscribersByKey.get(key);
+    if (!subscribers) {
+      subscribers = /* @__PURE__ */ new Set();
+      this.subscribersByKey.set(key, subscribers);
+    }
+    subscribers.add(subscriber);
+    return () => {
+      subscribers.delete(subscriber);
+      if (subscribers.size === 0) this.subscribersByKey.delete(key);
+    };
+  }
+  notify(key, next, prev) {
+    const subscribers = this.subscribersByKey.get(key);
+    if (!subscribers) return;
+    const copy = Array.from(subscribers.values());
+    for (const subscriber of copy) {
+      try {
+        subscriber(next, prev);
+      } catch (e) {
+        console.error(`Error invoking subscriber:`, e);
+      }
+    }
+  }
+};
+var store = new PubSubStore();
+var stateKey = 0;
+function sharedState(defaultValue, options) {
+  const { localStorageKey, indexedDbKey, persistExpiryMs, lazyLoad } = options ?? {};
+  const key = String(stateKey++);
+  let persistenceAdapter;
+  const expiryMs = persistExpiryMs ?? SharedStateConfig.defaultPersistExpiryMs;
+  if (localStorageKey) {
+    persistenceAdapter = new LocalStorageAdapter(localStorageKey, expiryMs);
+  } else if (indexedDbKey) {
+    persistenceAdapter = new IndexedDbAdapter(indexedDbKey, expiryMs);
+  }
+  function subscribe(subscriber) {
+    return store.subscribe(key, () => subscriber());
+  }
+  function getSnapshot() {
+    return store.get(key);
+  }
+  function setValue(next) {
+    if (typeof next === "function") {
+      const prev = store.get(key);
+      next = next(prev);
+    }
+    store.set(key, next);
+    void persistenceAdapter?.save?.(next);
+  }
+  const state = {
+    subscribe,
+    getSnapshot,
+    // initial default handling
+    initDefaultValueOnce: async () => {
+      if (state.initDone) return;
+      state.initDone = true;
+      const v = await persistenceAdapter?.load?.();
+      store.set(key, v !== void 0 ? v : defaultValue);
+    },
+    initDone: false,
+    setValue
+  };
+  const lazy = lazyLoad !== void 0 ? lazyLoad : SharedStateConfig.lazyLoad;
+  if (!lazy) {
+    void state.initDefaultValueOnce();
+  }
+  return state;
+}
+function useSharedState(state) {
+  state.initDefaultValueOnce();
+  const value = (0, import_react.useSyncExternalStore)(state.subscribe, state.getSnapshot);
+  return [value, state.setValue];
+}
+function useSharedStateValue(state) {
+  return useSharedState(state)[0];
+}
+function useSharedStateSetter(state) {
+  return useSharedState(state)[1];
+}
+var LocalStorageAdapter = class {
+  constructor(key, expiryMs) {
+    this.key = key;
+    this.expiryMs = expiryMs;
+  }
+  save(value) {
+    if (typeof window === "undefined") return;
+    window.localStorage.setItem(
+      this.key,
+      JSON.stringify({
+        value,
+        expiresAt: Date.now() + this.expiryMs
+      })
+    );
+  }
+  load() {
+    if (typeof window === "undefined") return void 0;
+    const raw = window.localStorage.getItem(this.key);
+    if (!raw) return void 0;
+    const box = JSON.parse(raw);
+    if (!box || !box?.expiresAt || Date.now() >= box.expiresAt) {
+      window.localStorage.removeItem(this.key);
+      return void 0;
+    }
+    return box.value;
+  }
+};
+var IndexedDbAdapter = class {
+  constructor(key, expiryMs) {
+    this.key = key;
+    this.expiryMs = expiryMs;
+  }
+  async save(value) {
+    if (typeof window === "undefined") return;
+    await import_kvStore.kvStore.set(this.key, JSON.stringify(value), this.expiryMs);
+  }
+  async load() {
+    if (typeof window === "undefined") return void 0;
+    const raw = await import_kvStore.kvStore.get(this.key);
+    if (raw === void 0) return void 0;
+    return JSON.parse(raw);
+  }
+};
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  SharedStateConfig,
+  sharedState,
+  useSharedState,
+  useSharedStateSetter,
+  useSharedStateValue
+});

package/sharedState.mjs

@@ -0,0 +1,159 @@
+// src/sharedState.ts
+import { kvStore } from "@choksheak/ts-utils/kvStore";
+import { MS_PER_DAY } from "@choksheak/ts-utils/timeConstants";
+import { useSyncExternalStore } from "react";
+var SharedStateConfig = class {
+  /**
+   * Default duration for persistence expiration in milliseconds.
+   */
+  static defaultPersistExpiryMs = MS_PER_DAY;
+  /**
+   * True to load from persistence only on mount, false (default) to load in
+   * the top level scope when the shared state is defined.
+   */
+  static lazyLoad = false;
+};
+var PubSubStore = class {
+  dataByKey = /* @__PURE__ */ new Map();
+  subscribersByKey = /* @__PURE__ */ new Map();
+  get(key) {
+    return this.dataByKey.get(key);
+  }
+  set(key, value) {
+    const prev = this.dataByKey.get(key);
+    if (prev === value) return;
+    this.dataByKey.set(key, value);
+    this.notify(key, value, prev);
+  }
+  // Subscribe to changes of a specific key
+  subscribe(key, subscriber) {
+    let subscribers = this.subscribersByKey.get(key);
+    if (!subscribers) {
+      subscribers = /* @__PURE__ */ new Set();
+      this.subscribersByKey.set(key, subscribers);
+    }
+    subscribers.add(subscriber);
+    return () => {
+      subscribers.delete(subscriber);
+      if (subscribers.size === 0) this.subscribersByKey.delete(key);
+    };
+  }
+  notify(key, next, prev) {
+    const subscribers = this.subscribersByKey.get(key);
+    if (!subscribers) return;
+    const copy = Array.from(subscribers.values());
+    for (const subscriber of copy) {
+      try {
+        subscriber(next, prev);
+      } catch (e) {
+        console.error(`Error invoking subscriber:`, e);
+      }
+    }
+  }
+};
+var store = new PubSubStore();
+var stateKey = 0;
+function sharedState(defaultValue, options) {
+  const { localStorageKey, indexedDbKey, persistExpiryMs, lazyLoad } = options ?? {};
+  const key = String(stateKey++);
+  let persistenceAdapter;
+  const expiryMs = persistExpiryMs ?? SharedStateConfig.defaultPersistExpiryMs;
+  if (localStorageKey) {
+    persistenceAdapter = new LocalStorageAdapter(localStorageKey, expiryMs);
+  } else if (indexedDbKey) {
+    persistenceAdapter = new IndexedDbAdapter(indexedDbKey, expiryMs);
+  }
+  function subscribe(subscriber) {
+    return store.subscribe(key, () => subscriber());
+  }
+  function getSnapshot() {
+    return store.get(key);
+  }
+  function setValue(next) {
+    if (typeof next === "function") {
+      const prev = store.get(key);
+      next = next(prev);
+    }
+    store.set(key, next);
+    void persistenceAdapter?.save?.(next);
+  }
+  const state = {
+    subscribe,
+    getSnapshot,
+    // initial default handling
+    initDefaultValueOnce: async () => {
+      if (state.initDone) return;
+      state.initDone = true;
+      const v = await persistenceAdapter?.load?.();
+      store.set(key, v !== void 0 ? v : defaultValue);
+    },
+    initDone: false,
+    setValue
+  };
+  const lazy = lazyLoad !== void 0 ? lazyLoad : SharedStateConfig.lazyLoad;
+  if (!lazy) {
+    void state.initDefaultValueOnce();
+  }
+  return state;
+}
+function useSharedState(state) {
+  state.initDefaultValueOnce();
+  const value = useSyncExternalStore(state.subscribe, state.getSnapshot);
+  return [value, state.setValue];
+}
+function useSharedStateValue(state) {
+  return useSharedState(state)[0];
+}
+function useSharedStateSetter(state) {
+  return useSharedState(state)[1];
+}
+var LocalStorageAdapter = class {
+  constructor(key, expiryMs) {
+    this.key = key;
+    this.expiryMs = expiryMs;
+  }
+  save(value) {
+    if (typeof window === "undefined") return;
+    window.localStorage.setItem(
+      this.key,
+      JSON.stringify({
+        value,
+        expiresAt: Date.now() + this.expiryMs
+      })
+    );
+  }
+  load() {
+    if (typeof window === "undefined") return void 0;
+    const raw = window.localStorage.getItem(this.key);
+    if (!raw) return void 0;
+    const box = JSON.parse(raw);
+    if (!box || !box?.expiresAt || Date.now() >= box.expiresAt) {
+      window.localStorage.removeItem(this.key);
+      return void 0;
+    }
+    return box.value;
+  }
+};
+var IndexedDbAdapter = class {
+  constructor(key, expiryMs) {
+    this.key = key;
+    this.expiryMs = expiryMs;
+  }
+  async save(value) {
+    if (typeof window === "undefined") return;
+    await kvStore.set(this.key, JSON.stringify(value), this.expiryMs);
+  }
+  async load() {
+    if (typeof window === "undefined") return void 0;
+    const raw = await kvStore.get(this.key);
+    if (raw === void 0) return void 0;
+    return JSON.parse(raw);
+  }
+};
+export {
+  SharedStateConfig,
+  sharedState,
+  useSharedState,
+  useSharedStateSetter,
+  useSharedStateValue
+};

package/src/fetcher.ts

@@ -0,0 +1,14 @@
+import wretch from "wretch";
+import { retry } from "wretch/middlewares";
+
+/** Name this as "fetcher" to make it easier to understand. */
+export const fetcher = wretch();
+
+/** Fetcher with default short retries. */
+export const fetcherWithRetries = wretch().middlewares([
+  retry({
+    maxAttempts: 3,
+    delayTimer: 1000,
+    retryOnNetworkError: true,
+  }),
+]);

package/src/index.ts

@@ -0,0 +1,4 @@
+// Unused file. To support full tree-shaking, please import from the individual
+// files directly.
+
+console.log(`Hello from Chok's React Utils`);