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

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (22) hide show
  1. package/README.md +27 -4
  2. package/dist/dev.cjs +79 -44
  3. package/dist/dev.js +79 -46
  4. package/dist/server.cjs +43 -29
  5. package/dist/server.js +42 -30
  6. package/dist/web.cjs +74 -39
  7. package/dist/web.js +74 -41
  8. package/package.json +6 -7
  9. package/storage/types/src/index.d.ts +81 -18
  10. package/storage/types/src/server-mock.d.ts +57 -0
  11. package/storage/types-cjs/src/index.d.cts +81 -18
  12. package/storage/types-cjs/src/server-mock.d.cts +57 -0
  13. package/types/client.d.ts +20 -9
  14. package/types/core.d.ts +2 -2
  15. package/types/index.d.ts +81 -18
  16. package/types/server-mock.d.ts +57 -0
  17. package/types/server.d.ts +23 -10
  18. package/types-cjs/client.d.cts +20 -9
  19. package/types-cjs/core.d.cts +2 -2
  20. package/types-cjs/index.d.cts +81 -18
  21. package/types-cjs/server-mock.d.cts +57 -0
  22. package/types-cjs/server.d.cts +23 -10
package/storage/types-cjs/src/server-mock.d.cts CHANGED
@@ -1,3 +1,18 @@
1
+ /**
2
+ * Renders a component tree synchronously to an HTML string. Async reads inside
3
+ * `<Loading>` boundaries emit their `fallback` content; for full-graph
4
+ * resolution use `renderToStringAsync` instead.
5
+ *
6
+ * Pair the returned HTML with `hydrate()` on the client.
7
+ *
8
+ * @example
9
+ * ```tsx
10
+ * import { renderToString } from "@solidjs/web";
11
+ *
12
+ * const html = renderToString(() => <App />);
13
+ * res.send(`<!doctype html><html><body><div id="root">${html}</div></body></html>`);
14
+ * ```
15
+ */
1
16
  export declare function renderToString<T>(fn: () => T, options?: {
2
17
  nonce?: string;
3
18
  renderId?: string;
@@ -12,6 +27,21 @@ export declare function renderToString<T>(fn: () => T, options?: {
12
27
  }>;
13
28
  onError?: (err: any) => void;
14
29
  }): string;
30
+ /**
31
+ * Renders a component tree to an HTML string and awaits all async reads in the
32
+ * subtree before resolving. The returned HTML reflects the fully-settled state
33
+ * — no `<Loading>` fallbacks appear in the output.
34
+ *
35
+ * Use this when you want a complete page in one round-trip. For incremental
36
+ * streaming with progressive boundary resolution, use `renderToStream`.
37
+ *
38
+ * @example
39
+ * ```tsx
40
+ * import { renderToStringAsync } from "@solidjs/web";
41
+ *
42
+ * const html = await renderToStringAsync(() => <App />);
43
+ * ```
44
+ */
15
45
  export declare function renderToStringAsync<T>(fn: () => T, options?: {
16
46
  timeoutMs?: number;
17
47
  nonce?: string;
@@ -27,6 +57,25 @@ export declare function renderToStringAsync<T>(fn: () => T, options?: {
27
57
  }>;
28
58
  onError?: (err: any) => void;
29
59
  }): Promise<string>;
60
+ /**
61
+ * Streams an HTML response, flushing the synchronous shell first and then
62
+ * progressively emitting async-resolved fragments as their `<Loading>`
63
+ * boundaries settle. Good for time-to-first-byte sensitive pages.
64
+ *
65
+ * Returns an object with `pipe`/`pipeTo` for piping to a Node `Writable` or
66
+ * a Web `WritableStream`, plus a `then` for awaiting full completion.
67
+ *
68
+ * @example
69
+ * ```tsx
70
+ * import { renderToStream } from "@solidjs/web";
71
+ *
72
+ * // Node:
73
+ * renderToStream(() => <App />).pipe(res);
74
+ *
75
+ * // Web (Workers / Deno):
76
+ * await renderToStream(() => <App />).pipeTo(stream.writable);
77
+ * ```
78
+ */
30
79
  export declare function renderToStream<T>(fn: () => T, options?: {
31
80
  nonce?: string;
32
81
  renderId?: string;
@@ -54,19 +103,27 @@ export declare function renderToStream<T>(fn: () => T, options?: {
54
103
  }) => void;
55
104
  pipeTo: (writable: WritableStream) => Promise<void>;
56
105
  };
106
+ /** Compiler primitive — emitted by JSX-DOM-Expressions for tagged-template SSR output. Not meant for hand-written code. */
57
107
  export declare function ssr(template: string[] | string, ...nodes: any[]): {
58
108
  t: string;
59
109
  };
110
+ /** Compiler primitive — emitted by JSX-DOM-Expressions for SSR element output. Not meant for hand-written code. */
60
111
  export declare function ssrElement(name: string, props: any, children: any, needsId: boolean): {
61
112
  t: string;
62
113
  };
114
+ /** Compiler primitive — serializes a classList object for SSR output. Not meant for hand-written code. */
63
115
  export declare function ssrClassList(value: {
64
116
  [k: string]: boolean;
65
117
  }): string;
118
+ /** Compiler primitive — serializes a style object for SSR output. Not meant for hand-written code. */
66
119
  export declare function ssrStyle(value: {
67
120
  [k: string]: string;
68
121
  }): string;
122
+ /** Compiler primitive — serializes a boolean attribute for SSR output. Not meant for hand-written code. */
69
123
  export declare function ssrAttribute(key: string, value: boolean): string;
124
+ /** Compiler primitive — generates the hydration-key attribute for SSR output. Not meant for hand-written code. */
70
125
  export declare function ssrHydrationKey(): string;
126
+ /** Compiler primitive — collapses an SSR-shaped node into its HTML string. Not meant for hand-written code. */
71
127
  export declare function resolveSSRNode(node: any): string;
128
+ /** Escapes a string for safe inclusion in HTML output. Useful when constructing SSR fragments by hand. */
72
129
  export declare function escape(html: string): string;
package/types/client.d.ts CHANGED
@@ -5,6 +5,8 @@ export const DelegatedEvents: Set<string>;
5
5
  export const DOMElements: Set<string>;
6
6
  export const SVGElements: Set<string>;
7
7
  export const MathMLElements: Set<string>;
8
+ export const VoidElements: Set<string>;
9
+ export const RawTextElements: Set<string>;
8
10
  export const Namespaces: Record<string, string>;
9
11
 
10
12
  type MountableElement = Element | Document | ShadowRoot | DocumentFragment | Node;
@@ -33,11 +35,7 @@ export function insert<T>(
33
35
  export function createComponent<T>(Comp: (props: T) => JSX.Element, props: T): JSX.Element;
34
36
  export function delegateEvents(eventNames: string[], d?: Document): void;
35
37
  export function clearDelegatedEvents(d?: Document): void;
36
- export function spread<T>(
37
- node: Element,
38
- accessor: T,
39
- skipChildren?: Boolean
40
- ): void;
38
+ export function spread<T>(node: Element, accessor: T, skipChildren?: Boolean): void;
41
39
  export function assign(
42
40
  node: Element,
43
41
  props: any,
@@ -50,7 +48,11 @@ export function setAttributeNS(node: Element, namespace: string, name: string, v
50
48
  type ClassList =
51
49
  | Record<string, boolean>
52
50
  | Array<string | number | boolean | null | undefined | Record<string, boolean>>;
53
- export function className(node: Element, value: string | ClassList, prev?: string | ClassList): void;
51
+ export function className(
52
+ node: Element,
53
+ value: string | ClassList,
54
+ prev?: string | ClassList
55
+ ): void;
54
56
  export function setProperty(node: Element, name: string, value: any): void;
55
57
  export function setStyleProperty(node: Element, name: string, value: any): void;
56
58
  export function addEventListener(
@@ -67,8 +69,14 @@ export function style(
67
69
  export function getOwner(): unknown;
68
70
  export function mergeProps(...sources: unknown[]): unknown;
69
71
  export function dynamicProperty(props: unknown, key: string): unknown;
70
- export function applyRef(r: ((element: Element) => void) | ((element: Element) => void)[], element: Element): void;
71
- export function ref(fn: () => ((element: Element) => void) | ((element: Element) => void)[], element: Element): void;
72
+ export function applyRef(
73
+ r: ((element: Element) => void) | ((element: Element) => void)[],
74
+ element: Element
75
+ ): void;
76
+ export function ref(
77
+ fn: () => ((element: Element) => void) | ((element: Element) => void)[],
78
+ element: Element
79
+ ): void;
72
80
 
73
81
  export function hydrate(
74
82
  fn: () => JSX.Element,
@@ -82,7 +90,10 @@ export function getNextMarker(start: Node): [Node, Array<Node>];
82
90
  export function useAssets(fn: () => JSX.Element): void;
83
91
  export function getAssets(): string;
84
92
  export function HydrationScript(props?: { nonce?: string; eventNames?: string[] }): JSX.Element;
85
- export function generateHydrationScript(options?: { nonce?: string; eventNames?: string[] }): string;
93
+ export function generateHydrationScript(options?: {
94
+ nonce?: string;
95
+ eventNames?: string[];
96
+ }): string;
86
97
  export function Assets(props: { children?: JSX.Element }): JSX.Element;
87
98
  export interface RequestEvent {
88
99
  request: Request;
package/types/core.d.ts CHANGED
@@ -1,3 +1,3 @@
1
1
  export { getOwner, runWithOwner, createComponent, createRoot as root, sharedConfig, untrack, merge as mergeProps, flatten, ssrHandleError, ssrRunInScope } from "solid-js";
2
- export declare const effect: (fn: any, effectFn: any) => void;
3
- export declare const memo: (fn: any, transparent: any) => any;
2
+ export declare const effect: (fn: any, effectFn: any, options: any) => void;
3
+ export declare const memo: (fn: any) => import("solid-js").Accessor<any>;
package/types/index.d.ts CHANGED
@@ -1,16 +1,78 @@
1
- import { hydrate as hydrateCore, render as renderCore } from "./client.js";
2
- import { JSX, ComponentProps, ValidComponent } from "solid-js";
1
+ import { hydrate as hydrateCore } from "./client.js";
2
+ import { JSX, Component, ComponentProps, ValidComponent } from "solid-js";
3
3
  export * from "./client.js";
4
- export declare function render(...args: Parameters<typeof renderCore>): ReturnType<typeof renderCore>;
5
- export { For, Show, Switch, Match, Errored, Loading, Repeat, Reveal, NoHydration, Hydration, merge as mergeProps } from "solid-js";
6
4
  export * from "./server-mock.js";
5
+ export { For, Show, Switch, Match, Errored, Loading, Repeat, Reveal, NoHydration, Hydration, merge as mergeProps } from "solid-js";
7
6
  export declare const isServer: boolean;
8
7
  export declare const isDev: boolean;
8
+ type MountableElement = Element | Document | ShadowRoot | DocumentFragment | Node;
9
+ export type DynamicProps<T extends ValidComponent, P = ComponentProps<T>> = {
10
+ [K in keyof P]: P[K];
11
+ } & {
12
+ component: T | null | undefined | false;
13
+ };
14
+ /**
15
+ * Renders a component tree into a DOM element. Returns a dispose function
16
+ * that tears the tree down and cleans up reactive scopes when called.
17
+ *
18
+ * @example
19
+ * ```tsx
20
+ * import { render } from "@solidjs/web";
21
+ *
22
+ * const dispose = render(() => <App />, document.getElementById("root")!);
23
+ *
24
+ * // Later, to unmount:
25
+ * dispose();
26
+ * ```
27
+ *
28
+ * @remarks
29
+ * The top-level insert is queued via `insertOptions: { schedule: true }` so
30
+ * its initial DOM attach goes through the effect queue rather than executing
31
+ * inline. This lets the mount participate in transitions: if an uncaught
32
+ * async read surfaces during the initial render (no `Loading` ancestor
33
+ * absorbs it), the mount is held by the transition and attaches atomically
34
+ * once all pending settles. On the no-async happy path the tail `flush()`
35
+ * drains the queued callback so the attach is synchronous by the time
36
+ * `render()` returns. The dev enforcement window scopes
37
+ * `ASYNC_OUTSIDE_LOADING_BOUNDARY` to the initial mount only.
38
+ */
39
+ export declare function render(code: () => JSX.Element, element: MountableElement, init?: unknown, options?: {
40
+ renderId?: string;
41
+ }): () => void;
42
+ /**
43
+ * Resumes a server-rendered tree on the client, attaching event listeners
44
+ * and reactive bindings without reconstructing the DOM. Returns a `dispose`
45
+ * function that tears down reactive scopes (DOM nodes are left in place).
46
+ *
47
+ * Use this when the page HTML was produced by `renderToString`,
48
+ * `renderToStringAsync`, or `renderToStream`. For client-only apps, use
49
+ * `render` instead.
50
+ *
51
+ * Pass `options.renderId` to hydrate one of multiple roots emitted by a
52
+ * server render that used the same id.
53
+ *
54
+ * @example
55
+ * ```tsx
56
+ * import { hydrate } from "@solidjs/web";
57
+ *
58
+ * hydrate(() => <App />, document.getElementById("root")!);
59
+ * ```
60
+ */
9
61
  export declare const hydrate: typeof hydrateCore;
10
62
  /**
11
- * Renders components somewhere else in the DOM
63
+ * Renders its children into a different part of the DOM (modal roots,
64
+ * tooltips, layers that need to escape an `overflow: hidden` ancestor).
65
+ *
66
+ * If `mount` is omitted, the portal attaches to `document.body`. The portal
67
+ * still participates in the parent's reactive scope and disposes when the
68
+ * parent does.
12
69
  *
13
- * 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.
70
+ * @example
71
+ * ```tsx
72
+ * <Portal mount={document.getElementById("modal-root")!}>
73
+ * <Dialog />
74
+ * </Portal>
75
+ * ```
14
76
  *
15
77
  * @description https://docs.solidjs.com/reference/components/portal
16
78
  */
@@ -18,24 +80,25 @@ export declare function Portal<T extends boolean = false, S extends boolean = fa
18
80
  mount?: Element;
19
81
  children: JSX.Element;
20
82
  }): Text;
21
- export type DynamicProps<T extends ValidComponent, P = ComponentProps<T>> = {
22
- [K in keyof P]: P[K];
23
- } & {
24
- component: T | undefined;
25
- };
26
83
  /**
27
- * Renders an arbitrary component or element with the given props
84
+ * Returns a stable `Component` whose identity is driven by a reactive (and
85
+ * optionally async) `source`. The returned component can be used anywhere a
86
+ * normal component is used; children and props flow through JSX as usual.
87
+ *
88
+ * `source` may return a component, a native tag name (`'input'`, `'textarea'`,
89
+ * etc.), `undefined`, or a `Promise` of any of the above. A pending promise
90
+ * propagates as `NotReadyError` through the surrounding reactive scope, so
91
+ * async swaps compose with `Loading`/Suspense boundaries the same way as
92
+ * `lazy`.
28
93
  *
29
- * This is a lower level version of the `Dynamic` component, useful for
30
- * performance optimizations in libraries. Do not use this unless you know
31
- * what you are doing.
32
94
  * ```typescript
33
- * const element = () => multiline() ? 'textarea' : 'input';
34
- * createDynamic(element, { value: value() });
95
+ * const User = dynamic(() => getUserComp(props.id));
96
+ * return <User>client content</User>;
35
97
  * ```
98
+ *
36
99
  * @description https://docs.solidjs.com/reference/components/dynamic
37
100
  */
38
- export declare function createDynamic<T extends ValidComponent>(component: () => T | undefined, props: ComponentProps<T>): JSX.Element;
101
+ export declare function dynamic<T extends ValidComponent>(source: () => T | Promise<T> | null | undefined | false): Component<ComponentProps<T>>;
39
102
  /**
40
103
  * Renders an arbitrary custom or native component and passes the other props
41
104
  * ```typescript
package/types/server-mock.d.ts CHANGED
@@ -1,3 +1,18 @@
1
+ /**
2
+ * Renders a component tree synchronously to an HTML string. Async reads inside
3
+ * `<Loading>` boundaries emit their `fallback` content; for full-graph
4
+ * resolution use `renderToStringAsync` instead.
5
+ *
6
+ * Pair the returned HTML with `hydrate()` on the client.
7
+ *
8
+ * @example
9
+ * ```tsx
10
+ * import { renderToString } from "@solidjs/web";
11
+ *
12
+ * const html = renderToString(() => <App />);
13
+ * res.send(`<!doctype html><html><body><div id="root">${html}</div></body></html>`);
14
+ * ```
15
+ */
1
16
  export declare function renderToString<T>(fn: () => T, options?: {
2
17
  nonce?: string;
3
18
  renderId?: string;
@@ -12,6 +27,21 @@ export declare function renderToString<T>(fn: () => T, options?: {
12
27
  }>;
13
28
  onError?: (err: any) => void;
14
29
  }): string;
30
+ /**
31
+ * Renders a component tree to an HTML string and awaits all async reads in the
32
+ * subtree before resolving. The returned HTML reflects the fully-settled state
33
+ * — no `<Loading>` fallbacks appear in the output.
34
+ *
35
+ * Use this when you want a complete page in one round-trip. For incremental
36
+ * streaming with progressive boundary resolution, use `renderToStream`.
37
+ *
38
+ * @example
39
+ * ```tsx
40
+ * import { renderToStringAsync } from "@solidjs/web";
41
+ *
42
+ * const html = await renderToStringAsync(() => <App />);
43
+ * ```
44
+ */
15
45
  export declare function renderToStringAsync<T>(fn: () => T, options?: {
16
46
  timeoutMs?: number;
17
47
  nonce?: string;
@@ -27,6 +57,25 @@ export declare function renderToStringAsync<T>(fn: () => T, options?: {
27
57
  }>;
28
58
  onError?: (err: any) => void;
29
59
  }): Promise<string>;
60
+ /**
61
+ * Streams an HTML response, flushing the synchronous shell first and then
62
+ * progressively emitting async-resolved fragments as their `<Loading>`
63
+ * boundaries settle. Good for time-to-first-byte sensitive pages.
64
+ *
65
+ * Returns an object with `pipe`/`pipeTo` for piping to a Node `Writable` or
66
+ * a Web `WritableStream`, plus a `then` for awaiting full completion.
67
+ *
68
+ * @example
69
+ * ```tsx
70
+ * import { renderToStream } from "@solidjs/web";
71
+ *
72
+ * // Node:
73
+ * renderToStream(() => <App />).pipe(res);
74
+ *
75
+ * // Web (Workers / Deno):
76
+ * await renderToStream(() => <App />).pipeTo(stream.writable);
77
+ * ```
78
+ */
30
79
  export declare function renderToStream<T>(fn: () => T, options?: {
31
80
  nonce?: string;
32
81
  renderId?: string;
@@ -54,19 +103,27 @@ export declare function renderToStream<T>(fn: () => T, options?: {
54
103
  }) => void;
55
104
  pipeTo: (writable: WritableStream) => Promise<void>;
56
105
  };
106
+ /** Compiler primitive — emitted by JSX-DOM-Expressions for tagged-template SSR output. Not meant for hand-written code. */
57
107
  export declare function ssr(template: string[] | string, ...nodes: any[]): {
58
108
  t: string;
59
109
  };
110
+ /** Compiler primitive — emitted by JSX-DOM-Expressions for SSR element output. Not meant for hand-written code. */
60
111
  export declare function ssrElement(name: string, props: any, children: any, needsId: boolean): {
61
112
  t: string;
62
113
  };
114
+ /** Compiler primitive — serializes a classList object for SSR output. Not meant for hand-written code. */
63
115
  export declare function ssrClassList(value: {
64
116
  [k: string]: boolean;
65
117
  }): string;
118
+ /** Compiler primitive — serializes a style object for SSR output. Not meant for hand-written code. */
66
119
  export declare function ssrStyle(value: {
67
120
  [k: string]: string;
68
121
  }): string;
122
+ /** Compiler primitive — serializes a boolean attribute for SSR output. Not meant for hand-written code. */
69
123
  export declare function ssrAttribute(key: string, value: boolean): string;
124
+ /** Compiler primitive — generates the hydration-key attribute for SSR output. Not meant for hand-written code. */
70
125
  export declare function ssrHydrationKey(): string;
126
+ /** Compiler primitive — collapses an SSR-shaped node into its HTML string. Not meant for hand-written code. */
71
127
  export declare function resolveSSRNode(node: any): string;
128
+ /** Escapes a string for safe inclusion in HTML output. Useful when constructing SSR fragments by hand. */
72
129
  export declare function escape(html: string): string;
package/types/server.d.ts CHANGED
@@ -4,6 +4,8 @@ export const DelegatedEvents: Set<string>;
4
4
  export const DOMElements: Set<string>;
5
5
  export const SVGElements: Set<string>;
6
6
  export const MathMLElements: Set<string>;
7
+ export const VoidElements: Set<string>;
8
+ export const RawTextElements: Set<string>;
7
9
  export const Namespaces: Record<string, string>;
8
10
 
9
11
  type MountableElement = Element | Document | ShadowRoot | DocumentFragment | Node;
@@ -15,7 +17,10 @@ export function renderToString<T>(
15
17
  renderId?: string;
16
18
  noScripts?: boolean;
17
19
  plugins?: any[];
18
- manifest?: Record<string, { file: string; css?: string[]; isEntry?: boolean; imports?: string[] }> & { _base?: string };
20
+ manifest?: Record<
21
+ string,
22
+ { file: string; css?: string[]; isEntry?: boolean; imports?: string[] }
23
+ > & { _base?: string };
19
24
  onError?: (err: any) => void;
20
25
  }
21
26
  ): string;
@@ -28,7 +33,10 @@ export function renderToStringAsync<T>(
28
33
  renderId?: string;
29
34
  noScripts?: boolean;
30
35
  plugins?: any[];
31
- manifest?: Record<string, { file: string; css?: string[]; isEntry?: boolean; imports?: string[] }> & { _base?: string };
36
+ manifest?: Record<
37
+ string,
38
+ { file: string; css?: string[]; isEntry?: boolean; imports?: string[] }
39
+ > & { _base?: string };
32
40
  onError?: (err: any) => void;
33
41
  }
34
42
  ): Promise<string>;
@@ -39,7 +47,10 @@ export function renderToStream<T>(
39
47
  renderId?: string;
40
48
  noScripts?: boolean;
41
49
  plugins?: any[];
42
- manifest?: Record<string, { file: string; css?: string[]; isEntry?: boolean; imports?: string[] }> & { _base?: string };
50
+ manifest?: Record<
51
+ string,
52
+ { file: string; css?: string[]; isEntry?: boolean; imports?: string[] }
53
+ > & { _base?: string };
43
54
  onCompleteShell?: (info: { write: (v: string) => void }) => void;
44
55
  onCompleteAll?: (info: { write: (v: string) => void }) => void;
45
56
  onError?: (err: any) => void;
@@ -65,7 +76,10 @@ export function ssrAttribute(key: string, value: any): string;
65
76
  export function ssrHydrationKey(): string;
66
77
  export function resolveSSRNode(node: any, result?: any, top?: boolean): any;
67
78
  export function escape(s: any, attr?: boolean): any;
68
- export function applyRef(r: ((element: any) => void) | ((element: any) => void)[], element: any): void;
79
+ export function applyRef(
80
+ r: ((element: any) => void) | ((element: any) => void)[],
81
+ element: any
82
+ ): void;
69
83
  export function useAssets(fn: () => JSX.Element): void;
70
84
  export function getAssets(): string;
71
85
  export function getHydrationKey(): string | undefined;
@@ -75,7 +89,10 @@ export function createComponent<T>(Comp: (props: T) => JSX.Element, props: T): J
75
89
  export function mergeProps(...sources: unknown[]): unknown;
76
90
  export function getOwner(): unknown;
77
91
  export function ssrRunInScope(fn: () => void, owner: unknown): void;
78
- export function generateHydrationScript(options?: { nonce?: string; eventNames?: string[] }): string;
92
+ export function generateHydrationScript(options?: {
93
+ nonce?: string;
94
+ eventNames?: string[];
95
+ }): string;
79
96
  export declare const RequestContext: unique symbol;
80
97
  export interface RequestEvent {
81
98
  request: Request;
@@ -104,11 +121,7 @@ export function insert<T>(
104
121
  ): JSX.Element;
105
122
 
106
123
  /** @deprecated not supported on the server side */
107
- export function spread<T>(
108
- node: Element,
109
- accessor: T,
110
- skipChildren?: Boolean
111
- ): void;
124
+ export function spread<T>(node: Element, accessor: T, skipChildren?: Boolean): void;
112
125
 
113
126
  /** @deprecated not supported on the server side */
114
127
  export function delegateEvents(eventNames: string[], d?: Document): void;
package/types-cjs/client.d.cts CHANGED
@@ -5,6 +5,8 @@ export const DelegatedEvents: Set<string>;
5
5
  export const DOMElements: Set<string>;
6
6
  export const SVGElements: Set<string>;
7
7
  export const MathMLElements: Set<string>;
8
+ export const VoidElements: Set<string>;
9
+ export const RawTextElements: Set<string>;
8
10
  export const Namespaces: Record<string, string>;
9
11
 
10
12
  type MountableElement = Element | Document | ShadowRoot | DocumentFragment | Node;
@@ -33,11 +35,7 @@ export function insert<T>(
33
35
  export function createComponent<T>(Comp: (props: T) => JSX.Element, props: T): JSX.Element;
34
36
  export function delegateEvents(eventNames: string[], d?: Document): void;
35
37
  export function clearDelegatedEvents(d?: Document): void;
36
- export function spread<T>(
37
- node: Element,
38
- accessor: T,
39
- skipChildren?: Boolean
40
- ): void;
38
+ export function spread<T>(node: Element, accessor: T, skipChildren?: Boolean): void;
41
39
  export function assign(
42
40
  node: Element,
43
41
  props: any,
@@ -50,7 +48,11 @@ export function setAttributeNS(node: Element, namespace: string, name: string, v
50
48
  type ClassList =
51
49
  | Record<string, boolean>
52
50
  | Array<string | number | boolean | null | undefined | Record<string, boolean>>;
53
- export function className(node: Element, value: string | ClassList, prev?: string | ClassList): void;
51
+ export function className(
52
+ node: Element,
53
+ value: string | ClassList,
54
+ prev?: string | ClassList
55
+ ): void;
54
56
  export function setProperty(node: Element, name: string, value: any): void;
55
57
  export function setStyleProperty(node: Element, name: string, value: any): void;
56
58
  export function addEventListener(
@@ -67,8 +69,14 @@ export function style(
67
69
  export function getOwner(): unknown;
68
70
  export function mergeProps(...sources: unknown[]): unknown;
69
71
  export function dynamicProperty(props: unknown, key: string): unknown;
70
- export function applyRef(r: ((element: Element) => void) | ((element: Element) => void)[], element: Element): void;
71
- export function ref(fn: () => ((element: Element) => void) | ((element: Element) => void)[], element: Element): void;
72
+ export function applyRef(
73
+ r: ((element: Element) => void) | ((element: Element) => void)[],
74
+ element: Element
75
+ ): void;
76
+ export function ref(
77
+ fn: () => ((element: Element) => void) | ((element: Element) => void)[],
78
+ element: Element
79
+ ): void;
72
80
 
73
81
  export function hydrate(
74
82
  fn: () => JSX.Element,
@@ -82,7 +90,10 @@ export function getNextMarker(start: Node): [Node, Array<Node>];
82
90
  export function useAssets(fn: () => JSX.Element): void;
83
91
  export function getAssets(): string;
84
92
  export function HydrationScript(props?: { nonce?: string; eventNames?: string[] }): JSX.Element;
85
- export function generateHydrationScript(options?: { nonce?: string; eventNames?: string[] }): string;
93
+ export function generateHydrationScript(options?: {
94
+ nonce?: string;
95
+ eventNames?: string[];
96
+ }): string;
86
97
  export function Assets(props: { children?: JSX.Element }): JSX.Element;
87
98
  export interface RequestEvent {
88
99
  request: Request;
package/types-cjs/core.d.cts CHANGED
@@ -1,3 +1,3 @@
1
1
  export { getOwner, runWithOwner, createComponent, createRoot as root, sharedConfig, untrack, merge as mergeProps, flatten, ssrHandleError, ssrRunInScope } from "solid-js";
2
- export declare const effect: (fn: any, effectFn: any) => void;
3
- export declare const memo: (fn: any, transparent: any) => any;
2
+ export declare const effect: (fn: any, effectFn: any, options: any) => void;
3
+ export declare const memo: (fn: any) => import("solid-js").Accessor<any>;
package/types-cjs/index.d.cts CHANGED
@@ -1,16 +1,78 @@
1
- import { hydrate as hydrateCore, render as renderCore } from "./client.cjs";
2
- import { JSX, ComponentProps, ValidComponent } from "solid-js";
1
+ import { hydrate as hydrateCore } from "./client.cjs";
2
+ import { JSX, Component, ComponentProps, ValidComponent } from "solid-js";
3
3
  export * from "./client.cjs";
4
- export declare function render(...args: Parameters<typeof renderCore>): ReturnType<typeof renderCore>;
5
- export { For, Show, Switch, Match, Errored, Loading, Repeat, Reveal, NoHydration, Hydration, merge as mergeProps } from "solid-js";
6
4
  export * from "./server-mock.cjs";
5
+ export { For, Show, Switch, Match, Errored, Loading, Repeat, Reveal, NoHydration, Hydration, merge as mergeProps } from "solid-js";
7
6
  export declare const isServer: boolean;
8
7
  export declare const isDev: boolean;
8
+ type MountableElement = Element | Document | ShadowRoot | DocumentFragment | Node;
9
+ export type DynamicProps<T extends ValidComponent, P = ComponentProps<T>> = {
10
+ [K in keyof P]: P[K];
11
+ } & {
12
+ component: T | null | undefined | false;
13
+ };
14
+ /**
15
+ * Renders a component tree into a DOM element. Returns a dispose function
16
+ * that tears the tree down and cleans up reactive scopes when called.
17
+ *
18
+ * @example
19
+ * ```tsx
20
+ * import { render } from "@solidjs/web";
21
+ *
22
+ * const dispose = render(() => <App />, document.getElementById("root")!);
23
+ *
24
+ * // Later, to unmount:
25
+ * dispose();
26
+ * ```
27
+ *
28
+ * @remarks
29
+ * The top-level insert is queued via `insertOptions: { schedule: true }` so
30
+ * its initial DOM attach goes through the effect queue rather than executing
31
+ * inline. This lets the mount participate in transitions: if an uncaught
32
+ * async read surfaces during the initial render (no `Loading` ancestor
33
+ * absorbs it), the mount is held by the transition and attaches atomically
34
+ * once all pending settles. On the no-async happy path the tail `flush()`
35
+ * drains the queued callback so the attach is synchronous by the time
36
+ * `render()` returns. The dev enforcement window scopes
37
+ * `ASYNC_OUTSIDE_LOADING_BOUNDARY` to the initial mount only.
38
+ */
39
+ export declare function render(code: () => JSX.Element, element: MountableElement, init?: unknown, options?: {
40
+ renderId?: string;
41
+ }): () => void;
42
+ /**
43
+ * Resumes a server-rendered tree on the client, attaching event listeners
44
+ * and reactive bindings without reconstructing the DOM. Returns a `dispose`
45
+ * function that tears down reactive scopes (DOM nodes are left in place).
46
+ *
47
+ * Use this when the page HTML was produced by `renderToString`,
48
+ * `renderToStringAsync`, or `renderToStream`. For client-only apps, use
49
+ * `render` instead.
50
+ *
51
+ * Pass `options.renderId` to hydrate one of multiple roots emitted by a
52
+ * server render that used the same id.
53
+ *
54
+ * @example
55
+ * ```tsx
56
+ * import { hydrate } from "@solidjs/web";
57
+ *
58
+ * hydrate(() => <App />, document.getElementById("root")!);
59
+ * ```
60
+ */
9
61
  export declare const hydrate: typeof hydrateCore;
10
62
  /**
11
- * Renders components somewhere else in the DOM
63
+ * Renders its children into a different part of the DOM (modal roots,
64
+ * tooltips, layers that need to escape an `overflow: hidden` ancestor).
65
+ *
66
+ * If `mount` is omitted, the portal attaches to `document.body`. The portal
67
+ * still participates in the parent's reactive scope and disposes when the
68
+ * parent does.
12
69
  *
13
- * 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.
70
+ * @example
71
+ * ```tsx
72
+ * <Portal mount={document.getElementById("modal-root")!}>
73
+ * <Dialog />
74
+ * </Portal>
75
+ * ```
14
76
  *
15
77
  * @description https://docs.solidjs.com/reference/components/portal
16
78
  */
@@ -18,24 +80,25 @@ export declare function Portal<T extends boolean = false, S extends boolean = fa
18
80
  mount?: Element;
19
81
  children: JSX.Element;
20
82
  }): Text;
21
- export type DynamicProps<T extends ValidComponent, P = ComponentProps<T>> = {
22
- [K in keyof P]: P[K];
23
- } & {
24
- component: T | undefined;
25
- };
26
83
  /**
27
- * Renders an arbitrary component or element with the given props
84
+ * Returns a stable `Component` whose identity is driven by a reactive (and
85
+ * optionally async) `source`. The returned component can be used anywhere a
86
+ * normal component is used; children and props flow through JSX as usual.
87
+ *
88
+ * `source` may return a component, a native tag name (`'input'`, `'textarea'`,
89
+ * etc.), `undefined`, or a `Promise` of any of the above. A pending promise
90
+ * propagates as `NotReadyError` through the surrounding reactive scope, so
91
+ * async swaps compose with `Loading`/Suspense boundaries the same way as
92
+ * `lazy`.
28
93
  *
29
- * This is a lower level version of the `Dynamic` component, useful for
30
- * performance optimizations in libraries. Do not use this unless you know
31
- * what you are doing.
32
94
  * ```typescript
33
- * const element = () => multiline() ? 'textarea' : 'input';
34
- * createDynamic(element, { value: value() });
95
+ * const User = dynamic(() => getUserComp(props.id));
96
+ * return <User>client content</User>;
35
97
  * ```
98
+ *
36
99
  * @description https://docs.solidjs.com/reference/components/dynamic
37
100
  */
38
- export declare function createDynamic<T extends ValidComponent>(component: () => T | undefined, props: ComponentProps<T>): JSX.Element;
101
+ export declare function dynamic<T extends ValidComponent>(source: () => T | Promise<T> | null | undefined | false): Component<ComponentProps<T>>;
39
102
  /**
40
103
  * Renders an arbitrary custom or native component and passes the other props
41
104
  * ```typescript