solid-js 1.6.11 → 1.6.12

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

@@ -607,7 +607,7 @@ function Suspense(props) {
     setHydrateContext({
       ...ctx,
       count: 0,
-      id: ctx.id + "0.f",
+      id: ctx.id + "0-f",
       noHydrate: true
     });
     const res = {
@@ -619,7 +619,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

@@ -605,7 +605,7 @@ function Suspense(props) {
     setHydrateContext({
       ...ctx,
       count: 0,
-      id: ctx.id + "0.f",
+      id: ctx.id + "0-f",
       noHydrate: true
     });
     const res = {
@@ -617,7 +617,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.12",
   "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/web/dist/dev.cjs

@@ -529,6 +529,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 +543,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 +687,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"];
@@ -528,6 +528,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 +542,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 +599,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

@@ -784,6 +784,7 @@ function ssrSpread(props, isSVG, skipChildren) {
 }
 
 const isServer = true;
+const isDev = false;
 function render() {}
 function hydrate() {}
 function insert() {}
@@ -858,6 +859,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

@@ -783,6 +783,7 @@ function ssrSpread(props, isSVG, skipChildren) {
 }
 
 const isServer = true;
+const isDev = false;
 function render() {}
 function hydrate() {}
 function insert() {}
@@ -803,4 +804,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) {
@@ -526,6 +529,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 +543,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 +587,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 +687,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) {
@@ -525,6 +528,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 +542,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 +586,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 +599,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