Skip to content

Commit 0f86f59

Browse files
johnsoncodehkjohnsoncodehk
committed
refactor: redo #88 
1 parent 187577d commit 0f86f59

File tree

4 files changed

+63
-80
lines changed

4 files changed

+63
-80
lines changed

‎build.js‎

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -24,6 +24,17 @@ const typesProgram = ts.createProgram({
2424
emitDeclarationOnly: true,
2525
},
2626
});
27+
28+
const readFile = ts.sys.readFile;
29+
ts.sys.readFile = (fileName) => {
30+
if (path.basename(fileName) === 'system.ts') {
31+
return readFile(fileName)
32+
.replace(`export const enum ReactiveFlags {`, `export const ReactiveFlags = {`)
33+
.replace(/(\w+) = (\d+),/g, `$1: $2,`);
34+
}
35+
return readFile(fileName);
36+
}
37+
2738
const cjsProgram = ts.createProgram({
2839
rootNames: config.fileNames,
2940
configFileParsingDiagnostics: config.errors,

‎src/flags.ts‎

Lines changed: 0 additions & 10 deletions
This file was deleted.

‎src/index.ts‎

Lines changed: 25 additions & 26 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,4 @@
1-
import { ReactiveFlags as Flags } from './flags.js';
2-
import { createReactiveSystem, type ReactiveNode } from './system.js';
1+
import { createReactiveSystem, ReactiveFlags, type ReactiveNode } from './system.js';
32

43
interface Effect extends ReactiveNode {
54
fn(): void;
@@ -41,10 +40,10 @@ const {
4140
let firstInsertedIndex = insertIndex;
4241

4342
do {
44-
effect.flags &= ~Flags.Watching;
43+
effect.flags &= ~ReactiveFlags.Watching;
4544
queued[insertIndex++] = effect;
4645
effect = effect.subs?.sub as Effect;
47-
if (effect === undefined || !(effect.flags & Flags.Watching)) {
46+
if (effect === undefined || !(effect.flags & ReactiveFlags.Watching)) {
4847
break;
4948
}
5049
} while (true);
@@ -58,11 +57,11 @@ const {
5857
}
5958
},
6059
unwatched(node) {
61-
if (!(node.flags & Flags.Mutable)) {
60+
if (!(node.flags & ReactiveFlags.Mutable)) {
6261
effectScopeOper.call(node);
6362
} else if (node.depsTail !== undefined) {
6463
node.depsTail = undefined;
65-
node.flags = Flags.Mutable | Flags.Dirty;
64+
node.flags = ReactiveFlags.Mutable | ReactiveFlags.Dirty;
6665
purgeDeps(node);
6766
}
6867
},
@@ -125,7 +124,7 @@ export function signal<T>(initialValue?: T): {
125124
pendingValue: initialValue,
126125
subs: undefined,
127126
subsTail: undefined,
128-
flags: Flags.Mutable,
127+
flags: ReactiveFlags.Mutable,
129128
}) as () => T | undefined;
130129
}
131130

@@ -136,7 +135,7 @@ export function computed<T>(getter: (previousValue?: T) => T): () => T {
136135
subsTail: undefined,
137136
deps: undefined,
138137
depsTail: undefined,
139-
flags: Flags.None,
138+
flags: ReactiveFlags.None,
140139
getter: getter as (previousValue?: unknown) => unknown,
141140
}) as () => T;
142141
}
@@ -148,7 +147,7 @@ export function effect(fn: () => void): () => void {
148147
subsTail: undefined,
149148
deps: undefined,
150149
depsTail: undefined,
151-
flags: Flags.Watching,
150+
flags: ReactiveFlags.Watching,
152151
};
153152
const prevSub = setActiveSub(e);
154153
if (prevSub !== undefined) {
@@ -168,7 +167,7 @@ export function effectScope(fn: () => void): () => void {
168167
depsTail: undefined,
169168
subs: undefined,
170169
subsTail: undefined,
171-
flags: Flags.None,
170+
flags: ReactiveFlags.None,
172171
};
173172
const prevSub = setActiveSub(e);
174173
if (prevSub !== undefined) {
@@ -185,45 +184,45 @@ export function effectScope(fn: () => void): () => void {
185184
function updateComputed(c: Computed): boolean {
186185
++cycle;
187186
c.depsTail = undefined;
188-
c.flags = Flags.Mutable | Flags.RecursedCheck;
187+
c.flags = ReactiveFlags.Mutable | ReactiveFlags.RecursedCheck;
189188
const prevSub = setActiveSub(c);
190189
try {
191190
const oldValue = c.value;
192191
return oldValue !== (c.value = c.getter(oldValue));
193192
} finally {
194193
activeSub = prevSub;
195-
c.flags &= ~Flags.RecursedCheck;
194+
c.flags &= ~ReactiveFlags.RecursedCheck;
196195
purgeDeps(c);
197196
}
198197
}
199198

200199
function updateSignal(s: Signal): boolean {
201-
s.flags = Flags.Mutable;
200+
s.flags = ReactiveFlags.Mutable;
202201
return s.currentValue !== (s.currentValue = s.pendingValue);
203202
}
204203

205204
function run(e: Effect): void {
206205
const flags = e.flags;
207206
if (
208-
flags & Flags.Dirty
207+
flags & ReactiveFlags.Dirty
209208
|| (
210-
flags & Flags.Pending
209+
flags & ReactiveFlags.Pending
211210
&& checkDirty(e.deps!, e)
212211
)
213212
) {
214213
++cycle;
215214
e.depsTail = undefined;
216-
e.flags = Flags.Watching | Flags.RecursedCheck;
215+
e.flags = ReactiveFlags.Watching | ReactiveFlags.RecursedCheck;
217216
const prevSub = setActiveSub(e);
218217
try {
219218
(e as Effect).fn();
220219
} finally {
221220
activeSub = prevSub;
222-
e.flags &= ~Flags.RecursedCheck;
221+
e.flags &= ~ReactiveFlags.RecursedCheck;
223222
purgeDeps(e);
224223
}
225224
} else {
226-
e.flags = Flags.Watching;
225+
e.flags = ReactiveFlags.Watching;
227226
}
228227
}
229228

@@ -240,12 +239,12 @@ function flush(): void {
240239
function computedOper<T>(this: Computed<T>): T {
241240
const flags = this.flags;
242241
if (
243-
flags & Flags.Dirty
242+
flags & ReactiveFlags.Dirty
244243
|| (
245-
flags & Flags.Pending
244+
flags & ReactiveFlags.Pending
246245
&& (
247246
checkDirty(this.deps!, this)
248-
|| (this.flags = flags & ~Flags.Pending, false)
247+
|| (this.flags = flags & ~ReactiveFlags.Pending, false)
249248
)
250249
)
251250
) {
@@ -256,7 +255,7 @@ function computedOper<T>(this: Computed<T>): T {
256255
}
257256
}
258257
} else if (!flags) {
259-
this.flags = Flags.Mutable;
258+
this.flags = ReactiveFlags.Mutable;
260259
const prevSub = setActiveSub(this);
261260
try {
262261
this.value = this.getter();
@@ -274,7 +273,7 @@ function computedOper<T>(this: Computed<T>): T {
274273
function signalOper<T>(this: Signal<T>, ...value: [T]): T | void {
275274
if (value.length) {
276275
if (this.pendingValue !== (this.pendingValue = value[0])) {
277-
this.flags = Flags.Mutable | Flags.Dirty;
276+
this.flags = ReactiveFlags.Mutable | ReactiveFlags.Dirty;
278277
const subs = this.subs;
279278
if (subs !== undefined) {
280279
propagate(subs);
@@ -284,7 +283,7 @@ function signalOper<T>(this: Signal<T>, ...value: [T]): T | void {
284283
}
285284
}
286285
} else {
287-
if (this.flags & Flags.Dirty) {
286+
if (this.flags & ReactiveFlags.Dirty) {
288287
if (updateSignal(this)) {
289288
const subs = this.subs;
290289
if (subs !== undefined) {
@@ -294,7 +293,7 @@ function signalOper<T>(this: Signal<T>, ...value: [T]): T | void {
294293
}
295294
let sub = activeSub;
296295
while (sub !== undefined) {
297-
if (sub.flags & (Flags.Mutable | Flags.Watching)) {
296+
if (sub.flags & (ReactiveFlags.Mutable | ReactiveFlags.Watching)) {
298297
link(this, sub, cycle);
299298
break;
300299
}
@@ -310,7 +309,7 @@ function effectOper(this: Effect): void {
310309

311310
function effectScopeOper(this: ReactiveNode): void {
312311
this.depsTail = undefined;
313-
this.flags = Flags.None;
312+
this.flags = ReactiveFlags.None;
314313
purgeDeps(this);
315314
const sub = this.subs;
316315
if (sub !== undefined) {

‎src/system.ts‎

Lines changed: 27 additions & 44 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,3 @@
1-
import { ReactiveFlags as Flags } from './flags.js';
2-
31
export interface ReactiveNode {
42
deps?: Link;
53
depsTail?: Link;
@@ -23,29 +21,14 @@ interface Stack<T> {
2321
prev: Stack<T> | undefined;
2422
}
2523

26-
// export js runtime object
27-
export const ReactiveFlags = {
28-
None: Flags.None,
29-
Mutable: Flags.Mutable,
30-
Watching: Flags.Watching,
31-
RecursedCheck: Flags.RecursedCheck,
32-
Recursed: Flags.Recursed,
33-
Dirty: Flags.Dirty,
34-
Pending: Flags.Pending,
35-
} as const satisfies Record<keyof typeof Flags, Flags>;
36-
37-
// export overrided type (for backward compatibility)
38-
export type ReactiveFlags = Flags;
39-
40-
// export namespace for supporting satisfies (for backward compatibility)
41-
export namespace ReactiveFlags {
42-
export type None = Flags.None;
43-
export type Mutable = Flags.Mutable;
44-
export type Watching = Flags.Watching;
45-
export type RecursedCheck = Flags.RecursedCheck;
46-
export type Recursed = Flags.Recursed;
47-
export type Dirty = Flags.Dirty;
48-
export type Pending = Flags.Pending;
24+
export const enum ReactiveFlags {
25+
None = 0,
26+
Mutable = 1,
27+
Watching = 2,
28+
RecursedCheck = 4,
29+
Recursed = 8,
30+
Dirty = 16,
31+
Pending = 32,
4932
}
5033

5134
export function createReactiveSystem({
@@ -144,24 +127,24 @@ export function createReactiveSystem({
144127
const sub = link.sub;
145128
let flags = sub.flags;
146129

147-
if (!(flags & (Flags.RecursedCheck | Flags.Recursed | Flags.Dirty | Flags.Pending))) {
148-
sub.flags = flags | Flags.Pending;
149-
} else if (!(flags & (Flags.RecursedCheck | Flags.Recursed))) {
150-
flags = Flags.None;
151-
} else if (!(flags & Flags.RecursedCheck)) {
152-
sub.flags = (flags & ~Flags.Recursed) | Flags.Pending;
153-
} else if (!(flags & (Flags.Dirty | Flags.Pending)) && isValidLink(link, sub)) {
154-
sub.flags = flags | (Flags.Recursed | Flags.Pending);
155-
flags &= Flags.Mutable;
130+
if (!(flags & (ReactiveFlags.RecursedCheck | ReactiveFlags.Recursed | ReactiveFlags.Dirty | ReactiveFlags.Pending))) {
131+
sub.flags = flags | ReactiveFlags.Pending;
132+
} else if (!(flags & (ReactiveFlags.RecursedCheck | ReactiveFlags.Recursed))) {
133+
flags = ReactiveFlags.None;
134+
} else if (!(flags & ReactiveFlags.RecursedCheck)) {
135+
sub.flags = (flags & ~ReactiveFlags.Recursed) | ReactiveFlags.Pending;
136+
} else if (!(flags & (ReactiveFlags.Dirty | ReactiveFlags.Pending)) && isValidLink(link, sub)) {
137+
sub.flags = flags | (ReactiveFlags.Recursed | ReactiveFlags.Pending);
138+
flags &= ReactiveFlags.Mutable;
156139
} else {
157-
flags = Flags.None;
140+
flags = ReactiveFlags.None;
158141
}
159142

160-
if (flags & Flags.Watching) {
143+
if (flags & ReactiveFlags.Watching) {
161144
notify(sub);
162145
}
163146

164-
if (flags & Flags.Mutable) {
147+
if (flags & ReactiveFlags.Mutable) {
165148
const subSubs = sub.subs;
166149
if (subSubs !== undefined) {
167150
const nextSub = (link = subSubs).nextSub;
@@ -200,17 +183,17 @@ export function createReactiveSystem({
200183
const dep = link.dep;
201184
const flags = dep.flags;
202185

203-
if (sub.flags & Flags.Dirty) {
186+
if (sub.flags & ReactiveFlags.Dirty) {
204187
dirty = true;
205-
} else if ((flags & (Flags.Mutable | Flags.Dirty)) === (Flags.Mutable | Flags.Dirty)) {
188+
} else if ((flags & (ReactiveFlags.Mutable | ReactiveFlags.Dirty)) === (ReactiveFlags.Mutable | ReactiveFlags.Dirty)) {
206189
if (update(dep)) {
207190
const subs = dep.subs!;
208191
if (subs.nextSub !== undefined) {
209192
shallowPropagate(subs);
210193
}
211194
dirty = true;
212195
}
213-
} else if ((flags & (Flags.Mutable | Flags.Pending)) === (Flags.Mutable | Flags.Pending)) {
196+
} else if ((flags & (ReactiveFlags.Mutable | ReactiveFlags.Pending)) === (ReactiveFlags.Mutable | ReactiveFlags.Pending)) {
214197
if (link.nextSub !== undefined || link.prevSub !== undefined) {
215198
stack = { value: link, prev: stack };
216199
}
@@ -247,7 +230,7 @@ export function createReactiveSystem({
247230
}
248231
dirty = false;
249232
} else {
250-
sub.flags &= ~Flags.Pending;
233+
sub.flags &= ~ReactiveFlags.Pending;
251234
}
252235
sub = link.sub;
253236
const nextDep = link.nextDep;
@@ -265,9 +248,9 @@ export function createReactiveSystem({
265248
do {
266249
const sub = link.sub;
267250
const flags = sub.flags;
268-
if ((flags & (Flags.Pending | Flags.Dirty)) === Flags.Pending) {
269-
sub.flags = flags | Flags.Dirty;
270-
if (flags & Flags.Watching) {
251+
if ((flags & (ReactiveFlags.Pending | ReactiveFlags.Dirty)) === ReactiveFlags.Pending) {
252+
sub.flags = flags | ReactiveFlags.Dirty;
253+
if (flags & ReactiveFlags.Watching) {
271254
notify(sub);
272255
}
273256
}

0 commit comments

Comments
 (0)