@solidjs/web 2.0.0-beta.11 → 2.0.0-beta.13

package/dist/dev.cjs

@@ -129,7 +129,6 @@ function render$1(code, element, init, options = {}) {
   if (!element) {
     throw new Error("The `element` passed to `render(..., element)` doesn't exist. Make sure `element` exists in the document.");
   }
-  const renderRoot = getChildRoot(element);
   let disposer;
   solidJs.createRoot(dispose => {
     disposer = dispose;
@@ -138,14 +137,14 @@ function render$1(code, element, init, options = {}) {
       effect(() => solidJs.flatten(tree), () => {});
     } else {
       const tree = code();
-      insert(element, () => tree, renderRoot.firstChild ? null : undefined, init, options.insertOptions);
+      insert(element, () => tree, element.firstChild ? null : undefined, init, options.insertOptions);
     }
   }, {
     id: options.renderId
   });
   return () => {
     disposer();
-    renderRoot.textContent = "";
+    element.textContent = "";
   };
 }
 function create(html, bypassGuard, flag) {
@@ -284,11 +283,10 @@ function ref(fn, element) {
   solidJs.runWithOwner(null, () => applyRef(resolved, element));
 }
 function insert(parent, accessor, marker, initial, options) {
-  const childRoot = getChildRoot(parent);
   const multi = marker !== undefined;
   if (multi && !initial) initial = [];
   if (isHydrating(parent)) {
-    if (!multi && initial === undefined && parent) initial = [...childRoot.childNodes];
+    if (!multi && initial === undefined && parent) initial = [...parent.childNodes];
     if (Array.isArray(initial)) {
       let j = 0;
       for (let i = 0; i < initial.length; i++) {
@@ -303,7 +301,7 @@ function insert(parent, accessor, marker, initial, options) {
   }
   if (multi && initial.length === 0) {
     const placeholder = document.createTextNode("");
-    childRoot.insertBefore(placeholder, marker);
+    parent.insertBefore(placeholder, marker);
     initial = [placeholder];
   }
   let current = initial;
@@ -358,7 +356,7 @@ function loadModuleAssets(mapping) {
   return pending.length ? Promise.all(pending).then(() => {}) : undefined;
 }
 function hydrate$1(code, element, options = {}) {
-  if (globalThis._$HY.done) return render$1(code, element, [...getChildRoot(element).childNodes], options);
+  if (globalThis._$HY.done) return render$1(code, element, [...element.childNodes], options);
   options.renderId ||= "";
   if (!globalThis._$HY.modules) globalThis._$HY.modules = {};
   if (!globalThis._$HY.loading) globalThis._$HY.loading = {};
@@ -404,7 +402,7 @@ function hydrate$1(code, element, options = {}) {
       let disposer;
       p.then(() => {
         try {
-          disposer = render$1(code, element, [...getChildRoot(element).childNodes], options);
+          disposer = render$1(code, element, [...element.childNodes], options);
         } finally {
           solidJs.sharedConfig.hydrating = false;
         }
@@ -416,7 +414,7 @@ function hydrate$1(code, element, options = {}) {
   }
   try {
     gatherHydratable(element, options.renderId);
-    return render$1(code, element, [...getChildRoot(element).childNodes], options);
+    return render$1(code, element, [...element.childNodes], options);
   } finally {
     solidJs.sharedConfig.hydrating = false;
   }
@@ -465,7 +463,7 @@ function getNextMarker(start) {
   return [end, current];
 }
 function getFirstChild(node, expectedTag) {
-  const child = getChildRoot(node).firstChild;
+  const child = node.firstChild;
   if (isHydrating() && expectedTag && child?.localName !== expectedTag) {
     const isMissing = !child || child.nodeType !== 1;
     console.warn("Hydration structure mismatch: expected <" + expectedTag + "> as first child of", node, "\n  " + describeSiblings(node, child, expectedTag, isMissing));
@@ -484,7 +482,7 @@ function getNextSibling(node, expectedTag) {
 function describeSiblings(parent, mismatchChild, expectedTag, isMissing) {
   if (!parent) return `<${expectedTag} \u2190 parent unavailable>`;
   const children = [];
-  let child = getChildRoot(parent).firstChild;
+  let child = parent.firstChild;
   while (child) {
     if (child.nodeType === 1) children.push(child);
     child = child.nextSibling;
@@ -534,9 +532,6 @@ function runHydrationEvents() {
 function isHydrating(node) {
   return solidJs.sharedConfig.hydrating && (!node || node.isConnected);
 }
-function getChildRoot(node) {
-  return node && node.localName === "template" ? node.content : node;
-}
 function classListToObject(classList) {
   if (Array.isArray(classList)) {
     const result = {};
@@ -571,11 +566,7 @@ function assignProp(node, prop, value, prev, skipRef, nodeName) {
     return value;
   }
   const hasNamespace = prop.indexOf(":") > -1;
-  if (hasNamespace && prop.slice(0, 3) === "on:") {
-    const e = prop.slice(3);
-    prev && node.removeEventListener(e, prev, typeof prev !== "function" && prev);
-    value && node.addEventListener(e, value, typeof value !== "function" && value);
-  } else if (!hasNamespace && prop.slice(0, 2) === "on") {
+  if (!hasNamespace && prop.slice(0, 2) === "on") {
     const name = prop.slice(2).toLowerCase();
     const delegate = DelegatedEvents.has(name);
     if (!delegate && prev) {
@@ -648,22 +639,21 @@ function eventHandler(e) {
 function insertExpression(parent, value, current, marker) {
   if (isHydrating(parent)) return;
   if (value === current) return;
-  const childRoot = getChildRoot(parent);
   const t = typeof value,
     multi = marker !== undefined;
   if (t === "string" || t === "number") {
     const tc = typeof current;
     if (tc === "string" || tc === "number") {
-      childRoot.firstChild.data = value;
-    } else childRoot.textContent = value;
+      parent.firstChild.data = value;
+    } else parent.textContent = value;
   } else if (value === undefined) {
     cleanChildren(parent, current, marker);
   } else if (value.nodeType) {
     if (Array.isArray(current)) {
       cleanChildren(parent, current, multi ? marker : null, value);
-    } else if (current === undefined || !childRoot.firstChild) {
-      childRoot.appendChild(value);
-    } else childRoot.replaceChild(value, childRoot.firstChild);
+    } else if (current === undefined || !parent.firstChild) {
+      parent.appendChild(value);
+    } else parent.replaceChild(value, parent.firstChild);
   } else if (Array.isArray(value)) {
     const currentArray = current && Array.isArray(current);
     if (value.length === 0) {
@@ -671,7 +661,7 @@ function insertExpression(parent, value, current, marker) {
     } else if (currentArray) {
       if (current.length === 0) {
         appendNodes(parent, value, marker);
-      } else reconcileArrays(childRoot, current, value);
+      } else reconcileArrays(parent, current, value);
     } else {
       current && cleanChildren(parent);
       appendNodes(parent, value);
@@ -696,11 +686,9 @@ function normalize(value, current, multi, doNotUnwrap) {
   return value;
 }
 function appendNodes(parent, array, marker = null) {
-  parent = getChildRoot(parent);
   for (let i = 0, len = array.length; i < len; i++) parent.insertBefore(array[i], marker);
 }
 function cleanChildren(parent, current, marker, replacement) {
-  parent = getChildRoot(parent);
   if (marker === undefined) return parent.textContent = "";
   if (current.length) {
     let inserted = false;

package/dist/dev.js

@@ -128,7 +128,6 @@ function render$1(code, element, init, options = {}) {
   if (!element) {
     throw new Error("The `element` passed to `render(..., element)` doesn't exist. Make sure `element` exists in the document.");
   }
-  const renderRoot = getChildRoot(element);
   let disposer;
   createRoot(dispose => {
     disposer = dispose;
@@ -137,14 +136,14 @@ function render$1(code, element, init, options = {}) {
       effect(() => flatten(tree), () => {});
     } else {
       const tree = code();
-      insert(element, () => tree, renderRoot.firstChild ? null : undefined, init, options.insertOptions);
+      insert(element, () => tree, element.firstChild ? null : undefined, init, options.insertOptions);
     }
   }, {
     id: options.renderId
   });
   return () => {
     disposer();
-    renderRoot.textContent = "";
+    element.textContent = "";
   };
 }
 function create(html, bypassGuard, flag) {
@@ -283,11 +282,10 @@ function ref(fn, element) {
   runWithOwner(null, () => applyRef(resolved, element));
 }
 function insert(parent, accessor, marker, initial, options) {
-  const childRoot = getChildRoot(parent);
   const multi = marker !== undefined;
   if (multi && !initial) initial = [];
   if (isHydrating(parent)) {
-    if (!multi && initial === undefined && parent) initial = [...childRoot.childNodes];
+    if (!multi && initial === undefined && parent) initial = [...parent.childNodes];
     if (Array.isArray(initial)) {
       let j = 0;
       for (let i = 0; i < initial.length; i++) {
@@ -302,7 +300,7 @@ function insert(parent, accessor, marker, initial, options) {
   }
   if (multi && initial.length === 0) {
     const placeholder = document.createTextNode("");
-    childRoot.insertBefore(placeholder, marker);
+    parent.insertBefore(placeholder, marker);
     initial = [placeholder];
   }
   let current = initial;
@@ -357,7 +355,7 @@ function loadModuleAssets(mapping) {
   return pending.length ? Promise.all(pending).then(() => {}) : undefined;
 }
 function hydrate$1(code, element, options = {}) {
-  if (globalThis._$HY.done) return render$1(code, element, [...getChildRoot(element).childNodes], options);
+  if (globalThis._$HY.done) return render$1(code, element, [...element.childNodes], options);
   options.renderId ||= "";
   if (!globalThis._$HY.modules) globalThis._$HY.modules = {};
   if (!globalThis._$HY.loading) globalThis._$HY.loading = {};
@@ -403,7 +401,7 @@ function hydrate$1(code, element, options = {}) {
       let disposer;
       p.then(() => {
         try {
-          disposer = render$1(code, element, [...getChildRoot(element).childNodes], options);
+          disposer = render$1(code, element, [...element.childNodes], options);
         } finally {
           sharedConfig.hydrating = false;
         }
@@ -415,7 +413,7 @@ function hydrate$1(code, element, options = {}) {
   }
   try {
     gatherHydratable(element, options.renderId);
-    return render$1(code, element, [...getChildRoot(element).childNodes], options);
+    return render$1(code, element, [...element.childNodes], options);
   } finally {
     sharedConfig.hydrating = false;
   }
@@ -464,7 +462,7 @@ function getNextMarker(start) {
   return [end, current];
 }
 function getFirstChild(node, expectedTag) {
-  const child = getChildRoot(node).firstChild;
+  const child = node.firstChild;
   if (isHydrating() && expectedTag && child?.localName !== expectedTag) {
     const isMissing = !child || child.nodeType !== 1;
     console.warn("Hydration structure mismatch: expected <" + expectedTag + "> as first child of", node, "\n  " + describeSiblings(node, child, expectedTag, isMissing));
@@ -483,7 +481,7 @@ function getNextSibling(node, expectedTag) {
 function describeSiblings(parent, mismatchChild, expectedTag, isMissing) {
   if (!parent) return `<${expectedTag} \u2190 parent unavailable>`;
   const children = [];
-  let child = getChildRoot(parent).firstChild;
+  let child = parent.firstChild;
   while (child) {
     if (child.nodeType === 1) children.push(child);
     child = child.nextSibling;
@@ -533,9 +531,6 @@ function runHydrationEvents() {
 function isHydrating(node) {
   return sharedConfig.hydrating && (!node || node.isConnected);
 }
-function getChildRoot(node) {
-  return node && node.localName === "template" ? node.content : node;
-}
 function classListToObject(classList) {
   if (Array.isArray(classList)) {
     const result = {};
@@ -570,11 +565,7 @@ function assignProp(node, prop, value, prev, skipRef, nodeName) {
     return value;
   }
   const hasNamespace = prop.indexOf(":") > -1;
-  if (hasNamespace && prop.slice(0, 3) === "on:") {
-    const e = prop.slice(3);
-    prev && node.removeEventListener(e, prev, typeof prev !== "function" && prev);
-    value && node.addEventListener(e, value, typeof value !== "function" && value);
-  } else if (!hasNamespace && prop.slice(0, 2) === "on") {
+  if (!hasNamespace && prop.slice(0, 2) === "on") {
     const name = prop.slice(2).toLowerCase();
     const delegate = DelegatedEvents.has(name);
     if (!delegate && prev) {
@@ -647,22 +638,21 @@ function eventHandler(e) {
 function insertExpression(parent, value, current, marker) {
   if (isHydrating(parent)) return;
   if (value === current) return;
-  const childRoot = getChildRoot(parent);
   const t = typeof value,
     multi = marker !== undefined;
   if (t === "string" || t === "number") {
     const tc = typeof current;
     if (tc === "string" || tc === "number") {
-      childRoot.firstChild.data = value;
-    } else childRoot.textContent = value;
+      parent.firstChild.data = value;
+    } else parent.textContent = value;
   } else if (value === undefined) {
     cleanChildren(parent, current, marker);
   } else if (value.nodeType) {
     if (Array.isArray(current)) {
       cleanChildren(parent, current, multi ? marker : null, value);
-    } else if (current === undefined || !childRoot.firstChild) {
-      childRoot.appendChild(value);
-    } else childRoot.replaceChild(value, childRoot.firstChild);
+    } else if (current === undefined || !parent.firstChild) {
+      parent.appendChild(value);
+    } else parent.replaceChild(value, parent.firstChild);
   } else if (Array.isArray(value)) {
     const currentArray = current && Array.isArray(current);
     if (value.length === 0) {
@@ -670,7 +660,7 @@ function insertExpression(parent, value, current, marker) {
     } else if (currentArray) {
       if (current.length === 0) {
         appendNodes(parent, value, marker);
-      } else reconcileArrays(childRoot, current, value);
+      } else reconcileArrays(parent, current, value);
     } else {
       current && cleanChildren(parent);
       appendNodes(parent, value);
@@ -695,11 +685,9 @@ function normalize(value, current, multi, doNotUnwrap) {
   return value;
 }
 function appendNodes(parent, array, marker = null) {
-  parent = getChildRoot(parent);
   for (let i = 0, len = array.length; i < len; i++) parent.insertBefore(array[i], marker);
 }
 function cleanChildren(parent, current, marker, replacement) {
-  parent = getChildRoot(parent);
   if (marker === undefined) return parent.textContent = "";
   if (current.length) {
     let inserted = false;

package/dist/server.cjs

@@ -617,6 +617,19 @@ function ssrFirstGroupHit(hole) {
     return buildAsyncWrap(err, hole);
   }
 }
+function tryResolveFunctionHole(hole) {
+  let value;
+  try {
+    value = hole();
+  } catch (err) {
+    return buildAsyncWrap(err, hole) || "";
+  }
+  const t = typeof value;
+  if (t === "string") return value;
+  if (t === "number") return "" + value;
+  if (value == null || t === "boolean") return "";
+  return tryResolveString(value);
+}
 function mergeTemplateInto(result, node) {
   result.t[result.t.length - 1] += node.t[0];
   if (node.t.length > 1) {
@@ -625,6 +638,13 @@ function mergeTemplateInto(result, node) {
     result.p.push(...node.p);
   }
 }
+function appendResolvedNode(result, node) {
+  if (node.fn !== undefined) {
+    result.h.push(node.fn);
+    result.p.push(node.p);
+    result.t.push("");
+  } else if (node.merge !== undefined) mergeTemplateInto(result, node.merge);else resolveSSRNode(node.bail, result);
+}
 let _lastGroupFn = null;
 let _lastGroupArr = null;
 let _lastGroupErr = null;
@@ -715,6 +735,17 @@ function ssr(t) {
       }
     } else if (result !== null) {
       resolveSSRNode(hole, result);
+    } else if (ht === "function") {
+      const r = tryResolveFunctionHole(hole);
+      if (typeof r === "string") s += r;else {
+        result = {
+          t: [s],
+          h: [],
+          p: []
+        };
+        s = "";
+        appendResolvedNode(result, r);
+      }
     } else {
       const r = tryResolveString(hole);
       if (typeof r === "string") {
@@ -726,11 +757,7 @@ function ssr(t) {
           p: []
         };
         s = "";
-        if (r.fn !== undefined) {
-          result.h.push(r.fn);
-          result.p.push(r.p);
-          result.t.push("");
-        } else if (r.merge !== undefined) mergeTemplateInto(result, r.merge);else resolveSSRNode(r.bail, result);
+        appendResolvedNode(result, r);
       }
     }
     const next = t[i];
@@ -820,6 +847,8 @@ function escape(s, attr) {
   const t = typeof s;
   if (t !== "string") {
     if (!attr && Array.isArray(s)) {
+      const joined = tryJoinPlainSSRArray(s);
+      if (joined !== undefined) return joined;
       s = s.slice();
       for (let i = 0; i < s.length; i++) s[i] = escape(s[i]);
       return s;
@@ -872,6 +901,18 @@ function escapeSlow(s, attr, start) {
   }
   return left < s.length ? out + s.substring(left) : out;
 }
+function tryJoinPlainSSRArray(nodes) {
+  if (nodes.length === 0) return undefined;
+  let out = "";
+  for (let i = 0, len = nodes.length; i < len; i++) {
+    const node = nodes[i];
+    if (node == null || typeof node !== "object" || node.h || typeof node.t !== "string") {
+      return undefined;
+    }
+    out += node.t;
+  }
+  return out;
+}
 function mergeProps(...sources) {
   const target = {};
   for (let i = 0; i < sources.length; i++) {
@@ -1020,6 +1061,8 @@ function tryResolveString(node) {
   if (node == null || t === "boolean") return "";
   if (t === "object") {
     if (Array.isArray(node)) {
+      const joined = tryJoinPlainSSRArray(node);
+      if (joined !== undefined) return joined;
       let s = "";
       let prevNonObj = false;
       for (let i = 0, len = node.length; i < len; i++) {

package/dist/server.js

@@ -616,6 +616,19 @@ function ssrFirstGroupHit(hole) {
     return buildAsyncWrap(err, hole);
   }
 }
+function tryResolveFunctionHole(hole) {
+  let value;
+  try {
+    value = hole();
+  } catch (err) {
+    return buildAsyncWrap(err, hole) || "";
+  }
+  const t = typeof value;
+  if (t === "string") return value;
+  if (t === "number") return "" + value;
+  if (value == null || t === "boolean") return "";
+  return tryResolveString(value);
+}
 function mergeTemplateInto(result, node) {
   result.t[result.t.length - 1] += node.t[0];
   if (node.t.length > 1) {
@@ -624,6 +637,13 @@ function mergeTemplateInto(result, node) {
     result.p.push(...node.p);
   }
 }
+function appendResolvedNode(result, node) {
+  if (node.fn !== undefined) {
+    result.h.push(node.fn);
+    result.p.push(node.p);
+    result.t.push("");
+  } else if (node.merge !== undefined) mergeTemplateInto(result, node.merge);else resolveSSRNode(node.bail, result);
+}
 let _lastGroupFn = null;
 let _lastGroupArr = null;
 let _lastGroupErr = null;
@@ -714,6 +734,17 @@ function ssr(t) {
       }
     } else if (result !== null) {
       resolveSSRNode(hole, result);
+    } else if (ht === "function") {
+      const r = tryResolveFunctionHole(hole);
+      if (typeof r === "string") s += r;else {
+        result = {
+          t: [s],
+          h: [],
+          p: []
+        };
+        s = "";
+        appendResolvedNode(result, r);
+      }
     } else {
       const r = tryResolveString(hole);
       if (typeof r === "string") {
@@ -725,11 +756,7 @@ function ssr(t) {
           p: []
         };
         s = "";
-        if (r.fn !== undefined) {
-          result.h.push(r.fn);
-          result.p.push(r.p);
-          result.t.push("");
-        } else if (r.merge !== undefined) mergeTemplateInto(result, r.merge);else resolveSSRNode(r.bail, result);
+        appendResolvedNode(result, r);
       }
     }
     const next = t[i];
@@ -819,6 +846,8 @@ function escape(s, attr) {
   const t = typeof s;
   if (t !== "string") {
     if (!attr && Array.isArray(s)) {
+      const joined = tryJoinPlainSSRArray(s);
+      if (joined !== undefined) return joined;
       s = s.slice();
       for (let i = 0; i < s.length; i++) s[i] = escape(s[i]);
       return s;
@@ -871,6 +900,18 @@ function escapeSlow(s, attr, start) {
   }
   return left < s.length ? out + s.substring(left) : out;
 }
+function tryJoinPlainSSRArray(nodes) {
+  if (nodes.length === 0) return undefined;
+  let out = "";
+  for (let i = 0, len = nodes.length; i < len; i++) {
+    const node = nodes[i];
+    if (node == null || typeof node !== "object" || node.h || typeof node.t !== "string") {
+      return undefined;
+    }
+    out += node.t;
+  }
+  return out;
+}
 function mergeProps(...sources) {
   const target = {};
   for (let i = 0; i < sources.length; i++) {
@@ -1019,6 +1060,8 @@ function tryResolveString(node) {
   if (node == null || t === "boolean") return "";
   if (t === "object") {
     if (Array.isArray(node)) {
+      const joined = tryJoinPlainSSRArray(node);
+      if (joined !== undefined) return joined;
       let s = "";
       let prevNonObj = false;
       for (let i = 0, len = node.length; i < len; i++) {

package/dist/web.cjs

@@ -126,7 +126,6 @@ function reconcileArrays(parentNode, a, b) {
 const $$EVENTS = "_$DX_DELEGATE";
 const INNER_OWNED = {};
 function render$1(code, element, init, options = {}) {
-  const renderRoot = getChildRoot(element);
   let disposer;
   solidJs.createRoot(dispose => {
     disposer = dispose;
@@ -135,14 +134,14 @@ function render$1(code, element, init, options = {}) {
       effect(() => solidJs.flatten(tree), () => {});
     } else {
       const tree = code();
-      insert(element, () => tree, renderRoot.firstChild ? null : undefined, init, options.insertOptions);
+      insert(element, () => tree, element.firstChild ? null : undefined, init, options.insertOptions);
     }
   }, {
     id: options.renderId
   });
   return () => {
     disposer();
-    renderRoot.textContent = "";
+    element.textContent = "";
   };
 }
 function create(html, bypassGuard, flag) {
@@ -279,11 +278,10 @@ function ref(fn, element) {
   solidJs.runWithOwner(null, () => applyRef(resolved, element));
 }
 function insert(parent, accessor, marker, initial, options) {
-  const childRoot = getChildRoot(parent);
   const multi = marker !== undefined;
   if (multi && !initial) initial = [];
   if (isHydrating(parent)) {
-    if (!multi && initial === undefined && parent) initial = [...childRoot.childNodes];
+    if (!multi && initial === undefined && parent) initial = [...parent.childNodes];
     if (Array.isArray(initial)) {
       let j = 0;
       for (let i = 0; i < initial.length; i++) {
@@ -298,7 +296,7 @@ function insert(parent, accessor, marker, initial, options) {
   }
   if (multi && initial.length === 0) {
     const placeholder = document.createTextNode("");
-    childRoot.insertBefore(placeholder, marker);
+    parent.insertBefore(placeholder, marker);
     initial = [placeholder];
   }
   let current = initial;
@@ -353,7 +351,7 @@ function loadModuleAssets(mapping) {
   return pending.length ? Promise.all(pending).then(() => {}) : undefined;
 }
 function hydrate$1(code, element, options = {}) {
-  if (globalThis._$HY.done) return render$1(code, element, [...getChildRoot(element).childNodes], options);
+  if (globalThis._$HY.done) return render$1(code, element, [...element.childNodes], options);
   options.renderId ||= "";
   if (!globalThis._$HY.modules) globalThis._$HY.modules = {};
   if (!globalThis._$HY.loading) globalThis._$HY.loading = {};
@@ -389,7 +387,7 @@ function hydrate$1(code, element, options = {}) {
       let disposer;
       p.then(() => {
         try {
-          disposer = render$1(code, element, [...getChildRoot(element).childNodes], options);
+          disposer = render$1(code, element, [...element.childNodes], options);
         } finally {
           solidJs.sharedConfig.hydrating = false;
         }
@@ -401,7 +399,7 @@ function hydrate$1(code, element, options = {}) {
   }
   try {
     gatherHydratable(element, options.renderId);
-    return render$1(code, element, [...getChildRoot(element).childNodes], options);
+    return render$1(code, element, [...element.childNodes], options);
   } finally {
     solidJs.sharedConfig.hydrating = false;
   }
@@ -444,7 +442,7 @@ function getNextMarker(start) {
   return [end, current];
 }
 function getFirstChild(node, expectedTag) {
-  const child = getChildRoot(node).firstChild;
+  const child = node.firstChild;
   return child;
 }
 function getNextSibling(node, expectedTag) {
@@ -477,9 +475,6 @@ function runHydrationEvents() {
 function isHydrating(node) {
   return solidJs.sharedConfig.hydrating && (!node || node.isConnected);
 }
-function getChildRoot(node) {
-  return node && node.localName === "template" ? node.content : node;
-}
 function classListToObject(classList) {
   if (Array.isArray(classList)) {
     const result = {};
@@ -514,11 +509,7 @@ function assignProp(node, prop, value, prev, skipRef, nodeName) {
     return value;
   }
   const hasNamespace = prop.indexOf(":") > -1;
-  if (hasNamespace && prop.slice(0, 3) === "on:") {
-    const e = prop.slice(3);
-    prev && node.removeEventListener(e, prev, typeof prev !== "function" && prev);
-    value && node.addEventListener(e, value, typeof value !== "function" && value);
-  } else if (!hasNamespace && prop.slice(0, 2) === "on") {
+  if (!hasNamespace && prop.slice(0, 2) === "on") {
     const name = prop.slice(2).toLowerCase();
     const delegate = DelegatedEvents.has(name);
     if (!delegate && prev) {
@@ -591,22 +582,21 @@ function eventHandler(e) {
 function insertExpression(parent, value, current, marker) {
   if (isHydrating(parent)) return;
   if (value === current) return;
-  const childRoot = getChildRoot(parent);
   const t = typeof value,
     multi = marker !== undefined;
   if (t === "string" || t === "number") {
     const tc = typeof current;
     if (tc === "string" || tc === "number") {
-      childRoot.firstChild.data = value;
-    } else childRoot.textContent = value;
+      parent.firstChild.data = value;
+    } else parent.textContent = value;
   } else if (value === undefined) {
     cleanChildren(parent, current, marker);
   } else if (value.nodeType) {
     if (Array.isArray(current)) {
       cleanChildren(parent, current, multi ? marker : null, value);
-    } else if (current === undefined || !childRoot.firstChild) {
-      childRoot.appendChild(value);
-    } else childRoot.replaceChild(value, childRoot.firstChild);
+    } else if (current === undefined || !parent.firstChild) {
+      parent.appendChild(value);
+    } else parent.replaceChild(value, parent.firstChild);
   } else if (Array.isArray(value)) {
     const currentArray = current && Array.isArray(current);
     if (value.length === 0) {
@@ -614,7 +604,7 @@ function insertExpression(parent, value, current, marker) {
     } else if (currentArray) {
       if (current.length === 0) {
         appendNodes(parent, value, marker);
-      } else reconcileArrays(childRoot, current, value);
+      } else reconcileArrays(parent, current, value);
     } else {
       current && cleanChildren(parent);
       appendNodes(parent, value);
@@ -639,11 +629,9 @@ function normalize(value, current, multi, doNotUnwrap) {
   return value;
 }
 function appendNodes(parent, array, marker = null) {
-  parent = getChildRoot(parent);
   for (let i = 0, len = array.length; i < len; i++) parent.insertBefore(array[i], marker);
 }
 function cleanChildren(parent, current, marker, replacement) {
-  parent = getChildRoot(parent);
   if (marker === undefined) return parent.textContent = "";
   if (current.length) {
     let inserted = false;