Resource based vanilla renderer

packages/universal/resource/src/resource-list.ts

@@ -9,6 +9,9 @@ import {
   type UseFnOptions,
 } from "./api.js";
 
+/**
+  * TODO: handle static
+  */
 export function ResourceList<Item, T>(
   list: Iterable<Item>,
   {

packages/x/vanilla/index.ts

@@ -1,2 +1,2 @@
 export { Cursor } from "./src/cursor.js";
-export { Attr, Element as El, Fragment, Text } from "./src/dom.js";
+export { Attr, Comment,Element as El, Fragment, Text } from "./src/dom.js";

packages/x/vanilla/package.json

@@ -34,6 +34,7 @@
   },
   "devDependencies": {
     "@starbeam-dev/build-support": "workspace:*",
-    "rollup": "^3.20.6"
+    "rollup": "^3.20.6",
+    "typescript": "^5.0.4"
   }
 }

packages/x/vanilla/src/dom.ts

@@ -1,57 +1,77 @@
+/**
+  * TODO:
+  *  - DynamicFragment
+  *  - Namespaces
+  *  - SVG
+  *  - Modifier
+  *  - Portal
+  *  - SSR
+  *
+  *  Goals:
+  *   - Implement Glimmer compatibility
+  *   - Write compiler Glimmer -> whatever this DSL ends up being
+  *
+  * Stretch Goals:
+  *   - other compilers (html``)
+  */
 import type { Description, Reactive } from "@starbeam/interfaces";
 import { CachedFormula, DEBUG, type FormulaFn } from "@starbeam/reactive";
-import { RUNTIME } from "@starbeam/runtime";
+import { Resource,type ResourceBlueprint,RUNTIME,use } from "@starbeam/universal";
 
 import { Cursor } from "./cursor.js";
 
 export function Text(
   text: Reactive<string>,
   description?: string | Description
 ): ContentNode {
-  return ContentNode(({ into }) => {
-    const node = into.insert(into.document.createTextNode(text.read()));
+  return Content(
+    ({ into, owner }) => {
+      const node = into.insert(into.document.createTextNode(text.read()));
+
+      return Resource(({ on }) => {
+        on.cleanup(() =>  void node.remove());
+        node.textContent = text.read();
+    })
+  }
 
-    return {
-      cleanup: () => void node.remove(),
-      update: () => (node.textContent = text.read()),
-    };
-  }, DEBUG?.Desc("resource", description, "Text"));
+  , DEBUG?.Desc('resource', description, 'Text'));
 }
 
 export function Comment(
   text: Reactive<string>,
   description?: string | Description
 ): ContentNode {
-  return ContentNode(({ into }) => {
+  return Content(({ into }) => {
     const node = into.insert(into.document.createComment(text.read()));
 
-    return {
-      cleanup: () => void node.remove(),
-      update: () => (node.textContent = text.read()),
-    };
+    return Resource(({ on }) => {
+      on.cleanup(() => void node.remove());
+      node.textContent = text.read();
+    });
   }, DEBUG?.Desc("resource", description, "Comment"));
 }
 
 export function Fragment(
   nodes: ContentNode[],
   description?: string | Description
 ): ContentNode {
-  return ContentNode(({ into, owner }) => {
+  return Content(({ into, owner }) => {
     const start = placeholder(into.document);
     into.insert(start);
 
-    const renderedNodes = nodes.map((nodeConstructor) =>
-      nodeConstructor(into).create({ owner })
+    const renderedNodes = 
+      nodes.map(
+        (nodeConstructor) => nodeConstructor(into).create({ owner })
     );
 
     const end = placeholder(into.document);
     into.insert(end);
     const range = FragmentRange.create(start, end);
 
-    return {
-      cleanup: () => void range.clear(),
-      update: () => void poll(renderedNodes),
-    };
+    return Resource(({ on }) => {
+      on.cleanup(() => void range.clear());
+      poll(renderedNodes);
+    })
   }, DEBUG?.Desc("resource", description, "Fragment"));
 }
 
@@ -60,7 +80,7 @@ export function Attr<E extends Element>(
   value: Reactive<string | null | boolean>,
   description?: string | Description
 ): AttrNode<E> {
-  return ContentNode(({ into }) => {
+  return Content(({ into }) => {
     const current = value.read();
 
     if (typeof current === "string") {
@@ -69,22 +89,18 @@ export function Attr<E extends Element>(
       into.setAttribute(name, "");
     }
 
-    return {
-      cleanup: () => {
+    return Resource(({ on }) => {
+      on.cleanup(() => void into.removeAttribute(name));
+      const next = value.read();
+
+      if (typeof next === "string") {
+        into.setAttribute(name, next);
+      } else if (next === true) {
+        into.setAttribute(name, "");
+      } else if (next === false) {
         into.removeAttribute(name);
-      },
-      update: () => {
-        const next = value.read();
-
-        if (typeof next === "string") {
-          into.setAttribute(name, next);
-        } else if (next === true) {
-          into.setAttribute(name, "");
-        } else if (next === false) {
-          into.removeAttribute(name);
-        }
-      },
-    };
+      }
+    });
   }, DEBUG?.Desc("resource", description, "Attr"));
 }
 
@@ -100,7 +116,7 @@ export function Element<N extends string>(
   },
   description?: Description | string
 ): ContentNode {
-  return ContentNode(({ into, owner }) => {
+  return Content(({ into, owner }) => {
     const element = into.document.createElement(tag);
     const elementCursor = Cursor.appendTo(element);
 
@@ -113,13 +129,16 @@ export function Element<N extends string>(
 
     into.insert(element);
 
-    return {
-      cleanup: () => void element.remove(),
-      update: () => {
-        poll(renderAttributes);
-        poll(renderBody);
-      },
-    };
+    return Resource(({on}, meta) => {
+      on.cleanup(() => void element.remove());
+
+      return {
+        update: () => {
+          renderAttributes.forEach(a => a.read());
+          poll(renderBody);
+        },
+      }
+    });
   }, DEBUG?.Desc("resource", description, "Element"));
 }
 
@@ -129,12 +148,11 @@ function placeholder(document: Document): Text {
   return document.createTextNode("");
 }
 
-type Rendered = FormulaFn<void>;
+type Rendered = FormulaFn<unknown>;
 
 interface OutputConstructor {
-  create: (options: { owner: object }) => Rendered;
+  create: (options: { owner: object }) => FormulaFn<unknown>;
 }
-
 type ContentNode = (into: Cursor) => OutputConstructor;
 type AttrNode<E extends Element = Element> = (into: E) => OutputConstructor;
 
@@ -146,21 +164,19 @@ function poll(rendered: Rendered[] | Rendered): void {
   }
 }
 
-function ContentNode<T extends Cursor | Element>(
-  create: (options: { into: T; owner: object }) => {
-    cleanup: () => void;
-    update: () => void;
-  },
+type ContentConstructor<T extends Cursor | Element> = (options: { into: T, owner: object }) => ResourceBlueprint;
+
+function Content<T extends Cursor | Element>(
+  create: ContentConstructor<T>, 
   description: Description | undefined
 ): (into: T) => OutputConstructor {
   return (into: T) => {
     return {
       create({ owner }) {
-        const { cleanup, update } = create({ into, owner });
-
-        const formula = CachedFormula(update, description);
+        const blueprint = create({ into, owner });
+        const formula = CachedFormula(() => (use(blueprint, { lifetime: owner, metadata: { owner } })).current, description);
 
-        RUNTIME.onFinalize(owner, cleanup);
+        RUNTIME.onFinalize(owner, () => void RUNTIME.finalize(formula));
 
         return formula;
       },

packages/x/vanilla/tests/package.json

@@ -11,5 +11,9 @@
   "dependencies": {
     "@starbeam/universal": "workspace:^",
     "@starbeamx/vanilla": "workspace:^"
+  },
+  "devDependencies": {
+    "typescript": "^5.0.4",
+    "vitest": "^0.30.1"
   }
 }

packages/x/vanilla/tests/vanilla.spec.ts

@@ -1,7 +1,7 @@
 // @vitest-environment happy-dom
 
 import { Cell, RUNTIME } from "@starbeam/universal";
-import { Cursor, El, Fragment, Text } from "@starbeamx/vanilla";
+import { Comment, Cursor, El, Fragment, Text } from "@starbeamx/vanilla";
 import { describe, expect, test } from "vitest";
 
 import { env } from "./env";
@@ -11,7 +11,9 @@ describe("Vanilla Renderer", () => {
     const { body, owner } = env();
 
     const cell = Cell("Hello World");
-    const render = Text(cell)(body.cursor).create({ owner });
+    const text = Text(cell);
+    const renderer = text(body.cursor);
+    const render = renderer.create({ owner });
 
     expect(body.innerHTML).toBe("Hello World");
 
@@ -26,6 +28,27 @@ describe("Vanilla Renderer", () => {
     expect(body.innerHTML).toBe("");
   });
 
+  test("it can render a comment", () => {
+    const { body, owner } = env();
+
+    const cell = Cell("Hello World");
+    const text = Comment(cell);
+    const renderer = text(body.cursor);
+    const render = renderer.create({ owner });
+
+    expect(body.innerHTML).toBe("<!--Hello World-->");
+
+    cell.set("Goodbye world");
+    render.read();
+
+    expect(body.innerHTML).toBe("<!--Goodbye world-->");
+
+    RUNTIME.finalize(owner);
+    render.read();
+
+    expect(body.innerHTML).toBe("");
+  });
+
   test("it can render fragments", () => {
     const { body, owner } = env();
 
@@ -59,7 +82,7 @@ describe("Vanilla Renderer", () => {
     expect(body.innerHTML).toBe("");
   });
 
-  test("it can render elements", () => {
+  test('it can render elements', () => {
     const { body, owner } = env();
     const cursor = body.cursor;
 
@@ -80,6 +103,34 @@ describe("Vanilla Renderer", () => {
       `<div title="Hello World">Hello World - Goodbye World</div>`
     );
   });
+
+  // This is currently *very* slow
+  test("it can render many elements", () => {
+    const { body, owner } = env();
+    const cursor = body.cursor;
+    const fragments = [];
+
+    for (let i = 0; i < 1000; i++) {
+      const a = Cell("Hello World");
+      const b = Cell(" - ");
+      const c = Cell("Goodbye World");
+
+      const title = El.Attr("title", a);
+
+      const el = El({
+        tag: "div",
+        attributes: [title],
+        body: [Text(a), Text(b), Text(c)],
+      });
+      fragments.push(el);
+    }
+
+    console.time('render');
+    Fragment(fragments)(cursor).create({ owner });
+    console.timeEnd('render');
+
+    expect(body.snapshot().length).toBe(fragments.length);
+  });
 });
 
 export class Body {
@@ -99,8 +150,8 @@ export class Body {
     return this.#body.innerHTML;
   }
 
-  snapshot(): void {
-    this.#snapshot = [...this.#body.childNodes];
+  snapshot() : ChildNode[] {
+    return this.#snapshot = [...this.#body.childNodes];
   }
 
   expectStable(): void {