@solidjs/web 2.0.0-beta.0 → 2.0.0-beta.10

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

@@ -0,0 +1,171 @@
+import { hydrate as hydrateCore } from "./client.cjs";
+import { Component } from "solid-js";
+import type { JSX } from "./jsx.cjs";
+export * from "./client.cjs";
+export * from "./server-mock.cjs";
+export type { JSX } from "./jsx.cjs";
+export { For, Show, Switch, Match, Errored, Loading, Repeat, Reveal, NoHydration, Hydration } from "solid-js";
+import { merge } from "solid-js";
+/**
+ * Compiler-emitted prop-spread helper. The JSX transform (in
+ * `dom-expressions`) emits `mergeProps(...)` calls when compiling prop
+ * spreads on components — it is *not* a user-facing API. Application code
+ * should import `merge` from `solid-js` directly.
+ *
+ * @internal
+ */
+export declare const mergeProps: typeof merge;
+/**
+ * Build-time constant indicating whether code is running on the server. This
+ * client entry sets it to `false`; the matching server entry (`@solidjs/web`
+ * resolved through the `solid` server export condition) sets it to `true`.
+ *
+ * Bundlers can dead-code-eliminate branches gated on `isServer`, so guarding
+ * browser-only code with `if (!isServer) {…}` keeps it out of the SSR bundle
+ * entirely.
+ *
+ * @example
+ * ```ts
+ * import { isServer } from "@solidjs/web";
+ *
+ * if (!isServer) {
+ *   // Browser-only: tree-shaken out of the SSR bundle.
+ *   window.addEventListener("resize", onResize);
+ * }
+ * ```
+ */
+export declare const isServer: boolean;
+/**
+ * Build-time constant indicating whether code is running in a dev build.
+ * Replaced statically (`_SOLID_DEV_`) by the bundler integration, so guards
+ * like `if (isDev) {…}` are stripped from production builds.
+ *
+ * Use this to gate dev-only diagnostics, warnings, or expensive invariants
+ * that should never ship to production.
+ *
+ * @example
+ * ```ts
+ * import { isDev } from "@solidjs/web";
+ *
+ * if (isDev) {
+ *   console.warn("debug-only path");
+ * }
+ * ```
+ */
+export declare const isDev: boolean;
+type MountableElement = Element | Document | ShadowRoot | DocumentFragment | Node;
+export type IntrinsicElement = Extract<keyof JSX.IntrinsicElements, string>;
+export type ValidComponent = IntrinsicElement | Component<any> | (string & {});
+export type ComponentProps<T extends ValidComponent> = T extends Component<infer P> ? P : T extends keyof JSX.IntrinsicElements ? JSX.IntrinsicElements[T] : Record<string, unknown>;
+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 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.
+ *
+ * @example
+ * ```tsx
+ * <Portal mount={document.getElementById("modal-root")!}>
+ *   <Dialog />
+ * </Portal>
+ * ```
+ *
+ * @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;
+}): JSX.Element;
+/**
+ * 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>` boundaries the same way as `lazy`.
+ *
+ * @example
+ * ```tsx
+ * // `source` can return either a custom Component or a native tag
+ * // name — they're interchangeable, and the returned reference is a
+ * // stable Component you can use anywhere a normal one would go.
+ * const Field = dynamic(() => multiline() ? RichTextEditor : "input");
+ * return <Field value={value()} onInput={onInput} />;
+ * ```
+ *
+ * @description https://docs.solidjs.com/reference/components/dynamic
+ */
+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 forwards the other
+ * props. JSX form of `dynamic()` — same primitive, picked at the JSX site.
+ *
+ * @example
+ * ```tsx
+ * <Dynamic
+ *   component={multiline() ? RichTextEditor : "input"}
+ *   value={value()}
+ *   onInput={onInput}
+ * />
+ * ```
+ *
+ * @description https://docs.solidjs.com/reference/components/dynamic
+ */
+export declare function Dynamic<T extends ValidComponent>(props: DynamicProps<T>): JSX.Element;

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

@@ -0,0 +1,29 @@
+import type { ArrayElement as SolidArrayElement, Element as SolidElement } from "solid-js";
+import type { JSX as DOMJSX } from "dom-expressions/src/jsx.js";
+export declare namespace JSX {
+    type WithSolidChildren<T> = Omit<T, "children"> & {
+        children?: Element;
+    };
+    export type Element = SolidElement;
+    export interface ArrayElement extends SolidArrayElement {
+    }
+    export interface ElementClass extends DOMJSX.ElementClass {
+    }
+    export interface ElementAttributesProperty extends DOMJSX.ElementAttributesProperty {
+    }
+    export interface ElementChildrenAttribute extends DOMJSX.ElementChildrenAttribute {
+    }
+    export interface IntrinsicAttributes extends DOMJSX.IntrinsicAttributes {
+    }
+    export type IntrinsicElements = {
+        [K in keyof DOMJSX.IntrinsicElements]: WithSolidChildren<DOMJSX.IntrinsicElements[K]>;
+    };
+    export type HTMLAttributes<T> = WithSolidChildren<DOMJSX.HTMLAttributes<T>>;
+    export type SVGAttributes<T> = WithSolidChildren<DOMJSX.SVGAttributes<T>>;
+    export type MathMLAttributes<T> = WithSolidChildren<DOMJSX.MathMLAttributes<T>>;
+    export interface CustomEvents extends DOMJSX.CustomEvents {
+    }
+    export type EventHandler<T, E extends Event> = DOMJSX.EventHandler<T, E>;
+    export type EventHandlerUnion<T, E extends Event> = DOMJSX.EventHandlerUnion<T, E>;
+    export {};
+}

package/storage/types-cjs/src/server-mock.d.cts

@@ -0,0 +1,161 @@
+/**
+ * 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;
+    noScripts?: boolean;
+    plugins?: any[];
+    manifest?: Record<string, {
+        file: string;
+        css?: string[];
+        isEntry?: boolean;
+        isDynamicEntry?: boolean;
+        imports?: string[];
+    }>;
+    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;
+    renderId?: string;
+    noScripts?: boolean;
+    plugins?: any[];
+    manifest?: Record<string, {
+        file: string;
+        css?: string[];
+        isEntry?: boolean;
+        isDynamicEntry?: boolean;
+        imports?: string[];
+    }>;
+    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;
+    noScripts?: boolean;
+    plugins?: any[];
+    manifest?: Record<string, {
+        file: string;
+        css?: string[];
+        isEntry?: boolean;
+        isDynamicEntry?: boolean;
+        imports?: string[];
+    }>;
+    onCompleteShell?: (info: {
+        write: (v: string) => void;
+    }) => void;
+    onCompleteAll?: (info: {
+        write: (v: string) => void;
+    }) => void;
+    onError?: (err: any) => void;
+}): {
+    then: (fn: (html: string) => void) => void;
+    pipe: (writable: {
+        write: (v: string) => void;
+        end: () => void;
+    }) => void;
+    pipeTo: (writable: WritableStream) => Promise<void>;
+};
+/**
+ * Compiler primitive — emitted by JSX-DOM-Expressions for tagged-template
+ * SSR output. Not meant for hand-written code.
+ * @internal
+ */
+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.
+ * @internal
+ */
+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.
+ * @internal
+ */
+export declare function ssrClassList(value: {
+    [k: string]: boolean;
+}): string;
+/**
+ * Compiler primitive — serializes a style object for SSR output. Not meant
+ * for hand-written code.
+ * @internal
+ */
+export declare function ssrStyle(value: {
+    [k: string]: string;
+}): string;
+/**
+ * Compiler primitive — serializes a boolean attribute for SSR output. Not
+ * meant for hand-written code.
+ * @internal
+ */
+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.
+ * @internal
+ */
+export declare function ssrHydrationKey(): string;
+/**
+ * Compiler primitive — collapses an SSR-shaped node into its HTML string.
+ * Not meant for hand-written code.
+ * @internal
+ */
+export declare function resolveSSRNode(node: any): string;
+/**
+ * Escapes a string for safe inclusion in HTML output. Used by the SSR
+ * runtime; not generally part of user code.
+ * @internal
+ */
+export declare function escape(html: string): string;

package/storage/types-cjs/storage/src/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/types/client.d.ts

@@ -1,10 +1,13 @@
 import { JSX } from "./jsx.js";
-export const Properties: Set<string>;
+export const DOMWithState: Record<string, Record<string, 1 | 2>>;
 export const ChildProperties: Set<string>;
 export const DelegatedEvents: Set<string>;
 export const DOMElements: Set<string>;
 export const SVGElements: Set<string>;
-export const SVGNamespace: Record<string, string>;
+export const MathMLElements: Set<string>;
+export const VoidElements: Set<string>;
+export const RawTextElements: Set<string>;
+export const Namespaces: Record<string, string>;
 
 type MountableElement = Element | Document | ShadowRoot | DocumentFragment | Node;
 export function render(
@@ -13,8 +16,14 @@ export function render(
   init?: JSX.Element,
   options?: { owner?: unknown }
 ): () => void;
-export function template(html: string, isImportNode?: boolean, isSVG?: boolean, isMathML?: boolean): () => Element;
-export function effect<T>(fn: (prev?: T) => T, effect: (value: T, prev?: T) => void, init?: T): void;
+/**
+ * @param flag
+ * - `undefined` — clone the template as-is (uses `cloneNode`).
+ * - `1` — use `document.importNode` instead of `cloneNode`.
+ * - `2` — the template html is wrapped; the outer tag is stripped at clone time.
+ */
+export function template(html: string, flag?: 1 | 2): () => Element;
+export function effect<T>(fn: (prev?: T) => T, effect: (value: T, prev?: T) => void): void;
 export function memo<T>(fn: () => T, equal: boolean): () => T;
 export function untrack<T>(fn: () => T): T;
 export function insert<T>(
@@ -26,16 +35,10 @@ export function insert<T>(
 export function createComponent<T>(Comp: (props: T) => JSX.Element, props: T): JSX.Element;
 export function delegateEvents(eventNames: string[], d?: Document): void;
 export function clearDelegatedEvents(d?: Document): void;
-export function spread<T>(
-  node: Element,
-  accessor: T,
-  isSVG?: Boolean,
-  skipChildren?: Boolean
-): void;
+export function spread<T>(node: Element, accessor: T, skipChildren?: Boolean): void;
 export function assign(
   node: Element,
   props: any,
-  isSVG?: Boolean,
   skipChildren?: Boolean,
   prevProps?: any,
   skipRef?: Boolean
@@ -45,7 +48,11 @@ export function setAttributeNS(node: Element, namespace: string, name: string, v
 type ClassList =
   | Record<string, boolean>
   | Array<string | number | boolean | null | undefined | Record<string, boolean>>;
-export function className(node: Element, value: string | ClassList, isSvg?: boolean, prev?: string | ClassList): void;
+export function className(
+  node: Element,
+  value: string | ClassList,
+  prev?: string | ClassList
+): void;
 export function setProperty(node: Element, name: string, value: any): void;
 export function setStyleProperty(node: Element, name: string, value: any): void;
 export function addEventListener(
@@ -62,8 +69,14 @@ export function style(
 export function getOwner(): unknown;
 export function mergeProps(...sources: unknown[]): unknown;
 export function dynamicProperty(props: unknown, key: string): unknown;
-export function applyRef(r: ((element: Element) => void) | ((element: Element) => void)[], element: Element): void;
-export function ref(fn: () => ((element: Element) => void) | ((element: Element) => void)[], element: Element): void;
+export function applyRef(
+  r: ((element: Element) => void) | ((element: Element) => void)[],
+  element: Element
+): void;
+export function ref(
+  fn: () => ((element: Element) => void) | ((element: Element) => void)[],
+  element: Element
+): void;
 
 export function hydrate(
   fn: () => JSX.Element,
@@ -77,10 +90,11 @@ export function getNextMarker(start: Node): [Node, Array<Node>];
 export function useAssets(fn: () => JSX.Element): void;
 export function getAssets(): string;
 export function HydrationScript(props?: { nonce?: string; eventNames?: string[] }): JSX.Element;
-export function generateHydrationScript(options?: { nonce?: string; eventNames?: string[] }): string;
+export function generateHydrationScript(options?: {
+  nonce?: string;
+  eventNames?: string[];
+}): string;
 export function Assets(props: { children?: JSX.Element }): JSX.Element;
-export function Hydration(props: { children?: JSX.Element }): JSX.Element;
-export function NoHydration(props: { children?: JSX.Element }): JSX.Element;
 export interface RequestEvent {
   request: Request;
   locals: Record<string | number | symbol, any>;

package/types/core.d.ts

@@ -1,3 +1,3 @@
 export { getOwner, runWithOwner, createComponent, createRoot as root, sharedConfig, untrack, merge as mergeProps, flatten, ssrHandleError, ssrRunInScope } from "solid-js";
-export declare const effect: (fn: any, effectFn: any, initial: any) => void;
+export declare const effect: (fn: any, effectFn: any, options: any) => void;
 export declare const memo: (fn: any) => import("solid-js").Accessor<any>;

package/types/index.d.ts

@@ -1,45 +1,171 @@
 import { hydrate as hydrateCore } from "./client.js";
-import { JSX, ComponentProps, ValidComponent } from "solid-js";
+import { Component } from "solid-js";
+import type { JSX } from "./jsx.js";
 export * from "./client.js";
-export { For, Show, Switch, Match, Errored, Loading, merge as mergeProps } from "solid-js";
 export * from "./server-mock.js";
+export type { JSX } from "./jsx.js";
+export { For, Show, Switch, Match, Errored, Loading, Repeat, Reveal, NoHydration, Hydration } from "solid-js";
+import { merge } from "solid-js";
+/**
+ * Compiler-emitted prop-spread helper. The JSX transform (in
+ * `dom-expressions`) emits `mergeProps(...)` calls when compiling prop
+ * spreads on components — it is *not* a user-facing API. Application code
+ * should import `merge` from `solid-js` directly.
+ *
+ * @internal
+ */
+export declare const mergeProps: typeof merge;
+/**
+ * Build-time constant indicating whether code is running on the server. This
+ * client entry sets it to `false`; the matching server entry (`@solidjs/web`
+ * resolved through the `solid` server export condition) sets it to `true`.
+ *
+ * Bundlers can dead-code-eliminate branches gated on `isServer`, so guarding
+ * browser-only code with `if (!isServer) {…}` keeps it out of the SSR bundle
+ * entirely.
+ *
+ * @example
+ * ```ts
+ * import { isServer } from "@solidjs/web";
+ *
+ * if (!isServer) {
+ *   // Browser-only: tree-shaken out of the SSR bundle.
+ *   window.addEventListener("resize", onResize);
+ * }
+ * ```
+ */
 export declare const isServer: boolean;
+/**
+ * Build-time constant indicating whether code is running in a dev build.
+ * Replaced statically (`_SOLID_DEV_`) by the bundler integration, so guards
+ * like `if (isDev) {…}` are stripped from production builds.
+ *
+ * Use this to gate dev-only diagnostics, warnings, or expensive invariants
+ * that should never ship to production.
+ *
+ * @example
+ * ```ts
+ * import { isDev } from "@solidjs/web";
+ *
+ * if (isDev) {
+ *   console.warn("debug-only path");
+ * }
+ * ```
+ */
 export declare const isDev: boolean;
+type MountableElement = Element | Document | ShadowRoot | DocumentFragment | Node;
+export type IntrinsicElement = Extract<keyof JSX.IntrinsicElements, string>;
+export type ValidComponent = IntrinsicElement | Component<any> | (string & {});
+export type ComponentProps<T extends ValidComponent> = T extends Component<infer P> ? P : T extends keyof JSX.IntrinsicElements ? JSX.IntrinsicElements[T] : Record<string, unknown>;
+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).
  *
- * 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.
+ * 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.
+ *
+ * @example
+ * ```tsx
+ * <Portal mount={document.getElementById("modal-root")!}>
+ *   <Dialog />
+ * </Portal>
+ * ```
  *
  * @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;
-export type DynamicProps<T extends ValidComponent, P = ComponentProps<T>> = {
-    [K in keyof P]: P[K];
-} & {
-    component: T | undefined;
-};
+}): JSX.Element;
 /**
- * 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>` 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() });
+ * @example
+ * ```tsx
+ * // `source` can return either a custom Component or a native tag
+ * // name — they're interchangeable, and the returned reference is a
+ * // stable Component you can use anywhere a normal one would go.
+ * const Field = dynamic(() => multiline() ? RichTextEditor : "input");
+ * return <Field value={value()} onInput={onInput} />;
  * ```
+ *
  * @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
- * <Dynamic component={multiline() ? 'textarea' : 'input'} value={value()} />
+ * Renders an arbitrary custom or native component and forwards the other
+ * props. JSX form of `dynamic()` — same primitive, picked at the JSX site.
+ *
+ * @example
+ * ```tsx
+ * <Dynamic
+ *   component={multiline() ? RichTextEditor : "input"}
+ *   value={value()}
+ *   onInput={onInput}
+ * />
  * ```
+ *
  * @description https://docs.solidjs.com/reference/components/dynamic
  */
 export declare function Dynamic<T extends ValidComponent>(props: DynamicProps<T>): JSX.Element;