@solidjs/web 2.0.0-beta.7 → 2.0.0-beta.9

package/dist/web.js

@@ -1,6 +1,5 @@
-import { createRenderEffect, createMemo as createMemo$1, sharedConfig, untrack, runWithOwner, flatten, createRoot, omit, enableHydration } from 'solid-js';
+import { createRenderEffect, createMemo, sharedConfig, untrack, runWithOwner, flatten, createRoot, createComponent, 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: {
@@ -44,16 +43,20 @@ const Namespaces = {
   xlink: "http://www.w3.org/1999/xlink",
   xml: "http://www.w3.org/XML/1998/namespace"
 };
+const VoidElements = /*#__PURE__*/new Set(["area", "base", "br", "col", "embed", "hr", "img", "input", "link", "meta", "param", "source", "track", "wbr"]);
+const RawTextElements = /*#__PURE__*/new Set(["style", "script", "noscript", "template", "textarea", "title"]);
 const DOMElements = /*#__PURE__*/new Set(["html", "base", "head", "link", "meta", "style", "title", "body", "address", "article", "aside", "footer", "header", "main", "nav", "section", "body", "blockquote", "dd", "div", "dl", "dt", "figcaption", "figure", "hr", "li", "ol", "p", "pre", "ul", "a", "abbr", "b", "bdi", "bdo", "br", "cite", "code", "data", "dfn", "em", "i", "kbd", "mark", "q", "rp", "rt", "ruby", "s", "samp", "small", "span", "strong", "sub", "sup", "time", "u", "var", "wbr", "area", "audio", "img", "map", "track", "video", "embed", "iframe", "object", "param", "picture", "portal", "source", "svg", "math", "canvas", "noscript", "script", "del", "ins", "caption", "col", "colgroup", "table", "tbody", "td", "tfoot", "th", "thead", "tr", "button", "datalist", "fieldset", "form", "input", "label", "legend", "meter", "optgroup", "option", "output", "progress", "select", "textarea", "details", "dialog", "menu", "summary", "details", "slot", "template", "acronym", "applet", "basefont", "bgsound", "big", "blink", "center", "content", "dir", "font", "frame", "frameset", "hgroup", "image", "keygen", "marquee", "menuitem", "nobr", "noembed", "noframes", "plaintext", "rb", "rtc", "shadow", "spacer", "strike", "tt", "xmp", "a", "abbr", "acronym", "address", "applet", "area", "article", "aside", "audio", "b", "base", "basefont", "bdi", "bdo", "bgsound", "big", "blink", "blockquote", "body", "br", "button", "canvas", "caption", "center", "cite", "code", "col", "colgroup", "content", "data", "datalist", "dd", "del", "details", "dfn", "dialog", "dir", "div", "dl", "dt", "em", "embed", "fieldset", "figcaption", "figure", "font", "footer", "form", "frame", "frameset", "head", "header", "hgroup", "hr", "html", "i", "iframe", "image", "img", "input", "ins", "kbd", "keygen", "label", "legend", "li", "link", "main", "map", "mark", "marquee", "menu", "menuitem", "meta", "meter", "nav", "nobr", "noembed", "noframes", "noscript", "object", "ol", "optgroup", "option", "output", "p", "param", "picture", "plaintext", "portal", "pre", "progress", "q", "rb", "rp", "rt", "rtc", "ruby", "s", "samp", "script", "section", "select", "shadow", "slot", "small", "source", "spacer", "span", "strike", "strong", "style", "sub", "summary", "sup", "table", "tbody", "td", "template", "textarea", "tfoot", "th", "thead", "time", "title", "tr", "track", "tt", "u", "ul", "var", "video", "wbr", "xmp", "input", "h1", "h2", "h3", "h4", "h5", "h6",
 "webview",
 "isindex", "listing", "multicol", "nextid", "noindex", "search"]);
 
-const effect = (fn, effectFn) => createRenderEffect(fn, effectFn, {
+const transparentOptions = {
   transparent: true
-});
-const memo = (fn, transparent) => transparent ? fn.$r ? fn : createMemo(() => fn(), {
-  transparent: true
-}) : createMemo$1(() => fn());
+};
+const effect = (fn, effectFn, options) => createRenderEffect(fn, effectFn, options ? {
+  transparent: true,
+  ...options
+} : transparentOptions);
+const memo = fn => createMemo(() => fn());
 
 function reconcileArrays(parentNode, a, b) {
   let bLength = b.length,
@@ -113,12 +116,18 @@ function reconcileArrays(parentNode, a, b) {
 }
 
 const $$EVENTS = "_$DX_DELEGATE";
+const INNER_OWNED = {};
 function render$1(code, element, init, options = {}) {
   const renderRoot = getChildRoot(element);
   let disposer;
   createRoot(dispose => {
     disposer = dispose;
-    element === document ? flatten(code) : insert(element, code(), renderRoot.firstChild ? null : undefined, init);
+    if (element === document) {
+      flatten(code);
+    } else {
+      const tree = code();
+      insert(element, () => tree, renderRoot.firstChild ? null : undefined, init, options.insertOptions);
+    }
   }, {
     id: options.renderId
   });
@@ -163,7 +172,7 @@ function setAttribute(node, name, value) {
 }
 function setAttributeNS(node, namespace, name, value) {
   if (isHydrating(node)) return;
-  if (value == null || value === false) node.removeAttributeNS(namespace, name);else node.setAttributeNS(namespace, name, value === true ? "" : value);
+  if (value == null || value === false) node.removeAttributeNS(namespace, name.indexOf(":") > -1 ? name.split(":").pop() : name);else node.setAttributeNS(namespace, name, value === true ? "" : value);
 }
 function className(node, value, prev) {
   if (isHydrating(node)) return;
@@ -215,7 +224,6 @@ function style(node, value, prev) {
   if (typeof value === "string") return nodeStyle.cssText = value;
   typeof prev === "string" && (nodeStyle.cssText = prev = undefined);
   prev || (prev = {});
-  value || (value = {});
   let v, s;
   for (s in value) {
     v = value[s];
@@ -261,7 +269,7 @@ 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 = [];
@@ -279,13 +287,25 @@ function insert(parent, accessor, marker, initial) {
     accessor = normalize(accessor, initial, multi, true);
     if (typeof accessor !== "function") return insertExpression(parent, accessor, initial, marker);
   }
-  accessor = memo(accessor, true);
   if (multi && initial.length === 0) {
     const placeholder = document.createTextNode("");
     childRoot.insertBefore(placeholder, marker);
     initial = [placeholder];
   }
-  effect((prev = initial) => normalize(accessor, prev, multi), (value, current = initial) => insertExpression(parent, value, current, marker));
+  let current = initial;
+  effect(() => {
+    const value = normalize(accessor(), current, multi, true);
+    if (typeof value !== "function") return value;
+    effect(() => normalize(value, current, multi), inner => {
+      insertExpression(parent, inner, current, marker);
+      current = inner;
+    }, options);
+    return INNER_OWNED;
+  }, value => {
+    if (value === INNER_OWNED) return;
+    insertExpression(parent, value, current, marker);
+    current = value;
+  }, options);
 }
 function assign(node, props, skipChildren, prevProps = {}, skipRef = false) {
   const nodeName = node.nodeName;
@@ -653,16 +673,20 @@ function ssrHydrationKey() {}
 function resolveSSRNode(node) {}
 function escape(html) {}
 
-function render(...args) {
-  const result = render$1(...args);
-  return result;
-}
 const isServer = false;
 const isDev = false;
-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 render(code, element, init, options = {}) {
+  try {
+    const dispose = render$1(code, element, init, {
+      ...options,
+      insertOptions: {
+        schedule: true
+      }
+    });
+    flush();
+    return dispose;
+  } finally {
+  }
 }
 const hydrate = (...args) => {
   enableHydration();
@@ -673,7 +697,7 @@ function Portal(props) {
     startMarker = document.createTextNode(""),
     endMarker = document.createTextNode(""),
     mount = () => createElementProxy(props.mount || document.body, treeMarker);
-  let content = createMemo$1(() => [startMarker, props.children]);
+  let content = createMemo(() => [startMarker, props.children]);
   createRenderEffect(() => [mount(), content()], ([m, c]) => {
     m.appendChild(endMarker);
     insert(m, c, endMarker);
@@ -688,6 +712,33 @@ function Portal(props) {
   });
   return treeMarker;
 }
+function dynamic(source) {
+  const cached = createMemo(source, {
+    lazy: true
+  });
+  return props => {
+    return createMemo(() => {
+      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 Comp = dynamic(() => props.component);
+  return createComponent(Comp, omit(props, "component"));
+}
+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) {
@@ -705,23 +756,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 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);
-}
 
-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 };
+export { voidFn as Assets, ChildProperties, DOMElements, DOMWithState, DelegatedEvents, Dynamic, voidFn as HydrationScript, MathMLElements, Namespaces, Portal, RawTextElements, RequestContext, SVGElements, VoidElements, addEventListener, applyRef, assign, className, clearDelegatedEvents, delegateEvents, dynamic, 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,13 +1,14 @@
 {
   "name": "@solidjs/web",
-  "description": "Solid's web runtime for the browser and the server",
-  "version": "2.0.0-beta.7",
+  "description": "Solid's web runtime: client rendering, hydration, SSR, and DOM-specific control flow (Portal, Dynamic).",
+  "version": "2.0.0-beta.9",
   "author": "Ryan Carniato",
   "license": "MIT",
   "homepage": "https://solidjs.com",
   "repository": {
     "type": "git",
-    "url": "https://github.com/solidjs/solid-web"
+    "url": "git+https://github.com/solidjs/solid.git",
+    "directory": "packages/solid-web"
   },
   "publishConfig": {
     "access": "public"
@@ -116,12 +117,10 @@
     "seroval-plugins": "^1.1.0"
   },
   "peerDependencies": {
-    "@solidjs/signals": "^2.0.0-beta.7",
-    "solid-js": "^2.0.0-beta.7"
+    "solid-js": "^2.0.0-beta.9"
   },
   "devDependencies": {
-    "@solidjs/signals": "2.0.0-beta.7",
-    "solid-js": "2.0.0-beta.7"
+    "solid-js": "2.0.0-beta.9"
   },
   "scripts": {
     "build": "npm-run-all -nl build:*",

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

@@ -1,16 +1,78 @@
-import { hydrate as hydrateCore, render as renderCore } from "./client.js";
-import { JSX, ComponentProps, ValidComponent } from "solid-js";
+import { hydrate as hydrateCore } from "./client.js";
+import { JSX, Component, 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, Repeat, 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 | null | undefined | false;
+};
+/**
+ * Renders a component tree into a DOM element. Returns a dispose function
+ * that tears the tree down and cleans up reactive scopes when called.
+ *
+ * @example
+ * ```tsx
+ * import { render } from "@solidjs/web";
+ *
+ * const dispose = render(() => <App />, document.getElementById("root")!);
+ *
+ * // Later, to unmount:
+ * dispose();
+ * ```
+ *
+ * @remarks
+ * The top-level insert is queued via `insertOptions: { 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. The dev enforcement window scopes
+ * `ASYNC_OUTSIDE_LOADING_BOUNDARY` to the initial mount only.
+ */
+export declare function render(code: () => JSX.Element, element: MountableElement, init?: unknown, options?: {
+    renderId?: string;
+}): () => void;
+/**
+ * Resumes a server-rendered tree on the client, attaching event listeners
+ * and reactive bindings without reconstructing the DOM. Returns a `dispose`
+ * function that tears down reactive scopes (DOM nodes are left in place).
+ *
+ * Use this when the page HTML was produced by `renderToString`,
+ * `renderToStringAsync`, or `renderToStream`. For client-only apps, use
+ * `render` instead.
+ *
+ * Pass `options.renderId` to hydrate one of multiple roots emitted by a
+ * server render that used the same id.
+ *
+ * @example
+ * ```tsx
+ * import { hydrate } from "@solidjs/web";
+ *
+ * hydrate(() => <App />, document.getElementById("root")!);
+ * ```
+ */
 export declare const hydrate: typeof hydrateCore;
 /**
- * Renders components somewhere else in the DOM
+ * Renders its children into a different part of the DOM (modal roots,
+ * tooltips, layers that need to escape an `overflow: hidden` ancestor).
+ *
+ * If `mount` is omitted, the portal attaches to `document.body`. The portal
+ * still participates in the parent's reactive scope and disposes when the
+ * parent does.
  *
- * 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.
+ * @example
+ * ```tsx
+ * <Portal mount={document.getElementById("modal-root")!}>
+ *   <Dialog />
+ * </Portal>
+ * ```
  *
  * @description https://docs.solidjs.com/reference/components/portal
  */
@@ -18,24 +80,25 @@ 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
+ * Returns a stable `Component` whose identity is driven by a reactive (and
+ * optionally async) `source`. The returned component can be used anywhere a
+ * normal component is used; children and props flow through JSX as usual.
+ *
+ * `source` may return a component, a native tag name (`'input'`, `'textarea'`,
+ * etc.), `undefined`, or a `Promise` of any of the above. A pending promise
+ * propagates as `NotReadyError` through the surrounding reactive scope, so
+ * async swaps compose with `Loading`/Suspense boundaries the same way as
+ * `lazy`.
  *
- * 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() });
+ * const User = dynamic(() => getUserComp(props.id));
+ * return <User>client content</User>;
  * ```
+ *
  * @description https://docs.solidjs.com/reference/components/dynamic
  */
-export declare function createDynamic<T extends ValidComponent>(component: () => T | undefined, props: ComponentProps<T>): JSX.Element;
+export declare function dynamic<T extends ValidComponent>(source: () => T | Promise<T> | null | undefined | false): Component<ComponentProps<T>>;
 /**
  * Renders an arbitrary custom or native component and passes the other props
  * ```typescript

package/storage/types/src/server-mock.d.ts

@@ -1,3 +1,18 @@
+/**
+ * Renders a component tree synchronously to an HTML string. Async reads inside
+ * `<Loading>` boundaries emit their `fallback` content; for full-graph
+ * resolution use `renderToStringAsync` instead.
+ *
+ * Pair the returned HTML with `hydrate()` on the client.
+ *
+ * @example
+ * ```tsx
+ * import { renderToString } from "@solidjs/web";
+ *
+ * const html = renderToString(() => <App />);
+ * res.send(`<!doctype html><html><body><div id="root">${html}</div></body></html>`);
+ * ```
+ */
 export declare function renderToString<T>(fn: () => T, options?: {
     nonce?: string;
     renderId?: string;
@@ -12,6 +27,21 @@ export declare function renderToString<T>(fn: () => T, options?: {
     }>;
     onError?: (err: any) => void;
 }): string;
+/**
+ * Renders a component tree to an HTML string and awaits all async reads in the
+ * subtree before resolving. The returned HTML reflects the fully-settled state
+ * — no `<Loading>` fallbacks appear in the output.
+ *
+ * Use this when you want a complete page in one round-trip. For incremental
+ * streaming with progressive boundary resolution, use `renderToStream`.
+ *
+ * @example
+ * ```tsx
+ * import { renderToStringAsync } from "@solidjs/web";
+ *
+ * const html = await renderToStringAsync(() => <App />);
+ * ```
+ */
 export declare function renderToStringAsync<T>(fn: () => T, options?: {
     timeoutMs?: number;
     nonce?: string;
@@ -27,6 +57,25 @@ export declare function renderToStringAsync<T>(fn: () => T, options?: {
     }>;
     onError?: (err: any) => void;
 }): Promise<string>;
+/**
+ * Streams an HTML response, flushing the synchronous shell first and then
+ * progressively emitting async-resolved fragments as their `<Loading>`
+ * boundaries settle. Good for time-to-first-byte sensitive pages.
+ *
+ * Returns an object with `pipe`/`pipeTo` for piping to a Node `Writable` or
+ * a Web `WritableStream`, plus a `then` for awaiting full completion.
+ *
+ * @example
+ * ```tsx
+ * import { renderToStream } from "@solidjs/web";
+ *
+ * // Node:
+ * renderToStream(() => <App />).pipe(res);
+ *
+ * // Web (Workers / Deno):
+ * await renderToStream(() => <App />).pipeTo(stream.writable);
+ * ```
+ */
 export declare function renderToStream<T>(fn: () => T, options?: {
     nonce?: string;
     renderId?: string;
@@ -54,19 +103,27 @@ export declare function renderToStream<T>(fn: () => T, options?: {
     }) => void;
     pipeTo: (writable: WritableStream) => Promise<void>;
 };
+/** Compiler primitive — emitted by JSX-DOM-Expressions for tagged-template SSR output. Not meant for hand-written code. */
 export declare function ssr(template: string[] | string, ...nodes: any[]): {
     t: string;
 };
+/** Compiler primitive — emitted by JSX-DOM-Expressions for SSR element output. Not meant for hand-written code. */
 export declare function ssrElement(name: string, props: any, children: any, needsId: boolean): {
     t: string;
 };
+/** Compiler primitive — serializes a classList object for SSR output. Not meant for hand-written code. */
 export declare function ssrClassList(value: {
     [k: string]: boolean;
 }): string;
+/** Compiler primitive — serializes a style object for SSR output. Not meant for hand-written code. */
 export declare function ssrStyle(value: {
     [k: string]: string;
 }): string;
+/** Compiler primitive — serializes a boolean attribute for SSR output. Not meant for hand-written code. */
 export declare function ssrAttribute(key: string, value: boolean): string;
+/** Compiler primitive — generates the hydration-key attribute for SSR output. Not meant for hand-written code. */
 export declare function ssrHydrationKey(): string;
+/** Compiler primitive — collapses an SSR-shaped node into its HTML string. Not meant for hand-written code. */
 export declare function resolveSSRNode(node: any): string;
+/** Escapes a string for safe inclusion in HTML output. Useful when constructing SSR fragments by hand. */
 export declare function escape(html: string): string;

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

@@ -1,16 +1,78 @@
-import { hydrate as hydrateCore, render as renderCore } from "./client.cjs";
-import { JSX, ComponentProps, ValidComponent } from "solid-js";
+import { hydrate as hydrateCore } from "./client.cjs";
+import { JSX, Component, ComponentProps, ValidComponent } from "solid-js";
 export * from "./client.cjs";
-export declare function render(...args: Parameters<typeof renderCore>): ReturnType<typeof renderCore>;
-export { For, Show, Switch, Match, Errored, Loading, Repeat, Reveal, NoHydration, Hydration, merge as mergeProps } from "solid-js";
 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 | null | undefined | false;
+};
+/**
+ * Renders a component tree into a DOM element. Returns a dispose function
+ * that tears the tree down and cleans up reactive scopes when called.
+ *
+ * @example
+ * ```tsx
+ * import { render } from "@solidjs/web";
+ *
+ * const dispose = render(() => <App />, document.getElementById("root")!);
+ *
+ * // Later, to unmount:
+ * dispose();
+ * ```
+ *
+ * @remarks
+ * The top-level insert is queued via `insertOptions: { 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. The dev enforcement window scopes
+ * `ASYNC_OUTSIDE_LOADING_BOUNDARY` to the initial mount only.
+ */
+export declare function render(code: () => JSX.Element, element: MountableElement, init?: unknown, options?: {
+    renderId?: string;
+}): () => void;
+/**
+ * Resumes a server-rendered tree on the client, attaching event listeners
+ * and reactive bindings without reconstructing the DOM. Returns a `dispose`
+ * function that tears down reactive scopes (DOM nodes are left in place).
+ *
+ * Use this when the page HTML was produced by `renderToString`,
+ * `renderToStringAsync`, or `renderToStream`. For client-only apps, use
+ * `render` instead.
+ *
+ * Pass `options.renderId` to hydrate one of multiple roots emitted by a
+ * server render that used the same id.
+ *
+ * @example
+ * ```tsx
+ * import { hydrate } from "@solidjs/web";
+ *
+ * hydrate(() => <App />, document.getElementById("root")!);
+ * ```
+ */
 export declare const hydrate: typeof hydrateCore;
 /**
- * Renders components somewhere else in the DOM
+ * Renders its children into a different part of the DOM (modal roots,
+ * tooltips, layers that need to escape an `overflow: hidden` ancestor).
+ *
+ * If `mount` is omitted, the portal attaches to `document.body`. The portal
+ * still participates in the parent's reactive scope and disposes when the
+ * parent does.
  *
- * 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.
+ * @example
+ * ```tsx
+ * <Portal mount={document.getElementById("modal-root")!}>
+ *   <Dialog />
+ * </Portal>
+ * ```
  *
  * @description https://docs.solidjs.com/reference/components/portal
  */
@@ -18,24 +80,25 @@ 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
+ * Returns a stable `Component` whose identity is driven by a reactive (and
+ * optionally async) `source`. The returned component can be used anywhere a
+ * normal component is used; children and props flow through JSX as usual.
+ *
+ * `source` may return a component, a native tag name (`'input'`, `'textarea'`,
+ * etc.), `undefined`, or a `Promise` of any of the above. A pending promise
+ * propagates as `NotReadyError` through the surrounding reactive scope, so
+ * async swaps compose with `Loading`/Suspense boundaries the same way as
+ * `lazy`.
  *
- * 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() });
+ * const User = dynamic(() => getUserComp(props.id));
+ * return <User>client content</User>;
  * ```
+ *
  * @description https://docs.solidjs.com/reference/components/dynamic
  */
-export declare function createDynamic<T extends ValidComponent>(component: () => T | undefined, props: ComponentProps<T>): JSX.Element;
+export declare function dynamic<T extends ValidComponent>(source: () => T | Promise<T> | null | undefined | false): Component<ComponentProps<T>>;
 /**
  * Renders an arbitrary custom or native component and passes the other props
  * ```typescript