@createstore/createstore 0.0.0 → 1.1.0

package/README.md

@@ -24,6 +24,28 @@ function Counter() {
 Every component that reads `'count'` re-renders when any of them changes it. Outside React, use
 `store.getState('count')` and `store.setState('count', 2)`.
 
+### Share state between components
+
+Take `useGlobalState` out of the store, and any component can read or change the same list. No provider, no props
+passed down:
+
+```tsx
+const { useGlobalState } = createStore({ todos: [] as { text: string }[] });
+
+function TodoCount() {
+  const [todos] = useGlobalState('todos');
+  return <p>{todos.length} todos</p>;
+}
+
+function AddTodo() {
+  const [todos, setTodos] = useGlobalState('todos');
+  const add = (text: string) => setTodos([...todos, { text }]);
+  return <Form onAdd={add} />;
+}
+```
+
+`<Form>` stands for your own form component. When `AddTodo` adds a todo, `TodoCount` updates by itself.
+
 Everything else stays off until you use it: computed values, server data with `query()`, persistence, offline
 support, undo/redo, tab sync, events and server rendering.
 
@@ -33,6 +55,14 @@ support, undo/redo, tab sync, events and server rendering.
 - Published with [npm provenance](https://docs.npmjs.com/generating-provenance-statements).
 - Versioned with [semantic versioning](https://semver.org); see [CHANGELOG.md](./CHANGELOG.md) once a release exists.
 
+## Links
+
+- [GitHub repository](https://github.com/Gauravasawa/createstore): source code, issues and releases
+- [npm package](https://www.npmjs.com/package/@createstore/createstore)
+- [Documentation](https://createstore-docs.pages.dev)
+- [Report a bug or request a feature](https://github.com/Gauravasawa/createstore/issues/new/choose)
+- [Security policy](https://github.com/Gauravasawa/createstore/security/policy)
+
 ## License
 
 [MIT](./LICENSE)

package/dist/cjs/createStore.cjs

@@ -29,6 +29,15 @@ __export(createStore_exports, {
 module.exports = __toCommonJS(createStore_exports);
 var import_react_bindings = require("./react-bindings.cjs");
 const __SnapshotContext = import_react_bindings.RSC ? null : (0, import_react_bindings.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");
@@ -163,12 +172,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");
@@ -1263,6 +1308,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;
@@ -1590,15 +1636,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,
@@ -2242,6 +2279,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;