solid-js 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.
@@ -1,4 +1,5 @@
1
- import type { Accessor } from "@solidjs/signals";
1
+ import type { Accessor, RevealOrder } from "@solidjs/signals";
2
+ export type { RevealOrder };
2
3
  import type { JSX } from "../jsx.js";
3
4
  type NonZeroParams<T extends (...args: any[]) => any> = Parameters<T>["length"] extends 0 ? never : T;
4
5
  type ConditionalRenderCallback<T> = (item: Accessor<NonNullable<T>>) => JSX.Element;
@@ -40,7 +41,21 @@ export declare function Repeat<T extends JSX.Element>(props: {
40
41
  children: ((index: number) => T) | T;
41
42
  }): JSX.Element;
42
43
  /**
43
- * Conditionally render its children or an optional fallback component
44
+ * Conditionally renders its children when `when` is truthy, otherwise renders
45
+ * the optional `fallback`.
46
+ *
47
+ * The function-child form receives an accessor for the narrowed value — call
48
+ * it to read. Without `keyed` (default), the child is preserved across
49
+ * truthy values; with `keyed`, the child remounts whenever the value's
50
+ * identity changes.
51
+ *
52
+ * @example
53
+ * ```tsx
54
+ * <Show when={user()} fallback={<SignIn />}>
55
+ * {u => <Greeting name={u().name} />}
56
+ * </Show>
57
+ * ```
58
+ *
44
59
  * @description https://docs.solidjs.com/reference/components/show
45
60
  */
46
61
  export declare function Show<T, F extends ConditionalRenderCallback<T>>(props: {
@@ -73,12 +88,24 @@ export type MatchProps<T, F extends ConditionalRenderCallback<T> = ConditionalRe
73
88
  children: ConditionalRenderChildren<T, F>;
74
89
  };
75
90
  /**
76
- * Selects a content based on condition when inside a `<Switch>` control flow
77
- * ```typescript
78
- * <Match when={condition()}>
79
- * <Content/>
80
- * </Match>
91
+ * A branch inside a `<Switch>`. The first `<Match>` whose `when` is truthy
92
+ * wins; remaining matches are skipped.
93
+ *
94
+ * Like `<Show>`, `<Match>` supports a function child that receives an
95
+ * accessor for the narrowed value.
96
+ *
97
+ * @example
98
+ * ```tsx
99
+ * <Switch fallback={<NotFound />}>
100
+ * <Match when={user()}>
101
+ * {u => <Profile name={u().name} />}
102
+ * </Match>
103
+ * <Match when={loading()}>
104
+ * <Spinner />
105
+ * </Match>
106
+ * </Switch>
81
107
  * ```
108
+ *
82
109
  * @description https://docs.solidjs.com/reference/components/switch-and-match
83
110
  */
84
111
  export declare function Match<T, F extends ConditionalRenderCallback<T>>(props: MatchProps<T, F>): JSX.Element;
@@ -102,14 +129,40 @@ export declare function Errored(props: {
102
129
  children: JSX.Element;
103
130
  }): JSX.Element;
104
131
  /**
105
- * Tracks all resources inside a component and renders a fallback until they are all resolved
106
- * ```typescript
107
- * const AsyncComponent = lazy(() => import('./component'));
132
+ * Renders a `fallback` while pending async reads inside the subtree settle.
133
+ *
134
+ * Any computation (`createMemo`, `createSignal(fn)`, `createStore(fn)`,
135
+ * `lazy(...)`, etc.) that throws because data isn't ready is caught by the
136
+ * nearest enclosing `<Loading>`. The boundary swaps to its `fallback` until
137
+ * every pending read has resolved, then renders the children.
138
+ *
139
+ * The optional `on` prop scopes the boundary so it ignores transitions
140
+ * caused by writes to other reactive sources — those transitions stay on the
141
+ * previous content (with `isPending()` flipping during the transition).
108
142
  *
109
- * <Loading fallback={<LoadingIndicator />}>
110
- * <AsyncComponent />
143
+ * Scope `<Loading>` around the data-dependent slot, not the surrounding
144
+ * shell. Wrapping layout chrome (header, nav, footer) in the same boundary
145
+ * as the data means revalidation replaces the entire screen with the
146
+ * fallback; rendering chrome outside the boundary keeps it stable while
147
+ * only the affordance flips.
148
+ *
149
+ * @example
150
+ * ```tsx
151
+ * const Profile = lazy(() => import("./Profile"));
152
+ *
153
+ * <Loading fallback={<Spinner />}>
154
+ * <Profile />
111
155
  * </Loading>
112
156
  * ```
157
+ *
158
+ * @example
159
+ * ```tsx
160
+ * // Only show the fallback for transitions caused by writes to `route`.
161
+ * <Loading fallback={<Skeleton />} on={route}>
162
+ * <Page />
163
+ * </Loading>
164
+ * ```
165
+ *
113
166
  * @description https://docs.solidjs.com/reference/components/suspense
114
167
  */
115
168
  export declare function Loading(props: {
@@ -117,26 +170,46 @@ export declare function Loading(props: {
117
170
  on?: any;
118
171
  children: JSX.Element;
119
172
  }): JSX.Element;
173
+ export type RevealProps = {
174
+ order?: RevealOrder;
175
+ collapsed?: boolean;
176
+ children: JSX.Element;
177
+ };
120
178
  /**
121
179
  * Coordinates the reveal timing of sibling `<Loading>` boundaries.
122
180
  *
123
- * - **Sequential** (default): boundaries reveal in DOM order as each resolves.
124
- * - **Together** (`together`): all boundaries wait until the group is ready, then reveal at once.
125
- * - **Collapsed** (`collapsed`, sequential only): only the frontier boundary shows its fallback;
126
- * later boundaries produce nothing until their turn.
181
+ * The `order` prop picks the reveal policy:
182
+ * - `"sequential"` (default) boundaries reveal in registration order; later boundaries
183
+ * stay on their fallback until earlier ones resolve.
184
+ * - `"together"` every direct slot stays on its fallback until the whole group is
185
+ * "minimally ready" (every direct slot has its own first visible content available),
186
+ * then the group releases in one cohesive reveal.
187
+ * - `"natural"` — each boundary reveals as its own data resolves. At the top level
188
+ * this is equivalent to omitting `<Reveal>`; the mode exists for nesting, where
189
+ * the group registers as a single composite slot in an enclosing `<Reveal>`.
190
+ *
191
+ * The `collapsed` prop is only consulted when `order="sequential"` (the default);
192
+ * it is ignored under `"together"` and `"natural"`. When set, tail boundaries past
193
+ * the frontier suppress their own fallback output.
194
+ *
195
+ * Nested `<Reveal>` groups compose: the inner group is one slot in the outer order
196
+ * and is held on its fallbacks until the outer releases the slot. Once released, the
197
+ * inner group runs its own `order` locally over whatever is still pending. There is
198
+ * no escape hatch — nesting under an outer group means participating in its ordering.
199
+ * See `documentation/solid-2.0/03-control-flow.md` for the full nesting matrix and the
200
+ * "minimally ready" definition per order.
127
201
  *
128
202
  * ```typescript
129
- * <Reveal>
203
+ * <Reveal order="sequential">
130
204
  * <Loading fallback={<Skeleton />}><ProfileHeader /></Loading>
131
- * <Loading fallback={<Skeleton />}><Posts /></Loading>
205
+ * <Reveal order="natural">
206
+ * <Loading fallback={<Skeleton />}><PostA /></Loading>
207
+ * <Loading fallback={<Skeleton />}><PostB /></Loading>
208
+ * </Reveal>
209
+ * <Loading fallback={<Skeleton />}><Comments /></Loading>
132
210
  * </Reveal>
133
211
  * ```
134
212
  *
135
213
  * @description https://docs.solidjs.com/reference/components/reveal
136
214
  */
137
- export declare function Reveal(props: {
138
- together?: boolean;
139
- collapsed?: boolean;
140
- children: JSX.Element;
141
- }): JSX.Element;
142
- export {};
215
+ export declare function Reveal(props: RevealProps): JSX.Element;
@@ -1,8 +1,31 @@
1
- import { createErrorBoundary as coreErrorBoundary, createMemo as coreMemo, createSignal as coreSignal, createOptimistic as coreOptimistic, createRenderEffect as coreRenderEffect, createEffect as coreEffect, $REFRESH, type ProjectionOptions, type Store, type StoreSetter, type Context } from "@solidjs/signals";
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
2
  import { JSX } from "../jsx.js";
3
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
+ */
4
10
  deferStream?: boolean;
5
- ssrSource?: "server" | "hybrid" | "initial" | "client";
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";
6
29
  };
7
30
  declare module "@solidjs/signals" {
8
31
  interface MemoOptions<T> extends HydrationSsrFields {
@@ -12,8 +35,37 @@ declare module "@solidjs/signals" {
12
35
  interface EffectOptions extends HydrationSsrFields {
13
36
  }
14
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
+ */
15
55
  export type HydrationProjectionOptions = ProjectionOptions & {
16
- ssrSource?: "server" | "hybrid" | "initial" | "client";
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";
17
69
  };
18
70
  export type HydrationContext = {};
19
71
  export declare const NoHydrateContext: Context<boolean>;
@@ -42,38 +94,373 @@ export declare const sharedConfig: SharedConfig;
42
94
  */
43
95
  export declare function onHydrationEnd(callback: () => void): void;
44
96
  export declare function enableHydration(): void;
45
- export declare const createMemo: typeof coreMemo;
46
- export declare const createSignal: typeof coreSignal;
97
+ /**
98
+ * Creates a readonly derived reactive memoized signal.
99
+ *
100
+ * `compute(prev)` runs reactively — every reactive read inside it is
101
+ * tracked, and the returned value becomes the memo's current value.
102
+ * The memo is cached: it only recomputes when one of its tracked
103
+ * sources changes.
104
+ *
105
+ * ```ts
106
+ * const value = createMemo<T>(compute, options?: MemoOptions<T>);
107
+ * ```
108
+ *
109
+ * @example
110
+ * ```ts
111
+ * const [first, setFirst] = createSignal("Ada");
112
+ * const [last, setLast] = createSignal("Lovelace");
113
+ *
114
+ * const fullName = createMemo(() => `${first()} ${last()}`);
115
+ *
116
+ * fullName(); // "Ada Lovelace"
117
+ * ```
118
+ *
119
+ * @example
120
+ * ```ts
121
+ * // Async memo — reads suspend inside <Loading>
122
+ * const user = createMemo(async () => {
123
+ * const res = await fetch(`/users/${id()}`);
124
+ * return res.json();
125
+ * });
126
+ * ```
127
+ *
128
+ * **Hydration:** `MemoOptions` accepts an `ssrSource` field
129
+ * (`"server"` | `"hybrid"` | `"client"`) that controls what initial
130
+ * value the client uses and whether `compute` re-runs. See
131
+ * {@link HydrationSsrFields}.
132
+ *
133
+ * @param compute receives the previous value, returns the new value
134
+ * @param options `MemoOptions` — `id`, `name`, `equals`, `unobserved`,
135
+ * `lazy`, `transparent`, `ssrSource`
136
+ *
137
+ * @description https://docs.solidjs.com/reference/basic-reactivity/create-memo
138
+ */
139
+ export declare const createMemo: {
140
+ <T>(compute: ComputeFunction<undefined | NoInfer<T>, T>, options: HydrationClientMemoOptions<T>): Accessor<T | undefined>;
141
+ <T>(compute: ComputeFunction<undefined | NoInfer<T>, T>, options?: HydrationMemoOptions<T>): Accessor<T>;
142
+ };
143
+ /**
144
+ * Creates a simple reactive state with a getter and setter.
145
+ *
146
+ * - **Plain form** — `createSignal(value, options?: SignalOptions<T>)`:
147
+ * stores a value; the setter writes a new value or applies an
148
+ * updater `(prev) => next`.
149
+ * - **Function form (writable memo)** —
150
+ * `createSignal(fn, options?: SignalOptions<T> & MemoOptions<T>)`:
151
+ * the value is computed by `fn` like a memo, but the setter can
152
+ * locally override it (useful for optimistic edits over a derived
153
+ * default).
154
+ *
155
+ * ```ts
156
+ * // Plain
157
+ * const [count, setCount] = createSignal(0);
158
+ *
159
+ * count(); // 0
160
+ * setCount(1); // explicit value
161
+ * setCount(c => c + 1); // updater
162
+ *
163
+ * // Writable memo: starts as `fn()`, can be locally overwritten.
164
+ * const [user, setUser] = createSignal(() => fetchUser(userId()));
165
+ * setUser({ ...user(), name: "Alice" }); // optimistic local edit
166
+ * ```
167
+ *
168
+ * **Hydration:** in the function form, `SignalOptions & MemoOptions`
169
+ * accepts an `ssrSource` field (`"server"` | `"hybrid"` | `"client"`)
170
+ * that controls what initial value the client uses and whether `fn`
171
+ * re-runs. See {@link HydrationSsrFields}.
172
+ *
173
+ * @returns `[state: Accessor<T>, setState: Setter<T>]`
174
+ *
175
+ * @description https://docs.solidjs.com/reference/basic-reactivity/create-signal
176
+ */
177
+ export declare const createSignal: {
178
+ <T>(): Signal<T | undefined>;
179
+ <T>(value: Exclude<T, Function>, options?: SignalOptions<T>): Signal<T>;
180
+ <T>(fn: ComputeFunction<undefined | NoInfer<T>, T>, options: HydrationClientSignalOptions<T>): Signal<T | undefined>;
181
+ <T>(fn: ComputeFunction<undefined | NoInfer<T>, T>, options?: HydrationSignalOptions<T>): Signal<T>;
182
+ };
183
+ /**
184
+ * Lower-level primitive that backs the `<Errored>` flow control.
185
+ * Catches errors thrown inside `fn` and renders `fallback(error,
186
+ * reset)` instead. `reset()` recomputes the failing sources so the
187
+ * boundary can attempt to recover.
188
+ *
189
+ * App code should use `<Errored fallback={...}>` directly — reach for
190
+ * this only when authoring a custom boundary component.
191
+ *
192
+ * **Hydration:** if the server serialized an error for this boundary,
193
+ * the client re-throws it on the first hydration pass so `fallback`
194
+ * renders the same content the server emitted.
195
+ */
47
196
  export declare const createErrorBoundary: typeof coreErrorBoundary;
48
- export declare const createOptimistic: typeof coreOptimistic;
49
- export declare const createProjection: <T extends object = {}>(fn: (draft: T) => void | T | Promise<void | T> | AsyncIterable<void | T>, initialValue: T, options?: HydrationProjectionOptions) => Store<T> & {
50
- [$REFRESH]: any;
197
+ /**
198
+ * Creates an optimistic signal a `Signal<T>` whose writes are
199
+ * tentative inside an `action` transition: they show up immediately,
200
+ * then auto-revert (or reconcile to the action's resolved value) once
201
+ * the transition settles.
202
+ *
203
+ * Use this for single-value optimistic state. For collection-shaped
204
+ * state, prefer `createOptimisticStore`.
205
+ *
206
+ * - **Plain form** — `createOptimistic(value, options?: SignalOptions<T>)`.
207
+ * - **Function form** — `createOptimistic(fn, options?: SignalOptions<T> & MemoOptions<T>)`:
208
+ * the authoritative value is recomputed by `fn`; the optimistic
209
+ * overlay reverts after each transition.
210
+ *
211
+ * @example
212
+ * ```ts
213
+ * const [name, setName] = createOptimistic("Ada");
214
+ *
215
+ * const rename = action(function* (next: string) {
216
+ * setName(next); // optimistic
217
+ * yield api.rename(next); // commits or reverts on settle
218
+ * });
219
+ * ```
220
+ *
221
+ * **Hydration:** in the function form, accepts an `ssrSource` field
222
+ * (`"server"` | `"hybrid"` | `"client"`). See {@link HydrationSsrFields}.
223
+ *
224
+ * @returns `[state: Accessor<T>, setState: Setter<T>]`
225
+ *
226
+ * @description https://docs.solidjs.com/reference/basic-reactivity/create-optimistic-signal
227
+ */
228
+ export declare const createOptimistic: {
229
+ <T>(): Signal<T | undefined>;
230
+ <T>(value: Exclude<T, Function>, options?: SignalOptions<T>): Signal<T>;
231
+ <T>(fn: ComputeFunction<undefined | NoInfer<T>, T>, options: HydrationClientSignalOptions<T>): Signal<T | undefined>;
232
+ <T>(fn: ComputeFunction<undefined | NoInfer<T>, T>, options?: HydrationSignalOptions<T>): Signal<T>;
51
233
  };
234
+ /**
235
+ * Creates a derived (projected) store — `createMemo` for stores. The
236
+ * derive function receives a mutable draft and either mutates it in
237
+ * place (canonical) or returns a new value. Either way the result is
238
+ * reconciled against the previous draft by `options.key` (default
239
+ * `"id"`), so surviving items keep their proxy identity — only
240
+ * added/removed items are created/disposed.
241
+ *
242
+ * Returns the projected store directly (no setter — reads only).
243
+ *
244
+ * Reach for this when you want the structural-sharing / per-property
245
+ * tracking of a store on top of a derived computation. For simple
246
+ * read-only derivations, `createMemo` is lighter.
247
+ *
248
+ * @example
249
+ * ```ts
250
+ * // Mutation form — update individual fields on the draft.
251
+ * const summary = createProjection<{ total: number; active: number }>(
252
+ * draft => {
253
+ * draft.total = users().length;
254
+ * draft.active = users().filter(u => u.active).length;
255
+ * },
256
+ * { total: 0, active: 0 }
257
+ * );
258
+ *
259
+ * // Return form — produce a derived collection. Reconciled by `id`
260
+ * // so each surviving user keeps the same store identity.
261
+ * const activeUsers = createProjection<User[]>(
262
+ * () => allUsers().filter(u => u.active),
263
+ * []
264
+ * );
265
+ * ```
266
+ *
267
+ * **Hydration:** {@link HydrationProjectionOptions} adds `ssrSource`
268
+ * (`"server"` | `"hybrid"` | `"client"`) for the same client-vs-server
269
+ * tradeoffs as the other primitives. See {@link HydrationSsrFields}.
270
+ */
271
+ 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>>;
52
272
  type NoFn<T> = T extends Function ? never : T;
273
+ /**
274
+ * Creates a deeply-reactive store backed by a Proxy. Reads track each
275
+ * property accessed; only the parts that change trigger updates.
276
+ *
277
+ * Store properties hold **plain values**, not accessors. The proxy
278
+ * already tracks reads per-property — wrapping a value in
279
+ * `() => state.foo` produces a getter that *won't* track when called,
280
+ * which looks like a reactivity bug but is just a category error. If
281
+ * you have a signal-shaped piece of state, make it a property of the
282
+ * store (`{ foo: 1 }`) rather than nesting an accessor inside
283
+ * (`{ foo: () => signal() }`).
284
+ *
285
+ * The setter takes a **draft-mutating** function — mutate the draft
286
+ * in place (canonical). The callback may also return a new value:
287
+ * arrays are replaced by index (length adjusted), objects are
288
+ * shallow-diffed at the top level (keys present in the returned value
289
+ * are written, missing keys deleted). Use the return form for shapes
290
+ * where mutation is awkward — most commonly removing items via
291
+ * `filter`. The setter does **not** do keyed reconciliation; for
292
+ * that, use the derived/projection form (or `createProjection`).
293
+ *
294
+ * - **Plain form** — `createStore(initialValue)`: wraps a value in a
295
+ * reactive proxy.
296
+ * - **Derived form** — `createStore(fn, seed, options?)`: a
297
+ * *projection store* whose contents are computed by `fn(draft)`.
298
+ * `fn` may be sync, async, or an `AsyncIterable`; the projection's
299
+ * result reconciles against the existing store by `options.key`
300
+ * (default `"id"`) for stable identity.
301
+ *
302
+ * @example
303
+ * ```ts
304
+ * const [state, setState] = createStore({
305
+ * user: { name: "Ada", age: 36 },
306
+ * todos: [] as { id: string; text: string; done: boolean }[]
307
+ * });
308
+ *
309
+ * // Canonical: mutate the draft in place.
310
+ * setState(s => { s.user.age = 37; });
311
+ * setState(s => { s.todos.push({ id: "1", text: "x", done: false }); });
312
+ *
313
+ * // Return form: reach for it when mutation is awkward.
314
+ * setState(s => s.todos.filter(t => !t.done)); // remove items
315
+ * setState(s => ({ ...s, user: { name: "Grace", age: 85 } })); // shallow replace
316
+ * ```
317
+ *
318
+ * @example
319
+ * ```ts
320
+ * // Derived store — auto-fetches & reconciles by `id`.
321
+ * const [users] = createStore(
322
+ * async () => fetch("/users").then(r => r.json()),
323
+ * [] as User[]
324
+ * );
325
+ * ```
326
+ *
327
+ * **Hydration:** the derived form accepts
328
+ * {@link HydrationProjectionOptions}, which adds an `ssrSource` field
329
+ * (`"server"` | `"hybrid"` | `"client"`). See {@link HydrationSsrFields}.
330
+ *
331
+ * @returns `[store: Store<T>, setStore: StoreSetter<T>]`
332
+ */
53
333
  export declare const createStore: {
54
334
  <T extends object = {}>(store: NoFn<T> | Store<NoFn<T>>): [get: Store<T>, set: StoreSetter<T>];
55
- <T extends object = {}>(fn: (store: T) => void | T | Promise<void | T> | AsyncIterable<void | T>, store: NoFn<T> | Store<NoFn<T>>, options?: HydrationProjectionOptions): [get: Store<T> & {
56
- [$REFRESH]: any;
57
- }, set: StoreSetter<T>];
335
+ <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>];
58
336
  };
337
+ /**
338
+ * The store equivalent of `createOptimistic`. Writes inside an
339
+ * `action` transition are tentative — they show up immediately but
340
+ * auto-revert (or reconcile to the action's resolved value) once the
341
+ * transition finishes.
342
+ *
343
+ * Use this for optimistic UI on collection-shaped data. For
344
+ * single-value optimistic state, prefer `createOptimistic`.
345
+ *
346
+ * - **Plain form** — `createOptimisticStore(initialValue)`.
347
+ * - **Derived form** — `createOptimisticStore(fn, seed, options?)`:
348
+ * a projection store whose authoritative value is recomputed by
349
+ * `fn` and whose optimistic overlay reverts after each transition.
350
+ *
351
+ * `options.key` defaults to `"id"`; specify it only when your data
352
+ * uses a different identity field (e.g. `{ key: "uuid" }` or
353
+ * `{ key: t => t.slug }`). Restating the default just adds noise.
354
+ *
355
+ * @example
356
+ * ```ts
357
+ * const [todos, setTodos] = createOptimisticStore<Todo[]>([]);
358
+ *
359
+ * // Mutation: optimistic add, then in-place reconcile to the saved row.
360
+ * const addTodo = action(function* (text: string) {
361
+ * const tempId = crypto.randomUUID();
362
+ * setTodos(t => { t.push({ id: tempId, text, pending: true }); });
363
+ * const saved = yield api.createTodo(text);
364
+ * setTodos(t => {
365
+ * const i = t.findIndex(x => x.id === tempId);
366
+ * if (i >= 0) t[i] = saved;
367
+ * });
368
+ * });
369
+ *
370
+ * // Return form: filter is the natural shape for removal.
371
+ * const removeTodo = action(function* (id: string) {
372
+ * setTodos(t => t.filter(x => x.id !== id));
373
+ * yield api.removeTodo(id);
374
+ * });
375
+ * ```
376
+ *
377
+ * **Hydration:** the derived form accepts
378
+ * {@link HydrationProjectionOptions}, which adds an `ssrSource` field
379
+ * (`"server"` | `"hybrid"` | `"client"`). See {@link HydrationSsrFields}.
380
+ *
381
+ * @returns `[store: Store<T>, setStore: StoreSetter<T>]`
382
+ */
59
383
  export declare const createOptimisticStore: {
60
384
  <T extends object = {}>(store: NoFn<T> | Store<NoFn<T>>): [get: Store<T>, set: StoreSetter<T>];
61
- <T extends object = {}>(fn: (store: T) => void | T | Promise<void | T> | AsyncIterable<void | T>, store: NoFn<T> | Store<NoFn<T>>, options?: HydrationProjectionOptions): [get: Store<T> & {
62
- [$REFRESH]: any;
63
- }, set: StoreSetter<T>];
385
+ <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>];
64
386
  };
387
+ /**
388
+ * Creates a reactive computation that runs during the render phase as
389
+ * DOM elements are created and updated but not necessarily connected.
390
+ *
391
+ * Same compute/effect split as `createEffect` (`compute(prev)` tracks,
392
+ * `effect(next, prev?)` runs imperatively), but scheduled inside the
393
+ * render queue rather than after it. Reach for this only when
394
+ * authoring renderer plumbing — app code should use `createEffect`.
395
+ *
396
+ * ```ts
397
+ * createRenderEffect<T>(compute, effectFn, options?: EffectOptions);
398
+ * ```
399
+ *
400
+ * **Hydration:** `EffectOptions` accepts an `ssrSource` field
401
+ * (`"server"` | `"hybrid"` | `"client"`). See {@link HydrationSsrFields}.
402
+ *
403
+ * @description https://docs.solidjs.com/reference/secondary-primitives/create-render-effect
404
+ */
65
405
  export declare const createRenderEffect: typeof coreRenderEffect;
66
- export declare const createEffect: typeof coreEffect;
67
406
  /**
68
- * Tracks all resources inside a component and renders a fallback until they are all resolved
69
- * ```typescript
70
- * const AsyncComponent = lazy(() => import('./component'));
407
+ * Creates a reactive effect with **separate compute and effect phases**.
408
+ *
409
+ * - `compute(prev)` runs reactively — *put all reactive reads here*.
410
+ * The returned value is passed to `effect` and is also the new
411
+ * "previous" value for the next run.
412
+ * - `effect(next, prev?)` runs imperatively (untracked) after the
413
+ * queue flushes. *Put DOM writes / fetch / logging / subscriptions
414
+ * here.* It may return a cleanup function which runs before the
415
+ * next effect or on disposal.
416
+ *
417
+ * Reactive reads inside `effect` will *not* re-trigger this effect —
418
+ * that's intentional. If you need a single-phase tracked effect, use
419
+ * `createTrackedEffect` (with the tradeoffs noted there).
71
420
  *
72
- * <Loading fallback={<LoadingIndicator />}>
73
- * <AsyncComponent />
74
- * </Loading>
421
+ * Pass an `EffectBundle` (`{ effect, error }`) instead of a plain
422
+ * function to intercept errors thrown from the compute or effect
423
+ * phases.
424
+ *
425
+ * ```ts
426
+ * createEffect<T>(compute, effectFn | { effect, error }, options?: EffectOptions);
427
+ * ```
428
+ *
429
+ * @example
430
+ * ```ts
431
+ * const [count, setCount] = createSignal(0);
432
+ *
433
+ * createEffect(
434
+ * () => count(), // compute: tracks `count`
435
+ * value => console.log(value) // effect: side effect
436
+ * );
437
+ *
438
+ * setCount(1); // logs 1 after the next flush
439
+ * ```
440
+ *
441
+ * @example
442
+ * ```ts
443
+ * createEffect(
444
+ * () => userId(),
445
+ * id => {
446
+ * const ctrl = new AbortController();
447
+ * fetch(`/users/${id}`, { signal: ctrl.signal });
448
+ * return () => ctrl.abort(); // cleanup before next run / disposal
449
+ * }
450
+ * );
75
451
  * ```
76
- * @description https://docs.solidjs.com/reference/components/suspense
452
+ *
453
+ * **Hydration:** `EffectOptions` accepts an `ssrSource` field
454
+ * (`"server"` | `"hybrid"` | `"client"`). See {@link HydrationSsrFields}.
455
+ *
456
+ * @description https://docs.solidjs.com/reference/basic-reactivity/create-effect
457
+ */
458
+ export declare const createEffect: typeof coreEffect;
459
+ /**
460
+ * Lower-level primitive that backs the `<Loading>` component. Returns a
461
+ * computation that yields `fallback()` while async reads inside `fn` are
462
+ * pending, and `fn()` once they have settled. Most callers should use
463
+ * `<Loading>` directly; this is exposed for renderers and library authors.
77
464
  */
78
465
  export declare function createLoadingBoundary(fn: () => any, fallback: () => any, options?: {
79
466
  on?: () => any;
package/types/index.d.ts CHANGED
@@ -1,5 +1,5 @@
1
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, Signal, SignalOptions, Setter, Store, SolidStore, StoreNode, StoreSetter, StorePathRange, ArrayFilterFn, CustomPartial, Part, PathSetter } 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
3
  export { $DEVCOMP, children, createContext, useContext } from "./client/core.js";
4
4
  export type { ChildrenReturn, Context, ContextProviderComponent, ResolvedChildren, ResolvedJSXElement } from "./client/core.js";
5
5
  export * from "./client/component.js";
@@ -41,11 +41,8 @@ export type PropValue =
41
41
  * narrowing
42
42
  * - other types pass through unchanged
43
43
  */
44
- export type WidenPropValue<V> = [V] extends [string]
45
- ? string extends V
46
- ? string | number
47
- : V
48
- : V;
44
+ type WidenString<V> = string extends V ? string | number : V;
45
+ export type WidenPropValue<V> = [V] extends [string] ? WidenString<V> : V;
49
46
 
50
47
  /**
51
48
  * Structurally identical → `Y`; distinct → `N`. Used by `IsReadonlyKey` to detect