Rough out html tagged template literal

Author: gordonbrander

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

@@ -17,3 +17,5 @@ export const isHole = (value: unknown): value is Hole => {
     (value as Hole).type === "hole"
   );
 };
+
+export const markup = (name: string) => `{{${name}}}`

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

@@ -0,0 +1,57 @@
+import parse from "./parser.js";
+import { Node, isNode } from "./node.js";
+import * as hole from "./hole.js";
+
+export const html = (
+  strings: TemplateStringsArray,
+  ...values: Named[]
+): Renderable => {
+  const templateMarkup = flattenTemplateStrings(strings, values);
+  const root = parse(templateMarkup);
+
+  if (root.children.length !== 1) {
+    throw TypeError("Template have one root node");
+  }
+
+  const template = root.children[0];
+
+  if (!isNode(template)) {
+    throw TypeError("Template root must be an element");
+  }
+
+  const context = Object.freeze(indexContext(values));
+
+  return Object.freeze({
+    type: "renderable",
+    template,
+    context,
+  })
+};
+
+export default html;
+
+export type Renderable = {
+  type: "renderable";
+  template: Node;
+  context: Context;
+};
+
+export type Context = { [key: string]: Named };
+
+export type Named = {
+  name: string;
+};
+
+const indexContext = (items: Named[]): Context => {
+  return Object.fromEntries(items.map((item) => [item.name, item]));
+}
+
+const flattenTemplateStrings = (
+  strings: TemplateStringsArray,
+  values: Named[]
+): string => {
+  return strings.reduce((result, string, i) => {
+    const value = values[i];
+    return result + string + (value ? hole.markup(value.name) : "");
+  }, "");
+}

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

@@ -1,7 +1,7 @@
 import { Hole } from "./hole.js";
 
 export type Node = {
-  type: "node",
+  type: "node";
   tag: string;
   attrs: Attrs;
   children: Children;
@@ -20,4 +20,14 @@ export const create = (
   tag,
   attrs,
   children,
-});
+});
+
+export const isNode = (value: unknown): value is Node => {
+  return (value as Node)?.type === "node";
+};
+
+export const freezeNode = (node: Node): Node => {
+  Object.freeze(node.attrs);
+  Object.freeze(node.children);
+  return Object.freeze(node);
+};

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

@@ -1,10 +1,10 @@
 import sax from "sax";
 import parseMustaches from "./stache.js";
 import { isHole } from "./hole.js";
-import { create as createNode, Node, Attrs } from "./node.js";
+import { create as createNode, freezeNode, Node, Attrs } from "./node.js";
 
-/** Parse a template into a simple object representation */
-export const parse = (xml: string): Node => {
+/** Parse a template into a simple JSON markup representation */
+export const parse = (markup: string): Node => {
   const strict = false;
   const parser = sax.parser(strict, {
     trim: true,
@@ -32,8 +32,12 @@ export const parse = (xml: string): Node => {
     stack.push(next);
   };
 
-  parser.onclosetag = (_tagName) => {
-    stack.pop();
+  parser.onclosetag = (tagName) => {
+    const node = stack.pop();
+    if (!node) {
+      throw new ParseError(`Unexpected closing tag ${tagName}`);
+    }
+    freezeNode(node);
   };
 
   parser.ontext = (text) => {
@@ -42,13 +46,13 @@ export const parse = (xml: string): Node => {
     top.children.push(...parsed);
   };
 
-  parser.write(xml).close();
+  parser.write(markup).close();
 
   if (getTop(stack) !== root) {
     throw new ParseError(`Unexpected root node ${root.tag}`);
   }
 
-  return root;
+  return freezeNode(root);
 };
 
 export default parse;

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

@@ -0,0 +1,33 @@
+/** A simple reactive state cell without any scheduling */
+export const state = <T>(name: string, value: T) => {
+  let state = value;
+  const listeners = new Set<(value: T) => void>();
+
+  const get = () => state;
+
+  const sink = (callback: (value: T) => void) => {
+    listeners.add(callback);
+    callback(state);
+    return () => {
+      listeners.delete(callback);
+    };
+  }
+
+  const send = (value: T) => {
+    state = value;
+    for (const listener of listeners) {
+      listener(state);
+    }
+  }
+
+  return {
+    get name() {
+      return name;
+    },
+    get,
+    sink,
+    send
+  };
+};
+
+export default state;

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

@@ -0,0 +1,35 @@
+import { deepStrictEqual } from "node:assert";
+import html from "../html.js";
+import * as node from "../node.js";
+import * as hole from "../hole.js";
+import state from "../state.js";
+
+describe("html", () => {
+  it("parses tagged template string into a Renderable", () => {
+    const clicks = state<Event | null>('clicks', null);
+    const text = state('text', 'Hello world!');
+
+    const renderable = html`
+      <div class="container" hidden={{hidden}}>
+        <button id="foo" onclick=${clicks}>${text}</button>
+      </div>
+    `;
+
+    deepStrictEqual(
+      renderable.template,
+      node.create(
+        "div",
+        { "class": "container", hidden: hole.create("hidden") },
+        [
+          node.create(
+            "button",
+            { id: "foo", onclick: hole.create("clicks") },
+            [
+              hole.create("text"),
+            ]
+          ),
+        ],
+      )
+    );
+  });
+});