solid-js 1.7.2 → 1.7.4

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) {
@@ -1313,7 +1314,7 @@ function mergeProps(...sources) {
   return target;
 }
 function splitProps(props, ...keys) {
-  const blocked = new Set(keys.flat());
+  const blocked = new Set(keys.length > 1 ? keys.flat() : keys[0]);
   if ($PROXY in props) {
     const res = keys.map(k => {
       return new Proxy({

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) {
@@ -1311,7 +1312,7 @@ function mergeProps(...sources) {
   return target;
 }
 function splitProps(props, ...keys) {
-  const blocked = new Set(keys.flat());
+  const blocked = new Set(keys.length > 1 ? keys.flat() : keys[0]);
   if ($PROXY in props) {
     const res = keys.map(k => {
       return new Proxy({

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) {
@@ -1268,7 +1269,7 @@ function mergeProps(...sources) {
   return target;
 }
 function splitProps(props, ...keys) {
-  const blocked = new Set(keys.flat());
+  const blocked = new Set(keys.length > 1 ? keys.flat() : keys[0]);
   if ($PROXY in props) {
     const res = keys.map(k => {
       return new Proxy({

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) {
@@ -1266,7 +1267,7 @@ function mergeProps(...sources) {
   return target;
 }
 function splitProps(props, ...keys) {
-  const blocked = new Set(keys.flat());
+  const blocked = new Set(keys.length > 1 ? keys.flat() : keys[0]);
   if ($PROXY in props) {
     const res = keys.map(k => {
       return new Proxy({

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.4",
   "author": "Ryan Carniato",
   "license": "MIT",
   "homepage": "https://solidjs.com",

package/store/dist/dev.cjs

@@ -135,7 +135,10 @@ function setProperty(state, property, value, deleting = false) {
   let nodes = getDataNodes(state),
     node;
   if (node = getDataNode(nodes, property, prev)) node.$(() => value);
-  if (Array.isArray(state) && state.length !== len) (node = getDataNode(nodes, "length", len)) && node.$(state.length);
+  if (Array.isArray(state) && state.length !== len) {
+    for (let i = state.length; i < len; i++) (node = nodes[i]) && node.$();
+    (node = getDataNode(nodes, "length", len)) && node.$(state.length);
+  }
   (node = nodes._) && node.$();
 }
 function mergeStoreNode(state, value) {

package/store/dist/dev.js

@@ -133,7 +133,10 @@ function setProperty(state, property, value, deleting = false) {
   let nodes = getDataNodes(state),
     node;
   if (node = getDataNode(nodes, property, prev)) node.$(() => value);
-  if (Array.isArray(state) && state.length !== len) (node = getDataNode(nodes, "length", len)) && node.$(state.length);
+  if (Array.isArray(state) && state.length !== len) {
+    for (let i = state.length; i < len; i++) (node = nodes[i]) && node.$();
+    (node = getDataNode(nodes, "length", len)) && node.$(state.length);
+  }
   (node = nodes._) && node.$();
 }
 function mergeStoreNode(state, value) {

package/store/dist/store.cjs

@@ -129,7 +129,10 @@ function setProperty(state, property, value, deleting = false) {
   let nodes = getDataNodes(state),
     node;
   if (node = getDataNode(nodes, property, prev)) node.$(() => value);
-  if (Array.isArray(state) && state.length !== len) (node = getDataNode(nodes, "length", len)) && node.$(state.length);
+  if (Array.isArray(state) && state.length !== len) {
+    for (let i = state.length; i < len; i++) (node = nodes[i]) && node.$();
+    (node = getDataNode(nodes, "length", len)) && node.$(state.length);
+  }
   (node = nodes._) && node.$();
 }
 function mergeStoreNode(state, value) {

package/store/dist/store.js

@@ -127,7 +127,10 @@ function setProperty(state, property, value, deleting = false) {
   let nodes = getDataNodes(state),
     node;
   if (node = getDataNode(nodes, property, prev)) node.$(() => value);
-  if (Array.isArray(state) && state.length !== len) (node = getDataNode(nodes, "length", len)) && node.$(state.length);
+  if (Array.isArray(state) && state.length !== len) {
+    for (let i = state.length; i < len; i++) (node = nodes[i]) && node.$();
+    (node = getDataNode(nodes, "length", len)) && node.$(state.length);
+  }
   (node = nodes._) && node.$();
 }
 function mergeStoreNode(state, value) {

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/jsx.d.ts

@@ -405,7 +405,8 @@ export namespace JSX {
     | "allow-scripts"
     | "allow-storage-access-by-user-activation"
     | "allow-top-navigation"
-    | "allow-top-navigation-by-user-activation";
+    | "allow-top-navigation-by-user-activation"
+    | "allow-top-navigation-to-custom-protocols";
   type HTMLLinkAs =
     | "audio"
     | "document"
@@ -705,8 +706,9 @@ export namespace JSX {
     contextmenu?: string;
     dir?: HTMLDir;
     draggable?: boolean;
-    hidden?: boolean;
+    hidden?: boolean | "hidden" | "until-found";
     id?: string;
+    inert?: boolean;
     lang?: string;
     spellcheck?: boolean;
     style?: CSSProperties | string;
@@ -874,6 +876,8 @@ export namespace JSX {
     useMap?: string;
     width?: number | string;
     crossOrigin?: HTMLCrossorigin;
+    elementtiming: string;
+    fetchpriority: "high" | "low" | "auto";
   }
   interface InputHTMLAttributes<T> extends HTMLAttributes<T> {
     accept?: string;

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

@@ -457,7 +457,7 @@ function insertExpression(parent, value, current, marker, unwrapArray) {
       appendNodes(parent, array);
     }
     current = array;
-  } else if (value instanceof Node) {
+  } else if (value.nodeType) {
     if (solidJs.sharedConfig.context && value.parentNode) return current = multi ? [value] : value;
     if (Array.isArray(current)) {
       if (multi) return current = cleanChildren(parent, current, marker, value);
@@ -473,12 +473,13 @@ function normalizeIncomingArray(normalized, array, current, unwrap) {
   let dynamic = false;
   for (let i = 0, len = array.length; i < len; i++) {
     let item = array[i],
-      prev = current && current[i];
-    if (item instanceof Node) {
+      prev = current && current[i],
+      t;
+    if (item == null || item === true || item === false) ; else if ((t = typeof item) === "object" && item.nodeType) {
       normalized.push(item);
-    } else if (item == null || item === true || item === false) ; else if (Array.isArray(item)) {
+    } else if (Array.isArray(item)) {
       dynamic = normalizeIncomingArray(normalized, item, prev) || dynamic;
-    } else if ((typeof item) === "function") {
+    } else if (t === "function") {
       if (unwrap) {
         while (typeof item === "function") item = item();
         dynamic = normalizeIncomingArray(normalized, Array.isArray(item) ? item : [item], Array.isArray(prev) ? prev : [prev]) || dynamic;
@@ -488,10 +489,7 @@ function normalizeIncomingArray(normalized, array, current, unwrap) {
       }
     } else {
       const value = String(item);
-      if (prev && prev.nodeType === 3) {
-        prev.data = value;
-        normalized.push(prev);
-      } else normalized.push(document.createTextNode(value));
+      if (prev && prev.nodeType === 3 && prev.data === value) normalized.push(prev);else normalized.push(document.createTextNode(value));
     }
   }
   return dynamic;
@@ -575,7 +573,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 +599,8 @@ function Portal(props) {
       props.ref && props.ref(container);
       solidJs.onCleanup(() => el.removeChild(container));
     }
+  }, undefined, {
+    render: !hydrating
   });
   return marker;
 }

package/web/dist/dev.js

@@ -456,7 +456,7 @@ function insertExpression(parent, value, current, marker, unwrapArray) {
       appendNodes(parent, array);
     }
     current = array;
-  } else if (value instanceof Node) {
+  } else if (value.nodeType) {
     if (sharedConfig.context && value.parentNode) return current = multi ? [value] : value;
     if (Array.isArray(current)) {
       if (multi) return current = cleanChildren(parent, current, marker, value);
@@ -472,12 +472,13 @@ function normalizeIncomingArray(normalized, array, current, unwrap) {
   let dynamic = false;
   for (let i = 0, len = array.length; i < len; i++) {
     let item = array[i],
-      prev = current && current[i];
-    if (item instanceof Node) {
+      prev = current && current[i],
+      t;
+    if (item == null || item === true || item === false) ; else if ((t = typeof item) === "object" && item.nodeType) {
       normalized.push(item);
-    } else if (item == null || item === true || item === false) ; else if (Array.isArray(item)) {
+    } else if (Array.isArray(item)) {
       dynamic = normalizeIncomingArray(normalized, item, prev) || dynamic;
-    } else if ((typeof item) === "function") {
+    } else if (t === "function") {
       if (unwrap) {
         while (typeof item === "function") item = item();
         dynamic = normalizeIncomingArray(normalized, Array.isArray(item) ? item : [item], Array.isArray(prev) ? prev : [prev]) || dynamic;
@@ -487,10 +488,7 @@ function normalizeIncomingArray(normalized, array, current, unwrap) {
       }
     } else {
       const value = String(item);
-      if (prev && prev.nodeType === 3) {
-        prev.data = value;
-        normalized.push(prev);
-      } else normalized.push(document.createTextNode(value));
+      if (prev && prev.nodeType === 3 && prev.data === value) normalized.push(prev);else normalized.push(document.createTextNode(value));
     }
   }
   return dynamic;
@@ -574,7 +572,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 +598,8 @@ function Portal(props) {
       props.ref && props.ref(container);
       onCleanup(() => el.removeChild(container));
     }
+  }, undefined, {
+    render: !hydrating
   });
   return marker;
 }

package/web/dist/server.cjs

@@ -290,10 +290,10 @@ function ssrStyle(value) {
   return result;
 }
 function ssrElement(tag, props, children, needsId) {
-  let result = `<${tag}${needsId ? ssrHydrationKey() : ""} `;
-  const skipChildren = VOID_ELEMENTS.test(tag);
   if (props == null) props = {};else if (typeof props === "function") props = props();
+  const skipChildren = VOID_ELEMENTS.test(tag);
   const keys = Object.keys(props);
+  let result = `<${tag}${needsId ? ssrHydrationKey() : ""} `;
   let classResolved;
   for (let i = 0; i < keys.length; i++) {
     const prop = keys[i];
@@ -318,13 +318,12 @@ function ssrElement(tag, props, children, needsId) {
     }
     if (i !== keys.length - 1) result += " ";
   }
-  if (skipChildren) {
-    return {
-      t: result + "/>"
-    };
-  }
+  if (skipChildren) return {
+    t: result + "/>"
+  };
+  if (typeof children === "function") children = children();
   return {
-    t: result + `>${resolveSSRNode(children)}</${tag}>`
+    t: result + `>${resolveSSRNode(children, true)}</${tag}>`
   };
 }
 function ssrAttribute(key, value, isBoolean) {
@@ -380,7 +379,7 @@ function escape(s, attr) {
   }
   return left < s.length ? out + s.substring(left) : out;
 }
-function resolveSSRNode(node) {
+function resolveSSRNode(node, top) {
   const t = typeof node;
   if (t === "string") return node;
   if (node == null || t === "boolean") return "";
@@ -388,7 +387,7 @@ function resolveSSRNode(node) {
     let prev = {};
     let mapped = "";
     for (let i = 0, len = node.length; i < len; i++) {
-      if (typeof prev !== "object" && typeof node[i] !== "object") mapped += `<!--!$-->`;
+      if (!top && typeof prev !== "object" && typeof node[i] !== "object") mapped += `<!--!$-->`;
       mapped += resolveSSRNode(prev = node[i]);
     }
     return mapped;
@@ -414,7 +413,7 @@ function generateHydrationScript({
   eventNames = ["click", "input"],
   nonce
 } = {}) {
-  return `<script${nonce ? ` nonce="${nonce}"` : ""}>(e=>{let t=e=>e&&e.hasAttribute&&(e.hasAttribute("data-hk")?e:t(e.host&&e.host instanceof Node?e.host:e.parentNode));["${eventNames.join('", "')}"].forEach((o=>document.addEventListener(o,(o=>{let s=o.composedPath&&o.composedPath()[0]||o.target,a=t(s);a&&!e.completed.has(a)&&e.events.push([a,o])}))))})(window._$HY||(_$HY={events:[],completed:new WeakSet,r:{},fe(){},init(e,t){_$HY.r[e]=[new Promise((e=>t=e)),t]},set(e,t,o){(o=_$HY.r[e])&&o[1](t),_$HY.r[e]=[t]},unset(e){delete _$HY.r[e]},load:e=>_$HY.r[e]}));</script><!--xs-->`;
+  return `<script${nonce ? ` nonce="${nonce}"` : ""}>(e=>{let t=e=>e&&e.hasAttribute&&(e.hasAttribute("data-hk")?e:t(e.host&&e.host.nodeType?e.host:e.parentNode));["${eventNames.join('", "')}"].forEach((o=>document.addEventListener(o,(o=>{let s=o.composedPath&&o.composedPath()[0]||o.target,a=t(s);a&&!e.completed.has(a)&&e.events.push([a,o])}))))})(window._$HY||(_$HY={events:[],completed:new WeakSet,r:{},fe(){},init(e,t){_$HY.r[e]=[new Promise((e=>t=e)),t]},set(e,t,o){(o=_$HY.r[e])&&o[1](t),_$HY.r[e]=[t]},unset(e){delete _$HY.r[e]},load:e=>_$HY.r[e]}));</script><!--xs-->`;
 }
 function Hydration(props) {
   if (!solidJs.sharedConfig.context.noHydrate) return props.children;
@@ -512,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/server.js

@@ -289,10 +289,10 @@ function ssrStyle(value) {
   return result;
 }
 function ssrElement(tag, props, children, needsId) {
-  let result = `<${tag}${needsId ? ssrHydrationKey() : ""} `;
-  const skipChildren = VOID_ELEMENTS.test(tag);
   if (props == null) props = {};else if (typeof props === "function") props = props();
+  const skipChildren = VOID_ELEMENTS.test(tag);
   const keys = Object.keys(props);
+  let result = `<${tag}${needsId ? ssrHydrationKey() : ""} `;
   let classResolved;
   for (let i = 0; i < keys.length; i++) {
     const prop = keys[i];
@@ -317,13 +317,12 @@ function ssrElement(tag, props, children, needsId) {
     }
     if (i !== keys.length - 1) result += " ";
   }
-  if (skipChildren) {
-    return {
-      t: result + "/>"
-    };
-  }
+  if (skipChildren) return {
+    t: result + "/>"
+  };
+  if (typeof children === "function") children = children();
   return {
-    t: result + `>${resolveSSRNode(children)}</${tag}>`
+    t: result + `>${resolveSSRNode(children, true)}</${tag}>`
   };
 }
 function ssrAttribute(key, value, isBoolean) {
@@ -379,7 +378,7 @@ function escape(s, attr) {
   }
   return left < s.length ? out + s.substring(left) : out;
 }
-function resolveSSRNode(node) {
+function resolveSSRNode(node, top) {
   const t = typeof node;
   if (t === "string") return node;
   if (node == null || t === "boolean") return "";
@@ -387,7 +386,7 @@ function resolveSSRNode(node) {
     let prev = {};
     let mapped = "";
     for (let i = 0, len = node.length; i < len; i++) {
-      if (typeof prev !== "object" && typeof node[i] !== "object") mapped += `<!--!$-->`;
+      if (!top && typeof prev !== "object" && typeof node[i] !== "object") mapped += `<!--!$-->`;
       mapped += resolveSSRNode(prev = node[i]);
     }
     return mapped;
@@ -413,7 +412,7 @@ function generateHydrationScript({
   eventNames = ["click", "input"],
   nonce
 } = {}) {
-  return `<script${nonce ? ` nonce="${nonce}"` : ""}>(e=>{let t=e=>e&&e.hasAttribute&&(e.hasAttribute("data-hk")?e:t(e.host&&e.host instanceof Node?e.host:e.parentNode));["${eventNames.join('", "')}"].forEach((o=>document.addEventListener(o,(o=>{let s=o.composedPath&&o.composedPath()[0]||o.target,a=t(s);a&&!e.completed.has(a)&&e.events.push([a,o])}))))})(window._$HY||(_$HY={events:[],completed:new WeakSet,r:{},fe(){},init(e,t){_$HY.r[e]=[new Promise((e=>t=e)),t]},set(e,t,o){(o=_$HY.r[e])&&o[1](t),_$HY.r[e]=[t]},unset(e){delete _$HY.r[e]},load:e=>_$HY.r[e]}));</script><!--xs-->`;
+  return `<script${nonce ? ` nonce="${nonce}"` : ""}>(e=>{let t=e=>e&&e.hasAttribute&&(e.hasAttribute("data-hk")?e:t(e.host&&e.host.nodeType?e.host:e.parentNode));["${eventNames.join('", "')}"].forEach((o=>document.addEventListener(o,(o=>{let s=o.composedPath&&o.composedPath()[0]||o.target,a=t(s);a&&!e.completed.has(a)&&e.events.push([a,o])}))))})(window._$HY||(_$HY={events:[],completed:new WeakSet,r:{},fe(){},init(e,t){_$HY.r[e]=[new Promise((e=>t=e)),t]},set(e,t,o){(o=_$HY.r[e])&&o[1](t),_$HY.r[e]=[t]},unset(e){delete _$HY.r[e]},load:e=>_$HY.r[e]}));</script><!--xs-->`;
 }
 function Hydration(props) {
   if (!sharedConfig.context.noHydrate) return props.children;
@@ -511,7 +510,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

@@ -457,7 +457,7 @@ function insertExpression(parent, value, current, marker, unwrapArray) {
       appendNodes(parent, array);
     }
     current = array;
-  } else if (value instanceof Node) {
+  } else if (value.nodeType) {
     if (solidJs.sharedConfig.context && value.parentNode) return current = multi ? [value] : value;
     if (Array.isArray(current)) {
       if (multi) return current = cleanChildren(parent, current, marker, value);
@@ -473,12 +473,13 @@ function normalizeIncomingArray(normalized, array, current, unwrap) {
   let dynamic = false;
   for (let i = 0, len = array.length; i < len; i++) {
     let item = array[i],
-      prev = current && current[i];
-    if (item instanceof Node) {
+      prev = current && current[i],
+      t;
+    if (item == null || item === true || item === false) ; else if ((t = typeof item) === "object" && item.nodeType) {
       normalized.push(item);
-    } else if (item == null || item === true || item === false) ; else if (Array.isArray(item)) {
+    } else if (Array.isArray(item)) {
       dynamic = normalizeIncomingArray(normalized, item, prev) || dynamic;
-    } else if ((typeof item) === "function") {
+    } else if (t === "function") {
       if (unwrap) {
         while (typeof item === "function") item = item();
         dynamic = normalizeIncomingArray(normalized, Array.isArray(item) ? item : [item], Array.isArray(prev) ? prev : [prev]) || dynamic;
@@ -488,10 +489,7 @@ function normalizeIncomingArray(normalized, array, current, unwrap) {
       }
     } else {
       const value = String(item);
-      if (prev && prev.nodeType === 3) {
-        prev.data = value;
-        normalized.push(prev);
-      } else normalized.push(document.createTextNode(value));
+      if (prev && prev.nodeType === 3 && prev.data === value) normalized.push(prev);else normalized.push(document.createTextNode(value));
     }
   }
   return dynamic;
@@ -575,7 +573,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 +599,8 @@ function Portal(props) {
       props.ref && props.ref(container);
       solidJs.onCleanup(() => el.removeChild(container));
     }
+  }, undefined, {
+    render: !hydrating
   });
   return marker;
 }

package/web/dist/web.js

@@ -456,7 +456,7 @@ function insertExpression(parent, value, current, marker, unwrapArray) {
       appendNodes(parent, array);
     }
     current = array;
-  } else if (value instanceof Node) {
+  } else if (value.nodeType) {
     if (sharedConfig.context && value.parentNode) return current = multi ? [value] : value;
     if (Array.isArray(current)) {
       if (multi) return current = cleanChildren(parent, current, marker, value);
@@ -472,12 +472,13 @@ function normalizeIncomingArray(normalized, array, current, unwrap) {
   let dynamic = false;
   for (let i = 0, len = array.length; i < len; i++) {
     let item = array[i],
-      prev = current && current[i];
-    if (item instanceof Node) {
+      prev = current && current[i],
+      t;
+    if (item == null || item === true || item === false) ; else if ((t = typeof item) === "object" && item.nodeType) {
       normalized.push(item);
-    } else if (item == null || item === true || item === false) ; else if (Array.isArray(item)) {
+    } else if (Array.isArray(item)) {
       dynamic = normalizeIncomingArray(normalized, item, prev) || dynamic;
-    } else if ((typeof item) === "function") {
+    } else if (t === "function") {
       if (unwrap) {
         while (typeof item === "function") item = item();
         dynamic = normalizeIncomingArray(normalized, Array.isArray(item) ? item : [item], Array.isArray(prev) ? prev : [prev]) || dynamic;
@@ -487,10 +488,7 @@ function normalizeIncomingArray(normalized, array, current, unwrap) {
       }
     } else {
       const value = String(item);
-      if (prev && prev.nodeType === 3) {
-        prev.data = value;
-        normalized.push(prev);
-      } else normalized.push(document.createTextNode(value));
+      if (prev && prev.nodeType === 3 && prev.data === value) normalized.push(prev);else normalized.push(document.createTextNode(value));
     }
   }
   return dynamic;
@@ -574,7 +572,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 +598,8 @@ function Portal(props) {
       props.ref && props.ref(container);
       onCleanup(() => el.removeChild(container));
     }
+  }, undefined, {
+    render: !hydrating
   });
   return marker;
 }