solid-js 1.7.2 → 1.7.3

package/dist/dev.cjs

@@ -223,7 +223,7 @@ function createEffect(fn, value, options) {
   const c = createComputation(fn, value, false, STALE, options ),
     s = SuspenseContext && lookup(Owner, SuspenseContext.id);
   if (s) c.suspense = s;
-  c.user = true;
+  if (!options || !options.render) c.user = true;
   Effects ? Effects.push(c) : updateComputation(c);
 }
 function createReaction(onInvalidate, options) {
@@ -470,6 +470,7 @@ function catchError(fn, handler) {
   Owner.context = {
     [ERROR]: [handler]
   };
+  if (Transition && Transition.running) Transition.sources.add(Owner);
   try {
     return fn();
   } catch (err) {

package/dist/dev.js

@@ -221,7 +221,7 @@ function createEffect(fn, value, options) {
   const c = createComputation(fn, value, false, STALE, options ),
     s = SuspenseContext && lookup(Owner, SuspenseContext.id);
   if (s) c.suspense = s;
-  c.user = true;
+  if (!options || !options.render) c.user = true;
   Effects ? Effects.push(c) : updateComputation(c);
 }
 function createReaction(onInvalidate, options) {
@@ -468,6 +468,7 @@ function catchError(fn, handler) {
   Owner.context = {
     [ERROR]: [handler]
   };
+  if (Transition && Transition.running) Transition.sources.add(Owner);
   try {
     return fn();
   } catch (err) {

package/dist/solid.cjs

@@ -207,7 +207,7 @@ function createEffect(fn, value, options) {
   const c = createComputation(fn, value, false, STALE),
     s = SuspenseContext && lookup(Owner, SuspenseContext.id);
   if (s) c.suspense = s;
-  c.user = true;
+  if (!options || !options.render) c.user = true;
   Effects ? Effects.push(c) : updateComputation(c);
 }
 function createReaction(onInvalidate, options) {
@@ -454,6 +454,7 @@ function catchError(fn, handler) {
   Owner.context = {
     [ERROR]: [handler]
   };
+  if (Transition && Transition.running) Transition.sources.add(Owner);
   try {
     return fn();
   } catch (err) {

package/dist/solid.js

@@ -205,7 +205,7 @@ function createEffect(fn, value, options) {
   const c = createComputation(fn, value, false, STALE),
     s = SuspenseContext && lookup(Owner, SuspenseContext.id);
   if (s) c.suspense = s;
-  c.user = true;
+  if (!options || !options.render) c.user = true;
   Effects ? Effects.push(c) : updateComputation(c);
 }
 function createReaction(onInvalidate, options) {
@@ -452,6 +452,7 @@ function catchError(fn, handler) {
   Owner.context = {
     [ERROR]: [handler]
   };
+  if (Transition && Transition.running) Transition.sources.add(Owner);
   try {
     return fn();
   } catch (err) {

package/html/dist/html.cjs

@@ -27,7 +27,7 @@ function parseTag( tag) {
     type: 'tag',
     name: '',
     voidElement: false,
-    attrs: {},
+    attrs: [],
     children: []
   };
   const tagMatch = tag.match(/<\/?([^\s]+?)[/\s>]/);
@@ -46,7 +46,19 @@ function parseTag( tag) {
   }
   const reg = new RegExp(attrRE);
   for (const match of tag.matchAll(reg)) {
-    res.attrs[match[1] || match[2]] = match[4] || match[5] || '';
+    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;
 }
@@ -118,8 +130,8 @@ function parse(html) {
 }
 function attrString(attrs) {
   const buff = [];
-  for (const key in attrs) {
-    buff.push(key + '="' + attrs[key].replace(/"/g, '&quot;') + '"');
+  for (const attr of attrs) {
+    buff.push(attr.name + '="' + attr.value.replace(/"/g, '&quot;') + '"');
   }
   if (!buff.length) {
     return '';
@@ -148,8 +160,8 @@ function stringify(doc) {
 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 + "]+" + almostEverything;
+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");
@@ -161,7 +173,7 @@ function attrReplacer($0, $1, $2, $3) {
   return "<" + $1 + $2.replace(findAttributes, replaceAttributes) + $3;
 }
 function replaceAttributes($0, $1, $2) {
-  return $1 + ($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 + ">";
@@ -169,8 +181,17 @@ function fullClosing($0, $1, $2) {
 function toPropertyName(name) {
   return name.toLowerCase().replace(/-([a-z])/g, (_, w) => w.toUpperCase());
 }
+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
+  delegateEvents = true,
+  functionBuilder = (...args) => new Function(...args)
 } = {}) {
   let uuid = 1;
   r.wrapProps = props => {
@@ -180,15 +201,19 @@ function createHTML(r, {
     }
     return props;
   };
-  function createTemplate(statics) {
+  function createTemplate(statics, opt) {
     let i = 0,
       markup = "";
     for (; i < statics.length - 1; i++) {
       markup = markup + statics[i] + "<!--#-->";
     }
     markup = markup + statics[i];
-    markup = markup.replace(selfClosing, fullClosing).replace(/<(<!--#-->)/g, "<###").replace(/\.\.\.(<!--#-->)/g, "###").replace(attrSeeker, attrReplacer).replace(/>\n+\s*/g, ">").replace(/\n+\s*</g, "<").replace(/\s+</g, " <").replace(/>\s+/g, "> ");
-    const [html, code] = parseTemplate(parse(markup)),
+    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"));
@@ -322,14 +347,24 @@ function createHTML(r, {
       propGroups = [props],
       componentIdentifier = options.counter++;
     for (let i = 0; i < keys.length; i++) {
-      const name = keys[i],
-        value = node.attrs[name];
-      if (name === "###") {
-        propGroups.push(`exprs[${options.counter++}]`);
-        propGroups.push(props = []);
-      } else if (value === "###") {
-        props.push(`${name}: exprs[${options.counter++}]`);
-      } else props.push(`${name}: "${value}"`);
+      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++}]`);
@@ -404,38 +439,58 @@ function createHTML(r, {
       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;
-      if (keys.includes("###")) {
+      if (node.attrs.some(e => e.name === "###")) {
         const spreadArgs = [];
         let current = "";
-        for (let i = 0; i < keys.length; i++) {
-          const name = keys[i],
-            value = node.attrs[name];
-          if (value.includes("###")) {
-            let count = options.counter++;
-            current += `${name}: ${name !== "ref" ? `typeof exprs[${count}] === "function" ? exprs[${count}]() : ` : ""}exprs[${count}],`;
-            delete node.attrs[name];
-          } else if (name === "###") {
-            if (current.length) {
-              spreadArgs.push(`()=>({${current}})`);
-              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]);
             }
-            spreadArgs.push(`exprs[${options.counter++}]`);
-            delete node.attrs[name];
+          } else if (type === 'directive') {
+            parseDirective(name, value, tag, options);
           }
         }
-        if (current.length) spreadArgs.push(`()=>({${current}})`);
+        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 < keys.length; i++) {
-          const name = keys[i],
-            value = node.attrs[name];
-          if (value.includes("###")) {
-            delete node.attrs[name];
-            parseAttribute(node, tag, name, value, isSVG, isCE, options);
+        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, isCE, options);
+            }
           }
         }
       }
@@ -462,7 +517,7 @@ function createHTML(r, {
       options.first = false;
     }
   }
-  function parseTemplate(nodes) {
+  function parseTemplate(nodes, funcBuilder) {
     const options = {
         path: "",
         decl: [],
@@ -489,10 +544,12 @@ function createHTML(r, {
     } else parseNode(nodes[0], options);
     r.delegateEvents(Array.from(options.delegatedEvents));
     const templateNodes = [origNodes].concat(options.templateNodes);
-    return [templateNodes.map(t => stringify(t)), new Function("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);
+    const templates = cache.get(statics) || createTemplate(statics, {
+      funcBuilder: functionBuilder
+    });
     return templates[0].create(templates, args, r);
   }
   return html;

package/html/dist/html.js

@@ -25,7 +25,7 @@ function parseTag( tag) {
     type: 'tag',
     name: '',
     voidElement: false,
-    attrs: {},
+    attrs: [],
     children: []
   };
   const tagMatch = tag.match(/<\/?([^\s]+?)[/\s>]/);
@@ -44,7 +44,19 @@ function parseTag( tag) {
   }
   const reg = new RegExp(attrRE);
   for (const match of tag.matchAll(reg)) {
-    res.attrs[match[1] || match[2]] = match[4] || match[5] || '';
+    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;
 }
@@ -116,8 +128,8 @@ function parse(html) {
 }
 function attrString(attrs) {
   const buff = [];
-  for (const key in attrs) {
-    buff.push(key + '="' + attrs[key].replace(/"/g, '&quot;') + '"');
+  for (const attr of attrs) {
+    buff.push(attr.name + '="' + attr.value.replace(/"/g, '&quot;') + '"');
   }
   if (!buff.length) {
     return '';
@@ -146,8 +158,8 @@ function stringify(doc) {
 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 + "]+" + almostEverything;
+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");
@@ -159,7 +171,7 @@ function attrReplacer($0, $1, $2, $3) {
   return "<" + $1 + $2.replace(findAttributes, replaceAttributes) + $3;
 }
 function replaceAttributes($0, $1, $2) {
-  return $1 + ($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 + ">";
@@ -167,8 +179,17 @@ function fullClosing($0, $1, $2) {
 function toPropertyName(name) {
   return name.toLowerCase().replace(/-([a-z])/g, (_, w) => w.toUpperCase());
 }
+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
+  delegateEvents = true,
+  functionBuilder = (...args) => new Function(...args)
 } = {}) {
   let uuid = 1;
   r.wrapProps = props => {
@@ -178,15 +199,19 @@ function createHTML(r, {
     }
     return props;
   };
-  function createTemplate(statics) {
+  function createTemplate(statics, opt) {
     let i = 0,
       markup = "";
     for (; i < statics.length - 1; i++) {
       markup = markup + statics[i] + "<!--#-->";
     }
     markup = markup + statics[i];
-    markup = markup.replace(selfClosing, fullClosing).replace(/<(<!--#-->)/g, "<###").replace(/\.\.\.(<!--#-->)/g, "###").replace(attrSeeker, attrReplacer).replace(/>\n+\s*/g, ">").replace(/\n+\s*</g, "<").replace(/\s+</g, " <").replace(/>\s+/g, "> ");
-    const [html, code] = parseTemplate(parse(markup)),
+    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"));
@@ -320,14 +345,24 @@ function createHTML(r, {
       propGroups = [props],
       componentIdentifier = options.counter++;
     for (let i = 0; i < keys.length; i++) {
-      const name = keys[i],
-        value = node.attrs[name];
-      if (name === "###") {
-        propGroups.push(`exprs[${options.counter++}]`);
-        propGroups.push(props = []);
-      } else if (value === "###") {
-        props.push(`${name}: exprs[${options.counter++}]`);
-      } else props.push(`${name}: "${value}"`);
+      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++}]`);
@@ -402,38 +437,58 @@ function createHTML(r, {
       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;
-      if (keys.includes("###")) {
+      if (node.attrs.some(e => e.name === "###")) {
         const spreadArgs = [];
         let current = "";
-        for (let i = 0; i < keys.length; i++) {
-          const name = keys[i],
-            value = node.attrs[name];
-          if (value.includes("###")) {
-            let count = options.counter++;
-            current += `${name}: ${name !== "ref" ? `typeof exprs[${count}] === "function" ? exprs[${count}]() : ` : ""}exprs[${count}],`;
-            delete node.attrs[name];
-          } else if (name === "###") {
-            if (current.length) {
-              spreadArgs.push(`()=>({${current}})`);
-              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]);
             }
-            spreadArgs.push(`exprs[${options.counter++}]`);
-            delete node.attrs[name];
+          } else if (type === 'directive') {
+            parseDirective(name, value, tag, options);
           }
         }
-        if (current.length) spreadArgs.push(`()=>({${current}})`);
+        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 < keys.length; i++) {
-          const name = keys[i],
-            value = node.attrs[name];
-          if (value.includes("###")) {
-            delete node.attrs[name];
-            parseAttribute(node, tag, name, value, isSVG, isCE, options);
+        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, isCE, options);
+            }
           }
         }
       }
@@ -460,7 +515,7 @@ function createHTML(r, {
       options.first = false;
     }
   }
-  function parseTemplate(nodes) {
+  function parseTemplate(nodes, funcBuilder) {
     const options = {
         path: "",
         decl: [],
@@ -487,10 +542,12 @@ function createHTML(r, {
     } else parseNode(nodes[0], options);
     r.delegateEvents(Array.from(options.delegatedEvents));
     const templateNodes = [origNodes].concat(options.templateNodes);
-    return [templateNodes.map(t => stringify(t)), new Function("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);
+    const templates = cache.get(statics) || createTemplate(statics, {
+      funcBuilder: functionBuilder
+    });
     return templates[0].create(templates, args, r);
   }
   return html;

package/html/types/lit.d.ts

@@ -32,7 +32,8 @@ interface Runtime {
 export type HTMLTag = {
     (statics: TemplateStringsArray, ...args: unknown[]): Node | Node[];
 };
-export declare function createHTML(r: Runtime, { delegateEvents }?: {
-    delegateEvents?: boolean | undefined;
+export declare function createHTML(r: Runtime, { delegateEvents, functionBuilder }?: {
+    delegateEvents?: boolean;
+    functionBuilder?: (...args: string[]) => Function;
 }): HTMLTag;
 export {};

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "solid-js",
   "description": "A declarative JavaScript library for building user interfaces.",
-  "version": "1.7.2",
+  "version": "1.7.3",
   "author": "Ryan Carniato",
   "license": "MIT",
   "homepage": "https://solidjs.com",

package/store/types/index.d.ts

@@ -3,11 +3,10 @@ export type { ArrayFilterFn, DeepMutable, DeepReadonly, NotWrappable, Part, SetS
 export * from "./mutable.js";
 export * from "./modifiers.js";
 import { $NODE, isWrappable } from "./store.js";
-declare const DEV: {
+export declare const DEV: {
     readonly $NODE: typeof $NODE;
     readonly isWrappable: typeof isWrappable;
     readonly hooks: {
         onStoreNodeUpdate: import("./store.js").OnStoreNodeUpdate | null;
     };
 } | undefined;
-export { DEV };

package/types/index.d.ts

@@ -8,7 +8,7 @@ import type { JSX } from "./jsx.js";
 type JSXElement = JSX.Element;
 export type { JSXElement, JSX };
 import { registerGraph, writeSignal } from "./reactive/signal.js";
-declare const DEV: {
+export declare const DEV: {
     readonly hooks: {
         afterUpdate: (() => void) | null;
         afterCreateOwner: ((owner: import("./reactive/signal.js").Owner) => void) | null;
@@ -16,7 +16,6 @@ declare const DEV: {
     readonly writeSignal: typeof writeSignal;
     readonly registerGraph: typeof registerGraph;
 } | undefined;
-export { DEV };
 declare global {
     var Solid$$: boolean;
 }

package/types/reactive/signal.d.ts

@@ -184,7 +184,9 @@ export declare function createRenderEffect<Next, Init = Next>(fn: EffectFunction
  * @description https://www.solidjs.com/docs/latest/api#createeffect
  */
 export declare function createEffect<Next>(fn: EffectFunction<undefined | NoInfer<Next>, Next>): void;
-export declare function createEffect<Next, Init = Next>(fn: EffectFunction<Init | Next, Next>, value: Init, options?: EffectOptions): void;
+export declare function createEffect<Next, Init = Next>(fn: EffectFunction<Init | Next, Next>, value: Init, options?: EffectOptions & {
+    render?: boolean;
+}): void;
 /**
  * Creates a reactive computation that runs after the render phase with flexible tracking
  * ```typescript

package/web/dist/dev.cjs

@@ -575,7 +575,9 @@ function Portal(props) {
     mount = () => props.mount || document.body,
     owner = solidJs.getOwner();
   let content;
+  let hydrating = !!solidJs.sharedConfig.context;
   solidJs.createEffect(() => {
+    if (hydrating) solidJs.getOwner().user = hydrating = false;
     content || (content = solidJs.runWithOwner(owner, () => props.children));
     const el = mount();
     if (el instanceof HTMLHeadElement) {
@@ -599,6 +601,8 @@ function Portal(props) {
       props.ref && props.ref(container);
       solidJs.onCleanup(() => el.removeChild(container));
     }
+  }, undefined, {
+    render: !hydrating
   });
   return marker;
 }

package/web/dist/dev.js

@@ -574,7 +574,9 @@ function Portal(props) {
     mount = () => props.mount || document.body,
     owner = getOwner();
   let content;
+  let hydrating = !!sharedConfig.context;
   createEffect(() => {
+    if (hydrating) getOwner().user = hydrating = false;
     content || (content = runWithOwner(owner, () => props.children));
     const el = mount();
     if (el instanceof HTMLHeadElement) {
@@ -598,6 +600,8 @@ function Portal(props) {
       props.ref && props.ref(container);
       onCleanup(() => el.removeChild(container));
     }
+  }, undefined, {
+    render: !hydrating
   });
   return marker;
 }

package/web/dist/server.cjs

@@ -512,7 +512,7 @@ function ssrSpread(props, isSVG, skipChildren) {
   const keys = Object.keys(props);
   let classResolved;
   for (let i = 0; i < keys.length; i++) {
-    const prop = keys[i];
+    let prop = keys[i];
     if (prop === "children") {
       !skipChildren && console.warn(`SSR currently does not support spread children.`);
       continue;

package/web/dist/server.js

@@ -511,7 +511,7 @@ function ssrSpread(props, isSVG, skipChildren) {
   const keys = Object.keys(props);
   let classResolved;
   for (let i = 0; i < keys.length; i++) {
-    const prop = keys[i];
+    let prop = keys[i];
     if (prop === "children") {
       !skipChildren && console.warn(`SSR currently does not support spread children.`);
       continue;

package/web/dist/web.cjs

@@ -575,7 +575,9 @@ function Portal(props) {
     mount = () => props.mount || document.body,
     owner = solidJs.getOwner();
   let content;
+  let hydrating = !!solidJs.sharedConfig.context;
   solidJs.createEffect(() => {
+    if (hydrating) solidJs.getOwner().user = hydrating = false;
     content || (content = solidJs.runWithOwner(owner, () => props.children));
     const el = mount();
     if (el instanceof HTMLHeadElement) {
@@ -599,6 +601,8 @@ function Portal(props) {
       props.ref && props.ref(container);
       solidJs.onCleanup(() => el.removeChild(container));
     }
+  }, undefined, {
+    render: !hydrating
   });
   return marker;
 }

package/web/dist/web.js

@@ -574,7 +574,9 @@ function Portal(props) {
     mount = () => props.mount || document.body,
     owner = getOwner();
   let content;
+  let hydrating = !!sharedConfig.context;
   createEffect(() => {
+    if (hydrating) getOwner().user = hydrating = false;
     content || (content = runWithOwner(owner, () => props.children));
     const el = mount();
     if (el instanceof HTMLHeadElement) {
@@ -598,6 +600,8 @@ function Portal(props) {
       props.ref && props.ref(container);
       onCleanup(() => el.removeChild(container));
     }
+  }, undefined, {
+    render: !hydrating
   });
   return marker;
 }