preact-sigma 4.0.0 → 6.0.0

package/examples/command-palette.tsx

@@ -1,6 +1,6 @@
 import { useState } from "preact/hooks";
 
-import { listen, query, SigmaType, useListener, useSigma } from "preact-sigma";
+import { listen, query, Sigma, SigmaTarget, useListener, useSigma } from "preact-sigma";
 
 type Command = {
   id: string;
@@ -9,18 +9,18 @@ type Command = {
 };
 
 class UsageLedger {
-  counts = new Map<string, number>();
+  #counts = new Map<string, number>();
 
   get(id: string) {
-    return this.counts.get(id) ?? 0;
+    return this.#counts.get(id) ?? 0;
   }
 
   increment(id: string) {
-    this.counts.set(id, this.get(id) + 1);
+    this.#counts.set(id, this.get(id) + 1);
   }
 }
 
-const matchesText = query((command: Command, draft: string) => {
+function matchesText(command: Command, draft: string) {
   const needle = draft.trim().toLowerCase();
   if (!needle) {
     return true;
@@ -30,101 +30,115 @@ const matchesText = query((command: Command, draft: string) => {
     command.title.toLowerCase().includes(needle) ||
     command.keywords.some((keyword) => keyword.toLowerCase().includes(needle))
   );
-});
+}
 
-const SearchHistory = new SigmaType<{
+type SearchHistoryState = {
   items: string[];
-}>("SearchHistory")
-  .defaultState({
-    items: [],
-  })
-  .actions({
-    remember(query: string) {
-      const value = query.trim();
-      if (!value) {
-        return;
-      }
-
-      this.items = [value, ...this.items.filter((item) => item !== value)].slice(0, 5);
-    },
-  });
+};
 
-interface SearchHistory extends InstanceType<typeof SearchHistory> {}
-
-const CommandPalette = new SigmaType<
-  {
-    commands: Command[];
-    cursor: number;
-    draft: string;
-    history: SearchHistory;
-    usage: UsageLedger;
-  },
-  {
-    ran: Command;
+class SearchHistory extends Sigma<SearchHistoryState> {
+  constructor() {
+    super({
+      items: [],
+    });
   }
->("CommandPalette")
-  .defaultState({
-    commands: [
-      { id: "inbox", title: "Open inbox", keywords: ["mail", "messages", "triage"] },
-      { id: "capture", title: "Capture note", keywords: ["write", "quick", "idea"] },
-      { id: "focus", title: "Start focus timer", keywords: ["pomodoro", "deep work"] },
-      { id: "theme", title: "Toggle theme", keywords: ["appearance", "dark", "light"] },
-    ],
-    cursor: 0,
-    draft: "",
-    history: () => new SearchHistory(),
-    usage: () => new UsageLedger(),
-  })
-  .computed({
-    visibleCommands() {
-      return this.commands.filter((command) => matchesText(command, this.draft));
-    },
-    activeCommand() {
-      return this.visibleCommands[this.cursor] ?? null;
-    },
-  })
-  .queries({
-    canRun() {
-      return this.activeCommand !== null;
-    },
-    usageCount(id: string) {
-      return this.usage.get(id);
-    },
-  })
-  .actions({
-    setDraft(draft: string) {
-      this.draft = draft;
-      this.cursor = 0;
-    },
-    move(step: number) {
-      if (this.visibleCommands.length === 0) {
-        this.cursor = 0;
-        return;
-      }
-
-      const lastIndex = this.visibleCommands.length - 1;
-      this.cursor = Math.max(0, Math.min(lastIndex, this.cursor + step));
-    },
-    seedDraftFromHistory() {
-      const latest = this.history.items[0];
-      if (latest) {
-        this.setDraft(latest);
-      }
-    },
-    runActive() {
-      const command = this.activeCommand;
-      if (!command || !this.canRun()) {
-        return;
-      }
-
-      this.history.remember(this.draft || command.title);
-      this.usage.increment(command.id);
-      this.emit("ran", command);
-      this.draft = "";
+
+  remember(query: string) {
+    const value = query.trim();
+    if (!value) {
+      return;
+    }
+
+    this.items = [value, ...this.items.filter((item) => item !== value)].slice(0, 5);
+  }
+}
+
+interface SearchHistory extends SearchHistoryState {}
+
+type CommandPaletteState = {
+  commands: Command[];
+  cursor: number;
+  draft: string;
+  history: SearchHistory;
+  usage: UsageLedger;
+};
+
+type CommandPaletteEvents = {
+  ran: Command;
+};
+
+class CommandPalette extends SigmaTarget<CommandPaletteEvents, CommandPaletteState> {
+  constructor() {
+    super({
+      commands: [
+        { id: "inbox", title: "Open inbox", keywords: ["mail", "messages", "triage"] },
+        { id: "capture", title: "Capture note", keywords: ["write", "quick", "idea"] },
+        { id: "focus", title: "Start focus timer", keywords: ["pomodoro", "deep work"] },
+        { id: "theme", title: "Toggle theme", keywords: ["appearance", "dark", "light"] },
+      ],
+      cursor: 0,
+      draft: "",
+      history: new SearchHistory(),
+      usage: new UsageLedger(),
+    });
+  }
+
+  get visibleCommands() {
+    return this.commands.filter((command) => matchesText(command, this.draft));
+  }
+
+  get activeCommand() {
+    return this.visibleCommands[this.cursor] ?? null;
+  }
+
+  get canRun() {
+    return this.activeCommand !== null;
+  }
+
+  @query
+  usageCount(id: string) {
+    return this.usage.get(id);
+  }
+
+  setDraft(draft: string) {
+    this.draft = draft;
+    this.cursor = 0;
+  }
+
+  move(step: number) {
+    if (this.visibleCommands.length === 0) {
       this.cursor = 0;
-    },
-  })
-  .setup(function () {
+      return;
+    }
+
+    const lastIndex = this.visibleCommands.length - 1;
+    this.cursor = Math.max(0, Math.min(lastIndex, this.cursor + step));
+  }
+
+  seedDraftFromHistory() {
+    const latest = this.history.items[0];
+    if (latest) {
+      this.setDraft(latest);
+    }
+  }
+
+  runActive() {
+    const command = this.activeCommand;
+    if (!command) {
+      return;
+    }
+
+    const search = this.draft || command.title;
+    this.usage.increment(command.id);
+    this.draft = "";
+    this.cursor = 0;
+    this.commit();
+
+    this.history.remember(search);
+    this.emit("ran", command);
+  }
+
+  onSetup() {
     return [
       listen(window, "keydown", (event) => {
         if ((event.metaKey || event.ctrlKey) && event.key === "k") {
@@ -144,9 +158,10 @@ const CommandPalette = new SigmaType<
         }
       }),
     ];
-  });
+  }
+}
 
-interface CommandPalette extends InstanceType<typeof CommandPalette> {}
+interface CommandPalette extends CommandPaletteState {}
 
 export function CommandPaletteExample() {
   const palette = useSigma(() => new CommandPalette());
@@ -158,16 +173,11 @@ export function CommandPaletteExample() {
 
   return (
     <section>
-      <p>
-        <strong>Command palette</strong>: setup-owned keyboard shortcuts, computed getters, tracked
-        queries with args, typed events, nested sigma state, and a mutable custom class instance.
-      </p>
-
       <label>
         Search
         <input
           value={palette.draft}
-          onInput={(event) => palette.setDraft((event.currentTarget as HTMLInputElement).value)}
+          onInput={(event) => palette.setDraft(event.currentTarget.value)}
           placeholder="Try: note, timer, inbox"
         />
       </label>
@@ -179,7 +189,7 @@ export function CommandPaletteExample() {
         <button type="button" onClick={() => palette.move(1)}>
           Down
         </button>
-        <button type="button" onClick={() => palette.runActive()} disabled={!palette.canRun()}>
+        <button type="button" onClick={() => palette.runActive()} disabled={!palette.canRun}>
           Run
         </button>
       </div>

package/examples/observe-and-restore.ts

@@ -1,27 +1,35 @@
-import { replaceState, SigmaType, snapshot } from "preact-sigma";
+import { sigma, Sigma } from "preact-sigma";
 
-const TodoList = new SigmaType<{
+type TodoListState = {
   todos: string[];
-}>("TodoList")
-  .defaultState({
-    todos: [],
-  })
-  .observe(function (change) {
-    console.log(`${change.oldState.todos.length} -> ${change.newState.todos.length}`);
-  })
-  .actions({
-    add(title: string) {
-      this.todos.push(title);
-    },
-  });
+};
+
+class TodoList extends Sigma<TodoListState> {
+  constructor() {
+    super({
+      todos: [],
+    });
+  }
+
+  add(title: string) {
+    this.todos.push(title);
+  }
+}
+
+interface TodoList extends TodoListState {}
 
 const todoList = new TodoList();
+const stop = sigma.subscribe(todoList, (nextState, baseState) => {
+  console.log(`${baseState.todos.length} -> ${nextState.todos.length}`);
+});
 
 todoList.add("Write docs");
 
-const saved = snapshot(todoList);
+const saved = sigma.captureState(todoList);
 
 todoList.add("Ship release");
-replaceState(todoList, saved);
+sigma.replaceState(todoList, saved);
+
+console.log(sigma.captureState(todoList).todos); // ["Write docs"]
 
-console.log(snapshot(todoList).todos); // ["Write docs"]
+stop();

package/examples/persist-search-draft.ts

@@ -0,0 +1,70 @@
+import { Sigma } from "preact-sigma";
+import { hydrateSync, type PersistRecord, type SyncPersistStore } from "preact-sigma/persist";
+
+type SearchState = {
+  draft: string;
+  page: number;
+};
+
+class Search extends Sigma<SearchState> {
+  constructor(initialState: Partial<SearchState> = {}) {
+    super({
+      draft: "",
+      page: 1,
+      ...initialState,
+    });
+  }
+
+  nextPage() {
+    this.page += 1;
+  }
+
+  setDraft(draft: string) {
+    this.draft = draft;
+  }
+}
+
+interface Search extends SearchState {}
+
+const records = new Map<string, PersistRecord<Pick<SearchState, "draft">>>([
+  [
+    "search",
+    {
+      savedAt: 100,
+      value: { draft: "restored" },
+      version: 1,
+    },
+  ],
+]);
+
+const store: SyncPersistStore<Pick<SearchState, "draft">> = {
+  get(key) {
+    return records.get(key);
+  },
+  set(key, record) {
+    return records.set(key, record);
+  },
+  delete(key) {
+    return records.delete(key);
+  },
+};
+
+const search = new Search({ page: 3 });
+const persistence = hydrateSync(search, {
+  key: "search",
+  pick: ["draft"],
+  store,
+});
+
+console.log(persistence.restored); // { status: "restored", savedAt: 100, storedVersion: 1 }
+console.log(search.draft); // "restored"
+console.log(search.page); // 3
+
+search.setDraft("signals");
+search.nextPage();
+
+await persistence.flush();
+
+console.log(records.get("search")?.value); // { draft: "signals" }
+
+await persistence.stop();

package/examples/setup-act.ts

@@ -1,14 +1,19 @@
-import { listen, SigmaType } from "preact-sigma";
+import { listen, Sigma } from "preact-sigma";
 
-const ClickTracker = new SigmaType<{
+type ClickTrackerState = {
   clicks: number;
   status: "idle" | "ready";
-}>("ClickTracker")
-  .defaultState({
-    clicks: 0,
-    status: "idle",
-  })
-  .setup(function (target: EventTarget) {
+};
+
+class ClickTracker extends Sigma<ClickTrackerState> {
+  constructor() {
+    super({
+      clicks: 0,
+      status: "idle",
+    });
+  }
+
+  onSetup(target: EventTarget) {
     this.act(function () {
       this.status = "ready";
     });
@@ -20,7 +25,10 @@ const ClickTracker = new SigmaType<{
         });
       }),
     ];
-  });
+  }
+}
+
+interface ClickTracker extends ClickTrackerState {}
 
 const target = new EventTarget();
 const tracker = new ClickTracker();

package/examples/sigma-target.ts

@@ -1,14 +1,26 @@
 import { listen, SigmaTarget } from "preact-sigma";
 
-const notifications = new SigmaTarget<{
+type NotificationEvents = {
   saved: {
     id: string;
     title: string;
   };
   reset: void;
-}>();
+};
 
-const stopSaved = notifications.on("saved", ({ id, title }) => {
+class Notifications extends SigmaTarget<NotificationEvents> {
+  saved(id: string, title: string) {
+    this.emit("saved", { id, title });
+  }
+
+  reset() {
+    this.emit("reset");
+  }
+}
+
+const notifications = new Notifications();
+
+const stopSaved = listen(notifications, "saved", ({ id, title }) => {
   console.log(`Saved ${id}: ${title}`);
 });
 
@@ -16,11 +28,8 @@ const stopReset = listen(notifications, "reset", () => {
   console.log("Reset");
 });
 
-notifications.emit("saved", {
-  id: "note-1",
-  title: "Draft post",
-});
-notifications.emit("reset");
+notifications.saved("note-1", "Draft post");
+notifications.reset();
 
 stopSaved();
 stopReset();

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "preact-sigma",
-  "version": "4.0.0",
+  "version": "6.0.0",
   "keywords": [],
   "license": "MIT",
   "author": "Alec Larson",
@@ -18,6 +18,10 @@
     ".": {
       "types": "./dist/index.d.mts",
       "import": "./dist/index.mjs"
+    },
+    "./persist": {
+      "types": "./dist/persist.d.mts",
+      "import": "./dist/persist.mjs"
     }
   },
   "devDependencies": {

package/examples/signal-access.ts

@@ -1,28 +0,0 @@
-import { effect, SigmaType } from "preact-sigma";
-
-const Counter = new SigmaType<{
-  count: number;
-}>("Counter")
-  .defaultState({
-    count: 0,
-  })
-  .computed({
-    doubled() {
-      return this.count * 2;
-    },
-  })
-  .actions({
-    increment() {
-      this.count += 1;
-    },
-  });
-
-const counter = new Counter();
-
-const stop = effect(() => {
-  console.log(counter.get("count").value, counter.get("doubled").value);
-});
-
-counter.increment();
-
-stop();