ProvenPin Install

Valtio proxy state with subscribe and snapshot: working versions (tested 2026-10-15)

Manage mutable proxy state with Valtio, subscribe to changes, read immutable snapshots, and derive UI-ready views without React.

passed1 passed · 0 failed2026-10-15 16:06 UTC
Status
passed
Last passed
2026-10-15 16:06 UTC
Tests
1 / 1
Language
TypeScript
Runtime
node v22.23.3
pinned versions3
valtio@2.3.2@types/node@26.6.5tsx@4.23.15
run it
npm install --no-audit --no-fund --ignore-scripts=false
npm test
test environment
node v22.23.3
linux 6.17.0-1022-azure
x64
runner: github-actions 38764699834

The code

Exactly the files that passed. Your agent can pull them with get_recipe("valtio-proxy-state") (install), or see them on GitHub.

package.json
{
  "name": "valtio-proxy-state",
  "private": true,
  "type": "module",
  "scripts": {
    "test": "node --import tsx --test test/*.test.ts"
  },
  "dependencies": {
    "valtio": "2.3.2"
  },
  "devDependencies": {
    "@types/node": "26.6.5",
    "tsx": "4.23.15"
  }
}
src/store.ts
import { proxy, snapshot, subscribe } from "valtio/vanilla";

export type Todo = { id: number; text: string; done: boolean };
export type Store = { todos: Todo[]; nextId: number };

export function createStore(): Store {
  return proxy({ todos: [] as Todo[], nextId: 1 });
}

export function addTodo(store: Store, text: string) {
  store.todos.push({ id: store.nextId++, text, done: false });
}

export function toggle(store: Store, id: number) {
  const t = store.todos.find((x) => x.id === id);
  if (t) t.done = !t.done;
}

export function openCount(store: Store) {
  return snapshot(store).todos.filter((t) => !t.done).length;
}

export function watch(store: Store, fn: () => void) {
  return subscribe(store, fn);
}
test/store.test.ts
import { test } from "node:test";
import assert from "node:assert/strict";
import { snapshot } from "valtio/vanilla";
import { addTodo, createStore, openCount, toggle, watch } from "../src/store.ts";

test("proxy mutations notify subscribers and snapshot is immutable", async () => {
  const store = createStore();
  let ticks = 0;
  const unsub = watch(store, () => { ticks++; });
  addTodo(store, "ship");
  addTodo(store, "docs");
  toggle(store, 1);
  await Promise.resolve();
  assert.ok(ticks >= 1);
  assert.equal(openCount(store), 1);
  const snap = snapshot(store);
  assert.equal(snap.todos[0].done, true);
  assert.throws(() => { (snap.todos[0] as { done: boolean }).done = false; });
  unsub();
});

Connect to ProvenPin

Add the free MCP server so your agent can pull this recipe and others like it. Same setup as the docs.

terminal
claude mcp add --transport http provenpin https://mcp.provenpin.com/mcp

Any other MCP client: Streamable HTTP at https://mcp.provenpin.com/mcp. No API key, no signup.