@solidjs/html 2.0.0-rc.2 → 2.0.0-rc.3

package/README.md

@@ -4,7 +4,7 @@ This sub module provides a Tagged Template Literal `html` method for Solid. This
 
 `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.
+Since Solid 2.0, `html` is an AST-based tagged-template runtime in this package. 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.
 

package/dist/html.cjs

@@ -2,19 +2,526 @@
 
 var web = require('@solidjs/web');
 
-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 OPEN_TAG_TOKEN = 0;
+const CLOSE_TAG_TOKEN = 1;
+const SLASH_TOKEN = 2;
+const IDENTIFIER_TOKEN = 3;
+const EQUALS_TOKEN = 4;
+const STRING_TOKEN = 5;
+const TEXT_TOKEN = 6;
+const EXPRESSION_TOKEN = 7;
+const SPREAD_TOKEN = 8;
+const isIdentifierChar = code => {
+  return isIdentifierStart(code) || code >= 48 && code <= 58 ||
+  code === 46 ||
+  code === 45
+;
+};
+const isIdentifierStart = code => {
+  return code >= 65 && code <= 90 ||
+  code >= 97 && code <= 122 ||
+  code === 95 ||
+  code === 36
+;
+};
+const isWhitespace = code => {
+  return code >= 9 && code <= 13 || code === 32;
+};
+const STATE_TEXT = 0;
+const STATE_TAG = 1;
+const STATE_RAW_TEXT = 2;
+const STATE_COMMENT = 3;
+const STATE_LINE_COMMENT = 4;
+const STATE_BLOCK_COMMENT = 5;
+const tokenize = (strings, rawTextElements) => {
+  const tokens = [];
+  let state = STATE_TEXT;
+  let lastTagName = "";
+  let cursor = 0;
+  for (let i = 0; i < strings.length; i++) {
+    const str = strings[i];
+    const len = str.length;
+    cursor = 0;
+    while (cursor < len) {
+      switch (state) {
+        case STATE_TEXT:
+          {
+            lastTagName = "";
+            const nextTag = str.indexOf("<", cursor);
+            if (nextTag === -1) {
+              if (cursor < len) tokens.push({
+                type: TEXT_TOKEN,
+                value: str.slice(cursor)
+              });
+              cursor = len;
+            } else {
+              if (nextTag > cursor) tokens.push({
+                type: TEXT_TOKEN,
+                value: str.slice(cursor, nextTag)
+              });
+              if (str[nextTag + 1] === "!" && str[nextTag + 2] === "-" && str[nextTag + 3] === "-") {
+                state = STATE_COMMENT;
+                cursor = nextTag + 4;
+              } else {
+                tokens.push({
+                  type: OPEN_TAG_TOKEN
+                });
+                state = STATE_TAG;
+                cursor = nextTag + 1;
+              }
+            }
+            break;
+          }
+        case STATE_TAG:
+          {
+            const code = str.charCodeAt(cursor);
+            if (isWhitespace(code)) {
+              cursor++;
+            } else if (code === 62) {
+              if (rawTextElements.has(lastTagName) && tokens[tokens.length - 2]?.type !== SLASH_TOKEN) {
+                state = STATE_RAW_TEXT;
+              } else {
+                state = STATE_TEXT;
+                lastTagName = "";
+              }
+              tokens.push({
+                type: CLOSE_TAG_TOKEN
+              });
+              cursor++;
+            } else if (code === 61) {
+              tokens.push({
+                type: EQUALS_TOKEN
+              });
+              cursor++;
+            } else if (code === 47) {
+              const next = str.charCodeAt(cursor + 1);
+              const nextNonWhitespace = str.slice(cursor + 2).search(/\S/);
+              const isShorthandClosingTag = next === 47 && tokens[tokens.length - 1]?.type === OPEN_TAG_TOKEN && nextNonWhitespace !== -1 && str[cursor + 2 + nextNonWhitespace] === ">";
+              if (next === 47 && !isShorthandClosingTag) {
+                state = STATE_LINE_COMMENT;
+              } else if (next === 42) {
+                state = STATE_BLOCK_COMMENT;
+              } else {
+                tokens.push({
+                  type: SLASH_TOKEN
+                });
+                cursor++;
+              }
+            } else if (code === 34 || code === 39) {
+              const char = str[cursor];
+              const endQuoteIndex = str.indexOf(char, cursor + 1);
+              if (endQuoteIndex === -1) {
+                throw new Error(`Unterminated string at ${i}:${cursor}`);
+              }
+              tokens.push({
+                type: STRING_TOKEN,
+                value: str.slice(cursor + 1, endQuoteIndex),
+                quote: char
+              });
+              cursor = endQuoteIndex + 1;
+            } else if (isIdentifierStart(code)) {
+              const start = cursor;
+              while (cursor < len && isIdentifierChar(str.charCodeAt(cursor))) cursor++;
+              const value = str.slice(start, cursor);
+              if (lastTagName === "") {
+                lastTagName = value;
+              }
+              tokens.push({
+                type: IDENTIFIER_TOKEN,
+                value
+              });
+            } else if (code === 46 && str[cursor + 1] === "." && str[cursor + 2] === ".") {
+              tokens.push({
+                type: SPREAD_TOKEN
+              });
+              cursor += 3;
+            } else {
+              throw new Error(`Unexpected Character: ${str[cursor]} at ${i}:${cursor}`);
+            }
+            break;
+          }
+        case STATE_RAW_TEXT:
+          {
+            const closeTagRegex = new RegExp(`<\\s*/\\s*${lastTagName}\\s*>`, "g");
+            closeTagRegex.lastIndex = cursor;
+            const match = closeTagRegex.exec(str);
+            if (match) {
+              const endOfRawIdx = match.index;
+              if (endOfRawIdx > cursor) {
+                tokens.push({
+                  type: TEXT_TOKEN,
+                  value: str.slice(cursor, endOfRawIdx)
+                });
+              }
+              state = STATE_TEXT;
+              cursor = endOfRawIdx;
+              lastTagName = "";
+            } else {
+              tokens.push({
+                type: TEXT_TOKEN,
+                value: str.slice(cursor)
+              });
+              cursor = len;
+            }
+            break;
+          }
+        case STATE_COMMENT:
+        case STATE_LINE_COMMENT:
+        case STATE_BLOCK_COMMENT:
+          {
+            const commentEnd = state === STATE_LINE_COMMENT ? "\n" : state === STATE_BLOCK_COMMENT ? "*/" : "-->";
+            const commentEndIndex = str.indexOf(commentEnd, cursor);
+            if (commentEndIndex === -1) {
+              cursor = len;
+            } else {
+              state = state === STATE_COMMENT ? STATE_TEXT : STATE_TAG;
+              cursor = commentEndIndex + commentEnd.length;
+            }
+            break;
+          }
+      }
+    }
+    if (i < strings.length - 1) {
+      if (state === STATE_TEXT || state === STATE_TAG || state === STATE_RAW_TEXT) {
+        tokens.push({
+          type: EXPRESSION_TOKEN,
+          value: i
+        });
+      }
+    }
+  }
+  return tokens;
+};
 
-const html = s({
-  insert: web.insert,
-  spread: web.spread,
-  createComponent: web.createComponent,
-  mergeProps: web.mergeProps,
-  claimElement: web.claimElement,
-  SVGElements: web.SVGElements,
-  MathMLElements: web.MathMLElements,
-  VoidElements: web.VoidElements,
-  RawTextElements: web.RawTextElements
-});
+const isComponentNode = name => {
+  const char = name.charCodeAt(0);
+  return char >= 65 && char <= 90
+;
+};
+const ROOT_NODE = 0;
+const ELEMENT_NODE = 1;
+const COMPONENT_NODE = 2;
+const TEXT_NODE = 3;
+const EXPRESSION_NODE = 4;
+const BOOLEAN_PROP = 0;
+const STATIC_PROP = 1;
+const EXPRESSION_PROP = 2;
+const SPREAD_PROP = 3;
+const parse = (tokens, voidElements) => {
+  const root = {
+    type: ROOT_NODE,
+    children: []
+  };
+  const stack = [root];
+  let pos = 0;
+  const len = tokens.length;
+  while (pos < len) {
+    const token = tokens[pos];
+    const parent = stack[stack.length - 1];
+    switch (token.type) {
+      case TEXT_TOKEN:
+        {
+          const value = token.value;
+          if (value.trim() === "") {
+            const prevType = tokens[pos - 1]?.type;
+            const nextType = tokens[pos + 1]?.type;
+            if (prevType === CLOSE_TAG_TOKEN || nextType === OPEN_TAG_TOKEN) {
+              pos++;
+              continue;
+            }
+          }
+          parent.children.push({
+            type: TEXT_NODE,
+            value
+          });
+          pos++;
+          continue;
+        }
+      case EXPRESSION_TOKEN:
+        {
+          parent.children.push({
+            type: EXPRESSION_NODE,
+            value: token.value
+          });
+          pos++;
+          continue;
+        }
+      case OPEN_TAG_TOKEN:
+        {
+          const nextToken = tokens[++pos];
+          if (nextToken.type === SLASH_TOKEN) {
+            const nameToken = tokens[++pos];
+            const closeToken = tokens[++pos];
+            const currentParent = stack[stack.length - 1];
+            if (stack.length > 1 && closeToken.type === CLOSE_TAG_TOKEN && (nameToken?.type === IDENTIFIER_TOKEN && currentParent.name === nameToken.value || (nameToken?.type === EXPRESSION_TOKEN || nameToken.type === SLASH_TOKEN) && typeof currentParent.name === "number")) {
+              const node = stack.pop();
+              if (node?.type === ELEMENT_NODE && voidElements.has(node.name)) {
+                node.children = [];
+              }
+              pos++;
+              continue;
+            }
+            throw new Error(`Mismatched closing tag for <${currentParent.name}>`);
+          }
+          if (nextToken.type === IDENTIFIER_TOKEN || nextToken.type === EXPRESSION_TOKEN) {
+            const tagName = nextToken.value;
+            const node = {
+              type: typeof tagName === "number" || isComponentNode(tagName) ? COMPONENT_NODE : ELEMENT_NODE,
+              name: tagName,
+              props: [],
+              children: []
+            };
+            parent.children.push(node);
+            pos++;
+            while (pos < len) {
+              const attrToken = tokens[pos];
+              if (attrToken.type === CLOSE_TAG_TOKEN || attrToken.type === SLASH_TOKEN) {
+                break;
+              }
+              if (attrToken.type === SPREAD_TOKEN) {
+                const expr = tokens[pos + 1];
+                if (expr?.type === EXPRESSION_TOKEN) {
+                  node.props.push({
+                    type: SPREAD_PROP,
+                    value: expr.value
+                  });
+                  pos += 2;
+                } else {
+                  throw new Error(`Spread operator in <${node.name}> must be followed by an expression`);
+                }
+              } else if (attrToken.type === IDENTIFIER_TOKEN) {
+                const name = attrToken.value;
+                const next = tokens[pos + 1];
+                if (next?.type === EQUALS_TOKEN) {
+                  pos += 2;
+                  const valToken = tokens[pos];
+                  if (valToken.type === EXPRESSION_TOKEN) {
+                    node.props.push({
+                      name,
+                      type: EXPRESSION_PROP,
+                      value: valToken.value
+                    });
+                    pos++;
+                  } else if (valToken.type === STRING_TOKEN) {
+                    const quote = valToken.quote;
+                    node.props.push({
+                      name,
+                      value: valToken.value,
+                      quote,
+                      type: STATIC_PROP
+                    });
+                    pos++;
+                  } else {
+                    throw new Error(`Attribute value for "${name}" in <${node.name}> must be an expression or a string`);
+                  }
+                } else {
+                  node.props.push({
+                    type: BOOLEAN_PROP,
+                    name,
+                    value: true
+                  });
+                  pos++;
+                }
+              } else {
+                throw new Error(`Invalid attribute in <${node.name}>`);
+              }
+            }
+            const endToken = tokens[pos];
+            if (endToken.type === SLASH_TOKEN) {
+              pos += 2;
+            } else if (endToken.type === CLOSE_TAG_TOKEN) {
+              pos++;
+              stack.push(node);
+            }
+            continue;
+          }
+        }
+      default:
+        throw new Error(`Unexpected token: ${JSON.stringify(token)}  after <${stack[stack.length - 1].name}>`);
+    }
+  }
+  if (stack.length > 1) {
+    throw new Error(`Unclosed tag for <${stack[stack.length - 1].name}>`);
+  }
+  return root;
+};
+
+const flat = arr => {
+  return arr.length === 1 ? arr[0] : arr;
+};
+function createHtml() {
+  const cache = new WeakMap();
+  const rawTextElements = new Set(web.RawTextElements);
+  rawTextElements.delete("template");
+  const walker = document.createTreeWalker(document, 129);
+  const createElement = name => {
+    return web.SVGElements.has(name) ? document.createElementNS("http://www.w3.org/2000/svg", name) : web.MathMLElements.has(name) ? document.createElementNS("http://www.w3.org/1998/Math/MathML", name) : document.createElement(name);
+  };
+  const createTaggedJSX = components => {
+    const tag = (strings, ...values) => {
+      const root = getCachedRoot(strings);
+      return renderChildren(root, values, components);
+    };
+    tag.components = components;
+    tag.jsx = tag;
+    tag.define = newComponents => {
+      return createTaggedJSX({
+        ...components,
+        ...newComponents
+      });
+    };
+    return tag;
+  };
+  const getCachedRoot = strings => {
+    let root = cache.get(strings);
+    if (!root) {
+      root = parse(tokenize(strings, rawTextElements), web.VoidElements);
+      buildTemplate(root, false);
+      cache.set(strings, root);
+    }
+    return root;
+  };
+  const buildTemplate = (node, insideTemplate) => {
+    if (node.type === ELEMENT_NODE) {
+      if (!insideTemplate) {
+        const template = document.createElement("template");
+        template.content.appendChild(buildNodes(node));
+        node.template = template;
+        insideTemplate = true;
+      }
+      node.children.forEach(child => buildTemplate(child, insideTemplate));
+    } else if (node.type === COMPONENT_NODE || node.type === ROOT_NODE) {
+      node.children.forEach(child => buildTemplate(child, false));
+    } else if (node.type === TEXT_NODE && !insideTemplate) {
+      textTemplate.innerHTML = node.value;
+      node.value = textTemplate.content.textContent ?? "";
+    }
+  };
+  const textTemplate = document.createElement("template");
+  const buildNodes = node => {
+    switch (node.type) {
+      case TEXT_NODE:
+        textTemplate.innerHTML = node.value;
+        return document.createTextNode(textTemplate.content.textContent ?? "");
+      case EXPRESSION_NODE:
+        return document.createComment("+");
+      case COMPONENT_NODE:
+        return document.createComment(node.name);
+      case ELEMENT_NODE:
+        let hasSpread = false;
+        const elem = createElement(node.name);
+        const claimAttr = node.name === "a" ? "href" : node.name === "form" ? "action" : undefined;
+        node.props = node.props.filter(prop => {
+          if (prop.type === STATIC_PROP) {
+            if (prop.name.startsWith("prop:")) return true;
+            elem.setAttribute(prop.name, prop.value);
+            if (!hasSpread && prop.name === claimAttr) node.claim = true;
+            return hasSpread;
+          } else if (prop.type === BOOLEAN_PROP) {
+            elem.setAttribute(prop.name, "");
+            if (!hasSpread && prop.name === claimAttr) node.claim = true;
+            return hasSpread;
+          } else if (prop.type === SPREAD_PROP) {
+            hasSpread = true;
+            return hasSpread;
+          }
+          return true;
+        });
+        const childRoot = node.name === "template" ? elem.content : elem;
+        childRoot.append(...node.children.map(buildNodes));
+        return elem;
+    }
+  };
+  const renderNode = (node, values, components) => {
+    switch (node.type) {
+      case TEXT_NODE:
+        return node.value;
+      case EXPRESSION_NODE:
+        return values[node.value];
+      case COMPONENT_NODE:
+        const component = typeof node.name === "string" ? components[node.name] : values[node.name];
+        if (component && typeof component === "function") {
+          return web.createComponent(component, gatherProps(node, values, components));
+        } else {
+          throw new Error(`Component "${node.name}" not found in registry`);
+        }
+      case ELEMENT_NODE:
+        const element = renderChildren(node, values, components);
+        const props = gatherProps(node, values, components);
+        web.spread(element, props, true);
+        if (node.claim) web.claimElement(element);
+        return element;
+    }
+  };
+  const renderChildren = (node, values, components) => {
+    if (node.type !== ELEMENT_NODE || !node.template) {
+      return flat(node.children.map(n => renderNode(n, values, components)));
+    }
+    const element = node.template.content.firstChild.cloneNode(true);
+    walker.currentNode = element;
+    const walkNodes = (nodes, walker) => {
+      for (const node of nodes) {
+        if (node.type === ELEMENT_NODE || node.type === EXPRESSION_NODE || node.type === COMPONENT_NODE) {
+          const domNode = walker.nextNode();
+          if (node.type === EXPRESSION_NODE || node.type === COMPONENT_NODE) {
+            web.insert(domNode.parentNode, renderNode(node, values, components), domNode);
+            walker.currentNode = domNode;
+          } else {
+            if (node.props.length) {
+              const props = gatherProps(node, values, components);
+              web.spread(domNode, props, true);
+            }
+            if (node.claim) web.claimElement(domNode);
+            walkNodes(node.children, node.name === "template" ? document.createTreeWalker(domNode.content, 129) : walker);
+          }
+        }
+      }
+    };
+    walkNodes(node.children, node.name === "template" ? document.createTreeWalker(element.content, 129) : walker);
+    return element;
+  };
+  const gatherProps = (node, values, components, props = {}) => {
+    for (const prop of node.props) {
+      switch (prop.type) {
+        case BOOLEAN_PROP:
+          props[prop.name] = true;
+          break;
+        case STATIC_PROP:
+          props[prop.name] = prop.value;
+          break;
+        case EXPRESSION_PROP:
+          applyGetter(props, prop.name, values[prop.value]);
+          break;
+        case SPREAD_PROP:
+          const spreadValue = values[prop.value];
+          if (!spreadValue || typeof spreadValue !== "object") throw new Error("Can only spread objects");
+          props = web.mergeProps(props, spreadValue);
+          break;
+      }
+    }
+    if (node.type === COMPONENT_NODE && node.children.length) {
+      Object.defineProperty(props, "children", {
+        get() {
+          return renderChildren(node, values, components);
+        }
+      });
+    }
+    return props;
+  };
+  const applyGetter = (props, name, value) => {
+    if (typeof value === "function" && value.length === 0 && name !== "ref" && !name.startsWith("on")) {
+      Object.defineProperty(props, name, {
+        get() {
+          return value();
+        },
+        enumerable: true
+      });
+    } else {
+      props[name] = value;
+    }
+  };
+  return createTaggedJSX({});
+}
+const html = createHtml();
 
 module.exports = html;