@createstore/createstore 1.0.0 → 1.1.1

package/dist/esm/createStore.js

@@ -11,6 +11,15 @@ import {
   ClientRoot
 } from "./react-bindings.js";
 const __SnapshotContext = RSC ? null : createContext(null);
+let leavingPage = false;
+if (typeof window !== "undefined" && typeof window.addEventListener === "function") {
+  window.addEventListener("pagehide", () => {
+    leavingPage = true;
+  });
+  window.addEventListener("pageshow", () => {
+    leavingPage = false;
+  });
+}
 const storesByName = /* @__PURE__ */ new Map();
 const MERGE = /* @__PURE__ */ Symbol("createStore.merge");
 const QUIET = /* @__PURE__ */ Symbol("createStore.quiet");
@@ -145,12 +154,48 @@ function defineEvents() {
   return void 0;
 }
 function createStore(initialState, options = {}) {
+  checkStoreOptions(options);
   if ("queries" in options)
     throw new Error(
       `[${options.name ?? "store"}] the queries option was replaced: declare each query in the state with query(fetch, options), e.g. { product: query((id, signal) => api.product(id, signal)) }, and read it with useGlobalState('product', id).`
     );
   return withScopes(initialState, options, makeBase(initialState, options));
 }
+const STORE_OPTIONS = /* @__PURE__ */ new Set([
+  "name",
+  "persist",
+  "syncTabs",
+  "history",
+  "devtools",
+  "shared",
+  "ssr",
+  "logger",
+  "onChange",
+  "offline",
+  "validate",
+  "events",
+  "computed",
+  "keyActions",
+  "actions",
+  "queries"
+]);
+const warnedOptions = /* @__PURE__ */ new Set();
+function checkStoreOptions(opts) {
+  const options = opts;
+  const warn = (message) => {
+    if (warnedOptions.has(message)) return;
+    warnedOptions.add(message);
+    console.warn(message);
+  };
+  const id = options.name ?? "store";
+  for (const k of Object.keys(options))
+    if (!STORE_OPTIONS.has(k))
+      warn(`[${id}] createStore() has no option "${k}", so it is ignored. Options: ${[...STORE_OPTIONS].filter((o) => o !== "queries").join(", ")}.`);
+  if (!options.name && (options.persist || options.syncTabs || options.offline || options.shared))
+    warn(
+      `[store] persist, syncTabs, offline and shared use the store's name to tell stores apart. Without { name: '...' }, every unnamed store uses "store", so two of them would overwrite each other's saved data and mix up their tabs. Give this one a name.`
+    );
+}
 const warnedSharedOnServer = /* @__PURE__ */ new Set();
 const warnedShape = /* @__PURE__ */ new Set();
 const SHAPE = /* @__PURE__ */ Symbol("createStore.shape");
@@ -1007,6 +1052,8 @@ function build(initialState, options, sharedDefinition) {
     }
   };
   let hydrated = !persistStorage;
+  let warnedUnsavable = false;
+  const earlyWrites = /* @__PURE__ */ new Set();
   let resolveHydrated;
   const whenHydrated = new Promise((r) => resolveHydrated = r);
   let storageIsAsync = false;
@@ -1033,7 +1080,26 @@ function build(initialState, options, sharedDefinition) {
     saveTimer = void 0;
     if (!persistStorage || !hydrated) return;
     const data = Object.fromEntries(persistedKeys.map((k) => [k, state[k]]));
-    const text = JSON.stringify(storageIsAsync ? { $version: persistVersion, $saved: Date.now(), state: data } : { $version: persistVersion, state: data });
+    let text;
+    try {
+      text = JSON.stringify(storageIsAsync ? { $version: persistVersion, $saved: Date.now(), state: data } : { $version: persistVersion, state: data });
+    } catch (error) {
+      if (!warnedUnsavable) {
+        warnedUnsavable = true;
+        const bad = persistedKeys.find((k) => {
+          try {
+            JSON.stringify(state[k]);
+            return false;
+          } catch {
+            return true;
+          }
+        });
+        console.warn(
+          `[${name}] couldn't save${bad ? ` "${bad}"` : ""}: ${error.message}. Saved state is JSON, so keep persisted keys to strings, numbers, booleans, null, arrays and plain objects, or leave this key out of saving with persist: { exclude: [...] }. Nothing is saved until it is fixed.`
+        );
+      }
+      return;
+    }
     lastSavedText = text;
     quietly(() => {
       const written = persistStorage.setItem(persistKey, text);
@@ -1138,9 +1204,12 @@ function build(initialState, options, sharedDefinition) {
           }
           if (rescued != null && isSavedState(rescued) && savedAt(rescued) > savedAt(stored)) text = rescued;
           const values = trusted(pick(readSaved(text)), "storage");
+          for (const k of earlyWrites) delete values[k];
+          const keptEarly = earlyWrites.size > 0;
+          earlyWrites.clear();
           hydrated = true;
           if (!destroyed) apply(values, "storage", "loaded from storage", false);
-          if (!destroyed && text === rescued && rescued != null) saveNow();
+          if (!destroyed && (keptEarly || text === rescued && rescued != null)) saveNow();
           finishHydration();
         },
         (error) => {
@@ -1245,6 +1314,7 @@ function build(initialState, options, sharedDefinition) {
     updateHistoryInfo();
   }
   function batch(fn) {
+    if (typeof fn !== "function") throw new Error(`[${name}] batch() takes a function that makes the changes: store.batch(() => { store.setState('a', 1); store.setState('b', 2); }).`);
     batchDepth++;
     if (batchDepth === 1 && historyLimit) batchChanges = /* @__PURE__ */ Object.create(null);
     let result;
@@ -1337,6 +1407,7 @@ function build(initialState, options, sharedDefinition) {
       (k) => isStateKey(k) && !Object.is(state[k], values[k])
     );
     if (keys.length === 0) return;
+    if (!hydrated && source === "local") for (const k of keys) earlyWrites.add(k);
     const prev = {};
     for (const k of keys) {
       prev[k] = state[k];
@@ -1572,15 +1643,6 @@ function build(initialState, options, sharedDefinition) {
     ownPromises.add(promise);
     return promise;
   }
-  let leavingPage = false;
-  if (isBrowser && typeof window.addEventListener === "function") {
-    window.addEventListener("pagehide", () => {
-      leavingPage = true;
-    });
-    window.addEventListener("pageshow", () => {
-      leavingPage = false;
-    });
-  }
   const SERVER_LOADING = Object.freeze({
     state: "loading",
     loading: true,
@@ -2082,11 +2144,15 @@ function build(initialState, options, sharedDefinition) {
     }
     const k = cacheKey(q, params);
     const prev = cache2.get(k)?.data;
+    outdateRequest(k);
     setEntry(k, {
       data: typeof updater === "function" ? updater(prev) : updater,
       status: "success"
     });
   }
+  function outdateRequest(k) {
+    if (inflight.has(k)) versions.set(k, (versions.get(k) ?? 0) + 1);
+  }
   function abort(q) {
     if (isQuery(q)) inlineAborts.get(q)?.abort();
     for (const [k, c] of [...namedAborts])
@@ -2224,6 +2290,8 @@ function build(initialState, options, sharedDefinition) {
   };
   const api = Object.assign(Object.create(setterProtoOf(def, API_NAMES, "apiProto")), apiMembers);
   Object.defineProperty(api, SETTER_OF, { value: (k) => setterFor(k) });
+  if (options.actions != null && typeof options.actions !== "function")
+    throw new Error(`[${name}] actions must be a function that receives the store's api and returns your actions: createStore(state, { actions: (api) => ({ add(x) { api.setState('items', (i) => [...i, x]); } }) }).`);
   const actions = options.actions?.(api) ?? {};
   const keyActionDefs = options.keyActions ?? {};
   const ssrCfg = options.ssr;
@@ -2618,6 +2686,7 @@ function build(initialState, options, sharedDefinition) {
       setter = (value, serverCall) => {
         const prev = cache2.get(k)?.data;
         const next = typeof value === "function" ? value(prev) : value;
+        outdateRequest(k);
         setEntry(k, { data: next, status: "success" });
         if (!serverCall) return Promise.resolve();
         const done = Promise.resolve().then(serverCall).then(