solid-js 2.0.0-beta.1 → 2.0.0-beta.10
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.
- package/CHEATSHEET.md +640 -0
- package/README.md +42 -188
- package/dist/dev.cjs +431 -283
- package/dist/dev.js +411 -286
- package/dist/server.cjs +701 -281
- package/dist/server.js +684 -284
- package/dist/solid.cjs +423 -255
- package/dist/solid.js +403 -258
- package/package.json +67 -39
- package/types/client/component.d.ts +64 -19
- package/types/client/core.d.ts +110 -34
- package/types/client/flow.d.ts +176 -42
- package/types/client/hydration.d.ts +514 -36
- package/types/index.d.ts +9 -12
- package/types/server/component.d.ts +11 -11
- package/types/server/core.d.ts +19 -14
- package/types/server/flow.d.ts +76 -21
- package/types/server/hydration.d.ts +34 -9
- package/types/server/index.d.ts +5 -7
- package/types/server/shared.d.ts +5 -1
- package/types/server/signals.d.ts +44 -19
- package/types/types.d.ts +15 -0
- package/types-cjs/client/component.d.cts +120 -0
- package/types-cjs/client/core.d.cts +141 -0
- package/types-cjs/client/flow.d.cts +234 -0
- package/types-cjs/client/hydration.d.cts +570 -0
- package/types-cjs/index.d.cts +17 -0
- package/types-cjs/package.json +3 -0
- package/types-cjs/server/component.d.cts +67 -0
- package/types-cjs/server/core.d.cts +49 -0
- package/types-cjs/server/flow.d.cts +115 -0
- package/types-cjs/server/hydration.d.cts +63 -0
- package/types-cjs/server/index.d.cts +10 -0
- package/types-cjs/server/shared.d.cts +50 -0
- package/types-cjs/server/signals.d.cts +87 -0
- package/types-cjs/types.d.cts +15 -0
- package/jsx-runtime.d.ts +0 -1
- package/types/jsx.d.ts +0 -4129
|
@@ -0,0 +1,570 @@
|
|
|
1
|
+
import { createErrorBoundary as coreErrorBoundary, createRenderEffect as coreRenderEffect, createEffect as coreEffect, type Accessor, type ComputeFunction, type MemoOptions, type NoInfer, type ProjectionOptions, type Refreshable, type Signal, type SignalOptions, type Store, type StoreSetter, type Context } from "@solidjs/signals";
|
|
2
|
+
import type { Element as SolidElement } from "../types.cjs";
|
|
3
|
+
type HydrationSsrFields = {
|
|
4
|
+
/**
|
|
5
|
+
* Defer the SSR stream flush until this primitive's first value is
|
|
6
|
+
* resolved. Lets late-resolving sources hold the document open
|
|
7
|
+
* rather than forcing the surrounding `<Loading>` boundary to render
|
|
8
|
+
* its fallback into the HTML. Server-only; ignored on the client.
|
|
9
|
+
*/
|
|
10
|
+
deferStream?: boolean;
|
|
11
|
+
/**
|
|
12
|
+
* Hydration policy. Decides what initial value the client uses and
|
|
13
|
+
* whether the compute re-runs.
|
|
14
|
+
*
|
|
15
|
+
* - `"server"` *(default)*: client uses the serialized server value
|
|
16
|
+
* as initial state. Compute does **not** re-run for the initial
|
|
17
|
+
* value — the serialized result is authoritative. Choose this when
|
|
18
|
+
* the compute is deterministic from server-available inputs.
|
|
19
|
+
* - `"hybrid"`: client uses the serialized server value, then
|
|
20
|
+
* re-runs the compute to take over. Choose this for computes that
|
|
21
|
+
* mix server data with client-only signals (e.g. window size,
|
|
22
|
+
* user-locale).
|
|
23
|
+
* - `"client"`: skip the server value entirely. Compute is deferred
|
|
24
|
+
* until hydration completes, then runs as if first-mounted.
|
|
25
|
+
* Choose this for client-only state where serialization is
|
|
26
|
+
* meaningless.
|
|
27
|
+
*/
|
|
28
|
+
ssrSource?: "server" | "hybrid" | "client";
|
|
29
|
+
};
|
|
30
|
+
declare module "@solidjs/signals" {
|
|
31
|
+
interface MemoOptions<T> extends HydrationSsrFields {
|
|
32
|
+
}
|
|
33
|
+
interface SignalOptions<T> extends HydrationSsrFields {
|
|
34
|
+
}
|
|
35
|
+
interface EffectOptions extends HydrationSsrFields {
|
|
36
|
+
}
|
|
37
|
+
}
|
|
38
|
+
/**
|
|
39
|
+
* Options for `createProjection`, `createStore(fn, ...)`, and
|
|
40
|
+
* `createOptimisticStore(fn, ...)` — `ProjectionOptions` plus a
|
|
41
|
+
* hydration-aware `ssrSource` field.
|
|
42
|
+
*
|
|
43
|
+
* `ssrSource` controls what initial value the client uses and whether
|
|
44
|
+
* the projection's compute re-runs:
|
|
45
|
+
*
|
|
46
|
+
* - `"server"` *(default)*: client uses the serialized server value
|
|
47
|
+
* as initial state.
|
|
48
|
+
* - `"hybrid"`: serialized value first, then re-run the compute on
|
|
49
|
+
* the client to take over.
|
|
50
|
+
* - `"client"`: skip serialization; compute runs only after hydration
|
|
51
|
+
* completes.
|
|
52
|
+
*
|
|
53
|
+
* See {@link HydrationSsrFields} for the fuller explanation.
|
|
54
|
+
*/
|
|
55
|
+
export type HydrationProjectionOptions = ProjectionOptions & {
|
|
56
|
+
ssrSource?: "server" | "hybrid" | "client";
|
|
57
|
+
};
|
|
58
|
+
type HydrationClientMemoOptions<T> = Omit<MemoOptions<T>, "ssrSource"> & {
|
|
59
|
+
ssrSource: "client";
|
|
60
|
+
};
|
|
61
|
+
type HydrationMemoOptions<T> = Omit<MemoOptions<T>, "ssrSource"> & {
|
|
62
|
+
ssrSource?: "server" | "hybrid";
|
|
63
|
+
};
|
|
64
|
+
type HydrationClientSignalOptions<T> = Omit<SignalOptions<T> & MemoOptions<T>, "ssrSource"> & {
|
|
65
|
+
ssrSource: "client";
|
|
66
|
+
};
|
|
67
|
+
type HydrationSignalOptions<T> = Omit<SignalOptions<T> & MemoOptions<T>, "ssrSource"> & {
|
|
68
|
+
ssrSource?: "server" | "hybrid";
|
|
69
|
+
};
|
|
70
|
+
export type HydrationContext = {};
|
|
71
|
+
/**
|
|
72
|
+
* Internal context flag set by `<NoHydration>` to disable hydration for its
|
|
73
|
+
* subtree. Cross-package wiring; not part of the user-facing API.
|
|
74
|
+
*
|
|
75
|
+
* @internal
|
|
76
|
+
*/
|
|
77
|
+
export declare const NoHydrateContext: Context<boolean>;
|
|
78
|
+
type SharedConfig = {
|
|
79
|
+
hydrating: boolean;
|
|
80
|
+
resources?: {
|
|
81
|
+
[key: string]: any;
|
|
82
|
+
};
|
|
83
|
+
load?: (id: string) => Promise<any> | any;
|
|
84
|
+
has?: (id: string) => boolean;
|
|
85
|
+
gather?: (key: string) => void;
|
|
86
|
+
cleanupFragment?: (id: string) => void;
|
|
87
|
+
loadModuleAssets?: (mapping: Record<string, string>) => Promise<void> | undefined;
|
|
88
|
+
registry?: Map<string, object>;
|
|
89
|
+
completed?: WeakSet<object> | null;
|
|
90
|
+
events?: any[] | null;
|
|
91
|
+
verifyHydration?: () => void;
|
|
92
|
+
done: boolean;
|
|
93
|
+
getNextContextId(): string;
|
|
94
|
+
};
|
|
95
|
+
/**
|
|
96
|
+
* Shared hydration coordination object — populated by `enableHydration()` and
|
|
97
|
+
* consumed by the hydration-aware primitive wrappers and SSR streaming
|
|
98
|
+
* runtime. Cross-package wiring; not part of the user-facing API.
|
|
99
|
+
*
|
|
100
|
+
* @internal
|
|
101
|
+
*/
|
|
102
|
+
export declare const sharedConfig: SharedConfig;
|
|
103
|
+
/**
|
|
104
|
+
* Registers a callback to run once when all hydration completes
|
|
105
|
+
* (all boundaries hydrated or cancelled). If hydration is already
|
|
106
|
+
* complete (or not hydrating), fires via queueMicrotask.
|
|
107
|
+
*/
|
|
108
|
+
export declare function onHydrationEnd(callback: () => void): void;
|
|
109
|
+
/**
|
|
110
|
+
* Switches the primitive wrappers above (`createMemo`, `createSignal`,
|
|
111
|
+
* `createStore`, etc.) into hydration-aware mode. Called by `hydrate()`
|
|
112
|
+
* before mounting; cross-package wiring not part of the user-facing API.
|
|
113
|
+
*
|
|
114
|
+
* @internal
|
|
115
|
+
*/
|
|
116
|
+
export declare function enableHydration(): void;
|
|
117
|
+
/**
|
|
118
|
+
* Creates a readonly derived reactive memoized signal.
|
|
119
|
+
*
|
|
120
|
+
* `compute(prev)` runs reactively — every reactive read inside it is
|
|
121
|
+
* tracked, and the returned value becomes the memo's current value.
|
|
122
|
+
* The memo is cached: it only recomputes when one of its tracked
|
|
123
|
+
* sources changes.
|
|
124
|
+
*
|
|
125
|
+
* ```ts
|
|
126
|
+
* const value = createMemo<T>(compute, options?: MemoOptions<T>);
|
|
127
|
+
* ```
|
|
128
|
+
*
|
|
129
|
+
* @example
|
|
130
|
+
* ```ts
|
|
131
|
+
* const [first, setFirst] = createSignal("Ada");
|
|
132
|
+
* const [last, setLast] = createSignal("Lovelace");
|
|
133
|
+
*
|
|
134
|
+
* const fullName = createMemo(() => `${first()} ${last()}`);
|
|
135
|
+
*
|
|
136
|
+
* fullName(); // "Ada Lovelace"
|
|
137
|
+
* ```
|
|
138
|
+
*
|
|
139
|
+
* @example
|
|
140
|
+
* ```ts
|
|
141
|
+
* // Async memo — reads suspend inside <Loading>
|
|
142
|
+
* const user = createMemo(async () => {
|
|
143
|
+
* const res = await fetch(`/users/${id()}`);
|
|
144
|
+
* return res.json();
|
|
145
|
+
* });
|
|
146
|
+
* ```
|
|
147
|
+
*
|
|
148
|
+
* **Hydration:** `MemoOptions` accepts an `ssrSource` field
|
|
149
|
+
* (`"server"` | `"hybrid"` | `"client"`) that controls what initial
|
|
150
|
+
* value the client uses and whether `compute` re-runs. See
|
|
151
|
+
* {@link HydrationSsrFields}.
|
|
152
|
+
*
|
|
153
|
+
* @param compute receives the previous value, returns the new value
|
|
154
|
+
* @param options `MemoOptions` — `id`, `name`, `equals`, `unobserved`,
|
|
155
|
+
* `lazy`, `transparent`, `ssrSource`
|
|
156
|
+
*
|
|
157
|
+
* @description https://docs.solidjs.com/reference/basic-reactivity/create-memo
|
|
158
|
+
*/
|
|
159
|
+
export declare const createMemo: {
|
|
160
|
+
<T>(compute: ComputeFunction<undefined | NoInfer<T>, T>, options: HydrationClientMemoOptions<T>): Accessor<T | undefined>;
|
|
161
|
+
<T>(compute: ComputeFunction<undefined | NoInfer<T>, T>, options?: HydrationMemoOptions<T>): Accessor<T>;
|
|
162
|
+
};
|
|
163
|
+
/**
|
|
164
|
+
* Creates a simple reactive state with a getter and setter.
|
|
165
|
+
*
|
|
166
|
+
* - **Plain form** — `createSignal(value, options?: SignalOptions<T>)`:
|
|
167
|
+
* stores a value; the setter writes a new value or applies an
|
|
168
|
+
* updater `(prev) => next`.
|
|
169
|
+
* - **Function form (writable memo)** —
|
|
170
|
+
* `createSignal(fn, options?: SignalOptions<T> & MemoOptions<T>)`:
|
|
171
|
+
* the value is computed by `fn` like a memo, but the setter can
|
|
172
|
+
* locally override it (useful for optimistic edits over a derived
|
|
173
|
+
* default).
|
|
174
|
+
*
|
|
175
|
+
* ```ts
|
|
176
|
+
* // Plain
|
|
177
|
+
* const [count, setCount] = createSignal(0);
|
|
178
|
+
*
|
|
179
|
+
* count(); // 0
|
|
180
|
+
* setCount(1); // explicit value
|
|
181
|
+
* setCount(c => c + 1); // updater
|
|
182
|
+
*
|
|
183
|
+
* // Writable memo: starts as `fn()`, can be locally overwritten.
|
|
184
|
+
* const [user, setUser] = createSignal(() => fetchUser(userId()));
|
|
185
|
+
* setUser({ ...user(), name: "Alice" }); // optimistic local edit
|
|
186
|
+
* ```
|
|
187
|
+
*
|
|
188
|
+
* **Hydration:** in the function form, `SignalOptions & MemoOptions`
|
|
189
|
+
* accepts an `ssrSource` field (`"server"` | `"hybrid"` | `"client"`)
|
|
190
|
+
* that controls what initial value the client uses and whether `fn`
|
|
191
|
+
* re-runs. See {@link HydrationSsrFields}.
|
|
192
|
+
*
|
|
193
|
+
* @returns `[state: Accessor<T>, setState: Setter<T>]`
|
|
194
|
+
*
|
|
195
|
+
* @description https://docs.solidjs.com/reference/basic-reactivity/create-signal
|
|
196
|
+
*/
|
|
197
|
+
export declare const createSignal: {
|
|
198
|
+
<T>(): Signal<T | undefined>;
|
|
199
|
+
<T>(value: Exclude<T, Function>, options?: SignalOptions<T>): Signal<T>;
|
|
200
|
+
<T>(fn: ComputeFunction<undefined | NoInfer<T>, T>, options: HydrationClientSignalOptions<T>): Signal<T | undefined>;
|
|
201
|
+
<T>(fn: ComputeFunction<undefined | NoInfer<T>, T>, options?: HydrationSignalOptions<T>): Signal<T>;
|
|
202
|
+
};
|
|
203
|
+
/**
|
|
204
|
+
* Lower-level primitive that backs the `<Errored>` flow control.
|
|
205
|
+
* Catches errors thrown inside `fn` and renders `fallback(error,
|
|
206
|
+
* reset)` instead. `reset()` recomputes the failing sources so the
|
|
207
|
+
* boundary can attempt to recover.
|
|
208
|
+
*
|
|
209
|
+
* App code should use `<Errored fallback={...}>` directly — reach for
|
|
210
|
+
* this only when authoring a custom boundary component.
|
|
211
|
+
*
|
|
212
|
+
* **Hydration:** if the server serialized an error for this boundary,
|
|
213
|
+
* the client re-throws it on the first hydration pass so `fallback`
|
|
214
|
+
* renders the same content the server emitted.
|
|
215
|
+
*
|
|
216
|
+
* @example
|
|
217
|
+
* ```tsx
|
|
218
|
+
* // Custom boundary built on the primitive — adds telemetry around the
|
|
219
|
+
* // canonical `<Errored>` shape.
|
|
220
|
+
* function TracedErrored(props: {
|
|
221
|
+
* fallback: (e: unknown) => JSX.Element;
|
|
222
|
+
* children: JSX.Element;
|
|
223
|
+
* }): JSX.Element {
|
|
224
|
+
* return createErrorBoundary(
|
|
225
|
+
* () => props.children,
|
|
226
|
+
* (err, reset) => {
|
|
227
|
+
* reportError(err);
|
|
228
|
+
* return props.fallback(err);
|
|
229
|
+
* }
|
|
230
|
+
* ) as unknown as JSX.Element;
|
|
231
|
+
* }
|
|
232
|
+
* ```
|
|
233
|
+
*/
|
|
234
|
+
export declare const createErrorBoundary: typeof coreErrorBoundary;
|
|
235
|
+
/**
|
|
236
|
+
* Creates an optimistic signal — a `Signal<T>` whose writes are
|
|
237
|
+
* tentative inside an `action` transition: they show up immediately,
|
|
238
|
+
* then auto-revert (or reconcile to the action's resolved value) once
|
|
239
|
+
* the transition settles.
|
|
240
|
+
*
|
|
241
|
+
* Use this for single-value optimistic state. For collection-shaped
|
|
242
|
+
* state, prefer `createOptimisticStore`.
|
|
243
|
+
*
|
|
244
|
+
* - **Plain form** — `createOptimistic(value, options?: SignalOptions<T>)`.
|
|
245
|
+
* - **Function form** — `createOptimistic(fn, options?: SignalOptions<T> & MemoOptions<T>)`:
|
|
246
|
+
* the authoritative value is recomputed by `fn`; the optimistic
|
|
247
|
+
* overlay reverts after each transition.
|
|
248
|
+
*
|
|
249
|
+
* @example
|
|
250
|
+
* ```ts
|
|
251
|
+
* const [name, setName] = createOptimistic("Ada");
|
|
252
|
+
*
|
|
253
|
+
* const rename = action(function* (next: string) {
|
|
254
|
+
* setName(next); // optimistic
|
|
255
|
+
* yield api.rename(next); // commits or reverts on settle
|
|
256
|
+
* });
|
|
257
|
+
* ```
|
|
258
|
+
*
|
|
259
|
+
* **Hydration:** in the function form, accepts an `ssrSource` field
|
|
260
|
+
* (`"server"` | `"hybrid"` | `"client"`). See {@link HydrationSsrFields}.
|
|
261
|
+
*
|
|
262
|
+
* @returns `[state: Accessor<T>, setState: Setter<T>]`
|
|
263
|
+
*
|
|
264
|
+
* @description https://docs.solidjs.com/reference/basic-reactivity/create-optimistic-signal
|
|
265
|
+
*/
|
|
266
|
+
export declare const createOptimistic: {
|
|
267
|
+
<T>(): Signal<T | undefined>;
|
|
268
|
+
<T>(value: Exclude<T, Function>, options?: SignalOptions<T>): Signal<T>;
|
|
269
|
+
<T>(fn: ComputeFunction<undefined | NoInfer<T>, T>, options: HydrationClientSignalOptions<T>): Signal<T | undefined>;
|
|
270
|
+
<T>(fn: ComputeFunction<undefined | NoInfer<T>, T>, options?: HydrationSignalOptions<T>): Signal<T>;
|
|
271
|
+
};
|
|
272
|
+
/**
|
|
273
|
+
* Creates a derived (projected) store — `createMemo` for stores. The
|
|
274
|
+
* derive function receives a mutable draft and either mutates it in
|
|
275
|
+
* place (canonical) or returns a new value. Either way the result is
|
|
276
|
+
* reconciled against the previous draft by `options.key` (default
|
|
277
|
+
* `"id"`), so surviving items keep their proxy identity — only
|
|
278
|
+
* added/removed items are created/disposed.
|
|
279
|
+
*
|
|
280
|
+
* Returns the projected store directly (no setter — reads only).
|
|
281
|
+
*
|
|
282
|
+
* Reach for this when you want the structural-sharing / per-property
|
|
283
|
+
* tracking of a store on top of a derived computation. For simple
|
|
284
|
+
* read-only derivations, `createMemo` is lighter.
|
|
285
|
+
*
|
|
286
|
+
* @example
|
|
287
|
+
* ```ts
|
|
288
|
+
* // Mutation form — update individual fields on the draft.
|
|
289
|
+
* const summary = createProjection<{ total: number; active: number }>(
|
|
290
|
+
* draft => {
|
|
291
|
+
* draft.total = users().length;
|
|
292
|
+
* draft.active = users().filter(u => u.active).length;
|
|
293
|
+
* },
|
|
294
|
+
* { total: 0, active: 0 }
|
|
295
|
+
* );
|
|
296
|
+
*
|
|
297
|
+
* // Return form — produce a derived collection. Reconciled by `id`
|
|
298
|
+
* // so each surviving user keeps the same store identity.
|
|
299
|
+
* const activeUsers = createProjection<User[]>(
|
|
300
|
+
* () => allUsers().filter(u => u.active),
|
|
301
|
+
* []
|
|
302
|
+
* );
|
|
303
|
+
* ```
|
|
304
|
+
*
|
|
305
|
+
* **Hydration:** {@link HydrationProjectionOptions} adds `ssrSource`
|
|
306
|
+
* (`"server"` | `"hybrid"` | `"client"`) for the same client-vs-server
|
|
307
|
+
* tradeoffs as the other primitives. See {@link HydrationSsrFields}.
|
|
308
|
+
*/
|
|
309
|
+
export declare const createProjection: <T extends object = {}>(fn: (draft: T) => void | T | Promise<void | T> | AsyncIterable<void | T>, initialValue: T, options?: HydrationProjectionOptions) => Refreshable<Store<T>>;
|
|
310
|
+
type NoFn<T> = T extends Function ? never : T;
|
|
311
|
+
/**
|
|
312
|
+
* Creates a deeply-reactive store backed by a Proxy. Reads track each
|
|
313
|
+
* property accessed; only the parts that change trigger updates.
|
|
314
|
+
*
|
|
315
|
+
* Store properties hold **plain values**, not accessors. The proxy
|
|
316
|
+
* already tracks reads per-property — wrapping a value in
|
|
317
|
+
* `() => state.foo` produces a getter that *won't* track when called,
|
|
318
|
+
* which looks like a reactivity bug but is just a category error. If
|
|
319
|
+
* you have a signal-shaped piece of state, make it a property of the
|
|
320
|
+
* store (`{ foo: 1 }`) rather than nesting an accessor inside
|
|
321
|
+
* (`{ foo: () => signal() }`).
|
|
322
|
+
*
|
|
323
|
+
* The setter takes a **draft-mutating** function — mutate the draft
|
|
324
|
+
* in place (canonical). The callback may also return a new value:
|
|
325
|
+
* arrays are replaced by index (length adjusted), objects are
|
|
326
|
+
* shallow-diffed at the top level (keys present in the returned value
|
|
327
|
+
* are written, missing keys deleted). Use the return form for shapes
|
|
328
|
+
* where mutation is awkward — most commonly removing items via
|
|
329
|
+
* `filter`. The setter does **not** do keyed reconciliation; for
|
|
330
|
+
* that, use the derived/projection form (or `createProjection`).
|
|
331
|
+
*
|
|
332
|
+
* - **Plain form** — `createStore(initialValue)`: wraps a value in a
|
|
333
|
+
* reactive proxy.
|
|
334
|
+
* - **Derived form** — `createStore(fn, seed, options?)`: a
|
|
335
|
+
* *projection store* whose contents are computed by `fn(draft)`.
|
|
336
|
+
* `fn` may be sync, async, or an `AsyncIterable`; the projection's
|
|
337
|
+
* result reconciles against the existing store by `options.key`
|
|
338
|
+
* (default `"id"`) for stable identity.
|
|
339
|
+
*
|
|
340
|
+
* @example
|
|
341
|
+
* ```ts
|
|
342
|
+
* const [state, setState] = createStore({
|
|
343
|
+
* user: { name: "Ada", age: 36 },
|
|
344
|
+
* todos: [] as { id: string; text: string; done: boolean }[]
|
|
345
|
+
* });
|
|
346
|
+
*
|
|
347
|
+
* // Canonical: mutate the draft in place.
|
|
348
|
+
* setState(s => { s.user.age = 37; });
|
|
349
|
+
* setState(s => { s.todos.push({ id: "1", text: "x", done: false }); });
|
|
350
|
+
*
|
|
351
|
+
* // Return form: reach for it when mutation is awkward.
|
|
352
|
+
* setState(s => s.todos.filter(t => !t.done)); // remove items
|
|
353
|
+
* setState(s => ({ ...s, user: { name: "Grace", age: 85 } })); // shallow replace
|
|
354
|
+
* ```
|
|
355
|
+
*
|
|
356
|
+
* @example
|
|
357
|
+
* ```ts
|
|
358
|
+
* // Derived store — auto-fetches & reconciles by `id`.
|
|
359
|
+
* const [users] = createStore(
|
|
360
|
+
* async () => fetch("/users").then(r => r.json()),
|
|
361
|
+
* [] as User[]
|
|
362
|
+
* );
|
|
363
|
+
* ```
|
|
364
|
+
*
|
|
365
|
+
* **Hydration:** the derived form accepts
|
|
366
|
+
* {@link HydrationProjectionOptions}, which adds an `ssrSource` field
|
|
367
|
+
* (`"server"` | `"hybrid"` | `"client"`). See {@link HydrationSsrFields}.
|
|
368
|
+
*
|
|
369
|
+
* @returns `[store: Store<T>, setStore: StoreSetter<T>]`
|
|
370
|
+
*/
|
|
371
|
+
export declare const createStore: {
|
|
372
|
+
<T extends object = {}>(store: NoFn<T> | Store<NoFn<T>>): [get: Store<T>, set: StoreSetter<T>];
|
|
373
|
+
<T extends object = {}>(fn: (store: T) => void | T | Promise<void | T> | AsyncIterable<void | T>, store: NoFn<T> | Store<NoFn<T>>, options?: HydrationProjectionOptions): [get: Refreshable<Store<T>>, set: StoreSetter<T>];
|
|
374
|
+
};
|
|
375
|
+
/**
|
|
376
|
+
* The store equivalent of `createOptimistic`. Writes inside an
|
|
377
|
+
* `action` transition are tentative — they show up immediately but
|
|
378
|
+
* auto-revert (or reconcile to the action's resolved value) once the
|
|
379
|
+
* transition finishes.
|
|
380
|
+
*
|
|
381
|
+
* Use this for optimistic UI on collection-shaped data. For
|
|
382
|
+
* single-value optimistic state, prefer `createOptimistic`.
|
|
383
|
+
*
|
|
384
|
+
* - **Plain form** — `createOptimisticStore(initialValue)`.
|
|
385
|
+
* - **Derived form** — `createOptimisticStore(fn, seed, options?)`:
|
|
386
|
+
* a projection store whose authoritative value is recomputed by
|
|
387
|
+
* `fn` and whose optimistic overlay reverts after each transition.
|
|
388
|
+
*
|
|
389
|
+
* `options.key` defaults to `"id"`; specify it only when your data
|
|
390
|
+
* uses a different identity field (e.g. `{ key: "uuid" }` or
|
|
391
|
+
* `{ key: t => t.slug }`). Restating the default just adds noise.
|
|
392
|
+
*
|
|
393
|
+
* @example
|
|
394
|
+
* ```ts
|
|
395
|
+
* const [todos, setTodos] = createOptimisticStore<Todo[]>([]);
|
|
396
|
+
*
|
|
397
|
+
* // Mutation: optimistic add, then in-place reconcile to the saved row.
|
|
398
|
+
* const addTodo = action(function* (text: string) {
|
|
399
|
+
* const tempId = crypto.randomUUID();
|
|
400
|
+
* setTodos(t => { t.push({ id: tempId, text, pending: true }); });
|
|
401
|
+
* const saved = yield api.createTodo(text);
|
|
402
|
+
* setTodos(t => {
|
|
403
|
+
* const i = t.findIndex(x => x.id === tempId);
|
|
404
|
+
* if (i >= 0) t[i] = saved;
|
|
405
|
+
* });
|
|
406
|
+
* });
|
|
407
|
+
*
|
|
408
|
+
* // Return form: filter is the natural shape for removal.
|
|
409
|
+
* const removeTodo = action(function* (id: string) {
|
|
410
|
+
* setTodos(t => t.filter(x => x.id !== id));
|
|
411
|
+
* yield api.removeTodo(id);
|
|
412
|
+
* });
|
|
413
|
+
* ```
|
|
414
|
+
*
|
|
415
|
+
* **Hydration:** the derived form accepts
|
|
416
|
+
* {@link HydrationProjectionOptions}, which adds an `ssrSource` field
|
|
417
|
+
* (`"server"` | `"hybrid"` | `"client"`). See {@link HydrationSsrFields}.
|
|
418
|
+
*
|
|
419
|
+
* @returns `[store: Store<T>, setStore: StoreSetter<T>]`
|
|
420
|
+
*/
|
|
421
|
+
export declare const createOptimisticStore: {
|
|
422
|
+
<T extends object = {}>(store: NoFn<T> | Store<NoFn<T>>): [get: Store<T>, set: StoreSetter<T>];
|
|
423
|
+
<T extends object = {}>(fn: (store: T) => void | T | Promise<void | T> | AsyncIterable<void | T>, store: NoFn<T> | Store<NoFn<T>>, options?: HydrationProjectionOptions): [get: Refreshable<Store<T>>, set: StoreSetter<T>];
|
|
424
|
+
};
|
|
425
|
+
/**
|
|
426
|
+
* Creates a reactive computation that runs during the render phase as
|
|
427
|
+
* DOM elements are created and updated but not necessarily connected.
|
|
428
|
+
*
|
|
429
|
+
* Same compute/effect split as `createEffect` (`compute(prev)` tracks,
|
|
430
|
+
* `effect(next, prev?)` runs imperatively), but scheduled inside the
|
|
431
|
+
* render queue rather than after it. Reach for this only when
|
|
432
|
+
* authoring renderer plumbing — app code should use `createEffect`.
|
|
433
|
+
*
|
|
434
|
+
* ```ts
|
|
435
|
+
* createRenderEffect<T>(compute, effectFn, options?: EffectOptions);
|
|
436
|
+
* ```
|
|
437
|
+
*
|
|
438
|
+
* **Hydration:** `EffectOptions` accepts an `ssrSource` field
|
|
439
|
+
* (`"server"` | `"hybrid"` | `"client"`). See {@link HydrationSsrFields}.
|
|
440
|
+
*
|
|
441
|
+
* @example
|
|
442
|
+
* ```ts
|
|
443
|
+
* // Custom directive: bind an element's textContent to a reactive source
|
|
444
|
+
* // synchronously during render. App code should use `createEffect` for
|
|
445
|
+
* // post-render side effects.
|
|
446
|
+
* function bindText(el: HTMLElement, source: () => string) {
|
|
447
|
+
* createRenderEffect(
|
|
448
|
+
* () => source(),
|
|
449
|
+
* value => { el.textContent = value; }
|
|
450
|
+
* );
|
|
451
|
+
* }
|
|
452
|
+
* ```
|
|
453
|
+
*
|
|
454
|
+
* @description https://docs.solidjs.com/reference/secondary-primitives/create-render-effect
|
|
455
|
+
*/
|
|
456
|
+
export declare const createRenderEffect: typeof coreRenderEffect;
|
|
457
|
+
/**
|
|
458
|
+
* Creates a reactive effect with **separate compute and effect phases**.
|
|
459
|
+
*
|
|
460
|
+
* - `compute(prev)` runs reactively — *put all reactive reads here*.
|
|
461
|
+
* The returned value is passed to `effect` and is also the new
|
|
462
|
+
* "previous" value for the next run.
|
|
463
|
+
* - `effect(next, prev?)` runs imperatively (untracked) after the
|
|
464
|
+
* queue flushes. *Put DOM writes / fetch / logging / subscriptions
|
|
465
|
+
* here.* It may return a cleanup function which runs before the
|
|
466
|
+
* next effect or on disposal.
|
|
467
|
+
*
|
|
468
|
+
* Reactive reads inside `effect` will *not* re-trigger this effect —
|
|
469
|
+
* that's intentional. If you need a single-phase tracked effect, use
|
|
470
|
+
* `createTrackedEffect` (with the tradeoffs noted there).
|
|
471
|
+
*
|
|
472
|
+
* Pass an `EffectBundle` (`{ effect, error }`) instead of a plain
|
|
473
|
+
* function to intercept errors thrown from the compute or effect
|
|
474
|
+
* phases.
|
|
475
|
+
*
|
|
476
|
+
* ```ts
|
|
477
|
+
* createEffect<T>(compute, effectFn | { effect, error }, options?: EffectOptions);
|
|
478
|
+
* ```
|
|
479
|
+
*
|
|
480
|
+
* @example
|
|
481
|
+
* ```ts
|
|
482
|
+
* const [count, setCount] = createSignal(0);
|
|
483
|
+
*
|
|
484
|
+
* createEffect(
|
|
485
|
+
* () => count(), // compute: tracks `count`
|
|
486
|
+
* value => console.log(value) // effect: side effect
|
|
487
|
+
* );
|
|
488
|
+
*
|
|
489
|
+
* setCount(1); // logs 1 after the next flush
|
|
490
|
+
* ```
|
|
491
|
+
*
|
|
492
|
+
* @example
|
|
493
|
+
* ```ts
|
|
494
|
+
* createEffect(
|
|
495
|
+
* () => userId(),
|
|
496
|
+
* id => {
|
|
497
|
+
* const ctrl = new AbortController();
|
|
498
|
+
* fetch(`/users/${id}`, { signal: ctrl.signal });
|
|
499
|
+
* return () => ctrl.abort(); // cleanup before next run / disposal
|
|
500
|
+
* }
|
|
501
|
+
* );
|
|
502
|
+
* ```
|
|
503
|
+
*
|
|
504
|
+
* **Hydration:** `EffectOptions` accepts an `ssrSource` field
|
|
505
|
+
* (`"server"` | `"hybrid"` | `"client"`). See {@link HydrationSsrFields}.
|
|
506
|
+
*
|
|
507
|
+
* @description https://docs.solidjs.com/reference/basic-reactivity/create-effect
|
|
508
|
+
*/
|
|
509
|
+
export declare const createEffect: typeof coreEffect;
|
|
510
|
+
/**
|
|
511
|
+
* Lower-level primitive that backs the `<Loading>` component. Returns a
|
|
512
|
+
* computation that yields `fallback()` while async reads inside `fn` are
|
|
513
|
+
* pending, and `fn()` once they have settled. Most callers should use
|
|
514
|
+
* `<Loading>` directly; this is exposed for renderers and library authors.
|
|
515
|
+
*
|
|
516
|
+
* @example
|
|
517
|
+
* ```tsx
|
|
518
|
+
* // Custom boundary component built on the primitive. App code uses
|
|
519
|
+
* // `<Loading fallback={…}>` directly.
|
|
520
|
+
* function MyLoading(props: { fallback: JSX.Element; children: JSX.Element }): JSX.Element {
|
|
521
|
+
* return createLoadingBoundary(
|
|
522
|
+
* () => props.children,
|
|
523
|
+
* () => props.fallback
|
|
524
|
+
* ) as unknown as JSX.Element;
|
|
525
|
+
* }
|
|
526
|
+
* ```
|
|
527
|
+
*/
|
|
528
|
+
export declare function createLoadingBoundary(fn: () => any, fallback: () => any, options?: {
|
|
529
|
+
on?: () => any;
|
|
530
|
+
}): () => unknown;
|
|
531
|
+
/**
|
|
532
|
+
* Disables hydration for its children on the client.
|
|
533
|
+
* During hydration, skips the subtree entirely (returns undefined so DOM is left untouched).
|
|
534
|
+
* After hydration, renders children fresh.
|
|
535
|
+
*
|
|
536
|
+
* @example
|
|
537
|
+
* ```tsx
|
|
538
|
+
* // Mount a client-only widget that the server didn't render. The subtree
|
|
539
|
+
* // is left empty during hydration, then renders fresh once hydration ends.
|
|
540
|
+
* <NoHydration>
|
|
541
|
+
* <ClientOnlyMap />
|
|
542
|
+
* </NoHydration>
|
|
543
|
+
* ```
|
|
544
|
+
*/
|
|
545
|
+
export declare function NoHydration(props: {
|
|
546
|
+
children: SolidElement;
|
|
547
|
+
}): SolidElement;
|
|
548
|
+
/**
|
|
549
|
+
* Re-enables hydration within a `<NoHydration>` zone (passthrough on the
|
|
550
|
+
* client). Use it to opt a subtree back into hydration when the surrounding
|
|
551
|
+
* region was opted out.
|
|
552
|
+
*
|
|
553
|
+
* @example
|
|
554
|
+
* ```tsx
|
|
555
|
+
* // Inside a `<NoHydration>` region, re-enable hydration for one inner
|
|
556
|
+
* // subtree that does need to match a server-rendered fragment.
|
|
557
|
+
* <NoHydration>
|
|
558
|
+
* <ClientOnlyShell>
|
|
559
|
+
* <Hydration>
|
|
560
|
+
* <ServerHydratedWidget />
|
|
561
|
+
* </Hydration>
|
|
562
|
+
* </ClientOnlyShell>
|
|
563
|
+
* </NoHydration>
|
|
564
|
+
* ```
|
|
565
|
+
*/
|
|
566
|
+
export declare function Hydration(props: {
|
|
567
|
+
id?: string;
|
|
568
|
+
children: SolidElement;
|
|
569
|
+
}): SolidElement;
|
|
570
|
+
export {};
|
|
@@ -0,0 +1,17 @@
|
|
|
1
|
+
export { $PROXY, $REFRESH, $TRACK, action, createOwner, createReaction, createRevealOrder, createRoot, createTrackedEffect, deep, flatten, flush, getNextChildId, getObserver, getOwner, isDisposed, isEqual, isRefreshing, isPending, isWrappable, mapArray, merge, omit, onCleanup, onSettled, latest, reconcile, refresh, repeat, resolve, NotReadyError, runWithOwner, enableExternalSource, enforceLoadingBoundary, snapshot, storePath, untrack } from "@solidjs/signals";
|
|
2
|
+
export type { Accessor, ComputeFunction, EffectFunction, EffectOptions, ExternalSource, ExternalSourceConfig, ExternalSourceFactory, Merge, NoInfer, NotWrappable, Omit, Owner, Refreshable, Signal, SignalOptions, Setter, Store, SolidStore, StoreNode, StoreSetter, StorePathRange, ArrayFilterFn, CustomPartial, Part, PathSetter } from "@solidjs/signals";
|
|
3
|
+
export { $DEVCOMP, children, createContext, useContext } from "./client/core.cjs";
|
|
4
|
+
export type { ChildrenReturn, Context, ContextProviderComponent, ResolvedChildren, ResolvedElement } from "./client/core.cjs";
|
|
5
|
+
export * from "./client/component.cjs";
|
|
6
|
+
export * from "./client/flow.cjs";
|
|
7
|
+
export type { ArrayElement, Element } from "./types.cjs";
|
|
8
|
+
export { sharedConfig, enableHydration, createErrorBoundary, createLoadingBoundary, createMemo, createSignal, createStore, createProjection, createOptimistic, createOptimisticStore, createRenderEffect, createEffect, NoHydration, Hydration, NoHydrateContext } from "./client/hydration.cjs";
|
|
9
|
+
/** @internal */
|
|
10
|
+
export declare function ssrHandleError(): void;
|
|
11
|
+
/** @internal */
|
|
12
|
+
export declare function ssrRunInScope(): void;
|
|
13
|
+
import { type Dev } from "@solidjs/signals";
|
|
14
|
+
export declare const DEV: Dev | undefined;
|
|
15
|
+
declare global {
|
|
16
|
+
var Solid$$: boolean;
|
|
17
|
+
}
|
|
@@ -0,0 +1,67 @@
|
|
|
1
|
+
import type { Element as SolidElement } from "../types.cjs";
|
|
2
|
+
export declare function enableHydration(): void;
|
|
3
|
+
/**
|
|
4
|
+
* A general `Component` has no implicit `children` prop. If desired, specify
|
|
5
|
+
* one explicitly, e.g. `Component<{ name: string; children: Element }>`.
|
|
6
|
+
*/
|
|
7
|
+
export type Component<P extends Record<string, any> = {}> = (props: P) => SolidElement;
|
|
8
|
+
/**
|
|
9
|
+
* Extend props to forbid the `children` prop.
|
|
10
|
+
*/
|
|
11
|
+
export type VoidProps<P extends Record<string, any> = {}> = P & {
|
|
12
|
+
children?: never;
|
|
13
|
+
};
|
|
14
|
+
/**
|
|
15
|
+
* `VoidComponent` forbids the `children` prop.
|
|
16
|
+
*/
|
|
17
|
+
export type VoidComponent<P extends Record<string, any> = {}> = Component<VoidProps<P>>;
|
|
18
|
+
/**
|
|
19
|
+
* Extend props to allow optional Solid children.
|
|
20
|
+
*/
|
|
21
|
+
export type ParentProps<P extends Record<string, any> = {}> = P & {
|
|
22
|
+
children?: SolidElement;
|
|
23
|
+
};
|
|
24
|
+
/**
|
|
25
|
+
* `ParentComponent` allows an optional `children` prop with the usual type in JSX.
|
|
26
|
+
*/
|
|
27
|
+
export type ParentComponent<P extends Record<string, any> = {}> = Component<ParentProps<P>>;
|
|
28
|
+
/**
|
|
29
|
+
* Extend props to require a `children` prop with the specified type.
|
|
30
|
+
*/
|
|
31
|
+
export type FlowProps<P extends Record<string, any> = {}, C = SolidElement> = P & {
|
|
32
|
+
children: C;
|
|
33
|
+
};
|
|
34
|
+
/**
|
|
35
|
+
* `FlowComponent` requires a `children` prop with the specified type.
|
|
36
|
+
*/
|
|
37
|
+
export type FlowComponent<P extends Record<string, any> = {}, C = SolidElement> = Component<FlowProps<P, C>>;
|
|
38
|
+
export type ValidComponent = Component<any>;
|
|
39
|
+
/**
|
|
40
|
+
* Takes the props of the passed component and returns its type
|
|
41
|
+
*/
|
|
42
|
+
export type ComponentProps<T extends ValidComponent> = T extends Component<infer P> ? P : never;
|
|
43
|
+
/**
|
|
44
|
+
* Type of `props.ref`, for use in `Component` or `props` typing.
|
|
45
|
+
*/
|
|
46
|
+
export type Ref<T> = T | ((val: T) => void);
|
|
47
|
+
/**
|
|
48
|
+
* Creates a component. On server, just calls the function directly (no untrack needed).
|
|
49
|
+
*/
|
|
50
|
+
export declare function createComponent<T extends Record<string, any>>(Comp: Component<T>, props: T): SolidElement;
|
|
51
|
+
/**
|
|
52
|
+
* Lazy load a function component asynchronously.
|
|
53
|
+
* On server, returns a createMemo that throws NotReadyError until the module resolves,
|
|
54
|
+
* allowing resolveSSRNode to capture it as a fine-grained hole. The memo naturally
|
|
55
|
+
* scopes the owner so hydration IDs align with the client's createMemo in lazy().
|
|
56
|
+
* Requires `moduleUrl` for SSR — the bundler plugin injects the module specifier
|
|
57
|
+
* so the server can look up client chunk URLs from the asset manifest.
|
|
58
|
+
*/
|
|
59
|
+
export declare function lazy<T extends Component<any>>(fn: () => Promise<{
|
|
60
|
+
default: T;
|
|
61
|
+
}>, moduleUrl?: string): T & {
|
|
62
|
+
preload: () => Promise<{
|
|
63
|
+
default: T;
|
|
64
|
+
}>;
|
|
65
|
+
moduleUrl?: string;
|
|
66
|
+
};
|
|
67
|
+
export declare function createUniqueId(): string;
|