solid-js 1.6.11 → 1.6.13

package/LICENSE

@@ -1,6 +1,6 @@
 MIT License
 
-Copyright (c) 2016-2019 Ryan Carniato
+Copyright (c) 2016-2023 Ryan Carniato
 
 Permission is hereby granted, free of charge, to any person obtaining a copy
 of this software and associated documentation files (the "Software"), to deal

package/dist/dev.cjs

@@ -676,7 +676,7 @@ function writeSignal(node, value, isComp) {
         }
         if (Updates.length > 10e5) {
           Updates = [];
-          if ("_SOLID_DEV_") throw new Error("Potential Infinite Loop Detected.");
+          if (true) throw new Error("Potential Infinite Loop Detected.");
           throw new Error();
         }
       }, false);
@@ -721,7 +721,8 @@ function runComputation(node, value, time) {
         node.owned = null;
       }
     }
-    handleError(err);
+    node.updatedAt = time + 1;
+    return handleError(err);
   }
   if (!node.updatedAt || node.updatedAt <= time) {
     if (node.updatedAt != null && "observers" in node) {
@@ -901,7 +902,7 @@ function lookUpstream(node, ignore) {
     const source = node.sources[i];
     if (source.sources) {
       if (!runningTransition && source.state === STALE || runningTransition && source.tState === STALE) {
-        if (source !== ignore) runTop(source);
+        if (source !== ignore && (!source.updatedAt || source.updatedAt < ExecCount)) runTop(source);
       } else if (!runningTransition && source.state === PENDING || runningTransition && source.tState === PENDING) lookUpstream(source, ignore);
     }
   }
@@ -1413,7 +1414,7 @@ function lazy(fn) {
     }
     let Comp;
     return createMemo(() => (Comp = comp()) && untrack(() => {
-      if ("_SOLID_DEV_") Object.assign(Comp, {
+      if (true) Object.assign(Comp, {
         [$DEVCOMP]: true
       });
       if (!ctx) return Comp(props);

package/dist/dev.js

@@ -674,7 +674,7 @@ function writeSignal(node, value, isComp) {
         }
         if (Updates.length > 10e5) {
           Updates = [];
-          if ("_SOLID_DEV_") throw new Error("Potential Infinite Loop Detected.");
+          if (true) throw new Error("Potential Infinite Loop Detected.");
           throw new Error();
         }
       }, false);
@@ -719,7 +719,8 @@ function runComputation(node, value, time) {
         node.owned = null;
       }
     }
-    handleError(err);
+    node.updatedAt = time + 1;
+    return handleError(err);
   }
   if (!node.updatedAt || node.updatedAt <= time) {
     if (node.updatedAt != null && "observers" in node) {
@@ -899,7 +900,7 @@ function lookUpstream(node, ignore) {
     const source = node.sources[i];
     if (source.sources) {
       if (!runningTransition && source.state === STALE || runningTransition && source.tState === STALE) {
-        if (source !== ignore) runTop(source);
+        if (source !== ignore && (!source.updatedAt || source.updatedAt < ExecCount)) runTop(source);
       } else if (!runningTransition && source.state === PENDING || runningTransition && source.tState === PENDING) lookUpstream(source, ignore);
     }
   }
@@ -1411,7 +1412,7 @@ function lazy(fn) {
     }
     let Comp;
     return createMemo(() => (Comp = comp()) && untrack(() => {
-      if ("_SOLID_DEV_") Object.assign(Comp, {
+      if (true) Object.assign(Comp, {
         [$DEVCOMP]: true
       });
       if (!ctx) return Comp(props);

package/dist/server.cjs

@@ -6,7 +6,6 @@ const $TRACK = Symbol("solid-track");
 const $DEVCOMP = Symbol("solid-dev-component");
 const DEV = {};
 const ERROR = Symbol("error");
-const BRANCH = Symbol("branch");
 function castError(err) {
   if (err instanceof Error || typeof err === "string") return err;
   return new Error("Unknown error");
@@ -19,19 +18,35 @@ function handleError(err) {
 }
 const UNOWNED = {
   context: null,
-  owner: null
+  owner: null,
+  owned: null,
+  cleanups: null
 };
 let Owner = null;
+function createOwner() {
+  const o = {
+    owner: Owner,
+    context: null,
+    owned: null,
+    cleanups: null
+  };
+  if (Owner) {
+    if (!Owner.owned) Owner.owned = [o];else Owner.owned.push(o);
+  }
+  return o;
+}
 function createRoot(fn, detachedOwner) {
   const owner = Owner,
     root = fn.length === 0 ? UNOWNED : {
       context: null,
-      owner: detachedOwner === undefined ? owner : detachedOwner
+      owner: detachedOwner === undefined ? owner : detachedOwner,
+      owned: null,
+      cleanups: null
     };
   Owner = root;
   let result;
   try {
-    result = fn(() => {});
+    result = fn(fn.length === 0 ? () => {} : () => cleanNode(root));
   } catch (err) {
     handleError(err);
   } finally {
@@ -45,10 +60,7 @@ function createSignal(value, options) {
   }];
 }
 function createComputed(fn, value) {
-  Owner = {
-    owner: Owner,
-    context: null
-  };
+  Owner = createOwner();
   try {
     fn(value);
   } catch (err) {
@@ -65,10 +77,7 @@ function createReaction(fn) {
   };
 }
 function createMemo(fn, value) {
-  Owner = {
-    owner: Owner,
-    context: null
-  };
+  Owner = createOwner();
   let v;
   try {
     v = fn(value);
@@ -104,16 +113,19 @@ function on(deps, fn, options = {}) {
 }
 function onMount(fn) {}
 function onCleanup(fn) {
-  let node;
-  if (Owner && (node = lookup(Owner, BRANCH))) {
-    if (!node.cleanups) node.cleanups = [fn];else node.cleanups.push(fn);
+  if (Owner) {
+    if (!Owner.cleanups) Owner.cleanups = [fn];else Owner.cleanups.push(fn);
   }
   return fn;
 }
 function cleanNode(node) {
+  if (node.owned) {
+    for (let i = 0; i < node.owned.length; i++) cleanNode(node.owned[i]);
+    node.owned = null;
+  }
   if (node.cleanups) {
     for (let i = 0; i < node.cleanups.length; i++) node.cleanups[i]();
-    node.cleanups = undefined;
+    node.cleanups = null;
   }
 }
 function onError(fn) {
@@ -383,11 +395,8 @@ function ErrorBoundary(props) {
     !sync && ctx.replace("e" + id, displayFallback);
     sync = true;
   });
-  onCleanup(() => cleanNode(clean));
   createMemo(() => {
-    Owner.context = {
-      [BRANCH]: clean = {}
-    };
+    clean = Owner;
     return res = props.children;
   });
   if (error) return displayFallback();
@@ -437,7 +446,7 @@ function createResource(source, fetcher, options = {}) {
   };
   read.loading = false;
   read.error = undefined;
-  read.state = "initialValue" in options ? "resolved" : "unresolved";
+  read.state = "initialValue" in options ? "ready" : "unresolved";
   Object.defineProperty(read, "latest", {
     get() {
       return read();
@@ -470,7 +479,7 @@ function createResource(source, fetcher, options = {}) {
       if (ctx.writeResource) ctx.writeResource(id, p, undefined, options.deferStream);
       return p.then(res => {
         read.loading = false;
-        read.state = "resolved";
+        read.state = "ready";
         ctx.resources[id].data = res;
         p = null;
         notifySuspense(contexts);
@@ -560,15 +569,9 @@ function SuspenseList(props) {
 }
 function Suspense(props) {
   let done;
-  let clean;
   const ctx = sharedConfig.context;
   const id = ctx.id + ctx.count;
-  const o = Owner;
-  if (o) {
-    if (o.context) o.context[BRANCH] = clean = {};else o.context = {
-      [BRANCH]: clean = {}
-    };
-  }
+  const o = createOwner();
   const value = ctx.suspense[id] || (ctx.suspense[id] = {
     resources: new Map(),
     completed: () => {
@@ -583,11 +586,11 @@ function Suspense(props) {
       ...ctx,
       count: 0
     });
+    o && cleanNode(o);
     return runWithOwner(o, () => {
       return createComponent(SuspenseContext.Provider, {
         value,
         get children() {
-          clean && cleanNode(clean);
           return props.children;
         }
       });
@@ -607,7 +610,7 @@ function Suspense(props) {
     setHydrateContext({
       ...ctx,
       count: 0,
-      id: ctx.id + "0.f",
+      id: ctx.id + "0-f",
       noHydrate: true
     });
     const res = {
@@ -619,7 +622,7 @@ function Suspense(props) {
   setHydrateContext({
     ...ctx,
     count: 0,
-    id: ctx.id + "0.f"
+    id: ctx.id + "0-f"
   });
   ctx.writeResource(id, "$$f");
   return props.fallback;

package/dist/server.js

@@ -4,7 +4,6 @@ const $TRACK = Symbol("solid-track");
 const $DEVCOMP = Symbol("solid-dev-component");
 const DEV = {};
 const ERROR = Symbol("error");
-const BRANCH = Symbol("branch");
 function castError(err) {
   if (err instanceof Error || typeof err === "string") return err;
   return new Error("Unknown error");
@@ -17,19 +16,35 @@ function handleError(err) {
 }
 const UNOWNED = {
   context: null,
-  owner: null
+  owner: null,
+  owned: null,
+  cleanups: null
 };
 let Owner = null;
+function createOwner() {
+  const o = {
+    owner: Owner,
+    context: null,
+    owned: null,
+    cleanups: null
+  };
+  if (Owner) {
+    if (!Owner.owned) Owner.owned = [o];else Owner.owned.push(o);
+  }
+  return o;
+}
 function createRoot(fn, detachedOwner) {
   const owner = Owner,
     root = fn.length === 0 ? UNOWNED : {
       context: null,
-      owner: detachedOwner === undefined ? owner : detachedOwner
+      owner: detachedOwner === undefined ? owner : detachedOwner,
+      owned: null,
+      cleanups: null
     };
   Owner = root;
   let result;
   try {
-    result = fn(() => {});
+    result = fn(fn.length === 0 ? () => {} : () => cleanNode(root));
   } catch (err) {
     handleError(err);
   } finally {
@@ -43,10 +58,7 @@ function createSignal(value, options) {
   }];
 }
 function createComputed(fn, value) {
-  Owner = {
-    owner: Owner,
-    context: null
-  };
+  Owner = createOwner();
   try {
     fn(value);
   } catch (err) {
@@ -63,10 +75,7 @@ function createReaction(fn) {
   };
 }
 function createMemo(fn, value) {
-  Owner = {
-    owner: Owner,
-    context: null
-  };
+  Owner = createOwner();
   let v;
   try {
     v = fn(value);
@@ -102,16 +111,19 @@ function on(deps, fn, options = {}) {
 }
 function onMount(fn) {}
 function onCleanup(fn) {
-  let node;
-  if (Owner && (node = lookup(Owner, BRANCH))) {
-    if (!node.cleanups) node.cleanups = [fn];else node.cleanups.push(fn);
+  if (Owner) {
+    if (!Owner.cleanups) Owner.cleanups = [fn];else Owner.cleanups.push(fn);
   }
   return fn;
 }
 function cleanNode(node) {
+  if (node.owned) {
+    for (let i = 0; i < node.owned.length; i++) cleanNode(node.owned[i]);
+    node.owned = null;
+  }
   if (node.cleanups) {
     for (let i = 0; i < node.cleanups.length; i++) node.cleanups[i]();
-    node.cleanups = undefined;
+    node.cleanups = null;
   }
 }
 function onError(fn) {
@@ -381,11 +393,8 @@ function ErrorBoundary(props) {
     !sync && ctx.replace("e" + id, displayFallback);
     sync = true;
   });
-  onCleanup(() => cleanNode(clean));
   createMemo(() => {
-    Owner.context = {
-      [BRANCH]: clean = {}
-    };
+    clean = Owner;
     return res = props.children;
   });
   if (error) return displayFallback();
@@ -435,7 +444,7 @@ function createResource(source, fetcher, options = {}) {
   };
   read.loading = false;
   read.error = undefined;
-  read.state = "initialValue" in options ? "resolved" : "unresolved";
+  read.state = "initialValue" in options ? "ready" : "unresolved";
   Object.defineProperty(read, "latest", {
     get() {
       return read();
@@ -468,7 +477,7 @@ function createResource(source, fetcher, options = {}) {
       if (ctx.writeResource) ctx.writeResource(id, p, undefined, options.deferStream);
       return p.then(res => {
         read.loading = false;
-        read.state = "resolved";
+        read.state = "ready";
         ctx.resources[id].data = res;
         p = null;
         notifySuspense(contexts);
@@ -558,15 +567,9 @@ function SuspenseList(props) {
 }
 function Suspense(props) {
   let done;
-  let clean;
   const ctx = sharedConfig.context;
   const id = ctx.id + ctx.count;
-  const o = Owner;
-  if (o) {
-    if (o.context) o.context[BRANCH] = clean = {};else o.context = {
-      [BRANCH]: clean = {}
-    };
-  }
+  const o = createOwner();
   const value = ctx.suspense[id] || (ctx.suspense[id] = {
     resources: new Map(),
     completed: () => {
@@ -581,11 +584,11 @@ function Suspense(props) {
       ...ctx,
       count: 0
     });
+    o && cleanNode(o);
     return runWithOwner(o, () => {
       return createComponent(SuspenseContext.Provider, {
         value,
         get children() {
-          clean && cleanNode(clean);
           return props.children;
         }
       });
@@ -605,7 +608,7 @@ function Suspense(props) {
     setHydrateContext({
       ...ctx,
       count: 0,
-      id: ctx.id + "0.f",
+      id: ctx.id + "0-f",
       noHydrate: true
     });
     const res = {
@@ -617,7 +620,7 @@ function Suspense(props) {
   setHydrateContext({
     ...ctx,
     count: 0,
-    id: ctx.id + "0.f"
+    id: ctx.id + "0-f"
   });
   ctx.writeResource(id, "$$f");
   return props.fallback;

package/dist/solid.cjs

@@ -652,7 +652,8 @@ function runComputation(node, value, time) {
         node.owned = null;
       }
     }
-    handleError(err);
+    node.updatedAt = time + 1;
+    return handleError(err);
   }
   if (!node.updatedAt || node.updatedAt <= time) {
     if (node.updatedAt != null && "observers" in node) {
@@ -831,7 +832,7 @@ function lookUpstream(node, ignore) {
     const source = node.sources[i];
     if (source.sources) {
       if (!runningTransition && source.state === STALE || runningTransition && source.tState === STALE) {
-        if (source !== ignore) runTop(source);
+        if (source !== ignore && (!source.updatedAt || source.updatedAt < ExecCount)) runTop(source);
       } else if (!runningTransition && source.state === PENDING || runningTransition && source.tState === PENDING) lookUpstream(source, ignore);
     }
   }

package/dist/solid.js

@@ -650,7 +650,8 @@ function runComputation(node, value, time) {
         node.owned = null;
       }
     }
-    handleError(err);
+    node.updatedAt = time + 1;
+    return handleError(err);
   }
   if (!node.updatedAt || node.updatedAt <= time) {
     if (node.updatedAt != null && "observers" in node) {
@@ -829,7 +830,7 @@ function lookUpstream(node, ignore) {
     const source = node.sources[i];
     if (source.sources) {
       if (!runningTransition && source.state === STALE || runningTransition && source.tState === STALE) {
-        if (source !== ignore) runTop(source);
+        if (source !== ignore && (!source.updatedAt || source.updatedAt < ExecCount)) runTop(source);
       } else if (!runningTransition && source.state === PENDING || runningTransition && source.tState === PENDING) lookUpstream(source, ignore);
     }
   }

package/h/jsx-runtime/types/jsx.d.ts

@@ -1291,6 +1291,7 @@ export namespace JSX {
     gradientUnits?: FunctionMaybe<SVGUnits>;
     gradientTransform?: FunctionMaybe<string>;
     spreadMethod?: FunctionMaybe<"pad" | "reflect" | "repeat">;
+    href?: FunctionMaybe<string>
   }
   interface GraphicsElementSVGAttributes<T>
     extends CoreSVGAttributes<T>,

package/html/dist/html.cjs

@@ -300,7 +300,7 @@ function createHTML(r, {
         continue;
       }
       parseNode(child, childOptions);
-      i++;
+      if (!childOptions.multi && child.type === "comment" && child.content === "#") node.children.splice(i, 1);else i++;
     }
     options.counter = childOptions.counter;
     options.templateId = childOptions.templateId;
@@ -390,8 +390,12 @@ function createHTML(r, {
           options.templateId = childOptions.templateId;
         } else if (child.type === "text") {
           parts.push(`"${child.content}"`);
-        } else if (child.type === "comment" && child.content === "#") {
-          parts.push(`exprs[${options.counter++}]`);
+        } else if (child.type === "comment") {
+          if (child.content === "#") parts.push(`exprs[${options.counter++}]`);else if (child.content) {
+            for (let i = 0; i < child.content.split("###").length - 1; i++) {
+              parts.push(`exprs[${options.counter++}]`);
+            }
+          }
         }
       });
       options.exprs.push(`return [${parts.join(", \n")}]`);

package/html/dist/html.js

@@ -298,7 +298,7 @@ function createHTML(r, {
         continue;
       }
       parseNode(child, childOptions);
-      i++;
+      if (!childOptions.multi && child.type === "comment" && child.content === "#") node.children.splice(i, 1);else i++;
     }
     options.counter = childOptions.counter;
     options.templateId = childOptions.templateId;
@@ -388,8 +388,12 @@ function createHTML(r, {
           options.templateId = childOptions.templateId;
         } else if (child.type === "text") {
           parts.push(`"${child.content}"`);
-        } else if (child.type === "comment" && child.content === "#") {
-          parts.push(`exprs[${options.counter++}]`);
+        } else if (child.type === "comment") {
+          if (child.content === "#") parts.push(`exprs[${options.counter++}]`);else if (child.content) {
+            for (let i = 0; i < child.content.split("###").length - 1; i++) {
+              parts.push(`exprs[${options.counter++}]`);
+            }
+          }
         }
       });
       options.exprs.push(`return [${parts.join(", \n")}]`);

package/package.json

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

package/store/dist/dev.cjs

@@ -320,11 +320,8 @@ const $ROOT = Symbol("store-root");
 function applyState(target, parent, property, merge, key) {
   const previous = parent[property];
   if (target === previous) return;
-  if (!isWrappable(target) || !isWrappable(previous) || key && target[key] !== previous[key]) {
-    if (target !== previous) {
-      if (property === $ROOT) return target;
-      setProperty(parent, property, target);
-    }
+  if (property !== $ROOT && (!isWrappable(target) || !isWrappable(previous) || key && target[key] !== previous[key])) {
+    setProperty(parent, property, target);
     return;
   }
   if (Array.isArray(target)) {

package/store/dist/dev.js

@@ -318,11 +318,8 @@ const $ROOT = Symbol("store-root");
 function applyState(target, parent, property, merge, key) {
   const previous = parent[property];
   if (target === previous) return;
-  if (!isWrappable(target) || !isWrappable(previous) || key && target[key] !== previous[key]) {
-    if (target !== previous) {
-      if (property === $ROOT) return target;
-      setProperty(parent, property, target);
-    }
+  if (property !== $ROOT && (!isWrappable(target) || !isWrappable(previous) || key && target[key] !== previous[key])) {
+    setProperty(parent, property, target);
     return;
   }
   if (Array.isArray(target)) {

package/store/dist/store.cjs

@@ -297,11 +297,8 @@ const $ROOT = Symbol("store-root");
 function applyState(target, parent, property, merge, key) {
   const previous = parent[property];
   if (target === previous) return;
-  if (!isWrappable(target) || !isWrappable(previous) || key && target[key] !== previous[key]) {
-    if (target !== previous) {
-      if (property === $ROOT) return target;
-      setProperty(parent, property, target);
-    }
+  if (property !== $ROOT && (!isWrappable(target) || !isWrappable(previous) || key && target[key] !== previous[key])) {
+    setProperty(parent, property, target);
     return;
   }
   if (Array.isArray(target)) {

package/store/dist/store.js

@@ -295,11 +295,8 @@ const $ROOT = Symbol("store-root");
 function applyState(target, parent, property, merge, key) {
   const previous = parent[property];
   if (target === previous) return;
-  if (!isWrappable(target) || !isWrappable(previous) || key && target[key] !== previous[key]) {
-    if (target !== previous) {
-      if (property === $ROOT) return target;
-      setProperty(parent, property, target);
-    }
+  if (property !== $ROOT && (!isWrappable(target) || !isWrappable(previous) || key && target[key] !== previous[key])) {
+    setProperty(parent, property, target);
     return;
   }
   if (Array.isArray(target)) {

package/store/types/store.d.ts

@@ -68,7 +68,9 @@ export type ArrayFilterFn<T> = (item: T, index: number) => boolean;
 export type StoreSetter<T, U extends PropertyKey[] = []> = T | CustomPartial<T> | ((prevState: T, traversed: U) => T | CustomPartial<T>);
 export type Part<T, K extends KeyOf<T> = KeyOf<T>> = K | ([K] extends [never] ? never : readonly K[]) | ([T] extends [readonly unknown[]] ? ArrayFilterFn<T[number]> | StorePathRange : never);
 type W<T> = Exclude<T, NotWrappable>;
-type KeyOf<T> = number extends keyof T ? 0 extends 1 & T ? keyof T : [T] extends [readonly unknown[]] ? number : [T] extends [never] ? never : keyof T : keyof T;
+type KeyOf<T> = number extends keyof T ? 0 extends 1 & T ? keyof T : [T] extends [never] ? never : [
+    T
+] extends [readonly unknown[]] ? number : keyof T : keyof T;
 type MutableKeyOf<T> = KeyOf<T> & keyof PickMutable<T>;
 type Rest<T, U extends PropertyKey[], K extends KeyOf<T> = KeyOf<T>> = [T] extends [never] ? never : K extends MutableKeyOf<T> ? [Part<T, K>, ...RestSetterOrContinue<T[K], [K, ...U]>] : K extends KeyOf<T> ? [Part<T, K>, ...RestContinue<T[K], [K, ...U]>] : never;
 type RestContinue<T, U extends PropertyKey[]> = 0 extends 1 & T ? [...Part<any>[], StoreSetter<any, PropertyKey[]>] : Rest<W<T>, U>;

package/types/jsx.d.ts

@@ -1301,6 +1301,7 @@ export namespace JSX {
     gradientUnits?: SVGUnits;
     gradientTransform?: string;
     spreadMethod?: "pad" | "reflect" | "repeat";
+    href?: string
   }
   interface GraphicsElementSVGAttributes<T>
     extends CoreSVGAttributes<T>,

package/types/reactive/array.d.ts

@@ -1,4 +1,27 @@
 import { Accessor } from "./signal.js";
+/**
+The MIT License (MIT)
+
+Copyright (c) 2017 Adam Haile
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.
+*/
 /**
  * reactively transforms an array with a callback function - underlying helper for the `<For>` control flow
  *

package/types/reactive/signal.d.ts

@@ -1,3 +1,26 @@
+/**
+The MIT License (MIT)
+
+Copyright (c) 2017 Adam Haile
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.
+*/
 import { requestCallback } from "./scheduler.js";
 import type { JSX } from "../jsx.js";
 import type { FlowComponent } from "../render/index.js";

package/types/server/reactive.d.ts

@@ -6,13 +6,15 @@ export declare const DEV: {};
 export type Accessor<T> = () => T;
 export type Setter<T> = undefined extends T ? <U extends T>(value?: (U extends Function ? never : U) | ((prev?: T) => U)) => U : <U extends T>(value: (U extends Function ? never : U) | ((prev: T) => U)) => U;
 export type Signal<T> = [get: Accessor<T>, set: Setter<T>];
-export declare const BRANCH: unique symbol;
 export declare function castError(err: any): string | Error;
 export declare let Owner: Owner | null;
 interface Owner {
     owner: Owner | null;
     context: any | null;
+    owned: Owner[] | null;
+    cleanups: (() => void)[] | null;
 }
+export declare function createOwner(): Owner;
 export declare function createRoot<T>(fn: (dispose: () => void) => T, detachedOwner?: typeof Owner): T;
 export declare function createSignal<T>(value: T, options?: {
     equals?: false | ((prev: T, next: T) => boolean);
@@ -32,9 +34,7 @@ export declare function on<T, U>(deps: Array<() => T> | (() => T), fn: (value: A
 }): (prev?: U) => U | undefined;
 export declare function onMount(fn: () => void): void;
 export declare function onCleanup(fn: () => void): () => void;
-export declare function cleanNode(node: {
-    cleanups?: Function[] | null;
-}): void;
+export declare function cleanNode(node: Owner): void;
 export declare function onError(fn: (err: any) => void): void;
 export declare function getListener(): null;
 export interface Context<T> {

package/web/dist/dev.cjs

@@ -460,7 +460,10 @@ function normalizeIncomingArray(normalized, array, current, unwrap) {
       }
     } else {
       const value = String(item);
-      if (prev && prev.nodeType === 3 && prev.data === value) {
+      if (value === "<!>") {
+        if (prev && prev.nodeType === 8) normalized.push(prev);
+      } else if (prev && prev.nodeType === 3) {
+        prev.data = value;
         normalized.push(prev);
       } else normalized.push(document.createTextNode(value));
     }
@@ -529,6 +532,7 @@ function escape(html) {}
 function ssrSpread(props, isSVG, skipChildren) {}
 
 const isServer = false;
+const isDev = true;
 const SVG_NAMESPACE = "http://www.w3.org/2000/svg";
 function createElement(tagName, isSVG = false) {
   return isSVG ? document.createElementNS(SVG_NAMESPACE, tagName) : document.createElement(tagName);
@@ -542,37 +546,41 @@ function Portal(props) {
       useShadow
     } = props,
     marker = document.createTextNode(""),
-    mount = props.mount || document.body;
+    mount = () => props.mount || document.body,
+    content = solidJs.createMemo(renderPortal());
   function renderPortal() {
     if (solidJs.sharedConfig.context) {
       const [s, set] = solidJs.createSignal(false);
-      queueMicrotask(() => set(true));
+      solidJs.onMount(() => set(true));
       return () => s() && props.children;
     } else return () => props.children;
   }
-  if (mount instanceof HTMLHeadElement) {
-    const [clean, setClean] = solidJs.createSignal(false);
-    const cleanup = () => setClean(true);
-    solidJs.createRoot(dispose => insert(mount, () => !clean() ? renderPortal()() : dispose(), null));
-    solidJs.onCleanup(() => {
-      if (solidJs.sharedConfig.context) queueMicrotask(cleanup);else cleanup();
-    });
-  } else {
-    const container = createElement(props.isSVG ? "g" : "div", props.isSVG),
-      renderRoot = useShadow && container.attachShadow ? container.attachShadow({
-        mode: "open"
-      }) : container;
-    Object.defineProperty(container, "_$host", {
-      get() {
-        return marker.parentNode;
-      },
-      configurable: true
-    });
-    insert(renderRoot, renderPortal());
-    mount.appendChild(container);
-    props.ref && props.ref(container);
-    solidJs.onCleanup(() => mount.removeChild(container));
-  }
+  solidJs.createRenderEffect(() => {
+    const el = mount();
+    if (el instanceof HTMLHeadElement) {
+      const [clean, setClean] = solidJs.createSignal(false);
+      const cleanup = () => setClean(true);
+      solidJs.createRoot(dispose => insert(el, () => !clean() ? content() : dispose(), null));
+      solidJs.onCleanup(() => {
+        if (solidJs.sharedConfig.context) queueMicrotask(cleanup);else cleanup();
+      });
+    } else {
+      const container = createElement(props.isSVG ? "g" : "div", props.isSVG),
+        renderRoot = useShadow && container.attachShadow ? container.attachShadow({
+          mode: "open"
+        }) : container;
+      Object.defineProperty(container, "_$host", {
+        get() {
+          return marker.parentNode;
+        },
+        configurable: true
+      });
+      insert(renderRoot, content);
+      el.appendChild(container);
+      props.ref && props.ref(container);
+      solidJs.onCleanup(() => el.removeChild(container));
+    }
+  });
   return marker;
 }
 function Dynamic(props) {
@@ -682,6 +690,7 @@ exports.getNextMatch = getNextMatch;
 exports.hydrate = hydrate;
 exports.innerHTML = innerHTML;
 exports.insert = insert;
+exports.isDev = isDev;
 exports.isServer = isServer;
 exports.render = render;
 exports.renderToStream = renderToStream;

package/web/dist/dev.js

@@ -1,4 +1,4 @@
-import { createRoot, createRenderEffect, sharedConfig, untrack, enableHydration, createSignal, onCleanup, splitProps, createMemo, $DEVCOMP } from 'solid-js';
+import { createRoot, createRenderEffect, sharedConfig, untrack, enableHydration, createMemo, createSignal, onMount, onCleanup, splitProps, $DEVCOMP } from 'solid-js';
 export { ErrorBoundary, For, Index, Match, Show, Suspense, SuspenseList, Switch, createComponent, createRenderEffect as effect, getOwner, createMemo as memo, mergeProps, untrack } from 'solid-js';
 
 const booleans = ["allowfullscreen", "async", "autofocus", "autoplay", "checked", "controls", "default", "disabled", "formnovalidate", "hidden", "indeterminate", "ismap", "loop", "multiple", "muted", "nomodule", "novalidate", "open", "playsinline", "readonly", "required", "reversed", "seamless", "selected"];
@@ -459,7 +459,10 @@ function normalizeIncomingArray(normalized, array, current, unwrap) {
       }
     } else {
       const value = String(item);
-      if (prev && prev.nodeType === 3 && prev.data === value) {
+      if (value === "<!>") {
+        if (prev && prev.nodeType === 8) normalized.push(prev);
+      } else if (prev && prev.nodeType === 3) {
+        prev.data = value;
         normalized.push(prev);
       } else normalized.push(document.createTextNode(value));
     }
@@ -528,6 +531,7 @@ function escape(html) {}
 function ssrSpread(props, isSVG, skipChildren) {}
 
 const isServer = false;
+const isDev = true;
 const SVG_NAMESPACE = "http://www.w3.org/2000/svg";
 function createElement(tagName, isSVG = false) {
   return isSVG ? document.createElementNS(SVG_NAMESPACE, tagName) : document.createElement(tagName);
@@ -541,37 +545,41 @@ function Portal(props) {
       useShadow
     } = props,
     marker = document.createTextNode(""),
-    mount = props.mount || document.body;
+    mount = () => props.mount || document.body,
+    content = createMemo(renderPortal());
   function renderPortal() {
     if (sharedConfig.context) {
       const [s, set] = createSignal(false);
-      queueMicrotask(() => set(true));
+      onMount(() => set(true));
       return () => s() && props.children;
     } else return () => props.children;
   }
-  if (mount instanceof HTMLHeadElement) {
-    const [clean, setClean] = createSignal(false);
-    const cleanup = () => setClean(true);
-    createRoot(dispose => insert(mount, () => !clean() ? renderPortal()() : dispose(), null));
-    onCleanup(() => {
-      if (sharedConfig.context) queueMicrotask(cleanup);else cleanup();
-    });
-  } else {
-    const container = createElement(props.isSVG ? "g" : "div", props.isSVG),
-      renderRoot = useShadow && container.attachShadow ? container.attachShadow({
-        mode: "open"
-      }) : container;
-    Object.defineProperty(container, "_$host", {
-      get() {
-        return marker.parentNode;
-      },
-      configurable: true
-    });
-    insert(renderRoot, renderPortal());
-    mount.appendChild(container);
-    props.ref && props.ref(container);
-    onCleanup(() => mount.removeChild(container));
-  }
+  createRenderEffect(() => {
+    const el = mount();
+    if (el instanceof HTMLHeadElement) {
+      const [clean, setClean] = createSignal(false);
+      const cleanup = () => setClean(true);
+      createRoot(dispose => insert(el, () => !clean() ? content() : dispose(), null));
+      onCleanup(() => {
+        if (sharedConfig.context) queueMicrotask(cleanup);else cleanup();
+      });
+    } else {
+      const container = createElement(props.isSVG ? "g" : "div", props.isSVG),
+        renderRoot = useShadow && container.attachShadow ? container.attachShadow({
+          mode: "open"
+        }) : container;
+      Object.defineProperty(container, "_$host", {
+        get() {
+          return marker.parentNode;
+        },
+        configurable: true
+      });
+      insert(renderRoot, content);
+      el.appendChild(container);
+      props.ref && props.ref(container);
+      onCleanup(() => el.removeChild(container));
+    }
+  });
   return marker;
 }
 function Dynamic(props) {
@@ -594,4 +602,4 @@ function Dynamic(props) {
   });
 }
 
-export { Aliases, voidFn as Assets, ChildProperties, DOMElements, DelegatedEvents, Dynamic, Hydration, voidFn as HydrationScript, NoHydration, Portal, PropAliases, Properties, SVGElements, SVGNamespace, addEventListener, assign, classList, className, clearDelegatedEvents, delegateEvents, dynamicProperty, escape, voidFn as generateHydrationScript, voidFn as getAssets, getHydrationKey, getNextElement, getNextMarker, getNextMatch, hydrate, innerHTML, insert, isServer, render, renderToStream, renderToString, renderToStringAsync, resolveSSRNode, runHydrationEvents, setAttribute, setAttributeNS, spread, ssr, ssrAttribute, ssrClassList, ssrElement, ssrHydrationKey, ssrSpread, ssrStyle, style, template, use, voidFn as useAssets };
+export { Aliases, voidFn as Assets, ChildProperties, DOMElements, DelegatedEvents, Dynamic, Hydration, voidFn as HydrationScript, NoHydration, Portal, PropAliases, Properties, SVGElements, SVGNamespace, addEventListener, assign, classList, className, clearDelegatedEvents, delegateEvents, dynamicProperty, escape, voidFn as generateHydrationScript, voidFn as getAssets, getHydrationKey, getNextElement, getNextMarker, getNextMatch, hydrate, innerHTML, insert, isDev, isServer, render, renderToStream, renderToString, renderToStringAsync, resolveSSRNode, runHydrationEvents, setAttribute, setAttributeNS, spread, ssr, ssrAttribute, ssrClassList, ssrElement, ssrHydrationKey, ssrSpread, ssrStyle, style, template, use, voidFn as useAssets };

package/web/dist/server.cjs

@@ -278,7 +278,11 @@ function renderToString(code, options = {}) {
       scripts += `_$HY.set("${id}", ${stringify(p)});`;
     }
   };
-  let html = resolveSSRNode(escape(code()));
+  let html = solidJs.createRoot(d => {
+    resolveSSRNode(escape(code()));
+    d();
+    return r;
+  });
   solidJs.sharedConfig.context.noHydrate = true;
   html = injectAssets(solidJs.sharedConfig.context.assets, html);
   if (scripts.length) html = injectScripts(html, scripts, options.nonce);
@@ -304,6 +308,7 @@ function renderToStream(code, options = {}) {
     onCompleteAll,
     renderId
   } = options;
+  let dispose;
   const blockingResources = [];
   const registry = new Map();
   const dedupe = new WeakMap();
@@ -317,6 +322,7 @@ function renderToStream(code, options = {}) {
       });
       writable && writable.end();
       completed = true;
+      dispose();
     }
   };
   const pushTask = task => {
@@ -404,7 +410,10 @@ function renderToStream(code, options = {}) {
       };
     }
   };
-  let html = resolveSSRNode(escape(code()));
+  let html = solidJs.createRoot(d => {
+    dispose = d;
+    return resolveSSRNode(escape(code()));
+  });
   function doShell() {
     solidJs.sharedConfig.context = context;
     context.noHydrate = true;
@@ -784,6 +793,7 @@ function ssrSpread(props, isSVG, skipChildren) {
 }
 
 const isServer = true;
+const isDev = false;
 function render() {}
 function hydrate() {}
 function insert() {}
@@ -858,6 +868,7 @@ exports.getAssets = getAssets;
 exports.getHydrationKey = getHydrationKey;
 exports.hydrate = hydrate;
 exports.insert = insert;
+exports.isDev = isDev;
 exports.isServer = isServer;
 exports.pipeToNodeWritable = pipeToNodeWritable;
 exports.pipeToWritable = pipeToWritable;

package/web/dist/server.js

@@ -1,4 +1,4 @@
-import { sharedConfig, splitProps } from 'solid-js';
+import { sharedConfig, createRoot, splitProps } from 'solid-js';
 export { ErrorBoundary, For, Index, Match, Show, Suspense, SuspenseList, Switch, createComponent, mergeProps } from 'solid-js';
 
 const booleans = ["allowfullscreen", "async", "autofocus", "autoplay", "checked", "controls", "default", "disabled", "formnovalidate", "hidden", "indeterminate", "ismap", "loop", "multiple", "muted", "nomodule", "novalidate", "open", "playsinline", "readonly", "required", "reversed", "seamless", "selected"];
@@ -277,7 +277,11 @@ function renderToString(code, options = {}) {
       scripts += `_$HY.set("${id}", ${stringify(p)});`;
     }
   };
-  let html = resolveSSRNode(escape(code()));
+  let html = createRoot(d => {
+    resolveSSRNode(escape(code()));
+    d();
+    return r;
+  });
   sharedConfig.context.noHydrate = true;
   html = injectAssets(sharedConfig.context.assets, html);
   if (scripts.length) html = injectScripts(html, scripts, options.nonce);
@@ -303,6 +307,7 @@ function renderToStream(code, options = {}) {
     onCompleteAll,
     renderId
   } = options;
+  let dispose;
   const blockingResources = [];
   const registry = new Map();
   const dedupe = new WeakMap();
@@ -316,6 +321,7 @@ function renderToStream(code, options = {}) {
       });
       writable && writable.end();
       completed = true;
+      dispose();
     }
   };
   const pushTask = task => {
@@ -403,7 +409,10 @@ function renderToStream(code, options = {}) {
       };
     }
   };
-  let html = resolveSSRNode(escape(code()));
+  let html = createRoot(d => {
+    dispose = d;
+    return resolveSSRNode(escape(code()));
+  });
   function doShell() {
     sharedConfig.context = context;
     context.noHydrate = true;
@@ -783,6 +792,7 @@ function ssrSpread(props, isSVG, skipChildren) {
 }
 
 const isServer = true;
+const isDev = false;
 function render() {}
 function hydrate() {}
 function insert() {}
@@ -803,4 +813,4 @@ function Portal(props) {
   return "";
 }
 
-export { Assets, Dynamic, Hydration, HydrationScript, NoHydration, Portal, addEventListener, delegateEvents, escape, generateHydrationScript, getAssets, getHydrationKey, hydrate, insert, isServer, pipeToNodeWritable, pipeToWritable, render, renderToStream, renderToString, renderToStringAsync, resolveSSRNode, spread, ssr, ssrAttribute, ssrClassList, ssrElement, ssrHydrationKey, ssrSpread, ssrStyle, stringify, useAssets };
+export { Assets, Dynamic, Hydration, HydrationScript, NoHydration, Portal, addEventListener, delegateEvents, escape, generateHydrationScript, getAssets, getHydrationKey, hydrate, insert, isDev, isServer, pipeToNodeWritable, pipeToWritable, render, renderToStream, renderToString, renderToStringAsync, resolveSSRNode, spread, ssr, ssrAttribute, ssrClassList, ssrElement, ssrHydrationKey, ssrSpread, ssrStyle, stringify, useAssets };

package/web/dist/web.cjs

@@ -101,6 +101,7 @@ function render(code, element, init, options = {}) {
 function template(html, check, isSVG) {
   const t = document.createElement("template");
   t.innerHTML = html;
+  if (check && t.innerHTML.split("<").length - 1 !== check) throw `The browser resolved template HTML does not match JSX input:\n${t.innerHTML}\n\n${html}. Is your HTML properly formed?`;
   let node = t.content.firstChild;
   if (isSVG) node = node.firstChild;
   return node;
@@ -246,6 +247,8 @@ function hydrate$1(code, element, options = {}) {
 function getNextElement(template) {
   let node, key;
   if (!solidJs.sharedConfig.context || !(node = solidJs.sharedConfig.registry.get(key = getHydrationKey()))) {
+    if (solidJs.sharedConfig.context) console.warn("Unable to find DOM nodes for hydration key:", key);
+    if (!template) throw new Error("Unrecoverable Hydration Mismatch. No template for key: " + key);
     return template.cloneNode(true);
   }
   if (solidJs.sharedConfig.completed) solidJs.sharedConfig.completed.add(node);
@@ -435,7 +438,7 @@ function insertExpression(parent, value, current, marker, unwrapArray) {
       parent.appendChild(value);
     } else parent.replaceChild(value, parent.firstChild);
     current = value;
-  } else ;
+  } else console.warn(`Unrecognized value. Skipped inserting`, value);
   return current;
 }
 function normalizeIncomingArray(normalized, array, current, unwrap) {
@@ -457,7 +460,10 @@ function normalizeIncomingArray(normalized, array, current, unwrap) {
       }
     } else {
       const value = String(item);
-      if (prev && prev.nodeType === 3 && prev.data === value) {
+      if (value === "<!>") {
+        if (prev && prev.nodeType === 8) normalized.push(prev);
+      } else if (prev && prev.nodeType === 3) {
+        prev.data = value;
         normalized.push(prev);
       } else normalized.push(document.createTextNode(value));
     }
@@ -526,6 +532,7 @@ function escape(html) {}
 function ssrSpread(props, isSVG, skipChildren) {}
 
 const isServer = false;
+const isDev = false;
 const SVG_NAMESPACE = "http://www.w3.org/2000/svg";
 function createElement(tagName, isSVG = false) {
   return isSVG ? document.createElementNS(SVG_NAMESPACE, tagName) : document.createElement(tagName);
@@ -539,37 +546,41 @@ function Portal(props) {
       useShadow
     } = props,
     marker = document.createTextNode(""),
-    mount = props.mount || document.body;
+    mount = () => props.mount || document.body,
+    content = solidJs.createMemo(renderPortal());
   function renderPortal() {
     if (solidJs.sharedConfig.context) {
       const [s, set] = solidJs.createSignal(false);
-      queueMicrotask(() => set(true));
+      solidJs.onMount(() => set(true));
       return () => s() && props.children;
     } else return () => props.children;
   }
-  if (mount instanceof HTMLHeadElement) {
-    const [clean, setClean] = solidJs.createSignal(false);
-    const cleanup = () => setClean(true);
-    solidJs.createRoot(dispose => insert(mount, () => !clean() ? renderPortal()() : dispose(), null));
-    solidJs.onCleanup(() => {
-      if (solidJs.sharedConfig.context) queueMicrotask(cleanup);else cleanup();
-    });
-  } else {
-    const container = createElement(props.isSVG ? "g" : "div", props.isSVG),
-      renderRoot = useShadow && container.attachShadow ? container.attachShadow({
-        mode: "open"
-      }) : container;
-    Object.defineProperty(container, "_$host", {
-      get() {
-        return marker.parentNode;
-      },
-      configurable: true
-    });
-    insert(renderRoot, renderPortal());
-    mount.appendChild(container);
-    props.ref && props.ref(container);
-    solidJs.onCleanup(() => mount.removeChild(container));
-  }
+  solidJs.createRenderEffect(() => {
+    const el = mount();
+    if (el instanceof HTMLHeadElement) {
+      const [clean, setClean] = solidJs.createSignal(false);
+      const cleanup = () => setClean(true);
+      solidJs.createRoot(dispose => insert(el, () => !clean() ? content() : dispose(), null));
+      solidJs.onCleanup(() => {
+        if (solidJs.sharedConfig.context) queueMicrotask(cleanup);else cleanup();
+      });
+    } else {
+      const container = createElement(props.isSVG ? "g" : "div", props.isSVG),
+        renderRoot = useShadow && container.attachShadow ? container.attachShadow({
+          mode: "open"
+        }) : container;
+      Object.defineProperty(container, "_$host", {
+        get() {
+          return marker.parentNode;
+        },
+        configurable: true
+      });
+      insert(renderRoot, content);
+      el.appendChild(container);
+      props.ref && props.ref(container);
+      solidJs.onCleanup(() => el.removeChild(container));
+    }
+  });
   return marker;
 }
 function Dynamic(props) {
@@ -579,6 +590,9 @@ function Dynamic(props) {
     const component = cached();
     switch (typeof component) {
       case "function":
+        Object.assign(component, {
+          [solidJs.$DEVCOMP]: true
+        });
         return solidJs.untrack(() => component(others));
       case "string":
         const isSvg = SVGElements.has(component);
@@ -676,6 +690,7 @@ exports.getNextMatch = getNextMatch;
 exports.hydrate = hydrate;
 exports.innerHTML = innerHTML;
 exports.insert = insert;
+exports.isDev = isDev;
 exports.isServer = isServer;
 exports.render = render;
 exports.renderToStream = renderToStream;

package/web/dist/web.js

@@ -1,4 +1,4 @@
-import { createRoot, createRenderEffect, sharedConfig, untrack, enableHydration, createSignal, onCleanup, splitProps, createMemo } from 'solid-js';
+import { createRoot, createRenderEffect, sharedConfig, untrack, enableHydration, createMemo, createSignal, onMount, onCleanup, splitProps, $DEVCOMP } from 'solid-js';
 export { ErrorBoundary, For, Index, Match, Show, Suspense, SuspenseList, Switch, createComponent, createRenderEffect as effect, getOwner, createMemo as memo, mergeProps, untrack } from 'solid-js';
 
 const booleans = ["allowfullscreen", "async", "autofocus", "autoplay", "checked", "controls", "default", "disabled", "formnovalidate", "hidden", "indeterminate", "ismap", "loop", "multiple", "muted", "nomodule", "novalidate", "open", "playsinline", "readonly", "required", "reversed", "seamless", "selected"];
@@ -100,6 +100,7 @@ function render(code, element, init, options = {}) {
 function template(html, check, isSVG) {
   const t = document.createElement("template");
   t.innerHTML = html;
+  if (check && t.innerHTML.split("<").length - 1 !== check) throw `The browser resolved template HTML does not match JSX input:\n${t.innerHTML}\n\n${html}. Is your HTML properly formed?`;
   let node = t.content.firstChild;
   if (isSVG) node = node.firstChild;
   return node;
@@ -245,6 +246,8 @@ function hydrate$1(code, element, options = {}) {
 function getNextElement(template) {
   let node, key;
   if (!sharedConfig.context || !(node = sharedConfig.registry.get(key = getHydrationKey()))) {
+    if (sharedConfig.context) console.warn("Unable to find DOM nodes for hydration key:", key);
+    if (!template) throw new Error("Unrecoverable Hydration Mismatch. No template for key: " + key);
     return template.cloneNode(true);
   }
   if (sharedConfig.completed) sharedConfig.completed.add(node);
@@ -434,7 +437,7 @@ function insertExpression(parent, value, current, marker, unwrapArray) {
       parent.appendChild(value);
     } else parent.replaceChild(value, parent.firstChild);
     current = value;
-  } else ;
+  } else console.warn(`Unrecognized value. Skipped inserting`, value);
   return current;
 }
 function normalizeIncomingArray(normalized, array, current, unwrap) {
@@ -456,7 +459,10 @@ function normalizeIncomingArray(normalized, array, current, unwrap) {
       }
     } else {
       const value = String(item);
-      if (prev && prev.nodeType === 3 && prev.data === value) {
+      if (value === "<!>") {
+        if (prev && prev.nodeType === 8) normalized.push(prev);
+      } else if (prev && prev.nodeType === 3) {
+        prev.data = value;
         normalized.push(prev);
       } else normalized.push(document.createTextNode(value));
     }
@@ -525,6 +531,7 @@ function escape(html) {}
 function ssrSpread(props, isSVG, skipChildren) {}
 
 const isServer = false;
+const isDev = false;
 const SVG_NAMESPACE = "http://www.w3.org/2000/svg";
 function createElement(tagName, isSVG = false) {
   return isSVG ? document.createElementNS(SVG_NAMESPACE, tagName) : document.createElement(tagName);
@@ -538,37 +545,41 @@ function Portal(props) {
       useShadow
     } = props,
     marker = document.createTextNode(""),
-    mount = props.mount || document.body;
+    mount = () => props.mount || document.body,
+    content = createMemo(renderPortal());
   function renderPortal() {
     if (sharedConfig.context) {
       const [s, set] = createSignal(false);
-      queueMicrotask(() => set(true));
+      onMount(() => set(true));
       return () => s() && props.children;
     } else return () => props.children;
   }
-  if (mount instanceof HTMLHeadElement) {
-    const [clean, setClean] = createSignal(false);
-    const cleanup = () => setClean(true);
-    createRoot(dispose => insert(mount, () => !clean() ? renderPortal()() : dispose(), null));
-    onCleanup(() => {
-      if (sharedConfig.context) queueMicrotask(cleanup);else cleanup();
-    });
-  } else {
-    const container = createElement(props.isSVG ? "g" : "div", props.isSVG),
-      renderRoot = useShadow && container.attachShadow ? container.attachShadow({
-        mode: "open"
-      }) : container;
-    Object.defineProperty(container, "_$host", {
-      get() {
-        return marker.parentNode;
-      },
-      configurable: true
-    });
-    insert(renderRoot, renderPortal());
-    mount.appendChild(container);
-    props.ref && props.ref(container);
-    onCleanup(() => mount.removeChild(container));
-  }
+  createRenderEffect(() => {
+    const el = mount();
+    if (el instanceof HTMLHeadElement) {
+      const [clean, setClean] = createSignal(false);
+      const cleanup = () => setClean(true);
+      createRoot(dispose => insert(el, () => !clean() ? content() : dispose(), null));
+      onCleanup(() => {
+        if (sharedConfig.context) queueMicrotask(cleanup);else cleanup();
+      });
+    } else {
+      const container = createElement(props.isSVG ? "g" : "div", props.isSVG),
+        renderRoot = useShadow && container.attachShadow ? container.attachShadow({
+          mode: "open"
+        }) : container;
+      Object.defineProperty(container, "_$host", {
+        get() {
+          return marker.parentNode;
+        },
+        configurable: true
+      });
+      insert(renderRoot, content);
+      el.appendChild(container);
+      props.ref && props.ref(container);
+      onCleanup(() => el.removeChild(container));
+    }
+  });
   return marker;
 }
 function Dynamic(props) {
@@ -578,6 +589,9 @@ function Dynamic(props) {
     const component = cached();
     switch (typeof component) {
       case "function":
+        Object.assign(component, {
+          [$DEVCOMP]: true
+        });
         return untrack(() => component(others));
       case "string":
         const isSvg = SVGElements.has(component);
@@ -588,4 +602,4 @@ function Dynamic(props) {
   });
 }
 
-export { Aliases, voidFn as Assets, ChildProperties, DOMElements, DelegatedEvents, Dynamic, Hydration, voidFn as HydrationScript, NoHydration, Portal, PropAliases, Properties, SVGElements, SVGNamespace, addEventListener, assign, classList, className, clearDelegatedEvents, delegateEvents, dynamicProperty, escape, voidFn as generateHydrationScript, voidFn as getAssets, getHydrationKey, getNextElement, getNextMarker, getNextMatch, hydrate, innerHTML, insert, isServer, render, renderToStream, renderToString, renderToStringAsync, resolveSSRNode, runHydrationEvents, setAttribute, setAttributeNS, spread, ssr, ssrAttribute, ssrClassList, ssrElement, ssrHydrationKey, ssrSpread, ssrStyle, style, template, use, voidFn as useAssets };
+export { Aliases, voidFn as Assets, ChildProperties, DOMElements, DelegatedEvents, Dynamic, Hydration, voidFn as HydrationScript, NoHydration, Portal, PropAliases, Properties, SVGElements, SVGNamespace, addEventListener, assign, classList, className, clearDelegatedEvents, delegateEvents, dynamicProperty, escape, voidFn as generateHydrationScript, voidFn as getAssets, getHydrationKey, getNextElement, getNextMarker, getNextMatch, hydrate, innerHTML, insert, isDev, isServer, render, renderToStream, renderToString, renderToStringAsync, resolveSSRNode, runHydrationEvents, setAttribute, setAttributeNS, spread, ssr, ssrAttribute, ssrClassList, ssrElement, ssrHydrationKey, ssrSpread, ssrStyle, style, template, use, voidFn as useAssets };

package/web/types/index.d.ts

@@ -3,7 +3,8 @@ import { JSX, Accessor, ComponentProps, ValidComponent } from "solid-js";
 export * from "./client.js";
 export { For, Show, Suspense, SuspenseList, Switch, Match, Index, ErrorBoundary, mergeProps } from "solid-js";
 export * from "./server-mock.js";
-export declare const isServer = false;
+export declare const isServer: boolean;
+export declare const isDev: boolean;
 export declare const hydrate: typeof hydrateCore;
 /**
  * renders components somewhere else in the DOM