@solidjs/signals 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.
- package/dist/dev.js +401 -199
- package/dist/node.cjs +1403 -1259
- package/dist/prod.js +1053 -905
- package/dist/types/boundaries.d.ts +79 -3
- package/dist/types/core/action.d.ts +34 -0
- package/dist/types/core/constants.d.ts +17 -0
- package/dist/types/core/core.d.ts +108 -9
- package/dist/types/core/dev.d.ts +1 -1
- package/dist/types/core/effect.d.ts +3 -2
- package/dist/types/core/owner.d.ts +54 -3
- package/dist/types/core/scheduler.d.ts +19 -2
- package/dist/types/core/types.d.ts +2 -5
- package/dist/types/index.d.ts +2 -2
- package/dist/types/map.d.ts +32 -3
- package/dist/types/signals.d.ts +283 -16
- package/dist/types/store/optimistic.d.ts +38 -12
- package/dist/types/store/projection.d.ts +54 -14
- package/dist/types/store/reconcile.d.ts +22 -0
- package/dist/types/store/store.d.ts +64 -14
- package/dist/types/store/storePath.d.ts +28 -0
- package/dist/types/store/utils.d.ts +78 -7
- package/dist/types-cjs/boundaries.d.cts +79 -3
- package/dist/types-cjs/core/action.d.cts +34 -0
- package/dist/types-cjs/core/constants.d.cts +17 -0
- package/dist/types-cjs/core/core.d.cts +108 -9
- package/dist/types-cjs/core/dev.d.cts +1 -1
- package/dist/types-cjs/core/effect.d.cts +3 -2
- package/dist/types-cjs/core/owner.d.cts +54 -3
- package/dist/types-cjs/core/scheduler.d.cts +19 -2
- package/dist/types-cjs/core/types.d.cts +2 -5
- package/dist/types-cjs/index.d.cts +2 -2
- package/dist/types-cjs/map.d.cts +32 -3
- package/dist/types-cjs/signals.d.cts +283 -16
- package/dist/types-cjs/store/optimistic.d.cts +38 -12
- package/dist/types-cjs/store/projection.d.cts +54 -14
- package/dist/types-cjs/store/reconcile.d.cts +22 -0
- package/dist/types-cjs/store/store.d.cts +64 -14
- package/dist/types-cjs/store/storePath.d.cts +28 -0
- package/dist/types-cjs/store/utils.d.cts +78 -7
- package/package.json +4 -3
package/dist/types-cjs/map.d.cts
CHANGED
|
@@ -1,9 +1,28 @@
|
|
|
1
1
|
import { type Accessor } from "./signals.cjs";
|
|
2
2
|
export type Maybe<T> = T | void | null | undefined | false;
|
|
3
3
|
/**
|
|
4
|
-
* Reactively
|
|
4
|
+
* Reactively maps an array, reusing the previously-mapped value for unchanged
|
|
5
|
+
* items. The callback receives `(value, index)` as accessors so individual
|
|
6
|
+
* items and indexes can be subscribed to without re-running the mapper.
|
|
5
7
|
*
|
|
6
|
-
*
|
|
8
|
+
* This is the underlying helper that powers `<For>`. App code should use
|
|
9
|
+
* `<For>` directly; reach for `mapArray` when implementing custom list
|
|
10
|
+
* components.
|
|
11
|
+
*
|
|
12
|
+
* - `options.keyed` — `true` (default for primitives) compares by identity;
|
|
13
|
+
* `false` falls back to index-only mapping; pass a function `(item) => key`
|
|
14
|
+
* for stable identity by extracted key.
|
|
15
|
+
* - `options.fallback` — accessor returning a value to show when the input is
|
|
16
|
+
* empty.
|
|
17
|
+
*
|
|
18
|
+
* @example
|
|
19
|
+
* ```ts
|
|
20
|
+
* const view = mapArray(
|
|
21
|
+
* items,
|
|
22
|
+
* (item, index) => `${index()}: ${item().label}`,
|
|
23
|
+
* { fallback: () => "no items" }
|
|
24
|
+
* );
|
|
25
|
+
* ```
|
|
7
26
|
*
|
|
8
27
|
* @description https://docs.solidjs.com/reference/reactive-utilities/map-array
|
|
9
28
|
*/
|
|
@@ -13,7 +32,17 @@ export declare function mapArray<Item, MappedItem>(list: Accessor<Maybe<readonly
|
|
|
13
32
|
name?: string;
|
|
14
33
|
}): Accessor<MappedItem[]>;
|
|
15
34
|
/**
|
|
16
|
-
* Reactively
|
|
35
|
+
* Reactively renders a callback `count` times, reusing previously-rendered
|
|
36
|
+
* entries when only the count changes. Underlying helper for `<Repeat>`.
|
|
37
|
+
*
|
|
38
|
+
* - `options.from` — start index (default `0`); useful for offset/windowed
|
|
39
|
+
* rendering.
|
|
40
|
+
* - `options.fallback` — accessor returning a value to show when count is `0`.
|
|
41
|
+
*
|
|
42
|
+
* @example
|
|
43
|
+
* ```ts
|
|
44
|
+
* const view = repeat(count, i => `Item ${i}`, { fallback: () => "empty" });
|
|
45
|
+
* ```
|
|
17
46
|
*
|
|
18
47
|
* @description https://docs.solidjs.com/reference/reactive-utilities/repeat
|
|
19
48
|
*/
|
|
@@ -1,13 +1,56 @@
|
|
|
1
1
|
import type { Disposable } from "./core/index.cjs";
|
|
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
|
+
*/
|
|
2
29
|
export declare function onCleanup(fn: Disposable): Disposable;
|
|
30
|
+
/**
|
|
31
|
+
* A zero-arg getter for a reactive value. Calling it inside a tracking scope
|
|
32
|
+
* (memo, effect compute, JSX expression) subscribes the scope to changes.
|
|
33
|
+
*
|
|
34
|
+
* Reading outside any tracking scope simply returns the current value without
|
|
35
|
+
* creating a subscription.
|
|
36
|
+
*/
|
|
3
37
|
export type Accessor<T> = () => T;
|
|
4
38
|
export declare function accessor<T>(node: any): Accessor<T>;
|
|
39
|
+
/**
|
|
40
|
+
* A signal setter. Accepts either a new value or an updater `(prev) => next`.
|
|
41
|
+
*
|
|
42
|
+
* If the type permits `undefined`, `setState()` (no args) clears to `undefined`.
|
|
43
|
+
*
|
|
44
|
+
* To store a function as the value itself (rather than as an updater), wrap it
|
|
45
|
+
* with an updater: `setHandler(() => myHandler)`.
|
|
46
|
+
*/
|
|
5
47
|
export type Setter<in out T> = {
|
|
6
48
|
<U extends T>(...args: undefined extends T ? [] : [value: Exclude<U, Function> | ((prev: T) => U)]): undefined extends T ? undefined : U;
|
|
7
49
|
<U extends T>(value: (prev: T) => U): U;
|
|
8
50
|
<U extends T>(value: Exclude<U, Function>): U;
|
|
9
51
|
<U extends T>(value: Exclude<U, Function> | ((prev: T) => U)): U;
|
|
10
52
|
};
|
|
53
|
+
/** A `[get, set]` pair returned from `createSignal` / `createOptimistic`. */
|
|
11
54
|
export type Signal<T> = [get: Accessor<T>, set: Setter<T>];
|
|
12
55
|
export type ComputeFunction<Prev, Next extends Prev = Prev> = (v: Prev) => PromiseLike<Next> | AsyncIterable<Next> | Next;
|
|
13
56
|
export type EffectFunction<Prev, Next extends Prev = Prev> = (v: Next, p?: Prev) => (() => void) | void;
|
|
@@ -15,12 +58,25 @@ export type EffectBundle<Prev, Next extends Prev = Prev> = {
|
|
|
15
58
|
effect: EffectFunction<Prev, Next>;
|
|
16
59
|
error: (err: unknown, cleanup: () => void) => void;
|
|
17
60
|
};
|
|
18
|
-
/** Options
|
|
19
|
-
|
|
61
|
+
/** Options shared by every effect primitive. */
|
|
62
|
+
interface BaseEffectOptions {
|
|
20
63
|
/** Debug name (dev mode only) */
|
|
21
64
|
name?: string;
|
|
65
|
+
}
|
|
66
|
+
/** Options for effect primitives that support deferring/scheduling their initial run (`createEffect`, `createRenderEffect`, `createReaction`). */
|
|
67
|
+
export interface EffectOptions extends BaseEffectOptions {
|
|
22
68
|
/** When true, defers the initial effect execution until the next change */
|
|
23
69
|
defer?: boolean;
|
|
70
|
+
/**
|
|
71
|
+
* When true, enqueues the initial effect callback through the effect queue instead of running
|
|
72
|
+
* it synchronously at creation. Lets the initial run participate in transitions -- if any
|
|
73
|
+
* source throws `NotReadyError` during the compute phase, the callback is held until the
|
|
74
|
+
* transition settles.
|
|
75
|
+
*
|
|
76
|
+
* Primarily for render effects that need transition-aware initial mounts (e.g. the root
|
|
77
|
+
* `insert()` in `render()`).
|
|
78
|
+
*/
|
|
79
|
+
schedule?: boolean;
|
|
24
80
|
}
|
|
25
81
|
/** Options for plain signals created with `createSignal(value)` or `createOptimistic(value)`. */
|
|
26
82
|
export interface SignalOptions<T> {
|
|
@@ -49,7 +105,14 @@ export interface MemoOptions<T> {
|
|
|
49
105
|
equals?: false | ((prev: T, next: T) => boolean);
|
|
50
106
|
/** Callback invoked when the computed loses all subscribers */
|
|
51
107
|
unobserved?: () => void;
|
|
52
|
-
/**
|
|
108
|
+
/**
|
|
109
|
+
* When true, defers the initial computation until the value is first read,
|
|
110
|
+
* **and** opts the memo into autodisposal — once it has no remaining
|
|
111
|
+
* subscribers it is torn down and recomputed from scratch on the next read.
|
|
112
|
+
* Use it for compute-on-demand values that should not retain state across
|
|
113
|
+
* idle periods. Non-lazy owned memos live for their owner's lifetime and
|
|
114
|
+
* never autodispose.
|
|
115
|
+
*/
|
|
53
116
|
lazy?: boolean;
|
|
54
117
|
}
|
|
55
118
|
export type NoInfer<T extends any> = [T][T extends any ? 0 : never];
|
|
@@ -70,6 +133,23 @@ export type NoInfer<T extends any> = [T][T extends any ? 0 : never];
|
|
|
70
133
|
*
|
|
71
134
|
* @returns `[state: Accessor<T>, setState: Setter<T>]`
|
|
72
135
|
*
|
|
136
|
+
* @example
|
|
137
|
+
* ```ts
|
|
138
|
+
* const [count, setCount] = createSignal(0);
|
|
139
|
+
*
|
|
140
|
+
* count(); // 0
|
|
141
|
+
* setCount(1); // explicit value
|
|
142
|
+
* setCount(c => c + 1); // updater
|
|
143
|
+
* ```
|
|
144
|
+
*
|
|
145
|
+
* @example
|
|
146
|
+
* ```ts
|
|
147
|
+
* // Writable memo: starts as `fn()`, can be locally overwritten by setter.
|
|
148
|
+
* const [user, setUser] = createSignal(() => fetchUser(userId()));
|
|
149
|
+
*
|
|
150
|
+
* setUser({ ...user(), name: "Alice" }); // optimistic local edit
|
|
151
|
+
* ```
|
|
152
|
+
*
|
|
73
153
|
* @description https://docs.solidjs.com/reference/basic-reactivity/create-signal
|
|
74
154
|
*/
|
|
75
155
|
export declare function createSignal<T>(): Signal<T | undefined>;
|
|
@@ -84,22 +164,91 @@ export declare function createSignal<T>(fn: ComputeFunction<T>, options?: Signal
|
|
|
84
164
|
* @param compute a function that receives its previous value and returns a new value used to react on a computation
|
|
85
165
|
* @param options `MemoOptions` -- id, name, equals, unobserved, lazy
|
|
86
166
|
*
|
|
167
|
+
* @example
|
|
168
|
+
* ```ts
|
|
169
|
+
* const [first, setFirst] = createSignal("Ada");
|
|
170
|
+
* const [last, setLast] = createSignal("Lovelace");
|
|
171
|
+
*
|
|
172
|
+
* const fullName = createMemo(() => `${first()} ${last()}`);
|
|
173
|
+
*
|
|
174
|
+
* fullName(); // "Ada Lovelace"
|
|
175
|
+
* ```
|
|
176
|
+
*
|
|
177
|
+
* @example
|
|
178
|
+
* ```ts
|
|
179
|
+
* // Async memo — reads surface as pending inside <Loading>
|
|
180
|
+
* const user = createMemo(async () => {
|
|
181
|
+
* const res = await fetch(`/users/${id()}`);
|
|
182
|
+
* return res.json();
|
|
183
|
+
* });
|
|
184
|
+
* ```
|
|
185
|
+
*
|
|
87
186
|
* @description https://docs.solidjs.com/reference/basic-reactivity/create-memo
|
|
88
187
|
*/
|
|
89
188
|
export declare function createMemo<T>(compute: ComputeFunction<undefined | NoInfer<T>, T>, options?: MemoOptions<T>): Accessor<T>;
|
|
90
189
|
/**
|
|
91
|
-
* Creates a reactive effect
|
|
190
|
+
* Creates a reactive effect with **separate compute and effect phases**.
|
|
191
|
+
*
|
|
192
|
+
* - `compute(prev)` runs reactively — *put all reactive reads here*. The
|
|
193
|
+
* returned value is passed to `effect` and is also the new "previous" value
|
|
194
|
+
* for the next run.
|
|
195
|
+
* - `effect(next, prev?)` runs imperatively (untracked) after the queue
|
|
196
|
+
* flushes. *Put DOM writes / fetch / logging / subscriptions here.* It may
|
|
197
|
+
* return a cleanup function which runs before the next effect or on
|
|
198
|
+
* disposal.
|
|
199
|
+
*
|
|
200
|
+
* Reactive reads inside `effect` will *not* re-trigger this effect — that's
|
|
201
|
+
* intentional. If you need a single-phase tracked effect, use
|
|
202
|
+
* `createTrackedEffect` (with the tradeoffs noted there).
|
|
203
|
+
*
|
|
204
|
+
* Pass an `EffectBundle` (`{ effect, error }`) instead of a plain function to
|
|
205
|
+
* intercept errors thrown from the compute or effect phases.
|
|
92
206
|
*
|
|
93
207
|
* ```typescript
|
|
94
208
|
* createEffect<T>(compute, effectFn | { effect, error }, options?: EffectOptions);
|
|
95
209
|
* ```
|
|
96
210
|
* @param compute a function that receives its previous value and returns a new value used to react on a computation
|
|
97
211
|
* @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
|
|
98
|
-
* @param options `EffectOptions` -- name, defer
|
|
212
|
+
* @param options `EffectOptions` -- name, defer, schedule
|
|
213
|
+
*
|
|
214
|
+
* @example
|
|
215
|
+
* ```ts
|
|
216
|
+
* const [count, setCount] = createSignal(0);
|
|
217
|
+
*
|
|
218
|
+
* createEffect(
|
|
219
|
+
* () => count(), // compute: tracks `count`
|
|
220
|
+
* value => console.log(value) // effect: side effect
|
|
221
|
+
* );
|
|
222
|
+
*
|
|
223
|
+
* setCount(1); // logs 1 after the next flush
|
|
224
|
+
* ```
|
|
225
|
+
*
|
|
226
|
+
* @example
|
|
227
|
+
* ```ts
|
|
228
|
+
* createEffect(
|
|
229
|
+
* () => userId(),
|
|
230
|
+
* id => {
|
|
231
|
+
* const ctrl = new AbortController();
|
|
232
|
+
* fetch(`/users/${id}`, { signal: ctrl.signal });
|
|
233
|
+
* return () => ctrl.abort(); // cleanup before next run / disposal
|
|
234
|
+
* }
|
|
235
|
+
* );
|
|
236
|
+
* ```
|
|
99
237
|
*
|
|
100
238
|
* @description https://docs.solidjs.com/reference/basic-reactivity/create-effect
|
|
101
239
|
*/
|
|
102
240
|
export declare function createEffect<T>(compute: ComputeFunction<undefined | NoInfer<T>, T>, effectFn: EffectFunction<NoInfer<T>, T> | EffectBundle<NoInfer<T>, T>, options?: EffectOptions): void;
|
|
241
|
+
/**
|
|
242
|
+
* @deprecated `createEffect(compute)` (single argument) is no longer supported.
|
|
243
|
+
* Pass a separate effect function as the second argument:
|
|
244
|
+
* `createEffect(compute, effect)`. See [MISSING_EFFECT_FN].
|
|
245
|
+
*
|
|
246
|
+
* - For a side effect that reacts to changes, split the work:
|
|
247
|
+
* `createEffect(() => signal(), value => doWork(value))`.
|
|
248
|
+
* - For a derived value, use `createMemo(() => signal())`.
|
|
249
|
+
* - For a one-shot side effect at construction time, just call the function.
|
|
250
|
+
*/
|
|
251
|
+
export declare function createEffect<T>(compute: ComputeFunction<undefined | NoInfer<T>, T>): never;
|
|
103
252
|
/**
|
|
104
253
|
* Creates a reactive computation that runs during the render phase as DOM elements
|
|
105
254
|
* are created and updated but not necessarily connected.
|
|
@@ -109,7 +258,7 @@ export declare function createEffect<T>(compute: ComputeFunction<undefined | NoI
|
|
|
109
258
|
* ```
|
|
110
259
|
* @param compute a function that receives its previous value and returns a new value used to react on a computation
|
|
111
260
|
* @param effectFn a function that receives the new value and is used to perform side effects
|
|
112
|
-
* @param options `EffectOptions` -- name, defer
|
|
261
|
+
* @param options `EffectOptions` -- name, defer, schedule
|
|
113
262
|
*
|
|
114
263
|
* @description https://docs.solidjs.com/reference/secondary-primitives/create-render-effect
|
|
115
264
|
*/
|
|
@@ -123,14 +272,27 @@ export declare function createRenderEffect<T>(compute: ComputeFunction<undefined
|
|
|
123
272
|
* state). Use only when dynamic subscription patterns require same-scope tracking.
|
|
124
273
|
*
|
|
125
274
|
* ```typescript
|
|
126
|
-
* createTrackedEffect(compute, options?:
|
|
275
|
+
* createTrackedEffect(compute, options?: { name?: string });
|
|
127
276
|
* ```
|
|
128
277
|
* @param compute a function that contains reactive reads to track and returns an optional cleanup function to run on disposal or before next execution
|
|
129
|
-
* @param options
|
|
278
|
+
* @param options -- name
|
|
279
|
+
*
|
|
280
|
+
* @example
|
|
281
|
+
* ```ts
|
|
282
|
+
* createTrackedEffect(() => {
|
|
283
|
+
* const target = focusedNode();
|
|
284
|
+
* if (!target) return;
|
|
285
|
+
*
|
|
286
|
+
* const handler = () => log(target.value());
|
|
287
|
+
* target.on("change", handler);
|
|
288
|
+
*
|
|
289
|
+
* return () => target.off("change", handler);
|
|
290
|
+
* });
|
|
291
|
+
* ```
|
|
130
292
|
*
|
|
131
293
|
* @description https://docs.solidjs.com/reference/secondary-primitives/create-tracked-effect
|
|
132
294
|
*/
|
|
133
|
-
export declare function createTrackedEffect(compute: () => void | (() => void), options?:
|
|
295
|
+
export declare function createTrackedEffect(compute: () => void | (() => void), options?: BaseEffectOptions): void;
|
|
134
296
|
/**
|
|
135
297
|
* Creates a reactive computation that runs after the render phase with flexible tracking.
|
|
136
298
|
*
|
|
@@ -141,11 +303,40 @@ export declare function createTrackedEffect(compute: () => void | (() => void),
|
|
|
141
303
|
* @param effectFn a function (or `EffectBundle`) that is called when tracked function is invalidated
|
|
142
304
|
* @param options `EffectOptions` -- name, defer
|
|
143
305
|
*
|
|
306
|
+
* @example
|
|
307
|
+
* ```ts
|
|
308
|
+
* const [count, setCount] = createSignal(0);
|
|
309
|
+
*
|
|
310
|
+
* const track = createReaction(() => {
|
|
311
|
+
* console.log("count changed once, re-arm to listen again");
|
|
312
|
+
* track(() => count()); // re-arm
|
|
313
|
+
* });
|
|
314
|
+
*
|
|
315
|
+
* track(() => count()); // initial arm
|
|
316
|
+
*
|
|
317
|
+
* setCount(1); // logs once, reaction re-armed for next change
|
|
318
|
+
* ```
|
|
319
|
+
*
|
|
144
320
|
* @description https://docs.solidjs.com/reference/secondary-primitives/create-reaction
|
|
145
321
|
*/
|
|
146
322
|
export declare function createReaction(effectFn: EffectFunction<undefined> | EffectBundle<undefined>, options?: EffectOptions): (tracking: () => void) => void;
|
|
147
323
|
/**
|
|
148
|
-
*
|
|
324
|
+
* Awaits a reactive expression and returns its first fully-settled value as a
|
|
325
|
+
* `Promise`. Pending async reads (`createMemo` returning a promise, etc.) are
|
|
326
|
+
* waited on; once the expression returns synchronously without `NotReadyError`
|
|
327
|
+
* the promise resolves with that value.
|
|
328
|
+
*
|
|
329
|
+
* Must be called *outside* a tracking scope — it doesn't subscribe, it just
|
|
330
|
+
* resolves the current value once.
|
|
331
|
+
*
|
|
332
|
+
* @example
|
|
333
|
+
* ```ts
|
|
334
|
+
* const user = createMemo(() => fetch(`/users/${id()}`).then(r => r.json()));
|
|
335
|
+
*
|
|
336
|
+
* // outside any reactive scope
|
|
337
|
+
* const initial = await resolve(() => user());
|
|
338
|
+
* ```
|
|
339
|
+
*
|
|
149
340
|
* @param fn a reactive expression to resolve
|
|
150
341
|
*/
|
|
151
342
|
export declare function resolve<T>(fn: () => T): Promise<T>;
|
|
@@ -167,20 +358,96 @@ export declare function resolve<T>(fn: () => T): Promise<T>;
|
|
|
167
358
|
*
|
|
168
359
|
* @returns `[state: Accessor<T>, setState: Setter<T>]`
|
|
169
360
|
*
|
|
361
|
+
* @example
|
|
362
|
+
* ```ts
|
|
363
|
+
* const [todos, setTodos] = createOptimistic(initialTodos);
|
|
364
|
+
*
|
|
365
|
+
* const addTodo = action(function* (text: string) {
|
|
366
|
+
* const tempId = crypto.randomUUID();
|
|
367
|
+
* setTodos(t => [...t, { id: tempId, text, pending: true }]); // optimistic
|
|
368
|
+
* const saved = yield api.createTodo(text);
|
|
369
|
+
* setTodos(t => t.map(x => (x.id === tempId ? saved : x))); // reconcile
|
|
370
|
+
* });
|
|
371
|
+
* ```
|
|
372
|
+
*
|
|
170
373
|
* @description https://docs.solidjs.com/reference/basic-reactivity/create-optimistic-signal
|
|
171
374
|
*/
|
|
172
375
|
export declare function createOptimistic<T>(): Signal<T | undefined>;
|
|
173
376
|
export declare function createOptimistic<T>(value: Exclude<T, Function>, options?: SignalOptions<T>): Signal<T>;
|
|
174
377
|
export declare function createOptimistic<T>(fn: ComputeFunction<T>, options?: SignalOptions<T> & MemoOptions<T>): Signal<T>;
|
|
175
378
|
/**
|
|
176
|
-
*
|
|
379
|
+
* Schedules `callback` to run **once** after the reactive graph has fully
|
|
380
|
+
* settled — i.e. once every pending async read inside the current owner has
|
|
381
|
+
* resolved and the queue has flushed. Each call registers a single fire; it
|
|
382
|
+
* does not create an ongoing subscription.
|
|
177
383
|
*
|
|
178
|
-
*
|
|
179
|
-
* reads - this means normal signal reads won't create subscriptions, but uninitialized
|
|
180
|
-
* async values will throw NotReadyError, causing the callback to re-run when they settle.
|
|
384
|
+
* The canonical lifecycle primitive in 2.0. Three main usages:
|
|
181
385
|
*
|
|
182
|
-
*
|
|
386
|
+
* - **Component-level setup-and-teardown** *(the most common shape)*: run
|
|
387
|
+
* setup after the component's first stable render and **return a cleanup
|
|
388
|
+
* function** to dispose it on owner disposal. This is the replacement for
|
|
389
|
+
* the 1.x `onMount` + `onCleanup` pairing — setup and teardown live in one
|
|
390
|
+
* block, and `onCleanup` is no longer the right tool for component
|
|
391
|
+
* bodies. (`onMount` no longer exists in 2.0.)
|
|
392
|
+
* - **Post-settle "ready" hook:** run once after a component's first stable
|
|
393
|
+
* render — analytics ping, focus, scroll-into-view, etc. No cleanup needed.
|
|
394
|
+
* - **Inside an event handler:** schedule work to run after the action /
|
|
395
|
+
* transition triggered by the event has completed.
|
|
396
|
+
*
|
|
397
|
+
* Reactive reads inside the callback are *not* tracked — to react to
|
|
398
|
+
* subsequent settles, register a new `onSettled` each time.
|
|
399
|
+
*
|
|
400
|
+
* `onCleanup` is **not** allowed inside the callback — return a cleanup
|
|
401
|
+
* function instead. The returned cleanup runs on owner disposal.
|
|
402
|
+
*
|
|
403
|
+
* @example
|
|
404
|
+
* ```tsx
|
|
405
|
+
* // Component-level setup + teardown — replaces onMount + onCleanup.
|
|
406
|
+
* // Subscribe to an external source on mount, unsubscribe on dispose.
|
|
407
|
+
* function useViewportWidth() {
|
|
408
|
+
* const [width, setWidth] = createSignal(window.innerWidth);
|
|
409
|
+
* onSettled(() => {
|
|
410
|
+
* const onResize = () => setWidth(window.innerWidth);
|
|
411
|
+
* window.addEventListener("resize", onResize);
|
|
412
|
+
* return () => window.removeEventListener("resize", onResize);
|
|
413
|
+
* });
|
|
414
|
+
* return width;
|
|
415
|
+
* }
|
|
416
|
+
* ```
|
|
417
|
+
*
|
|
418
|
+
* @example
|
|
419
|
+
* ```tsx
|
|
420
|
+
* // Post-settle "ready" hook — no cleanup needed.
|
|
421
|
+
* function Dashboard() {
|
|
422
|
+
* const data = createMemo(async () => fetchData());
|
|
423
|
+
*
|
|
424
|
+
* onSettled(() => {
|
|
425
|
+
* analytics.track("dashboard.ready");
|
|
426
|
+
* });
|
|
427
|
+
*
|
|
428
|
+
* return <Loading fallback={<Spinner />}><pre>{data()}</pre></Loading>;
|
|
429
|
+
* }
|
|
430
|
+
* ```
|
|
431
|
+
*
|
|
432
|
+
* @example
|
|
433
|
+
* ```tsx
|
|
434
|
+
* // Event-handler — runs after the action settles.
|
|
435
|
+
* function SaveButton() {
|
|
436
|
+
* const save = action(function* () {
|
|
437
|
+
* yield api.save();
|
|
438
|
+
* });
|
|
439
|
+
*
|
|
440
|
+
* const handleClick = () => {
|
|
441
|
+
* save();
|
|
442
|
+
* onSettled(() => toast("Saved!"));
|
|
443
|
+
* };
|
|
444
|
+
*
|
|
445
|
+
* return <button onClick={handleClick}>Save</button>;
|
|
446
|
+
* }
|
|
447
|
+
* ```
|
|
183
448
|
*
|
|
184
|
-
* @param callback Function to run
|
|
449
|
+
* @param callback Function to run; may return a cleanup function that fires
|
|
450
|
+
* on owner disposal
|
|
185
451
|
*/
|
|
186
452
|
export declare function onSettled(callback: () => void | (() => void)): void;
|
|
453
|
+
export {};
|
|
@@ -1,19 +1,45 @@
|
|
|
1
|
-
import {
|
|
1
|
+
import { type Refreshable } from "../core/index.cjs";
|
|
2
2
|
import { type NoFn, type ProjectionOptions, type Store, type StoreSetter } from "./store.cjs";
|
|
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
|
+
* 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
44
|
export declare function createOptimisticStore<T extends object = {}>(store: NoFn<T> | Store<NoFn<T>>): [get: Store<T>, set: StoreSetter<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>];
|
|
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>];
|
|
@@ -1,26 +1,66 @@
|
|
|
1
|
-
import {
|
|
1
|
+
import { type Computed, type Refreshable } from "../core/index.cjs";
|
|
2
2
|
import { type ProjectionOptions, type Store } from "./store.cjs";
|
|
3
3
|
export declare function createProjectionInternal<T extends object = {}>(fn: (draft: T) => void | T | Promise<void | T> | AsyncIterable<void | T>, seed: Partial<T>, options?: ProjectionOptions): {
|
|
4
|
-
store: Store<T
|
|
5
|
-
[$REFRESH]: any;
|
|
6
|
-
};
|
|
4
|
+
store: Refreshable<Store<T>>;
|
|
7
5
|
node: Computed<void | T>;
|
|
8
6
|
};
|
|
9
7
|
/**
|
|
10
|
-
* Creates a
|
|
11
|
-
*
|
|
8
|
+
* Creates a derived (projected) store. Like `createMemo` but for stores: the
|
|
9
|
+
* derive function receives a mutable draft and either mutates it in place
|
|
10
|
+
* (canonical) or returns a new value. Either way the result is reconciled
|
|
11
|
+
* against the previous draft by `options.key` (default `"id"`), so surviving
|
|
12
|
+
* items keep their proxy identity — only added/removed items are
|
|
13
|
+
* created/disposed.
|
|
12
14
|
*
|
|
13
|
-
*
|
|
14
|
-
*
|
|
15
|
+
* Returns the projected store directly (no setter — reads only).
|
|
16
|
+
*
|
|
17
|
+
* Use this when you want the structural-sharing / per-property tracking
|
|
18
|
+
* behaviour of a store on top of a derived computation. For simple read-only
|
|
19
|
+
* derivations, `createMemo` is lighter.
|
|
20
|
+
*
|
|
21
|
+
* @param fn receives the current draft; mutate it in place or return new
|
|
22
|
+
* data. Return is convenient for filter/derive shapes where mutation is
|
|
23
|
+
* awkward.
|
|
24
|
+
* @param seed the backing store value to wrap and reconcile into
|
|
25
|
+
* @param options `ProjectionOptions` — `name`, `key`. `key` defaults to
|
|
26
|
+
* `"id"`; specify it only when your data uses a different identity field
|
|
27
|
+
* (e.g. `{ key: "uuid" }` or `{ key: u => u.slug }`).
|
|
28
|
+
*
|
|
29
|
+
* @example
|
|
30
|
+
* ```ts
|
|
31
|
+
* // Mutation form — update individual fields on the draft.
|
|
32
|
+
* const summary = createProjection<{ total: number; active: number }>(
|
|
33
|
+
* draft => {
|
|
34
|
+
* draft.total = users().length;
|
|
35
|
+
* draft.active = users().filter(u => u.active).length;
|
|
36
|
+
* },
|
|
37
|
+
* { total: 0, active: 0 }
|
|
38
|
+
* );
|
|
39
|
+
*
|
|
40
|
+
* // Return form — produce a derived collection. Reconciled by `id` so each
|
|
41
|
+
* // surviving user keeps the same store identity across recomputes.
|
|
42
|
+
* const activeUsers = createProjection<User[]>(
|
|
43
|
+
* () => allUsers().filter(u => u.active),
|
|
44
|
+
* []
|
|
45
|
+
* );
|
|
15
46
|
* ```
|
|
16
|
-
* @param fn a function that receives the current draft and mutates it or returns new data
|
|
17
|
-
* @param seed the backing store host value to wrap and reconcile into
|
|
18
|
-
* @param options `ProjectionOptions` -- name, key, all
|
|
19
47
|
*
|
|
20
48
|
* @see {@link https://github.com/solidjs/x-reactivity#createprojection}
|
|
21
49
|
*/
|
|
22
|
-
export declare function createProjection<T extends object = {}>(fn: (draft: T) => void | T | Promise<void | T> | AsyncIterable<void | T>, seed: Partial<T>, options?: ProjectionOptions): Store<T
|
|
23
|
-
|
|
24
|
-
|
|
50
|
+
export declare function createProjection<T extends object = {}>(fn: (draft: T) => void | T | Promise<void | T> | AsyncIterable<void | T>, seed: Partial<T>, options?: ProjectionOptions): Refreshable<Store<T>>;
|
|
51
|
+
/**
|
|
52
|
+
* Shared projection computed body used by both `createProjection` and the derived
|
|
53
|
+
* form of `createOptimisticStore`. Encapsulates the write-trap draft, `storeSetter`
|
|
54
|
+
* wrapping, the `handleAsync` subscription with a setter callback, and the commit
|
|
55
|
+
* path (which must always go through `storeSetter` so the `writeOnly` guard is
|
|
56
|
+
* engaged during `reconcile`'s property reads).
|
|
57
|
+
*
|
|
58
|
+
* `wrapCommit` is invoked for every commit (sync return and each async yield) and
|
|
59
|
+
* lets callers layer extra context around the write — e.g. the optimistic store
|
|
60
|
+
* re-enters `setProjectionWriteActive` so reconciles target `STORE_OVERRIDE`
|
|
61
|
+
* instead of `STORE_OPTIMISTIC_OVERRIDE` even when an async yield fires outside
|
|
62
|
+
* the outer `setProjectionWriteActive` scope.
|
|
63
|
+
*/
|
|
64
|
+
export declare function runProjectionComputed<T extends object>(wrappedStore: Store<T>, fn: (draft: T) => void | T | Promise<void | T> | AsyncIterable<void | T>, key: string | ((item: NonNullable<any>) => any), wrapCommit?: (write: () => void) => void): Computed<void | T>;
|
|
25
65
|
export declare function createWriteTraps(isActive?: () => boolean): ProxyHandler<any>;
|
|
26
66
|
export declare const writeTraps: ProxyHandler<any>;
|
|
@@ -1 +1,23 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* Returns a draft-mutating function that smart-merges `value` into a store,
|
|
3
|
+
* preserving the identity of items whose `key` field matches between old and
|
|
4
|
+
* new states. Useful when applying server payloads or full-replacement data
|
|
5
|
+
* onto an existing store without losing fine-grained reactivity.
|
|
6
|
+
*
|
|
7
|
+
* Items with the same key are updated in place (only changed properties
|
|
8
|
+
* trigger updates). Items added or removed update the corresponding signals.
|
|
9
|
+
*
|
|
10
|
+
* @param value the next state to merge in
|
|
11
|
+
* @param key property name (string) or extractor function for stable identity
|
|
12
|
+
*
|
|
13
|
+
* @example
|
|
14
|
+
* ```ts
|
|
15
|
+
* const [todos, setTodos] = createStore<Todo[]>([]);
|
|
16
|
+
*
|
|
17
|
+
* async function refresh() {
|
|
18
|
+
* const fresh = await api.getTodos();
|
|
19
|
+
* setTodos(reconcile(fresh, "id")); // diff-merge by `id`
|
|
20
|
+
* }
|
|
21
|
+
* ```
|
|
22
|
+
*/
|
|
1
23
|
export declare function reconcile<T extends U, U>(value: T, key: string | ((item: NonNullable<any>) => any)): (state: U) => void;
|