@solidjs/signals 2.0.0-beta.8 → 2.0.0-rc.0
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/README.md +13 -9
- package/dist/dev.js +6078 -1440
- package/dist/node.cjs +7684 -3248
- package/dist/prod/affects.js +126 -0
- package/dist/prod/boundaries.js +572 -0
- package/dist/prod/core/action.js +139 -0
- package/dist/prod/core/async.js +553 -0
- package/dist/prod/core/constants.js +92 -0
- package/dist/prod/core/context.js +67 -0
- package/dist/prod/core/core.js +817 -0
- package/dist/prod/core/dev.js +3 -0
- package/dist/prod/core/effect.js +145 -0
- package/dist/prod/core/error.js +68 -0
- package/dist/prod/core/external.js +98 -0
- package/dist/prod/core/graph.js +104 -0
- package/dist/prod/core/heap.js +140 -0
- package/dist/prod/core/invariants.js +42 -0
- package/dist/prod/core/lanes.js +140 -0
- package/dist/prod/core/optimistic.js +245 -0
- package/dist/prod/core/owner.js +302 -0
- package/dist/prod/core/scheduler.js +749 -0
- package/dist/prod/core/verdict.js +369 -0
- package/dist/prod/index.js +45 -0
- package/dist/prod/map.js +317 -0
- package/dist/prod/signals.js +375 -0
- package/dist/prod/store/optimistic.js +217 -0
- package/dist/prod/store/projection.js +231 -0
- package/dist/prod/store/reconcile.js +707 -0
- package/dist/prod/store/store.js +1081 -0
- package/dist/prod/store/storePath.js +103 -0
- package/dist/prod/store/utils.js +328 -0
- package/dist/types/affects.d.ts +47 -0
- package/dist/types/boundaries.d.ts +93 -11
- package/dist/types/core/action.d.ts +63 -0
- package/dist/types/core/async.d.ts +16 -1
- package/dist/types/core/constants.d.ts +46 -0
- package/dist/types/core/context.d.ts +10 -2
- package/dist/types/core/core.d.ts +111 -17
- package/dist/types/core/dev.d.ts +17 -2
- package/dist/types/core/effect.d.ts +1 -2
- package/dist/types/core/error.d.ts +33 -0
- package/dist/types/core/external.d.ts +0 -11
- package/dist/types/core/graph.d.ts +2 -1
- package/dist/types/core/heap.d.ts +8 -0
- package/dist/types/core/index.d.ts +3 -2
- package/dist/types/core/invariants.d.ts +59 -0
- package/dist/types/core/lanes.d.ts +2 -0
- package/dist/types/core/optimistic.d.ts +6 -0
- package/dist/types/core/owner.d.ts +101 -3
- package/dist/types/core/scheduler.d.ts +97 -9
- package/dist/types/core/types.d.ts +68 -6
- package/dist/types/core/verdict.d.ts +2 -0
- package/dist/types/index.d.ts +4 -3
- package/dist/types/map.d.ts +50 -5
- package/dist/types/signals.d.ts +424 -19
- package/dist/types/store/index.d.ts +1 -1
- package/dist/types/store/optimistic.d.ts +39 -13
- package/dist/types/store/projection.d.ts +48 -18
- package/dist/types/store/reconcile.d.ts +46 -1
- package/dist/types/store/store.d.ts +164 -19
- package/dist/types/store/storePath.d.ts +28 -0
- package/dist/types/store/utils.d.ts +78 -7
- package/dist/types-cjs/affects.d.cts +47 -0
- package/dist/types-cjs/boundaries.d.cts +93 -11
- package/dist/types-cjs/core/action.d.cts +63 -0
- package/dist/types-cjs/core/async.d.cts +16 -1
- package/dist/types-cjs/core/constants.d.cts +46 -0
- package/dist/types-cjs/core/context.d.cts +10 -2
- package/dist/types-cjs/core/core.d.cts +111 -17
- package/dist/types-cjs/core/dev.d.cts +17 -2
- package/dist/types-cjs/core/effect.d.cts +1 -2
- package/dist/types-cjs/core/error.d.cts +33 -0
- package/dist/types-cjs/core/external.d.cts +0 -11
- package/dist/types-cjs/core/graph.d.cts +2 -1
- package/dist/types-cjs/core/heap.d.cts +8 -0
- package/dist/types-cjs/core/index.d.cts +3 -2
- package/dist/types-cjs/core/invariants.d.cts +59 -0
- package/dist/types-cjs/core/lanes.d.cts +2 -0
- package/dist/types-cjs/core/optimistic.d.cts +6 -0
- package/dist/types-cjs/core/owner.d.cts +101 -3
- package/dist/types-cjs/core/scheduler.d.cts +97 -9
- package/dist/types-cjs/core/types.d.cts +68 -6
- package/dist/types-cjs/core/verdict.d.cts +2 -0
- package/dist/types-cjs/index.d.cts +4 -3
- package/dist/types-cjs/map.d.cts +50 -5
- package/dist/types-cjs/signals.d.cts +424 -19
- package/dist/types-cjs/store/index.d.cts +1 -1
- package/dist/types-cjs/store/optimistic.d.cts +39 -13
- package/dist/types-cjs/store/projection.d.cts +48 -18
- package/dist/types-cjs/store/reconcile.d.cts +46 -1
- package/dist/types-cjs/store/store.d.cts +164 -19
- package/dist/types-cjs/store/storePath.d.cts +28 -0
- package/dist/types-cjs/store/utils.d.cts +78 -7
- package/package.json +14 -11
- package/dist/prod.js +0 -3577
package/dist/types/signals.d.ts
CHANGED
|
@@ -1,18 +1,85 @@
|
|
|
1
|
-
import type { Disposable } from "./core/index.js";
|
|
1
|
+
import type { Disposable, Refreshable } from "./core/index.js";
|
|
2
|
+
/**
|
|
3
|
+
* Low-level reactive-cleanup primitive. Registers a callback that runs when
|
|
4
|
+
* the surrounding owner is disposed.
|
|
5
|
+
*
|
|
6
|
+
* **In 2.0 user code this is rare.** The two cases where you might reach for
|
|
7
|
+
* it have better-shaped tools:
|
|
8
|
+
*
|
|
9
|
+
* - **Component lifecycle (mount/unmount, listeners, intervals):** use
|
|
10
|
+
* {@link onSettled} and **return** a cleanup function. Setup and teardown
|
|
11
|
+
* stay paired in one block. This replaces the 1.x `onMount` + `onCleanup`
|
|
12
|
+
* pairing.
|
|
13
|
+
* - **Cleanup tied to an effect run:** `onCleanup` does not belong in
|
|
14
|
+
* `createEffect`'s apply phase. If a compute phase genuinely needs per-run
|
|
15
|
+
* teardown, that's usually a sign the work should be a memo/projection
|
|
16
|
+
* instead, or moved to `onSettled` if it's lifecycle-shaped.
|
|
17
|
+
*
|
|
18
|
+
* Where `onCleanup` is the right tool is **library / custom-primitive
|
|
19
|
+
* internals** — coordinating disposal inside a `createRoot` body, or wiring
|
|
20
|
+
* cleanup to a captured owner via `runWithOwner` from a custom factory.
|
|
21
|
+
* Application code rarely needs to write any of those shapes directly.
|
|
22
|
+
*
|
|
23
|
+
* Must be called inside an owner. Calling outside an owner is a no-op (with a
|
|
24
|
+
* dev-mode warning).
|
|
25
|
+
*
|
|
26
|
+
* Cannot be used inside `createTrackedEffect` or `onSettled` — return a
|
|
27
|
+
* cleanup function from the callback body instead.
|
|
28
|
+
*
|
|
29
|
+
* @example
|
|
30
|
+
* ```ts
|
|
31
|
+
* // Library shape: thread a resource's disposal into a *captured* owner
|
|
32
|
+
* // from a factory that has no settle-phase setup of its own. `onSettled`
|
|
33
|
+
* // would queue a callback we don't need; `onCleanup` is the leaner
|
|
34
|
+
* // primitive when the only job is "register disposal on this owner".
|
|
35
|
+
* function bindToOwner<T extends { dispose(): void }>(owner: Owner, resource: T): T {
|
|
36
|
+
* runWithOwner(owner, () => onCleanup(() => resource.dispose()));
|
|
37
|
+
* return resource;
|
|
38
|
+
* }
|
|
39
|
+
* ```
|
|
40
|
+
*/
|
|
2
41
|
export declare function onCleanup(fn: Disposable): Disposable;
|
|
42
|
+
/**
|
|
43
|
+
* A zero-arg getter for a reactive value. Calling it inside a tracking scope
|
|
44
|
+
* (memo, effect compute, JSX expression) subscribes the scope to changes.
|
|
45
|
+
*
|
|
46
|
+
* Reading outside any tracking scope simply returns the current value without
|
|
47
|
+
* creating a subscription.
|
|
48
|
+
*/
|
|
3
49
|
export type Accessor<T> = () => T;
|
|
4
|
-
export
|
|
50
|
+
export type SourceAccessor<T> = Refreshable<Accessor<T>>;
|
|
51
|
+
export declare function accessor<T>(node: any): SourceAccessor<T>;
|
|
52
|
+
/**
|
|
53
|
+
* A signal setter. Accepts either a new value or an updater `(prev) => next`.
|
|
54
|
+
*
|
|
55
|
+
* If the type permits `undefined`, `setState()` (no args) clears to `undefined`.
|
|
56
|
+
*
|
|
57
|
+
* To store a function as the value itself (rather than as an updater), wrap it
|
|
58
|
+
* with an updater: `setHandler(() => myHandler)`.
|
|
59
|
+
*/
|
|
5
60
|
export type Setter<in out T> = {
|
|
6
61
|
<U extends T>(...args: undefined extends T ? [] : [value: Exclude<U, Function> | ((prev: T) => U)]): undefined extends T ? undefined : U;
|
|
7
62
|
<U extends T>(value: (prev: T) => U): U;
|
|
8
63
|
<U extends T>(value: Exclude<U, Function>): U;
|
|
9
64
|
<U extends T>(value: Exclude<U, Function> | ((prev: T) => U)): U;
|
|
10
65
|
};
|
|
11
|
-
|
|
66
|
+
/** A `[get, set]` pair returned from `createSignal` / `createOptimistic`. */
|
|
67
|
+
export type Signal<T> = [get: SourceAccessor<T>, set: Setter<T>];
|
|
12
68
|
export type ComputeFunction<Prev, Next extends Prev = Prev> = (v: Prev) => PromiseLike<Next> | AsyncIterable<Next> | Next;
|
|
13
69
|
export type EffectFunction<Prev, Next extends Prev = Prev> = (v: Next, p?: Prev) => (() => void) | void;
|
|
14
70
|
export type EffectBundle<Prev, Next extends Prev = Prev> = {
|
|
15
71
|
effect: EffectFunction<Prev, Next>;
|
|
72
|
+
/**
|
|
73
|
+
* Intercepts compute-phase errors (thrown by the compute function or arriving
|
|
74
|
+
* from upstream sources). Effect-phase throws are NOT routed here — they are
|
|
75
|
+
* your own imperative code and escalate to the nearest error boundary.
|
|
76
|
+
*
|
|
77
|
+
* This is the error arm of the effect phase: it runs on the same queue and
|
|
78
|
+
* in the same imperative, writable scope as `effect` (signal writes are
|
|
79
|
+
* legal), receives the error the user code threw, and observes settled
|
|
80
|
+
* outcomes — an error that recovers before the effect phase runs the
|
|
81
|
+
* `effect` arm instead, and a held transition defers it like `effect`.
|
|
82
|
+
*/
|
|
16
83
|
error: (err: unknown, cleanup: () => void) => void;
|
|
17
84
|
};
|
|
18
85
|
/** Options shared by every effect primitive. */
|
|
@@ -34,12 +101,49 @@ export interface EffectOptions extends BaseEffectOptions {
|
|
|
34
101
|
* `insert()` in `render()`).
|
|
35
102
|
*/
|
|
36
103
|
schedule?: boolean;
|
|
104
|
+
/**
|
|
105
|
+
* Advanced. When true, asserts the compute function returns synchronous
|
|
106
|
+
* values only (never `PromiseLike` / `AsyncIterable`). Skips the
|
|
107
|
+
* async-shape probe in `recompute` for a small fixed-cost win per run.
|
|
108
|
+
* Intended for compiler emissions (`_$effect`) and library code that
|
|
109
|
+
* provably returns sync values. Returning a Promise or async iterable
|
|
110
|
+
* from a `sync: true` effect is undefined behavior — the value will be
|
|
111
|
+
* stored as-is and never awaited.
|
|
112
|
+
*/
|
|
113
|
+
sync?: boolean;
|
|
114
|
+
/**
|
|
115
|
+
* Advanced (integration tier). When true, the effect is invisible to the
|
|
116
|
+
* hydration id scheme: it inherits its parent's id instead of consuming a
|
|
117
|
+
* child slot, and during hydration its compute runs live instead of
|
|
118
|
+
* adopting the serialized server value (its first run is not frozen to
|
|
119
|
+
* the server's decision).
|
|
120
|
+
*
|
|
121
|
+
* For **client-only effects created while hydrating** — effects with no
|
|
122
|
+
* server-rendered counterpart (a router wiring link state, scroll
|
|
123
|
+
* restoration, etc.). An id-consuming node the server never created would
|
|
124
|
+
* shift every later sibling's hydration id, making serialized lookups and
|
|
125
|
+
* template claims after it miss. `transparent` is also the supported
|
|
126
|
+
* alternative to branching on hydration state
|
|
127
|
+
* (`if (hydrating) createEffect(...)`), which freezes whatever the first
|
|
128
|
+
* run decided: create the effect unconditionally and let it observe live
|
|
129
|
+
* state instead.
|
|
130
|
+
*
|
|
131
|
+
* SSR ignores this option (a server-side effect always allocates its id
|
|
132
|
+
* slot), so only mark effects the server does not create. Outside
|
|
133
|
+
* hydration it is a no-op.
|
|
134
|
+
*/
|
|
135
|
+
transparent?: boolean;
|
|
37
136
|
}
|
|
38
137
|
/** Options for plain signals created with `createSignal(value)` or `createOptimistic(value)`. */
|
|
39
138
|
export interface SignalOptions<T> {
|
|
40
139
|
/** Debug name (dev mode only) */
|
|
41
140
|
name?: string;
|
|
42
|
-
/**
|
|
141
|
+
/**
|
|
142
|
+
* Custom equality function, or `false` to always notify subscribers.
|
|
143
|
+
* Defaults to reference equality (`isEqual`). Pass a comparator (e.g.
|
|
144
|
+
* `(a, b) => a.id === b.id`) for value-based equality, or `false` to
|
|
145
|
+
* notify on every write regardless of equality.
|
|
146
|
+
*/
|
|
43
147
|
equals?: false | ((prev: T, next: T) => boolean);
|
|
44
148
|
/** Suppress dev-mode warnings when writing inside an owned scope */
|
|
45
149
|
ownedWrite?: boolean;
|
|
@@ -56,14 +160,67 @@ export interface MemoOptions<T> {
|
|
|
56
160
|
id?: string;
|
|
57
161
|
/** Debug name (dev mode only) */
|
|
58
162
|
name?: string;
|
|
59
|
-
/**
|
|
163
|
+
/**
|
|
164
|
+
* Advanced (integration tier). When true, the memo is invisible to the
|
|
165
|
+
* hydration id scheme: it inherits its parent's id instead of consuming a
|
|
166
|
+
* child slot, and during hydration it computes live instead of adopting
|
|
167
|
+
* the serialized server value. For client-only memos with no
|
|
168
|
+
* server-rendered counterpart — see {@link EffectOptions.transparent} for
|
|
169
|
+
* the full semantics. No-op outside hydration.
|
|
170
|
+
*/
|
|
60
171
|
transparent?: boolean;
|
|
61
|
-
/**
|
|
172
|
+
/**
|
|
173
|
+
* Custom equality function, or `false` to always notify subscribers.
|
|
174
|
+
* Defaults to reference equality (`isEqual`). Pass a comparator (e.g.
|
|
175
|
+
* `(a, b) => a.id === b.id`) for value-based equality, or `false` to
|
|
176
|
+
* notify on every recompute regardless of equality.
|
|
177
|
+
*/
|
|
62
178
|
equals?: false | ((prev: T, next: T) => boolean);
|
|
63
179
|
/** Callback invoked when the computed loses all subscribers */
|
|
64
180
|
unobserved?: () => void;
|
|
65
|
-
/**
|
|
181
|
+
/**
|
|
182
|
+
* When true, defers the initial computation until the value is first read,
|
|
183
|
+
* **and** opts the memo into autodisposal — once it has no remaining
|
|
184
|
+
* subscribers it is torn down and recomputed from scratch on the next read.
|
|
185
|
+
* Use it for compute-on-demand values that should not retain state across
|
|
186
|
+
* idle periods. Non-lazy owned memos live for their owner's lifetime and
|
|
187
|
+
* never autodispose.
|
|
188
|
+
*/
|
|
66
189
|
lazy?: boolean;
|
|
190
|
+
/**
|
|
191
|
+
* Advanced. When true, asserts the compute function returns synchronous
|
|
192
|
+
* values only (never `PromiseLike` / `AsyncIterable`). Skips the
|
|
193
|
+
* async-shape probe in `recompute` for a small fixed-cost win per run.
|
|
194
|
+
* Intended for compiler emissions (`_$memo`) and library code that
|
|
195
|
+
* provably returns sync values. Returning a Promise or async iterable
|
|
196
|
+
* from a `sync: true` memo is undefined behavior — the value will be
|
|
197
|
+
* stored as-is and never awaited.
|
|
198
|
+
*/
|
|
199
|
+
sync?: boolean;
|
|
200
|
+
/**
|
|
201
|
+
* Commit #0: a committed value the memo is born with, shown until the
|
|
202
|
+
* compute's first real answer lands. While that first answer is in flight
|
|
203
|
+
* the memo reads as a settled value everywhere — nothing suspends to a
|
|
204
|
+
* `<Loading>` boundary, no transition is held (first-flight work is
|
|
205
|
+
* loading-class, like a boundary fallback), and `isPending(memo)` stays
|
|
206
|
+
* **false**: commit #0 answers the question by declaration, so first-load
|
|
207
|
+
* affordances are driven from the value itself (a `null` placeholder, a
|
|
208
|
+
* `skeleton: true` field, etc.). Once the first answer lands, the loading
|
|
209
|
+
* value leaves the lineage forever: refetches use normal pending semantics
|
|
210
|
+
* (stale value shown, `isPending` true, boundaries/transitions coordinate)
|
|
211
|
+
* — the canonical guard is `data.skeleton || isPending(data)`, whose two
|
|
212
|
+
* terms cover the two disjoint states.
|
|
213
|
+
*
|
|
214
|
+
* Typed strictly as `T`: to use `null`/`undefined` as the placeholder,
|
|
215
|
+
* declare it in the memo's type (e.g. `createMemo<User | null>(...)`), so
|
|
216
|
+
* every consumer sees the nullable window honestly. If the placeholder is
|
|
217
|
+
* shaped data standing in for real data, encode its provenance in the data
|
|
218
|
+
* (e.g. a `skeleton: true` field) rather than letting it impersonate truth.
|
|
219
|
+
*
|
|
220
|
+
* The loading value is also the compute's first `prev`, so `prev`-based
|
|
221
|
+
* memos fold from it.
|
|
222
|
+
*/
|
|
223
|
+
loadingValue?: T;
|
|
67
224
|
}
|
|
68
225
|
export type NoInfer<T extends any> = [T][T extends any ? 0 : never];
|
|
69
226
|
/**
|
|
@@ -83,6 +240,23 @@ export type NoInfer<T extends any> = [T][T extends any ? 0 : never];
|
|
|
83
240
|
*
|
|
84
241
|
* @returns `[state: Accessor<T>, setState: Setter<T>]`
|
|
85
242
|
*
|
|
243
|
+
* @example
|
|
244
|
+
* ```ts
|
|
245
|
+
* const [count, setCount] = createSignal(0);
|
|
246
|
+
*
|
|
247
|
+
* count(); // 0
|
|
248
|
+
* setCount(1); // explicit value
|
|
249
|
+
* setCount(c => c + 1); // updater
|
|
250
|
+
* ```
|
|
251
|
+
*
|
|
252
|
+
* @example
|
|
253
|
+
* ```ts
|
|
254
|
+
* // Writable memo: starts as `fn()`, can be locally overwritten by setter.
|
|
255
|
+
* const [user, setUser] = createSignal(() => fetchUser(userId()));
|
|
256
|
+
*
|
|
257
|
+
* setUser({ ...user(), name: "Alice" }); // optimistic local edit
|
|
258
|
+
* ```
|
|
259
|
+
*
|
|
86
260
|
* @description https://docs.solidjs.com/reference/basic-reactivity/create-signal
|
|
87
261
|
*/
|
|
88
262
|
export declare function createSignal<T>(): Signal<T | undefined>;
|
|
@@ -95,34 +269,139 @@ export declare function createSignal<T>(fn: ComputeFunction<T>, options?: Signal
|
|
|
95
269
|
* const value = createMemo<T>(compute, options?: MemoOptions<T>);
|
|
96
270
|
* ```
|
|
97
271
|
* @param compute a function that receives its previous value and returns a new value used to react on a computation
|
|
98
|
-
* @param options `MemoOptions` -- id, name, equals, unobserved, lazy
|
|
272
|
+
* @param options `MemoOptions` -- id, name, equals, unobserved, lazy, transparent
|
|
273
|
+
*
|
|
274
|
+
* @example
|
|
275
|
+
* ```ts
|
|
276
|
+
* const [first, setFirst] = createSignal("Ada");
|
|
277
|
+
* const [last, setLast] = createSignal("Lovelace");
|
|
278
|
+
*
|
|
279
|
+
* const fullName = createMemo(() => `${first()} ${last()}`);
|
|
280
|
+
*
|
|
281
|
+
* fullName(); // "Ada Lovelace"
|
|
282
|
+
* ```
|
|
283
|
+
*
|
|
284
|
+
* @example
|
|
285
|
+
* ```ts
|
|
286
|
+
* // Async memo — reads surface as pending inside <Loading>
|
|
287
|
+
* const user = createMemo(async () => {
|
|
288
|
+
* const res = await fetch(`/users/${id()}`);
|
|
289
|
+
* return res.json();
|
|
290
|
+
* });
|
|
291
|
+
* ```
|
|
99
292
|
*
|
|
100
293
|
* @description https://docs.solidjs.com/reference/basic-reactivity/create-memo
|
|
101
294
|
*/
|
|
102
|
-
export declare function createMemo<T>(compute: ComputeFunction<
|
|
295
|
+
export declare function createMemo<T>(compute: ComputeFunction<NoInfer<T>, T>, options: MemoOptions<T> & {
|
|
296
|
+
loadingValue: T;
|
|
297
|
+
}): SourceAccessor<T>;
|
|
298
|
+
export declare function createMemo<T>(compute: ComputeFunction<undefined | NoInfer<T>, T>, options?: MemoOptions<T>): SourceAccessor<T>;
|
|
103
299
|
/**
|
|
104
|
-
* Creates a reactive effect
|
|
300
|
+
* Creates a reactive effect with **separate compute and effect phases**.
|
|
301
|
+
*
|
|
302
|
+
* - `compute(prev)` runs reactively — *put all reactive reads here*. The
|
|
303
|
+
* returned value is passed to `effect` and is also the new "previous" value
|
|
304
|
+
* for the next run.
|
|
305
|
+
* - `effect(next, prev?)` runs imperatively (untracked) after the queue
|
|
306
|
+
* flushes. *Put DOM writes / fetch / logging / subscriptions here.* It may
|
|
307
|
+
* return a cleanup function which runs before the next effect or on
|
|
308
|
+
* disposal.
|
|
309
|
+
*
|
|
310
|
+
* Reactive reads inside `effect` will *not* re-trigger this effect — that's
|
|
311
|
+
* intentional. If you need a single-phase tracked effect, use
|
|
312
|
+
* `createTrackedEffect` (with the tradeoffs noted there).
|
|
313
|
+
*
|
|
314
|
+
* Pass an `EffectBundle` (`{ effect, error }`) instead of a plain function to
|
|
315
|
+
* intercept **compute-phase** errors — errors thrown by `compute` or arriving
|
|
316
|
+
* from upstream reactive sources (including async rejections), which your own
|
|
317
|
+
* code has no frame to `try/catch`. The `error` handler is the error arm of
|
|
318
|
+
* the effect phase: it runs on the same schedule and in the same imperative,
|
|
319
|
+
* writable scope as `effect` (setting error state via signals is fine), and
|
|
320
|
+
* only for *settled* errors — a transient error that recovers before the
|
|
321
|
+
* effect phase runs `effect` with the recovered value instead, and a held
|
|
322
|
+
* transition defers it exactly as it defers `effect`. Without an `error`
|
|
323
|
+
* handler a compute-phase error is logged and the effect simply skips that
|
|
324
|
+
* run — a non-render effect's reactivity failing does not crash the app.
|
|
325
|
+
* Rethrowing from `error` escalates it to the nearest error boundary
|
|
326
|
+
* (halting the system if none exists).
|
|
327
|
+
*
|
|
328
|
+
* The **effect phase is different**: it is your own imperative code, so handle
|
|
329
|
+
* failures with `try/catch` where they occur. An uncaught effect-phase throw
|
|
330
|
+
* is treated as an unhandled application error — caught by the nearest
|
|
331
|
+
* `createErrorBoundary`/`<Errored>`, and permanently halting the reactive
|
|
332
|
+
* system if there is none. It is *not* routed to the bundle's `error` handler.
|
|
105
333
|
*
|
|
106
334
|
* ```typescript
|
|
107
335
|
* createEffect<T>(compute, effectFn | { effect, error }, options?: EffectOptions);
|
|
108
336
|
* ```
|
|
109
337
|
* @param compute a function that receives its previous value and returns a new value used to react on a computation
|
|
110
338
|
* @param effectFn a function that receives the new value and is used to perform side effects (return a cleanup function), or an `EffectBundle` with `effect` and `error` handlers
|
|
111
|
-
* @param options `EffectOptions` -- name, defer
|
|
339
|
+
* @param options `EffectOptions` -- name, defer, schedule, transparent
|
|
340
|
+
*
|
|
341
|
+
* @example
|
|
342
|
+
* ```ts
|
|
343
|
+
* const [count, setCount] = createSignal(0);
|
|
344
|
+
*
|
|
345
|
+
* createEffect(
|
|
346
|
+
* () => count(), // compute: tracks `count`
|
|
347
|
+
* value => console.log(value) // effect: side effect
|
|
348
|
+
* );
|
|
349
|
+
*
|
|
350
|
+
* setCount(1); // logs 1 after the next flush
|
|
351
|
+
* ```
|
|
352
|
+
*
|
|
353
|
+
* @example
|
|
354
|
+
* ```ts
|
|
355
|
+
* createEffect(
|
|
356
|
+
* () => userId(),
|
|
357
|
+
* id => {
|
|
358
|
+
* const ctrl = new AbortController();
|
|
359
|
+
* fetch(`/users/${id}`, { signal: ctrl.signal });
|
|
360
|
+
* return () => ctrl.abort(); // cleanup before next run / disposal
|
|
361
|
+
* }
|
|
362
|
+
* );
|
|
363
|
+
* ```
|
|
112
364
|
*
|
|
113
365
|
* @description https://docs.solidjs.com/reference/basic-reactivity/create-effect
|
|
114
366
|
*/
|
|
115
367
|
export declare function createEffect<T>(compute: ComputeFunction<undefined | NoInfer<T>, T>, effectFn: EffectFunction<NoInfer<T>, T> | EffectBundle<NoInfer<T>, T>, options?: EffectOptions): void;
|
|
368
|
+
/**
|
|
369
|
+
* @deprecated `createEffect(compute)` (single argument) is no longer supported.
|
|
370
|
+
* Pass a separate effect function as the second argument:
|
|
371
|
+
* `createEffect(compute, effect)`. See [MISSING_EFFECT_FN].
|
|
372
|
+
*
|
|
373
|
+
* - For a side effect that reacts to changes, split the work:
|
|
374
|
+
* `createEffect(() => signal(), value => doWork(value))`.
|
|
375
|
+
* - For a derived value, use `createMemo(() => signal())`.
|
|
376
|
+
* - For a one-shot side effect at construction time, just call the function.
|
|
377
|
+
*/
|
|
378
|
+
export declare function createEffect<T>(compute: ComputeFunction<undefined | NoInfer<T>, T>): never;
|
|
116
379
|
/**
|
|
117
380
|
* Creates a reactive computation that runs during the render phase as DOM elements
|
|
118
381
|
* are created and updated but not necessarily connected.
|
|
119
382
|
*
|
|
383
|
+
* Same compute / effect split as `createEffect`, but scheduled inside the render
|
|
384
|
+
* queue rather than after it. Reach for this only when authoring renderer
|
|
385
|
+
* plumbing (custom DOM bindings, JSX-generated `insert()` / `spread()` calls).
|
|
386
|
+
* App code should use `createEffect`.
|
|
387
|
+
*
|
|
120
388
|
* ```typescript
|
|
121
389
|
* createRenderEffect<T>(compute, effectFn, options?: EffectOptions);
|
|
122
390
|
* ```
|
|
123
391
|
* @param compute a function that receives its previous value and returns a new value used to react on a computation
|
|
124
392
|
* @param effectFn a function that receives the new value and is used to perform side effects
|
|
125
|
-
* @param options `EffectOptions` -- name, defer
|
|
393
|
+
* @param options `EffectOptions` -- name, defer, schedule, transparent
|
|
394
|
+
*
|
|
395
|
+
* @example
|
|
396
|
+
* ```ts
|
|
397
|
+
* // Custom directive: bind an element's textContent to a reactive source.
|
|
398
|
+
* function bindText(el: HTMLElement, source: () => string) {
|
|
399
|
+
* createRenderEffect(
|
|
400
|
+
* () => source(),
|
|
401
|
+
* value => { el.textContent = value; }
|
|
402
|
+
* );
|
|
403
|
+
* }
|
|
404
|
+
* ```
|
|
126
405
|
*
|
|
127
406
|
* @description https://docs.solidjs.com/reference/secondary-primitives/create-render-effect
|
|
128
407
|
*/
|
|
@@ -141,6 +420,19 @@ export declare function createRenderEffect<T>(compute: ComputeFunction<undefined
|
|
|
141
420
|
* @param compute a function that contains reactive reads to track and returns an optional cleanup function to run on disposal or before next execution
|
|
142
421
|
* @param options -- name
|
|
143
422
|
*
|
|
423
|
+
* @example
|
|
424
|
+
* ```ts
|
|
425
|
+
* createTrackedEffect(() => {
|
|
426
|
+
* const target = focusedNode();
|
|
427
|
+
* if (!target) return;
|
|
428
|
+
*
|
|
429
|
+
* const handler = () => log(target.value());
|
|
430
|
+
* target.on("change", handler);
|
|
431
|
+
*
|
|
432
|
+
* return () => target.off("change", handler);
|
|
433
|
+
* });
|
|
434
|
+
* ```
|
|
435
|
+
*
|
|
144
436
|
* @description https://docs.solidjs.com/reference/secondary-primitives/create-tracked-effect
|
|
145
437
|
*/
|
|
146
438
|
export declare function createTrackedEffect(compute: () => void | (() => void), options?: BaseEffectOptions): void;
|
|
@@ -154,11 +446,42 @@ export declare function createTrackedEffect(compute: () => void | (() => void),
|
|
|
154
446
|
* @param effectFn a function (or `EffectBundle`) that is called when tracked function is invalidated
|
|
155
447
|
* @param options `EffectOptions` -- name, defer
|
|
156
448
|
*
|
|
449
|
+
* @example
|
|
450
|
+
* ```ts
|
|
451
|
+
* const [count, setCount] = createSignal(0);
|
|
452
|
+
*
|
|
453
|
+
* const track = createReaction(() => {
|
|
454
|
+
* console.log("count changed once, re-arm to listen again");
|
|
455
|
+
* track(() => count()); // re-arm
|
|
456
|
+
* });
|
|
457
|
+
*
|
|
458
|
+
* track(() => count()); // initial arm
|
|
459
|
+
*
|
|
460
|
+
* setCount(1); // logs once, reaction re-armed for next change
|
|
461
|
+
* ```
|
|
462
|
+
*
|
|
157
463
|
* @description https://docs.solidjs.com/reference/secondary-primitives/create-reaction
|
|
158
464
|
*/
|
|
159
465
|
export declare function createReaction(effectFn: EffectFunction<undefined> | EffectBundle<undefined>, options?: EffectOptions): (tracking: () => void) => void;
|
|
160
466
|
/**
|
|
161
|
-
*
|
|
467
|
+
* Awaits a reactive expression and returns its first fully-settled value as a
|
|
468
|
+
* `Promise`. Pending async reads (`createMemo` returning a promise, etc.) are
|
|
469
|
+
* waited on; once the expression returns synchronously without `NotReadyError`
|
|
470
|
+
* the promise resolves with that value. If the expression settles with an
|
|
471
|
+
* error instead — including an async source that rejects — the promise
|
|
472
|
+
* rejects with it.
|
|
473
|
+
*
|
|
474
|
+
* Must be called *outside* a tracking scope — it doesn't subscribe, it just
|
|
475
|
+
* resolves the current value once.
|
|
476
|
+
*
|
|
477
|
+
* @example
|
|
478
|
+
* ```ts
|
|
479
|
+
* const user = createMemo(() => fetch(`/users/${id()}`).then(r => r.json()));
|
|
480
|
+
*
|
|
481
|
+
* // outside any reactive scope
|
|
482
|
+
* const initial = await resolve(() => user());
|
|
483
|
+
* ```
|
|
484
|
+
*
|
|
162
485
|
* @param fn a reactive expression to resolve
|
|
163
486
|
*/
|
|
164
487
|
export declare function resolve<T>(fn: () => T): Promise<T>;
|
|
@@ -180,21 +503,103 @@ export declare function resolve<T>(fn: () => T): Promise<T>;
|
|
|
180
503
|
*
|
|
181
504
|
* @returns `[state: Accessor<T>, setState: Setter<T>]`
|
|
182
505
|
*
|
|
506
|
+
* @example
|
|
507
|
+
* ```ts
|
|
508
|
+
* const [todos, setTodos] = createOptimistic(initialTodos);
|
|
509
|
+
*
|
|
510
|
+
* const addTodo = action(function* (text: string) {
|
|
511
|
+
* const tempId = crypto.randomUUID();
|
|
512
|
+
* setTodos(t => [...t, { id: tempId, text, pending: true }]); // optimistic
|
|
513
|
+
* const saved = yield api.createTodo(text);
|
|
514
|
+
* setTodos(t => t.map(x => (x.id === tempId ? saved : x))); // reconcile
|
|
515
|
+
* });
|
|
516
|
+
* ```
|
|
517
|
+
*
|
|
183
518
|
* @description https://docs.solidjs.com/reference/basic-reactivity/create-optimistic-signal
|
|
184
519
|
*/
|
|
185
520
|
export declare function createOptimistic<T>(): Signal<T | undefined>;
|
|
186
521
|
export declare function createOptimistic<T>(value: Exclude<T, Function>, options?: SignalOptions<T>): Signal<T>;
|
|
187
522
|
export declare function createOptimistic<T>(fn: ComputeFunction<T>, options?: SignalOptions<T> & MemoOptions<T>): Signal<T>;
|
|
188
523
|
/**
|
|
189
|
-
*
|
|
524
|
+
* Schedules `callback` to run **once** after the reactive graph has fully
|
|
525
|
+
* settled — i.e. once every pending async read inside the current owner has
|
|
526
|
+
* resolved and the queue has flushed. Each call registers a single fire; it
|
|
527
|
+
* does not create an ongoing subscription.
|
|
528
|
+
*
|
|
529
|
+
* The canonical lifecycle primitive in 2.0. Three main usages:
|
|
190
530
|
*
|
|
191
|
-
*
|
|
192
|
-
*
|
|
193
|
-
*
|
|
531
|
+
* - **Component-level setup-and-teardown** *(the most common shape)*: run
|
|
532
|
+
* setup after the component's first stable render and **return a cleanup
|
|
533
|
+
* function** to dispose it on owner disposal. This is the replacement for
|
|
534
|
+
* the 1.x `onMount` + `onCleanup` pairing — setup and teardown live in one
|
|
535
|
+
* block, and `onCleanup` is no longer the right tool for component
|
|
536
|
+
* bodies. (`onMount` no longer exists in 2.0.)
|
|
537
|
+
* - **Post-settle "ready" hook:** run once after a component's first stable
|
|
538
|
+
* render — analytics ping, focus, scroll-into-view, etc. No cleanup needed.
|
|
539
|
+
* - **Inside an event handler:** schedule work to run after the action /
|
|
540
|
+
* transition triggered by the event has completed.
|
|
194
541
|
*
|
|
195
|
-
*
|
|
542
|
+
* Reactive reads inside the callback are *not* tracked — to react to
|
|
543
|
+
* subsequent settles, register a new `onSettled` each time.
|
|
544
|
+
*
|
|
545
|
+
* `onCleanup` is **not** allowed inside the callback — return a cleanup
|
|
546
|
+
* function instead. The returned cleanup runs on owner disposal.
|
|
547
|
+
*
|
|
548
|
+
* A cleanup return is only honored when `onSettled` is called from an **owned**
|
|
549
|
+
* scope (e.g. a component body). When it fires out of band from an *unowned*
|
|
550
|
+
* scope — an event handler, a tracked effect, or another `onSettled` — there is
|
|
551
|
+
* no owner lifecycle to bind a cleanup to; returning one is a dev-mode error
|
|
552
|
+
* (and is dropped in production). Use the post-settle/event-handler forms below
|
|
553
|
+
* for one-shot work, and keep setup-with-teardown in an owned scope.
|
|
554
|
+
*
|
|
555
|
+
* @example
|
|
556
|
+
* ```tsx
|
|
557
|
+
* // Component-level setup + teardown — replaces onMount + onCleanup.
|
|
558
|
+
* // Subscribe to an external source on mount, unsubscribe on dispose.
|
|
559
|
+
* function useViewportWidth() {
|
|
560
|
+
* const [width, setWidth] = createSignal(window.innerWidth);
|
|
561
|
+
* onSettled(() => {
|
|
562
|
+
* const onResize = () => setWidth(window.innerWidth);
|
|
563
|
+
* window.addEventListener("resize", onResize);
|
|
564
|
+
* return () => window.removeEventListener("resize", onResize);
|
|
565
|
+
* });
|
|
566
|
+
* return width;
|
|
567
|
+
* }
|
|
568
|
+
* ```
|
|
569
|
+
*
|
|
570
|
+
* @example
|
|
571
|
+
* ```tsx
|
|
572
|
+
* // Post-settle "ready" hook — no cleanup needed.
|
|
573
|
+
* function Dashboard() {
|
|
574
|
+
* const data = createMemo(async () => fetchData());
|
|
575
|
+
*
|
|
576
|
+
* onSettled(() => {
|
|
577
|
+
* analytics.track("dashboard.ready");
|
|
578
|
+
* });
|
|
579
|
+
*
|
|
580
|
+
* return <Loading fallback={<Spinner />}><pre>{data()}</pre></Loading>;
|
|
581
|
+
* }
|
|
582
|
+
* ```
|
|
583
|
+
*
|
|
584
|
+
* @example
|
|
585
|
+
* ```tsx
|
|
586
|
+
* // Event-handler — runs after the action settles.
|
|
587
|
+
* function SaveButton() {
|
|
588
|
+
* const save = action(function* () {
|
|
589
|
+
* yield api.save();
|
|
590
|
+
* });
|
|
591
|
+
*
|
|
592
|
+
* const handleClick = () => {
|
|
593
|
+
* save();
|
|
594
|
+
* onSettled(() => toast("Saved!"));
|
|
595
|
+
* };
|
|
596
|
+
*
|
|
597
|
+
* return <button onClick={handleClick}>Save</button>;
|
|
598
|
+
* }
|
|
599
|
+
* ```
|
|
196
600
|
*
|
|
197
|
-
* @param callback Function to run
|
|
601
|
+
* @param callback Function to run; may return a cleanup function that fires
|
|
602
|
+
* on owner disposal
|
|
198
603
|
*/
|
|
199
604
|
export declare function onSettled(callback: () => void | (() => void)): void;
|
|
200
605
|
export {};
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
export type { Store, StoreSetter, StoreNode, StoreOptions, ProjectionOptions, NotWrappable, SolidStore } from "./store.js";
|
|
1
|
+
export type { Store, StoreReturn, ProjectionStoreReturn, StoreSetter, StoreNode, StoreOptions, ProjectionOptions, NotWrappable, SolidStore } from "./store.js";
|
|
2
2
|
export type { Merge, Omit } from "./utils.js";
|
|
3
3
|
export { isWrappable, createStore, $TRACK, $PROXY, $TARGET } from "./store.js";
|
|
4
4
|
export { createProjection } from "./projection.js";
|
|
@@ -1,19 +1,45 @@
|
|
|
1
|
-
import {
|
|
1
|
+
import { type Refreshable } from "../core/index.js";
|
|
2
2
|
import { type NoFn, type ProjectionOptions, type Store, type StoreSetter } from "./store.js";
|
|
3
3
|
/**
|
|
4
|
-
*
|
|
5
|
-
*
|
|
4
|
+
* The store equivalent of `createOptimistic`. Writes inside an `action`
|
|
5
|
+
* transition are tentative — they show up immediately but auto-revert (or
|
|
6
|
+
* reconcile to the action's resolved value) once the transition finishes.
|
|
6
7
|
*
|
|
7
|
-
*
|
|
8
|
-
*
|
|
8
|
+
* Use this for optimistic UI on collection-shaped data. For single-value
|
|
9
|
+
* optimistic state, prefer `createOptimistic`.
|
|
9
10
|
*
|
|
10
|
-
*
|
|
11
|
-
*
|
|
12
|
-
*
|
|
11
|
+
* - Plain form: `createOptimisticStore(initialValue)`.
|
|
12
|
+
* - Derived form: `createOptimisticStore(fn, seed, options?)` — a projection
|
|
13
|
+
* store whose authoritative value is recomputed by `fn` and whose
|
|
14
|
+
* optimistic overlay reverts after each transition.
|
|
13
15
|
*
|
|
14
|
-
*
|
|
16
|
+
* `options.key` defaults to `"id"`; specify it only when your data uses a
|
|
17
|
+
* different identity field (e.g. `{ key: "uuid" }` or `{ key: t => t.slug }`),
|
|
18
|
+
* or `null` to merge positionally. Restating the default just adds noise.
|
|
19
|
+
*
|
|
20
|
+
* @example
|
|
21
|
+
* ```ts
|
|
22
|
+
* const [todos, setTodos] = createOptimisticStore<Todo[]>([]);
|
|
23
|
+
*
|
|
24
|
+
* // Mutation: optimistic add, then in-place reconcile to the saved row.
|
|
25
|
+
* const addTodo = action(function* (text: string) {
|
|
26
|
+
* const tempId = crypto.randomUUID();
|
|
27
|
+
* setTodos(t => { t.push({ id: tempId, text, pending: true }); });
|
|
28
|
+
* const saved = yield api.createTodo(text);
|
|
29
|
+
* setTodos(t => {
|
|
30
|
+
* const i = t.findIndex(x => x.id === tempId);
|
|
31
|
+
* if (i >= 0) t[i] = saved;
|
|
32
|
+
* });
|
|
33
|
+
* });
|
|
34
|
+
*
|
|
35
|
+
* // Return form: filter is the natural shape for removal.
|
|
36
|
+
* const removeTodo = action(function* (id: string) {
|
|
37
|
+
* setTodos(t => t.filter(x => x.id !== id));
|
|
38
|
+
* yield api.removeTodo(id);
|
|
39
|
+
* });
|
|
40
|
+
* ```
|
|
41
|
+
*
|
|
42
|
+
* @returns `[store: Store<T>, setStore: StoreSetter<T>]`
|
|
15
43
|
*/
|
|
16
|
-
export declare function createOptimisticStore<T extends object = {}>(store: NoFn<T> | Store<NoFn<T
|
|
17
|
-
export declare function createOptimisticStore<T extends object = {}>(fn: (store: T) => void | T | Promise<void | T> | AsyncIterable<void | T>, store: Partial<T> | Store<NoFn<T>>, options?: ProjectionOptions): [get: Store<T
|
|
18
|
-
[$REFRESH]: any;
|
|
19
|
-
}, set: StoreSetter<T>];
|
|
44
|
+
export declare function createOptimisticStore<T extends object = {}>(store: NoFn<T> | Store<NoFn<T>>, options?: ProjectionOptions): [get: Store<T>, set: StoreSetter<T>];
|
|
45
|
+
export declare function createOptimisticStore<T extends object = {}>(fn: (store: T) => void | T | Promise<void | T> | AsyncIterable<void | T>, store: Partial<T> | Store<NoFn<T>>, options?: ProjectionOptions): [get: Refreshable<Store<T>>, set: StoreSetter<T>];
|