Skip to content

Commit 7c4ba3c

Browse files
committed
update
1 parent 599b55c commit 7c4ba3c

4 files changed

Lines changed: 91 additions & 43 deletions

File tree

public/llms.txt

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -103,6 +103,7 @@
103103
- [DEV](https://docs.solidjs.com/reference/rendering/dev)
104104
- [hydrate](https://docs.solidjs.com/reference/rendering/hydrate)
105105
- [hydrationScript](https://docs.solidjs.com/reference/rendering/hydration-script)
106+
- [isDev](https://docs.solidjs.com/reference/rendering/is-dev)
106107
- [isServer](https://docs.solidjs.com/reference/rendering/is-server)
107108
- [render](https://docs.solidjs.com/reference/rendering/render)
108109
- [renderToStream](https://docs.solidjs.com/reference/rendering/render-to-stream)
@@ -125,6 +126,7 @@
125126

126127
- [Overview](https://docs.solidjs.com/solid-start/)
127128
- [Getting started](https://docs.solidjs.com/solid-start/getting-started)
129+
- [Migrating from v1](https://docs.solidjs.com/solid-start/migrating-from-v1)
128130
- [Routing](https://docs.solidjs.com/solid-start/building-your-application/routing)
129131
- [API routes](https://docs.solidjs.com/solid-start/building-your-application/api-routes)
130132
- [CSS and styling](https://docs.solidjs.com/solid-start/building-your-application/css-and-styling)
@@ -137,6 +139,7 @@
137139
- [Sessions](https://docs.solidjs.com/solid-start/advanced/session)
138140
- [Request events](https://docs.solidjs.com/solid-start/advanced/request-events)
139141
- [Returning responses](https://docs.solidjs.com/solid-start/advanced/return-responses)
142+
- [Serialization](https://docs.solidjs.com/solid-start/advanced/serialization)
140143
- [Auth](https://docs.solidjs.com/solid-start/advanced/auth)
141144
- [WebSocket endpoint](https://docs.solidjs.com/solid-start/advanced/websocket)
142145
- [Security](https://docs.solidjs.com/solid-start/guides/security)
@@ -182,6 +185,7 @@
182185
- [Revalidation](https://docs.solidjs.com/solid-router/data-fetching/revalidation)
183186
- [Preload data](https://docs.solidjs.com/solid-router/data-fetching/how-to/preload-data)
184187
- [Handle pending and error states](https://docs.solidjs.com/solid-router/data-fetching/how-to/handle-error-and-loading-states)
188+
- [Preloading](https://docs.solidjs.com/solid-router/advanced-concepts/preloading)
185189
- [Lazy loading](https://docs.solidjs.com/solid-router/advanced-concepts/lazy-loading)
186190
- [Migration from v0.9.x](https://docs.solidjs.com/solid-router/guides/migration)
187191
- [A](https://docs.solidjs.com/solid-router/reference/components/a)
@@ -225,3 +229,4 @@
225229
- [MetaProvider](https://docs.solidjs.com/solid-meta/reference/meta/metaprovider)
226230
- [Style](https://docs.solidjs.com/solid-meta/reference/meta/style)
227231
- [Title](https://docs.solidjs.com/solid-meta/reference/meta/title)
232+
- [useHead](https://docs.solidjs.com/solid-meta/reference/meta/use-head)
Lines changed: 74 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,74 @@
1+
---
2+
title: createDynamic
3+
use_cases: >-
4+
dynamic components, runtime component selection, polymorphic components,
5+
lower-level rendering helpers, library components
6+
tags:
7+
- dynamic
8+
- components
9+
- jsx
10+
- polymorphic
11+
- rendering
12+
version: "1.0"
13+
description: >-
14+
Render a component or intrinsic element selected at runtime from an accessor.
15+
---
16+
17+
`createDynamic` renders the value returned by its `component` accessor as either a custom component or an intrinsic element.
18+
19+
## Import
20+
21+
```ts
22+
import { createDynamic } from "solid-js/web";
23+
```
24+
25+
## Type
26+
27+
```ts
28+
type ValidComponent =
29+
| keyof JSX.IntrinsicElements
30+
| ((props: any) => JSX.Element);
31+
32+
function createDynamic<T extends ValidComponent>(
33+
component: () => T | undefined,
34+
props: ComponentProps<T>
35+
): JSX.Element;
36+
```
37+
38+
## Parameters
39+
40+
### `component`
41+
42+
- **Type:** `() => T | undefined`
43+
44+
Accessor that returns the component or intrinsic element to render.
45+
46+
### `props`
47+
48+
- **Type:** props accepted by the rendered component or element
49+
50+
Props passed to the rendered component or element.
51+
52+
## Return value
53+
54+
- **Type:** `JSX.Element`
55+
56+
Returns the rendered component or element.
57+
58+
## Behavior
59+
60+
- If `component()` is `undefined`, nothing is rendered.
61+
62+
## Example
63+
64+
```tsx
65+
import { createDynamic } from "solid-js/web";
66+
67+
function Example(props) {
68+
return createDynamic(() => props.as, { type: "button", children: "Save" });
69+
}
70+
```
71+
72+
## Related
73+
74+
- [`<Dynamic>`](/reference/components/dynamic)

src/routes/reference/components/data.json

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
11
{
22
"title": "Components",
33
"pages": [
4+
"create-dynamic.mdx",
45
"dynamic.mdx",
56
"error-boundary.mdx",
67
"for.mdx",

src/routes/reference/components/dynamic.mdx

Lines changed: 11 additions & 43 deletions
Original file line numberDiff line numberDiff line change
@@ -12,16 +12,15 @@ tags:
1212
- rendering
1313
version: "1.0"
1414
description: >-
15-
Render a component or intrinsic element selected at runtime, and access the
16-
lower-level `createDynamic` helper.
15+
Render a component or intrinsic element selected at runtime.
1716
---
1817

19-
`<Dynamic>` renders the value of its `component` prop as either a custom component or an intrinsic element. `createDynamic` provides the same behavior as a function.
18+
`<Dynamic>` renders the value of its `component` prop as either a custom component or an intrinsic element.
2019

2120
## Import
2221

2322
```ts
24-
import { Dynamic, createDynamic } from "solid-js/web";
23+
import { Dynamic } from "solid-js/web";
2524
```
2625

2726
## Type
@@ -31,14 +30,11 @@ type ValidComponent =
3130
| keyof JSX.IntrinsicElements
3231
| ((props: any) => JSX.Element);
3332

34-
type DynamicProps<T extends ValidComponent> = {
33+
type DynamicProps<T extends ValidComponent, P = ComponentProps<T>> = {
34+
[K in keyof P]: P[K];
35+
} & {
3536
component: T | undefined;
36-
} & Record<string, unknown>;
37-
38-
function createDynamic<T extends ValidComponent>(
39-
component: () => T | undefined,
40-
props: Record<string, unknown>
41-
): JSX.Element;
37+
};
4238

4339
function Dynamic<T extends ValidComponent>(props: DynamicProps<T>): JSX.Element;
4440
```
@@ -57,20 +53,6 @@ Component or intrinsic element to render.
5753

5854
Props forwarded to the rendered value of `component`.
5955

60-
## Parameters
61-
62-
### `component`
63-
64-
- **Type:** `() => T | undefined`
65-
66-
Accessor that returns the component or intrinsic element to render.
67-
68-
### `props`
69-
70-
- **Type:** `Record<string, unknown>`
71-
72-
Props passed to the rendered component or element.
73-
7456
## Return value
7557

7658
- **Type:** `JSX.Element`
@@ -79,32 +61,18 @@ Returns the rendered component or element.
7961

8062
## Behavior
8163

82-
- When `component` resolves to a function, Solid calls that component with the provided props.
83-
- When `component` resolves to a string, Solid creates an intrinsic element of that type and spreads the provided props onto it.
84-
- `<Dynamic>` calls `createDynamic(() => props.component, others)` internally after separating the `component` prop from the remaining props.
85-
86-
## Examples
64+
- When `component` is `undefined`, nothing is rendered.
8765

88-
### Basic usage
66+
## Example
8967

9068
```tsx
9169
import { Dynamic } from "solid-js/web";
9270

9371
function Example(props) {
94-
return <Dynamic component={props.as} value={props.value} />;
95-
}
96-
```
97-
98-
### `createDynamic`
99-
100-
```tsx
101-
import { createDynamic } from "solid-js/web";
102-
103-
function Example(props) {
104-
return createDynamic(() => props.as, { value: props.value });
72+
return <Dynamic component={props.as} type="button" children="Save" />;
10573
}
10674
```
10775

10876
## Related
10977

110-
- [`<Portal>`](/reference/components/portal)
78+
- [`createDynamic`](/reference/components/create-dynamic)

0 commit comments

Comments
 (0)