feat(react): add state support

.changeset/silent-papayas-trade.md

@@ -0,0 +1,5 @@
+---
+"@coldwired/react": minor
+---
+
+add state support

packages/react/package.json

@@ -2,7 +2,9 @@
   "name": "@coldwired/react",
   "description": "React support for @coldwired",
   "license": "MIT",
-  "files": ["dist"],
+  "files": [
+    "dist"
+  ],
   "main": "./dist/index.cjs.js",
   "module": "./dist/index.es.js",
   "types": "./dist/types/index.d.ts",
@@ -32,12 +34,13 @@
     "@coldwired/utils": "^0.13.0"
   },
   "devDependencies": {
-    "react-error-boundary": "^4.0.13",
     "@coldwired/actions": "*",
     "@types/react": "^18.2.45",
     "@types/react-dom": "^18.2.18",
     "html-entities": "^2.4.0",
     "react-aria-components": "^1.2.0",
+    "react-error-boundary": "^4.0.13",
+    "react-fast-compare": "^3.2.2",
     "zod": "^3.23.4"
   },
   "peerDependencies": {
@@ -55,15 +58,24 @@
   "eslintConfig": {
     "root": true,
     "parser": "@typescript-eslint/parser",
-    "plugins": ["@typescript-eslint"],
-    "extends": ["eslint:recommended", "plugin:@typescript-eslint/recommended", "prettier"],
+    "plugins": [
+      "@typescript-eslint"
+    ],
+    "extends": [
+      "eslint:recommended",
+      "plugin:@typescript-eslint/recommended",
+      "prettier"
+    ],
     "rules": {
       "@typescript-eslint/no-explicit-any": "off",
       "@typescript-eslint/no-redeclare": "off"
     },
     "overrides": [
       {
-        "files": ["vite.config.js", "vitest.config.ts"],
+        "files": [
+          "vite.config.js",
+          "vitest.config.ts"
+        ],
         "env": {
           "node": true
         }

packages/react/src/index.ts

@@ -1,3 +1,4 @@
 export * from './root';
 export * from './plugin';
-export { hydrate, preload, createReactTree } from './react-tree-builder';
+export * from './observable';
+export { hydrate, preload, createReactTree, createState, type State } from './react-tree-builder';

packages/react/src/observable.ts

@@ -0,0 +1,70 @@
+export interface Observer<T> {
+  next: NextChannel<T>;
+}
+
+type Connect<T> = (observer: Observer<T>) => Disconnect;
+type Disconnect = () => void;
+
+export type NextChannel<T> = (value: T) => void;
+export type ObserverOrNext<T> = Observer<T> | NextChannel<T>;
+
+export type Unsubscribe = () => void;
+export type Subscription = { unsubscribe: Unsubscribe };
+
+/**
+ * `Observable` is a standard interface that's useful for modeling multiple,
+ * asynchronous events.
+ */
+export class Observable<T> implements Observable<T> {
+  #connect: Connect<T>;
+
+  /**
+   * The provided function should receive an observer and connect that
+   * observer's `next` method to an event source (for instance,
+   * `element.addEventListener('click', observer.next)`).
+   *
+   * It must return a function that will disconnect the observer from the event
+   * source.
+   */
+  constructor(connect: Connect<T>) {
+    this.#connect = connect;
+  }
+
+  /**
+   * `subscribe` uses the function supplied to the constructor to connect an
+   * observer to an event source.  Each observer is connected independently:
+   * each call to `subscribe` calls `connect` with the new observer.
+   *
+   * To disconnect the observer from the event source, call `unsubscribe` on the
+   * returned subscription.
+   *
+   * Note: `subscribe` accepts either a function or an object with a
+   * next method.
+   */
+  subscribe(observerOrNext: ObserverOrNext<T>): Subscription {
+    // For simplicity's sake, `subscribe` accepts `next` either as either an
+    // anonymous function or wrapped in an object (the observer).  Since
+    // `connect` always expects to receive an observer, wrap any loose
+    // functions in an object.
+    const observer = wrapWithObserver<T>(observerOrNext);
+
+    let disconnect: Disconnect | undefined = this.#connect(observer);
+
+    return {
+      unsubscribe() {
+        if (disconnect) {
+          disconnect();
+          disconnect = undefined;
+        }
+      },
+    };
+  }
+}
+
+function wrapWithObserver<T>(listener: ObserverOrNext<T>): Observer<T> {
+  if (typeof listener == 'function') {
+    return { next: listener };
+  } else {
+    return listener;
+  }
+}

packages/react/src/react-tree-builder.test.tsx

@@ -10,6 +10,7 @@ import {
   hydrate,
   preload,
   defaultSchema,
+  createNullState,
   type ReactComponent,
 } from './react-tree-builder';
 
@@ -61,6 +62,7 @@ describe('@coldwired/react', () => {
       const tree = createReactTree(
         { tagName: 'div', attributes: { className: 'title' }, children: 'Hello' },
         {},
+        createNullState(),
       );
       const html = renderToStaticMarkup(tree);
       expect(html).toBe('<div class="title">Hello</div>');
@@ -79,6 +81,7 @@ describe('@coldwired/react', () => {
           ],
         },
         {},
+        createNullState(),
       );
       const html = renderToStaticMarkup(tree);
       expect(html).toBe(
@@ -122,6 +125,7 @@ describe('@coldwired/react', () => {
           },
         ],
         { Greeting, FieldSet },
+        createNullState(),
       );
       const html = renderToStaticMarkup(tree);
       expect(html).toBe(