Introduce deep paths for bindings and make views work with propagators

typescript/package.json

@@ -40,6 +40,7 @@
         "./packages/common-html:build",
         "./packages/common-frp:build",
         "./packages/common-frp-lit:build",
+        "./packages/common-propagator:build",
         "./packages/common-ui:build",
         "./packages/llm-client:build",
         "./common/data:build",
@@ -62,6 +63,7 @@
         "./packages/common-html:clean",
         "./packages/common-frp:clean",
         "./packages/common-frp-lit:clean",
+        "./packages/common-propagator:clean",
         "./packages/common-ui:clean",
         "./packages/llm-client:clean",
         "./common/data:clean",

typescript/packages/common-html/example/main.ts

@@ -1,27 +1,23 @@
-import render, { setNodeSanitizer, setEventSanitizer } from "../src/render.js";
+import { cell } from "@commontools/common-propagator";
 import view from "../src/view.js";
 import html from "../src/html.js";
-import { state, stream } from "../src/state.js";
+import render from "../src/render.js";
 import { setDebug } from "../src/logger.js";
 
 setDebug(true);
 
-// setNodeSanitizer(...);
-// setEventSanitizer(...);
+const inputState = cell({ text: "Hello, world!" });
+const inputEvents = cell<InputEvent | null>(null);
 
-const text = state("Hello, world!");
-const input = stream<InputEvent>();
-
-input.sink((event) => {
-  console.log("input", event);
-  const target = event.target as HTMLInputElement | null;
-  const value = target?.value ?? null;
-  if (value !== null) {
-    text.send(value);
+inputEvents.sink((event) => {
+  const target = event?.target as HTMLInputElement | null;
+  const value = target?.value;
+  if (value != null) {
+    inputState.send({ text: value });
   }
 });
 
-const time = state(new Date().toLocaleTimeString());
+const time = cell(new Date().toLocaleTimeString());
 
 setInterval(() => {
   time.send(new Date().toLocaleTimeString());
@@ -33,17 +29,15 @@ const timeView = view(`<div class="time">{{time}}</div>`, { time });
 const titleGroup = view(
   `
     <div class="title-group">
-      <h1 class="title">{{text}}</h1>
-      <input type="text" oninput={{input}} value={{text}} />
+      <h1 class="title">{{input.text}}</h1>
+      <input type="text" oninput={{oninput}} value={{input.text}} />
     </div>
   `,
-  { text, input },
+  { input: inputState, oninput: inputEvents },
 );
 
 const container = html`
   <div class="container">${timeView} ${titleGroup}</div>
 `;
 
-const dom = render(container);
-
-document.body.appendChild(dom);
+const _cancel = render(document.body, container);

typescript/packages/common-html/package.json

@@ -11,7 +11,7 @@
     "test-browser": "npm run build && web-test-runner \"lib/test-browser/**/*.test.js\" --node-resolve",
     "build": "wireit",
     "clean": "wireit",
-    "dev": "vite example"
+    "dev": "npm run build && vite example"
   },
   "repository": {
     "type": "git",
@@ -26,10 +26,10 @@
     "./lib/index.js"
   ],
   "dependencies": {
-    "htmlparser2": "^9.1.0",
-    "vite": "^5.3.3"
+    "htmlparser2": "^9.1.0"
   },
   "devDependencies": {
+    "vite": "^5.3.3",
     "@types/mocha": "^10.0.7",
     "@types/node": "^20.14.10",
     "@types/sax": "^1.2.7",
@@ -41,7 +41,9 @@
   },
   "wireit": {
     "build": {
-      "dependencies": [],
+      "dependencies": [
+        "../common-propagator:build"
+      ],
       "files": [
         "./src/**/*"
       ],

typescript/packages/common-html/src/html.ts

@@ -1,7 +1,6 @@
-import * as hole from "./hole.js";
 import * as logger from "./logger.js";
-import cid from "./cid.js";
-import { view, View } from "./view.js";
+import tid from "./tid.js";
+import { view, View, markupBinding } from "./view.js";
 
 export const html = (
   strings: TemplateStringsArray,
@@ -13,7 +12,7 @@ export const html = (
 
   // Create pairs of name/value by generating name
   const namedValues: Array<[string, unknown]> = values.map((value) => {
-    return [cid(), value];
+    return [tid(), value];
   });
 
   // Flatten template string
@@ -23,7 +22,7 @@ export const html = (
       return result + string;
     }
     const [name] = namedValue;
-    return result + string + hole.markup(name);
+    return result + string + markupBinding(name);
   }, "");
 
   logger.debug("Flattened", markup);

typescript/packages/common-html/src/index.ts

@@ -1,8 +1,16 @@
-export { view, View, Context } from "./view.js";
+export {
+  view,
+  View,
+  Context,
+  parse,
+  ParseError,
+  vnode,
+  VNode,
+  binding,
+  Binding,
+  section,
+  Section,
+} from "./view.js";
 export { html } from "./html.js";
 export { render, setNodeSanitizer, setEventSanitizer } from "./render.js";
-export { VNode } from "./vnode.js";
-export { Hole } from "./hole.js";
-export { Reactive } from "./reactive.js";
 export { setDebug } from "./logger.js";
-export { cancel, Cancel } from "./cancel.js";