@realglebivanov/reactive 1.0.6 → 1.0.7
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/index.d.ts +235 -204
- package/dist/index.js +1 -2
- package/package.json +8 -6
package/dist/index.d.ts
CHANGED
|
@@ -1,272 +1,303 @@
|
|
|
1
1
|
interface Schedulable {
|
|
2
|
-
|
|
2
|
+
run(): void;
|
|
3
3
|
}
|
|
4
|
-
|
|
5
4
|
declare const observable: <T>(value: T) => ValueObservable<T>;
|
|
6
5
|
declare class ValueObservable<T> implements Observable<T>, Updatable<T>, Schedulable {
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
6
|
+
private value;
|
|
7
|
+
private readonly notifier;
|
|
8
|
+
constructor(value: T);
|
|
9
|
+
unsubscribeAll(): void;
|
|
10
|
+
unsubscribe(id: symbol): void;
|
|
11
|
+
subscribe(id: symbol, observer: Observer<T>): void;
|
|
12
|
+
subscribeInit(id: symbol, observer: Observer<T>): void;
|
|
13
|
+
update(updateFn: UpdateFn<T>): void;
|
|
14
|
+
run(): void;
|
|
16
15
|
}
|
|
17
|
-
|
|
18
|
-
declare const mapObservable: <
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
16
|
+
import { Observable as Observable2, Observer as Observer2, Values } from "..";
|
|
17
|
+
declare const mapObservable: <
|
|
18
|
+
Observables extends readonly Observable2<any>[],
|
|
19
|
+
R
|
|
20
|
+
>(mapFn: (...values: Values<Observables>) => R, ...observables: Observables) => MapObservable<Observables, R>;
|
|
21
|
+
declare class MapObservable<
|
|
22
|
+
Observables extends readonly Observable2<any>[],
|
|
23
|
+
R
|
|
24
|
+
> implements Observable2<R>, Schedulable {
|
|
25
|
+
private mapFn;
|
|
26
|
+
private observables;
|
|
27
|
+
private notifier;
|
|
28
|
+
private state;
|
|
29
|
+
private ids;
|
|
30
|
+
constructor(mapFn: (...values: Values<Observables>) => R, observables: Observables);
|
|
31
|
+
unsubscribeAll(): void;
|
|
32
|
+
unsubscribe(id: symbol): void;
|
|
33
|
+
subscribe(id: symbol, observer: Observer2<R>): void;
|
|
34
|
+
subscribeInit(id: symbol, observer: Observer2<R>): void;
|
|
35
|
+
run(): void;
|
|
36
|
+
private notifyObservers;
|
|
37
|
+
private innerSubscribe;
|
|
38
|
+
private innerUnubscribe;
|
|
34
39
|
}
|
|
35
|
-
|
|
36
40
|
declare const dedupObservable: <T>(innerObservable: Observable<T>, compareEqualFn?: CompareEqualFn<T>, cloneFn?: CloneFn<T>) => DedupObservable<T>;
|
|
37
41
|
type CompareEqualFn<T> = (a: T, b: T) => boolean;
|
|
38
42
|
type CloneFn<T> = (a: T) => T;
|
|
39
43
|
declare class DedupObservable<T> implements Observable<T>, Schedulable {
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
44
|
+
private innerObservable;
|
|
45
|
+
private compareEqualFn;
|
|
46
|
+
private cloneFn;
|
|
47
|
+
private id;
|
|
48
|
+
private state;
|
|
49
|
+
private boundUpdate;
|
|
50
|
+
private notifier;
|
|
51
|
+
constructor(innerObservable: Observable<T>, compareEqualFn: CompareEqualFn<T>, cloneFn: CloneFn<T>);
|
|
52
|
+
unsubscribeAll(): void;
|
|
53
|
+
unsubscribe(id: symbol): void;
|
|
54
|
+
subscribe(id: symbol, observer: Observer<T>): void;
|
|
55
|
+
subscribeInit(id: symbol, observer: Observer<T>): void;
|
|
56
|
+
run(): void;
|
|
57
|
+
private innerSubscribe;
|
|
58
|
+
private updateValue;
|
|
59
|
+
private innerUnubscribe;
|
|
56
60
|
}
|
|
57
|
-
|
|
58
61
|
declare const scopedObservable: <T extends Observable<any>>(innerObservable: T) => ScopedObservable<T>;
|
|
59
62
|
type Value<O extends Observable<any>> = O extends Observable<infer T> ? T : never;
|
|
60
63
|
declare class ScopedObservable<T extends Observable<any>> implements Observable<Value<T>> {
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
64
|
+
private innerObservable;
|
|
65
|
+
private aliases;
|
|
66
|
+
constructor(innerObservable: T);
|
|
67
|
+
unsubscribeAll(): void;
|
|
68
|
+
unsubscribe(id: symbol): void;
|
|
69
|
+
subscribe(id: symbol, observer: Observer<Value<T>>): void;
|
|
70
|
+
subscribeInit(id: symbol, observer: Observer<Value<T>>): void;
|
|
71
|
+
update(this: ScopedObservable<Updatable<Value<T>> & Observable<Value<T>>>, updateFn: UpdateFn<Value<T>>): void;
|
|
69
72
|
}
|
|
70
|
-
|
|
71
73
|
interface Lifecycle {
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
|
|
74
|
+
mount(parentNode: Node): void;
|
|
75
|
+
activate(): void;
|
|
76
|
+
deactivate(): void;
|
|
77
|
+
unmount(): void;
|
|
76
78
|
}
|
|
77
|
-
|
|
78
79
|
type ReactiveNode<T extends Node> = Lifecycle & T & ReactiveNodeSetters<T>;
|
|
79
80
|
interface ReactiveNodeSetters<T extends Node> {
|
|
80
|
-
|
|
81
|
-
|
|
81
|
+
listen: <R extends ReactiveNode<T>>(this: R, type: string, cb: EventListenerOrEventListenerObject) => R;
|
|
82
|
+
clk: <R extends ReactiveNode<T>>(this: R, cb: EventListenerOrEventListenerObject) => R;
|
|
82
83
|
}
|
|
83
84
|
type TagReactiveNode<K extends keyof HTMLElementTagNameMap> = ReactiveNode<HTMLElementTagNameMap[K]> & TagReactiveNodeSetters<K>;
|
|
84
85
|
interface TagReactiveNodeSetters<K extends keyof HTMLElementTagNameMap> {
|
|
85
|
-
|
|
86
|
-
|
|
87
|
-
|
|
88
|
-
|
|
89
|
-
|
|
86
|
+
att: (name: string, value: string) => TagReactiveNode<K>;
|
|
87
|
+
class$: (value: Observable<string>) => TagReactiveNode<K>;
|
|
88
|
+
att$: (name: string, value: Observable<string>) => TagReactiveNode<K>;
|
|
89
|
+
prop$: <N extends keyof HTMLElementTagNameMap[K]>(name: N, value: Observable<HTMLElementTagNameMap[K][N]>) => TagReactiveNode<K>;
|
|
90
|
+
model$: <I extends "input" | "textarea" | "select">(this: TagReactiveNode<I>, value$: Observable<string> & Updatable<string>) => TagReactiveNode<I>;
|
|
90
91
|
}
|
|
91
92
|
declare const toTagReactiveNode: <K extends keyof HTMLElementTagNameMap>(node: HTMLElementTagNameMap[K], handlers: Lifecycle[]) => TagReactiveNode<K>;
|
|
92
93
|
declare const toReactiveNode: <T extends Node>(node: T, handlers: Lifecycle[]) => ReactiveNode<T>;
|
|
93
|
-
|
|
94
|
-
type
|
|
95
|
-
type
|
|
96
|
-
|
|
94
|
+
type Observables2 = Record<string, Observable<any>>;
|
|
95
|
+
type ScopedObservables<T extends Observables2> = { [K in keyof T] : ScopedObservable<T[K]> };
|
|
96
|
+
type RenderFn<
|
|
97
|
+
O extends Observables2,
|
|
98
|
+
T extends Node,
|
|
99
|
+
P
|
|
100
|
+
> = (this: Context<T, P>, observables: ScopedObservables<O>) => ReactiveNode<T>;
|
|
101
|
+
type UserOpts<
|
|
102
|
+
O1 extends Observables2,
|
|
103
|
+
O2 extends Observables2,
|
|
104
|
+
T extends Node,
|
|
105
|
+
P
|
|
106
|
+
> = Partial<Opts<O1, O2, T, P>> & {
|
|
107
|
+
render: RenderFn<O1 & O2, T, P>;
|
|
97
108
|
};
|
|
98
|
-
type
|
|
99
|
-
|
|
100
|
-
|
|
109
|
+
type Opts<
|
|
110
|
+
O1 extends Observables2,
|
|
111
|
+
O2 extends Observables2,
|
|
112
|
+
T extends Node,
|
|
113
|
+
P
|
|
114
|
+
> = {
|
|
115
|
+
render: RenderFn<O1 & O2, T, P>;
|
|
116
|
+
observables: () => O1;
|
|
117
|
+
derivedObservables: (observables: O1) => O2;
|
|
118
|
+
cache: boolean;
|
|
119
|
+
props: P;
|
|
101
120
|
};
|
|
102
|
-
|
|
103
|
-
|
|
104
|
-
|
|
105
|
-
|
|
106
|
-
|
|
107
|
-
|
|
108
|
-
|
|
109
|
-
|
|
110
|
-
|
|
111
|
-
|
|
112
|
-
|
|
113
|
-
|
|
114
|
-
|
|
121
|
+
declare const component: <
|
|
122
|
+
O1 extends Observables2,
|
|
123
|
+
O2 extends Observables2,
|
|
124
|
+
T extends Node,
|
|
125
|
+
P
|
|
126
|
+
>(opts: UserOpts<O1, O2, T, P>) => ReactiveNode<Comment>;
|
|
127
|
+
declare class Context<
|
|
128
|
+
T extends Node,
|
|
129
|
+
P
|
|
130
|
+
> {
|
|
131
|
+
parent: Node;
|
|
132
|
+
props: P;
|
|
133
|
+
node: ReactiveNode<T> | undefined;
|
|
134
|
+
constructor(parent: Node, props: P);
|
|
115
135
|
}
|
|
116
|
-
|
|
117
136
|
type ReactiveNodeBuilder<T extends Node> = (() => ReactiveNode<T>);
|
|
118
|
-
type Params<
|
|
119
|
-
|
|
120
|
-
|
|
121
|
-
|
|
137
|
+
type Params<
|
|
138
|
+
A extends Node,
|
|
139
|
+
B extends Node
|
|
140
|
+
> = {
|
|
141
|
+
if$: Observable<boolean>;
|
|
142
|
+
then?: ReactiveNodeBuilder<A> | string | undefined;
|
|
143
|
+
otherwise?: ReactiveNodeBuilder<B> | string | undefined;
|
|
122
144
|
};
|
|
123
|
-
declare const cond: <
|
|
124
|
-
|
|
145
|
+
declare const cond: <
|
|
146
|
+
A extends Node,
|
|
147
|
+
B extends Node
|
|
148
|
+
>({ if$, then, otherwise }: Params<A, B>) => ReactiveNode<Comment>;
|
|
125
149
|
type Key = string | number | boolean | symbol;
|
|
126
|
-
type KeyFn<
|
|
127
|
-
|
|
150
|
+
type KeyFn<
|
|
151
|
+
K extends Key,
|
|
152
|
+
T
|
|
153
|
+
> = ((key: Key, value: T) => K);
|
|
154
|
+
type BuildFn<
|
|
155
|
+
N extends Node,
|
|
156
|
+
T
|
|
157
|
+
> = ((key: Key, value: T) => ReactiveNode<N>);
|
|
128
158
|
type Collection<T> = Array<T> | Map<Key, T>;
|
|
129
|
-
declare class ReactiveItemCollection<
|
|
130
|
-
|
|
131
|
-
|
|
132
|
-
|
|
133
|
-
|
|
134
|
-
|
|
135
|
-
|
|
136
|
-
|
|
137
|
-
|
|
138
|
-
|
|
139
|
-
|
|
140
|
-
|
|
141
|
-
|
|
142
|
-
|
|
143
|
-
|
|
159
|
+
declare class ReactiveItemCollection<
|
|
160
|
+
K extends Key,
|
|
161
|
+
T,
|
|
162
|
+
N extends ReactiveNode<Node>
|
|
163
|
+
> {
|
|
164
|
+
private keyFn;
|
|
165
|
+
private buildFn;
|
|
166
|
+
private generationId;
|
|
167
|
+
private items;
|
|
168
|
+
constructor(keyFn: KeyFn<K, T>, buildFn: BuildFn<N, T>);
|
|
169
|
+
deactivate(): void;
|
|
170
|
+
unmount(): void;
|
|
171
|
+
replace(anchor: Node, newItems: Collection<T>): void;
|
|
172
|
+
replaceKeys(anchor: Node, items: Collection<T>): void;
|
|
173
|
+
append(anchor: Node, newItems: Collection<T>): void;
|
|
174
|
+
remove(items: Collection<T>): void;
|
|
175
|
+
private getOrInsert;
|
|
176
|
+
private insertItem;
|
|
177
|
+
private removeStaleItems;
|
|
144
178
|
}
|
|
145
|
-
|
|
146
|
-
type Source$1<T> = Collection<T> | Event<T>;
|
|
179
|
+
type Source<T> = Collection<T> | Event<T>;
|
|
147
180
|
type Event<T> = {
|
|
148
|
-
|
|
149
|
-
|
|
181
|
+
type: "replace";
|
|
182
|
+
items: Collection<T>;
|
|
150
183
|
} | {
|
|
151
|
-
|
|
152
|
-
|
|
184
|
+
type: "remove";
|
|
185
|
+
items: Collection<T>;
|
|
153
186
|
} | {
|
|
154
|
-
|
|
155
|
-
|
|
187
|
+
type: "append";
|
|
188
|
+
items: Collection<T>;
|
|
156
189
|
} | {
|
|
157
|
-
|
|
158
|
-
|
|
190
|
+
type: "replaceKeys";
|
|
191
|
+
items: Collection<T>;
|
|
159
192
|
};
|
|
160
|
-
declare const iterable: <
|
|
161
|
-
|
|
162
|
-
|
|
163
|
-
|
|
193
|
+
declare const iterable: <
|
|
194
|
+
K extends Key,
|
|
195
|
+
T,
|
|
196
|
+
N extends ReactiveNode<Node>
|
|
197
|
+
>({ it$, buildFn, keyFn }: {
|
|
198
|
+
it$: Observable<Source<T>>;
|
|
199
|
+
buildFn: BuildFn<N, T>;
|
|
200
|
+
keyFn: KeyFn<K, T>;
|
|
164
201
|
}) => ReactiveNode<Comment>;
|
|
165
|
-
|
|
166
|
-
|
|
167
|
-
|
|
168
|
-
|
|
169
|
-
|
|
170
|
-
|
|
171
|
-
|
|
172
|
-
|
|
173
|
-
|
|
174
|
-
|
|
175
|
-
|
|
202
|
+
declare class ReactiveItem<
|
|
203
|
+
T,
|
|
204
|
+
N extends ReactiveNode<Node>
|
|
205
|
+
> {
|
|
206
|
+
anchor: Node;
|
|
207
|
+
value: T;
|
|
208
|
+
node: N;
|
|
209
|
+
generationId?: number;
|
|
210
|
+
constructor(anchor: Node, value: T, node: N);
|
|
211
|
+
mount(refItem: ReactiveItem<T, N> | null): void;
|
|
212
|
+
activate(generationId: number): void;
|
|
213
|
+
deactivate(): void;
|
|
214
|
+
unmount(): void;
|
|
176
215
|
}
|
|
177
|
-
|
|
178
216
|
type Hole = Observable<string> | string;
|
|
179
217
|
declare const template: (strings: TemplateStringsArray, ...holes: Hole[]) => ReactiveNode<Comment>;
|
|
180
|
-
|
|
181
218
|
declare const reactiveTextNode: (text: string) => ReactiveNode<Text>;
|
|
182
|
-
|
|
183
|
-
|
|
219
|
+
type InputChild<
|
|
220
|
+
T extends Node,
|
|
221
|
+
K extends keyof HTMLElementTagNameMap = keyof HTMLElementTagNameMap
|
|
222
|
+
> = TagReactiveNode<K> | ReactiveNode<T> | string;
|
|
184
223
|
declare const tag: <K extends keyof HTMLElementTagNameMap>(name: K, ...inputChildren: InputChild<Node>[]) => TagReactiveNode<K>;
|
|
185
224
|
declare const tags: {
|
|
186
|
-
|
|
187
|
-
|
|
188
|
-
|
|
189
|
-
|
|
190
|
-
|
|
191
|
-
|
|
192
|
-
|
|
193
|
-
|
|
194
|
-
|
|
195
|
-
|
|
196
|
-
|
|
197
|
-
|
|
198
|
-
|
|
199
|
-
|
|
225
|
+
img: (src: string) => TagReactiveNode<"img">;
|
|
226
|
+
input: (type: string) => TagReactiveNode<"input">;
|
|
227
|
+
canvas: <T extends InputChild<Node>[]>(...children: T) => TagReactiveNode<"canvas">;
|
|
228
|
+
button: <T extends InputChild<Node>[]>(...children: T) => TagReactiveNode<"button">;
|
|
229
|
+
h1: <T extends InputChild<Node>[]>(...children: T) => TagReactiveNode<"h1">;
|
|
230
|
+
h2: <T extends InputChild<Node>[]>(...children: T) => TagReactiveNode<"h2">;
|
|
231
|
+
h3: <T extends InputChild<Node>[]>(...children: T) => TagReactiveNode<"h3">;
|
|
232
|
+
p: <T extends InputChild<Node>[]>(...children: T) => TagReactiveNode<"p">;
|
|
233
|
+
a: <T extends InputChild<Node>[]>(...children: T) => TagReactiveNode<"a">;
|
|
234
|
+
div: <T extends InputChild<Node>[]>(...children: T) => TagReactiveNode<"div">;
|
|
235
|
+
ul: <T extends InputChild<Node>[]>(...children: T) => TagReactiveNode<"ul">;
|
|
236
|
+
li: <T extends InputChild<Node>[]>(...children: T) => TagReactiveNode<"li">;
|
|
237
|
+
span: <T extends InputChild<Node>[]>(...children: T) => TagReactiveNode<"span">;
|
|
238
|
+
select: <T extends InputChild<Node>[]>(...children: T) => TagReactiveNode<"select">;
|
|
239
|
+
option: <T extends InputChild<Node>[]>(...children: T) => TagReactiveNode<"option">;
|
|
200
240
|
};
|
|
201
|
-
|
|
202
|
-
type Source<T> = Observable<Event<T>> & Updatable<Event<T>>;
|
|
241
|
+
type Source2<T> = Observable<Event<T>> & Updatable<Event<T>>;
|
|
203
242
|
declare class ReactiveArray<T> {
|
|
204
|
-
|
|
205
|
-
|
|
206
|
-
|
|
207
|
-
|
|
208
|
-
|
|
209
|
-
|
|
210
|
-
|
|
211
|
-
|
|
212
|
-
|
|
213
|
-
|
|
243
|
+
private items;
|
|
244
|
+
private observables;
|
|
245
|
+
constructor(items?: T[]);
|
|
246
|
+
get observable$(): Source2<T>;
|
|
247
|
+
push(...items: T[]): void;
|
|
248
|
+
pop(): T | undefined;
|
|
249
|
+
remove(indices: number[]): void;
|
|
250
|
+
replace(items: T[]): void;
|
|
251
|
+
replaceKeys(items: Map<number, T>): void;
|
|
252
|
+
private emit;
|
|
214
253
|
}
|
|
215
|
-
|
|
216
254
|
declare const inputObservable: <I extends "input" | "textarea" | "select">(input: TagReactiveNode<I>, value$: Observable<string> & Updatable<string>) => InputObservable<I>;
|
|
217
|
-
declare class InputObservable<I extends
|
|
218
|
-
|
|
219
|
-
|
|
220
|
-
|
|
221
|
-
|
|
222
|
-
|
|
223
|
-
|
|
224
|
-
|
|
225
|
-
|
|
226
|
-
|
|
227
|
-
|
|
255
|
+
declare class InputObservable<I extends "input" | "textarea" | "select"> implements Observable<string>, Updatable<string> {
|
|
256
|
+
private input;
|
|
257
|
+
private value$;
|
|
258
|
+
private aliases;
|
|
259
|
+
constructor(input: TagReactiveNode<I>, value$: Observable<string> & Updatable<string>);
|
|
260
|
+
subscribe(id: symbol, observer: Observer<string>): void;
|
|
261
|
+
subscribeInit(id: symbol, observer: Observer<string>): void;
|
|
262
|
+
unsubscribe(id: symbol): void;
|
|
263
|
+
unsubscribeAll(): void;
|
|
264
|
+
update(updateFn: UpdateFn<string>): void;
|
|
265
|
+
private toInputObserver;
|
|
228
266
|
}
|
|
229
|
-
|
|
230
267
|
type Observer<T> = (value: T) => void;
|
|
231
268
|
type UpdateFn<T> = (value: T) => T;
|
|
232
269
|
interface Observable<T> {
|
|
233
|
-
|
|
234
|
-
|
|
235
|
-
|
|
236
|
-
|
|
270
|
+
unsubscribeAll(): void;
|
|
271
|
+
unsubscribe(id: symbol): void;
|
|
272
|
+
subscribe(id: symbol, observer: Observer<T>): void;
|
|
273
|
+
subscribeInit(id: symbol, observer: Observer<T>): void;
|
|
237
274
|
}
|
|
238
275
|
interface Updatable<T> {
|
|
239
|
-
|
|
276
|
+
update(updateFn: UpdateFn<T>): void;
|
|
240
277
|
}
|
|
241
278
|
type ObservableValue<O extends Observable<any>> = O extends Observable<infer T> ? T : never;
|
|
242
|
-
type
|
|
243
|
-
|
|
244
|
-
};
|
|
245
|
-
declare const once: <T extends any[]>(fn: (...values: T) => void, ...observables: { [K in keyof T]: Observable<T[K]>; }) => void;
|
|
246
|
-
|
|
279
|
+
type Values2<Observables extends readonly Observable<any>[]> = { [K in keyof Observables] : ObservableValue<Observables[K]> };
|
|
280
|
+
declare const once: <T extends any[]>(fn: (...values: T) => void, ...observables: { [K in keyof T] : Observable<T[K]> }) => void;
|
|
247
281
|
type RouteKey<T extends RouteCollection<Node>> = keyof T & string;
|
|
248
282
|
type RouteCollection<N extends Node> = Record<string, ReactiveNode<N>>;
|
|
249
283
|
type RouterOpts<T extends RouteCollection<Node>> = {
|
|
250
|
-
|
|
284
|
+
notFoundRoute: RouteKey<T>;
|
|
251
285
|
};
|
|
252
286
|
declare const router: <T extends RouteCollection<Node>>(routes: T, opts: RouterOpts<T>) => ReactiveNode<Comment>;
|
|
253
|
-
|
|
254
287
|
type Task = () => void;
|
|
255
288
|
type TaskRunner = (task: Task) => void;
|
|
256
289
|
declare const buildMicrotaskRunner: () => TaskRunner;
|
|
257
290
|
declare const microtaskRunner: TaskRunner;
|
|
258
|
-
|
|
259
291
|
declare class RingQueue<T> {
|
|
260
|
-
|
|
261
|
-
|
|
262
|
-
|
|
263
|
-
|
|
264
|
-
|
|
265
|
-
|
|
266
|
-
|
|
267
|
-
|
|
268
|
-
|
|
269
|
-
|
|
292
|
+
private size;
|
|
293
|
+
private head;
|
|
294
|
+
private tail;
|
|
295
|
+
private items;
|
|
296
|
+
constructor(capacity?: number);
|
|
297
|
+
get isEmpty(): boolean;
|
|
298
|
+
clear(): void;
|
|
299
|
+
enqueue(item: T): void;
|
|
300
|
+
dequeue(): T | undefined;
|
|
301
|
+
private extend;
|
|
270
302
|
}
|
|
271
|
-
|
|
272
|
-
export { type BuildFn, type Collection, type Event, type InputChild, InputObservable, type Key, type KeyFn, type Observable, type ObservableValue, type Observer, ReactiveArray, ReactiveItem, ReactiveItemCollection, type ReactiveNode, type ReactiveNodeSetters, RingQueue, ScopedObservable, type TagReactiveNode, type TagReactiveNodeSetters, type Task, type TaskRunner, type Updatable, type UpdateFn, type Values, buildMicrotaskRunner, component, cond, dedupObservable, inputObservable, iterable, mapObservable, microtaskRunner, observable, once, reactiveTextNode, router, scopedObservable, tag, tags, template, toReactiveNode, toTagReactiveNode };
|
|
303
|
+
export { toTagReactiveNode, toReactiveNode, template, tags, tag, scopedObservable, router, reactiveTextNode, once, observable, microtaskRunner, mapObservable, iterable, inputObservable, dedupObservable, cond, component, buildMicrotaskRunner, Values2 as Values, UpdateFn, Updatable, TaskRunner, Task, TagReactiveNodeSetters, TagReactiveNode, ScopedObservable, RingQueue, ReactiveNodeSetters, ReactiveNode, ReactiveItemCollection, ReactiveItem, ReactiveArray, Observer, ObservableValue, Observable, KeyFn, Key, InputObservable, InputChild, Event, Collection, BuildFn };
|
package/dist/index.js
CHANGED
|
@@ -1,2 +1 @@
|
|
|
1
|
-
var c=class{constructor(){this.observers=new Map;this.notifyAll=false;this.notifySchedule=new Set;}get size(){return this.observers.size}scheduleNotify(e){this.notifyAll||this.notifySchedule.add(e);}scheduleNotifyAll(){this.notifySchedule.clear(),this.notifyAll=true;}clearSchedule(){this.notifyAll=false,this.notifySchedule.clear();}clear(){this.observers.clear();}set(e,t){this.observers.has(e)&&console.warn("Duplicate observer id",e),this.observers.set(e,t);}delete(e){this.observers.delete(e);}notifyTargets(e){if(this.notifyAll)for(let t of this.observers.values())this.notify(t,e);else for(let t of this.notifySchedule)this.notify(this.observers.get(t),e);}resetTargets(){this.notifyAll=false,this.notifySchedule.clear();}notify(e,t){try{e!==void 0&&e(t);}catch(s){console.error(s);}}};var v=class{constructor(e=256){this.size=0;this.head=0;this.tail=0;this.items=new Array(e);}get isEmpty(){return this.size===0}clear(){this.size=0,this.tail=0,this.head=0;}enqueue(e){this.size===this.items.length&&this.extend(),this.items[this.tail]=e,this.tail=(this.tail+1)%this.items.length,this.size++;}dequeue(){if(this.size===0)return;let e=this.items[this.head];return this.items[this.head]=void 0,this.head=(this.head+1)%this.items.length,this.size--,e}extend(){let e=new Array(this.size*2);for(let t=0;t<this.size;t++)e[t]=this.items[(this.head+t)%this.items.length];this.items=e,this.head=0,this.tail=this.size;}};var F=()=>{let i=new WeakMap,e=0,t=1,s=new v,n=new v,r=()=>{for(;;){[s,n]=[n,s],n.clear();let l;for(;l=s.dequeue();)l.run();if(n.isEmpty)break}},a=()=>queueMicrotask(()=>{r(),t=1,e++;});return l=>{i.get(l)!==e&&(i.set(l,e),n.enqueue(l),t!==0&&(t=0,a()));}},u={enqueueSubscription:F(),enqueueUpdate:F()};var y=class{constructor(e){this.values=e;}update(e,t){return this.values[e]=t,this}},b=class{constructor(e){this.initializedSize=e;this.initializedIndices=new Set;this.values=new Array(e).fill(void 0);}update(e,t){return this.initializedIndices.add(e),this.values[e]=t,this.initializedIndices.size===this.initializedSize?new y(this.values):this}};var h=(i,...e)=>new N(i,e),N=class{constructor(e,t){this.mapFn=e;this.observables=t;this.notifier=new c;this.ids=Array.from(this.observables,()=>Symbol("MapObservable")),this.state=new b(this.ids.length);}unsubscribeAll(){this.notifier.clear(),this.innerUnubscribe();}unsubscribe(e){this.notifier.delete(e),this.innerUnubscribe();}subscribe(e,t){this.notifier.set(e,t),this.innerSubscribe();}subscribeInit(e,t){this.subscribe(e,t),this.notifier.scheduleNotify(e),u.enqueueSubscription(this);}run(){this.state instanceof b||(this.notifier.notifyTargets(this.mapFn(...this.state.values)),this.notifier.resetTargets());}notifyObservers(e){return t=>{this.state=this.state.update(e,t),!(this.state instanceof b)&&(this.notifier.scheduleNotifyAll(),u.enqueueUpdate(this));}}innerSubscribe(){if(this.notifier.size===1)for(let[e,t]of this.observables.entries())this.ids[e]!==void 0&&t.subscribeInit(this.ids[e],this.notifyObservers(e));}innerUnubscribe(){if(this.notifier.size===0){for(let[e,t]of this.observables.entries())this.ids[e]!==void 0&&t.unsubscribe(this.ids[e]);this.state=new b(this.ids.length);}}};var M=i=>new O(i),O=class{constructor(e){this.value=e;this.notifier=new c;}unsubscribeAll(){this.notifier.clear();}unsubscribe(e){this.notifier.delete(e);}subscribe(e,t){this.notifier.set(e,t);}subscribeInit(e,t){this.notifier.set(e,t),this.notifier.scheduleNotify(e),u.enqueueSubscription(this);}update(e){this.value=e(this.value),this.notifier.scheduleNotifyAll(),u.enqueueUpdate(this);}run(){this.notifier.notifyTargets(this.value),this.notifier.resetTargets();}};var U=(i,e=(s,n)=>s==n,t=s=>s)=>new x(i,e,t),x=class{constructor(e,t,s){this.innerObservable=e;this.compareEqualFn=t;this.cloneFn=s;this.id=Symbol("DedupObservable");this.state={initialized:false};this.boundUpdate=this.updateValue.bind(this);this.notifier=new c;}unsubscribeAll(){this.notifier.clear(),this.innerUnubscribe();}unsubscribe(e){this.notifier.delete(e),this.innerUnubscribe();}subscribe(e,t){this.notifier.set(e,t),this.innerSubscribe();}subscribeInit(e,t){this.subscribe(e,t),this.notifier.scheduleNotify(e),u.enqueueSubscription(this);}run(){this.state.initialized&&(this.notifier.notifyTargets(this.state.value),this.notifier.resetTargets());}innerSubscribe(){this.notifier.size===1&&this.innerObservable.subscribeInit(this.id,this.boundUpdate);}updateValue(e){this.state.initialized&&this.compareEqualFn(this.state.value,e)||(this.state.initialized?this.state.value=this.cloneFn(e):this.state={initialized:true,value:this.cloneFn(e)},this.notifier.scheduleNotifyAll(),u.enqueueUpdate(this));}innerUnubscribe(){this.notifier.size===0&&(this.state={initialized:false},this.innerObservable.unsubscribe(this.id));}};var A=i=>new g(i),g=class{constructor(e){this.innerObservable=e;this.aliases=new Map;}unsubscribeAll(){for(let e of this.aliases.values())this.innerObservable.unsubscribe(e);this.aliases.clear();}unsubscribe(e){let t=this.aliases.get(e);t!==void 0&&(this.aliases.delete(e),this.innerObservable.unsubscribe(t));}subscribe(e,t){let s=Symbol("ScopedObservable");this.aliases.set(e,s),this.innerObservable.subscribe(s,t);}subscribeInit(e,t){let s=Symbol("ScopedObservable");this.aliases.set(e,s),this.innerObservable.subscribeInit(s,t);}update(e){"update"in this.innerObservable&&this.innerObservable.update(e);}};var L=(i,e)=>new R(i,e),R=class{constructor(e,t){this.input=e;this.value$=t;this.aliases=new Map;}subscribe(e,t){if(this.aliases.has(e))return;let s=Symbol("InputObservable");this.aliases.set(e,s),this.value$.subscribe(s,this.toInputObserver(t));}subscribeInit(e,t){if(this.aliases.has(e))return;let s=Symbol("InputObservable");this.aliases.set(e,s),this.value$.subscribeInit(s,this.toInputObserver(t));}unsubscribe(e){let t=this.aliases.get(e);t!==void 0&&(this.value$.unsubscribe(t),this.aliases.delete(e));}unsubscribeAll(){for(let e of this.aliases.values())this.value$.unsubscribe(e);this.aliases.clear();}update(e){this.value$.update(e);}toInputObserver(e){return t=>{this.input.value!==t&&e(t);}}};var le=(i,...e)=>{let t=Symbol("Once"),s=h((...n)=>n,...e);s.subscribeInit(t,n=>{s.unsubscribe(t),i(...n);});};var p=(n=>(n[n.Active=0]="Active",n[n.Inactive=1]="Inactive",n[n.Mounted=2]="Mounted",n[n.Unmounted=3]="Unmounted",n))(p||{}),S=i=>{let e=3;return {mount:t=>{if(e!==3)return console.warn(`Mounting in status ${p[e]}`);for(let s of i)s.mount(t);e=2;},activate:()=>{if(e!==2&&e!==1)return console.warn(`Activating in status ${p[e]}`);for(let t of i)t.activate();e=0;},deactivate:()=>{if(e!==0)return console.warn(`Deactivating in status ${p[e]}`);for(let t of i)t.deactivate();e=1;},unmount(){if(e!==1)return console.warn(`Unmounting in status ${p[e]}`);for(let t of i)t.unmount();e=3;}}};var $=(i,e)=>{let t=[...e],s=B(t),n=z(t),r=S(t);return Object.assign(i,n,s,r)},d=(i,e)=>{let t=[...e],s=z(t),n=S(t);return Object.assign(i,s,n)},B=i=>({att:function(e,t){return this.setAttribute(e,t),this},class$:function(e){return this.att$("class",e)},att$:function(e,t){let s=Symbol(`Attribute: ${e}`);return i.push({mount:n=>{},activate:()=>t.subscribeInit(s,n=>this.setAttribute(e,n)),deactivate:()=>t.unsubscribe(s),unmount:()=>{}}),this},model$:function(e){let t=L(this,e);return this.prop$("value",t).listen("input",s=>t.update(n=>this.value))},prop$:function(e,t){let s=Symbol(`Property: ${e.toString()}`);return i.push({mount:n=>{},activate:()=>t.subscribeInit(s,n=>this[e]=n),deactivate:()=>t.unsubscribe(s),unmount:()=>{}}),this}}),z=i=>({clk:function(e){return this.listen("click",e)},listen:function(e,t){return i.push({mount:s=>{},activate:()=>this.addEventListener(e,t),deactivate:()=>this.removeEventListener(e,t),unmount:()=>{}}),this}});var H={observables:()=>({}),derivedObservables:()=>({}),cache:false,props:{}},ge=i=>new K(Object.assign({},H,i)).toReactiveNode(),I=class{constructor(e,t){this.parent=e;this.props=t;}},K=class{constructor(e){this.opts=e;}toReactiveNode(){return d(document.createComment("Component"),[{mount:e=>{var t;(this.node===void 0||!this.opts.cache)&&this.setupNode(e),(t=this.node)==null||t.mount(e);},activate:()=>{var e;return (e=this.node)==null?void 0:e.activate()},deactivate:()=>{var e,t;if((e=this.node)==null||e.deactivate(),this.observables!==void 0)for(let s in this.observables)(t=this.observables[s])==null||t.unsubscribeAll();},unmount:()=>{var e;(e=this.node)==null||e.unmount(),this.opts.cache||this.cleanUp();}}])}setupNode(e){this.observables=this.buildObservables(),this.context=new I(e,this.opts.props),this.node=this.opts.render.call(this.context,this.observables),this.context.node=this.node;}cleanUp(){this.context!==void 0&&(this.context.node=void 0),this.node=void 0,this.observables=void 0;}buildObservables(){let e=this.opts.observables(),t=this.opts.derivedObservables(e),s=Object.assign({},e,t);return this.toScoped(s)}toScoped(e){let t={};for(let s in e){let n=s;t[n]=A(e[n]);}return t}};var P=class{constructor(e=[]){this.items=e;this.observables=[];}get observable$(){let e=M({type:"replace",items:this.items});return this.observables.push(new WeakRef(e)),e}push(...e){this.items.push(...e),this.emit({type:"append",items:e});}pop(){if(this.items.length===0)return;let e=this.items.length-1,t=this.items.pop();return this.emit({type:"remove",items:new Map().set(e,t)}),t}remove(e){if(e.length==0)return;let t=new Map;for(let s of e)s in this.items&&(t.set(s,this.items[s]),delete this.items[s]);this.emit({type:"remove",items:t});}replace(e){this.items=e,this.emit({type:"replace",items:e});}replaceKeys(e){for(let[t,s]of e.entries())t in this.items&&(this.items[t]=s);this.emit({type:"replaceKeys",items:e});}emit(e){var s;let t=n=>e;for(let n of this.observables)(s=n.deref())==null||s.update(t);}};var m=i=>{let e=document.createTextNode(i);return d(e,[{mount:s=>s.appendChild(e),activate:()=>{},deactivate:()=>{},unmount:()=>e.remove()}])};var Fe=({if$:i,then:e,otherwise:t})=>new k(U(i),e,t).toReactiveNode(),k=class{constructor(e,t,s){this.if$=e;this.then=t;this.otherwise=s;this.id=Symbol("Cond");}toReactiveNode(){let e=document.createComment("Cond"),t=s=>this.updateNode(e,s);return d(e,[{mount:s=>s.appendChild(e),activate:()=>this.if$.subscribeInit(this.id,t),deactivate:()=>{var s;this.if$.unsubscribe(this.id),(s=this.currentNode)==null||s.deactivate();},unmount:()=>{var s;(s=this.currentNode)==null||s.unmount(),this.currentNode=void 0,e.remove();}}])}updateNode(e,t){let s=t?this.buildNode(this.then):this.buildNode(this.otherwise);try{this.switchNode(e,s);}catch(n){console.error(n);}}buildNode(e){if(typeof e=="function")return e();if(typeof e=="string")return m(e);if(e!==void 0)throw new Error("Then/otherwise should be either string or function")}switchNode(e,t){var s,n,r;(s=this.currentNode)==null||s.deactivate(),(n=this.currentNode)==null||n.unmount(),this.currentNode=t,t!==void 0&&(t.mount(e.parentNode),(r=e.parentNode)==null||r.insertBefore(t,e.nextSibling),t.activate());}};var f=class{constructor(e,t,s){this.anchor=e;this.value=t;this.node=s;}mount(e){let t=this.anchor.parentNode,s=(e==null?void 0:e.node.nextSibling)||null;t!==null&&(this.node.parentNode===null&&this.node.mount(t),t.insertBefore(this.node,s));}activate(e){this.generationId===void 0&&this.node.activate(),this.generationId=e;}deactivate(){this.node.deactivate();}unmount(){this.node.unmount();}};var T=class{constructor(e,t){this.keyFn=e;this.buildFn=t;this.generationId=0;this.items=new Map;}deactivate(){for(let e of this.items.values())e.deactivate();}unmount(){for(let e of this.items.values())e.unmount();this.items.clear(),this.generationId=0;}replace(e,t){this.generationId++;let s=null;for(let[n,r]of t.entries()){let a=this.keyFn(n,r),l=this.getOrInsert(e,s,a,r);l.generationId=this.generationId,s=l;}this.removeStaleItems();}replaceKeys(e,t){for(let[s,n]of t.entries()){let r=this.keyFn(s,n),a=this.items.get(r);a!==void 0&&(this.insertItem(e,a,r,n),a.deactivate(),a.unmount());}}append(e,t){for(let[s,n]of t.entries()){let r=this.keyFn(s,n);this.insertItem(e,null,r,n);}}remove(e){for(let[t,s]of e.entries()){let n=this.keyFn(t,s),r=this.items.get(n);r!==void 0&&(r.deactivate(),r.unmount(),this.items.delete(n));}}getOrInsert(e,t,s,n){let r=this.items.get(s);return r===void 0?this.insertItem(e,t,s,n):r.value===n?r:(r.deactivate(),r.unmount(),this.insertItem(e,t,s,n))}insertItem(e,t,s,n){let r=this.buildFn(s,n),a=new f(e,n,r);return a.mount(t),a.activate(this.generationId),this.items.set(s,a),a}removeStaleItems(){for(let[e,t]of this.items.entries())t.generationId!==this.generationId&&(t.deactivate(),t.unmount(),this.items.delete(e));}};var Ve=({it$:i,buildFn:e,keyFn:t})=>new C(i,e,t).toReactiveNode(),C=class{constructor(e,t,s){this.id=Symbol("Iterable");this.it$=this.toEventObservable(e),this.items=new T(s,t);}toReactiveNode(){let e=document.createComment("Iterable"),t=s=>{switch(s.type){case "replace":return this.items.replace(e,s.items);case "replaceKeys":return this.items.replaceKeys(e,s.items);case "append":return this.items.append(e,s.items);case "remove":return this.items.remove(s.items);default:return console.warn("Unsupported event type",s)}};return d(e,[{mount:s=>s.appendChild(e),activate:()=>this.it$.subscribeInit(this.id,t),deactivate:()=>{this.it$.unsubscribe(this.id),this.items.deactivate();},unmount:()=>{this.items.unmount(),e.remove();}}])}toEventObservable(e){return h(t=>t instanceof Array||t instanceof Map?{type:"replace",items:t}:t,e)}};var qe=(i,...e)=>new w(i,e).toReactiveNode(),w=class{constructor(e,t){this.strings=e;this.holes=t;}toReactiveNode(){let e=this.buildNodes(),t=document.createComment("Template");return d(t,[{mount:s=>this.appendNodes(s,e),activate:()=>{for(let s of e)this.attachObservable(s);},deactivate:()=>{for(let s of e)this.detachObservable(s);},unmount:()=>this.removeNodes(e)}])}buildNodes(){return this.strings.map((e,t)=>{let s=this.holes[t],n={staticNodes:[document.createTextNode(e)],dynamicNode:void 0};return typeof s=="string"?n.staticNodes.push(document.createTextNode(s)):typeof s=="object"&&s!==null&&(n.dynamicNode={node:document.createTextNode(""),observerId:Symbol(`Template${t}`),observable:s}),n})}appendNodes(e,t){for(let{staticNodes:s,dynamicNode:n}of t){for(let r of s)e.appendChild(r);n!==void 0&&e.appendChild(n.node);}}attachObservable(e){if(e===void 0||e.dynamicNode===void 0)return;let{node:t,observerId:s,observable:n}=e.dynamicNode;n.subscribeInit(s,r=>t.data=r);}removeNodes(e){for(let{staticNodes:t,dynamicNode:s}of e){for(let n of t)n.remove();s!==void 0&&s.node.remove();}}detachObservable(e){if(e.dynamicNode===void 0)return;let{observerId:t,observable:s}=e.dynamicNode;s.unsubscribe(t);}};var o=(i,...e)=>{let t=document.createElement(i),s=[];for(let n of e)if(typeof n=="string")s.push(m(n));else if(n instanceof Node)s.push(n);else throw new Error("Unsupported child type");return $(t,[{mount:n=>{n.appendChild(t);for(let r of s)r.mount(t);},activate:()=>{for(let n of s)n.activate();},deactivate:()=>{for(let n of s)n.deactivate();},unmount:()=>{for(let n of s)n.unmount();t.remove();}}])},De={img:i=>o("img").att("src",i),input:i=>o("input").att("type",i),canvas:(...i)=>o("canvas",...i),button:(...i)=>o("button",...i),h1:(...i)=>o("h1",...i),h2:(...i)=>o("h2",...i),h3:(...i)=>o("h3",...i),p:(...i)=>o("p",...i),a:(...i)=>o("a",...i),div:(...i)=>o("div",...i),ul:(...i)=>o("ul",...i),li:(...i)=>o("li",...i),span:(...i)=>o("span",...i),select:(...i)=>o("select",...i)};var q=()=>{let i=[],e=()=>queueMicrotask(()=>{let t=i.toReversed();i.length=0;for(let s of t)s();});return t=>{i.push(t),i.length==1&&e();}},V=q();var Ye=(i,e)=>new E(i,e).toReactiveNode(),E=class{constructor(e,t){this.routes=e;this.opts=t;this.hashChangeListener=()=>this.syncHash();}toReactiveNode(){let e=document.createComment("Router");return d(e,[{mount:t=>{if(this.anchor!==void 0)return console.warn("Router is already active");this.anchor=e,t.appendChild(e);},activate:()=>{this.syncHash(),window.addEventListener("hashchange",this.hashChangeListener);},deactivate:()=>{var t;window.removeEventListener("hashchange",this.hashChangeListener),(t=this.currentRoute)==null||t.deactivate();},unmount:()=>{var t;(t=this.currentRoute)==null||t.unmount(),this.currentRoute=void 0,e.remove();}}])}syncHash(){var t,s;let e=this.getNewRoute();e===this.currentRoute||e===void 0||((t=this.currentRoute)==null||t.deactivate(),(s=this.currentRoute)==null||s.unmount(),this.currentRoute=e,V(()=>{var r;let n=(r=this.anchor)==null?void 0:r.parentElement;n!=null&&(e.mount(n),e.activate());}));}getNewRoute(){let e=location.hash.slice(1)||"/",t=this.isRouteKey(e)?e:this.opts.notFoundRoute;return this.routes[t]}isRouteKey(e){return e in this.routes}};export{R as InputObservable,P as ReactiveArray,f as ReactiveItem,T as ReactiveItemCollection,v as RingQueue,g as ScopedObservable,q as buildMicrotaskRunner,ge as component,Fe as cond,U as dedupObservable,L as inputObservable,Ve as iterable,h as mapObservable,V as microtaskRunner,M as observable,le as once,m as reactiveTextNode,Ye as router,A as scopedObservable,o as tag,De as tags,qe as template,d as toReactiveNode,$ as toTagReactiveNode};//# sourceMappingURL=index.js.map
|
|
2
|
-
//# sourceMappingURL=index.js.map
|
|
1
|
+
class l{observers=new Map;notifyAll=!1;notifySchedule=new Set;get size(){return this.observers.size}scheduleNotify(e){if(!this.notifyAll)this.notifySchedule.add(e)}scheduleNotifyAll(){this.notifySchedule.clear(),this.notifyAll=!0}clearSchedule(){this.notifyAll=!1,this.notifySchedule.clear()}clear(){this.observers.clear()}set(e,t){if(this.observers.has(e))console.warn("Duplicate observer id",e);this.observers.set(e,t)}delete(e){this.observers.delete(e)}notifyTargets(e){if(this.notifyAll)for(let t of this.observers.values())this.notify(t,e);else for(let t of this.notifySchedule)this.notify(this.observers.get(t),e)}resetTargets(){this.notifyAll=!1,this.notifySchedule.clear()}notify(e,t){try{if(e!==void 0)e(t)}catch(i){console.error(i)}}}class p{size=0;head=0;tail=0;items;constructor(e=256){this.items=Array(e)}get isEmpty(){return this.size===0}clear(){this.size=0,this.tail=0,this.head=0}enqueue(e){if(this.size===this.items.length)this.extend();this.items[this.tail]=e,this.tail=(this.tail+1)%this.items.length,this.size++}dequeue(){if(this.size===0)return;let e=this.items[this.head];return this.items[this.head]=void 0,this.head=(this.head+1)%this.items.length,this.size--,e}extend(){let e=Array(this.size*2);for(let t=0;t<this.size;t++)e[t]=this.items[(this.head+t)%this.items.length];this.items=e,this.head=0,this.tail=this.size}}var N=()=>{let e=new WeakMap,t=0,i=1,s=new p,n=new p,o=()=>{while(!0){[s,n]=[n,s],n.clear();let c;while(c=s.dequeue())c.run();if(n.isEmpty)break}},v=()=>queueMicrotask(()=>{o(),i=1,t++});return(c)=>{if(e.get(c)===t)return;if(e.set(c,t),n.enqueue(c),i===0)return;i=0,v()}},d={enqueueSubscription:N(),enqueueUpdate:N()};class O{values;constructor(e){this.values=e}update(e,t){return this.values[e]=t,this}}class u{initializedSize;initializedIndices=new Set;values;constructor(e){this.initializedSize=e;this.values=Array(e).fill(void 0)}update(e,t){if(this.initializedIndices.add(e),this.values[e]=t,this.initializedIndices.size===this.initializedSize)return new O(this.values);else return this}}var h=(e,...t)=>new x(e,t);class x{mapFn;observables;notifier=new l;state;ids;constructor(e,t){this.mapFn=e;this.observables=t;this.ids=Array.from(this.observables,()=>Symbol("MapObservable")),this.state=new u(this.ids.length)}unsubscribeAll(){this.notifier.clear(),this.innerUnubscribe()}unsubscribe(e){this.notifier.delete(e),this.innerUnubscribe()}subscribe(e,t){this.notifier.set(e,t),this.innerSubscribe()}subscribeInit(e,t){this.subscribe(e,t),this.notifier.scheduleNotify(e),d.enqueueSubscription(this)}run(){if(this.state instanceof u)return;this.notifier.notifyTargets(this.mapFn(...this.state.values)),this.notifier.resetTargets()}notifyObservers(e){return(t)=>{if(this.state=this.state.update(e,t),this.state instanceof u)return;this.notifier.scheduleNotifyAll(),d.enqueueUpdate(this)}}innerSubscribe(){if(this.notifier.size!==1)return;for(let[e,t]of this.observables.entries())if(this.ids[e]!==void 0)t.subscribeInit(this.ids[e],this.notifyObservers(e))}innerUnubscribe(){if(this.notifier.size!==0)return;for(let[e,t]of this.observables.entries())if(this.ids[e]!==void 0)t.unsubscribe(this.ids[e]);this.state=new u(this.ids.length)}}var R=(e)=>new g(e);class g{value;notifier=new l;constructor(e){this.value=e}unsubscribeAll(){this.notifier.clear()}unsubscribe(e){this.notifier.delete(e)}subscribe(e,t){this.notifier.set(e,t)}subscribeInit(e,t){this.notifier.set(e,t),this.notifier.scheduleNotify(e),d.enqueueSubscription(this)}update(e){this.value=e(this.value),this.notifier.scheduleNotifyAll(),d.enqueueUpdate(this)}run(){this.notifier.notifyTargets(this.value),this.notifier.resetTargets()}}var I=(e,t=(s,n)=>s==n,i=(s)=>s)=>new S(e,t,i);class S{innerObservable;compareEqualFn;cloneFn;id=Symbol("DedupObservable");state={initialized:!1};boundUpdate=this.updateValue.bind(this);notifier=new l;constructor(e,t,i){this.innerObservable=e;this.compareEqualFn=t;this.cloneFn=i}unsubscribeAll(){this.notifier.clear(),this.innerUnubscribe()}unsubscribe(e){this.notifier.delete(e),this.innerUnubscribe()}subscribe(e,t){this.notifier.set(e,t),this.innerSubscribe()}subscribeInit(e,t){this.subscribe(e,t),this.notifier.scheduleNotify(e),d.enqueueSubscription(this)}run(){if(!this.state.initialized)return;this.notifier.notifyTargets(this.state.value),this.notifier.resetTargets()}innerSubscribe(){if(this.notifier.size!==1)return;this.innerObservable.subscribeInit(this.id,this.boundUpdate)}updateValue(e){if(this.state.initialized&&this.compareEqualFn(this.state.value,e))return;if(this.state.initialized)this.state.value=this.cloneFn(e);else this.state={initialized:!0,value:this.cloneFn(e)};this.notifier.scheduleNotifyAll(),d.enqueueUpdate(this)}innerUnubscribe(){if(this.notifier.size!==0)return;this.state={initialized:!1},this.innerObservable.unsubscribe(this.id)}}var K=(e)=>new k(e);class k{innerObservable;aliases=new Map;constructor(e){this.innerObservable=e}unsubscribeAll(){for(let e of this.aliases.values())this.innerObservable.unsubscribe(e);this.aliases.clear()}unsubscribe(e){let t=this.aliases.get(e);if(t===void 0)return;this.aliases.delete(e),this.innerObservable.unsubscribe(t)}subscribe(e,t){let i=Symbol("ScopedObservable");this.aliases.set(e,i),this.innerObservable.subscribe(i,t)}subscribeInit(e,t){let i=Symbol("ScopedObservable");this.aliases.set(e,i),this.innerObservable.subscribeInit(i,t)}update(e){if("update"in this.innerObservable)this.innerObservable.update(e)}}var C=(e,t)=>new w(e,t);class w{input;value$;aliases=new Map;constructor(e,t){this.input=e;this.value$=t}subscribe(e,t){if(this.aliases.has(e))return;let i=Symbol("InputObservable");this.aliases.set(e,i),this.value$.subscribe(i,this.toInputObserver(t))}subscribeInit(e,t){if(this.aliases.has(e))return;let i=Symbol("InputObservable");this.aliases.set(e,i),this.value$.subscribeInit(i,this.toInputObserver(t))}unsubscribe(e){let t=this.aliases.get(e);if(t===void 0)return;this.value$.unsubscribe(t),this.aliases.delete(e)}unsubscribeAll(){for(let e of this.aliases.values())this.value$.unsubscribe(e);this.aliases.clear()}update(e){this.value$.update(e)}toInputObserver(e){return(t)=>{if(this.input.value!==t)e(t)}}}var le=(e,...t)=>{let i=Symbol("Once"),s=h((...n)=>n,...t);s.subscribeInit(i,(n)=>{s.unsubscribe(i),e(...n)})};var b;((n)=>{n[n.Active=0]="Active";n[n.Inactive=1]="Inactive";n[n.Mounted=2]="Mounted";n[n.Unmounted=3]="Unmounted"})(b||={});var f=(e)=>{let t=3;return{mount:(i)=>{if(t!==3)return console.warn(`Mounting in status ${b[t]}`);for(let s of e)s.mount(i);t=2},activate:()=>{if(t!==2&&t!==1)return console.warn(`Activating in status ${b[t]}`);for(let i of e)i.activate();t=0},deactivate:()=>{if(t!==0)return console.warn(`Deactivating in status ${b[t]}`);for(let i of e)i.deactivate();t=1},unmount(){if(t!==1)return console.warn(`Unmounting in status ${b[t]}`);for(let i of e)i.unmount();t=3}}};var E=(e,t)=>{let i=[...t],s=V(i),n=F(i),o=f(i);return Object.assign(e,n,s,o)},a=(e,t)=>{let i=[...t],s=F(i),n=f(i);return Object.assign(e,s,n)},V=(e)=>({att:function(t,i){return this.setAttribute(t,i),this},class$:function(t){return this.att$("class",t)},att$:function(t,i){let s=Symbol(`Attribute: ${t}`);return e.push({mount:(n)=>{return},activate:()=>i.subscribeInit(s,(n)=>this.setAttribute(t,n)),deactivate:()=>i.unsubscribe(s),unmount:()=>{return}}),this},model$:function(t){let i=C(this,t);return this.prop$("value",i).listen("input",(s)=>i.update((n)=>this.value))},prop$:function(t,i){let s=Symbol(`Property: ${t.toString()}`);return e.push({mount:(n)=>{return},activate:()=>i.subscribeInit(s,(n)=>this[t]=n),deactivate:()=>i.unsubscribe(s),unmount:()=>{return}}),this}}),F=(e)=>({clk:function(t){return this.listen("click",t)},listen:function(t,i){return e.push({mount:(s)=>{return},activate:()=>this.addEventListener(t,i),deactivate:()=>this.removeEventListener(t,i),unmount:()=>{return}}),this}});var B={observables:()=>({}),derivedObservables:()=>({}),cache:!1,props:{}},Re=(e)=>new M(Object.assign({},B,e)).toReactiveNode();class U{parent;props;node;constructor(e,t){this.parent=e;this.props=t}}class M{opts;node;observables;context;constructor(e){this.opts=e}toReactiveNode(){return a(document.createComment("Component"),[{mount:(e)=>{if(this.node===void 0||!this.opts.cache)this.setupNode(e);this.node?.mount(e)},activate:()=>this.node?.activate(),deactivate:()=>{if(this.node?.deactivate(),this.observables===void 0)return;for(let e in this.observables)this.observables[e]?.unsubscribeAll()},unmount:()=>{if(this.node?.unmount(),!this.opts.cache)this.cleanUp()}}])}setupNode(e){this.observables=this.buildObservables(),this.context=new U(e,this.opts.props),this.node=this.opts.render.call(this.context,this.observables),this.context.node=this.node}cleanUp(){if(this.context!==void 0)this.context.node=void 0;this.node=void 0,this.observables=void 0}buildObservables(){let e=this.opts.observables(),t=this.opts.derivedObservables(e),i=Object.assign({},e,t);return this.toScoped(i)}toScoped(e){let t={};for(let i in e){let s=i;t[s]=K(e[s])}return t}}class H{items;observables=[];constructor(e=[]){this.items=e}get observable$(){let e=R({type:"replace",items:this.items});return this.observables.push(new WeakRef(e)),e}push(...e){this.items.push(...e),this.emit({type:"append",items:e})}pop(){if(this.items.length===0)return;let e=this.items.length-1,t=this.items.pop();return this.emit({type:"remove",items:new Map().set(e,t)}),t}remove(e){if(e.length==0)return;let t=new Map;for(let i of e){if(!(i in this.items))continue;t.set(i,this.items[i]),delete this.items[i]}this.emit({type:"remove",items:t})}replace(e){this.items=e,this.emit({type:"replace",items:e})}replaceKeys(e){for(let[t,i]of e.entries()){if(!(t in this.items))continue;this.items[t]=i}this.emit({type:"replaceKeys",items:e})}emit(e){let t=(i)=>e;for(let i of this.observables)i.deref()?.update(t)}}var m=(e)=>{let t=document.createTextNode(e);return a(t,[{mount:(s)=>s.appendChild(t),activate:()=>{return},deactivate:()=>{return},unmount:()=>t.remove()}])};var Ae=({if$:e,then:t,otherwise:i})=>new A(I(e),t,i).toReactiveNode();class A{if$;then;otherwise;id=Symbol("Cond");currentNode;constructor(e,t,i){this.if$=e;this.then=t;this.otherwise=i}toReactiveNode(){let e=document.createComment("Cond"),t=(i)=>this.updateNode(e,i);return a(e,[{mount:(i)=>i.appendChild(e),activate:()=>this.if$.subscribeInit(this.id,t),deactivate:()=>{this.if$.unsubscribe(this.id),this.currentNode?.deactivate()},unmount:()=>{this.currentNode?.unmount(),this.currentNode=void 0,e.remove()}}])}updateNode(e,t){let i=t?this.buildNode(this.then):this.buildNode(this.otherwise);try{this.switchNode(e,i)}catch(s){console.error(s)}}buildNode(e){if(typeof e==="function")return e();if(typeof e==="string")return m(e);if(e===void 0)return;throw Error("Then/otherwise should be either string or function")}switchNode(e,t){if(this.currentNode?.deactivate(),this.currentNode?.unmount(),this.currentNode=t,t===void 0)return;t.mount(e.parentNode),e.parentNode?.insertBefore(t,e.nextSibling),t.activate()}}class T{anchor;value;node;generationId;constructor(e,t,i){this.anchor=e;this.value=t;this.node=i}mount(e){let t=this.anchor.parentNode,i=e?.node.nextSibling||null;if(t===null)return;if(this.node.parentNode===null)this.node.mount(t);t.insertBefore(this.node,i)}activate(e){if(this.generationId===void 0)this.node.activate();this.generationId=e}deactivate(){this.node.deactivate()}unmount(){this.node.unmount()}}class y{keyFn;buildFn;generationId=0;items=new Map;constructor(e,t){this.keyFn=e;this.buildFn=t}deactivate(){for(let e of this.items.values())e.deactivate()}unmount(){for(let e of this.items.values())e.unmount();this.items.clear(),this.generationId=0}replace(e,t){this.generationId++;let i=null;for(let[s,n]of t.entries()){let o=this.keyFn(s,n),v=this.getOrInsert(e,i,o,n);v.generationId=this.generationId,i=v}this.removeStaleItems()}replaceKeys(e,t){for(let[i,s]of t.entries()){let n=this.keyFn(i,s),o=this.items.get(n);if(o===void 0)continue;this.insertItem(e,o,n,s),o.deactivate(),o.unmount()}}append(e,t){for(let[i,s]of t.entries()){let n=this.keyFn(i,s);this.insertItem(e,null,n,s)}}remove(e){for(let[t,i]of e.entries()){let s=this.keyFn(t,i),n=this.items.get(s);if(n===void 0)continue;n.deactivate(),n.unmount(),this.items.delete(s)}}getOrInsert(e,t,i,s){let n=this.items.get(i);if(n===void 0)return this.insertItem(e,t,i,s);if(n.value===s)return n;return n.deactivate(),n.unmount(),this.insertItem(e,t,i,s)}insertItem(e,t,i,s){let n=this.buildFn(i,s),o=new T(e,s,n);return o.mount(t),o.activate(this.generationId),this.items.set(i,o),o}removeStaleItems(){for(let[e,t]of this.items.entries()){if(t.generationId===this.generationId)continue;t.deactivate(),t.unmount(),this.items.delete(e)}}}var qe=({it$:e,buildFn:t,keyFn:i})=>new L(e,t,i).toReactiveNode();class L{id=Symbol("Iterable");it$;items;constructor(e,t,i){this.it$=this.toEventObservable(e),this.items=new y(i,t)}toReactiveNode(){let e=document.createComment("Iterable"),t=(i)=>{switch(i.type){case"replace":return this.items.replace(e,i.items);case"replaceKeys":return this.items.replaceKeys(e,i.items);case"append":return this.items.append(e,i.items);case"remove":return this.items.remove(i.items);default:return console.warn("Unsupported event type",i)}};return a(e,[{mount:(i)=>i.appendChild(e),activate:()=>this.it$.subscribeInit(this.id,t),deactivate:()=>{this.it$.unsubscribe(this.id),this.items.deactivate()},unmount:()=>{this.items.unmount(),e.remove()}}])}toEventObservable(e){return h((t)=>{if(t instanceof Array||t instanceof Map)return{type:"replace",items:t};return t},e)}}var De=(e,...t)=>new z(e,t).toReactiveNode();class z{strings;holes;constructor(e,t){this.strings=e;this.holes=t}toReactiveNode(){let e=this.buildNodes(),t=document.createComment("Template");return a(t,[{mount:(i)=>this.appendNodes(i,e),activate:()=>{for(let i of e)this.attachObservable(i)},deactivate:()=>{for(let i of e)this.detachObservable(i)},unmount:()=>this.removeNodes(e)}])}buildNodes(){return this.strings.map((e,t)=>{let i=this.holes[t],s={staticNodes:[document.createTextNode(e)],dynamicNode:void 0};if(typeof i==="string")s.staticNodes.push(document.createTextNode(i));else if(typeof i==="object"&&i!==null)s.dynamicNode={node:document.createTextNode(""),observerId:Symbol(`Template${t}`),observable:i};return s})}appendNodes(e,t){for(let{staticNodes:i,dynamicNode:s}of t){for(let n of i)e.appendChild(n);if(s!==void 0)e.appendChild(s.node)}}attachObservable(e){if(e===void 0)return;if(e.dynamicNode===void 0)return;let{node:t,observerId:i,observable:s}=e.dynamicNode;s.subscribeInit(i,(n)=>t.data=n)}removeNodes(e){for(let{staticNodes:t,dynamicNode:i}of e){for(let s of t)s.remove();if(i!==void 0)i.node.remove()}}detachObservable(e){if(e.dynamicNode===void 0)return;let{observerId:t,observable:i}=e.dynamicNode;i.unsubscribe(t)}}var r=(e,...t)=>{let i=document.createElement(e),s=[];for(let n of t)if(typeof n==="string")s.push(m(n));else if(n instanceof Node)s.push(n);else throw Error("Unsupported child type");return E(i,[{mount:(n)=>{n.appendChild(i);for(let o of s)o.mount(i)},activate:()=>{for(let n of s)n.activate()},deactivate:()=>{for(let n of s)n.deactivate()},unmount:()=>{for(let n of s)n.unmount();i.remove()}}])},Je={img:(e)=>r("img").att("src",e),input:(e)=>r("input").att("type",e),canvas:(...e)=>r("canvas",...e),button:(...e)=>r("button",...e),h1:(...e)=>r("h1",...e),h2:(...e)=>r("h2",...e),h3:(...e)=>r("h3",...e),p:(...e)=>r("p",...e),a:(...e)=>r("a",...e),div:(...e)=>r("div",...e),ul:(...e)=>r("ul",...e),li:(...e)=>r("li",...e),span:(...e)=>r("span",...e),select:(...e)=>r("select",...e),option:(...e)=>r("option",...e)};var q=()=>{let e=[],t=()=>queueMicrotask(()=>{let i=e.toReversed();e.length=0;for(let s of i)s()});return(i)=>{if(e.push(i),e.length==1)t()}},$=q();var ct=(e,t)=>new P(e,t).toReactiveNode();class P{routes;opts;anchor;currentRoute;hashChangeListener=()=>this.syncHash();constructor(e,t){this.routes=e;this.opts=t}toReactiveNode(){let e=document.createComment("Router");return a(e,[{mount:(t)=>{if(this.anchor!==void 0)return console.warn("Router is already active");this.anchor=e,t.appendChild(e)},activate:()=>{this.syncHash(),window.addEventListener("hashchange",this.hashChangeListener)},deactivate:()=>{window.removeEventListener("hashchange",this.hashChangeListener),this.currentRoute?.deactivate()},unmount:()=>{this.currentRoute?.unmount(),this.currentRoute=void 0,e.remove()}}])}syncHash(){let e=this.getNewRoute();if(e===this.currentRoute||e===void 0)return;this.currentRoute?.deactivate(),this.currentRoute?.unmount(),this.currentRoute=e,$(()=>{let t=this.anchor?.parentElement;if(t===null||t===void 0)return;e.mount(t),e.activate()})}getNewRoute(){let e=location.hash.slice(1)||"/",t=this.isRouteKey(e)?e:this.opts.notFoundRoute;return this.routes[t]}isRouteKey(e){return e in this.routes}}export{E as toTagReactiveNode,a as toReactiveNode,De as template,Je as tags,r as tag,K as scopedObservable,ct as router,m as reactiveTextNode,le as once,R as observable,$ as microtaskRunner,h as mapObservable,qe as iterable,C as inputObservable,I as dedupObservable,Ae as cond,Re as component,q as buildMicrotaskRunner,k as ScopedObservable,p as RingQueue,y as ReactiveItemCollection,T as ReactiveItem,H as ReactiveArray,w as InputObservable};
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@realglebivanov/reactive",
|
|
3
|
-
"version": "1.0.
|
|
3
|
+
"version": "1.0.7",
|
|
4
4
|
"description": "A simple and permissive observable-driven UI toolkit",
|
|
5
5
|
"type": "module",
|
|
6
6
|
"main": "./dist/index.js",
|
|
@@ -24,9 +24,11 @@
|
|
|
24
24
|
],
|
|
25
25
|
"sideEffects": false,
|
|
26
26
|
"scripts": {
|
|
27
|
-
"build": "
|
|
28
|
-
"watch": "
|
|
29
|
-
"
|
|
27
|
+
"build": "bunup --filter dist",
|
|
28
|
+
"watch": "bunup --watch --filter dist",
|
|
29
|
+
"demo:build": "bunup --filter demo",
|
|
30
|
+
"demo:watch": "bunup --watch --filter demo",
|
|
31
|
+
"demo:serve": "bun x serve demo/",
|
|
30
32
|
"test": "echo \"Error: no test specified\" && exit 1"
|
|
31
33
|
},
|
|
32
34
|
"repository": {
|
|
@@ -40,11 +42,11 @@
|
|
|
40
42
|
},
|
|
41
43
|
"homepage": "https://github.com/realglebivanov/reactive#readme",
|
|
42
44
|
"devDependencies": {
|
|
43
|
-
"
|
|
45
|
+
"bunup": "^0.16.26",
|
|
44
46
|
"typescript": "^5.9.3"
|
|
45
47
|
},
|
|
46
48
|
"files": [
|
|
47
49
|
"dist/index.js",
|
|
48
50
|
"dist/index.d.ts"
|
|
49
51
|
]
|
|
50
|
-
}
|
|
52
|
+
}
|