preact-sigma 2.2.1 → 2.2.3

package/examples/basic-counter.ts

@@ -0,0 +1,23 @@
+import { 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();
+
+counter.increment();
+
+console.log(counter.count); // 1
+console.log(counter.doubled); // 2

package/examples/command-palette.tsx

@@ -0,0 +1,211 @@
+import { useState } from "preact/hooks";
+
+import { listen, query, SigmaType, useListener, useSigma } from "preact-sigma";
+
+type Command = {
+  id: string;
+  title: string;
+  keywords: readonly string[];
+};
+
+class UsageLedger {
+  counts = new Map<string, number>();
+
+  get(id: string) {
+    return this.counts.get(id) ?? 0;
+  }
+
+  increment(id: string) {
+    this.counts.set(id, this.get(id) + 1);
+  }
+}
+
+const matchesText = query((command: Command, draft: string) => {
+  const needle = draft.trim().toLowerCase();
+  if (!needle) {
+    return true;
+  }
+
+  return (
+    command.title.toLowerCase().includes(needle) ||
+    command.keywords.some((keyword) => keyword.toLowerCase().includes(needle))
+  );
+});
+
+const SearchHistory = new SigmaType<{
+  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;
+  }
+>("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 = "";
+      this.cursor = 0;
+    },
+  })
+  .setup(function () {
+    return [
+      listen(window, "keydown", (event) => {
+        if ((event.metaKey || event.ctrlKey) && event.key === "k") {
+          event.preventDefault();
+          this.seedDraftFromHistory();
+          return;
+        }
+
+        if (event.key === "ArrowDown") {
+          event.preventDefault();
+          this.move(1);
+        } else if (event.key === "ArrowUp") {
+          event.preventDefault();
+          this.move(-1);
+        } else if (event.key === "Enter") {
+          this.runActive();
+        }
+      }),
+    ];
+  });
+
+interface CommandPalette extends InstanceType<typeof CommandPalette> {}
+
+export function CommandPaletteExample() {
+  const palette = useSigma(() => new CommandPalette());
+  const [lastRun, setLastRun] = useState<string>("Nothing yet");
+
+  useListener(palette, "ran", (command) => {
+    setLastRun(`${command.title} (${palette.usageCount(command.id)} runs)`);
+  });
+
+  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)}
+          placeholder="Try: note, timer, inbox"
+        />
+      </label>
+
+      <div>
+        <button type="button" onClick={() => palette.move(-1)}>
+          Up
+        </button>
+        <button type="button" onClick={() => palette.move(1)}>
+          Down
+        </button>
+        <button type="button" onClick={() => palette.runActive()} disabled={!palette.canRun()}>
+          Run
+        </button>
+      </div>
+
+      <p>Last run: {lastRun}</p>
+
+      <ul>
+        {palette.visibleCommands.map((command, index) => (
+          <li key={command.id}>
+            <button
+              type="button"
+              onClick={() => {
+                palette.setDraft(command.title);
+                palette.runActive();
+              }}
+              style={{
+                fontWeight: index === palette.cursor ? "700" : "400",
+              }}
+            >
+              {command.title} · used {palette.usageCount(command.id)} times
+            </button>
+          </li>
+        ))}
+      </ul>
+
+      <p>History: {palette.history.items.join(" / ") || "empty"}</p>
+    </section>
+  );
+}

package/examples/observe-and-restore.ts

@@ -0,0 +1,27 @@
+import { replaceState, SigmaType, snapshot } from "preact-sigma";
+
+const TodoList = new SigmaType<{
+  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);
+    },
+  });
+
+const todoList = new TodoList();
+
+todoList.add("Write docs");
+
+const saved = snapshot(todoList);
+
+todoList.add("Ship release");
+replaceState(todoList, saved);
+
+console.log(snapshot(todoList).todos); // ["Write docs"]

package/examples/setup-act.ts

@@ -0,0 +1,34 @@
+import { listen, SigmaType } from "preact-sigma";
+
+const ClickTracker = new SigmaType<{
+  clicks: number;
+  status: "idle" | "ready";
+}>("ClickTracker")
+  .defaultState({
+    clicks: 0,
+    status: "idle",
+  })
+  .setup(function (target: EventTarget) {
+    this.act(function () {
+      this.status = "ready";
+    });
+
+    return [
+      listen(target, "click", () => {
+        this.act(function () {
+          this.clicks += 1;
+        });
+      }),
+    ];
+  });
+
+const target = new EventTarget();
+const tracker = new ClickTracker();
+const cleanup = tracker.setup(target);
+
+target.dispatchEvent(new Event("click"));
+target.dispatchEvent(new Event("click"));
+
+console.log(tracker.status, tracker.clicks); // ready 2
+
+cleanup();

package/examples/signal-access.ts

@@ -0,0 +1,28 @@
+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();

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "preact-sigma",
-  "version": "2.2.1",
+  "version": "2.2.3",
   "keywords": [],
   "license": "MIT",
   "author": "Alec Larson",
@@ -10,7 +10,8 @@
   },
   "files": [
     "dist",
-    "llms.txt"
+    "docs",
+    "examples"
   ],
   "type": "module",
   "exports": {