solid-js 1.6.8 → 1.6.10

package/types/reactive/signal.d.ts

@@ -13,8 +13,12 @@ declare global {
     var _$afterCreateRoot: ((root: Owner) => void) | undefined;
 }
 export declare type ComputationState = 0 | 1 | 2;
-export interface SignalState<T> {
-    value?: T;
+export interface SourceMapValue {
+    value: unknown;
+    graph?: Owner;
+}
+export interface SignalState<T> extends SourceMapValue {
+    value: T;
     observers: Computation<any>[] | null;
     observerSlots: number[] | null;
     tValue?: T;
@@ -26,9 +30,7 @@ export interface Owner {
     cleanups: (() => void)[] | null;
     owner: Owner | null;
     context: any | null;
-    sourceMap?: Record<string, {
-        value: unknown;
-    }>;
+    sourceMap?: Record<string, SourceMapValue>;
     name?: string;
     componentName?: string;
 }
@@ -175,6 +177,7 @@ export declare function createEffect<Next, Init = Next>(fn: EffectFunction<Init
  */
 export declare function createReaction(onInvalidate: () => void, options?: EffectOptions): (tracking: () => void) => void;
 export interface Memo<Prev, Next = Prev> extends SignalState<Next>, Computation<Next> {
+    value: Next;
     tOwned?: Computation<Prev | Next, Next>[];
 }
 export interface MemoOptions<T> extends EffectOptions {
@@ -409,9 +412,11 @@ export declare function onMount(fn: () => void): void;
  * onCleanup - run an effect once before the reactive scope is disposed
  * @param fn an effect that should run only once on cleanup
  *
+ * @returns the same {@link fn} function that was passed in
+ *
  * @description https://www.solidjs.com/docs/latest/api#oncleanup
  */
-export declare function onCleanup(fn: () => void): () => void;
+export declare function onCleanup<T extends () => any>(fn: T): T;
 /**
  * onError - run an effect whenever an error is thrown within the context of the child scopes
  * @param fn an error handler that receives the error
@@ -451,9 +456,7 @@ export interface DevComponent<T> extends Memo<JSX.Element> {
 }
 export declare function devComponent<T>(Comp: (props: T) => JSX.Element, props: T): JSX.Element;
 export declare function hashValue(v: any): string;
-export declare function registerGraph(name: string, value: {
-    value: unknown;
-}): string;
+export declare function registerGraph(name: string, value: SourceMapValue): string;
 interface GraphRecord {
     [k: string]: GraphRecord | unknown;
 }

package/types/render/Suspense.d.ts

@@ -2,7 +2,7 @@ import type { JSX } from "../jsx.js";
 /**
  * **[experimental]** controls the order in which suspended content is rendered
  *
- * @description https://www.solidjs.com/docs/latest/api#%3Csuspenselist%3E-(experimental)
+ * @description https://www.solidjs.com/docs/latest/api#suspenselist-experimental
  */
 export declare function SuspenseList(props: {
     children: JSX.Element;
@@ -18,7 +18,7 @@ export declare function SuspenseList(props: {
  *   <AsyncComponent />
  * </Suspense>
  * ```
- * @description https://www.solidjs.com/docs/latest/api#%3Csuspense%3E
+ * @description https://www.solidjs.com/docs/latest/api#suspense
  */
 export declare function Suspense(props: {
     fallback?: JSX.Element;

package/types/render/flow.d.ts

@@ -11,7 +11,7 @@ import type { JSX } from "../jsx.js";
  * ```
  * If you have a list with fixed indices and changing values, consider using `<Index>` instead.
  *
- * @description https://www.solidjs.com/docs/latest/api#%3Cfor%3E
+ * @description https://www.solidjs.com/docs/latest/api#for
  */
 export declare function For<T extends readonly any[], U extends JSX.Element>(props: {
     each: T | undefined | null | false;
@@ -29,7 +29,7 @@ export declare function For<T extends readonly any[], U extends JSX.Element>(pro
  * ```
  * If you have a list with changing indices, better use `<For>`.
  *
- * @description https://www.solidjs.com/docs/latest/api#%3Cindex%3E
+ * @description https://www.solidjs.com/docs/latest/api#index
  */
 export declare function Index<T extends readonly any[], U extends JSX.Element>(props: {
     each: T | undefined | null | false;
@@ -38,7 +38,7 @@ export declare function Index<T extends readonly any[], U extends JSX.Element>(p
 }): Accessor<U[]>;
 /**
  * Conditionally render its children or an optional fallback component
- * @description https://www.solidjs.com/docs/latest/api#%3Cshow%3E
+ * @description https://www.solidjs.com/docs/latest/api#show
  */
 export declare function Show<T>(props: {
     when: T | undefined | null | false;
@@ -64,7 +64,7 @@ export declare function Show<T>(props: {
  *   </Match>
  * </Switch>
  * ```
- * @description https://www.solidjs.com/docs/latest/api#%3Cswitch%3E%2F%3Cmatch%3E
+ * @description https://www.solidjs.com/docs/latest/api#switchmatch
  */
 export declare function Switch(props: {
     fallback?: JSX.Element;
@@ -82,7 +82,7 @@ export declare type MatchProps<T> = {
  *   <Content/>
  * </Match>
  * ```
- * @description https://www.solidjs.com/docs/latest/api#%3Cswitch%3E%2F%3Cmatch%3E
+ * @description https://www.solidjs.com/docs/latest/api#switchmatch
  */
 export declare function Match<T>(props: {
     when: T | undefined | null | false;
@@ -108,7 +108,7 @@ export declare function resetErrorBoundaries(): void;
  * ```
  * Errors thrown from the fallback can be caught by a parent ErrorBoundary
  *
- * @description https://www.solidjs.com/docs/latest/api#%3Cerrorboundary%3E
+ * @description https://www.solidjs.com/docs/latest/api#errorboundary
  */
 export declare function ErrorBoundary(props: {
     fallback: JSX.Element | ((err: any, reset: () => void) => JSX.Element);

package/universal/dist/dev.cjs

@@ -23,7 +23,7 @@ function createRenderer$1({
     while (typeof current === "function") current = current();
     if (value === current) return current;
     const t = typeof value,
-          multi = marker !== undefined;
+      multi = marker !== undefined;
     if (t === "string" || t === "number") {
       if (t === "number") value = value.toString();
       if (multi) {
@@ -85,7 +85,7 @@ function createRenderer$1({
     let dynamic = false;
     for (let i = 0, len = array.length; i < len; i++) {
       let item = array[i],
-          t;
+        t;
       if (item == null || item === true || item === false) ; else if (Array.isArray(item)) {
         dynamic = normalizeIncomingArray(normalized, item) || dynamic;
       } else if ((t = typeof item) === "string" || t === "number") {
@@ -104,12 +104,12 @@ function createRenderer$1({
   }
   function reconcileArrays(parentNode, a, b) {
     let bLength = b.length,
-        aEnd = a.length,
-        bEnd = bLength,
-        aStart = 0,
-        bStart = 0,
-        after = getNextSibling(a[aEnd - 1]),
-        map = null;
+      aEnd = a.length,
+      bEnd = bLength,
+      aStart = 0,
+      bStart = 0,
+      after = getNextSibling(a[aEnd - 1]),
+      map = null;
     while (aStart < aEnd || bStart < bEnd) {
       if (a[aStart] === b[bStart]) {
         aStart++;
@@ -143,8 +143,8 @@ function createRenderer$1({
         if (index != null) {
           if (bStart < index && index < bEnd) {
             let i = aStart,
-                sequence = 1,
-                t;
+              sequence = 1,
+              t;
             while (++i < aEnd && i < bEnd) {
               if ((t = map.get(a[i])) == null || t !== index + sequence) break;
               sequence++;

package/universal/dist/dev.js

@@ -21,7 +21,7 @@ function createRenderer$1({
     while (typeof current === "function") current = current();
     if (value === current) return current;
     const t = typeof value,
-          multi = marker !== undefined;
+      multi = marker !== undefined;
     if (t === "string" || t === "number") {
       if (t === "number") value = value.toString();
       if (multi) {
@@ -83,7 +83,7 @@ function createRenderer$1({
     let dynamic = false;
     for (let i = 0, len = array.length; i < len; i++) {
       let item = array[i],
-          t;
+        t;
       if (item == null || item === true || item === false) ; else if (Array.isArray(item)) {
         dynamic = normalizeIncomingArray(normalized, item) || dynamic;
       } else if ((t = typeof item) === "string" || t === "number") {
@@ -102,12 +102,12 @@ function createRenderer$1({
   }
   function reconcileArrays(parentNode, a, b) {
     let bLength = b.length,
-        aEnd = a.length,
-        bEnd = bLength,
-        aStart = 0,
-        bStart = 0,
-        after = getNextSibling(a[aEnd - 1]),
-        map = null;
+      aEnd = a.length,
+      bEnd = bLength,
+      aStart = 0,
+      bStart = 0,
+      after = getNextSibling(a[aEnd - 1]),
+      map = null;
     while (aStart < aEnd || bStart < bEnd) {
       if (a[aStart] === b[bStart]) {
         aStart++;
@@ -141,8 +141,8 @@ function createRenderer$1({
         if (index != null) {
           if (bStart < index && index < bEnd) {
             let i = aStart,
-                sequence = 1,
-                t;
+              sequence = 1,
+              t;
             while (++i < aEnd && i < bEnd) {
               if ((t = map.get(a[i])) == null || t !== index + sequence) break;
               sequence++;

package/universal/dist/universal.cjs

@@ -23,7 +23,7 @@ function createRenderer$1({
     while (typeof current === "function") current = current();
     if (value === current) return current;
     const t = typeof value,
-          multi = marker !== undefined;
+      multi = marker !== undefined;
     if (t === "string" || t === "number") {
       if (t === "number") value = value.toString();
       if (multi) {
@@ -85,7 +85,7 @@ function createRenderer$1({
     let dynamic = false;
     for (let i = 0, len = array.length; i < len; i++) {
       let item = array[i],
-          t;
+        t;
       if (item == null || item === true || item === false) ; else if (Array.isArray(item)) {
         dynamic = normalizeIncomingArray(normalized, item) || dynamic;
       } else if ((t = typeof item) === "string" || t === "number") {
@@ -104,12 +104,12 @@ function createRenderer$1({
   }
   function reconcileArrays(parentNode, a, b) {
     let bLength = b.length,
-        aEnd = a.length,
-        bEnd = bLength,
-        aStart = 0,
-        bStart = 0,
-        after = getNextSibling(a[aEnd - 1]),
-        map = null;
+      aEnd = a.length,
+      bEnd = bLength,
+      aStart = 0,
+      bStart = 0,
+      after = getNextSibling(a[aEnd - 1]),
+      map = null;
     while (aStart < aEnd || bStart < bEnd) {
       if (a[aStart] === b[bStart]) {
         aStart++;
@@ -143,8 +143,8 @@ function createRenderer$1({
         if (index != null) {
           if (bStart < index && index < bEnd) {
             let i = aStart,
-                sequence = 1,
-                t;
+              sequence = 1,
+              t;
             while (++i < aEnd && i < bEnd) {
               if ((t = map.get(a[i])) == null || t !== index + sequence) break;
               sequence++;

package/universal/dist/universal.js

@@ -21,7 +21,7 @@ function createRenderer$1({
     while (typeof current === "function") current = current();
     if (value === current) return current;
     const t = typeof value,
-          multi = marker !== undefined;
+      multi = marker !== undefined;
     if (t === "string" || t === "number") {
       if (t === "number") value = value.toString();
       if (multi) {
@@ -83,7 +83,7 @@ function createRenderer$1({
     let dynamic = false;
     for (let i = 0, len = array.length; i < len; i++) {
       let item = array[i],
-          t;
+        t;
       if (item == null || item === true || item === false) ; else if (Array.isArray(item)) {
         dynamic = normalizeIncomingArray(normalized, item) || dynamic;
       } else if ((t = typeof item) === "string" || t === "number") {
@@ -102,12 +102,12 @@ function createRenderer$1({
   }
   function reconcileArrays(parentNode, a, b) {
     let bLength = b.length,
-        aEnd = a.length,
-        bEnd = bLength,
-        aStart = 0,
-        bStart = 0,
-        after = getNextSibling(a[aEnd - 1]),
-        map = null;
+      aEnd = a.length,
+      bEnd = bLength,
+      aStart = 0,
+      bStart = 0,
+      after = getNextSibling(a[aEnd - 1]),
+      map = null;
     while (aStart < aEnd || bStart < bEnd) {
       if (a[aStart] === b[bStart]) {
         aStart++;
@@ -141,8 +141,8 @@ function createRenderer$1({
         if (index != null) {
           if (bStart < index && index < bEnd) {
             let i = aStart,
-                sequence = 1,
-                t;
+              sequence = 1,
+              t;
             while (++i < aEnd && i < bEnd) {
               if ((t = map.get(a[i])) == null || t !== index + sequence) break;
               sequence++;

package/web/dist/dev.cjs

@@ -31,12 +31,12 @@ const DOMElements = /*#__PURE__*/new Set(["html", "base", "head", "link", "meta"
 
 function reconcileArrays(parentNode, a, b) {
   let bLength = b.length,
-      aEnd = a.length,
-      bEnd = bLength,
-      aStart = 0,
-      bStart = 0,
-      after = a[aEnd - 1].nextSibling,
-      map = null;
+    aEnd = a.length,
+    bEnd = bLength,
+    aStart = 0,
+    bStart = 0,
+    after = a[aEnd - 1].nextSibling,
+    map = null;
   while (aStart < aEnd || bStart < bEnd) {
     if (a[aStart] === b[bStart]) {
       aStart++;
@@ -70,8 +70,8 @@ function reconcileArrays(parentNode, a, b) {
       if (index != null) {
         if (bStart < index && index < bEnd) {
           let i = aStart,
-              sequence = 1,
-              t;
+            sequence = 1,
+            t;
           while (++i < aEnd && i < bEnd) {
             if ((t = map.get(a[i])) == null || t !== index + sequence) break;
             sequence++;
@@ -144,7 +144,7 @@ function addEventListener(node, name, handler, delegate) {
 }
 function classList(node, value, prev = {}) {
   const classKeys = Object.keys(value || {}),
-        prevKeys = Object.keys(prev);
+    prevKeys = Object.keys(prev);
   let i, len;
   for (i = 0, len = prevKeys.length; i < len; i++) {
     const key = prevKeys[i];
@@ -154,7 +154,7 @@ function classList(node, value, prev = {}) {
   }
   for (i = 0, len = classKeys.length; i < len; i++) {
     const key = classKeys[i],
-          classValue = !!value[key];
+      classValue = !!value[key];
     if (!key || key === "undefined" || prev[key] === classValue || !classValue) continue;
     toggleClassKey(node, key, true);
     prev[key] = classValue;
@@ -261,8 +261,8 @@ function getNextMatch(el, nodeName) {
 }
 function getNextMarker(start) {
   let end = start,
-      count = 0,
-      current = [];
+    count = 0,
+    current = [];
   if (solidJs.sharedConfig.context) {
     while (end) {
       if (end.nodeType === 8) {
@@ -354,7 +354,14 @@ function eventHandler(e) {
   });
   if (solidJs.sharedConfig.registry && !solidJs.sharedConfig.done) {
     solidJs.sharedConfig.done = true;
-    document.querySelectorAll("[id^=pl-]").forEach(elem => elem.remove());
+    document.querySelectorAll("[id^=pl-]").forEach(elem => {
+      while (elem && elem.nodeType !== 8 && elem.nodeValue !== "pl-" + e) {
+        let x = elem.nextSibling;
+        elem.remove();
+        elem = x;
+      }
+      elem && elem.remove();
+    });
   }
   while (node) {
     const handler = node[key];
@@ -371,7 +378,7 @@ function insertExpression(parent, value, current, marker, unwrapArray) {
   while (typeof current === "function") current = current();
   if (value === current) return current;
   const t = typeof value,
-        multi = marker !== undefined;
+    multi = marker !== undefined;
   parent = multi && current[0] && current[0].parentNode || parent;
   if (t === "string" || t === "number") {
     if (solidJs.sharedConfig.context) return current;
@@ -438,7 +445,7 @@ 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];
+      prev = current && current[i];
     if (item instanceof Node) {
       normalized.push(item);
     } else if (item == null || item === true || item === false) ; else if (Array.isArray(item)) {
@@ -532,10 +539,10 @@ const hydrate = (...args) => {
 };
 function Portal(props) {
   const {
-    useShadow
-  } = props,
-        marker = document.createTextNode(""),
-        mount = props.mount || document.body;
+      useShadow
+    } = props,
+    marker = document.createTextNode(""),
+    mount = props.mount || document.body;
   function renderPortal() {
     if (solidJs.sharedConfig.context) {
       const [s, set] = solidJs.createSignal(false);
@@ -552,9 +559,9 @@ function Portal(props) {
     });
   } else {
     const container = createElement(props.isSVG ? "g" : "div", props.isSVG),
-          renderRoot = useShadow && container.attachShadow ? container.attachShadow({
-      mode: "open"
-    }) : container;
+      renderRoot = useShadow && container.attachShadow ? container.attachShadow({
+        mode: "open"
+      }) : container;
     Object.defineProperty(container, "_$host", {
       get() {
         return marker.parentNode;

package/web/dist/dev.js

@@ -30,12 +30,12 @@ const DOMElements = /*#__PURE__*/new Set(["html", "base", "head", "link", "meta"
 
 function reconcileArrays(parentNode, a, b) {
   let bLength = b.length,
-      aEnd = a.length,
-      bEnd = bLength,
-      aStart = 0,
-      bStart = 0,
-      after = a[aEnd - 1].nextSibling,
-      map = null;
+    aEnd = a.length,
+    bEnd = bLength,
+    aStart = 0,
+    bStart = 0,
+    after = a[aEnd - 1].nextSibling,
+    map = null;
   while (aStart < aEnd || bStart < bEnd) {
     if (a[aStart] === b[bStart]) {
       aStart++;
@@ -69,8 +69,8 @@ function reconcileArrays(parentNode, a, b) {
       if (index != null) {
         if (bStart < index && index < bEnd) {
           let i = aStart,
-              sequence = 1,
-              t;
+            sequence = 1,
+            t;
           while (++i < aEnd && i < bEnd) {
             if ((t = map.get(a[i])) == null || t !== index + sequence) break;
             sequence++;
@@ -143,7 +143,7 @@ function addEventListener(node, name, handler, delegate) {
 }
 function classList(node, value, prev = {}) {
   const classKeys = Object.keys(value || {}),
-        prevKeys = Object.keys(prev);
+    prevKeys = Object.keys(prev);
   let i, len;
   for (i = 0, len = prevKeys.length; i < len; i++) {
     const key = prevKeys[i];
@@ -153,7 +153,7 @@ function classList(node, value, prev = {}) {
   }
   for (i = 0, len = classKeys.length; i < len; i++) {
     const key = classKeys[i],
-          classValue = !!value[key];
+      classValue = !!value[key];
     if (!key || key === "undefined" || prev[key] === classValue || !classValue) continue;
     toggleClassKey(node, key, true);
     prev[key] = classValue;
@@ -260,8 +260,8 @@ function getNextMatch(el, nodeName) {
 }
 function getNextMarker(start) {
   let end = start,
-      count = 0,
-      current = [];
+    count = 0,
+    current = [];
   if (sharedConfig.context) {
     while (end) {
       if (end.nodeType === 8) {
@@ -353,7 +353,14 @@ function eventHandler(e) {
   });
   if (sharedConfig.registry && !sharedConfig.done) {
     sharedConfig.done = true;
-    document.querySelectorAll("[id^=pl-]").forEach(elem => elem.remove());
+    document.querySelectorAll("[id^=pl-]").forEach(elem => {
+      while (elem && elem.nodeType !== 8 && elem.nodeValue !== "pl-" + e) {
+        let x = elem.nextSibling;
+        elem.remove();
+        elem = x;
+      }
+      elem && elem.remove();
+    });
   }
   while (node) {
     const handler = node[key];
@@ -370,7 +377,7 @@ function insertExpression(parent, value, current, marker, unwrapArray) {
   while (typeof current === "function") current = current();
   if (value === current) return current;
   const t = typeof value,
-        multi = marker !== undefined;
+    multi = marker !== undefined;
   parent = multi && current[0] && current[0].parentNode || parent;
   if (t === "string" || t === "number") {
     if (sharedConfig.context) return current;
@@ -437,7 +444,7 @@ 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];
+      prev = current && current[i];
     if (item instanceof Node) {
       normalized.push(item);
     } else if (item == null || item === true || item === false) ; else if (Array.isArray(item)) {
@@ -531,10 +538,10 @@ const hydrate = (...args) => {
 };
 function Portal(props) {
   const {
-    useShadow
-  } = props,
-        marker = document.createTextNode(""),
-        mount = props.mount || document.body;
+      useShadow
+    } = props,
+    marker = document.createTextNode(""),
+    mount = props.mount || document.body;
   function renderPortal() {
     if (sharedConfig.context) {
       const [s, set] = createSignal(false);
@@ -551,9 +558,9 @@ function Portal(props) {
     });
   } else {
     const container = createElement(props.isSVG ? "g" : "div", props.isSVG),
-          renderRoot = useShadow && container.attachShadow ? container.attachShadow({
-      mode: "open"
-    }) : container;
+      renderRoot = useShadow && container.attachShadow ? container.attachShadow({
+        mode: "open"
+      }) : container;
     Object.defineProperty(container, "_$host", {
       get() {
         return marker.parentNode;

package/web/dist/server.cjs

@@ -261,7 +261,7 @@ function toRefParam(index) {
   return ref;
 }
 
-const REPLACE_SCRIPT = `function $df(e,t,d,l){d=document.getElementById(e),(l=document.getElementById("pl-"+e))&&l.replaceWith(...d.childNodes),d.remove(),_$HY.set(e,t),_$HY.fe(e)}`;
+const REPLACE_SCRIPT = `function $df(e,t,n,o,d){if(n=document.getElementById(e),o=document.getElementById("pl-"+e)){for(;o&&8!==o.nodeType&&o.nodeValue!=="pl-"+e;)d=o.nextSibling,o.remove(),o=d;o.replaceWith(n.content)}n.remove(),_$HY.set(e,t),_$HY.fe(e)}`;
 function renderToString(code, options = {}) {
   let scripts = "";
   solidJs.sharedConfig.context = {
@@ -392,7 +392,7 @@ function renderToStream(code, options = {}) {
               Promise.resolve().then(() => html = replacePlaceholder(html, key, value !== undefined ? value : ""));
               error && pushTask(serializeSet(dedupe, key, error, serializeError));
             } else {
-              buffer.write(`<div hidden id="${key}">${value !== undefined ? value : " "}</div>`);
+              buffer.write(`<template id="${key}">${value !== undefined ? value : " "}</template>`);
               pushTask(`${keys.length ? keys.map(k => `_$HY.unset("${k}")`).join(";") + ";" : ""}$df("${key}"${error ? "," + serializeError(error) : ""})${!scriptFlushed ? ";" + REPLACE_SCRIPT : ""}`);
               scriptFlushed = true;
             }
@@ -495,10 +495,10 @@ function ssr(t, ...nodes) {
 function ssrClassList(value) {
   if (!value) return "";
   let classKeys = Object.keys(value),
-      result = "";
+    result = "";
   for (let i = 0, len = classKeys.length; i < len; i++) {
     const key = classKeys[i],
-          classValue = !!value[key];
+      classValue = !!value[key];
     if (!key || key === "undefined" || !classValue) continue;
     i && (result += " ");
     result += key;
@@ -579,7 +579,7 @@ function escape(s, attr) {
   let iAmp = s.indexOf("&");
   if (iDelim < 0 && iAmp < 0) return s;
   let left = 0,
-      out = "";
+    out = "";
   while (iDelim >= 0 && iAmp >= 0) {
     if (iDelim < iAmp) {
       if (left < iDelim) out += s.substring(left, iDelim);
@@ -643,7 +643,8 @@ function generateHydrationScript({
 function Hydration(props) {
   if (!solidJs.sharedConfig.context.noHydrate) return props.children;
   const context = solidJs.sharedConfig.context;
-  solidJs.sharedConfig.context = { ...context,
+  solidJs.sharedConfig.context = {
+    ...context,
     count: 0,
     id: `${context.id}${context.count++}-`,
     noHydrate: false
@@ -701,21 +702,12 @@ function serializeSet(registry, key, value, serializer = stringify) {
   return `_$HY.set("${key}", ${serializer(value)})`;
 }
 function replacePlaceholder(html, key, value) {
-  const nextRegex = /(<[/]?span[^>]*>)/g;
-  const marker = `<span id="pl-${key}">`;
+  const marker = `<template id="pl-${key}">`;
+  const close = `<!pl-${key}>`;
   const first = html.indexOf(marker);
   if (first === -1) return html;
-  nextRegex.lastIndex = first + marker.length;
-  let match;
-  let open = 0,
-      close = 0;
-  while (match = nextRegex.exec(html)) {
-    if (match[0][1] === "/") {
-      close++;
-      if (close > open) break;
-    } else open++;
-  }
-  return html.slice(0, first) + value + html.slice(nextRegex.lastIndex);
+  const last = html.indexOf(close, first + marker.length);
+  return html.slice(0, first) + value + html.slice(last + close.length);
 }
 function Assets(props) {
   useAssets(() => props.children);
@@ -794,7 +786,7 @@ function delegateEvents() {}
 function Dynamic(props) {
   const [p, others] = solidJs.splitProps(props, ["component"]);
   const comp = p.component,
-        t = typeof comp;
+    t = typeof comp;
   if (comp) {
     if (t === "function") return comp(others);else if (t === "string") {
       return ssrElement(comp, others, undefined, true);