solid-js 1.4.1 → 1.4.2

package/html/dist/html.cjs

@@ -179,15 +179,15 @@ const attrName = "[ " + spaces + "]+" + 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*)(['\"(]?)" + "<!--#-->" + "(['\")]?)", "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", "oncapture", "style", "use", "prop", "attr"]);
 function attrReplacer($0, $1, $2, $3) {
   return "<" + $1 + $2.replace(findAttributes, replaceAttributes) + $3;
 }
-function replaceAttributes($0, $1, $2, $3) {
-  return $1 + ($2 || '"') + "###" + ($3 || '"');
+function replaceAttributes($0, $1, $2) {
+  return $1 + ($2[0] === '"' || $2[0] === "'" ? $2.replace(/<!--#-->/g, "###") : '"###"');
 }
 function fullClosing($0, $1, $2) {
   return VOID_ELEMENTS.test($1) ? $0 : "<" + $1 + $2 + "></" + $1 + ">";
@@ -236,9 +236,8 @@ function createHTML(r, {
     cache.set(statics, templates);
     return templates;
   }
-  function parseKeyValue(tag, name, isSVG, isCE, options) {
-    let count = options.counter++,
-        expr = `!doNotWrap ? exprs[${count}]() : exprs[${count}]`,
+  function parseKeyValue(tag, name, value, isSVG, isCE, options) {
+    let expr = value === "###" ? `!doNotWrap ? exprs[${options.counter}]() : exprs[${options.counter++}]` : value.split("###").map((v, i) => i ? ` + (typeof exprs[${options.counter}] === "function" ? exprs[${options.counter}]() : exprs[${options.counter++}]) + "${v}"` : `"${v}"`).join(""),
         parts,
         namespace;
     if ((parts = name.split(":")) && parts[1] && reservedNameSpaces.has(parts[0])) {
@@ -263,7 +262,7 @@ function createHTML(r, {
       if (ns) options.exprs.push(`r.setAttributeNS(${tag},"${ns}","${name}",${expr})`);else options.exprs.push(`r.setAttribute(${tag},"${r.Aliases[name] || name}",${expr})`);
     }
   }
-  function parseAttribute(tag, name, isSVG, isCE, options) {
+  function parseAttribute(tag, name, value, isSVG, isCE, options) {
     if (name.slice(0, 2) === "on") {
       if (!name.includes(":")) {
         const lc = name.slice(2).toLowerCase();
@@ -281,9 +280,18 @@ function createHTML(r, {
         exprs: []
       }),
             count = options.counter;
-      parseKeyValue(tag, name, isSVG, isCE, childOptions);
-      options.decl.push(`_fn${count} = doNotWrap => {\n${childOptions.exprs.join(";\n")};\n}`);
-      options.exprs.push(`typeof exprs[${count}] === "function" ? r.effect(_fn${count}) : _fn${count}(true)`);
+      parseKeyValue(tag, name, value, isSVG, isCE, childOptions);
+      options.decl.push(`_fn${count} = (${value === "###" ? "doNotWrap" : ""}) => {\n${childOptions.exprs.join(";\n")};\n}`);
+      if (value === "###") {
+        options.exprs.push(`typeof exprs[${count}] === "function" ? r.effect(_fn${count}) : _fn${count}(true)`);
+      } else {
+        let check = "";
+        for (let i = count; i < childOptions.counter; i++) {
+          i !== count && (check += " || ");
+          check += `typeof exprs[${i}] === "function"`;
+        }
+        options.exprs.push(check + ` ? r.effect(_fn${count}) : _fn${count}()`);
+      }
       options.counter = childOptions.counter;
       options.wrap = false;
     }
@@ -322,6 +330,7 @@ function createHTML(r, {
     }
     options.counter = childOptions.counter;
     options.templateId = childOptions.templateId;
+    options.hasCustomElement = options.hasCustomElement || childOptions.hasCustomElement;
   }
   function processComponentProps(propGroups) {
     let result = [];
@@ -414,16 +423,19 @@ function createHTML(r, {
       options.exprs.push(`return [${parts.join(", \n")}]`);
     } else if (node.type === "tag") {
       const tag = `_$el${uuid++}`;
-      options.decl.push(!options.decl.length ? `const ${tag} = tmpls[${options.templateId}].content.firstChild.cloneNode(true)` : `${tag} = ${options.path}.${options.first ? "firstChild" : "nextSibling"}`);
+      const topDecl = !options.decl.length;
+      const templateId = options.templateId;
+      options.decl.push(topDecl ? "" : `${tag} = ${options.path}.${options.first ? "firstChild" : "nextSibling"}`);
       const keys = Object.keys(node.attrs);
       const isSVG = r.SVGElements.has(node.name);
       const isCE = node.name.includes("-");
+      options.hasCustomElement = isCE;
       for (let i = 0; i < keys.length; i++) {
         const name = keys[i],
               value = node.attrs[name];
-        if (value === "###") {
+        if (value.includes("###")) {
           delete node.attrs[name];
-          parseAttribute(tag, name, isSVG, isCE, options);
+          parseAttribute(tag, name, value, isSVG, isCE, options);
         } else if (name === "###") {
           delete node.attrs[name];
           options.exprs.push(`r.spread(${tag},exprs[${options.counter++}],${isSVG},${!!node.children.length})`);
@@ -432,17 +444,22 @@ function createHTML(r, {
       options.path = tag;
       options.first = false;
       processChildren(node, options);
+      if (topDecl) {
+        options.decl[0] = options.hasCustomElement ? `const ${tag} = 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" && node.content === "#") {
+    } else if (node.type === "comment") {
       const tag = `_$el${uuid++}`;
       options.decl.push(`${tag} = ${options.path}.${options.first ? "firstChild" : "nextSibling"}`);
-      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++}])`);
+      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;
     }

package/html/dist/html.js

@@ -177,15 +177,15 @@ const attrName = "[ " + spaces + "]+" + 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*)(['\"(]?)" + "<!--#-->" + "(['\")]?)", "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", "oncapture", "style", "use", "prop", "attr"]);
 function attrReplacer($0, $1, $2, $3) {
   return "<" + $1 + $2.replace(findAttributes, replaceAttributes) + $3;
 }
-function replaceAttributes($0, $1, $2, $3) {
-  return $1 + ($2 || '"') + "###" + ($3 || '"');
+function replaceAttributes($0, $1, $2) {
+  return $1 + ($2[0] === '"' || $2[0] === "'" ? $2.replace(/<!--#-->/g, "###") : '"###"');
 }
 function fullClosing($0, $1, $2) {
   return VOID_ELEMENTS.test($1) ? $0 : "<" + $1 + $2 + "></" + $1 + ">";
@@ -234,9 +234,8 @@ function createHTML(r, {
     cache.set(statics, templates);
     return templates;
   }
-  function parseKeyValue(tag, name, isSVG, isCE, options) {
-    let count = options.counter++,
-        expr = `!doNotWrap ? exprs[${count}]() : exprs[${count}]`,
+  function parseKeyValue(tag, name, value, isSVG, isCE, options) {
+    let expr = value === "###" ? `!doNotWrap ? exprs[${options.counter}]() : exprs[${options.counter++}]` : value.split("###").map((v, i) => i ? ` + (typeof exprs[${options.counter}] === "function" ? exprs[${options.counter}]() : exprs[${options.counter++}]) + "${v}"` : `"${v}"`).join(""),
         parts,
         namespace;
     if ((parts = name.split(":")) && parts[1] && reservedNameSpaces.has(parts[0])) {
@@ -261,7 +260,7 @@ function createHTML(r, {
       if (ns) options.exprs.push(`r.setAttributeNS(${tag},"${ns}","${name}",${expr})`);else options.exprs.push(`r.setAttribute(${tag},"${r.Aliases[name] || name}",${expr})`);
     }
   }
-  function parseAttribute(tag, name, isSVG, isCE, options) {
+  function parseAttribute(tag, name, value, isSVG, isCE, options) {
     if (name.slice(0, 2) === "on") {
       if (!name.includes(":")) {
         const lc = name.slice(2).toLowerCase();
@@ -279,9 +278,18 @@ function createHTML(r, {
         exprs: []
       }),
             count = options.counter;
-      parseKeyValue(tag, name, isSVG, isCE, childOptions);
-      options.decl.push(`_fn${count} = doNotWrap => {\n${childOptions.exprs.join(";\n")};\n}`);
-      options.exprs.push(`typeof exprs[${count}] === "function" ? r.effect(_fn${count}) : _fn${count}(true)`);
+      parseKeyValue(tag, name, value, isSVG, isCE, childOptions);
+      options.decl.push(`_fn${count} = (${value === "###" ? "doNotWrap" : ""}) => {\n${childOptions.exprs.join(";\n")};\n}`);
+      if (value === "###") {
+        options.exprs.push(`typeof exprs[${count}] === "function" ? r.effect(_fn${count}) : _fn${count}(true)`);
+      } else {
+        let check = "";
+        for (let i = count; i < childOptions.counter; i++) {
+          i !== count && (check += " || ");
+          check += `typeof exprs[${i}] === "function"`;
+        }
+        options.exprs.push(check + ` ? r.effect(_fn${count}) : _fn${count}()`);
+      }
       options.counter = childOptions.counter;
       options.wrap = false;
     }
@@ -320,6 +328,7 @@ function createHTML(r, {
     }
     options.counter = childOptions.counter;
     options.templateId = childOptions.templateId;
+    options.hasCustomElement = options.hasCustomElement || childOptions.hasCustomElement;
   }
   function processComponentProps(propGroups) {
     let result = [];
@@ -412,16 +421,19 @@ function createHTML(r, {
       options.exprs.push(`return [${parts.join(", \n")}]`);
     } else if (node.type === "tag") {
       const tag = `_$el${uuid++}`;
-      options.decl.push(!options.decl.length ? `const ${tag} = tmpls[${options.templateId}].content.firstChild.cloneNode(true)` : `${tag} = ${options.path}.${options.first ? "firstChild" : "nextSibling"}`);
+      const topDecl = !options.decl.length;
+      const templateId = options.templateId;
+      options.decl.push(topDecl ? "" : `${tag} = ${options.path}.${options.first ? "firstChild" : "nextSibling"}`);
       const keys = Object.keys(node.attrs);
       const isSVG = r.SVGElements.has(node.name);
       const isCE = node.name.includes("-");
+      options.hasCustomElement = isCE;
       for (let i = 0; i < keys.length; i++) {
         const name = keys[i],
               value = node.attrs[name];
-        if (value === "###") {
+        if (value.includes("###")) {
           delete node.attrs[name];
-          parseAttribute(tag, name, isSVG, isCE, options);
+          parseAttribute(tag, name, value, isSVG, isCE, options);
         } else if (name === "###") {
           delete node.attrs[name];
           options.exprs.push(`r.spread(${tag},exprs[${options.counter++}],${isSVG},${!!node.children.length})`);
@@ -430,17 +442,22 @@ function createHTML(r, {
       options.path = tag;
       options.first = false;
       processChildren(node, options);
+      if (topDecl) {
+        options.decl[0] = options.hasCustomElement ? `const ${tag} = 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" && node.content === "#") {
+    } else if (node.type === "comment") {
       const tag = `_$el${uuid++}`;
       options.decl.push(`${tag} = ${options.path}.${options.first ? "firstChild" : "nextSibling"}`);
-      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++}])`);
+      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;
     }

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "solid-js",
   "description": "A declarative JavaScript library for building user interfaces.",
-  "version": "1.4.1",
+  "version": "1.4.2",
   "author": "Ryan Carniato",
   "license": "MIT",
   "homepage": "https://solidjs.com",
@@ -151,5 +151,5 @@
     "compiler",
     "performance"
   ],
-  "gitHead": "be6623d10d11fb28743a074c31e785c18e95bd25"
+  "gitHead": "f17df5c7042425aa8d363be261bd9a9e5345c188"
 }

package/types/render/component.d.ts

@@ -66,21 +66,15 @@ export declare type ComponentProps<T extends keyof JSX.IntrinsicElements | Compo
  */
 export declare type Ref<T> = T | ((val: T) => void);
 export declare function createComponent<T>(Comp: Component<T>, props: T): JSX.Element;
-declare type Simplify<T> = T extends object ? {
-    [K in keyof T]: T[K];
-} : T;
-declare type UnboxLazy<T> = T extends () => infer U ? U : T;
-declare type RequiredKeys<T> = keyof {
-    [K in keyof T as T extends {
-        [_ in K]: unknown;
-    } ? K : never]: 0;
-};
-declare type Override<T, U> = {
-    [K in keyof Omit<T, RequiredKeys<U>>]: T[K] | Exclude<U[K & keyof U], undefined>;
+declare type Override<T, U> = T extends any ? U extends any ? {
+    [K in keyof T]: K extends keyof U ? undefined extends U[K] ? Exclude<U[K], undefined> | T[K] : U[K] : T[K];
 } & {
-    [K in keyof Omit<U, Exclude<keyof T, RequiredKeys<U>>>]: Exclude<U[K], undefined> | (undefined extends U[K] ? (K extends keyof T ? T[K] : undefined) : never);
-};
-export declare type MergeProps<T extends unknown[], Curr = {}> = T extends [infer Next, ...infer Rest] ? MergeProps<Rest, Next extends object ? (Next extends Function ? Curr : Override<Curr, UnboxLazy<Next>>) : Curr> : Simplify<Curr>;
+    [K in keyof U]: K extends keyof T ? undefined extends U[K] ? Exclude<U[K], undefined> | T[K] : U[K] : U[K];
+} : T & U : T & U;
+export declare type MergeProps<T extends unknown[], Curr = {}> = T extends [
+    infer Next | (() => infer Next),
+    ...infer Rest
+] ? MergeProps<Rest, Override<Curr, Next>> : Curr;
 export declare function mergeProps<T extends [unknown, ...unknown[]]>(...sources: T): MergeProps<T>;
 export declare type SplitProps<T, K extends (readonly (keyof T)[])[]> = [
     ...{