@bromscandium/core 1.0.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/LICENSE +21 -0
- package/README.md +59 -0
- package/dist/dep.d.ts +81 -0
- package/dist/dep.d.ts.map +1 -0
- package/dist/dep.js +119 -0
- package/dist/dep.js.map +1 -0
- package/dist/effect.d.ts +131 -0
- package/dist/effect.d.ts.map +1 -0
- package/dist/effect.js +188 -0
- package/dist/effect.js.map +1 -0
- package/dist/index.d.ts +5 -0
- package/dist/index.d.ts.map +1 -0
- package/dist/index.js +6 -0
- package/dist/index.js.map +1 -0
- package/dist/reactive.d.ts +72 -0
- package/dist/reactive.d.ts.map +1 -0
- package/dist/reactive.js +138 -0
- package/dist/reactive.js.map +1 -0
- package/dist/ref.d.ts +132 -0
- package/dist/ref.d.ts.map +1 -0
- package/dist/ref.js +181 -0
- package/dist/ref.js.map +1 -0
- package/package.json +38 -0
- package/src/dep.d.ts +81 -0
- package/src/dep.d.ts.map +1 -0
- package/src/dep.js +119 -0
- package/src/dep.js.map +1 -0
- package/src/dep.ts +148 -0
- package/src/effect.d.ts +131 -0
- package/src/effect.d.ts.map +1 -0
- package/src/effect.js +188 -0
- package/src/effect.js.map +1 -0
- package/src/effect.ts +263 -0
- package/src/index.d.ts +5 -0
- package/src/index.d.ts.map +1 -0
- package/src/index.js +6 -0
- package/src/index.js.map +1 -0
- package/src/index.ts +38 -0
- package/src/reactive.d.ts +72 -0
- package/src/reactive.d.ts.map +1 -0
- package/src/reactive.js +138 -0
- package/src/reactive.js.map +1 -0
- package/src/reactive.ts +162 -0
- package/src/ref.d.ts +132 -0
- package/src/ref.d.ts.map +1 -0
- package/src/ref.js +181 -0
- package/src/ref.js.map +1 -0
- package/src/ref.ts +243 -0
package/src/dep.js
ADDED
|
@@ -0,0 +1,119 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* Dependency tracking system for reactive state management.
|
|
3
|
+
* Uses WeakMap for automatic garbage collection of unused dependencies.
|
|
4
|
+
* @module
|
|
5
|
+
*/
|
|
6
|
+
const targetMap = new WeakMap();
|
|
7
|
+
let activeEffect = null;
|
|
8
|
+
const effectStack = [];
|
|
9
|
+
/**
|
|
10
|
+
* Returns the currently executing effect, if any.
|
|
11
|
+
*
|
|
12
|
+
* @returns The active effect function or null if no effect is running
|
|
13
|
+
*/
|
|
14
|
+
export function getActiveEffect() {
|
|
15
|
+
return activeEffect;
|
|
16
|
+
}
|
|
17
|
+
/**
|
|
18
|
+
* Sets the currently active effect.
|
|
19
|
+
*
|
|
20
|
+
* @param effect - The effect to set as active, or null to clear
|
|
21
|
+
*/
|
|
22
|
+
export function setActiveEffect(effect) {
|
|
23
|
+
activeEffect = effect;
|
|
24
|
+
}
|
|
25
|
+
/**
|
|
26
|
+
* Pushes an effect onto the effect stack and sets it as active.
|
|
27
|
+
* Used internally when running nested effects.
|
|
28
|
+
*
|
|
29
|
+
* @param effect - The effect to push onto the stack
|
|
30
|
+
*/
|
|
31
|
+
export function pushEffect(effect) {
|
|
32
|
+
effectStack.push(effect);
|
|
33
|
+
activeEffect = effect;
|
|
34
|
+
}
|
|
35
|
+
/**
|
|
36
|
+
* Pops the current effect from the stack and restores the previous active effect.
|
|
37
|
+
* Used internally when a nested effect completes.
|
|
38
|
+
*/
|
|
39
|
+
export function popEffect() {
|
|
40
|
+
effectStack.pop();
|
|
41
|
+
activeEffect = effectStack[effectStack.length - 1] || null;
|
|
42
|
+
}
|
|
43
|
+
/**
|
|
44
|
+
* Tracks a dependency between the currently active effect and a reactive property.
|
|
45
|
+
* Called automatically when a reactive property is accessed during effect execution.
|
|
46
|
+
*
|
|
47
|
+
* @param target - The reactive object being accessed
|
|
48
|
+
* @param key - The property key being accessed
|
|
49
|
+
*
|
|
50
|
+
* @example
|
|
51
|
+
* ```ts
|
|
52
|
+
* // Typically called internally by reactive proxies
|
|
53
|
+
* track(state, 'count');
|
|
54
|
+
* ```
|
|
55
|
+
*/
|
|
56
|
+
export function track(target, key) {
|
|
57
|
+
if (!activeEffect)
|
|
58
|
+
return;
|
|
59
|
+
let depsMap = targetMap.get(target);
|
|
60
|
+
if (!depsMap) {
|
|
61
|
+
targetMap.set(target, (depsMap = new Map()));
|
|
62
|
+
}
|
|
63
|
+
let deps = depsMap.get(key);
|
|
64
|
+
if (!deps) {
|
|
65
|
+
depsMap.set(key, (deps = new Set()));
|
|
66
|
+
}
|
|
67
|
+
if (!deps.has(activeEffect)) {
|
|
68
|
+
deps.add(activeEffect);
|
|
69
|
+
activeEffect.deps.add(deps);
|
|
70
|
+
}
|
|
71
|
+
}
|
|
72
|
+
/**
|
|
73
|
+
* Triggers all effects that depend on a reactive property.
|
|
74
|
+
* Called automatically when a reactive property is modified.
|
|
75
|
+
*
|
|
76
|
+
* @param target - The reactive object being modified
|
|
77
|
+
* @param key - The property key being modified
|
|
78
|
+
*
|
|
79
|
+
* @example
|
|
80
|
+
* ```ts
|
|
81
|
+
* // Typically called internally by reactive proxies
|
|
82
|
+
* trigger(state, 'count');
|
|
83
|
+
* ```
|
|
84
|
+
*/
|
|
85
|
+
export function trigger(target, key) {
|
|
86
|
+
const depsMap = targetMap.get(target);
|
|
87
|
+
if (!depsMap)
|
|
88
|
+
return;
|
|
89
|
+
const deps = depsMap.get(key);
|
|
90
|
+
if (!deps)
|
|
91
|
+
return;
|
|
92
|
+
const effectsToRun = new Set();
|
|
93
|
+
deps.forEach(effect => {
|
|
94
|
+
if (effect !== activeEffect) {
|
|
95
|
+
effectsToRun.add(effect);
|
|
96
|
+
}
|
|
97
|
+
});
|
|
98
|
+
effectsToRun.forEach(effect => {
|
|
99
|
+
if (effect.options?.scheduler) {
|
|
100
|
+
effect.options.scheduler(effect);
|
|
101
|
+
}
|
|
102
|
+
else {
|
|
103
|
+
effect();
|
|
104
|
+
}
|
|
105
|
+
});
|
|
106
|
+
}
|
|
107
|
+
/**
|
|
108
|
+
* Removes an effect from all its dependency sets.
|
|
109
|
+
* Called before re-running an effect to ensure fresh dependency tracking.
|
|
110
|
+
*
|
|
111
|
+
* @param effect - The effect to clean up
|
|
112
|
+
*/
|
|
113
|
+
export function cleanup(effect) {
|
|
114
|
+
effect.deps.forEach(deps => {
|
|
115
|
+
deps.delete(effect);
|
|
116
|
+
});
|
|
117
|
+
effect.deps.clear();
|
|
118
|
+
}
|
|
119
|
+
//# sourceMappingURL=dep.js.map
|
package/src/dep.js.map
ADDED
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"dep.js","sourceRoot":"","sources":["dep.ts"],"names":[],"mappings":"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"}
|
package/src/dep.ts
ADDED
|
@@ -0,0 +1,148 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* Dependency tracking system for reactive state management.
|
|
3
|
+
* Uses WeakMap for automatic garbage collection of unused dependencies.
|
|
4
|
+
* @module
|
|
5
|
+
*/
|
|
6
|
+
|
|
7
|
+
/**
|
|
8
|
+
* An effect function that can be tracked and re-executed when dependencies change.
|
|
9
|
+
*/
|
|
10
|
+
export type EffectFn = (() => void) & {
|
|
11
|
+
deps: Set<Set<EffectFn>>;
|
|
12
|
+
options?: EffectOptions;
|
|
13
|
+
};
|
|
14
|
+
|
|
15
|
+
/**
|
|
16
|
+
* Configuration options for reactive effects.
|
|
17
|
+
*/
|
|
18
|
+
export interface EffectOptions {
|
|
19
|
+
/** If true, the effect will not run immediately upon creation */
|
|
20
|
+
lazy?: boolean;
|
|
21
|
+
/** Custom scheduler function to control when the effect runs */
|
|
22
|
+
scheduler?: (fn: EffectFn) => void;
|
|
23
|
+
}
|
|
24
|
+
|
|
25
|
+
const targetMap = new WeakMap<object, Map<string | symbol, Set<EffectFn>>>();
|
|
26
|
+
|
|
27
|
+
let activeEffect: EffectFn | null = null;
|
|
28
|
+
const effectStack: EffectFn[] = [];
|
|
29
|
+
|
|
30
|
+
/**
|
|
31
|
+
* Returns the currently executing effect, if any.
|
|
32
|
+
*
|
|
33
|
+
* @returns The active effect function or null if no effect is running
|
|
34
|
+
*/
|
|
35
|
+
export function getActiveEffect(): EffectFn | null {
|
|
36
|
+
return activeEffect;
|
|
37
|
+
}
|
|
38
|
+
|
|
39
|
+
/**
|
|
40
|
+
* Sets the currently active effect.
|
|
41
|
+
*
|
|
42
|
+
* @param effect - The effect to set as active, or null to clear
|
|
43
|
+
*/
|
|
44
|
+
export function setActiveEffect(effect: EffectFn | null): void {
|
|
45
|
+
activeEffect = effect;
|
|
46
|
+
}
|
|
47
|
+
|
|
48
|
+
/**
|
|
49
|
+
* Pushes an effect onto the effect stack and sets it as active.
|
|
50
|
+
* Used internally when running nested effects.
|
|
51
|
+
*
|
|
52
|
+
* @param effect - The effect to push onto the stack
|
|
53
|
+
*/
|
|
54
|
+
export function pushEffect(effect: EffectFn): void {
|
|
55
|
+
effectStack.push(effect);
|
|
56
|
+
activeEffect = effect;
|
|
57
|
+
}
|
|
58
|
+
|
|
59
|
+
/**
|
|
60
|
+
* Pops the current effect from the stack and restores the previous active effect.
|
|
61
|
+
* Used internally when a nested effect completes.
|
|
62
|
+
*/
|
|
63
|
+
export function popEffect(): void {
|
|
64
|
+
effectStack.pop();
|
|
65
|
+
activeEffect = effectStack[effectStack.length - 1] || null;
|
|
66
|
+
}
|
|
67
|
+
|
|
68
|
+
/**
|
|
69
|
+
* Tracks a dependency between the currently active effect and a reactive property.
|
|
70
|
+
* Called automatically when a reactive property is accessed during effect execution.
|
|
71
|
+
*
|
|
72
|
+
* @param target - The reactive object being accessed
|
|
73
|
+
* @param key - The property key being accessed
|
|
74
|
+
*
|
|
75
|
+
* @example
|
|
76
|
+
* ```ts
|
|
77
|
+
* // Typically called internally by reactive proxies
|
|
78
|
+
* track(state, 'count');
|
|
79
|
+
* ```
|
|
80
|
+
*/
|
|
81
|
+
export function track(target: object, key: string | symbol): void {
|
|
82
|
+
if (!activeEffect) return;
|
|
83
|
+
|
|
84
|
+
let depsMap = targetMap.get(target);
|
|
85
|
+
if (!depsMap) {
|
|
86
|
+
targetMap.set(target, (depsMap = new Map()));
|
|
87
|
+
}
|
|
88
|
+
|
|
89
|
+
let deps = depsMap.get(key);
|
|
90
|
+
if (!deps) {
|
|
91
|
+
depsMap.set(key, (deps = new Set()));
|
|
92
|
+
}
|
|
93
|
+
|
|
94
|
+
if (!deps.has(activeEffect)) {
|
|
95
|
+
deps.add(activeEffect);
|
|
96
|
+
activeEffect.deps.add(deps);
|
|
97
|
+
}
|
|
98
|
+
}
|
|
99
|
+
|
|
100
|
+
/**
|
|
101
|
+
* Triggers all effects that depend on a reactive property.
|
|
102
|
+
* Called automatically when a reactive property is modified.
|
|
103
|
+
*
|
|
104
|
+
* @param target - The reactive object being modified
|
|
105
|
+
* @param key - The property key being modified
|
|
106
|
+
*
|
|
107
|
+
* @example
|
|
108
|
+
* ```ts
|
|
109
|
+
* // Typically called internally by reactive proxies
|
|
110
|
+
* trigger(state, 'count');
|
|
111
|
+
* ```
|
|
112
|
+
*/
|
|
113
|
+
export function trigger(target: object, key: string | symbol): void {
|
|
114
|
+
const depsMap = targetMap.get(target);
|
|
115
|
+
if (!depsMap) return;
|
|
116
|
+
|
|
117
|
+
const deps = depsMap.get(key);
|
|
118
|
+
if (!deps) return;
|
|
119
|
+
|
|
120
|
+
const effectsToRun = new Set<EffectFn>();
|
|
121
|
+
|
|
122
|
+
deps.forEach(effect => {
|
|
123
|
+
if (effect !== activeEffect) {
|
|
124
|
+
effectsToRun.add(effect);
|
|
125
|
+
}
|
|
126
|
+
});
|
|
127
|
+
|
|
128
|
+
effectsToRun.forEach(effect => {
|
|
129
|
+
if (effect.options?.scheduler) {
|
|
130
|
+
effect.options.scheduler(effect);
|
|
131
|
+
} else {
|
|
132
|
+
effect();
|
|
133
|
+
}
|
|
134
|
+
});
|
|
135
|
+
}
|
|
136
|
+
|
|
137
|
+
/**
|
|
138
|
+
* Removes an effect from all its dependency sets.
|
|
139
|
+
* Called before re-running an effect to ensure fresh dependency tracking.
|
|
140
|
+
*
|
|
141
|
+
* @param effect - The effect to clean up
|
|
142
|
+
*/
|
|
143
|
+
export function cleanup(effect: EffectFn): void {
|
|
144
|
+
effect.deps.forEach(deps => {
|
|
145
|
+
deps.delete(effect);
|
|
146
|
+
});
|
|
147
|
+
effect.deps.clear();
|
|
148
|
+
}
|
package/src/effect.d.ts
ADDED
|
@@ -0,0 +1,131 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* Effect system for reactive side effects, computed values, and watchers.
|
|
3
|
+
* @module
|
|
4
|
+
*/
|
|
5
|
+
import { EffectFn, EffectOptions } from './dep.js';
|
|
6
|
+
import { Ref, ComputedRef } from './ref.js';
|
|
7
|
+
interface ReactiveEffect<T = any> extends EffectFn {
|
|
8
|
+
(): T;
|
|
9
|
+
}
|
|
10
|
+
/**
|
|
11
|
+
* Creates a reactive effect that automatically tracks dependencies and re-runs when they change.
|
|
12
|
+
*
|
|
13
|
+
* @param fn - The effect function to run
|
|
14
|
+
* @param options - Configuration options for the effect
|
|
15
|
+
* @returns The effect function, which can be called manually or used for cleanup
|
|
16
|
+
*
|
|
17
|
+
* @example
|
|
18
|
+
* ```ts
|
|
19
|
+
* const count = ref(0);
|
|
20
|
+
*
|
|
21
|
+
* // Runs immediately and re-runs when count changes
|
|
22
|
+
* effect(() => {
|
|
23
|
+
* console.log('Count is:', count.value);
|
|
24
|
+
* });
|
|
25
|
+
*
|
|
26
|
+
* // Lazy effect with custom scheduler
|
|
27
|
+
* const runner = effect(() => count.value * 2, {
|
|
28
|
+
* lazy: true,
|
|
29
|
+
* scheduler: (fn) => queueMicrotask(fn)
|
|
30
|
+
* });
|
|
31
|
+
* ```
|
|
32
|
+
*/
|
|
33
|
+
export declare function effect(fn: () => void, options?: EffectOptions): EffectFn;
|
|
34
|
+
export declare function effect<T>(fn: () => T, options?: EffectOptions): ReactiveEffect<T>;
|
|
35
|
+
/**
|
|
36
|
+
* Creates a computed ref that derives its value from other reactive state.
|
|
37
|
+
* The value is lazily evaluated and cached until dependencies change.
|
|
38
|
+
*
|
|
39
|
+
* @param getter - A function that computes the value from reactive sources
|
|
40
|
+
* @returns A read-only ref containing the computed value
|
|
41
|
+
*
|
|
42
|
+
* @example
|
|
43
|
+
* ```ts
|
|
44
|
+
* const count = ref(0);
|
|
45
|
+
* const doubled = computed(() => count.value * 2);
|
|
46
|
+
*
|
|
47
|
+
* console.log(doubled.value); // 0
|
|
48
|
+
* count.value = 5;
|
|
49
|
+
* console.log(doubled.value); // 10
|
|
50
|
+
* ```
|
|
51
|
+
*/
|
|
52
|
+
export declare function computed<T>(getter: () => T): ComputedRef<T>;
|
|
53
|
+
/** A watch source can be either a ref or a getter function */
|
|
54
|
+
type WatchSource<T> = Ref<T> | (() => T);
|
|
55
|
+
/** Callback invoked when a watched source changes */
|
|
56
|
+
type WatchCallback<T> = (newValue: T, oldValue: T | undefined) => void;
|
|
57
|
+
/**
|
|
58
|
+
* Configuration options for the watch function.
|
|
59
|
+
*/
|
|
60
|
+
interface WatchOptions {
|
|
61
|
+
/** If true, the callback is invoked immediately with the current value */
|
|
62
|
+
immediate?: boolean;
|
|
63
|
+
/** If true, deeply watches nested object properties (not yet implemented) */
|
|
64
|
+
deep?: boolean;
|
|
65
|
+
}
|
|
66
|
+
/**
|
|
67
|
+
* Watches a reactive source and invokes a callback when it changes.
|
|
68
|
+
*
|
|
69
|
+
* @param source - A ref or getter function to watch
|
|
70
|
+
* @param callback - Function called with new and old values when the source changes
|
|
71
|
+
* @param options - Configuration options
|
|
72
|
+
* @returns A function to stop watching
|
|
73
|
+
*
|
|
74
|
+
* @example
|
|
75
|
+
* ```ts
|
|
76
|
+
* const count = ref(0);
|
|
77
|
+
*
|
|
78
|
+
* // Watch a ref
|
|
79
|
+
* const stop = watch(count, (newVal, oldVal) => {
|
|
80
|
+
* console.log(`Changed from ${oldVal} to ${newVal}`);
|
|
81
|
+
* });
|
|
82
|
+
*
|
|
83
|
+
* // Watch a getter
|
|
84
|
+
* watch(() => state.nested.value, (newVal) => {
|
|
85
|
+
* console.log('Nested value changed:', newVal);
|
|
86
|
+
* });
|
|
87
|
+
*
|
|
88
|
+
* // With immediate option
|
|
89
|
+
* watch(count, callback, { immediate: true });
|
|
90
|
+
*
|
|
91
|
+
* stop(); // Stop watching
|
|
92
|
+
* ```
|
|
93
|
+
*/
|
|
94
|
+
export declare function watch<T>(source: WatchSource<T>, callback: WatchCallback<T>, options?: WatchOptions): () => void;
|
|
95
|
+
/**
|
|
96
|
+
* Runs a function immediately and re-runs it whenever its reactive dependencies change.
|
|
97
|
+
* Similar to `effect()` but returns a cleanup function instead of the effect.
|
|
98
|
+
*
|
|
99
|
+
* @param fn - The effect function to run
|
|
100
|
+
* @returns A function to stop the effect
|
|
101
|
+
*
|
|
102
|
+
* @example
|
|
103
|
+
* ```ts
|
|
104
|
+
* const count = ref(0);
|
|
105
|
+
*
|
|
106
|
+
* const stop = watchEffect(() => {
|
|
107
|
+
* console.log('Count:', count.value);
|
|
108
|
+
* });
|
|
109
|
+
*
|
|
110
|
+
* count.value++; // Logs: "Count: 1"
|
|
111
|
+
* stop(); // Stop watching
|
|
112
|
+
* count.value++; // No log
|
|
113
|
+
* ```
|
|
114
|
+
*/
|
|
115
|
+
export declare function watchEffect(fn: () => void): () => void;
|
|
116
|
+
/**
|
|
117
|
+
* Queues an effect to run in the next microtask, batching multiple updates.
|
|
118
|
+
* Effects queued multiple times before flush will only run once.
|
|
119
|
+
*
|
|
120
|
+
* @param job - The effect function to queue
|
|
121
|
+
*
|
|
122
|
+
* @example
|
|
123
|
+
* ```ts
|
|
124
|
+
* const updateEffect = effect(() => render(), {
|
|
125
|
+
* scheduler: queueJob
|
|
126
|
+
* });
|
|
127
|
+
* ```
|
|
128
|
+
*/
|
|
129
|
+
export declare function queueJob(job: EffectFn): void;
|
|
130
|
+
export {};
|
|
131
|
+
//# sourceMappingURL=effect.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"effect.d.ts","sourceRoot":"","sources":["effect.ts"],"names":[],"mappings":"AAAA;;;GAGG;AAEH,OAAO,EACL,QAAQ,EACR,aAAa,EAOd,MAAM,UAAU,CAAC;AAClB,OAAO,EAAE,GAAG,EAAS,WAAW,EAAW,MAAM,UAAU,CAAC;AAY5D,UAAU,cAAc,CAAC,CAAC,GAAG,GAAG,CAAE,SAAQ,QAAQ;IAChD,IAAI,CAAC,CAAC;CACP;AAED;;;;;;;;;;;;;;;;;;;;;;GAsBG;AACH,wBAAgB,MAAM,CAAC,EAAE,EAAE,MAAM,IAAI,EAAE,OAAO,CAAC,EAAE,aAAa,GAAG,QAAQ,CAAC;AAC1E,wBAAgB,MAAM,CAAC,CAAC,EAAE,EAAE,EAAE,MAAM,CAAC,EAAE,OAAO,CAAC,EAAE,aAAa,GAAG,cAAc,CAAC,CAAC,CAAC,CAAC;AAkDnF;;;;;;;;;;;;;;;;GAgBG;AACH,wBAAgB,QAAQ,CAAC,CAAC,EAAE,MAAM,EAAE,MAAM,CAAC,GAAG,WAAW,CAAC,CAAC,CAAC,CAE3D;AAED,8DAA8D;AAC9D,KAAK,WAAW,CAAC,CAAC,IAAI,GAAG,CAAC,CAAC,CAAC,GAAG,CAAC,MAAM,CAAC,CAAC,CAAC;AAEzC,qDAAqD;AACrD,KAAK,aAAa,CAAC,CAAC,IAAI,CAAC,QAAQ,EAAE,CAAC,EAAE,QAAQ,EAAE,CAAC,GAAG,SAAS,KAAK,IAAI,CAAC;AAEvE;;GAEG;AACH,UAAU,YAAY;IACpB,0EAA0E;IAC1E,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,6EAA6E;IAC7E,IAAI,CAAC,EAAE,OAAO,CAAC;CAChB;AAED;;;;;;;;;;;;;;;;;;;;;;;;;;;GA2BG;AACH,wBAAgB,KAAK,CAAC,CAAC,EACrB,MAAM,EAAE,WAAW,CAAC,CAAC,CAAC,EACtB,QAAQ,EAAE,aAAa,CAAC,CAAC,CAAC,EAC1B,OAAO,CAAC,EAAE,YAAY,GACrB,MAAM,IAAI,CAiCZ;AAED;;;;;;;;;;;;;;;;;;;GAmBG;AACH,wBAAgB,WAAW,CAAC,EAAE,EAAE,MAAM,IAAI,GAAG,MAAM,IAAI,CAGtD;AAKD;;;;;;;;;;;;GAYG;AACH,wBAAgB,QAAQ,CAAC,GAAG,EAAE,QAAQ,GAAG,IAAI,CAM5C"}
|
package/src/effect.js
ADDED
|
@@ -0,0 +1,188 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* Effect system for reactive side effects, computed values, and watchers.
|
|
3
|
+
* @module
|
|
4
|
+
*/
|
|
5
|
+
var _a;
|
|
6
|
+
import { cleanup, pushEffect, popEffect, track, trigger, getActiveEffect, } from './dep.js';
|
|
7
|
+
import { isRef, RefFlag } from './ref.js';
|
|
8
|
+
function trackComputed(computed) {
|
|
9
|
+
if (getActiveEffect()) {
|
|
10
|
+
track(computed, 'value');
|
|
11
|
+
}
|
|
12
|
+
}
|
|
13
|
+
function triggerComputed(computed) {
|
|
14
|
+
trigger(computed, 'value');
|
|
15
|
+
}
|
|
16
|
+
export function effect(fn, options) {
|
|
17
|
+
const effectFn = () => {
|
|
18
|
+
cleanup(effectFn);
|
|
19
|
+
pushEffect(effectFn);
|
|
20
|
+
try {
|
|
21
|
+
return fn();
|
|
22
|
+
}
|
|
23
|
+
finally {
|
|
24
|
+
popEffect();
|
|
25
|
+
}
|
|
26
|
+
};
|
|
27
|
+
effectFn.deps = new Set();
|
|
28
|
+
effectFn.options = options;
|
|
29
|
+
if (!options?.lazy) {
|
|
30
|
+
effectFn();
|
|
31
|
+
}
|
|
32
|
+
return effectFn;
|
|
33
|
+
}
|
|
34
|
+
class ComputedRefImpl {
|
|
35
|
+
constructor(getter) {
|
|
36
|
+
this._dirty = true;
|
|
37
|
+
this[_a] = true;
|
|
38
|
+
this._effect = effect(getter, {
|
|
39
|
+
lazy: true,
|
|
40
|
+
scheduler: () => {
|
|
41
|
+
if (!this._dirty) {
|
|
42
|
+
this._dirty = true;
|
|
43
|
+
triggerComputed(this);
|
|
44
|
+
}
|
|
45
|
+
},
|
|
46
|
+
});
|
|
47
|
+
}
|
|
48
|
+
get value() {
|
|
49
|
+
trackComputed(this);
|
|
50
|
+
if (this._dirty) {
|
|
51
|
+
this._value = this._effect();
|
|
52
|
+
this._dirty = false;
|
|
53
|
+
}
|
|
54
|
+
return this._value;
|
|
55
|
+
}
|
|
56
|
+
}
|
|
57
|
+
_a = RefFlag;
|
|
58
|
+
/**
|
|
59
|
+
* Creates a computed ref that derives its value from other reactive state.
|
|
60
|
+
* The value is lazily evaluated and cached until dependencies change.
|
|
61
|
+
*
|
|
62
|
+
* @param getter - A function that computes the value from reactive sources
|
|
63
|
+
* @returns A read-only ref containing the computed value
|
|
64
|
+
*
|
|
65
|
+
* @example
|
|
66
|
+
* ```ts
|
|
67
|
+
* const count = ref(0);
|
|
68
|
+
* const doubled = computed(() => count.value * 2);
|
|
69
|
+
*
|
|
70
|
+
* console.log(doubled.value); // 0
|
|
71
|
+
* count.value = 5;
|
|
72
|
+
* console.log(doubled.value); // 10
|
|
73
|
+
* ```
|
|
74
|
+
*/
|
|
75
|
+
export function computed(getter) {
|
|
76
|
+
return new ComputedRefImpl(getter);
|
|
77
|
+
}
|
|
78
|
+
/**
|
|
79
|
+
* Watches a reactive source and invokes a callback when it changes.
|
|
80
|
+
*
|
|
81
|
+
* @param source - A ref or getter function to watch
|
|
82
|
+
* @param callback - Function called with new and old values when the source changes
|
|
83
|
+
* @param options - Configuration options
|
|
84
|
+
* @returns A function to stop watching
|
|
85
|
+
*
|
|
86
|
+
* @example
|
|
87
|
+
* ```ts
|
|
88
|
+
* const count = ref(0);
|
|
89
|
+
*
|
|
90
|
+
* // Watch a ref
|
|
91
|
+
* const stop = watch(count, (newVal, oldVal) => {
|
|
92
|
+
* console.log(`Changed from ${oldVal} to ${newVal}`);
|
|
93
|
+
* });
|
|
94
|
+
*
|
|
95
|
+
* // Watch a getter
|
|
96
|
+
* watch(() => state.nested.value, (newVal) => {
|
|
97
|
+
* console.log('Nested value changed:', newVal);
|
|
98
|
+
* });
|
|
99
|
+
*
|
|
100
|
+
* // With immediate option
|
|
101
|
+
* watch(count, callback, { immediate: true });
|
|
102
|
+
*
|
|
103
|
+
* stop(); // Stop watching
|
|
104
|
+
* ```
|
|
105
|
+
*/
|
|
106
|
+
export function watch(source, callback, options) {
|
|
107
|
+
let getter;
|
|
108
|
+
if (isRef(source)) {
|
|
109
|
+
getter = () => source.value;
|
|
110
|
+
}
|
|
111
|
+
else if (typeof source === 'function') {
|
|
112
|
+
getter = source;
|
|
113
|
+
}
|
|
114
|
+
else {
|
|
115
|
+
getter = () => source;
|
|
116
|
+
}
|
|
117
|
+
let oldValue;
|
|
118
|
+
const job = () => {
|
|
119
|
+
const newValue = runEffect();
|
|
120
|
+
callback(newValue, oldValue);
|
|
121
|
+
oldValue = newValue;
|
|
122
|
+
};
|
|
123
|
+
const runEffect = effect(getter, {
|
|
124
|
+
lazy: true,
|
|
125
|
+
scheduler: job,
|
|
126
|
+
});
|
|
127
|
+
if (options?.immediate) {
|
|
128
|
+
job();
|
|
129
|
+
}
|
|
130
|
+
else {
|
|
131
|
+
oldValue = runEffect();
|
|
132
|
+
}
|
|
133
|
+
return () => {
|
|
134
|
+
cleanup(runEffect);
|
|
135
|
+
};
|
|
136
|
+
}
|
|
137
|
+
/**
|
|
138
|
+
* Runs a function immediately and re-runs it whenever its reactive dependencies change.
|
|
139
|
+
* Similar to `effect()` but returns a cleanup function instead of the effect.
|
|
140
|
+
*
|
|
141
|
+
* @param fn - The effect function to run
|
|
142
|
+
* @returns A function to stop the effect
|
|
143
|
+
*
|
|
144
|
+
* @example
|
|
145
|
+
* ```ts
|
|
146
|
+
* const count = ref(0);
|
|
147
|
+
*
|
|
148
|
+
* const stop = watchEffect(() => {
|
|
149
|
+
* console.log('Count:', count.value);
|
|
150
|
+
* });
|
|
151
|
+
*
|
|
152
|
+
* count.value++; // Logs: "Count: 1"
|
|
153
|
+
* stop(); // Stop watching
|
|
154
|
+
* count.value++; // No log
|
|
155
|
+
* ```
|
|
156
|
+
*/
|
|
157
|
+
export function watchEffect(fn) {
|
|
158
|
+
const effectFn = effect(fn);
|
|
159
|
+
return () => cleanup(effectFn);
|
|
160
|
+
}
|
|
161
|
+
let isFlushing = false;
|
|
162
|
+
const pendingJobs = new Set();
|
|
163
|
+
/**
|
|
164
|
+
* Queues an effect to run in the next microtask, batching multiple updates.
|
|
165
|
+
* Effects queued multiple times before flush will only run once.
|
|
166
|
+
*
|
|
167
|
+
* @param job - The effect function to queue
|
|
168
|
+
*
|
|
169
|
+
* @example
|
|
170
|
+
* ```ts
|
|
171
|
+
* const updateEffect = effect(() => render(), {
|
|
172
|
+
* scheduler: queueJob
|
|
173
|
+
* });
|
|
174
|
+
* ```
|
|
175
|
+
*/
|
|
176
|
+
export function queueJob(job) {
|
|
177
|
+
pendingJobs.add(job);
|
|
178
|
+
if (!isFlushing) {
|
|
179
|
+
isFlushing = true;
|
|
180
|
+
Promise.resolve().then(flushJobs);
|
|
181
|
+
}
|
|
182
|
+
}
|
|
183
|
+
function flushJobs() {
|
|
184
|
+
pendingJobs.forEach(job => job());
|
|
185
|
+
pendingJobs.clear();
|
|
186
|
+
isFlushing = false;
|
|
187
|
+
}
|
|
188
|
+
//# sourceMappingURL=effect.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"effect.js","sourceRoot":"","sources":["effect.ts"],"names":[],"mappings":"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"}
|