Fix #106 - uhtml/node features parity with the rest

WebReflection · WebReflection · commit 1dc762142ac1 · 2024-01-19T09:49:11.000+01:00
diff --git a/esm/node.js b/esm/node.js
@@ -1,22 +1,35 @@
 /*! (c) Andrea Giammarchi - MIT */
+import { Hole, unroll } from './rabbit.js';
 import { attr } from './handler.js';
-
-import create from './creator.js';
-import parser from './parser.js';
-import render from './render/node.js';
+import { cache } from './literals.js';
+import { empty } from './utils.js';
 
 /** @typedef {import("./literals.js").DOMValue} DOMValue */
 /** @typedef {import("./literals.js").Target} Target */
 
-const tag = svg => {
-  const parse = create(parser(svg));
-  return (template, ...values) => parse(template, values).n;
-};
+const tag = svg => (template, ...values) => unroll(
+  cache(empty),
+  new Hole(svg, template, values)
+);
 
 /** @type {(template: TemplateStringsArray, ...values:DOMValue[]) => Target} A tag to render HTML content. */
 const html = tag(false);
 
 /** @type {(template: TemplateStringsArray, ...values:DOMValue[]) => Target} A tag to render SVG content. */
 const svg = tag(true);
 
+/**
+ * Render directly within a generic container.
+ * @template T
+ * @param {T} where the DOM node where to render content
+ * @param {(() => Target) | Target} what the node to render
+ * @returns
+ */
+const render = (where, what) => {
+  where.replaceChildren(
+    (typeof what === 'function' ? what() : what).valueOf()
+  );
+  return where;
+};
+
 export { render, html, svg, attr };
diff --git a/esm/render/node.js b/esm/render/node.js
diff --git a/test/modern.mjs b/test/modern.mjs
@@ -9,6 +9,7 @@ const assert = (real, expected, message = `expected ${expected} got ${real}`) =>
 if (typeof document === 'undefined') {
   globalThis.document = (new DOMParser).parseFromString('...', 'text/html');
   globalThis.HTMLElement = document.createElement('e').constructor;
+  globalThis.DocumentFragment = document.createDocumentFragment().constructor;
 }
 
 Object.defineProperty(
@@ -203,3 +204,11 @@ assert(
   document.body.outerHTML,
   '<body><!--<>-->ab<!--[2]--><!--</>--></body>'
 );
+
+import('../node.js').then(({ render, html }) => {
+  render(document.head, html`<style>${'body{font-family:sans-serif;}'}</style>`);
+  assert(
+    document.head.outerHTML,
+    '<head><style>body{font-family:sans-serif;}</style></head>'
+  );
+});
diff --git a/test/node.html b/test/node.html
@@ -0,0 +1,14 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width,initial-scale=1.0">
+  <title>uhtml</title>
+  <script type="module">
+    import { html } from '../node.js';
+    var cssText = "p { font-weight: bold; }";
+    var result = html`<style>${cssText}</style>`;
+    console.log(result);
+  </script>
+</head>
+</html>
