@solidjs/web 2.0.0-beta.6 → 2.0.0-beta.8

package/dist/web.js

@@ -1,13 +1,13 @@
-import { createRenderEffect, createMemo as createMemo$1, sharedConfig, untrack, runWithOwner, flatten, createRoot, omit, enableHydration } from 'solid-js';
-export { Errored, For, Hydration, Loading, Match, NoHydration, Reveal, Show, Switch, createComponent, getOwner, merge as mergeProps, untrack } from 'solid-js';
+import { createRenderEffect, createMemo as createMemo$1, sharedConfig, untrack, runWithOwner, flatten, createRoot, omit, enableHydration, flush } from 'solid-js';
+export { Errored, For, Hydration, Loading, Match, NoHydration, Repeat, Reveal, Show, Switch, createComponent, getOwner, merge as mergeProps, untrack } from 'solid-js';
 import { createMemo } from '@solidjs/signals';
 
 const DOMWithState = {
   INPUT: {
     value: 1,
-    defaultValue: 1,
+    defaultValue: 2,
     checked: 1,
-    defaultChecked: 1
+    defaultChecked: 2
   },
   SELECT: {
     value: 1
@@ -15,26 +15,21 @@ const DOMWithState = {
   OPTION: {
     value: 1,
     selected: 1,
-    defaultSelected: 1
+    defaultSelected: 2
   },
   TEXTAREA: {
     value: 1,
-    defaultValue: 1
+    defaultValue: 2
   },
   VIDEO: {
     muted: 1,
-    defaultMuted: 1
+    defaultMuted: 2
   },
   AUDIO: {
     muted: 1,
-    defaultMuted: 1
+    defaultMuted: 2
   }
 };
-for (const tagName in DOMWithState) {
-  for (const propName in DOMWithState[tagName]) {
-    DOMWithState[tagName]["prop:" + propName] = 1;
-  }
-}
 const ChildProperties = /*#__PURE__*/new Set(["innerHTML", "textContent", "innerText", "children"]);
 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([
@@ -53,10 +48,14 @@ const DOMElements = /*#__PURE__*/new Set(["html", "base", "head", "link", "meta"
 "webview",
 "isindex", "listing", "multicol", "nextid", "noindex", "search"]);
 
-const effect = (fn, effectFn, initial) => createRenderEffect(fn, effectFn, initial, {
+const transparentOptions = {
   transparent: true
-});
-const memo = (fn, transparent) => transparent ? fn.$r ? fn : createMemo(() => fn(), undefined, {
+};
+const effect = (fn, effectFn, options) => createRenderEffect(fn, effectFn, options ? {
+  transparent: true,
+  ...options
+} : transparentOptions);
+const memo = (fn, transparent) => transparent ? fn.$r ? fn : createMemo(() => fn(), {
   transparent: true
 }) : createMemo$1(() => fn());
 
@@ -119,16 +118,17 @@ function reconcileArrays(parentNode, a, b) {
 
 const $$EVENTS = "_$DX_DELEGATE";
 function render$1(code, element, init, options = {}) {
+  const renderRoot = getChildRoot(element);
   let disposer;
   createRoot(dispose => {
     disposer = dispose;
-    element === document ? flatten(code) : insert(element, code(), element.firstChild ? null : undefined, init);
+    element === document ? flatten(code) : insert(element, code(), renderRoot.firstChild ? null : undefined, init);
   }, {
     id: options.renderId
   });
   return () => {
     disposer();
-    element.textContent = "";
+    renderRoot.textContent = "";
   };
 }
 function create(html, bypassGuard, flag) {
@@ -265,11 +265,12 @@ function ref(fn, element) {
   const resolved = untrack(fn);
   runWithOwner(null, () => applyRef(resolved, element));
 }
-function insert(parent, accessor, marker, initial) {
+function insert(parent, accessor, marker, initial, options) {
+  const childRoot = getChildRoot(parent);
   const multi = marker !== undefined;
   if (multi && !initial) initial = [];
   if (isHydrating(parent)) {
-    if (!multi && initial === undefined && parent) initial = [...parent.childNodes];
+    if (!multi && initial === undefined && parent) initial = [...childRoot.childNodes];
     if (Array.isArray(initial)) {
       let j = 0;
       for (let i = 0; i < initial.length; i++) {
@@ -285,10 +286,10 @@ function insert(parent, accessor, marker, initial) {
   accessor = memo(accessor, true);
   if (multi && initial.length === 0) {
     const placeholder = document.createTextNode("");
-    parent.insertBefore(placeholder, marker);
+    childRoot.insertBefore(placeholder, marker);
     initial = [placeholder];
   }
-  effect(prev => normalize(accessor, prev, multi), (value, current) => insertExpression(parent, value, current, marker), initial);
+  effect((prev = initial) => normalize(accessor, prev, multi), (value, current = initial) => insertExpression(parent, value, current, marker), options);
 }
 function assign(node, props, skipChildren, prevProps = {}, skipRef = false) {
   const nodeName = node.nodeName;
@@ -307,8 +308,24 @@ function assign(node, props, skipChildren, prevProps = {}, skipRef = false) {
     prevProps[prop] = assignProp(node, prop, props[prop], prevProps[prop], skipRef, nodeName);
   }
 }
+function loadModuleAssets(mapping) {
+  const hy = globalThis._$HY;
+  if (!hy) return;
+  const pending = [];
+  for (const moduleUrl in mapping) {
+    if (hy.modules[moduleUrl]) continue;
+    const entryUrl = mapping[moduleUrl];
+    if (!hy.loading[moduleUrl]) {
+      hy.loading[moduleUrl] = import(entryUrl).then(mod => {
+        hy.modules[moduleUrl] = mod;
+      });
+    }
+    pending.push(hy.loading[moduleUrl]);
+  }
+  return pending.length ? Promise.all(pending).then(() => {}) : undefined;
+}
 function hydrate$1(code, element, options = {}) {
-  if (globalThis._$HY.done) return render$1(code, element, [...element.childNodes], options);
+  if (globalThis._$HY.done) return render$1(code, element, [...getChildRoot(element).childNodes], options);
   options.renderId ||= "";
   if (!globalThis._$HY.modules) globalThis._$HY.modules = {};
   if (!globalThis._$HY.loading) globalThis._$HY.loading = {};
@@ -317,6 +334,7 @@ function hydrate$1(code, element, options = {}) {
   sharedConfig.load = id => globalThis._$HY.r[id];
   sharedConfig.has = id => id in globalThis._$HY.r;
   sharedConfig.gather = root => gatherHydratable(element, root);
+  sharedConfig.loadModuleAssets = loadModuleAssets;
   sharedConfig.cleanupFragment = id => {
     const tpl = document.getElementById("pl-" + id);
     if (tpl) {
@@ -335,9 +353,27 @@ function hydrate$1(code, element, options = {}) {
   };
   sharedConfig.registry = new Map();
   sharedConfig.hydrating = true;
+  const rootMapping = globalThis._$HY.r && globalThis._$HY.r["_assets"];
+  if (rootMapping && typeof rootMapping === "object") {
+    const p = loadModuleAssets(rootMapping);
+    if (p) {
+      gatherHydratable(element, options.renderId);
+      let disposer;
+      p.then(() => {
+        try {
+          disposer = render$1(code, element, [...getChildRoot(element).childNodes], options);
+        } finally {
+          sharedConfig.hydrating = false;
+        }
+      }, () => {
+        sharedConfig.hydrating = false;
+      });
+      return () => disposer && disposer();
+    }
+  }
   try {
     gatherHydratable(element, options.renderId);
-    return render$1(code, element, [...element.childNodes], options);
+    return render$1(code, element, [...getChildRoot(element).childNodes], options);
   } finally {
     sharedConfig.hydrating = false;
   }
@@ -380,7 +416,7 @@ function getNextMarker(start) {
   return [end, current];
 }
 function getFirstChild(node, expectedTag) {
-  const child = node.firstChild;
+  const child = getChildRoot(node).firstChild;
   return child;
 }
 function getNextSibling(node, expectedTag) {
@@ -413,6 +449,9 @@ function runHydrationEvents() {
 function isHydrating(node) {
   return sharedConfig.hydrating && (!node || node.isConnected);
 }
+function getChildRoot(node) {
+  return node && node.localName === "template" ? node.content : node;
+}
 function toggleClassKey(node, key, value) {
   const classNames = key.trim().split(/\s+/);
   for (let i = 0, nameLen = classNames.length; i < nameLen; i++) node.classList.toggle(classNames[i], value);
@@ -434,7 +473,7 @@ function flattenClassList(list, result) {
 function assignProp(node, prop, value, prev, skipRef, nodeName) {
   if (prop === "style") return style(node, value, prev), value;
   if (prop === "class") return className(node, value, prev), value;
-  if (value === prev && !DOMWithState[nodeName]?.[prop]) return prev;
+  if (value === prev && DOMWithState[nodeName]?.[prop] !== 1) return prev;
   if (prop === "ref") {
     if (!skipRef && value) ref(() => value, node);
     return value;
@@ -517,21 +556,22 @@ function eventHandler(e) {
 function insertExpression(parent, value, current, marker) {
   if (isHydrating(parent)) return;
   if (value === current) return;
+  const childRoot = getChildRoot(parent);
   const t = typeof value,
     multi = marker !== undefined;
   if (t === "string" || t === "number") {
     const tc = typeof current;
     if (tc === "string" || tc === "number") {
-      parent.firstChild.data = value;
-    } else parent.textContent = value;
+      childRoot.firstChild.data = value;
+    } else childRoot.textContent = value;
   } else if (value === undefined) {
     cleanChildren(parent, current, marker);
   } else if (value.nodeType) {
     if (Array.isArray(current)) {
       cleanChildren(parent, current, multi ? marker : null, value);
-    } else if (current === undefined || !parent.firstChild) {
-      parent.appendChild(value);
-    } else parent.replaceChild(value, parent.firstChild);
+    } else if (current === undefined || !childRoot.firstChild) {
+      childRoot.appendChild(value);
+    } else childRoot.replaceChild(value, childRoot.firstChild);
   } else if (Array.isArray(value)) {
     const currentArray = current && Array.isArray(current);
     if (value.length === 0) {
@@ -539,7 +579,7 @@ function insertExpression(parent, value, current, marker) {
     } else if (currentArray) {
       if (current.length === 0) {
         appendNodes(parent, value, marker);
-      } else reconcileArrays(parent, current, value);
+      } else reconcileArrays(childRoot, current, value);
     } else {
       current && cleanChildren(parent);
       appendNodes(parent, value);
@@ -564,9 +604,11 @@ function normalize(value, current, multi, doNotUnwrap) {
   return value;
 }
 function appendNodes(parent, array, marker = null) {
+  parent = getChildRoot(parent);
   for (let i = 0, len = array.length; i < len; i++) parent.insertBefore(array[i], marker);
 }
 function cleanChildren(parent, current, marker, replacement) {
+  parent = getChildRoot(parent);
   if (marker === undefined) return parent.textContent = "";
   if (current.length) {
     let inserted = false;
@@ -615,17 +657,33 @@ function ssrHydrationKey() {}
 function resolveSSRNode(node) {}
 function escape(html) {}
 
-function render(...args) {
-  const result = render$1(...args);
-  return result;
-}
 const isServer = false;
 const isDev = false;
-const SVG_NAMESPACE = "http://www.w3.org/2000/svg";
-function createElement(tagName, isSVG = false, is = undefined) {
-  return isSVG ? document.createElementNS(SVG_NAMESPACE, tagName) : document.createElement(tagName, {
-    is
+function render(code, element, init, options = {}) {
+  const renderRoot = element.localName === "template" ? element.content : element;
+  let disposer;
+  createRoot(dispose => {
+    disposer = dispose;
+    if (element === document) {
+      flatten(code);
+      return;
+    }
+    const marker = renderRoot.firstChild ? null : undefined;
+    try {
+      const tree = code();
+      insert(element, () => tree, marker, init, {
+        schedule: true
+      });
+    } finally {
+    }
+  }, {
+    id: options.renderId
   });
+  flush();
+  return () => {
+    disposer();
+    renderRoot.textContent = "";
+  };
 }
 const hydrate = (...args) => {
   enableHydration();
@@ -651,6 +709,29 @@ function Portal(props) {
   });
   return treeMarker;
 }
+function createDynamic(component, props) {
+  const cached = createMemo$1(component);
+  return createMemo$1(() => {
+    const component = cached();
+    switch (typeof component) {
+      case "function":
+        return untrack(() => component(props));
+      case "string":
+        const el = sharedConfig.hydrating ? getNextElement() : createElement(component, untrack(() => props.is));
+        spread(el, props);
+        return el;
+    }
+  });
+}
+function Dynamic(props) {
+  const others = omit(props, "component");
+  return createDynamic(() => props.component, others);
+}
+function createElement(tagName, is = undefined) {
+  return SVGElements.has(tagName) ? document.createElementNS(Namespaces.svg, tagName) : MathMLElements.has(tagName) ? document.createElementNS(Namespaces.mathml, tagName) : document.createElement(tagName, {
+    is
+  });
+}
 function createElementProxy(el, marker) {
   return new Proxy(el, {
     get(target, prop) {
@@ -668,24 +749,5 @@ function createElementProxy(el, marker) {
     }
   });
 }
-function createDynamic(component, props) {
-  const cached = createMemo$1(component);
-  return createMemo$1(() => {
-    const component = cached();
-    switch (typeof component) {
-      case "function":
-        return untrack(() => component(props));
-      case "string":
-        const isSvg = SVGElements.has(component);
-        const el = sharedConfig.hydrating ? getNextElement() : createElement(component, isSvg, untrack(() => props.is));
-        spread(el, props, isSvg);
-        return el;
-    }
-  });
-}
-function Dynamic(props) {
-  const others = omit(props, "component");
-  return createDynamic(() => props.component, others);
-}
 
 export { voidFn as Assets, ChildProperties, DOMElements, DOMWithState, DelegatedEvents, Dynamic, voidFn as HydrationScript, MathMLElements, Namespaces, Portal, RequestContext, SVGElements, addEventListener, applyRef, assign, className, clearDelegatedEvents, createDynamic, delegateEvents, dynamicProperty, effect, escape, voidFn as generateHydrationScript, voidFn as getAssets, getFirstChild, getHydrationKey, getNextElement, getNextMarker, getNextMatch, getNextSibling, voidFn as getRequestEvent, hydrate, insert, isDev, isServer, memo, ref, render, renderToStream, renderToString, renderToStringAsync, resolveSSRNode, runHydrationEvents, setAttribute, setAttributeNS, setProperty, setStyleProperty, spread, ssr, ssrAttribute, ssrClassList, ssrElement, ssrHydrationKey, ssrStyle, style, template, voidFn as useAssets };

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@solidjs/web",
   "description": "Solid's web runtime for the browser and the server",
-  "version": "2.0.0-beta.6",
+  "version": "2.0.0-beta.8",
   "author": "Ryan Carniato",
   "license": "MIT",
   "homepage": "https://solidjs.com",
@@ -21,53 +21,94 @@
   "files": [
     "dist",
     "types",
+    "types-cjs",
     "package.json",
     "storage/dist",
     "storage/types",
+    "storage/types-cjs",
     "storage/package.json"
   ],
   "exports": {
     ".": {
       "worker": {
-        "types": "./types/index.d.ts",
-        "import": "./dist/server.js",
-        "require": "./dist/server.cjs"
+        "import": {
+          "types": "./types/index.d.ts",
+          "default": "./dist/server.js"
+        },
+        "require": {
+          "types": "./types-cjs/index.d.cts",
+          "default": "./dist/server.cjs"
+        }
       },
       "browser": {
         "development": {
+          "import": {
+            "types": "./types/index.d.ts",
+            "default": "./dist/dev.js"
+          },
+          "require": {
+            "types": "./types-cjs/index.d.cts",
+            "default": "./dist/dev.cjs"
+          }
+        },
+        "import": {
           "types": "./types/index.d.ts",
-          "import": "./dist/dev.js",
-          "require": "./dist/dev.cjs"
+          "default": "./dist/web.js"
         },
-        "types": "./types/index.d.ts",
-        "import": "./dist/web.js",
-        "require": "./dist/web.cjs"
+        "require": {
+          "types": "./types-cjs/index.d.cts",
+          "default": "./dist/web.cjs"
+        }
       },
       "deno": {
-        "types": "./types/index.d.ts",
-        "import": "./dist/server.js",
-        "require": "./dist/server.cjs"
+        "import": {
+          "types": "./types/index.d.ts",
+          "default": "./dist/server.js"
+        },
+        "require": {
+          "types": "./types-cjs/index.d.cts",
+          "default": "./dist/server.cjs"
+        }
       },
       "node": {
-        "types": "./types/index.d.ts",
-        "import": "./dist/server.js",
-        "require": "./dist/server.cjs"
+        "import": {
+          "types": "./types/index.d.ts",
+          "default": "./dist/server.js"
+        },
+        "require": {
+          "types": "./types-cjs/index.d.cts",
+          "default": "./dist/server.cjs"
+        }
       },
       "development": {
+        "import": {
+          "types": "./types/index.d.ts",
+          "default": "./dist/dev.js"
+        },
+        "require": {
+          "types": "./types-cjs/index.d.cts",
+          "default": "./dist/dev.cjs"
+        }
+      },
+      "import": {
         "types": "./types/index.d.ts",
-        "import": "./dist/dev.js",
-        "require": "./dist/dev.cjs"
+        "default": "./dist/web.js"
       },
-      "types": "./types/index.d.ts",
-      "import": "./dist/web.js",
-      "require": "./dist/web.cjs"
+      "require": {
+        "types": "./types-cjs/index.d.cts",
+        "default": "./dist/web.cjs"
+      }
     },
     "./storage": {
-      "types": "./storage/types/index.d.ts",
-      "import": "./storage/dist/storage.js",
-      "require": "./storage/dist/storage.cjs"
+      "import": {
+        "types": "./storage/types/index.d.ts",
+        "default": "./storage/dist/storage.js"
+      },
+      "require": {
+        "types": "./storage/types-cjs/index.d.cts",
+        "default": "./storage/dist/storage.cjs"
+      }
     },
-    "./dist/*": "./dist/*",
     "./types/*": "./types/*"
   },
   "dependencies": {
@@ -75,23 +116,24 @@
     "seroval-plugins": "^1.1.0"
   },
   "peerDependencies": {
-    "@solidjs/signals": "^0.13.11",
-    "solid-js": "^2.0.0-beta.6"
+    "@solidjs/signals": "^2.0.0-beta.8",
+    "solid-js": "^2.0.0-beta.8"
   },
   "devDependencies": {
-    "@solidjs/signals": "^0.13.11",
-    "solid-js": "2.0.0-beta.6"
+    "@solidjs/signals": "2.0.0-beta.8",
+    "solid-js": "2.0.0-beta.8"
   },
   "scripts": {
     "build": "npm-run-all -nl build:*",
     "build:clean": "rimraf dist/",
     "build:js": "rollup -c",
     "link": "symlink-dir . node_modules/@solidjs/web",
-    "types": "npm-run-all -nl types:*",
-    "types:clean": "rimraf types/",
+    "types": "npm-run-all -nl types:clean types:web types:copy-web types:web-storage types:cjs",
+    "types:clean": "rimraf types/ types-cjs/ storage/types-cjs/",
     "types:web": "tsc --project ./tsconfig.build.json",
     "types:copy-web": "ncp ../../node_modules/dom-expressions/src/client.d.ts ./types/client.d.ts && ncp ../../node_modules/dom-expressions/src/server.d.ts ./types/server.d.ts",
     "types:web-storage": "tsc --project ./storage/tsconfig.build.json",
+    "types:cjs": "node ../../scripts/sync-dual-types.mjs ./types ./types-cjs ./storage/types ./storage/types-cjs",
     "test": "vitest run && vitest run --config vite.config.server.mjs && vitest run --config vite.config.hydrate.mjs",
     "test:server": "vitest run --config vite.config.server.mjs",
     "coverage": "vitest run --coverage",

package/storage/package.json

@@ -7,9 +7,14 @@
   "sideEffects": false,
   "exports": {
     ".": {
-      "types": "./types/index.d.ts",
-      "import": "./dist/storage.js",
-      "require": "./dist/storage.cjs"
+      "import": {
+        "types": "./types/index.d.ts",
+        "default": "./dist/storage.js"
+      },
+      "require": {
+        "types": "./types-cjs/index.d.cts",
+        "default": "./dist/storage.cjs"
+      }
     }
   }
 }

package/storage/types/src/index.d.ts

@@ -1,11 +1,30 @@
-import { hydrate as hydrateCore, render as renderCore } from "./client.js";
+import { hydrate as hydrateCore } from "./client.js";
 import { JSX, ComponentProps, ValidComponent } from "solid-js";
 export * from "./client.js";
-export declare function render(...args: Parameters<typeof renderCore>): ReturnType<typeof renderCore>;
-export { For, Show, Switch, Match, Errored, Loading, Reveal, NoHydration, Hydration, merge as mergeProps } from "solid-js";
 export * from "./server-mock.js";
+export { For, Show, Switch, Match, Errored, Loading, Repeat, Reveal, NoHydration, Hydration, merge as mergeProps } from "solid-js";
 export declare const isServer: boolean;
 export declare const isDev: boolean;
+type MountableElement = Element | Document | ShadowRoot | DocumentFragment | Node;
+export type DynamicProps<T extends ValidComponent, P = ComponentProps<T>> = {
+    [K in keyof P]: P[K];
+} & {
+    component: T | undefined;
+};
+/**
+ * Renders a component tree into a DOM element and returns a dispose function.
+ *
+ * The top-level insert runs with `schedule: true` so its initial DOM attach
+ * goes through the effect queue rather than executing inline. This lets the
+ * mount participate in transitions: if an uncaught async read surfaces during
+ * the initial render (no `Loading` ancestor absorbs it), the mount is held by
+ * the transition and attaches atomically once all pending settles. On the
+ * no-async happy path the tail `flush()` drains the queued callback so the
+ * attach is synchronous by the time `render()` returns.
+ */
+export declare function render(code: () => JSX.Element, element: MountableElement, init?: unknown, options?: {
+    renderId?: string;
+}): () => void;
 export declare const hydrate: typeof hydrateCore;
 /**
  * Renders components somewhere else in the DOM
@@ -18,11 +37,6 @@ export declare function Portal<T extends boolean = false, S extends boolean = fa
     mount?: Element;
     children: JSX.Element;
 }): Text;
-export type DynamicProps<T extends ValidComponent, P = ComponentProps<T>> = {
-    [K in keyof P]: P[K];
-} & {
-    component: T | undefined;
-};
 /**
  * Renders an arbitrary component or element with the given props
  *

package/storage/types-cjs/index.d.cts

@@ -0,0 +1,2 @@
+import type { RequestEvent } from "@solidjs/web";
+export declare function provideRequestEvent<T extends RequestEvent, U>(init: T, cb: () => U): U;

package/storage/types-cjs/package.json

@@ -0,0 +1,3 @@
+{
+  "type": "commonjs"
+}

package/storage/types-cjs/src/client.d.cts

@@ -0,0 +1 @@
+export * from "dom-expressions/src/client.js";

package/storage/types-cjs/src/index.d.cts

@@ -0,0 +1,60 @@
+import { hydrate as hydrateCore } from "./client.cjs";
+import { JSX, ComponentProps, ValidComponent } from "solid-js";
+export * from "./client.cjs";
+export * from "./server-mock.cjs";
+export { For, Show, Switch, Match, Errored, Loading, Repeat, Reveal, NoHydration, Hydration, merge as mergeProps } from "solid-js";
+export declare const isServer: boolean;
+export declare const isDev: boolean;
+type MountableElement = Element | Document | ShadowRoot | DocumentFragment | Node;
+export type DynamicProps<T extends ValidComponent, P = ComponentProps<T>> = {
+    [K in keyof P]: P[K];
+} & {
+    component: T | undefined;
+};
+/**
+ * Renders a component tree into a DOM element and returns a dispose function.
+ *
+ * The top-level insert runs with `schedule: true` so its initial DOM attach
+ * goes through the effect queue rather than executing inline. This lets the
+ * mount participate in transitions: if an uncaught async read surfaces during
+ * the initial render (no `Loading` ancestor absorbs it), the mount is held by
+ * the transition and attaches atomically once all pending settles. On the
+ * no-async happy path the tail `flush()` drains the queued callback so the
+ * attach is synchronous by the time `render()` returns.
+ */
+export declare function render(code: () => JSX.Element, element: MountableElement, init?: unknown, options?: {
+    renderId?: string;
+}): () => void;
+export declare const hydrate: typeof hydrateCore;
+/**
+ * Renders components somewhere else in the DOM
+ *
+ * Useful for inserting modals and tooltips outside of an cropping layout. If no mount point is given, the portal is inserted in document.body; it is wrapped in a `<div>` unless the target is document.head or `isSVG` is true. setting `useShadow` to true places the element in a shadow root to isolate styles.
+ *
+ * @description https://docs.solidjs.com/reference/components/portal
+ */
+export declare function Portal<T extends boolean = false, S extends boolean = false>(props: {
+    mount?: Element;
+    children: JSX.Element;
+}): Text;
+/**
+ * Renders an arbitrary component or element with the given props
+ *
+ * This is a lower level version of the `Dynamic` component, useful for
+ * performance optimizations in libraries. Do not use this unless you know
+ * what you are doing.
+ * ```typescript
+ * const element = () => multiline() ? 'textarea' : 'input';
+ * createDynamic(element, { value: value() });
+ * ```
+ * @description https://docs.solidjs.com/reference/components/dynamic
+ */
+export declare function createDynamic<T extends ValidComponent>(component: () => T | undefined, props: ComponentProps<T>): JSX.Element;
+/**
+ * Renders an arbitrary custom or native component and passes the other props
+ * ```typescript
+ * <Dynamic component={multiline() ? 'textarea' : 'input'} value={value()} />
+ * ```
+ * @description https://docs.solidjs.com/reference/components/dynamic
+ */
+export declare function Dynamic<T extends ValidComponent>(props: DynamicProps<T>): JSX.Element;