added holed comments + made unsafe tag compatible

Author: WebReflection

src/dom/ish.js

@@ -5,6 +5,7 @@ import { assign, freeze, isArray } from '../utils.js';
 export const ELEMENT = 1;
 export const ATTRIBUTE = 2;
 export const TEXT = 3;
+export const DATA = 4;
 export const COMMENT = 8;
 export const DOCUMENT_TYPE = 10;
 export const FRAGMENT = 11;

src/dom/node.js

@@ -1,6 +1,6 @@
 import DEBUG from '../debug.js';
 import errors from '../errors.js';
-
+import { reduce } from '../utils.js';
 import resolve from './resolve.js';
 import set from './process.js';
 import props from './props.js';
@@ -51,9 +51,7 @@ const create = ({ p: fragment, d: updates }, values) => {
   if (refs) setRefs(refs);
 
   if (DEBUG && values.length) console.timeEnd(`mapping ${values.length} updates`);
-  const { childNodes } = root;
-  length = childNodes.length;
-  return length === 1 ? childNodes[0] : root;
+  return reduce(root);
 };
 
 const tag = (xml, cache = new WeakMap) =>

src/dom/update.js

@@ -5,10 +5,11 @@ import {
   ATTRIBUTE as TEMPLATE_ATTRIBUTE,
   COMMENT as TEMPLATE_COMMENT,
   COMPONENT as TEMPLATE_COMPONENT,
+  DATA as TEMPLATE_DATA,
   TEXT as TEMPLATE_TEXT,
 } from './ish.js';
 
-import { Unsafe, assign, entries, isArray } from '../utils.js';
+import { Unsafe, assign, entries, reduce, isArray } from '../utils.js';
 import { PersistentFragment, diffFragment } from './persistent-fragment.js';
 import { ref } from './ref.js';
 import creator from './creator.js';
@@ -167,6 +168,7 @@ export const update = (node, type, path, name, hint) => {
         }
       }
     }
+    case TEMPLATE_DATA: return pdt(path, directFor('data'), TEXT);
   }
 };
 
@@ -211,8 +213,10 @@ function toggle(node, curr) {
 
 function unsafe(node, curr) {
   const [wm, xml] = this;
-  const pf = PersistentFragment(fragment(curr, xml));
-  (wm.get(node) ?? node).replaceWith(pf);
-  wm.set(node, pf);
+  const f = fragment(curr, xml);
+  const u = reduce(f);
+  const n = u === f ? PersistentFragment(u) : u;
+  (wm.get(node) ?? node).replaceWith(n);
+  wm.set(node, n);
   return curr;
 }

src/parser/index.js

@@ -7,6 +7,7 @@ import {
   ATTRIBUTE,
   COMMENT,
   COMPONENT,
+  DATA,
   ELEMENT,
   TEXT,
   TEXT_ELEMENTS,
@@ -34,7 +35,7 @@ const ATTRS = /([^\s/>=]+)(?:=(\x00|(?:(['"])[\s\S]*?\3)))?/g;
 /** @typedef {import('../dom/ish.js').Node} Node */
 /** @typedef {import('../dom/ish.js').Element} Element */
 /** @typedef {import('../dom/ish.js').Component} Component */
-/** @typedef {(node: import('../dom/ish.js').Node, type: typeof ATTRIBUTE | typeof TEXT | typeof COMMENT | typeof COMPONENT, path: number[], name: string, hint: unknown) => unknown} update */
+/** @typedef {(node: import('../dom/ish.js').Node, type: typeof ATTRIBUTE | typeof DATA | typeof TEXT | typeof COMMENT | typeof COMPONENT, path: number[], name: string, hint: unknown) => unknown} update */
 /** @typedef {Element | Component} Container */
 
 /** @type {update} */
@@ -130,6 +131,11 @@ export default ({
         if (DEBUG && (i - index) < 6) throw errors.invalid_comment(template);
         const data = content.slice(index + 4, i - 2);
         if (data[0] === '!') append(node, new Comment(data.slice(1).replace(/!$/, '')));
+        else if (data === NUL) {
+          const comment = append(node, new Comment('◦'));
+          values.push(update(comment, DATA, path(comment), '', holes[hole++]));
+          pos = i + 1;
+        }
       }
       else {
         if (DEBUG && !content.slice(index + 2, i).toLowerCase().startsWith('doctype')) throw errors.invalid_doctype(template, content.slice(index + 2, i));

src/utils.js

@@ -34,7 +34,16 @@ export class Unsafe {
   }
 }
 
-export const unsafe = data => new Unsafe(data);
+export const reduce = node => {
+  const { childNodes } = node;
+  return childNodes.length === 1 ? childNodes[0] : node;
+};
+
+export const unsafe = (template, ...values) => new Unsafe(
+  typeof template === 'string' ?
+    template :
+    [template[0], ...values.map((v, i) => v + template[i + 1])].join('')
+);
 
 export const createComment = value => document.createComment(value);
 /* c8 ignore stop */

test/base.html

@@ -12,41 +12,7 @@
 </script>
 <script type="module">
 import { render, html, unsafe } from 'uhtml';
-import { effect, signal } from 'dom-cue';
-import { proxy, deref } from 'weaky';
 
-const fr = new FinalizationRegistry(cleanup => {
-  console.log('cleaning up');
-  cleanup();
-});
-
-function Button(props, state) {
-  const counter = proxy(html`0`);
-  const node = html`
-    <button class="counter" onclick=${() => props.signal.value++}>
-      ${props.text}
-      ${deref(counter)}
-    </button>
-  `;
-
-  fr.register(node, effect(() => {
-    counter.data = props.signal.value;
-  }));
-
-  return node;
-}
-
-const ref = { current: null };
-render(document.body, () => html`
-  <h1 key=${1} ref=${ref} class=${'title'} onclick=${() => alert('Hello DOM!')}>
-    Hello ${[html`DOM`]} !
-  </h2>
-  ${unsafe('<hr />')}
-  <${Button} text=${'👋'} signal=${signal(0)} />
-  <${Button} text=${'👋'} signal=${signal(0)} />
-  <${Button} text=${'👋'} signal=${signal(0)} />
-`);
-
-console.log(ref.current);
-ref.current = null;
+debugger;
+render(document.body, html`${unsafe`<hr /><hr />`} ah, <em>ok</em>`);
 </script>

types/dom/ish.d.ts

@@ -1,6 +1,7 @@
 export const ELEMENT: 1;
 export const ATTRIBUTE: 2;
 export const TEXT: 3;
+export const DATA: 4;
 export const COMMENT: 8;
 export const DOCUMENT_TYPE: 10;
 export const FRAGMENT: 11;

types/parser/index.d.ts

@@ -11,7 +11,7 @@ export default _default;
 export type Node = import("../dom/ish.js").Node;
 export type Element = import("../dom/ish.js").Element;
 export type Component = import("../dom/ish.js").Component;
-export type update = (node: import("../dom/ish.js").Node, type: typeof ATTRIBUTE | typeof TEXT | typeof COMMENT | typeof COMPONENT, path: number[], name: string, hint: unknown) => unknown;
+export type update = (node: import("../dom/ish.js").Node, type: typeof ATTRIBUTE | typeof DATA | typeof TEXT | typeof COMMENT | typeof COMPONENT, path: number[], name: string, hint: unknown) => unknown;
 export type Container = Element | Component;
 import { Comment as DOMComment } from '../dom/ish.js';
 import { DocumentType as DOMDocumentType } from '../dom/ish.js';
@@ -20,6 +20,7 @@ import { Fragment as DOMFragment } from '../dom/ish.js';
 import { Element as DOMElement } from '../dom/ish.js';
 import { Component as DOMComponent } from '../dom/ish.js';
 import { ATTRIBUTE } from '../dom/ish.js';
+import { DATA } from '../dom/ish.js';
 import { TEXT } from '../dom/ish.js';
 import { COMMENT } from '../dom/ish.js';
 import { COMPONENT } from '../dom/ish.js';

types/utils.d.ts

@@ -5,7 +5,8 @@ export class Unsafe {
     toString(): string;
     #private;
 }
-export function unsafe(data: any): Unsafe;
+export function reduce(node: any): any;
+export function unsafe(template: any, ...values: any[]): Unsafe;
 export function createComment(value: any): Comment;
 export const assign: {
     <T extends {}, U>(target: T, source: U): T & U;