@solidjs/html 2.0.0-experimental.0 → 2.0.0-experimental.10

package/LICENSE

@@ -1,6 +1,6 @@
 MIT License
 
-Copyright (c) 2016-2023 Ryan Carniato
+Copyright (c) 2016-2025 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

package/dist/html.cjs

@@ -64,7 +64,7 @@ function parseTag(tag) {
 }
 function pushTextNode(list, html, start) {
   const end = html.indexOf('<', start);
-  const content = html.slice(start, end === -1 ? void 0 : end);
+  const content = html.slice(start, end === -1 ? undefined : end);
   if (!/^\s*$/.test(content)) {
     list.push({
       type: 'text',
@@ -83,7 +83,7 @@ function pushCommentNode(list, tag) {
 }
 function parse(html) {
   const result = [];
-  let current = void 0;
+  let current = undefined;
   let level = -1;
   const arr = [];
   const byTag = {};
@@ -92,7 +92,7 @@ function parse(html) {
     const isComment = tag.slice(0, 4) === '<!--';
     const start = index + tag.length;
     const nextChar = html.charAt(start);
-    let parent = void 0;
+    let parent = undefined;
     if (isOpen && !isComment) {
       level++;
       current = parseTag(tag);
@@ -168,7 +168,7 @@ const attrSeeker = new RegExp(tagName + attrName + attrPartials + "+)([ " + spac
 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"]);
+const reservedNameSpaces = new Set(["class", "on", "style", "use", "prop"]);
 function attrReplacer($0, $1, $2, $3) {
   return "<" + $1 + $2.replace(findAttributes, replaceAttributes) + $3;
 }
@@ -253,8 +253,8 @@ function createHTML(r, {
       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 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})`);
@@ -364,9 +364,9 @@ function createHTML(r, {
           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") {
+          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"}`);

package/dist/html.js

@@ -1,28 +1,7 @@
-import {
-  effect,
-  style,
-  insert,
-  untrack,
-  spread,
-  createComponent,
-  delegateEvents,
-  className,
-  mergeProps,
-  dynamicProperty,
-  setAttribute,
-  setAttributeNS,
-  addEventListener,
-  getPropAlias,
-  Properties,
-  ChildProperties,
-  DelegatedEvents,
-  SVGElements,
-  SVGNamespace
-} from "@solidjs/web";
+import { effect, style, insert, untrack, spread, createComponent, delegateEvents, className, mergeProps, dynamicProperty, setAttribute, setAttributeNS, addEventListener, getPropAlias, Properties, ChildProperties, DelegatedEvents, SVGElements, SVGNamespace } from '@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 attrRE = /(?:\s(?<boolean>[^/\s><=]+?)(?=[\s/>]))|(?:(?<name>\S+?)(?:\s*=\s*(?:(['"])(?<quotedValue>[\s\S]*?)\3|(?<unquotedValue>[^\s>]+))))/g;
 const lookup = {
   area: true,
   base: true,
@@ -43,8 +22,8 @@ const lookup = {
 };
 function parseTag(tag) {
   const res = {
-    type: "tag",
-    name: "",
+    type: 'tag',
+    name: '',
     voidElement: false,
     attrs: [],
     children: []
@@ -52,70 +31,70 @@ function parseTag(tag) {
   const tagMatch = tag.match(/<\/?([^\s]+?)[/\s>]/);
   if (tagMatch) {
     res.name = tagMatch[1];
-    if (lookup[tagMatch[1].toLowerCase()] || tag.charAt(tag.length - 2) === "/") {
+    if (lookup[tagMatch[1].toLowerCase()] || tag.charAt(tag.length - 2) === '/') {
       res.voidElement = true;
     }
-    if (res.name.startsWith("!--")) {
-      const endIndex = tag.indexOf("-->");
+    if (res.name.startsWith('!--')) {
+      const endIndex = tag.indexOf('-->');
       return {
-        type: "comment",
-        comment: endIndex !== -1 ? tag.slice(4, endIndex) : ""
+        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:")) {
+    if ((match[1] || match[2]).startsWith('use:')) {
       res.attrs.push({
-        type: "directive",
+        type: 'directive',
         name: match[1] || match[2],
-        value: match[4] || match[5] || ""
+        value: match[4] || match[5] || ''
       });
     } else {
       res.attrs.push({
-        type: "attr",
+        type: 'attr',
         name: match[1] || match[2],
-        value: match[4] || match[5] || ""
+        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);
+  const end = html.indexOf('<', start);
+  const content = html.slice(start, end === -1 ? undefined : end);
   if (!/^\s*$/.test(content)) {
     list.push({
-      type: "text",
+      type: 'text',
       content: content
     });
   }
 }
 function pushCommentNode(list, tag) {
-  const content = tag.replace("<!--", "").replace("-->", "");
+  const content = tag.replace('<!--', '').replace('-->', '');
   if (!/^\s*$/.test(content)) {
     list.push({
-      type: "comment",
+      type: 'comment',
       content: content
     });
   }
 }
 function parse(html) {
   const result = [];
-  let current = void 0;
+  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 isOpen = tag.charAt(1) !== '/';
+    const isComment = tag.slice(0, 4) === '<!--';
     const start = index + tag.length;
     const nextChar = html.charAt(start);
-    let parent = void 0;
+    let parent = undefined;
     if (isOpen && !isComment) {
       level++;
       current = parseTag(tag);
-      if (!current.voidElement && nextChar && nextChar !== "<") {
+      if (!current.voidElement && nextChar && nextChar !== '<') {
         pushTextNode(current.children, html, start);
       }
       byTag[current.tagName] = current;
@@ -139,7 +118,7 @@ function parse(html) {
       if (!isComment) {
         level--;
       }
-      if (nextChar !== "<" && nextChar) {
+      if (nextChar !== '<' && nextChar) {
         parent = level === -1 ? result : arr[level].children;
         pushTextNode(parent, html, start);
       }
@@ -150,58 +129,49 @@ function parse(html) {
 function attrString(attrs) {
   const buff = [];
   for (const attr of attrs) {
-    buff.push(attr.name + '="' + attr.value.replace(/"/g, "&quot;") + '"');
+    buff.push(attr.name + '="' + attr.value.replace(/"/g, '&quot;') + '"');
   }
   if (!buff.length) {
-    return "";
+    return '';
   }
-  return " " + buff.join(" ");
+  return ' ' + buff.join(' ');
 }
 function stringifier(buff, doc) {
   switch (doc.type) {
-    case "text":
+    case 'text':
       return buff + doc.content;
-    case "tag":
-      buff +=
-        "<" + doc.name + (doc.attrs ? attrString(doc.attrs) : "") + (doc.voidElement ? "/>" : ">");
+    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 + "-->");
+      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);
-  }, "");
+    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 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 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 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"]);
+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, "###") : '"###"')
-  );
+  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 + ">";
@@ -209,17 +179,15 @@ function fullClosing($0, $1, $2) {
 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")})()`
-    );
+    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) } = {}
-) {
+function createHTML(r, {
+  delegateEvents = true,
+  functionBuilder = (...args) => new Function(...args)
+} = {}) {
   let uuid = 1;
   r.wrapProps = props => {
     const d = Object.getOwnPropertyDescriptors(props);
@@ -228,7 +196,7 @@ function createHTML(
     }
     return props;
   };
-  r.resolveFn = fn => (typeof fn === "function" ? fn() : fn);
+  r.resolveFn = fn => typeof fn === "function" ? fn() : fn;
   function createTemplate(statics, opt) {
     let i = 0,
       markup = "";
@@ -236,16 +204,7 @@ function createHTML(
       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, "> "]
-    ];
+    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);
@@ -280,7 +239,7 @@ function createHTML(
     } else {
       const chunks = value.split("###");
       options.counter = chunks.length - 1 + options.counter;
-      expr = chunks.map((v, i) => (i ? ` + _$v[${i - 1}] + "${v}"` : `"${v}"`)).join("");
+      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];
@@ -292,19 +251,11 @@ function createHTML(
       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 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})`);
+      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) {
@@ -312,14 +263,10 @@ function createHTML(
       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})`
-        );
+        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++}])`
-        );
+        options.exprs.push(`${tag}.addEventListener("${name.slice(3)}",exprs[${options.counter++}])`);
       }
     } else if (name === "ref") {
       options.exprs.push(`exprs[${options.counter++}](${tag})`);
@@ -331,9 +278,7 @@ function createHTML(
       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}])`
-        );
+        options.exprs.push(`typeof exprs[${count}] === "function" ? r.effect(() => exprs[${count}](), _fn${count}) : _fn${count}(exprs[${count}])`);
       } else {
         let check = "";
         let list = "";
@@ -348,9 +293,7 @@ function createHTML(
           list += `exprs[${i}]`;
           reactiveList += `r.resolveFn(exprs[${i}])`;
         }
-        options.exprs.push(
-          check + ` ? r.effect(() => [${reactiveList}], _fn${count}) : _fn${count}([${list}])`
-        );
+        options.exprs.push(check + ` ? r.effect(() => [${reactiveList}], _fn${count}) : _fn${count}([${list}])`);
       }
       options.counter = childOptions.counter;
       options.wrap = false;
@@ -365,10 +308,7 @@ function createHTML(
     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 === "###")
-        ) {
+        if (child.type === "comment" && child.content === "#" || child.type === "tag" && child.name === "###") {
           childOptions.multi = true;
           break;
         }
@@ -389,9 +329,7 @@ function createHTML(
         continue;
       }
       parseNode(child, childOptions);
-      if (!childOptions.multi && child.type === "comment" && child.content === "#")
-        node.children.splice(i, 1);
-      else i++;
+      if (!childOptions.multi && child.type === "comment" && child.content === "#") node.children.splice(i, 1);else i++;
     }
     options.counter = childOptions.counter;
     options.templateId = childOptions.templateId;
@@ -414,28 +352,26 @@ function createHTML(
       propGroups = [props],
       componentIdentifier = options.counter++;
     for (let i = 0; i < keys.length; i++) {
-      const { type, name, value } = node.attrs[i];
+      const {
+        type,
+        name,
+        value
+      } = node.attrs[i];
       if (type === "attr") {
         if (name === "###") {
           propGroups.push(`exprs[${options.counter++}]`);
-          propGroups.push((props = []));
+          propGroups.push(props = []);
         } else if (value === "###") {
-          props.push(`${name}: exprs[${options.counter++}]`);
-        } else props.push(`${name}: "${value}"`);
-      } else if (type === "directive") {
+          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"}`
-        );
+        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 === "#"
-    ) {
+    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 = {
@@ -458,20 +394,7 @@ function createHTML(
       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)})`
-      );
+    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;
   }
@@ -502,21 +425,13 @@ function createHTML(
           });
           options.templateNodes.push([child]);
           parseNode(child, childOptions);
-          parts.push(
-            `function() { ${
-              childOptions.decl.join(",\n") +
-              ";\n" +
-              childOptions.exprs.join(";\n") +
-              `;\nreturn _$el${id};\n`
-            }}()`
-          );
+          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) {
+          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++}]`);
             }
@@ -528,26 +443,24 @@ function createHTML(
       const tag = `_$el${uuid++}`;
       const topDecl = !options.decl.length;
       const templateId = options.templateId;
-      options.decl.push(
-        topDecl ? "" : `${tag} = ${options.path}.${options.first ? "firstChild" : "nextSibling"}`
-      );
+      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");
+      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];
+          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}],`;
+              current += `${name}: ${name !== "ref" ? `typeof exprs[${count}] === "function" ? exprs[${count}]() : ` : ""}exprs[${count}],`;
             } else if (name === "###") {
               if (current.length) {
                 spreadArgs.push(`()=>({${current}})`);
@@ -565,16 +478,14 @@ function createHTML(
         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})`
-        );
+        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];
+          const {
+            type,
+            name,
+            value
+          } = node.attrs[i];
           if (type === "directive") {
             parseDirective(name, value, tag, options);
             node.attrs.splice(i, 1);
@@ -592,10 +503,7 @@ function createHTML(
       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)`;
+        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++}`;
@@ -630,12 +538,10 @@ function createHTML(
       origNodes = nodes;
     let toplevel;
     if (nodes.length > 1) {
-      nodes = [
-        {
-          type: "fragment",
-          children: nodes
-        }
-      ];
+      nodes = [{
+        type: "fragment",
+        children: nodes
+      }];
     }
     if (nodes[0].name === "###") {
       toplevel = true;
@@ -643,25 +549,12 @@ function createHTML(
     } 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`)
-      )
-    ];
+    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
-      });
+    const templates = cache.get(statics) || createTemplate(statics, {
+      funcBuilder: functionBuilder
+    });
     return templates[0].create(templates, args, r);
   }
   return html;

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@solidjs/html",
   "description": "Build-less Tagged-Template-Literal Templating for Solid",
-  "version": "2.0.0-experimental.0",
+  "version": "2.0.0-experimental.10",
   "author": "Ryan Carniato",
   "license": "MIT",
   "homepage": "https://solidjs.com",
@@ -31,10 +31,10 @@
     "./dist/*": "./dist/*"
   },
   "peerDependencies": {
-    "@solidjs/web": "^2.0.0-experimental.0"
+    "@solidjs/web": "^2.0.0-experimental.10"
   },
   "devDependencies": {
-    "@solidjs/web": "2.0.0-experimental.0"
+    "@solidjs/web": "2.0.0-experimental.10"
   },
   "scripts": {
     "build": "npm-run-all -nl build:*",

package/types/index.d.ts

@@ -1,3 +0,0 @@
-import type { HTMLTag } from "./lit.js";
-declare const html: HTMLTag;
-export default html;

package/types/lit.d.ts

@@ -1,57 +0,0 @@
-type MountableElement = Element | Document | ShadowRoot | DocumentFragment | Node;
-type ClassList =
-  | Record<string, boolean>
-  | Array<string | number | boolean | null | undefined | Record<string, boolean>>;
-interface Runtime {
-  effect<T>(fn: (prev?: T) => T, effect: (value: T, prev?: T) => void, init?: T): void;
-  untrack<T>(fn: () => T): T;
-  insert(parent: MountableElement, accessor: any, marker?: Node | null, init?: any): any;
-  spread<T>(node: Element, accessor: (() => T) | T, isSVG?: Boolean, skipChildren?: Boolean): void;
-  createComponent(Comp: (props: any) => any, props: any): any;
-  addEventListener(
-    node: Element,
-    name: string,
-    handler: EventListener | EventListenerObject | (EventListenerObject & AddEventListenerOptions),
-    delegate: boolean
-  ): void;
-  delegateEvents(eventNames: string[]): void;
-  className(
-    node: Element,
-    value: string | ClassList,
-    isSVG?: boolean,
-    prev?: string | ClassList
-  ): void;
-  style(
-    node: Element,
-    value: {
-      [k: string]: string;
-    },
-    prev?: {
-      [k: string]: string;
-    }
-  ): void;
-  mergeProps(...sources: unknown[]): unknown;
-  dynamicProperty(props: any, key: string): any;
-  setAttribute(node: Element, name: string, value: any): void;
-  setAttributeNS(node: Element, namespace: string, name: string, value: any): void;
-  getPropAlias(prop: string, tagName: string): string | undefined;
-  Properties: Set<string>;
-  ChildProperties: Set<string>;
-  DelegatedEvents: Set<string>;
-  SVGElements: Set<string>;
-  SVGNamespace: Record<string, string>;
-}
-export type HTMLTag = {
-  (statics: TemplateStringsArray, ...args: unknown[]): Node | Node[];
-};
-export declare function createHTML(
-  r: Runtime,
-  {
-    delegateEvents,
-    functionBuilder
-  }?: {
-    delegateEvents?: boolean;
-    functionBuilder?: (...args: string[]) => Function;
-  }
-): HTMLTag;
-export {};