Fixed typo (ref name) and added basic test

WebReflection · Nov 13, 2023 · a10f491 · a10f491
1 parent 5aecc04
commit a10f491
Show file tree

Hide file tree

Showing 3 changed files with 53 additions and 3 deletions.
diff --git a/esm/rabbit.js b/esm/rabbit.js
@@ -11,11 +11,11 @@ const parseSVG = create(parser(true));
  * @param {Hole} hole
  * @returns {Node}
  */
-export const unroll = (cache, { s: stack, t: template, v: values }) => {
+export const unroll = (cache, { s: svg, t: template, v: values }) => {
   if (values.length && cache.s === empty) cache.s = [];
   unrollValues(cache, values);
   if (cache.t !== template) {
-    const { n: node, d: details } = (stack ? parseSVG : parseHTML)(template, values);
+    const { n: node, d: details } = (svg ? parseSVG : parseHTML)(template, values);
     cache.t = template;
     cache.n = node;
     cache.d = details;

diff --git a/test/index.html b/test/index.html
@@ -0,0 +1,50 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width,initial-scale=1.0">
+  <title>udom</title>
+  <script type="module">
+  const testUHTML = () => import('./uhtml.js').then(({ render, html }) => {
+    console.time('parse uhtml');
+    render(uhtml, html`<div class=${'test'}>${'content'}</div>`);
+    console.timeEnd('parse uhtml');
+  });
+
+  // testUHTML();
+
+  import('../keyed.js').then(async ({ render, html, svg, htmlFor }) => {
+    const { html: htmlNode } = await import('../node.js');
+    let i = 0;
+    const same = () => htmlFor(document, 'key')`<div class=${'test'} data=${{a: i}}>${'content ' + i}</div>`;
+    const diff = () => html`<div class=${'test'} data=${{a: i}}>${'content'}</div>`;
+    const node = () => htmlNode`<div class=${'test'} data=${{a: i}}>${'content'}</div>`;
+    const test = () => {
+      i++;
+      render(udomunderstand, html`
+        <div>
+          ${diff()}
+          ${[
+            same(),
+            diff(),
+            diff(),
+            node(),
+            diff(),
+            diff(),
+          ].concat(Math.random() < .5 ? [diff(), diff()] : [])}
+        </div>
+      `);
+    };
+    test();
+    render(uhtml, html`<button>a</button><button>b</button>`);
+    setInterval(test, 250);
+    console.assert(same() === same());
+    console.assert(diff() !== diff());
+  });
+  </script>
+</head>
+<body>
+  <div id="udomunderstand"></div>
+  <div id="uhtml"></div>
+</body>
+</html>
diff --git a/types/rabbit.d.ts b/types/rabbit.d.ts
@@ -1,4 +1,4 @@
-export function unroll(cache: import("./literals.js").Cache, { s: stack, t: template, v: values }: Hole): Node;
+export function unroll(cache: import("./literals.js").Cache, { s: svg, t: template, v: values }: Hole): Node;
 /**
  * Holds all details needed to render the content on a render.
  * @constructor