Update tests for view

- Add test for hole
- Merge stache with hole
- Update other tests to reflect new view-based approach

Author: gordonbrander

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

@@ -3,7 +3,12 @@ export type Hole = {
   name: string;
 };
 
+const holeNameRegex = /^(\w+)$/;
+
 export const create = (name: string): Hole => {
+  if (name.match(holeNameRegex) == null) {
+    throw TypeError("Template hole names must be alphanumeric");
+  }
   return {
     type: "hole",
     name,
@@ -18,4 +23,32 @@ export const isHole = (value: unknown): value is Hole => {
   );
 };
 
-export const markup = (name: string) => `{{${name}}}`
+export const markup = (name: string) => {
+  if (name.match(holeNameRegex) == null) {
+    throw TypeError("Template hole names must be alphanumeric");
+  }
+  return `{{${name}}}`;
+};
+
+const mustacheRegex = /{{(\w+)}}/g;
+
+/** Parse mustaches in free text, returning an array of text and objects */
+export const parse = (text: string) => {
+  const result = [];
+  let lastIndex = 0;
+  let match: RegExpMatchArray | null = null;
+
+  while ((match = mustacheRegex.exec(text)) !== null) {
+    if (match.index > lastIndex) {
+      result.push(text.slice(lastIndex, match.index));
+    }
+    result.push(create(match[1]));
+    lastIndex = mustacheRegex.lastIndex;
+  }
+
+  if (lastIndex < text.length) {
+    result.push(text.slice(lastIndex));
+  }
+
+  return result;
+};

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

@@ -1,5 +1,4 @@
 import * as hole from "./hole.js";
-import { Reactive } from "./reactive.js";
 import * as logger from "./logger.js";
 import cid from "./cid.js";
 import { view, View } from "./view.js";

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

@@ -1,6 +1,5 @@
 import sax from "sax";
-import parseMustaches from "./stache.js";
-import { isHole } from "./hole.js";
+import { parse as parseMustaches, isHole } from "./hole.js";
 import { create as createVNode, VNode, Props } from "./vnode.js";
 import * as logger from "./logger.js";
 

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

@@ -0,0 +1,65 @@
+import * as assert from "node:assert";
+import * as hole from "../hole.js";
+
+describe("hole.markup()", () => {
+  it("it wraps the key in curly braces", () => {
+    const markup = hole.markup("key");
+    assert.strictEqual(markup, "{{key}}");
+  });
+
+  it("throws if key is not alphanumeric", () => {
+    assert.throws(() => hole.markup("bad key with spaces"));
+  });
+});
+
+describe("hole.create()", () => {
+  it("it creates a hole", () => {
+    const keyHole = hole.create("key");
+    assert.deepStrictEqual(keyHole, {
+      type: "hole",
+      name: "key",
+    });
+  });
+
+  it("throws if key is not alphanumeric", () => {
+    assert.throws(() => hole.create("bad key with spaces"));
+  });
+});
+
+describe("hole.parse()", () => {
+  it("parses", () => {
+    const xml = `Hello {{world}}!`;
+    const result = hole.parse(xml);
+    assert.deepStrictEqual(result, ["Hello ", hole.create("world"), "!"]);
+  });
+
+  it("does not parse staches with non-word characters in them", () => {
+    const xml = `Hello {{ world }}!`;
+    const result = hole.parse(xml);
+    assert.deepStrictEqual(result, ["Hello {{ world }}!"]);
+  });
+
+  it("handles broken staches", () => {
+    const xml = `Hello {{world}!`;
+    const result = hole.parse(xml);
+    assert.deepStrictEqual(result, ["Hello {{world}!"]);
+  });
+
+  it("handles broken staches 2", () => {
+    const xml = `Hello {world}}!`;
+    const result = hole.parse(xml);
+    assert.deepStrictEqual(result, ["Hello {world}}!"]);
+  });
+
+  it("handles broken staches 3", () => {
+    const xml = `Hello {{wor}ld}}!`;
+    const result = hole.parse(xml);
+    assert.deepStrictEqual(result, ["Hello {{wor}ld}}!"]);
+  });
+
+  it("handles broken staches 4", () => {
+    const xml = `Hello {{wor}}ld}}!`;
+    const result = hole.parse(xml);
+    assert.deepStrictEqual(result, ["Hello ", hole.create("wor"), "ld}}!"]);
+  });
+});

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

@@ -1,35 +1,26 @@
-import { deepStrictEqual } from "node:assert";
+import * as assert 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";
+import { state, stream } 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 clicks = stream<Event>();
+    const text = state("Hello world!");
 
-    const renderable = html`
-      <div class="container" hidden={{hidden}}>
+    const view = 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"),
-            ]
-          ),
-        ],
-      )
-    );
+    // @ts-ignore - ignore for test
+    assert.strict(hole.isHole(view.template.props.hidden));
+
+    // @ts-ignore - ignore for test
+    assert.strict(hole.isHole(view.template.children[0].props.onclick));
+
+    // @ts-ignore - ignore for test
+    assert.strict(hole.isHole(view.template.children[0].children[0]));
   });
-});
+});

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

@@ -1,6 +1,6 @@
 import { deepStrictEqual } from "node:assert";
 import parse from "../parser.js";
-import * as node from "../node.js";
+import * as vnode from "../vnode.js";
 import * as hole from "../hole.js";
 
 describe("parse", () => {
@@ -15,25 +15,19 @@ describe("parse", () => {
 
     deepStrictEqual(
       root,
-      node.create(
-        "documentfragment",
-        {},
-        [
-          node.create(
-            "div",
-            { class: "container", hidden: hole.create("hidden") },
-            [
-              node.create(
-                "button",
-                { id: "foo", onclick: hole.create("click") },
-                [
-                  "Hello world!",
-                ]
-              ),
-            ]
-          ),
-        ],
-      )
+      vnode.create("documentfragment", {}, [
+        vnode.create(
+          "div",
+          { class: "container", hidden: hole.create("hidden") },
+          [
+            vnode.create(
+              "button",
+              { id: "foo", onclick: hole.create("click") },
+              ["Hello world!"],
+            ),
+          ],
+        ),
+      ]),
     );
   });
-});
+});

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

@@ -4,15 +4,15 @@ import { effect, isReactive } from "../reactive.js";
 
 describe("isReactive", () => {
   it("returns true for any object with a sink method", () => {
-    const a = state("value", 0);
+    const a = state(0);
     assertEqual(isReactive(a), true);
 
     class B {
       sink() {}
     }
 
     assertEqual(isReactive(new B()), true);
-  })
+  });
 
   it("returns false for objects without a sink method", () => {
     assertEqual(isReactive({}), false);
@@ -29,7 +29,7 @@ describe("effect", () => {
   });
 
   it("subscribes callback to `sink` for reactive value", () => {
-    const value = state("value", 10);
+    const value = state(10);
 
     let valueMut = 0;
     effect(value, (value: number) => {
@@ -43,13 +43,13 @@ describe("effect", () => {
   });
 
   it("ends subscription to reactive value when cancel is called", () => {
-    const value = state("value", 10);
+    const value = state(10);
 
     let valueMut = 0;
     const cancel = effect(value, (value: number) => {
       valueMut = value;
     });
- 
+
     value.send(11);
     cancel();
     value.send(12);
@@ -71,4 +71,4 @@ describe("effect", () => {
     cancel();
     assertEqual(calls, 1);
   });
-});
+});