@solidjs/html 2.0.0-experimental.9 → 2.0.0-rc.0

package/README.md

@@ -2,26 +2,30 @@
 
 This sub module provides a Tagged Template Literal `html` method for Solid. This is useful to use Solid in non-compiled environments. This method can be used as replacement for JSX.
 
-`html` uses `${}` to escape into JavaScript expressions. Components are closed with `<//>`
+`html` uses `${}` to escape into JavaScript expressions. Components are closed with `<//>`.
+
+Since Solid 2.0, `html` is backed by [`@dom-expressions/tagged-jsx`](https://www.npmjs.com/package/@dom-expressions/tagged-jsx), an AST-based tagged-template runtime. Templates are parsed at runtime (no `new Function` / `eval`, so it is CSP-safe) and reactive bindings are installed against the resulting DOM.
+
+For editor support, the [Tagged JSX Tools VS Code extension](https://marketplace.visualstudio.com/items?itemName=DanielRKling.tagged-jsx-vscode) provides syntax highlighting, formatting, conversion commands, and TypeScript diagnostics for JSX inside tagged template literals.
 
 ```js
 // create an element with a title attribute
 html`<button title="My button">Click Me</button>`
 
-// create a component with a title prop
+// create a component with a title prop (inline expression hole)
 html`<${Button} title="My button">Click me<//>`
 
 // create an element with dynamic attribute and spread
 html`<div title=${() => selectedClass()} ...${props} />`
 ```
 
-Using `html` is slightly less efficient than JSX(but more than HyperScript), requires a larger runtime that isn't treeshakeable, and cannot leverage expression analysis, so it requires manual wrapping of expressions and has a few other caveats (see below).
+Using `html` is slightly less efficient than JSX, requires a larger runtime that isn't treeshakeable, and cannot leverage expression analysis, so it requires manual wrapping of expressions and has a few other caveats (see below).
 
 ## Example
 
 ```js
-import { render } from "solid-js/web";
-import html from "solid-js/html";
+import { render } from "@solidjs/web";
+import html from "@solidjs/html";
 import { createSignal } from "solid-js";
 
 function Button(props) {
@@ -38,6 +42,40 @@ function Counter() {
 render(Counter, document.getElementById("app"));
 ```
 
+## Component registry
+
+Inline expression holes (`<${Component} />`) work without any setup, but the Tagged JSX runtime also supports a named component registry. `html.define({ ... })` returns a new tag with the supplied components merged into the registry; capitalized tag names in the template are then looked up by name. The original `html` tag is unchanged.
+
+```js
+import html from "@solidjs/html";
+import { For, Show } from "solid-js";
+
+const tpl = html.define({ For, Show });
+
+function List(props) {
+  return tpl`
+    <Show when=${() => props.items.length > 0} fallback=${tpl`<p>No items</p>`}>
+      <ul>
+        <For each=${() => props.items}>
+          ${item => tpl`<li>${item.name}</li>`}
+        </For>
+      </ul>
+    </Show>
+  `;
+}
+```
+
+An unregistered capitalized tag name throws at template-construction time, which gives tooling (codemods, syntax highlighters) something concrete to key off.
+
+## Return shape
+
+A `html\`...\`` expression returns a single node when the template resolves to one root, and an array of nodes when it resolves to many. Consumers that need to spread or iterate the result should normalize:
+
+```js
+const result = html`<span/><span/>`;
+const nodes = Array.isArray(result) ? result : [result];
+```
+
 ## Differences from JSX
 
 There are a few differences from Solid's JSX that are important to note.

package/dist/html.cjs

@@ -2,586 +2,19 @@
 
 var web = require('@solidjs/web');
 
-const tagRE = /(?:<!--[\S\s]*?-->|<(?:"[^"]*"['"]*|'[^']*'['"]*|[^'">])+>)/g;
-const attrRE = /(?:\s(?<boolean>[^/\s><=]+?)(?=[\s/>]))|(?:(?<name>\S+?)(?:\s*=\s*(?:(['"])(?<quotedValue>[\s\S]*?)\3|(?<unquotedValue>[^\s>]+))))/g;
-const lookup = {
-  area: true,
-  base: true,
-  br: true,
-  col: true,
-  embed: true,
-  hr: true,
-  img: true,
-  input: true,
-  keygen: true,
-  link: true,
-  menuitem: true,
-  meta: true,
-  param: true,
-  source: true,
-  track: true,
-  wbr: true
-};
-function parseTag(tag) {
-  const res = {
-    type: 'tag',
-    name: '',
-    voidElement: false,
-    attrs: [],
-    children: []
-  };
-  const tagMatch = tag.match(/<\/?([^\s]+?)[/\s>]/);
-  if (tagMatch) {
-    res.name = tagMatch[1];
-    if (lookup[tagMatch[1].toLowerCase()] || tag.charAt(tag.length - 2) === '/') {
-      res.voidElement = true;
-    }
-    if (res.name.startsWith('!--')) {
-      const endIndex = tag.indexOf('-->');
-      return {
-        type: 'comment',
-        comment: endIndex !== -1 ? tag.slice(4, endIndex) : ''
-      };
-    }
-  }
-  const reg = new RegExp(attrRE);
-  for (const match of tag.matchAll(reg)) {
-    if ((match[1] || match[2]).startsWith('use:')) {
-      res.attrs.push({
-        type: 'directive',
-        name: match[1] || match[2],
-        value: match[4] || match[5] || ''
-      });
-    } else {
-      res.attrs.push({
-        type: 'attr',
-        name: match[1] || match[2],
-        value: match[4] || match[5] || ''
-      });
-    }
-  }
-  return res;
-}
-function pushTextNode(list, html, start) {
-  const end = html.indexOf('<', start);
-  const content = html.slice(start, end === -1 ? undefined : end);
-  if (!/^\s*$/.test(content)) {
-    list.push({
-      type: 'text',
-      content: content
-    });
-  }
-}
-function pushCommentNode(list, tag) {
-  const content = tag.replace('<!--', '').replace('-->', '');
-  if (!/^\s*$/.test(content)) {
-    list.push({
-      type: 'comment',
-      content: content
-    });
-  }
-}
-function parse(html) {
-  const result = [];
-  let current = undefined;
-  let level = -1;
-  const arr = [];
-  const byTag = {};
-  html.replace(tagRE, (tag, index) => {
-    const isOpen = tag.charAt(1) !== '/';
-    const isComment = tag.slice(0, 4) === '<!--';
-    const start = index + tag.length;
-    const nextChar = html.charAt(start);
-    let parent = undefined;
-    if (isOpen && !isComment) {
-      level++;
-      current = parseTag(tag);
-      if (!current.voidElement && nextChar && nextChar !== '<') {
-        pushTextNode(current.children, html, start);
-      }
-      byTag[current.tagName] = current;
-      if (level === 0) {
-        result.push(current);
-      }
-      parent = arr[level - 1];
-      if (parent) {
-        parent.children.push(current);
-      }
-      arr[level] = current;
-    }
-    if (isComment) {
-      if (level < 0) {
-        pushCommentNode(result, tag);
-      } else {
-        pushCommentNode(arr[level].children, tag);
-      }
-    }
-    if (isComment || !isOpen || current.voidElement) {
-      if (!isComment) {
-        level--;
-      }
-      if (nextChar !== '<' && nextChar) {
-        parent = level === -1 ? result : arr[level].children;
-        pushTextNode(parent, html, start);
-      }
-    }
-  });
-  return result;
-}
-function attrString(attrs) {
-  const buff = [];
-  for (const attr of attrs) {
-    buff.push(attr.name + '="' + attr.value.replace(/"/g, '&quot;') + '"');
-  }
-  if (!buff.length) {
-    return '';
-  }
-  return ' ' + buff.join(' ');
-}
-function stringifier(buff, doc) {
-  switch (doc.type) {
-    case 'text':
-      return buff + doc.content;
-    case 'tag':
-      buff += '<' + doc.name + (doc.attrs ? attrString(doc.attrs) : '') + (doc.voidElement ? '/>' : '>');
-      if (doc.voidElement) {
-        return buff;
-      }
-      return buff + doc.children.reduce(stringifier, '') + '</' + doc.name + '>';
-    case 'comment':
-      return buff += '<!--' + doc.content + '-->';
-  }
-}
-function stringify(doc) {
-  return doc.reduce(function (token, rootEl) {
-    return token + stringifier('', rootEl);
-  }, '');
-}
-const cache = new Map();
-const VOID_ELEMENTS = /^(?:area|base|br|col|embed|hr|img|input|keygen|link|menuitem|meta|param|source|track|wbr)$/i;
-const spaces = " \\f\\n\\r\\t";
-const almostEverything = "[^" + spaces + "\\/>\"'=]+";
-const attrName = "[ " + spaces + "]+(?:use:<!--#-->|" + almostEverything + ")";
-const tagName = "<([A-Za-z$#]+[A-Za-z0-9:_-]*)((?:";
-const attrPartials = "(?:\\s*=\\s*(?:'[^']*?'|\"[^\"]*?\"|\\([^)]*?\\)|<[^>]*?>|" + almostEverything + "))?)";
-const attrSeeker = new RegExp(tagName + attrName + attrPartials + "+)([ " + spaces + "]*/?>)", "g");
-const findAttributes = new RegExp("(" + attrName + "\\s*=\\s*)(<!--#-->|['\"(]([\\w\\s]*<!--#-->[\\w\\s]*)*['\")])", "gi");
-const selfClosing = new RegExp(tagName + attrName + attrPartials + "*)([ " + spaces + "]*/>)", "g");
-const marker = "<!--#-->";
-const reservedNameSpaces = new Set(["class", "on", "style", "use", "prop"]);
-function attrReplacer($0, $1, $2, $3) {
-  return "<" + $1 + $2.replace(findAttributes, replaceAttributes) + $3;
-}
-function replaceAttributes($0, $1, $2) {
-  return $1.replace(/<!--#-->/g, "###") + ($2[0] === '"' || $2[0] === "'" ? $2.replace(/<!--#-->/g, "###") : '"###"');
-}
-function fullClosing($0, $1, $2) {
-  return VOID_ELEMENTS.test($1) ? $0 : "<" + $1 + $2 + "></" + $1 + ">";
-}
-function parseDirective(name, value, tag, options) {
-  if (name === "use:###" && value === "###") {
-    const count = options.counter++;
-    options.exprs.push(`typeof exprs[${count}] === "function" ? r.use(exprs[${count}], ${tag}, exprs[${options.counter++}]) : (()=>{throw new Error("use:### must be a function")})()`);
-  } else {
-    throw new Error(`Not support syntax ${name} must be use:{function}`);
-  }
-}
-function createHTML(r, {
-  delegateEvents = true,
-  functionBuilder = (...args) => new Function(...args)
-} = {}) {
-  let uuid = 1;
-  r.wrapProps = props => {
-    const d = Object.getOwnPropertyDescriptors(props);
-    for (const k in d) {
-      if (typeof d[k].value === "function" && !d[k].value.length) r.dynamicProperty(props, k);
-    }
-    return props;
-  };
-  r.resolveFn = fn => typeof fn === "function" ? fn() : fn;
-  function createTemplate(statics, opt) {
-    let i = 0,
-      markup = "";
-    for (; i < statics.length - 1; i++) {
-      markup = markup + statics[i] + "<!--#-->";
-    }
-    markup = markup + statics[i];
-    const replaceList = [[selfClosing, fullClosing], [/<(<!--#-->)/g, "<###"], [/\.\.\.(<!--#-->)/g, "###"], [attrSeeker, attrReplacer], [/>\n+\s*/g, ">"], [/\n+\s*</g, "<"], [/\s+</g, " <"], [/>\s+/g, "> "]];
-    markup = replaceList.reduce((acc, x) => {
-      return acc.replace(x[0], x[1]);
-    }, markup);
-    const pars = parse(markup);
-    const [html, code] = parseTemplate(pars, opt.funcBuilder),
-      templates = [];
-    for (let i = 0; i < html.length; i++) {
-      templates.push(document.createElement("template"));
-      templates[i].innerHTML = html[i];
-      const nomarkers = templates[i].content.querySelectorAll("script,style");
-      for (let j = 0; j < nomarkers.length; j++) {
-        const d = nomarkers[j].firstChild?.data || "";
-        if (d.indexOf(marker) > -1) {
-          const parts = d.split(marker).reduce((memo, p, i) => {
-            i && memo.push("");
-            memo.push(p);
-            return memo;
-          }, []);
-          nomarkers[i].firstChild.replaceWith(...parts);
-        }
-      }
-    }
-    templates[0].create = code;
-    cache.set(statics, templates);
-    return templates;
-  }
-  function parseKeyValue(node, tag, name, value, isSVG, options) {
-    let expr, parts, namespace;
-    if (value === "###") {
-      expr = `_$v`;
-      options.counter++;
-    } else {
-      const chunks = value.split("###");
-      options.counter = chunks.length - 1 + options.counter;
-      expr = chunks.map((v, i) => i ? ` + _$v[${i - 1}] + "${v}"` : `"${v}"`).join("");
-    }
-    if ((parts = name.split(":")) && parts[1] && reservedNameSpaces.has(parts[0])) {
-      name = parts[1];
-      namespace = parts[0];
-    }
-    const isChildProp = r.ChildProperties.has(name);
-    const isProp = r.Properties.has(name);
-    if (name === "style") {
-      options.exprs.push(`r.style(${tag},${expr},_$p)`);
-    } else if (name === "class") {
-      options.exprs.push(`r.className(${tag},${expr},${isSVG},_$p)`);
-    } else if (isChildProp || !isSVG && isProp || namespace === "prop") {
-      options.exprs.push(`${tag}.${name} = ${expr}`);
-    } else {
-      const ns = isSVG && name.indexOf(":") > -1 && r.SVGNamespace[name.split(":")[0]];
-      if (ns) options.exprs.push(`r.setAttributeNS(${tag},"${ns}","${name}",${expr})`);else options.exprs.push(`r.setAttribute(${tag},"${name}",${expr})`);
-    }
-  }
-  function parseAttribute(node, tag, name, value, isSVG, options) {
-    if (name.slice(0, 2) === "on") {
-      if (!name.includes(":")) {
-        const lc = name.slice(2).toLowerCase();
-        const delegate = delegateEvents && r.DelegatedEvents.has(lc);
-        options.exprs.push(`r.addEventListener(${tag},"${lc}",exprs[${options.counter++}],${delegate})`);
-        delegate && options.delegatedEvents.add(lc);
-      } else {
-        options.exprs.push(`${tag}.addEventListener("${name.slice(3)}",exprs[${options.counter++}])`);
-      }
-    } else if (name === "ref") {
-      options.exprs.push(`exprs[${options.counter++}](${tag})`);
-    } else {
-      const childOptions = Object.assign({}, options, {
-          exprs: []
-        }),
-        count = options.counter;
-      parseKeyValue(node, tag, name, value, isSVG, childOptions);
-      options.decl.push(`_fn${count} = (_$v, _$p) => {\n${childOptions.exprs.join(";\n")};\n}`);
-      if (value === "###") {
-        options.exprs.push(`typeof exprs[${count}] === "function" ? r.effect(() => exprs[${count}](), _fn${count}) : _fn${count}(exprs[${count}])`);
-      } else {
-        let check = "";
-        let list = "";
-        let reactiveList = "";
-        for (let i = count; i < childOptions.counter; i++) {
-          if (i !== count) {
-            check += " || ";
-            list += ",";
-            reactiveList += ",";
-          }
-          check += `typeof exprs[${i}] === "function"`;
-          list += `exprs[${i}]`;
-          reactiveList += `r.resolveFn(exprs[${i}])`;
-        }
-        options.exprs.push(check + ` ? r.effect(() => [${reactiveList}], _fn${count}) : _fn${count}([${list}])`);
-      }
-      options.counter = childOptions.counter;
-      options.wrap = false;
-    }
-  }
-  function processChildren(node, options) {
-    const childOptions = Object.assign({}, options, {
-      first: true,
-      multi: false,
-      parent: options.path
-    });
-    if (node.children.length > 1) {
-      for (let i = 0; i < node.children.length; i++) {
-        const child = node.children[i];
-        if (child.type === "comment" && child.content === "#" || child.type === "tag" && child.name === "###") {
-          childOptions.multi = true;
-          break;
-        }
-      }
-    }
-    let i = 0;
-    while (i < node.children.length) {
-      const child = node.children[i];
-      if (child.name === "###") {
-        if (childOptions.multi) {
-          node.children[i] = {
-            type: "comment",
-            content: "#"
-          };
-          i++;
-        } else node.children.splice(i, 1);
-        processComponent(child, childOptions);
-        continue;
-      }
-      parseNode(child, childOptions);
-      if (!childOptions.multi && child.type === "comment" && child.content === "#") node.children.splice(i, 1);else i++;
-    }
-    options.counter = childOptions.counter;
-    options.templateId = childOptions.templateId;
-    options.hasCustomElement = options.hasCustomElement || childOptions.hasCustomElement;
-    options.isImportNode = options.isImportNode || childOptions.isImportNode;
-  }
-  function processComponentProps(propGroups) {
-    let result = [];
-    for (const props of propGroups) {
-      if (Array.isArray(props)) {
-        if (!props.length) continue;
-        result.push(`r.wrapProps({${props.join(",") || ""}})`);
-      } else result.push(props);
-    }
-    return result.length > 1 ? `r.mergeProps(${result.join(",")})` : result[0];
-  }
-  function processComponent(node, options) {
-    let props = [];
-    const keys = Object.keys(node.attrs),
-      propGroups = [props],
-      componentIdentifier = options.counter++;
-    for (let i = 0; i < keys.length; i++) {
-      const {
-        type,
-        name,
-        value
-      } = node.attrs[i];
-      if (type === "attr") {
-        if (name === "###") {
-          propGroups.push(`exprs[${options.counter++}]`);
-          propGroups.push(props = []);
-        } else if (value === "###") {
-          props.push(`"${name}": exprs[${options.counter++}]`);
-        } else props.push(`"${name}": "${value}"`);
-      } else if (type === 'directive') {
-        const tag = `_$el${uuid++}`;
-        const topDecl = !options.decl.length;
-        options.decl.push(topDecl ? "" : `${tag} = ${options.path}.${options.first ? "firstChild" : "nextSibling"}`);
-        parseDirective(name, value, tag, options);
-      }
-    }
-    if (node.children.length === 1 && node.children[0].type === "comment" && node.children[0].content === "#") {
-      props.push(`children: () => exprs[${options.counter++}]`);
-    } else if (node.children.length) {
-      const children = {
-          type: "fragment",
-          children: node.children
-        },
-        childOptions = Object.assign({}, options, {
-          first: true,
-          decl: [],
-          exprs: [],
-          parent: false
-        });
-      parseNode(children, childOptions);
-      props.push(`children: () => { ${childOptions.exprs.join(";\n")}}`);
-      options.templateId = childOptions.templateId;
-      options.counter = childOptions.counter;
-    }
-    let tag;
-    if (options.multi) {
-      tag = `_$el${uuid++}`;
-      options.decl.push(`${tag} = ${options.path}.${options.first ? "firstChild" : "nextSibling"}`);
-    }
-    if (options.parent) options.exprs.push(`r.insert(${options.parent}, r.createComponent(exprs[${componentIdentifier}],${processComponentProps(propGroups)})${tag ? `, ${tag}` : ""})`);else options.exprs.push(`${options.fragment ? "" : "return "}r.createComponent(exprs[${componentIdentifier}],${processComponentProps(propGroups)})`);
-    options.path = tag;
-    options.first = false;
-  }
-  function parseNode(node, options) {
-    if (node.type === "fragment") {
-      const parts = [];
-      node.children.forEach(child => {
-        if (child.type === "tag") {
-          if (child.name === "###") {
-            const childOptions = Object.assign({}, options, {
-              first: true,
-              fragment: true,
-              decl: [],
-              exprs: []
-            });
-            processComponent(child, childOptions);
-            parts.push(childOptions.exprs[0]);
-            options.counter = childOptions.counter;
-            options.templateId = childOptions.templateId;
-            return;
-          }
-          options.templateId++;
-          const id = uuid;
-          const childOptions = Object.assign({}, options, {
-            first: true,
-            decl: [],
-            exprs: []
-          });
-          options.templateNodes.push([child]);
-          parseNode(child, childOptions);
-          parts.push(`function() { ${childOptions.decl.join(",\n") + ";\n" + childOptions.exprs.join(";\n") + `;\nreturn _$el${id};\n`}}()`);
-          options.counter = childOptions.counter;
-          options.templateId = childOptions.templateId;
-        } else if (child.type === "text") {
-          parts.push(`"${child.content}"`);
-        } else if (child.type === "comment") {
-          if (child.content === "#") parts.push(`exprs[${options.counter++}]`);else if (child.content) {
-            for (let i = 0; i < child.content.split("###").length - 1; i++) {
-              parts.push(`exprs[${options.counter++}]`);
-            }
-          }
-        }
-      });
-      options.exprs.push(`return [${parts.join(", \n")}]`);
-    } else if (node.type === "tag") {
-      const tag = `_$el${uuid++}`;
-      const topDecl = !options.decl.length;
-      const templateId = options.templateId;
-      options.decl.push(topDecl ? "" : `${tag} = ${options.path}.${options.first ? "firstChild" : "nextSibling"}`);
-      const isSVG = r.SVGElements.has(node.name);
-      options.hasCustomElement = node.name.includes("-") || node.attrs.some(e => e.name === "is");
-      options.isImportNode = (node.name === "img" || node.name === "iframe") && node.attrs.some(e => e.name === "loading" && e.value === "lazy");
-      if (node.attrs.some(e => e.name === "###")) {
-        const spreadArgs = [];
-        let current = "";
-        const newAttrs = [];
-        for (let i = 0; i < node.attrs.length; i++) {
-          const {
-            type,
-            name,
-            value
-          } = node.attrs[i];
-          if (type === "attr") {
-            if (value.includes("###")) {
-              let count = options.counter++;
-              current += `${name}: ${name !== "ref" ? `typeof exprs[${count}] === "function" ? exprs[${count}]() : ` : ""}exprs[${count}],`;
-            } else if (name === "###") {
-              if (current.length) {
-                spreadArgs.push(`()=>({${current}})`);
-                current = "";
-              }
-              spreadArgs.push(`exprs[${options.counter++}]`);
-            } else {
-              newAttrs.push(node.attrs[i]);
-            }
-          } else if (type === "directive") {
-            parseDirective(name, value, tag, options);
-          }
-        }
-        node.attrs = newAttrs;
-        if (current.length) {
-          spreadArgs.push(`()=>({${current}})`);
-        }
-        options.exprs.push(`r.spread(${tag},${spreadArgs.length === 1 ? `typeof ${spreadArgs[0]} === "function" ? r.mergeProps(${spreadArgs[0]}) : ${spreadArgs[0]}` : `r.mergeProps(${spreadArgs.join(",")})`},${isSVG},${!!node.children.length})`);
-      } else {
-        for (let i = 0; i < node.attrs.length; i++) {
-          const {
-            type,
-            name,
-            value
-          } = node.attrs[i];
-          if (type === "directive") {
-            parseDirective(name, value, tag, options);
-            node.attrs.splice(i, 1);
-            i--;
-          } else if (type === "attr") {
-            if (value.includes("###")) {
-              node.attrs.splice(i, 1);
-              i--;
-              parseAttribute(node, tag, name, value, isSVG, options);
-            }
-          }
-        }
-      }
-      options.path = tag;
-      options.first = false;
-      processChildren(node, options);
-      if (topDecl) {
-        options.decl[0] = options.hasCustomElement || options.isImportNode ? `const ${tag} = r.untrack(() => document.importNode(tmpls[${templateId}].content.firstChild, true))` : `const ${tag} = tmpls[${templateId}].content.firstChild.cloneNode(true)`;
-      }
-    } else if (node.type === "text") {
-      const tag = `_$el${uuid++}`;
-      options.decl.push(`${tag} = ${options.path}.${options.first ? "firstChild" : "nextSibling"}`);
-      options.path = tag;
-      options.first = false;
-    } else if (node.type === "comment") {
-      const tag = `_$el${uuid++}`;
-      options.decl.push(`${tag} = ${options.path}.${options.first ? "firstChild" : "nextSibling"}`);
-      if (node.content === "#") {
-        if (options.multi) {
-          options.exprs.push(`r.insert(${options.parent}, exprs[${options.counter++}], ${tag})`);
-        } else options.exprs.push(`r.insert(${options.parent}, exprs[${options.counter++}])`);
-      }
-      options.path = tag;
-      options.first = false;
-    }
-  }
-  function parseTemplate(nodes, funcBuilder) {
-    const options = {
-        path: "",
-        decl: [],
-        exprs: [],
-        delegatedEvents: new Set(),
-        counter: 0,
-        first: true,
-        multi: false,
-        templateId: 0,
-        templateNodes: []
-      },
-      id = uuid,
-      origNodes = nodes;
-    let toplevel;
-    if (nodes.length > 1) {
-      nodes = [{
-        type: "fragment",
-        children: nodes
-      }];
-    }
-    if (nodes[0].name === "###") {
-      toplevel = true;
-      processComponent(nodes[0], options);
-    } else parseNode(nodes[0], options);
-    r.delegateEvents(Array.from(options.delegatedEvents));
-    const templateNodes = [origNodes].concat(options.templateNodes);
-    return [templateNodes.map(t => stringify(t)), funcBuilder("tmpls", "exprs", "r", options.decl.join(",\n") + ";\n" + options.exprs.join(";\n") + (toplevel ? "" : `;\nreturn _$el${id};\n`))];
-  }
-  function html(statics, ...args) {
-    const templates = cache.get(statics) || createTemplate(statics, {
-      funcBuilder: functionBuilder
-    });
-    return templates[0].create(templates, args, r);
-  }
-  return html;
-}
+const e=e=>t(e)||e>=48&&e<=58||e===46||e===45,t=e=>e>=65&&e<=90||e>=97&&e<=122||e===95||e===36,n=e=>e>=9&&e<=13||e===32,r=(r,i)=>{let a=[],o=0,s=``,c=0;for(let l=0;l<r.length;l++){let u=r[l],d=u.length;for(c=0;c<d;)switch(o){case 0:{s=``;let e=u.indexOf(`<`,c);e===-1?(c<d&&a.push({type:6,value:u.slice(c)}),c=d):(e>c&&a.push({type:6,value:u.slice(c,e)}),u[e+1]===`!`&&u[e+2]===`-`&&u[e+3]===`-`?(o=3,c=e+4):(a.push({type:0}),o=1,c=e+1));break}case 1:{let r=u.charCodeAt(c);if(n(r))c++;else if(r===62)i.has(s)&&a[a.length-2]?.type!==2?o=2:(o=0,s=``),a.push({type:1}),c++;else if(r===61)a.push({type:4}),c++;else if(r===47){let e=u.charCodeAt(c+1),t=u.slice(c+2).search(/\S/),n=e===47&&a[a.length-1]?.type===0&&t!==-1&&u[c+2+t]===`>`;e===47&&!n?o=4:e===42?o=5:(a.push({type:2}),c++);}else if(r===34||r===39){let e=u[c],t=u.indexOf(e,c+1);if(t===-1)throw Error(`Unterminated string at ${l}:${c}`);a.push({type:5,value:u.slice(c+1,t),quote:e}),c=t+1;}else if(t(r)){let t=c;for(;c<d&&e(u.charCodeAt(c));)c++;let n=u.slice(t,c);s===``&&(s=n),a.push({type:3,value:n});}else if(r===46&&u[c+1]===`.`&&u[c+2]===`.`)a.push({type:8}),c+=3;else throw Error(`Unexpected Character: ${u[c]} at ${l}:${c}`);break}case 2:{let e=RegExp(`<\\s*/\\s*${s}\\s*>`,`g`);e.lastIndex=c;let t=e.exec(u);if(t){let e=t.index;e>c&&a.push({type:6,value:u.slice(c,e)}),o=0,c=e,s=``;}else a.push({type:6,value:u.slice(c)}),c=d;break}case 3:case 4:case 5:{let e=o===4?`
+`:o===5?`*/`:`-->`,t=u.indexOf(e,c);t===-1?c=d:(o=o===3?0:1,c=t+e.length);break}}l<r.length-1&&(o===0||o===1||o===2)&&a.push({type:7,value:l});}return a},i=e=>{let t=e.charCodeAt(0);return t>=65&&t<=90},a=(e,t)=>{let n={type:0,children:[]},r=[n],a=0,o=e.length;for(;a<o;){let n=e[a],s=r[r.length-1];switch(n.type){case 6:{let t=n.value;if(t.trim()===``){let t=e[a-1]?.type,n=e[a+1]?.type;if(t===1||n===0){a++;continue}}s.children.push({type:3,value:t}),a++;continue}case 7:s.children.push({type:4,value:n.value}),a++;continue;case 0:{let n=e[++a];if(n.type===2){let n=e[++a],i=e[++a],o=r[r.length-1];if(r.length>1&&i.type===1&&(n?.type===3&&o.name===n.value||(n?.type===7||n.type===2)&&typeof o.name==`number`)){let e=r.pop();e?.type===1&&t.has(e.name)&&(e.children=[]),a++;continue}throw Error(`Mismatched closing tag for <${o.name}>`)}if(n.type===3||n.type===7){let t=n.value,c={type:typeof t==`number`||i(t)?2:1,name:t,props:[],children:[]};for(s.children.push(c),a++;a<o;){let t=e[a];if(t.type===1||t.type===2)break;if(t.type===8){let t=e[a+1];if(t?.type===7)c.props.push({type:3,value:t.value}),a+=2;else throw Error(`Spread operator in <${c.name}> must be followed by an expression`)}else if(t.type===3){let n=t.value;if(e[a+1]?.type===4){a+=2;let t=e[a];if(t.type===7)c.props.push({name:n,type:2,value:t.value}),a++;else if(t.type===5){let e=t.quote;c.props.push({name:n,value:t.value,quote:e,type:1}),a++;}else throw Error(`Attribute value for "${n}" in <${c.name}> must be an expression or a string`)}else c.props.push({type:0,name:n,value:true}),a++;}else throw Error(`Invalid attribute in <${c.name}>`)}let l=e[a];l.type===2?a+=2:l.type===1&&(a++,r.push(c));continue}}default:throw Error(`Unexpected token: ${JSON.stringify(n)}  after <${r[r.length-1].name}>`)}}if(r.length>1)throw Error(`Unclosed tag for <${r[r.length-1].name}>`);return n},o=e=>e.length===1?e[0]:e;function s(e){let t=new WeakMap,n=new Set(e.RawTextElements);n.delete(`template`);let i=document.createTreeWalker(document,129),s=t=>e.SVGElements.has(t)?document.createElementNS(`http://www.w3.org/2000/svg`,t):e.MathMLElements.has(t)?document.createElementNS(`http://www.w3.org/1998/Math/MathML`,t):document.createElement(t),c=e=>{let t=(t,...n)=>m(l(t),n,e);return t.components=e,t.jsx=t,t.define=t=>c({...e,...t}),t},l=i=>{let o=t.get(i);return o||(o=a(r(i,n),e.VoidElements),u(o,false),t.set(i,o)),o},u=(e,t)=>{if(e.type===1){if(!t){let n=document.createElement(`template`);n.content.appendChild(f(e)),e.template=n,t=true;}e.children.forEach(e=>u(e,t));}else e.type===2||e.type===0?e.children.forEach(e=>u(e,false)):e.type===3&&!t&&(d.innerHTML=e.value,e.value=d.content.textContent??``);},d=document.createElement(`template`),f=e=>{switch(e.type){case 3:return d.innerHTML=e.value,document.createTextNode(d.content.textContent??``);case 4:return document.createComment(`+`);case 2:return document.createComment(e.name);case 1:let t=false,n=s(e.name),r=e.name===`a`?`href`:e.name===`form`?`action`:void 0;return e.props=e.props.filter(i=>i.type===1?i.name.startsWith(`prop:`)?true:(n.setAttribute(i.name,i.value),!t&&i.name===r&&(e.claim=true),t):i.type===0?(n.setAttribute(i.name,``),!t&&i.name===r&&(e.claim=true),t):i.type===3?(t=true,t):true),(e.name===`template`?n.content:n).append(...e.children.map(f)),n}},p=(t,n,r)=>{switch(t.type){case 3:return t.value;case 4:return n[t.value];case 2:let i=typeof t.name==`string`?r[t.name]:n[t.name];if(i&&typeof i==`function`)return e.createComponent(i,h(t,n,r));throw Error(`Component "${t.name}" not found in registry`);case 1:let a=m(t,n,r),o=h(t,n,r);return e.spread(a,o,true),t.claim&&e.claimElement(a),a}},m=(t,n,r)=>{if(t.type!==1||!t.template)return o(t.children.map(e=>p(e,n,r)));let a=t.template.content.firstChild.cloneNode(true);i.currentNode=a;let s=(t,i)=>{for(let a of t)if(a.type===1||a.type===4||a.type===2){let t=i.nextNode();if(a.type===4||a.type===2)e.insert(t.parentNode,p(a,n,r),t),i.currentNode=t;else {if(a.props.length){let i=h(a,n,r);e.spread(t,i,true);}a.claim&&e.claimElement(t),s(a.children,a.name===`template`?document.createTreeWalker(t.content,129):i);}}};return s(t.children,t.name===`template`?document.createTreeWalker(a.content,129):i),a},h=(t,n,r,i={})=>{for(let r of t.props)switch(r.type){case 0:i[r.name]=true;break;case 1:i[r.name]=r.value;break;case 2:g(i,r.name,n[r.value]);break;case 3:let t=n[r.value];if(!t||typeof t!=`object`)throw Error(`Can only spread objects`);i=e.mergeProps(i,t);break}return t.type===2&&t.children.length&&Object.defineProperty(i,`children`,{get(){return m(t,n,r)}}),i},g=(e,t,n)=>{typeof n==`function`&&n.length===0&&t!==`ref`&&!t.startsWith(`on`)?Object.defineProperty(e,t,{get(){return n()},enumerable:true}):e[t]=n;};return c({})}
 
-const html = createHTML({
-  effect: web.effect,
-  style: web.style,
+const html = s({
   insert: web.insert,
-  untrack: web.untrack,
   spread: web.spread,
   createComponent: web.createComponent,
-  delegateEvents: web.delegateEvents,
-  className: web.className,
   mergeProps: web.mergeProps,
-  dynamicProperty: web.dynamicProperty,
-  setAttribute: web.setAttribute,
-  setAttributeNS: web.setAttributeNS,
-  addEventListener: web.addEventListener,
-  getPropAlias: web.getPropAlias,
-  Properties: web.Properties,
-  ChildProperties: web.ChildProperties,
-  DelegatedEvents: web.DelegatedEvents,
+  claimElement: web.claimElement,
   SVGElements: web.SVGElements,
-  SVGNamespace: web.SVGNamespace
+  MathMLElements: web.MathMLElements,
+  VoidElements: web.VoidElements,
+  RawTextElements: web.RawTextElements
 });
 
 module.exports = html;