@solidjs/html 2.0.0-experimental.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2016-2023 Ryan Carniato
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,84 @@
+# Solid Tagged Template Literals
+
+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 `<//>`
+
+```js
+// create an element with a title attribute
+html`<button title="My button">Click Me</button>`
+
+// create a component with a title prop
+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).
+
+## Example
+
+```js
+import { render } from "solid-js/web";
+import html from "solid-js/html";
+import { createSignal } from "solid-js";
+
+function Button(props) {
+  return html`<button class="btn-primary" ...${props} />`;
+}
+
+function Counter() {
+  const [count, setCount] = createSignal(0);
+  const increment = (e) => setCount((c) => c + 1);
+
+  return html`<${Button} type="button" onClick=${increment}>${count}<//>`;
+}
+
+render(Counter, document.getElementById("app"));
+```
+
+## Differences from JSX
+
+There are a few differences from Solid's JSX that are important to note.
+
+1. Reactive expression must be manually wrapped in functions to be reactive.
+
+```js
+// jsx
+<div id={props.id}>{firstName() + lastName()}</div>
+
+// hyperscript
+html`<div id=${() => props.id}>${() => firstName() + lastName()}</div>`
+```
+
+2. Events on components require explicit event in the arguments
+
+Solid's Tagged Template Literals automatically wraps functions passed to props of components with no arguments in getters so you need to provide one to prevent this. The same applies to render props like in the `<For>` component.
+
+```js
+// good
+html`<${Button} onClick=${(e) => console.log("Hi")} />`;
+
+// bad
+html`<${Button} onClick=${() => console.log("Hi")} />`;
+```
+
+4. All refs are callback form
+
+We can't do the compiled assignment trick so only the callback form is supported.
+
+```js
+let myEl;
+html`<div ref=${(el) => myEl = el} />`;
+```
+
+5. There can be multiple top level elements
+
+No need for fragments just:
+```js
+html`
+  <div>1</div>
+  <div>2</div>
+`
+```

package/dist/html.cjs

@@ -0,0 +1,587 @@
+'use strict';
+
+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 ? void 0 : 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 = void 0;
+  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 = void 0;
+    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", "attr"]);
+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 (namespace !== "attr" && (isChildProp || !isSVG && (r.getPropAlias(name, node.name.toUpperCase()) || isProp) || namespace === "prop")) {
+      options.exprs.push(`${tag}.${r.getPropAlias(name, node.name.toUpperCase()) || 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 html = createHTML({
+  effect: web.effect,
+  style: web.style,
+  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,
+  SVGElements: web.SVGElements,
+  SVGNamespace: web.SVGNamespace
+});
+
+module.exports = html;