solid-js 1.7.0-beta.0 → 1.7.0-beta.2

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "solid-js",
   "description": "A declarative JavaScript library for building user interfaces.",
-  "version": "1.7.0-beta.0",
+  "version": "1.7.0-beta.2",
   "author": "Ryan Carniato",
   "license": "MIT",
   "homepage": "https://solidjs.com",
@@ -259,7 +259,8 @@
     "performance"
   ],
   "dependencies": {
-    "csstype": "^3.1.0"
+    "csstype": "^3.1.0",
+    "seroval": "^0.5.0"
   },
   "scripts": {
     "build": "npm-run-all -nl build:*",

package/store/dist/dev.cjs

@@ -312,11 +312,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

@@ -310,11 +310,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

@@ -296,11 +296,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

@@ -294,11 +294,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/types/index.d.ts

@@ -1,4 +1,4 @@
-export { $DEVCOMP, $PROXY, $TRACK, batch, children, createComputed, createContext, createDeferred, createEffect, createMemo, createReaction, createRenderEffect, createResource, createRoot, createSelector, createSignal, enableExternalSource, enableScheduling, equalFn, getListener, getOwner, on, onCleanup, onError, onMount, runWithOwner, startTransition, untrack, useContext, useTransition } from "./reactive/signal.js";
+export { $DEVCOMP, $PROXY, $TRACK, batch, children, createComputed, createContext, createDeferred, createEffect, createMemo, createReaction, createRenderEffect, createResource, createRoot, createSelector, createSignal, enableExternalSource, enableScheduling, equalFn, getListener, getOwner, on, onCleanup, onError, catchError, onMount, runWithOwner, startTransition, untrack, useContext, useTransition } from "./reactive/signal.js";
 export type { Accessor, AccessorArray, ChildrenReturn, Context, EffectFunction, EffectOptions, InitializedResource, InitializedResourceOptions, InitializedResourceReturn, MemoOptions, NoInfer, OnEffectFunction, OnOptions, Owner, Resource, ResourceActions, ResourceFetcher, ResourceFetcherInfo, ResourceOptions, ResourceReturn, ResourceSource, ReturnTypes, Setter, Signal, SignalOptions } from "./reactive/signal.js";
 export * from "./reactive/observable.js";
 export * from "./reactive/scheduler.js";

package/types/jsx.d.ts

@@ -799,6 +799,7 @@ export namespace JSX {
     checked?: boolean;
     crossorigin?: HTMLCrossorigin;
     disabled?: boolean;
+    enterkeyhint?: 'enter' | 'done' | 'go' | 'next' | 'previous' | 'search' | 'send';
     form?: string;
     formaction?: string;
     formenctype?: HTMLFormEncType;
@@ -1215,6 +1216,7 @@ export namespace JSX {
     mask?: string;
     opacity?: number | string | "inherit";
     overflow?: "visible" | "hidden" | "scroll" | "auto" | "inherit";
+    pathLength?: string | number;
     "pointer-events"?:
       | "bounding-box"
       | "visiblePainted"
@@ -1297,6 +1299,7 @@ export namespace JSX {
     gradientUnits?: SVGUnits;
     gradientTransform?: string;
     spreadMethod?: "pad" | "reflect" | "repeat";
+    href?: string
   }
   interface GraphicsElementSVGAttributes<T>
     extends CoreSVGAttributes<T>,
@@ -1336,6 +1339,7 @@ export namespace JSX {
         | "stroke-dashoffset"
         | "stroke-opacity"
         | "shape-rendering"
+        | "pathLength"
       > {}
   interface TextContentElementSVGAttributes<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";
@@ -418,6 +441,17 @@ export declare function onMount(fn: () => void): void;
  */
 export declare function onCleanup<T extends () => any>(fn: T): T;
 /**
+ * catchError - run an effect whenever an error is thrown within the context of the child scopes
+ * @param fn boundary for the error
+ * @param handler an error handler that receives the error
+ *
+ * * If the error is thrown again inside the error handler, it will trigger the next available parent handler
+ *
+ * @description https://www.solidjs.com/docs/latest/api#catcherror
+ */
+export declare function catchError<T>(fn: () => T, handler: (err: Error) => void): T | undefined;
+/**
+ * @deprecated since version 1.7.0 and will be removed in next major - use catchError instead
  * 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
  *
@@ -452,7 +486,8 @@ export declare function useTransition(): Transition;
 export declare function resumeEffects(e: Computation<any>[]): void;
 export interface DevComponent<T> extends Memo<unknown> {
     props: T;
-    componentName: string;
+    name: string;
+    component: (props: T) => unknown;
 }
 export declare function devComponent<P, V>(Comp: (props: P) => V, props: P): V;
 export declare function registerGraph(value: SourceMapValue): void;

package/types/render/flow.d.ts

@@ -36,21 +36,22 @@ export declare function Index<T extends readonly any[], U extends JSX.Element>(p
     fallback?: JSX.Element;
     children: (item: Accessor<T[number]>, index: number) => U;
 }): JSX.Element;
+type RequiredParameter<T> = T extends () => unknown ? never : T;
 /**
  * Conditionally render its children or an optional fallback component
  * @description https://www.solidjs.com/docs/latest/api#show
  */
-export declare function Show<T>(props: {
+export declare function Show<T, TRenderFunction extends (item: Accessor<NonNullable<T>>) => JSX.Element>(props: {
     when: T | undefined | null | false;
-    keyed: true;
+    keyed?: false;
     fallback?: JSX.Element;
-    children: JSX.Element | ((item: NonNullable<T>) => JSX.Element);
+    children: JSX.Element | RequiredParameter<TRenderFunction>;
 }): JSX.Element;
-export declare function Show<T>(props: {
+export declare function Show<T, TRenderFunction extends (item: NonNullable<T>) => JSX.Element>(props: {
     when: T | undefined | null | false;
-    keyed?: false;
+    keyed: true;
     fallback?: JSX.Element;
-    children: JSX.Element | ((item: Accessor<NonNullable<T>>) => JSX.Element);
+    children: JSX.Element | RequiredParameter<TRenderFunction>;
 }): JSX.Element;
 /**
  * switches between content based on mutually exclusive conditions
@@ -73,7 +74,7 @@ export declare function Switch(props: {
 export type MatchProps<T> = {
     when: T | undefined | null | false;
     keyed?: boolean;
-    children: JSX.Element | ((item: NonNullable<T>) => JSX.Element);
+    children: JSX.Element | ((item: NonNullable<T> | Accessor<NonNullable<T>>) => JSX.Element);
 };
 /**
  * selects a content based on condition when inside a `<Switch>` control flow
@@ -84,15 +85,15 @@ export type MatchProps<T> = {
  * ```
  * @description https://www.solidjs.com/docs/latest/api#switchmatch
  */
-export declare function Match<T>(props: {
+export declare function Match<T, TRenderFunction extends (item: Accessor<NonNullable<T>>) => JSX.Element>(props: {
     when: T | undefined | null | false;
-    keyed: true;
-    children: JSX.Element | ((item: NonNullable<T>) => JSX.Element);
+    keyed?: false;
+    children: JSX.Element | RequiredParameter<TRenderFunction>;
 }): JSX.Element;
-export declare function Match<T>(props: {
+export declare function Match<T, TRenderFunction extends (item: NonNullable<T>) => JSX.Element>(props: {
     when: T | undefined | null | false;
-    keyed?: false;
-    children: JSX.Element;
+    keyed: true;
+    children: JSX.Element | RequiredParameter<TRenderFunction>;
 }): JSX.Element;
 export declare function resetErrorBoundaries(): void;
 /**
@@ -114,3 +115,4 @@ export declare function ErrorBoundary(props: {
     fallback: JSX.Element | ((err: any, reset: () => void) => JSX.Element);
     children: JSX.Element;
 }): JSX.Element;
+export {};

package/types/server/reactive.d.ts

@@ -6,13 +6,15 @@ export declare const DEV: undefined;
 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: unknown): 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,11 @@ 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 catchError<T>(fn: () => T, handler: (err: Error) => void): T | undefined;
+/**
+ * @deprecated since version 1.7.0 and will be removed in next major - use catchError instead
+*/
 export declare function onError(fn: (err: Error) => void): void;
 export declare function getListener(): null;
 export interface Context<T> {

package/types/server/rendering.d.ts

@@ -1,4 +1,4 @@
-import { Setter, Signal } from "./reactive.js";
+import { Accessor, Setter, Signal } from "./reactive.js";
 import type { JSX } from "../jsx.js";
 export type Component<P = {}> = (props: P) => JSX.Element;
 export type VoidProps<P = {}> = P & {
@@ -47,11 +47,15 @@ export declare function Index<T>(props: {
     fallback?: string;
     children: (item: () => T, index: number) => string;
 }): string | any[] | undefined;
+/**
+ * Conditionally render its children or an optional fallback component
+ * @description https://www.solidjs.com/docs/latest/api#show
+ */
 export declare function Show<T>(props: {
     when: T | undefined | null | false;
     keyed?: boolean;
     fallback?: string;
-    children: string | ((item: NonNullable<T>) => string);
+    children: string | ((item: NonNullable<T> | Accessor<NonNullable<T>>) => string);
 }): string;
 export declare function Switch(props: {
     fallback?: string;
@@ -60,7 +64,7 @@ export declare function Switch(props: {
 type MatchProps<T> = {
     when: T | false;
     keyed?: boolean;
-    children: string | ((item: T) => string);
+    children: string | ((item: NonNullable<T> | Accessor<NonNullable<T>>) => string);
 };
 export declare function Match<T>(props: MatchProps<T>): MatchProps<T>;
 export declare function resetErrorBoundaries(): void;

package/web/dist/dev.cjs

@@ -11,12 +11,33 @@ const Aliases = /*#__PURE__*/Object.assign(Object.create(null), {
 });
 const PropAliases = /*#__PURE__*/Object.assign(Object.create(null), {
   class: "className",
-  formnovalidate: "formNoValidate",
-  ismap: "isMap",
-  nomodule: "noModule",
-  playsinline: "playsInline",
-  readonly: "readOnly"
+  formnovalidate: {
+    $: "formNoValidate",
+    BUTTON: 1,
+    INPUT: 1
+  },
+  ismap: {
+    $: "isMap",
+    IMG: 1
+  },
+  nomodule: {
+    $: "noModule",
+    SCRIPT: 1
+  },
+  playsinline: {
+    $: "playsInline",
+    VIDEO: 1
+  },
+  readonly: {
+    $: "readOnly",
+    INPUT: 1,
+    TEXTAREA: 1
+  }
 });
+function getPropAlias(prop, tagName) {
+  const a = PropAliases[prop];
+  return typeof a === "object" ? a[tagName] ? a["$"] : undefined : a;
+}
 const DelegatedEvents = /*#__PURE__*/new Set(["beforeinput", "click", "dblclick", "contextmenu", "focusin", "focusout", "input", "keydown", "keyup", "mousedown", "mousemove", "mouseout", "mouseover", "mouseup", "pointerdown", "pointermove", "pointerout", "pointerover", "pointerup", "touchend", "touchmove", "touchstart"]);
 const SVGElements = /*#__PURE__*/new Set([
 "altGlyph", "altGlyphDef", "altGlyphItem", "animate", "animateColor", "animateMotion", "animateTransform", "circle", "clipPath", "color-profile", "cursor", "defs", "desc", "ellipse", "feBlend", "feColorMatrix", "feComponentTransfer", "feComposite", "feConvolveMatrix", "feDiffuseLighting", "feDisplacementMap", "feDistantLight", "feFlood", "feFuncA", "feFuncB", "feFuncG", "feFuncR", "feGaussianBlur", "feImage", "feMerge", "feMergeNode", "feMorphology", "feOffset", "fePointLight", "feSpecularLighting", "feSpotLight", "feTile", "feTurbulence", "filter", "font", "font-face", "font-face-format", "font-face-name", "font-face-src", "font-face-uri", "foreignObject", "g", "glyph", "glyphRef", "hkern", "image", "line", "linearGradient", "marker", "mask", "metadata", "missing-glyph", "mpath", "path", "pattern", "polygon", "polyline", "radialGradient", "rect",
@@ -98,13 +119,14 @@ function render(code, element, init, options = {}) {
     element.textContent = "";
   };
 }
-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;
+function template(html, isSVG, isCE) {
+  let node;
+  const create = () => {
+    const t = document.createElement("template");
+    t.innerHTML = html;
+    return isSVG ? t.content.firstChild.firstChild : t.content.firstChild;
+  };
+  return isCE ? () => (node || (node = create())).cloneNode(true) : () => solidJs.untrack(() => document.importNode(node || (node = create()), true));
 }
 function delegateEvents(eventNames, document = window.document) {
   const e = document[$$EVENTS] || (document[$$EVENTS] = new Set());
@@ -249,7 +271,7 @@ function getNextElement(template) {
   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);
+    return template();
   }
   if (solidJs.sharedConfig.completed) solidJs.sharedConfig.completed.add(node);
   solidJs.sharedConfig.registry.delete(key);
@@ -304,7 +326,7 @@ function toggleClassKey(node, key, value) {
   for (let i = 0, nameLen = classNames.length; i < nameLen; i++) node.classList.toggle(classNames[i], value);
 }
 function assignProp(node, prop, value, prev, isSVG, skipRef) {
-  let isCE, isProp, isChildProp;
+  let isCE, isProp, isChildProp, propAlias, forceProp;
   if (prop === "style") return style(node, value, prev);
   if (prop === "classList") return classList(node, value, prev);
   if (value === prev) return prev;
@@ -329,8 +351,14 @@ function assignProp(node, prop, value, prev, isSVG, skipRef) {
       addEventListener(node, name, value, delegate);
       delegate && delegateEvents([name]);
     }
-  } else if ((isChildProp = ChildProperties.has(prop)) || !isSVG && (PropAliases[prop] || (isProp = Properties.has(prop))) || (isCE = node.nodeName.includes("-"))) {
-    if (prop === "class" || prop === "className") className(node, value);else if (isCE && !isProp && !isChildProp) node[toPropertyName(prop)] = value;else node[PropAliases[prop] || prop] = value;
+  } else if (prop.slice(0, 5) === "attr:") {
+    setAttribute(node, prop.slice(5), value);
+  } else if ((forceProp = prop.slice(0, 5) === "prop:") || (isChildProp = ChildProperties.has(prop)) || !isSVG && ((propAlias = getPropAlias(prop, node.tagName)) || (isProp = Properties.has(prop))) || (isCE = node.nodeName.includes("-"))) {
+    if (forceProp) {
+      prop = prop.slice(5);
+      isProp = true;
+    }
+    if (prop === "class" || prop === "className") className(node, value);else if (isCE && !isProp && !isChildProp) node[toPropertyName(prop)] = value;else node[propAlias || prop] = value;
   } else {
     const ns = isSVG && prop.indexOf(":") > -1 && SVGNamespace[prop.split(":")[0]];
     if (ns) setAttributeNS(node, ns, prop, value);else setAttribute(node, Aliases[prop] || prop, value);
@@ -352,17 +380,7 @@ function eventHandler(e) {
       return node || document;
     }
   });
-  if (solidJs.sharedConfig.registry && !solidJs.sharedConfig.done) {
-    solidJs.sharedConfig.done = true;
-    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();
-    });
-  }
+  if (solidJs.sharedConfig.registry && !solidJs.sharedConfig.done) solidJs.sharedConfig.done = _$HY.done = true;
   while (node) {
     const handler = node[key];
     if (handler && !node.disabled) {
@@ -374,7 +392,15 @@ function eventHandler(e) {
   }
 }
 function insertExpression(parent, value, current, marker, unwrapArray) {
-  if (solidJs.sharedConfig.context && !current) current = [...parent.childNodes];
+  if (solidJs.sharedConfig.context) {
+    !current && (current = [...parent.childNodes]);
+    let cleaned = [];
+    for (let i = 0; i < current.length; i++) {
+      const node = current[i];
+      if (node.nodeType === 8 && node.data === "!") node.remove();else cleaned.push(node);
+    }
+    current = cleaned;
+  }
   while (typeof current === "function") current = current();
   if (value === current) return current;
   const t = typeof value,
@@ -460,7 +486,8 @@ function normalizeIncomingArray(normalized, array, current, unwrap) {
       }
     } else {
       const value = String(item);
-      if (prev && prev.nodeType === 3 && prev.data === value) {
+      if (prev && prev.nodeType === 3) {
+        prev.data = value;
         normalized.push(prev);
       } else normalized.push(document.createTextNode(value));
     }
@@ -529,6 +556,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 +570,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) {
@@ -661,7 +693,6 @@ exports.Hydration = Hydration;
 exports.HydrationScript = voidFn;
 exports.NoHydration = NoHydration;
 exports.Portal = Portal;
-exports.PropAliases = PropAliases;
 exports.Properties = Properties;
 exports.SVGElements = SVGElements;
 exports.SVGNamespace = SVGNamespace;
@@ -679,9 +710,11 @@ exports.getHydrationKey = getHydrationKey;
 exports.getNextElement = getNextElement;
 exports.getNextMarker = getNextMarker;
 exports.getNextMatch = getNextMatch;
+exports.getPropAlias = getPropAlias;
 exports.hydrate = hydrate;
 exports.innerHTML = innerHTML;
 exports.insert = insert;
+exports.isDev = isDev;
 exports.isServer = isServer;
 exports.render = render;
 exports.renderToStream = renderToStream;