@zeus-js/runtime-dom 0.1.0-beta.8 → 0.1.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/runtime-dom.cjs.js +1799 -220
- package/dist/runtime-dom.cjs.prod.js +1735 -219
- package/dist/runtime-dom.d.ts +33 -5
- package/dist/runtime-dom.esm-browser.js +426 -204
- package/dist/runtime-dom.esm-browser.prod.js +1 -1
- package/dist/runtime-dom.esm-bundler.js +1774 -201
- package/dist/runtime-dom.global.js +431 -203
- package/dist/runtime-dom.global.prod.js +1 -1
- package/package.json +2 -2
package/dist/runtime-dom.cjs.js
CHANGED
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
/**
|
|
2
|
-
* runtime-dom v0.1.0-beta.
|
|
2
|
+
* runtime-dom v0.1.0-beta.9
|
|
3
3
|
* (c) 2026 baicie
|
|
4
4
|
* Released under the MIT License.
|
|
5
5
|
**/
|
|
@@ -7,7 +7,6 @@ Object.defineProperties(exports, {
|
|
|
7
7
|
__esModule: { value: true },
|
|
8
8
|
[Symbol.toStringTag]: { value: "Module" }
|
|
9
9
|
});
|
|
10
|
-
let _zeus_js_signal = require("@zeus-js/signal");
|
|
11
10
|
//#region packages/core/runtime-dom/src/template.ts
|
|
12
11
|
function template(html, _isImportNode = false, _isSVG = false, _isMathML = false) {
|
|
13
12
|
const t = document.createElement("template");
|
|
@@ -17,6 +16,1418 @@ function template(html, _isImportNode = false, _isSVG = false, _isMathML = false
|
|
|
17
16
|
};
|
|
18
17
|
}
|
|
19
18
|
//#endregion
|
|
19
|
+
//#region packages/core/shared/src/makeMap.ts
|
|
20
|
+
/**
|
|
21
|
+
* Make a map and return a function for checking if a key
|
|
22
|
+
* is in that map.
|
|
23
|
+
* IMPORTANT: all calls of this function must be prefixed with
|
|
24
|
+
* \/\*#\_\_PURE\_\_\*\/
|
|
25
|
+
* So that rollup can tree-shake them if necessary.
|
|
26
|
+
*/
|
|
27
|
+
/*@__NO_SIDE_EFFECTS__*/
|
|
28
|
+
function makeMap(str) {
|
|
29
|
+
const map = Object.create(null);
|
|
30
|
+
for (const key of str.split(",")) map[key] = 1;
|
|
31
|
+
return (val) => val in map;
|
|
32
|
+
}
|
|
33
|
+
Object.freeze({});
|
|
34
|
+
Object.freeze([]);
|
|
35
|
+
const extend = Object.assign;
|
|
36
|
+
const hasOwnProperty$1 = Object.prototype.hasOwnProperty;
|
|
37
|
+
const hasOwn = (val, key) => hasOwnProperty$1.call(val, key);
|
|
38
|
+
const isArray = Array.isArray;
|
|
39
|
+
const isMap = (val) => toTypeString(val) === "[object Map]";
|
|
40
|
+
const isString = (val) => typeof val === "string";
|
|
41
|
+
const isSymbol = (val) => typeof val === "symbol";
|
|
42
|
+
const isObject = (val) => val !== null && typeof val === "object";
|
|
43
|
+
const objectToString = Object.prototype.toString;
|
|
44
|
+
const toTypeString = (value) => objectToString.call(value);
|
|
45
|
+
const toRawType = (value) => {
|
|
46
|
+
return toTypeString(value).slice(8, -1);
|
|
47
|
+
};
|
|
48
|
+
const isIntegerKey = (key) => isString(key) && key !== "NaN" && key[0] !== "-" && "" + parseInt(key, 10) === key;
|
|
49
|
+
const cacheStringFunction = (fn) => {
|
|
50
|
+
const cache = Object.create(null);
|
|
51
|
+
return ((str) => {
|
|
52
|
+
return cache[str] || (cache[str] = fn(str));
|
|
53
|
+
});
|
|
54
|
+
};
|
|
55
|
+
/**
|
|
56
|
+
* @private
|
|
57
|
+
*/
|
|
58
|
+
const capitalize = cacheStringFunction((str) => {
|
|
59
|
+
return str.charAt(0).toUpperCase() + str.slice(1);
|
|
60
|
+
});
|
|
61
|
+
const hasChanged = (value, oldValue) => !Object.is(value, oldValue);
|
|
62
|
+
//#endregion
|
|
63
|
+
//#region packages/core/signal/src/warning.ts
|
|
64
|
+
function warn(msg, ...args) {
|
|
65
|
+
console.warn(`[Zeus warn] ${msg}`, ...args);
|
|
66
|
+
}
|
|
67
|
+
//#endregion
|
|
68
|
+
//#region packages/core/signal/src/effectScope.ts
|
|
69
|
+
let activeEffectScope;
|
|
70
|
+
var EffectScope = class {
|
|
71
|
+
constructor(detached = false) {
|
|
72
|
+
this.detached = detached;
|
|
73
|
+
this._active = true;
|
|
74
|
+
this._on = 0;
|
|
75
|
+
this.effects = [];
|
|
76
|
+
this.cleanups = [];
|
|
77
|
+
this._isPaused = false;
|
|
78
|
+
this._warnOnRun = true;
|
|
79
|
+
this.__v_skip = true;
|
|
80
|
+
if (!detached && activeEffectScope) if (activeEffectScope.active) {
|
|
81
|
+
this.parent = activeEffectScope;
|
|
82
|
+
this.index = (activeEffectScope.scopes || (activeEffectScope.scopes = [])).push(this) - 1;
|
|
83
|
+
} else {
|
|
84
|
+
this._active = false;
|
|
85
|
+
this._warnOnRun = false;
|
|
86
|
+
}
|
|
87
|
+
}
|
|
88
|
+
get active() {
|
|
89
|
+
return this._active;
|
|
90
|
+
}
|
|
91
|
+
pause() {
|
|
92
|
+
if (this._active) {
|
|
93
|
+
this._isPaused = true;
|
|
94
|
+
let i, l;
|
|
95
|
+
if (this.scopes) for (i = 0, l = this.scopes.length; i < l; i++) this.scopes[i].pause();
|
|
96
|
+
for (i = 0, l = this.effects.length; i < l; i++) this.effects[i].pause();
|
|
97
|
+
}
|
|
98
|
+
}
|
|
99
|
+
/**
|
|
100
|
+
* Resumes the effect scope, including all child scopes and effects.
|
|
101
|
+
*/
|
|
102
|
+
resume() {
|
|
103
|
+
if (this._active) {
|
|
104
|
+
if (this._isPaused) {
|
|
105
|
+
this._isPaused = false;
|
|
106
|
+
let i, l;
|
|
107
|
+
if (this.scopes) for (i = 0, l = this.scopes.length; i < l; i++) this.scopes[i].resume();
|
|
108
|
+
for (i = 0, l = this.effects.length; i < l; i++) this.effects[i].resume();
|
|
109
|
+
}
|
|
110
|
+
}
|
|
111
|
+
}
|
|
112
|
+
run(fn) {
|
|
113
|
+
if (this._active) {
|
|
114
|
+
const currentEffectScope = activeEffectScope;
|
|
115
|
+
try {
|
|
116
|
+
activeEffectScope = this;
|
|
117
|
+
return fn();
|
|
118
|
+
} finally {
|
|
119
|
+
activeEffectScope = currentEffectScope;
|
|
120
|
+
}
|
|
121
|
+
} else if (this._warnOnRun) warn(`cannot run an inactive effect scope.`);
|
|
122
|
+
}
|
|
123
|
+
/**
|
|
124
|
+
* This should only be called on non-detached scopes
|
|
125
|
+
* @internal
|
|
126
|
+
*/
|
|
127
|
+
on() {
|
|
128
|
+
if (++this._on === 1) {
|
|
129
|
+
this.prevScope = activeEffectScope;
|
|
130
|
+
activeEffectScope = this;
|
|
131
|
+
}
|
|
132
|
+
}
|
|
133
|
+
/**
|
|
134
|
+
* This should only be called on non-detached scopes
|
|
135
|
+
* @internal
|
|
136
|
+
*/
|
|
137
|
+
off() {
|
|
138
|
+
if (this._on > 0 && --this._on === 0) {
|
|
139
|
+
if (activeEffectScope === this) activeEffectScope = this.prevScope;
|
|
140
|
+
else {
|
|
141
|
+
let current = activeEffectScope;
|
|
142
|
+
while (current) {
|
|
143
|
+
if (current.prevScope === this) {
|
|
144
|
+
current.prevScope = this.prevScope;
|
|
145
|
+
break;
|
|
146
|
+
}
|
|
147
|
+
current = current.prevScope;
|
|
148
|
+
}
|
|
149
|
+
}
|
|
150
|
+
this.prevScope = void 0;
|
|
151
|
+
}
|
|
152
|
+
}
|
|
153
|
+
stop(fromParent) {
|
|
154
|
+
if (this._active) {
|
|
155
|
+
this._active = false;
|
|
156
|
+
let i, l;
|
|
157
|
+
for (i = 0, l = this.effects.length; i < l; i++) this.effects[i].stop();
|
|
158
|
+
this.effects.length = 0;
|
|
159
|
+
for (i = 0, l = this.cleanups.length; i < l; i++) this.cleanups[i]();
|
|
160
|
+
this.cleanups.length = 0;
|
|
161
|
+
if (this.scopes) {
|
|
162
|
+
for (i = 0, l = this.scopes.length; i < l; i++) this.scopes[i].stop(true);
|
|
163
|
+
this.scopes.length = 0;
|
|
164
|
+
}
|
|
165
|
+
if (!this.detached && this.parent && !fromParent) {
|
|
166
|
+
const last = this.parent.scopes.pop();
|
|
167
|
+
if (last && last !== this) {
|
|
168
|
+
this.parent.scopes[this.index] = last;
|
|
169
|
+
last.index = this.index;
|
|
170
|
+
}
|
|
171
|
+
}
|
|
172
|
+
this.parent = void 0;
|
|
173
|
+
}
|
|
174
|
+
}
|
|
175
|
+
};
|
|
176
|
+
/**
|
|
177
|
+
* Creates an effect scope object which can capture the reactive effects (i.e.
|
|
178
|
+
* computed and watchers) created within it so that these effects can be
|
|
179
|
+
* disposed together. For detailed use cases of this API, please consult its
|
|
180
|
+
* corresponding {@link https://github.com/vuejs/rfcs/blob/master/active-rfcs/0041-reactivity-effect-scope.md | RFC}.
|
|
181
|
+
*
|
|
182
|
+
* @param detached - Can be used to create a "detached" effect scope.
|
|
183
|
+
* @see {@link https://vuejs.org/api/reactivity-advanced.html#effectscope}
|
|
184
|
+
*/
|
|
185
|
+
function effectScope(detached) {
|
|
186
|
+
return new EffectScope(detached);
|
|
187
|
+
}
|
|
188
|
+
/**
|
|
189
|
+
* Returns the current active effect scope if there is one.
|
|
190
|
+
*
|
|
191
|
+
* @see {@link https://vuejs.org/api/reactivity-advanced.html#getcurrentscope}
|
|
192
|
+
*/
|
|
193
|
+
function getCurrentScope() {
|
|
194
|
+
return activeEffectScope;
|
|
195
|
+
}
|
|
196
|
+
/**
|
|
197
|
+
* Registers a dispose callback on the current active effect scope. The
|
|
198
|
+
* callback will be invoked when the associated effect scope is stopped.
|
|
199
|
+
*
|
|
200
|
+
* @param fn - The callback function to attach to the scope's cleanup.
|
|
201
|
+
* @see {@link https://vuejs.org/api/reactivity-advanced.html#onscopedispose}
|
|
202
|
+
*/
|
|
203
|
+
function onScopeDispose(fn, failSilently = false) {
|
|
204
|
+
if (activeEffectScope) activeEffectScope.cleanups.push(fn);
|
|
205
|
+
else if (!failSilently) warn("onScopeDispose() is called when there is no active effect scope to be associated with.");
|
|
206
|
+
}
|
|
207
|
+
//#endregion
|
|
208
|
+
//#region packages/core/signal/src/effect.ts
|
|
209
|
+
let activeSub;
|
|
210
|
+
const pausedQueueEffects = /* @__PURE__ */ new WeakSet();
|
|
211
|
+
var ReactiveEffect = class {
|
|
212
|
+
constructor(fn) {
|
|
213
|
+
this.fn = fn;
|
|
214
|
+
this.deps = void 0;
|
|
215
|
+
this.depsTail = void 0;
|
|
216
|
+
this.flags = 5;
|
|
217
|
+
this.next = void 0;
|
|
218
|
+
this.cleanups = void 0;
|
|
219
|
+
this.scheduler = void 0;
|
|
220
|
+
this.scope = activeEffectScope;
|
|
221
|
+
if (activeEffectScope) if (activeEffectScope.active) activeEffectScope.effects.push(this);
|
|
222
|
+
else this.flags &= -2;
|
|
223
|
+
}
|
|
224
|
+
pause() {
|
|
225
|
+
this.flags |= 64;
|
|
226
|
+
}
|
|
227
|
+
resume() {
|
|
228
|
+
if (this.flags & 64) {
|
|
229
|
+
this.flags &= -65;
|
|
230
|
+
if (pausedQueueEffects.has(this)) {
|
|
231
|
+
pausedQueueEffects.delete(this);
|
|
232
|
+
this.trigger();
|
|
233
|
+
}
|
|
234
|
+
}
|
|
235
|
+
}
|
|
236
|
+
/**
|
|
237
|
+
* @internal
|
|
238
|
+
*/
|
|
239
|
+
notify() {
|
|
240
|
+
if (this.flags & 2 && !(this.flags & 32)) return;
|
|
241
|
+
if (!(this.flags & 8)) queueSubscriber(this);
|
|
242
|
+
}
|
|
243
|
+
run() {
|
|
244
|
+
if (!(this.flags & 1)) return this.fn();
|
|
245
|
+
this.flags |= 2;
|
|
246
|
+
cleanupEffect(this);
|
|
247
|
+
prepareDeps(this);
|
|
248
|
+
const prevEffect = activeSub;
|
|
249
|
+
const prevShouldTrack = shouldTrack;
|
|
250
|
+
activeSub = this;
|
|
251
|
+
shouldTrack = true;
|
|
252
|
+
try {
|
|
253
|
+
return this.fn();
|
|
254
|
+
} finally {
|
|
255
|
+
if (activeSub !== this) warn("Active effect was not restored correctly - this is likely a Vue internal bug.");
|
|
256
|
+
cleanupDeps(this);
|
|
257
|
+
activeSub = prevEffect;
|
|
258
|
+
shouldTrack = prevShouldTrack;
|
|
259
|
+
this.flags &= -3;
|
|
260
|
+
}
|
|
261
|
+
}
|
|
262
|
+
stop() {
|
|
263
|
+
if (this.flags & 1) {
|
|
264
|
+
for (let link = this.deps; link; link = link.nextDep) removeSub(link);
|
|
265
|
+
this.deps = this.depsTail = void 0;
|
|
266
|
+
cleanupEffect(this);
|
|
267
|
+
this.onStop && this.onStop();
|
|
268
|
+
this.flags &= -2;
|
|
269
|
+
}
|
|
270
|
+
}
|
|
271
|
+
trigger() {
|
|
272
|
+
if (this.flags & 64) pausedQueueEffects.add(this);
|
|
273
|
+
else if (this.scheduler) this.scheduler();
|
|
274
|
+
else this.runIfDirty();
|
|
275
|
+
}
|
|
276
|
+
/**
|
|
277
|
+
* @internal
|
|
278
|
+
*/
|
|
279
|
+
runIfDirty() {
|
|
280
|
+
if (isDirty(this)) this.run();
|
|
281
|
+
}
|
|
282
|
+
get dirty() {
|
|
283
|
+
return isDirty(this);
|
|
284
|
+
}
|
|
285
|
+
};
|
|
286
|
+
/**
|
|
287
|
+
* For debugging
|
|
288
|
+
*/
|
|
289
|
+
let batchDepth = 0;
|
|
290
|
+
let batchedSub;
|
|
291
|
+
let batchedComputed;
|
|
292
|
+
/**
|
|
293
|
+
* @internal
|
|
294
|
+
*/
|
|
295
|
+
function queueSubscriber(sub, isComputed = false) {
|
|
296
|
+
sub.flags |= 8;
|
|
297
|
+
if (isComputed) {
|
|
298
|
+
sub.next = batchedComputed;
|
|
299
|
+
batchedComputed = sub;
|
|
300
|
+
return;
|
|
301
|
+
}
|
|
302
|
+
sub.next = batchedSub;
|
|
303
|
+
batchedSub = sub;
|
|
304
|
+
}
|
|
305
|
+
/**
|
|
306
|
+
* @internal
|
|
307
|
+
*/
|
|
308
|
+
function startBatch() {
|
|
309
|
+
batchDepth++;
|
|
310
|
+
}
|
|
311
|
+
/**
|
|
312
|
+
* Run batched effects when all batches have ended
|
|
313
|
+
* @internal
|
|
314
|
+
*/
|
|
315
|
+
function endBatch() {
|
|
316
|
+
if (--batchDepth > 0) return;
|
|
317
|
+
if (batchedComputed) {
|
|
318
|
+
let e = batchedComputed;
|
|
319
|
+
batchedComputed = void 0;
|
|
320
|
+
while (e) {
|
|
321
|
+
const next = e.next;
|
|
322
|
+
e.next = void 0;
|
|
323
|
+
e.flags &= -9;
|
|
324
|
+
e = next;
|
|
325
|
+
}
|
|
326
|
+
}
|
|
327
|
+
let error;
|
|
328
|
+
while (batchedSub) {
|
|
329
|
+
let e = batchedSub;
|
|
330
|
+
batchedSub = void 0;
|
|
331
|
+
while (e) {
|
|
332
|
+
const next = e.next;
|
|
333
|
+
e.next = void 0;
|
|
334
|
+
e.flags &= -9;
|
|
335
|
+
if (e.flags & 1) try {
|
|
336
|
+
e.trigger();
|
|
337
|
+
} catch (err) {
|
|
338
|
+
if (!error) error = err;
|
|
339
|
+
}
|
|
340
|
+
e = next;
|
|
341
|
+
}
|
|
342
|
+
}
|
|
343
|
+
if (error) throw error;
|
|
344
|
+
}
|
|
345
|
+
function prepareDeps(sub) {
|
|
346
|
+
for (let link = sub.deps; link; link = link.nextDep) {
|
|
347
|
+
link.version = -1;
|
|
348
|
+
link.prevActiveLink = link.dep.activeLink;
|
|
349
|
+
link.dep.activeLink = link;
|
|
350
|
+
}
|
|
351
|
+
}
|
|
352
|
+
function cleanupDeps(sub) {
|
|
353
|
+
let head;
|
|
354
|
+
let tail = sub.depsTail;
|
|
355
|
+
let link = tail;
|
|
356
|
+
while (link) {
|
|
357
|
+
const prev = link.prevDep;
|
|
358
|
+
if (link.version === -1) {
|
|
359
|
+
if (link === tail) tail = prev;
|
|
360
|
+
removeSub(link);
|
|
361
|
+
removeDep(link);
|
|
362
|
+
} else head = link;
|
|
363
|
+
link.dep.activeLink = link.prevActiveLink;
|
|
364
|
+
link.prevActiveLink = void 0;
|
|
365
|
+
link = prev;
|
|
366
|
+
}
|
|
367
|
+
sub.deps = head;
|
|
368
|
+
sub.depsTail = tail;
|
|
369
|
+
}
|
|
370
|
+
function isDirty(sub) {
|
|
371
|
+
for (let link = sub.deps; link; link = link.nextDep) if (link.dep.version !== link.version || link.dep.computed && (refreshComputed(link.dep.computed) || link.dep.version !== link.version)) return true;
|
|
372
|
+
return false;
|
|
373
|
+
}
|
|
374
|
+
/**
|
|
375
|
+
* Returning false indicates the refresh failed
|
|
376
|
+
* @internal
|
|
377
|
+
*/
|
|
378
|
+
function refreshComputed(computed) {
|
|
379
|
+
if (computed.flags & 4 && !(computed.flags & 16)) return;
|
|
380
|
+
computed.flags &= -17;
|
|
381
|
+
if (computed.globalVersion === globalVersion) return;
|
|
382
|
+
computed.globalVersion = globalVersion;
|
|
383
|
+
if (!computed.isSSR && computed.flags & 128 && (!computed.deps && !computed._dirty || !isDirty(computed))) return;
|
|
384
|
+
computed.flags |= 2;
|
|
385
|
+
const dep = computed.dep;
|
|
386
|
+
const prevSub = activeSub;
|
|
387
|
+
const prevShouldTrack = shouldTrack;
|
|
388
|
+
activeSub = computed;
|
|
389
|
+
shouldTrack = true;
|
|
390
|
+
try {
|
|
391
|
+
prepareDeps(computed);
|
|
392
|
+
const value = computed.fn(computed._value);
|
|
393
|
+
if (dep.version === 0 || hasChanged(value, computed._value)) {
|
|
394
|
+
computed.flags |= 128;
|
|
395
|
+
computed._value = value;
|
|
396
|
+
dep.version++;
|
|
397
|
+
}
|
|
398
|
+
} catch (err) {
|
|
399
|
+
dep.version++;
|
|
400
|
+
throw err;
|
|
401
|
+
} finally {
|
|
402
|
+
activeSub = prevSub;
|
|
403
|
+
shouldTrack = prevShouldTrack;
|
|
404
|
+
cleanupDeps(computed);
|
|
405
|
+
computed.flags &= -3;
|
|
406
|
+
}
|
|
407
|
+
}
|
|
408
|
+
function removeSub(link, soft = false) {
|
|
409
|
+
const { dep, prevSub, nextSub } = link;
|
|
410
|
+
if (prevSub) {
|
|
411
|
+
prevSub.nextSub = nextSub;
|
|
412
|
+
link.prevSub = void 0;
|
|
413
|
+
}
|
|
414
|
+
if (nextSub) {
|
|
415
|
+
nextSub.prevSub = prevSub;
|
|
416
|
+
link.nextSub = void 0;
|
|
417
|
+
}
|
|
418
|
+
if (dep.subsHead === link) dep.subsHead = nextSub;
|
|
419
|
+
if (dep.subs === link) {
|
|
420
|
+
dep.subs = prevSub;
|
|
421
|
+
if (!prevSub && dep.computed) {
|
|
422
|
+
dep.computed.flags &= -5;
|
|
423
|
+
for (let l = dep.computed.deps; l; l = l.nextDep) removeSub(l, true);
|
|
424
|
+
}
|
|
425
|
+
}
|
|
426
|
+
if (!soft && !--dep.sc && dep.map) dep.map.delete(dep.key);
|
|
427
|
+
}
|
|
428
|
+
function removeDep(link) {
|
|
429
|
+
const { prevDep, nextDep } = link;
|
|
430
|
+
if (prevDep) {
|
|
431
|
+
prevDep.nextDep = nextDep;
|
|
432
|
+
link.prevDep = void 0;
|
|
433
|
+
}
|
|
434
|
+
if (nextDep) {
|
|
435
|
+
nextDep.prevDep = prevDep;
|
|
436
|
+
link.nextDep = void 0;
|
|
437
|
+
}
|
|
438
|
+
}
|
|
439
|
+
function effect(fn, options) {
|
|
440
|
+
if (fn.effect instanceof ReactiveEffect) fn = fn.effect.fn;
|
|
441
|
+
const e = new ReactiveEffect(fn);
|
|
442
|
+
if (options) extend(e, options);
|
|
443
|
+
try {
|
|
444
|
+
e.run();
|
|
445
|
+
} catch (err) {
|
|
446
|
+
e.stop();
|
|
447
|
+
throw err;
|
|
448
|
+
}
|
|
449
|
+
const runner = e.run.bind(e);
|
|
450
|
+
runner.effect = e;
|
|
451
|
+
return runner;
|
|
452
|
+
}
|
|
453
|
+
/**
|
|
454
|
+
* Stops the effect associated with the given runner.
|
|
455
|
+
*
|
|
456
|
+
* @param runner - Association with the effect to stop tracking.
|
|
457
|
+
*/
|
|
458
|
+
function stop(runner) {
|
|
459
|
+
runner.effect.stop();
|
|
460
|
+
}
|
|
461
|
+
/**
|
|
462
|
+
* @internal
|
|
463
|
+
*/
|
|
464
|
+
let shouldTrack = true;
|
|
465
|
+
const trackStack = [];
|
|
466
|
+
/**
|
|
467
|
+
* Temporarily pauses tracking.
|
|
468
|
+
*/
|
|
469
|
+
function pauseTracking() {
|
|
470
|
+
trackStack.push(shouldTrack);
|
|
471
|
+
shouldTrack = false;
|
|
472
|
+
}
|
|
473
|
+
/**
|
|
474
|
+
* Resets the previous global effect tracking state.
|
|
475
|
+
*/
|
|
476
|
+
function resetTracking() {
|
|
477
|
+
const last = trackStack.pop();
|
|
478
|
+
shouldTrack = last === void 0 ? true : last;
|
|
479
|
+
}
|
|
480
|
+
function cleanupEffect(e) {
|
|
481
|
+
const cleanups = e.cleanups;
|
|
482
|
+
e.cleanups = void 0;
|
|
483
|
+
if (cleanups) {
|
|
484
|
+
const prevSub = activeSub;
|
|
485
|
+
activeSub = void 0;
|
|
486
|
+
try {
|
|
487
|
+
let error;
|
|
488
|
+
for (const cleanup of cleanups) try {
|
|
489
|
+
cleanup();
|
|
490
|
+
} catch (cleanupError) {
|
|
491
|
+
var _error;
|
|
492
|
+
(_error = error) !== null && _error !== void 0 || (error = cleanupError);
|
|
493
|
+
}
|
|
494
|
+
if (error) throw error;
|
|
495
|
+
} finally {
|
|
496
|
+
activeSub = prevSub;
|
|
497
|
+
}
|
|
498
|
+
}
|
|
499
|
+
}
|
|
500
|
+
//#endregion
|
|
501
|
+
//#region packages/core/signal/src/dep.ts
|
|
502
|
+
/**
|
|
503
|
+
* Incremented every time a reactive change happens
|
|
504
|
+
* This is used to give computed a fast path to avoid re-compute when nothing
|
|
505
|
+
* has changed.
|
|
506
|
+
*/
|
|
507
|
+
let globalVersion = 0;
|
|
508
|
+
/**
|
|
509
|
+
* Represents a link between a source (Dep) and a subscriber (Effect or Computed).
|
|
510
|
+
* Deps and subs have a many-to-many relationship - each link between a
|
|
511
|
+
* dep and a sub is represented by a Link instance.
|
|
512
|
+
*
|
|
513
|
+
* A Link is also a node in two doubly-linked lists - one for the associated
|
|
514
|
+
* sub to track all its deps, and one for the associated dep to track all its
|
|
515
|
+
* subs.
|
|
516
|
+
*
|
|
517
|
+
* @internal
|
|
518
|
+
*/
|
|
519
|
+
var Link = class {
|
|
520
|
+
constructor(sub, dep) {
|
|
521
|
+
this.sub = sub;
|
|
522
|
+
this.dep = dep;
|
|
523
|
+
this.version = dep.version;
|
|
524
|
+
this.nextDep = this.prevDep = this.nextSub = this.prevSub = this.prevActiveLink = void 0;
|
|
525
|
+
}
|
|
526
|
+
};
|
|
527
|
+
/**
|
|
528
|
+
* @internal
|
|
529
|
+
*/
|
|
530
|
+
var Dep = class {
|
|
531
|
+
constructor(computed) {
|
|
532
|
+
this.computed = computed;
|
|
533
|
+
this.version = 0;
|
|
534
|
+
this.activeLink = void 0;
|
|
535
|
+
this.subs = void 0;
|
|
536
|
+
this.map = void 0;
|
|
537
|
+
this.key = void 0;
|
|
538
|
+
this.sc = 0;
|
|
539
|
+
this.__v_skip = true;
|
|
540
|
+
this.subsHead = void 0;
|
|
541
|
+
}
|
|
542
|
+
track(debugInfo) {
|
|
543
|
+
if (!activeSub || !shouldTrack || activeSub === this.computed) return;
|
|
544
|
+
let link = this.activeLink;
|
|
545
|
+
if (link === void 0 || link.sub !== activeSub) {
|
|
546
|
+
link = this.activeLink = new Link(activeSub, this);
|
|
547
|
+
if (!activeSub.deps) activeSub.deps = activeSub.depsTail = link;
|
|
548
|
+
else {
|
|
549
|
+
link.prevDep = activeSub.depsTail;
|
|
550
|
+
activeSub.depsTail.nextDep = link;
|
|
551
|
+
activeSub.depsTail = link;
|
|
552
|
+
}
|
|
553
|
+
addSub(link);
|
|
554
|
+
} else if (link.version === -1) {
|
|
555
|
+
link.version = this.version;
|
|
556
|
+
if (link.nextDep) {
|
|
557
|
+
const next = link.nextDep;
|
|
558
|
+
next.prevDep = link.prevDep;
|
|
559
|
+
if (link.prevDep) link.prevDep.nextDep = next;
|
|
560
|
+
link.prevDep = activeSub.depsTail;
|
|
561
|
+
link.nextDep = void 0;
|
|
562
|
+
activeSub.depsTail.nextDep = link;
|
|
563
|
+
activeSub.depsTail = link;
|
|
564
|
+
if (activeSub.deps === link) activeSub.deps = next;
|
|
565
|
+
}
|
|
566
|
+
}
|
|
567
|
+
if (activeSub.onTrack) activeSub.onTrack(extend({ effect: activeSub }, debugInfo));
|
|
568
|
+
return link;
|
|
569
|
+
}
|
|
570
|
+
trigger(debugInfo) {
|
|
571
|
+
this.version++;
|
|
572
|
+
globalVersion++;
|
|
573
|
+
this.notify(debugInfo);
|
|
574
|
+
}
|
|
575
|
+
notify(debugInfo) {
|
|
576
|
+
startBatch();
|
|
577
|
+
try {
|
|
578
|
+
for (let head = this.subsHead; head; head = head.nextSub) if (head.sub.onTrigger && !(head.sub.flags & 8)) head.sub.onTrigger(extend({ effect: head.sub }, debugInfo));
|
|
579
|
+
for (let link = this.subs; link; link = link.prevSub) if (link.sub.notify()) link.sub.dep.notify();
|
|
580
|
+
} finally {
|
|
581
|
+
endBatch();
|
|
582
|
+
}
|
|
583
|
+
}
|
|
584
|
+
};
|
|
585
|
+
function addSub(link) {
|
|
586
|
+
link.dep.sc++;
|
|
587
|
+
if (link.sub.flags & 4) {
|
|
588
|
+
const computed = link.dep.computed;
|
|
589
|
+
if (computed && !link.dep.subs) {
|
|
590
|
+
computed.flags |= 20;
|
|
591
|
+
for (let l = computed.deps; l; l = l.nextDep) addSub(l);
|
|
592
|
+
}
|
|
593
|
+
const currentTail = link.dep.subs;
|
|
594
|
+
if (currentTail !== link) {
|
|
595
|
+
link.prevSub = currentTail;
|
|
596
|
+
if (currentTail) currentTail.nextSub = link;
|
|
597
|
+
}
|
|
598
|
+
if (link.dep.subsHead === void 0) link.dep.subsHead = link;
|
|
599
|
+
link.dep.subs = link;
|
|
600
|
+
}
|
|
601
|
+
}
|
|
602
|
+
const targetMap = /* @__PURE__ */ new WeakMap();
|
|
603
|
+
const ITERATE_KEY = Symbol("Object iterate");
|
|
604
|
+
const MAP_KEY_ITERATE_KEY = Symbol("Map keys iterate");
|
|
605
|
+
const ARRAY_ITERATE_KEY = Symbol("Array iterate");
|
|
606
|
+
/**
|
|
607
|
+
* Tracks access to a reactive property.
|
|
608
|
+
*
|
|
609
|
+
* This will check which effect is running at the moment and record it as dep
|
|
610
|
+
* which records all effects that depend on the reactive property.
|
|
611
|
+
*
|
|
612
|
+
* @param target - Object holding the reactive property.
|
|
613
|
+
* @param type - Defines the type of access to the reactive property.
|
|
614
|
+
* @param key - Identifier of the reactive property to track.
|
|
615
|
+
*/
|
|
616
|
+
function track(target, type, key) {
|
|
617
|
+
if (shouldTrack && activeSub) {
|
|
618
|
+
let depsMap = targetMap.get(target);
|
|
619
|
+
if (!depsMap) targetMap.set(target, depsMap = /* @__PURE__ */ new Map());
|
|
620
|
+
let dep = depsMap.get(key);
|
|
621
|
+
if (!dep) {
|
|
622
|
+
depsMap.set(key, dep = new Dep());
|
|
623
|
+
dep.map = depsMap;
|
|
624
|
+
dep.key = key;
|
|
625
|
+
}
|
|
626
|
+
dep.track({
|
|
627
|
+
target,
|
|
628
|
+
type,
|
|
629
|
+
key
|
|
630
|
+
});
|
|
631
|
+
}
|
|
632
|
+
}
|
|
633
|
+
/**
|
|
634
|
+
* Finds all deps associated with the target (or a specific property) and
|
|
635
|
+
* triggers the effects stored within.
|
|
636
|
+
*
|
|
637
|
+
* @param target - The reactive object.
|
|
638
|
+
* @param type - Defines the type of the operation that needs to trigger effects.
|
|
639
|
+
* @param key - Can be used to target a specific reactive property in the target object.
|
|
640
|
+
*/
|
|
641
|
+
function trigger(target, type, key, newValue, oldValue, oldTarget) {
|
|
642
|
+
const depsMap = targetMap.get(target);
|
|
643
|
+
if (!depsMap) {
|
|
644
|
+
globalVersion++;
|
|
645
|
+
return;
|
|
646
|
+
}
|
|
647
|
+
const run = (dep) => {
|
|
648
|
+
if (dep) dep.trigger({
|
|
649
|
+
target,
|
|
650
|
+
type,
|
|
651
|
+
key,
|
|
652
|
+
newValue,
|
|
653
|
+
oldValue,
|
|
654
|
+
oldTarget
|
|
655
|
+
});
|
|
656
|
+
};
|
|
657
|
+
startBatch();
|
|
658
|
+
if (type === "clear") depsMap.forEach(run);
|
|
659
|
+
else {
|
|
660
|
+
const targetIsArray = isArray(target);
|
|
661
|
+
const isArrayIndex = targetIsArray && isIntegerKey(key);
|
|
662
|
+
if (targetIsArray && key === "length") {
|
|
663
|
+
const newLength = Number(newValue);
|
|
664
|
+
depsMap.forEach((dep, key) => {
|
|
665
|
+
if (key === "length" || key === ARRAY_ITERATE_KEY || !isSymbol(key) && key >= newLength) run(dep);
|
|
666
|
+
});
|
|
667
|
+
} else {
|
|
668
|
+
if (key !== void 0 || depsMap.has(void 0)) run(depsMap.get(key));
|
|
669
|
+
if (isArrayIndex) run(depsMap.get(ARRAY_ITERATE_KEY));
|
|
670
|
+
switch (type) {
|
|
671
|
+
case "add":
|
|
672
|
+
if (!targetIsArray) {
|
|
673
|
+
run(depsMap.get(ITERATE_KEY));
|
|
674
|
+
if (isMap(target)) run(depsMap.get(MAP_KEY_ITERATE_KEY));
|
|
675
|
+
} else if (isArrayIndex) run(depsMap.get("length"));
|
|
676
|
+
break;
|
|
677
|
+
case "delete":
|
|
678
|
+
if (!targetIsArray) {
|
|
679
|
+
run(depsMap.get(ITERATE_KEY));
|
|
680
|
+
if (isMap(target)) run(depsMap.get(MAP_KEY_ITERATE_KEY));
|
|
681
|
+
}
|
|
682
|
+
break;
|
|
683
|
+
case "set":
|
|
684
|
+
if (isMap(target)) run(depsMap.get(ITERATE_KEY));
|
|
685
|
+
break;
|
|
686
|
+
}
|
|
687
|
+
}
|
|
688
|
+
}
|
|
689
|
+
endBatch();
|
|
690
|
+
}
|
|
691
|
+
//#endregion
|
|
692
|
+
//#region packages/core/signal/src/arrayInstrumentations.ts
|
|
693
|
+
/**
|
|
694
|
+
* Track array iteration and return:
|
|
695
|
+
* - if input is reactive: a cloned raw array with reactive values
|
|
696
|
+
* - if input is non-reactive or shallowReactive: the original raw array
|
|
697
|
+
*/
|
|
698
|
+
function reactiveReadArray(array) {
|
|
699
|
+
const raw = /* @__PURE__ */ toRaw(array);
|
|
700
|
+
if (raw === array) return raw;
|
|
701
|
+
track(raw, "iterate", ARRAY_ITERATE_KEY);
|
|
702
|
+
return /* @__PURE__ */ isShallow(array) ? raw : raw.map(toReactive);
|
|
703
|
+
}
|
|
704
|
+
/**
|
|
705
|
+
* Track array iteration and return raw array
|
|
706
|
+
*/
|
|
707
|
+
function shallowReadArray(arr) {
|
|
708
|
+
track(arr = /* @__PURE__ */ toRaw(arr), "iterate", ARRAY_ITERATE_KEY);
|
|
709
|
+
return arr;
|
|
710
|
+
}
|
|
711
|
+
function toWrapped(target, item) {
|
|
712
|
+
if (/* @__PURE__ */ isReadonly(target)) return /* @__PURE__ */ isReactive(target) ? toReadonly(toReactive(item)) : toReadonly(item);
|
|
713
|
+
return toReactive(item);
|
|
714
|
+
}
|
|
715
|
+
const arrayInstrumentations = {
|
|
716
|
+
__proto__: null,
|
|
717
|
+
[Symbol.iterator]() {
|
|
718
|
+
return iterator(this, Symbol.iterator, (item) => toWrapped(this, item));
|
|
719
|
+
},
|
|
720
|
+
concat(...args) {
|
|
721
|
+
return reactiveReadArray(this).concat(...args.map((x) => isArray(x) ? reactiveReadArray(x) : x));
|
|
722
|
+
},
|
|
723
|
+
entries() {
|
|
724
|
+
return iterator(this, "entries", (value) => {
|
|
725
|
+
value[1] = toWrapped(this, value[1]);
|
|
726
|
+
return value;
|
|
727
|
+
});
|
|
728
|
+
},
|
|
729
|
+
every(fn, thisArg) {
|
|
730
|
+
return apply(this, "every", fn, thisArg, void 0, arguments);
|
|
731
|
+
},
|
|
732
|
+
filter(fn, thisArg) {
|
|
733
|
+
return apply(this, "filter", fn, thisArg, (v) => v.map((item) => toWrapped(this, item)), arguments);
|
|
734
|
+
},
|
|
735
|
+
find(fn, thisArg) {
|
|
736
|
+
return apply(this, "find", fn, thisArg, (item) => toWrapped(this, item), arguments);
|
|
737
|
+
},
|
|
738
|
+
findIndex(fn, thisArg) {
|
|
739
|
+
return apply(this, "findIndex", fn, thisArg, void 0, arguments);
|
|
740
|
+
},
|
|
741
|
+
findLast(fn, thisArg) {
|
|
742
|
+
return apply(this, "findLast", fn, thisArg, (item) => toWrapped(this, item), arguments);
|
|
743
|
+
},
|
|
744
|
+
findLastIndex(fn, thisArg) {
|
|
745
|
+
return apply(this, "findLastIndex", fn, thisArg, void 0, arguments);
|
|
746
|
+
},
|
|
747
|
+
forEach(fn, thisArg) {
|
|
748
|
+
return apply(this, "forEach", fn, thisArg, void 0, arguments);
|
|
749
|
+
},
|
|
750
|
+
includes(...args) {
|
|
751
|
+
return searchProxy(this, "includes", args);
|
|
752
|
+
},
|
|
753
|
+
indexOf(...args) {
|
|
754
|
+
return searchProxy(this, "indexOf", args);
|
|
755
|
+
},
|
|
756
|
+
join(separator) {
|
|
757
|
+
return reactiveReadArray(this).join(separator);
|
|
758
|
+
},
|
|
759
|
+
lastIndexOf(...args) {
|
|
760
|
+
return searchProxy(this, "lastIndexOf", args);
|
|
761
|
+
},
|
|
762
|
+
map(fn, thisArg) {
|
|
763
|
+
return apply(this, "map", fn, thisArg, void 0, arguments);
|
|
764
|
+
},
|
|
765
|
+
pop() {
|
|
766
|
+
return noTracking(this, "pop");
|
|
767
|
+
},
|
|
768
|
+
push(...args) {
|
|
769
|
+
return noTracking(this, "push", args);
|
|
770
|
+
},
|
|
771
|
+
reduce(fn, ...args) {
|
|
772
|
+
return reduce(this, "reduce", fn, args);
|
|
773
|
+
},
|
|
774
|
+
reduceRight(fn, ...args) {
|
|
775
|
+
return reduce(this, "reduceRight", fn, args);
|
|
776
|
+
},
|
|
777
|
+
shift() {
|
|
778
|
+
return noTracking(this, "shift");
|
|
779
|
+
},
|
|
780
|
+
some(fn, thisArg) {
|
|
781
|
+
return apply(this, "some", fn, thisArg, void 0, arguments);
|
|
782
|
+
},
|
|
783
|
+
splice(...args) {
|
|
784
|
+
return noTracking(this, "splice", args);
|
|
785
|
+
},
|
|
786
|
+
toReversed() {
|
|
787
|
+
return reactiveReadArray(this).toReversed();
|
|
788
|
+
},
|
|
789
|
+
toSorted(comparer) {
|
|
790
|
+
return reactiveReadArray(this).toSorted(comparer);
|
|
791
|
+
},
|
|
792
|
+
toSpliced(...args) {
|
|
793
|
+
return reactiveReadArray(this).toSpliced(...args);
|
|
794
|
+
},
|
|
795
|
+
unshift(...args) {
|
|
796
|
+
return noTracking(this, "unshift", args);
|
|
797
|
+
},
|
|
798
|
+
values() {
|
|
799
|
+
return iterator(this, "values", (item) => toWrapped(this, item));
|
|
800
|
+
}
|
|
801
|
+
};
|
|
802
|
+
function iterator(self, method, wrapValue) {
|
|
803
|
+
const arr = shallowReadArray(self);
|
|
804
|
+
const iter = arr[method]();
|
|
805
|
+
if (arr !== self && !/* @__PURE__ */ isShallow(self)) {
|
|
806
|
+
iter._next = iter.next;
|
|
807
|
+
iter.next = () => {
|
|
808
|
+
const result = iter._next();
|
|
809
|
+
if (!result.done) result.value = wrapValue(result.value);
|
|
810
|
+
return result;
|
|
811
|
+
};
|
|
812
|
+
}
|
|
813
|
+
return iter;
|
|
814
|
+
}
|
|
815
|
+
const arrayProto = Array.prototype;
|
|
816
|
+
function apply(self, method, fn, thisArg, wrappedRetFn, args) {
|
|
817
|
+
const arr = shallowReadArray(self);
|
|
818
|
+
const needsWrap = arr !== self && !/* @__PURE__ */ isShallow(self);
|
|
819
|
+
const methodFn = arr[method];
|
|
820
|
+
if (methodFn !== arrayProto[method]) {
|
|
821
|
+
const result = methodFn.apply(self, args);
|
|
822
|
+
return needsWrap ? toReactive(result) : result;
|
|
823
|
+
}
|
|
824
|
+
let wrappedFn = fn;
|
|
825
|
+
if (arr !== self) {
|
|
826
|
+
if (needsWrap) wrappedFn = function(item, index) {
|
|
827
|
+
return fn.call(this, toWrapped(self, item), index, self);
|
|
828
|
+
};
|
|
829
|
+
else if (fn.length > 2) wrappedFn = function(item, index) {
|
|
830
|
+
return fn.call(this, item, index, self);
|
|
831
|
+
};
|
|
832
|
+
}
|
|
833
|
+
const result = methodFn.call(arr, wrappedFn, thisArg);
|
|
834
|
+
return needsWrap && wrappedRetFn ? wrappedRetFn(result) : result;
|
|
835
|
+
}
|
|
836
|
+
function reduce(self, method, fn, args) {
|
|
837
|
+
const arr = shallowReadArray(self);
|
|
838
|
+
const needsWrap = arr !== self && !/* @__PURE__ */ isShallow(self);
|
|
839
|
+
let wrappedFn = fn;
|
|
840
|
+
let wrapInitialAccumulator = false;
|
|
841
|
+
if (arr !== self) {
|
|
842
|
+
if (needsWrap) {
|
|
843
|
+
wrapInitialAccumulator = args.length === 0;
|
|
844
|
+
wrappedFn = function(acc, item, index) {
|
|
845
|
+
if (wrapInitialAccumulator) {
|
|
846
|
+
wrapInitialAccumulator = false;
|
|
847
|
+
acc = toWrapped(self, acc);
|
|
848
|
+
}
|
|
849
|
+
return fn.call(this, acc, toWrapped(self, item), index, self);
|
|
850
|
+
};
|
|
851
|
+
} else if (fn.length > 3) wrappedFn = function(acc, item, index) {
|
|
852
|
+
return fn.call(this, acc, item, index, self);
|
|
853
|
+
};
|
|
854
|
+
}
|
|
855
|
+
const result = arr[method](wrappedFn, ...args);
|
|
856
|
+
return wrapInitialAccumulator ? toWrapped(self, result) : result;
|
|
857
|
+
}
|
|
858
|
+
function searchProxy(self, method, args) {
|
|
859
|
+
const arr = /* @__PURE__ */ toRaw(self);
|
|
860
|
+
track(arr, "iterate", ARRAY_ITERATE_KEY);
|
|
861
|
+
const res = arr[method](...args);
|
|
862
|
+
if ((res === -1 || res === false) && /* @__PURE__ */ isProxy(args[0])) {
|
|
863
|
+
args[0] = /* @__PURE__ */ toRaw(args[0]);
|
|
864
|
+
return arr[method](...args);
|
|
865
|
+
}
|
|
866
|
+
return res;
|
|
867
|
+
}
|
|
868
|
+
function noTracking(self, method, args = []) {
|
|
869
|
+
pauseTracking();
|
|
870
|
+
startBatch();
|
|
871
|
+
const res = (/* @__PURE__ */ toRaw(self))[method].apply(self, args);
|
|
872
|
+
endBatch();
|
|
873
|
+
resetTracking();
|
|
874
|
+
return res;
|
|
875
|
+
}
|
|
876
|
+
//#endregion
|
|
877
|
+
//#region packages/core/signal/src/ref.ts
|
|
878
|
+
let _ReactiveFlags$IS_REF, _ReactiveFlags$IS_SHA;
|
|
879
|
+
/*@__NO_SIDE_EFFECTS__*/
|
|
880
|
+
function isRef(r) {
|
|
881
|
+
return r ? r["__v_isRef"] === true : false;
|
|
882
|
+
}
|
|
883
|
+
/*@__NO_SIDE_EFFECTS__*/
|
|
884
|
+
function ref(value) {
|
|
885
|
+
return createRef(value, false);
|
|
886
|
+
}
|
|
887
|
+
function createRef(rawValue, shallow) {
|
|
888
|
+
if (/* @__PURE__ */ isRef(rawValue)) return rawValue;
|
|
889
|
+
return new RefImpl(rawValue, shallow);
|
|
890
|
+
}
|
|
891
|
+
_ReactiveFlags$IS_REF = "__v_isRef";
|
|
892
|
+
_ReactiveFlags$IS_SHA = "__v_isShallow";
|
|
893
|
+
/**
|
|
894
|
+
* @internal
|
|
895
|
+
*/
|
|
896
|
+
var RefImpl = class {
|
|
897
|
+
constructor(value, isShallow) {
|
|
898
|
+
this.dep = new Dep();
|
|
899
|
+
this[_ReactiveFlags$IS_REF] = true;
|
|
900
|
+
this[_ReactiveFlags$IS_SHA] = false;
|
|
901
|
+
this._rawValue = isShallow ? value : /* @__PURE__ */ toRaw(value);
|
|
902
|
+
this._value = isShallow ? value : toReactive(value);
|
|
903
|
+
this["__v_isShallow"] = isShallow;
|
|
904
|
+
}
|
|
905
|
+
get value() {
|
|
906
|
+
this.dep.track({
|
|
907
|
+
target: this,
|
|
908
|
+
type: "get",
|
|
909
|
+
key: "value"
|
|
910
|
+
});
|
|
911
|
+
return this._value;
|
|
912
|
+
}
|
|
913
|
+
set value(newValue) {
|
|
914
|
+
const oldValue = this._rawValue;
|
|
915
|
+
const useDirectValue = this["__v_isShallow"] || /* @__PURE__ */ isShallow(newValue) || /* @__PURE__ */ isReadonly(newValue);
|
|
916
|
+
newValue = useDirectValue ? newValue : /* @__PURE__ */ toRaw(newValue);
|
|
917
|
+
if (hasChanged(newValue, oldValue)) {
|
|
918
|
+
this._rawValue = newValue;
|
|
919
|
+
this._value = useDirectValue ? newValue : toReactive(newValue);
|
|
920
|
+
this.dep.trigger({
|
|
921
|
+
target: this,
|
|
922
|
+
type: "set",
|
|
923
|
+
key: "value",
|
|
924
|
+
newValue,
|
|
925
|
+
oldValue
|
|
926
|
+
});
|
|
927
|
+
}
|
|
928
|
+
}
|
|
929
|
+
};
|
|
930
|
+
//#endregion
|
|
931
|
+
//#region packages/core/signal/src/baseHandlers.ts
|
|
932
|
+
const isNonTrackableKeys = /*@__PURE__*/ makeMap(`__proto__,__v_isRef,__isVue`);
|
|
933
|
+
const builtInSymbols = new Set(/*@__PURE__*/ Object.getOwnPropertyNames(Symbol).filter((key) => key !== "arguments" && key !== "caller").map((key) => Symbol[key]).filter(isSymbol));
|
|
934
|
+
function hasOwnProperty(key) {
|
|
935
|
+
if (!isSymbol(key)) key = String(key);
|
|
936
|
+
const obj = /* @__PURE__ */ toRaw(this);
|
|
937
|
+
track(obj, "has", key);
|
|
938
|
+
return obj.hasOwnProperty(key);
|
|
939
|
+
}
|
|
940
|
+
var BaseReactiveHandler = class {
|
|
941
|
+
constructor(_isReadonly = false, _isShallow = false) {
|
|
942
|
+
this._isReadonly = _isReadonly;
|
|
943
|
+
this._isShallow = _isShallow;
|
|
944
|
+
}
|
|
945
|
+
get(target, key, receiver) {
|
|
946
|
+
if (key === "__v_skip") return target["__v_skip"];
|
|
947
|
+
const isReadonly = this._isReadonly, isShallow = this._isShallow;
|
|
948
|
+
if (key === "__v_isReactive") return !isReadonly;
|
|
949
|
+
else if (key === "__v_isReadonly") return isReadonly;
|
|
950
|
+
else if (key === "__v_isShallow") return isShallow;
|
|
951
|
+
else if (key === "__v_raw") {
|
|
952
|
+
if (receiver === (isReadonly ? isShallow ? shallowReadonlyMap : readonlyMap : isShallow ? shallowReactiveMap : reactiveMap).get(target) || Object.getPrototypeOf(target) === Object.getPrototypeOf(receiver)) return target;
|
|
953
|
+
return;
|
|
954
|
+
}
|
|
955
|
+
const targetIsArray = isArray(target);
|
|
956
|
+
if (!isReadonly) {
|
|
957
|
+
let fn;
|
|
958
|
+
if (targetIsArray && (fn = arrayInstrumentations[key])) return fn;
|
|
959
|
+
if (key === "hasOwnProperty") return hasOwnProperty;
|
|
960
|
+
}
|
|
961
|
+
const res = Reflect.get(target, key, /* @__PURE__ */ isRef(target) ? target : receiver);
|
|
962
|
+
if (isSymbol(key) ? builtInSymbols.has(key) : isNonTrackableKeys(key)) return res;
|
|
963
|
+
if (!isReadonly) track(target, "get", key);
|
|
964
|
+
if (isShallow) return res;
|
|
965
|
+
if (/* @__PURE__ */ isRef(res)) {
|
|
966
|
+
const value = targetIsArray && isIntegerKey(key) ? res : res.value;
|
|
967
|
+
return isReadonly && isObject(value) ? /* @__PURE__ */ readonly(value) : value;
|
|
968
|
+
}
|
|
969
|
+
if (isObject(res)) return isReadonly ? /* @__PURE__ */ readonly(res) : /* @__PURE__ */ reactive(res);
|
|
970
|
+
return res;
|
|
971
|
+
}
|
|
972
|
+
};
|
|
973
|
+
var MutableReactiveHandler = class extends BaseReactiveHandler {
|
|
974
|
+
constructor(isShallow = false) {
|
|
975
|
+
super(false, isShallow);
|
|
976
|
+
}
|
|
977
|
+
set(target, key, value, receiver) {
|
|
978
|
+
let oldValue = target[key];
|
|
979
|
+
const isArrayWithIntegerKey = isArray(target) && isIntegerKey(key);
|
|
980
|
+
if (!this._isShallow) {
|
|
981
|
+
const isOldValueReadonly = /* @__PURE__ */ isReadonly(oldValue);
|
|
982
|
+
if (!/* @__PURE__ */ isShallow(value) && !/* @__PURE__ */ isReadonly(value)) {
|
|
983
|
+
oldValue = /* @__PURE__ */ toRaw(oldValue);
|
|
984
|
+
value = /* @__PURE__ */ toRaw(value);
|
|
985
|
+
}
|
|
986
|
+
if (!isArrayWithIntegerKey && /* @__PURE__ */ isRef(oldValue) && !/* @__PURE__ */ isRef(value)) if (isOldValueReadonly) {
|
|
987
|
+
warn(`Set operation on key "${String(key)}" failed: target is readonly.`, target[key]);
|
|
988
|
+
return true;
|
|
989
|
+
} else {
|
|
990
|
+
oldValue.value = value;
|
|
991
|
+
return true;
|
|
992
|
+
}
|
|
993
|
+
}
|
|
994
|
+
const hadKey = isArrayWithIntegerKey ? Number(key) < target.length : hasOwn(target, key);
|
|
995
|
+
const result = Reflect.set(target, key, value, /* @__PURE__ */ isRef(target) ? target : receiver);
|
|
996
|
+
if (target === /* @__PURE__ */ toRaw(receiver)) {
|
|
997
|
+
if (!hadKey) trigger(target, "add", key, value);
|
|
998
|
+
else if (hasChanged(value, oldValue)) trigger(target, "set", key, value, oldValue);
|
|
999
|
+
}
|
|
1000
|
+
return result;
|
|
1001
|
+
}
|
|
1002
|
+
deleteProperty(target, key) {
|
|
1003
|
+
const hadKey = hasOwn(target, key);
|
|
1004
|
+
const oldValue = target[key];
|
|
1005
|
+
const result = Reflect.deleteProperty(target, key);
|
|
1006
|
+
if (result && hadKey) trigger(target, "delete", key, void 0, oldValue);
|
|
1007
|
+
return result;
|
|
1008
|
+
}
|
|
1009
|
+
has(target, key) {
|
|
1010
|
+
const result = Reflect.has(target, key);
|
|
1011
|
+
if (!isSymbol(key) || !builtInSymbols.has(key)) track(target, "has", key);
|
|
1012
|
+
return result;
|
|
1013
|
+
}
|
|
1014
|
+
ownKeys(target) {
|
|
1015
|
+
track(target, "iterate", isArray(target) ? "length" : ITERATE_KEY);
|
|
1016
|
+
return Reflect.ownKeys(target);
|
|
1017
|
+
}
|
|
1018
|
+
};
|
|
1019
|
+
var ReadonlyReactiveHandler = class extends BaseReactiveHandler {
|
|
1020
|
+
constructor(isShallow = false) {
|
|
1021
|
+
super(true, isShallow);
|
|
1022
|
+
}
|
|
1023
|
+
set(target, key) {
|
|
1024
|
+
warn(`Set operation on key "${String(key)}" failed: target is readonly.`, target);
|
|
1025
|
+
return true;
|
|
1026
|
+
}
|
|
1027
|
+
deleteProperty(target, key) {
|
|
1028
|
+
warn(`Delete operation on key "${String(key)}" failed: target is readonly.`, target);
|
|
1029
|
+
return true;
|
|
1030
|
+
}
|
|
1031
|
+
};
|
|
1032
|
+
const mutableHandlers = /*@__PURE__*/ new MutableReactiveHandler();
|
|
1033
|
+
const readonlyHandlers = /*@__PURE__*/ new ReadonlyReactiveHandler();
|
|
1034
|
+
//#endregion
|
|
1035
|
+
//#region packages/core/signal/src/collectionHandlers.ts
|
|
1036
|
+
const toShallow = (value) => value;
|
|
1037
|
+
const getProto = (v) => Reflect.getPrototypeOf(v);
|
|
1038
|
+
function createIterableMethod(method, isReadonly, isShallow) {
|
|
1039
|
+
return function(...args) {
|
|
1040
|
+
const target = this["__v_raw"];
|
|
1041
|
+
const rawTarget = /* @__PURE__ */ toRaw(target);
|
|
1042
|
+
const targetIsMap = isMap(rawTarget);
|
|
1043
|
+
const isPair = method === "entries" || method === Symbol.iterator && targetIsMap;
|
|
1044
|
+
const isKeyOnly = method === "keys" && targetIsMap;
|
|
1045
|
+
const innerIterator = target[method](...args);
|
|
1046
|
+
const wrap = isShallow ? toShallow : isReadonly ? toReadonly : toReactive;
|
|
1047
|
+
!isReadonly && track(rawTarget, "iterate", isKeyOnly ? MAP_KEY_ITERATE_KEY : ITERATE_KEY);
|
|
1048
|
+
return extend(Object.create(innerIterator), { next() {
|
|
1049
|
+
const { value, done } = innerIterator.next();
|
|
1050
|
+
return done ? {
|
|
1051
|
+
value,
|
|
1052
|
+
done
|
|
1053
|
+
} : {
|
|
1054
|
+
value: isPair ? [wrap(value[0]), wrap(value[1])] : wrap(value),
|
|
1055
|
+
done
|
|
1056
|
+
};
|
|
1057
|
+
} });
|
|
1058
|
+
};
|
|
1059
|
+
}
|
|
1060
|
+
function createReadonlyMethod(type) {
|
|
1061
|
+
return function(...args) {
|
|
1062
|
+
{
|
|
1063
|
+
const key = args[0] ? `on key "${args[0]}" ` : ``;
|
|
1064
|
+
warn(`${capitalize(type)} operation ${key}failed: target is readonly.`, /* @__PURE__ */ toRaw(this));
|
|
1065
|
+
}
|
|
1066
|
+
return type === "delete" ? false : type === "clear" ? void 0 : this;
|
|
1067
|
+
};
|
|
1068
|
+
}
|
|
1069
|
+
function createInstrumentations(readonly, shallow) {
|
|
1070
|
+
const instrumentations = {
|
|
1071
|
+
get(key) {
|
|
1072
|
+
const target = this["__v_raw"];
|
|
1073
|
+
const rawTarget = /* @__PURE__ */ toRaw(target);
|
|
1074
|
+
const rawKey = /* @__PURE__ */ toRaw(key);
|
|
1075
|
+
if (!readonly) {
|
|
1076
|
+
if (hasChanged(key, rawKey)) track(rawTarget, "get", key);
|
|
1077
|
+
track(rawTarget, "get", rawKey);
|
|
1078
|
+
}
|
|
1079
|
+
const { has } = getProto(rawTarget);
|
|
1080
|
+
const wrap = shallow ? toShallow : readonly ? toReadonly : toReactive;
|
|
1081
|
+
if (has.call(rawTarget, key)) return wrap(target.get(key));
|
|
1082
|
+
else if (has.call(rawTarget, rawKey)) return wrap(target.get(rawKey));
|
|
1083
|
+
else if (target !== rawTarget) target.get(key);
|
|
1084
|
+
},
|
|
1085
|
+
get size() {
|
|
1086
|
+
const target = this["__v_raw"];
|
|
1087
|
+
!readonly && track(/* @__PURE__ */ toRaw(target), "iterate", ITERATE_KEY);
|
|
1088
|
+
return target.size;
|
|
1089
|
+
},
|
|
1090
|
+
has(key) {
|
|
1091
|
+
const target = this["__v_raw"];
|
|
1092
|
+
const rawTarget = /* @__PURE__ */ toRaw(target);
|
|
1093
|
+
const rawKey = /* @__PURE__ */ toRaw(key);
|
|
1094
|
+
if (!readonly) {
|
|
1095
|
+
if (hasChanged(key, rawKey)) track(rawTarget, "has", key);
|
|
1096
|
+
track(rawTarget, "has", rawKey);
|
|
1097
|
+
}
|
|
1098
|
+
return key === rawKey ? target.has(key) : target.has(key) || target.has(rawKey);
|
|
1099
|
+
},
|
|
1100
|
+
forEach(callback, thisArg) {
|
|
1101
|
+
const observed = this;
|
|
1102
|
+
const target = observed["__v_raw"];
|
|
1103
|
+
const rawTarget = /* @__PURE__ */ toRaw(target);
|
|
1104
|
+
const wrap = shallow ? toShallow : readonly ? toReadonly : toReactive;
|
|
1105
|
+
!readonly && track(rawTarget, "iterate", ITERATE_KEY);
|
|
1106
|
+
return target.forEach((value, key) => {
|
|
1107
|
+
return callback.call(thisArg, wrap(value), wrap(key), observed);
|
|
1108
|
+
});
|
|
1109
|
+
}
|
|
1110
|
+
};
|
|
1111
|
+
extend(instrumentations, readonly ? {
|
|
1112
|
+
add: createReadonlyMethod("add"),
|
|
1113
|
+
set: createReadonlyMethod("set"),
|
|
1114
|
+
delete: createReadonlyMethod("delete"),
|
|
1115
|
+
clear: createReadonlyMethod("clear")
|
|
1116
|
+
} : {
|
|
1117
|
+
add(value) {
|
|
1118
|
+
const target = /* @__PURE__ */ toRaw(this);
|
|
1119
|
+
const proto = getProto(target);
|
|
1120
|
+
const rawValue = /* @__PURE__ */ toRaw(value);
|
|
1121
|
+
const valueToAdd = !shallow && !/* @__PURE__ */ isShallow(value) && !/* @__PURE__ */ isReadonly(value) ? rawValue : value;
|
|
1122
|
+
if (!(proto.has.call(target, valueToAdd) || hasChanged(value, valueToAdd) && proto.has.call(target, value) || hasChanged(rawValue, valueToAdd) && proto.has.call(target, rawValue))) {
|
|
1123
|
+
target.add(valueToAdd);
|
|
1124
|
+
trigger(target, "add", valueToAdd, valueToAdd);
|
|
1125
|
+
}
|
|
1126
|
+
return this;
|
|
1127
|
+
},
|
|
1128
|
+
set(key, value) {
|
|
1129
|
+
if (!shallow && !/* @__PURE__ */ isShallow(value) && !/* @__PURE__ */ isReadonly(value)) value = /* @__PURE__ */ toRaw(value);
|
|
1130
|
+
const target = /* @__PURE__ */ toRaw(this);
|
|
1131
|
+
const { has, get } = getProto(target);
|
|
1132
|
+
let hadKey = has.call(target, key);
|
|
1133
|
+
if (!hadKey) {
|
|
1134
|
+
key = /* @__PURE__ */ toRaw(key);
|
|
1135
|
+
hadKey = has.call(target, key);
|
|
1136
|
+
} else checkIdentityKeys(target, has, key);
|
|
1137
|
+
const oldValue = get.call(target, key);
|
|
1138
|
+
target.set(key, value);
|
|
1139
|
+
if (!hadKey) trigger(target, "add", key, value);
|
|
1140
|
+
else if (hasChanged(value, oldValue)) trigger(target, "set", key, value, oldValue);
|
|
1141
|
+
return this;
|
|
1142
|
+
},
|
|
1143
|
+
delete(key) {
|
|
1144
|
+
const target = /* @__PURE__ */ toRaw(this);
|
|
1145
|
+
const { has, get } = getProto(target);
|
|
1146
|
+
let hadKey = has.call(target, key);
|
|
1147
|
+
if (!hadKey) {
|
|
1148
|
+
key = /* @__PURE__ */ toRaw(key);
|
|
1149
|
+
hadKey = has.call(target, key);
|
|
1150
|
+
} else checkIdentityKeys(target, has, key);
|
|
1151
|
+
const oldValue = get ? get.call(target, key) : void 0;
|
|
1152
|
+
const result = target.delete(key);
|
|
1153
|
+
if (hadKey) trigger(target, "delete", key, void 0, oldValue);
|
|
1154
|
+
return result;
|
|
1155
|
+
},
|
|
1156
|
+
clear() {
|
|
1157
|
+
const target = /* @__PURE__ */ toRaw(this);
|
|
1158
|
+
const hadItems = target.size !== 0;
|
|
1159
|
+
const oldTarget = isMap(target) ? new Map(target) : new Set(target);
|
|
1160
|
+
const result = target.clear();
|
|
1161
|
+
if (hadItems) trigger(target, "clear", void 0, void 0, oldTarget);
|
|
1162
|
+
return result;
|
|
1163
|
+
}
|
|
1164
|
+
});
|
|
1165
|
+
[
|
|
1166
|
+
"keys",
|
|
1167
|
+
"values",
|
|
1168
|
+
"entries",
|
|
1169
|
+
Symbol.iterator
|
|
1170
|
+
].forEach((method) => {
|
|
1171
|
+
instrumentations[method] = createIterableMethod(method, readonly, shallow);
|
|
1172
|
+
});
|
|
1173
|
+
return instrumentations;
|
|
1174
|
+
}
|
|
1175
|
+
function createInstrumentationGetter(isReadonly, shallow) {
|
|
1176
|
+
const instrumentations = createInstrumentations(isReadonly, shallow);
|
|
1177
|
+
return (target, key, receiver) => {
|
|
1178
|
+
if (key === "__v_isReactive") return !isReadonly;
|
|
1179
|
+
else if (key === "__v_isReadonly") return isReadonly;
|
|
1180
|
+
else if (key === "__v_raw") return target;
|
|
1181
|
+
return Reflect.get(hasOwn(instrumentations, key) && key in target ? instrumentations : target, key, receiver);
|
|
1182
|
+
};
|
|
1183
|
+
}
|
|
1184
|
+
const mutableCollectionHandlers = { get: /*@__PURE__*/ createInstrumentationGetter(false, false) };
|
|
1185
|
+
const readonlyCollectionHandlers = { get: /*@__PURE__*/ createInstrumentationGetter(true, false) };
|
|
1186
|
+
function checkIdentityKeys(target, has, key) {
|
|
1187
|
+
const rawKey = /* @__PURE__ */ toRaw(key);
|
|
1188
|
+
if (rawKey !== key && has.call(target, rawKey)) {
|
|
1189
|
+
const type = toRawType(target);
|
|
1190
|
+
warn(`Reactive ${type} contains both the raw and reactive versions of the same object${type === `Map` ? ` as keys` : ``}, which can lead to inconsistencies. Avoid differentiating between the raw and reactive versions of an object and only use the reactive version if possible.`);
|
|
1191
|
+
}
|
|
1192
|
+
}
|
|
1193
|
+
//#endregion
|
|
1194
|
+
//#region packages/core/signal/src/reactive.ts
|
|
1195
|
+
const reactiveMap = /* @__PURE__ */ new WeakMap();
|
|
1196
|
+
const shallowReactiveMap = /* @__PURE__ */ new WeakMap();
|
|
1197
|
+
const readonlyMap = /* @__PURE__ */ new WeakMap();
|
|
1198
|
+
const shallowReadonlyMap = /* @__PURE__ */ new WeakMap();
|
|
1199
|
+
function targetTypeMap(rawType) {
|
|
1200
|
+
switch (rawType) {
|
|
1201
|
+
case "Object":
|
|
1202
|
+
case "Array": return 1;
|
|
1203
|
+
case "Map":
|
|
1204
|
+
case "Set":
|
|
1205
|
+
case "WeakMap":
|
|
1206
|
+
case "WeakSet": return 2;
|
|
1207
|
+
default: return 0;
|
|
1208
|
+
}
|
|
1209
|
+
}
|
|
1210
|
+
function getTargetType(value) {
|
|
1211
|
+
return value["__v_skip"] || !Object.isExtensible(value) ? 0 : targetTypeMap(toRawType(value));
|
|
1212
|
+
}
|
|
1213
|
+
/*@__NO_SIDE_EFFECTS__*/
|
|
1214
|
+
function reactive(target) {
|
|
1215
|
+
if (/* @__PURE__ */ isReadonly(target)) return target;
|
|
1216
|
+
return createReactiveObject(target, false, mutableHandlers, mutableCollectionHandlers, reactiveMap);
|
|
1217
|
+
}
|
|
1218
|
+
/**
|
|
1219
|
+
* Takes an object (reactive or plain) or a ref and returns a readonly proxy to
|
|
1220
|
+
* the original.
|
|
1221
|
+
*
|
|
1222
|
+
* A readonly proxy is deep: any nested property accessed will be readonly as
|
|
1223
|
+
* well. It also has the same ref-unwrapping behavior as {@link reactive},
|
|
1224
|
+
* except the unwrapped values will also be made readonly.
|
|
1225
|
+
*
|
|
1226
|
+
* @example
|
|
1227
|
+
* ```js
|
|
1228
|
+
* const original = reactive({ count: 0 })
|
|
1229
|
+
*
|
|
1230
|
+
* const copy = readonly(original)
|
|
1231
|
+
*
|
|
1232
|
+
* watchEffect(() => {
|
|
1233
|
+
* // works for reactivity tracking
|
|
1234
|
+
* console.log(copy.count)
|
|
1235
|
+
* })
|
|
1236
|
+
*
|
|
1237
|
+
* // mutating original will trigger watchers relying on the copy
|
|
1238
|
+
* original.count++
|
|
1239
|
+
*
|
|
1240
|
+
* // mutating the copy will fail and result in a warning
|
|
1241
|
+
* copy.count++ // warning!
|
|
1242
|
+
* ```
|
|
1243
|
+
*
|
|
1244
|
+
* @param target - The source object.
|
|
1245
|
+
* @see {@link https://vuejs.org/api/reactivity-core.html#readonly}
|
|
1246
|
+
*/
|
|
1247
|
+
/*@__NO_SIDE_EFFECTS__*/
|
|
1248
|
+
function readonly(target) {
|
|
1249
|
+
return createReactiveObject(target, true, readonlyHandlers, readonlyCollectionHandlers, readonlyMap);
|
|
1250
|
+
}
|
|
1251
|
+
function createReactiveObject(target, isReadonly, baseHandlers, collectionHandlers, proxyMap) {
|
|
1252
|
+
if (!isObject(target)) {
|
|
1253
|
+
warn(`value cannot be made ${isReadonly ? "readonly" : "reactive"}: ${String(target)}`);
|
|
1254
|
+
return target;
|
|
1255
|
+
}
|
|
1256
|
+
if (target["__v_raw"] && !(isReadonly && target["__v_isReactive"])) return target;
|
|
1257
|
+
const targetType = getTargetType(target);
|
|
1258
|
+
if (targetType === 0) return target;
|
|
1259
|
+
const existingProxy = proxyMap.get(target);
|
|
1260
|
+
if (existingProxy) return existingProxy;
|
|
1261
|
+
const proxy = new Proxy(target, targetType === 2 ? collectionHandlers : baseHandlers);
|
|
1262
|
+
proxyMap.set(target, proxy);
|
|
1263
|
+
return proxy;
|
|
1264
|
+
}
|
|
1265
|
+
/**
|
|
1266
|
+
* Checks if an object is a proxy created by {@link reactive} or
|
|
1267
|
+
* {@link shallowReactive} (or {@link ref} in some cases).
|
|
1268
|
+
*
|
|
1269
|
+
* @example
|
|
1270
|
+
* ```js
|
|
1271
|
+
* isReactive(reactive({})) // => true
|
|
1272
|
+
* isReactive(readonly(reactive({}))) // => true
|
|
1273
|
+
* isReactive(ref({}).value) // => true
|
|
1274
|
+
* isReactive(readonly(ref({})).value) // => true
|
|
1275
|
+
* isReactive(ref(true)) // => false
|
|
1276
|
+
* isReactive(shallowRef({}).value) // => false
|
|
1277
|
+
* isReactive(shallowReactive({})) // => true
|
|
1278
|
+
* ```
|
|
1279
|
+
*
|
|
1280
|
+
* @param value - The value to check.
|
|
1281
|
+
* @see {@link https://vuejs.org/api/reactivity-utilities.html#isreactive}
|
|
1282
|
+
*/
|
|
1283
|
+
/*@__NO_SIDE_EFFECTS__*/
|
|
1284
|
+
function isReactive(value) {
|
|
1285
|
+
if (/* @__PURE__ */ isReadonly(value)) return /* @__PURE__ */ isReactive(value["__v_raw"]);
|
|
1286
|
+
return !!(value && value["__v_isReactive"]);
|
|
1287
|
+
}
|
|
1288
|
+
/**
|
|
1289
|
+
* Checks whether the passed value is a readonly object. The properties of a
|
|
1290
|
+
* readonly object can change, but they can't be assigned directly via the
|
|
1291
|
+
* passed object.
|
|
1292
|
+
*
|
|
1293
|
+
* The proxies created by {@link readonly} and {@link shallowReadonly} are
|
|
1294
|
+
* both considered readonly, as is a computed ref without a set function.
|
|
1295
|
+
*
|
|
1296
|
+
* @param value - The value to check.
|
|
1297
|
+
* @see {@link https://vuejs.org/api/reactivity-utilities.html#isreadonly}
|
|
1298
|
+
*/
|
|
1299
|
+
/*@__NO_SIDE_EFFECTS__*/
|
|
1300
|
+
function isReadonly(value) {
|
|
1301
|
+
return !!(value && value["__v_isReadonly"]);
|
|
1302
|
+
}
|
|
1303
|
+
/*@__NO_SIDE_EFFECTS__*/
|
|
1304
|
+
function isShallow(value) {
|
|
1305
|
+
return !!(value && value["__v_isShallow"]);
|
|
1306
|
+
}
|
|
1307
|
+
/**
|
|
1308
|
+
* Checks if an object is a proxy created by {@link reactive},
|
|
1309
|
+
* {@link readonly}, {@link shallowReactive} or {@link shallowReadonly}.
|
|
1310
|
+
*
|
|
1311
|
+
* @param value - The value to check.
|
|
1312
|
+
* @see {@link https://vuejs.org/api/reactivity-utilities.html#isproxy}
|
|
1313
|
+
*/
|
|
1314
|
+
/*@__NO_SIDE_EFFECTS__*/
|
|
1315
|
+
function isProxy(value) {
|
|
1316
|
+
return value ? !!value["__v_raw"] : false;
|
|
1317
|
+
}
|
|
1318
|
+
/**
|
|
1319
|
+
* Returns the raw, original object of a Vue-created proxy.
|
|
1320
|
+
*
|
|
1321
|
+
* `toRaw()` can return the original object from proxies created by
|
|
1322
|
+
* {@link reactive}, {@link readonly}, {@link shallowReactive} or
|
|
1323
|
+
* {@link shallowReadonly}.
|
|
1324
|
+
*
|
|
1325
|
+
* This is an escape hatch that can be used to temporarily read without
|
|
1326
|
+
* incurring proxy access / tracking overhead or write without triggering
|
|
1327
|
+
* changes. It is **not** recommended to hold a persistent reference to the
|
|
1328
|
+
* original object. Use with caution.
|
|
1329
|
+
*
|
|
1330
|
+
* @example
|
|
1331
|
+
* ```js
|
|
1332
|
+
* const foo = {}
|
|
1333
|
+
* const reactiveFoo = reactive(foo)
|
|
1334
|
+
*
|
|
1335
|
+
* console.log(toRaw(reactiveFoo) === foo) // true
|
|
1336
|
+
* ```
|
|
1337
|
+
*
|
|
1338
|
+
* @param observed - The object for which the "raw" value is requested.
|
|
1339
|
+
* @see {@link https://vuejs.org/api/reactivity-advanced.html#toraw}
|
|
1340
|
+
*/
|
|
1341
|
+
/*@__NO_SIDE_EFFECTS__*/
|
|
1342
|
+
function toRaw(observed) {
|
|
1343
|
+
const raw = observed && observed["__v_raw"];
|
|
1344
|
+
return raw ? /* @__PURE__ */ toRaw(raw) : observed;
|
|
1345
|
+
}
|
|
1346
|
+
/**
|
|
1347
|
+
* Returns a reactive proxy of the given value (if possible).
|
|
1348
|
+
*
|
|
1349
|
+
* If the given value is not an object, the original value itself is returned.
|
|
1350
|
+
*
|
|
1351
|
+
* @param value - The value for which a reactive proxy shall be created.
|
|
1352
|
+
*/
|
|
1353
|
+
const toReactive = (value) => isObject(value) ? /* @__PURE__ */ reactive(value) : value;
|
|
1354
|
+
/**
|
|
1355
|
+
* Returns a readonly proxy of the given value (if possible).
|
|
1356
|
+
*
|
|
1357
|
+
* If the given value is not an object, the original value itself is returned.
|
|
1358
|
+
*
|
|
1359
|
+
* @param value - The value for which a readonly proxy shall be created.
|
|
1360
|
+
*/
|
|
1361
|
+
const toReadonly = (value) => isObject(value) ? /* @__PURE__ */ readonly(value) : value;
|
|
1362
|
+
//#endregion
|
|
1363
|
+
//#region packages/core/signal/src/state.ts
|
|
1364
|
+
function state(value) {
|
|
1365
|
+
if (arguments.length === 0) return /* @__PURE__ */ ref();
|
|
1366
|
+
return isProxyable(value) ? /* @__PURE__ */ reactive(value) : /* @__PURE__ */ ref(value);
|
|
1367
|
+
}
|
|
1368
|
+
function isProxyable(value) {
|
|
1369
|
+
if (value === null || typeof value !== "object") return false;
|
|
1370
|
+
if (Array.isArray(value)) return true;
|
|
1371
|
+
if (value instanceof Map || value instanceof Set || value instanceof WeakMap || value instanceof WeakSet) return true;
|
|
1372
|
+
return isPlainObject(value);
|
|
1373
|
+
}
|
|
1374
|
+
function isPlainObject(value) {
|
|
1375
|
+
const proto = Object.getPrototypeOf(value);
|
|
1376
|
+
return proto === Object.prototype || proto === null;
|
|
1377
|
+
}
|
|
1378
|
+
//#endregion
|
|
1379
|
+
//#region packages/core/runtime-dom/src/domOwnership.ts
|
|
1380
|
+
const activeLightDomHosts = /* @__PURE__ */ new WeakMap();
|
|
1381
|
+
const runtimeOwnedNodes = /* @__PURE__ */ new WeakSet();
|
|
1382
|
+
function registerLightDomHost(host, lightChildren) {
|
|
1383
|
+
const ownership = { lightChildren };
|
|
1384
|
+
activeLightDomHosts.set(host, ownership);
|
|
1385
|
+
return () => {
|
|
1386
|
+
if (activeLightDomHosts.get(host) === ownership) activeLightDomHosts.delete(host);
|
|
1387
|
+
};
|
|
1388
|
+
}
|
|
1389
|
+
function trackRuntimeDomInsertion(parent, node) {
|
|
1390
|
+
const ownership = activeLightDomHosts.get(parent);
|
|
1391
|
+
if (!ownership) return;
|
|
1392
|
+
if (node.nodeType === 11) {
|
|
1393
|
+
for (const child of node.childNodes) trackRuntimeNode(ownership, child);
|
|
1394
|
+
return;
|
|
1395
|
+
}
|
|
1396
|
+
trackRuntimeNode(ownership, node);
|
|
1397
|
+
}
|
|
1398
|
+
function isRuntimeOwnedNode(node) {
|
|
1399
|
+
return runtimeOwnedNodes.has(node);
|
|
1400
|
+
}
|
|
1401
|
+
function trackRuntimeNode(ownership, node) {
|
|
1402
|
+
if (!ownership.lightChildren.includes(node)) runtimeOwnedNodes.add(node);
|
|
1403
|
+
}
|
|
1404
|
+
//#endregion
|
|
1405
|
+
//#region packages/core/runtime-dom/src/range.ts
|
|
1406
|
+
function insertTracked(parent, value, marker = null) {
|
|
1407
|
+
if (value === void 0 || value == null || value === false || value === true) return [];
|
|
1408
|
+
if (Array.isArray(value)) {
|
|
1409
|
+
const nodes = [];
|
|
1410
|
+
for (const item of value) nodes.push(...insertTracked(parent, item, marker));
|
|
1411
|
+
return nodes;
|
|
1412
|
+
}
|
|
1413
|
+
const node = value instanceof Node ? value : document.createTextNode(String(value));
|
|
1414
|
+
trackRuntimeDomInsertion(parent, node);
|
|
1415
|
+
parent.insertBefore(node, marker);
|
|
1416
|
+
return [node];
|
|
1417
|
+
}
|
|
1418
|
+
function removeNodes$1(nodes) {
|
|
1419
|
+
for (const node of nodes) {
|
|
1420
|
+
var _node$parentNode2;
|
|
1421
|
+
(_node$parentNode2 = node.parentNode) === null || _node$parentNode2 === void 0 || _node$parentNode2.removeChild(node);
|
|
1422
|
+
}
|
|
1423
|
+
}
|
|
1424
|
+
function moveRangeBefore(nodes, parent, marker = null) {
|
|
1425
|
+
for (const node of nodes) {
|
|
1426
|
+
trackRuntimeDomInsertion(parent, node);
|
|
1427
|
+
parent.insertBefore(node, marker);
|
|
1428
|
+
}
|
|
1429
|
+
}
|
|
1430
|
+
//#endregion
|
|
20
1431
|
//#region packages/core/runtime-dom/src/hostContext.ts
|
|
21
1432
|
let currentHostContext;
|
|
22
1433
|
function getCurrentHostContext() {
|
|
@@ -41,48 +1452,50 @@ function withCapturedHostContext(fn) {
|
|
|
41
1452
|
});
|
|
42
1453
|
}
|
|
43
1454
|
//#endregion
|
|
44
|
-
//#region packages/core/runtime-dom/src/
|
|
45
|
-
|
|
46
|
-
|
|
1455
|
+
//#region packages/core/runtime-dom/src/scopedSubtree.ts
|
|
1456
|
+
function captureScopedSubtreeContext() {
|
|
1457
|
+
return {
|
|
1458
|
+
owner: getCurrentOwner(),
|
|
1459
|
+
host: captureCurrentHostContext()
|
|
1460
|
+
};
|
|
1461
|
+
}
|
|
1462
|
+
var ScopedSubtree = class {
|
|
1463
|
+
constructor(parent, marker, context) {
|
|
47
1464
|
this.parent = parent;
|
|
48
1465
|
this.marker = marker;
|
|
1466
|
+
this.context = context;
|
|
49
1467
|
this.nodes = [];
|
|
50
1468
|
}
|
|
51
|
-
replace(
|
|
52
|
-
this.
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
1469
|
+
replace(render) {
|
|
1470
|
+
this.dispose();
|
|
1471
|
+
const scope = effectScope(true);
|
|
1472
|
+
let nodes = [];
|
|
1473
|
+
try {
|
|
1474
|
+
scope.run(() => {
|
|
1475
|
+
nodes = runWithOwner(this.context.owner, () => withHostContext(this.context.host, () => insertTracked(this.parent, render(), this.marker)));
|
|
1476
|
+
});
|
|
1477
|
+
} catch (error) {
|
|
1478
|
+
scope.stop();
|
|
1479
|
+
removeNodes$1(nodes);
|
|
1480
|
+
throw error;
|
|
59
1481
|
}
|
|
1482
|
+
this.scope = scope;
|
|
1483
|
+
this.nodes = nodes;
|
|
1484
|
+
}
|
|
1485
|
+
dispose() {
|
|
1486
|
+
var _this$scope;
|
|
1487
|
+
(_this$scope = this.scope) === null || _this$scope === void 0 || _this$scope.stop();
|
|
1488
|
+
this.scope = void 0;
|
|
1489
|
+
removeNodes$1(this.nodes);
|
|
60
1490
|
this.nodes = [];
|
|
61
1491
|
}
|
|
1492
|
+
moveBefore(marker) {
|
|
1493
|
+
moveRangeBefore(this.nodes, this.parent, marker);
|
|
1494
|
+
}
|
|
62
1495
|
current() {
|
|
63
1496
|
return this.nodes;
|
|
64
1497
|
}
|
|
65
1498
|
};
|
|
66
|
-
function insertTracked(parent, value, marker = null) {
|
|
67
|
-
if (value === void 0 || value == null || value === false || value === true) return [];
|
|
68
|
-
if (Array.isArray(value)) {
|
|
69
|
-
const nodes = [];
|
|
70
|
-
for (const item of value) nodes.push(...insertTracked(parent, item, marker));
|
|
71
|
-
return nodes;
|
|
72
|
-
}
|
|
73
|
-
const node = value instanceof Node ? value : document.createTextNode(String(value));
|
|
74
|
-
parent.insertBefore(node, marker);
|
|
75
|
-
return [node];
|
|
76
|
-
}
|
|
77
|
-
function removeNodes$1(nodes) {
|
|
78
|
-
for (const node of nodes) {
|
|
79
|
-
var _node$parentNode2;
|
|
80
|
-
(_node$parentNode2 = node.parentNode) === null || _node$parentNode2 === void 0 || _node$parentNode2.removeChild(node);
|
|
81
|
-
}
|
|
82
|
-
}
|
|
83
|
-
function moveRangeBefore(nodes, parent, marker = null) {
|
|
84
|
-
for (const node of nodes) parent.insertBefore(node, marker);
|
|
85
|
-
}
|
|
86
1499
|
//#endregion
|
|
87
1500
|
//#region packages/core/runtime-dom/src/insert.ts
|
|
88
1501
|
function insert(parent, value, marker = null) {
|
|
@@ -93,16 +1506,13 @@ function insert(parent, value, marker = null) {
|
|
|
93
1506
|
insertTracked(parent, value, marker);
|
|
94
1507
|
}
|
|
95
1508
|
function mountDynamic(parent, marker, value) {
|
|
96
|
-
const
|
|
97
|
-
const
|
|
98
|
-
|
|
99
|
-
const runner = (0, _zeus_js_signal.effect)(() => {
|
|
100
|
-
const next = runWithOwner(owner, () => withHostContext(hostContext, value));
|
|
101
|
-
range.replace(next);
|
|
1509
|
+
const subtree = new ScopedSubtree(parent, marker, captureScopedSubtreeContext());
|
|
1510
|
+
const runner = effect(() => {
|
|
1511
|
+
subtree.replace(value);
|
|
102
1512
|
});
|
|
103
|
-
|
|
104
|
-
|
|
105
|
-
|
|
1513
|
+
onScopeDispose(() => {
|
|
1514
|
+
stop(runner);
|
|
1515
|
+
subtree.dispose();
|
|
106
1516
|
}, true);
|
|
107
1517
|
}
|
|
108
1518
|
//#endregion
|
|
@@ -195,7 +1605,7 @@ function provideDOMContext(target, context, value) {
|
|
|
195
1605
|
request.detail.resolve(value);
|
|
196
1606
|
};
|
|
197
1607
|
target.addEventListener(ZEUS_CONTEXT_REQUEST, handler);
|
|
198
|
-
|
|
1608
|
+
onScopeDispose(() => {
|
|
199
1609
|
target.removeEventListener(ZEUS_CONTEXT_REQUEST, handler);
|
|
200
1610
|
}, true);
|
|
201
1611
|
}
|
|
@@ -245,7 +1655,7 @@ function emitDevtoolsEvent(event) {
|
|
|
245
1655
|
//#region packages/core/runtime-dom/src/render.ts
|
|
246
1656
|
function render(value, container, options = {}) {
|
|
247
1657
|
var _options$owner;
|
|
248
|
-
const renderScope = (
|
|
1658
|
+
const renderScope = effectScope();
|
|
249
1659
|
const owner = (_options$owner = options.owner) !== null && _options$owner !== void 0 ? _options$owner : createOwner();
|
|
250
1660
|
renderScope.run(() => {
|
|
251
1661
|
container.textContent = "";
|
|
@@ -295,12 +1705,12 @@ function removeNodes(nodes) {
|
|
|
295
1705
|
//#endregion
|
|
296
1706
|
//#region packages/core/runtime-dom/src/bindings.ts
|
|
297
1707
|
function bindText(node, value) {
|
|
298
|
-
|
|
1708
|
+
effect(() => {
|
|
299
1709
|
node.data = stringifyText(value());
|
|
300
1710
|
});
|
|
301
1711
|
}
|
|
302
1712
|
function bindTextContent(el, value) {
|
|
303
|
-
|
|
1713
|
+
effect(() => {
|
|
304
1714
|
el.textContent = stringifyText(value());
|
|
305
1715
|
});
|
|
306
1716
|
}
|
|
@@ -355,17 +1765,17 @@ function normalizeAttrName(name) {
|
|
|
355
1765
|
return name === "className" ? "class" : name;
|
|
356
1766
|
}
|
|
357
1767
|
function bindAttr(el, name, value) {
|
|
358
|
-
|
|
1768
|
+
effect(() => {
|
|
359
1769
|
setAttr(el, name, value());
|
|
360
1770
|
});
|
|
361
1771
|
}
|
|
362
1772
|
function bindProp(el, name, value) {
|
|
363
|
-
|
|
1773
|
+
effect(() => {
|
|
364
1774
|
el[name] = value();
|
|
365
1775
|
});
|
|
366
1776
|
}
|
|
367
1777
|
function bindClass(el, value) {
|
|
368
|
-
|
|
1778
|
+
effect(() => {
|
|
369
1779
|
const next = normalizeClass(value());
|
|
370
1780
|
if (next) el.setAttribute("class", next);
|
|
371
1781
|
else el.removeAttribute("class");
|
|
@@ -380,7 +1790,7 @@ function normalizeClass(value) {
|
|
|
380
1790
|
}
|
|
381
1791
|
function bindStyle(el, value) {
|
|
382
1792
|
let prev;
|
|
383
|
-
|
|
1793
|
+
effect(() => {
|
|
384
1794
|
const next = value();
|
|
385
1795
|
if (next == null) {
|
|
386
1796
|
el.removeAttribute("style");
|
|
@@ -399,11 +1809,11 @@ function bindStyle(el, value) {
|
|
|
399
1809
|
function patchStyle(el, prev, next) {
|
|
400
1810
|
const style = el.style;
|
|
401
1811
|
if (prev) {
|
|
402
|
-
for (const key in prev) if (!(key in next)) style.setProperty(toKebabCase$
|
|
1812
|
+
for (const key in prev) if (!(key in next)) style.setProperty(toKebabCase$2(key), "");
|
|
403
1813
|
}
|
|
404
1814
|
for (const key in next) {
|
|
405
1815
|
const value = next[key];
|
|
406
|
-
const name = toKebabCase$
|
|
1816
|
+
const name = toKebabCase$2(key);
|
|
407
1817
|
if (value == null) style.setProperty(name, "");
|
|
408
1818
|
else style.setProperty(name, normalizeStyleValue(key, value));
|
|
409
1819
|
}
|
|
@@ -425,7 +1835,7 @@ const unitlessNumbers = /* @__PURE__ */ new Set([
|
|
|
425
1835
|
function isUnitlessNumber(key) {
|
|
426
1836
|
return unitlessNumbers.has(key);
|
|
427
1837
|
}
|
|
428
|
-
function toKebabCase$
|
|
1838
|
+
function toKebabCase$2(value) {
|
|
429
1839
|
return value.replace(/[A-Z]/g, (match) => `-${match.toLowerCase()}`);
|
|
430
1840
|
}
|
|
431
1841
|
//#endregion
|
|
@@ -440,7 +1850,7 @@ function bindEvent(el, name, handler) {
|
|
|
440
1850
|
const target = el;
|
|
441
1851
|
const events = target.__zeusEvents || (target.__zeusEvents = {});
|
|
442
1852
|
events[name] = handler;
|
|
443
|
-
|
|
1853
|
+
onScopeDispose(() => {
|
|
444
1854
|
var _target$__zeusEvents;
|
|
445
1855
|
if (((_target$__zeusEvents = target.__zeusEvents) === null || _target$__zeusEvents === void 0 ? void 0 : _target$__zeusEvents[name]) === handler) delete target.__zeusEvents[name];
|
|
446
1856
|
}, true);
|
|
@@ -523,7 +1933,7 @@ function setRef(target, value) {
|
|
|
523
1933
|
}
|
|
524
1934
|
function bindRef(el, target) {
|
|
525
1935
|
setRef(target, el);
|
|
526
|
-
if (
|
|
1936
|
+
if (getCurrentScope()) onScopeDispose(() => {
|
|
527
1937
|
setRef(target, null);
|
|
528
1938
|
}, true);
|
|
529
1939
|
}
|
|
@@ -535,8 +1945,7 @@ function createComponent(component, props) {
|
|
|
535
1945
|
//#endregion
|
|
536
1946
|
//#region packages/core/runtime-dom/src/list.ts
|
|
537
1947
|
function disposeListRecord(record) {
|
|
538
|
-
record.
|
|
539
|
-
removeNodes$1(record.nodes);
|
|
1948
|
+
record.subtree.dispose();
|
|
540
1949
|
}
|
|
541
1950
|
function mountFor$1(parent, marker, each, key, render) {
|
|
542
1951
|
if (!key) {
|
|
@@ -546,25 +1955,21 @@ function mountFor$1(parent, marker, each, key, render) {
|
|
|
546
1955
|
mountKeyedFor(parent, marker, each, key, render);
|
|
547
1956
|
}
|
|
548
1957
|
function mountIndexFor(parent, marker, each, render) {
|
|
549
|
-
|
|
550
|
-
const
|
|
551
|
-
const runner = (0, _zeus_js_signal.effect)(() => {
|
|
1958
|
+
const subtree = new ScopedSubtree(parent, marker, captureScopedSubtreeContext());
|
|
1959
|
+
const runner = effect(() => {
|
|
552
1960
|
var _each;
|
|
553
|
-
removeNodes$1(current);
|
|
554
|
-
current = [];
|
|
555
1961
|
const list = (_each = each()) !== null && _each !== void 0 ? _each : [];
|
|
556
|
-
|
|
1962
|
+
subtree.replace(() => list.map((item, index) => render(item, index)));
|
|
557
1963
|
});
|
|
558
|
-
|
|
559
|
-
|
|
560
|
-
|
|
561
|
-
current = [];
|
|
1964
|
+
onScopeDispose(() => {
|
|
1965
|
+
stop(runner);
|
|
1966
|
+
subtree.dispose();
|
|
562
1967
|
}, true);
|
|
563
1968
|
}
|
|
564
1969
|
function mountKeyedFor(parent, marker, each, key, render) {
|
|
565
1970
|
let records = [];
|
|
566
|
-
const
|
|
567
|
-
const runner =
|
|
1971
|
+
const subtreeContext = captureScopedSubtreeContext();
|
|
1972
|
+
const runner = effect(() => {
|
|
568
1973
|
var _each2;
|
|
569
1974
|
const nextItems = (_each2 = each()) !== null && _each2 !== void 0 ? _each2 : [];
|
|
570
1975
|
const oldMap = /* @__PURE__ */ new Map();
|
|
@@ -580,31 +1985,22 @@ function mountKeyedFor(parent, marker, each, key, render) {
|
|
|
580
1985
|
oldRecord.index = i;
|
|
581
1986
|
nextRecords.push(oldRecord);
|
|
582
1987
|
} else {
|
|
583
|
-
const
|
|
584
|
-
|
|
585
|
-
try {
|
|
586
|
-
itemScope.run(() => {
|
|
587
|
-
nodes = insertTracked(parent, runWithOwner(owner, () => render(item, i)), marker);
|
|
588
|
-
});
|
|
589
|
-
} catch (error) {
|
|
590
|
-
itemScope.stop();
|
|
591
|
-
throw error;
|
|
592
|
-
}
|
|
1988
|
+
const subtree = new ScopedSubtree(parent, marker, subtreeContext);
|
|
1989
|
+
subtree.replace(() => render(item, i));
|
|
593
1990
|
nextRecords.push({
|
|
594
1991
|
key: itemKey,
|
|
595
1992
|
item,
|
|
596
1993
|
index: i,
|
|
597
|
-
|
|
598
|
-
scope: itemScope
|
|
1994
|
+
subtree
|
|
599
1995
|
});
|
|
600
1996
|
}
|
|
601
1997
|
}
|
|
602
1998
|
for (const record of oldMap.values()) disposeListRecord(record);
|
|
603
1999
|
for (let i = nextRecords.length - 1; i >= 0; i--) {
|
|
604
|
-
var _nextRecords$
|
|
2000
|
+
var _nextRecords$subtree$;
|
|
605
2001
|
const record = nextRecords[i];
|
|
606
|
-
const anchor = i === nextRecords.length - 1 ? marker : (_nextRecords$
|
|
607
|
-
|
|
2002
|
+
const anchor = i === nextRecords.length - 1 ? marker : (_nextRecords$subtree$ = nextRecords[i + 1].subtree.current()[0]) !== null && _nextRecords$subtree$ !== void 0 ? _nextRecords$subtree$ : marker;
|
|
2003
|
+
record.subtree.moveBefore(anchor);
|
|
608
2004
|
}
|
|
609
2005
|
emitDevtoolsEvent({
|
|
610
2006
|
type: "mount-for",
|
|
@@ -612,8 +2008,8 @@ function mountKeyedFor(parent, marker, each, key, render) {
|
|
|
612
2008
|
});
|
|
613
2009
|
records = nextRecords;
|
|
614
2010
|
});
|
|
615
|
-
|
|
616
|
-
|
|
2011
|
+
onScopeDispose(() => {
|
|
2012
|
+
stop(runner);
|
|
617
2013
|
for (const record of records) disposeListRecord(record);
|
|
618
2014
|
records = [];
|
|
619
2015
|
}, true);
|
|
@@ -638,6 +2034,254 @@ function mountFor(parent, marker, each, key, render) {
|
|
|
638
2034
|
mountFor$1(parent, marker, each, key, render);
|
|
639
2035
|
}
|
|
640
2036
|
//#endregion
|
|
2037
|
+
//#region packages/core/runtime-dom/src/customElementContract.ts
|
|
2038
|
+
function getCustomElementAttributeName(prop) {
|
|
2039
|
+
var _prop$attrName;
|
|
2040
|
+
if (prop.attrName === false) return void 0;
|
|
2041
|
+
if (!isAttributeBackedType(prop.type) && !prop.deserialize) return;
|
|
2042
|
+
return normalizeAttributeName((_prop$attrName = prop.attrName) !== null && _prop$attrName !== void 0 ? _prop$attrName : toKebabCase$1(prop.name));
|
|
2043
|
+
}
|
|
2044
|
+
function getCustomElementObservedAttributes(props) {
|
|
2045
|
+
const attributes = /* @__PURE__ */ new Set();
|
|
2046
|
+
for (const prop of props) {
|
|
2047
|
+
const attrName = getCustomElementAttributeName(prop);
|
|
2048
|
+
if (attrName) attributes.add(attrName);
|
|
2049
|
+
}
|
|
2050
|
+
return Array.from(attributes);
|
|
2051
|
+
}
|
|
2052
|
+
function findCustomElementPropByAttribute(props, attrName) {
|
|
2053
|
+
const normalizedName = normalizeAttributeName(attrName);
|
|
2054
|
+
return props.find((prop) => {
|
|
2055
|
+
return getCustomElementAttributeName(prop) === normalizedName;
|
|
2056
|
+
});
|
|
2057
|
+
}
|
|
2058
|
+
function coerceCustomElementAttribute(prop, value) {
|
|
2059
|
+
if (typeof prop.deserialize === "function") return prop.deserialize(value);
|
|
2060
|
+
if (prop.deserialize === true) return value;
|
|
2061
|
+
switch (prop.type) {
|
|
2062
|
+
case "boolean": return value !== null;
|
|
2063
|
+
case "number": return value === null ? void 0 : Number(value);
|
|
2064
|
+
case "string": return value !== null && value !== void 0 ? value : void 0;
|
|
2065
|
+
case "object":
|
|
2066
|
+
case "array": return coerceStructuredAttribute(prop, value);
|
|
2067
|
+
case "function": return;
|
|
2068
|
+
default: return value;
|
|
2069
|
+
}
|
|
2070
|
+
}
|
|
2071
|
+
function reflectCustomElementProperty(element, prop, value, reflectingAttrs) {
|
|
2072
|
+
const attrName = getCustomElementAttributeName(prop);
|
|
2073
|
+
if (!attrName || prop.serialize === true) return;
|
|
2074
|
+
reflectingAttrs === null || reflectingAttrs === void 0 || reflectingAttrs.add(attrName);
|
|
2075
|
+
try {
|
|
2076
|
+
const serialized = serializeCustomElementProperty(prop, value);
|
|
2077
|
+
if (serialized == null) element.removeAttribute(attrName);
|
|
2078
|
+
else element.setAttribute(attrName, serialized);
|
|
2079
|
+
} finally {
|
|
2080
|
+
reflectingAttrs === null || reflectingAttrs === void 0 || reflectingAttrs.delete(attrName);
|
|
2081
|
+
}
|
|
2082
|
+
}
|
|
2083
|
+
function createCustomElementMountLifecycle(mount) {
|
|
2084
|
+
let mounted;
|
|
2085
|
+
return {
|
|
2086
|
+
connect() {
|
|
2087
|
+
var _mounted;
|
|
2088
|
+
(_mounted = mounted) !== null && _mounted !== void 0 || (mounted = mount());
|
|
2089
|
+
return mounted;
|
|
2090
|
+
},
|
|
2091
|
+
disconnect() {
|
|
2092
|
+
const current = mounted;
|
|
2093
|
+
mounted = void 0;
|
|
2094
|
+
current === null || current === void 0 || current.dispose();
|
|
2095
|
+
},
|
|
2096
|
+
current() {
|
|
2097
|
+
return mounted;
|
|
2098
|
+
}
|
|
2099
|
+
};
|
|
2100
|
+
}
|
|
2101
|
+
function serializeCustomElementProperty(prop, value) {
|
|
2102
|
+
if (typeof prop.serialize === "function") return prop.serialize(value);
|
|
2103
|
+
if (prop.type === "boolean") return value ? "" : null;
|
|
2104
|
+
if (value == null) return null;
|
|
2105
|
+
if (prop.type === "object" || prop.type === "array") return JSON.stringify(value);
|
|
2106
|
+
if (prop.type === "function") return void 0;
|
|
2107
|
+
return String(value);
|
|
2108
|
+
}
|
|
2109
|
+
function coerceStructuredAttribute(prop, value) {
|
|
2110
|
+
if (value === null) return void 0;
|
|
2111
|
+
try {
|
|
2112
|
+
return JSON.parse(value);
|
|
2113
|
+
} catch {
|
|
2114
|
+
console.warn(`[Zeus custom-element] Failed to parse JSON attribute "${getCustomElementAttributeName(prop)}".`);
|
|
2115
|
+
return prop.type === "array" ? [] : {};
|
|
2116
|
+
}
|
|
2117
|
+
}
|
|
2118
|
+
function isAttributeBackedType(type) {
|
|
2119
|
+
return type === "string" || type === "number" || type === "boolean";
|
|
2120
|
+
}
|
|
2121
|
+
function normalizeAttributeName(value) {
|
|
2122
|
+
return value.toLowerCase();
|
|
2123
|
+
}
|
|
2124
|
+
function toKebabCase$1(value) {
|
|
2125
|
+
return value.replace(/[A-Z]/g, (match) => `-${match.toLowerCase()}`);
|
|
2126
|
+
}
|
|
2127
|
+
//#endregion
|
|
2128
|
+
//#region packages/core/runtime-dom/src/slot.ts
|
|
2129
|
+
function createSlot(name, fallback) {
|
|
2130
|
+
const context = getCurrentHostContext();
|
|
2131
|
+
if (!context) return createNativeSlot(name, fallback);
|
|
2132
|
+
if (context.mode === "shadow") return createNativeSlot(name, fallback);
|
|
2133
|
+
if (context.projection) return context.projection.createSlot(name, fallback);
|
|
2134
|
+
const assigned = findLightSlotNodes(context.lightChildren, name);
|
|
2135
|
+
if (assigned.length > 0) return Array.from(assigned);
|
|
2136
|
+
return fallback ? fallback() : null;
|
|
2137
|
+
}
|
|
2138
|
+
function createLightDomProjection(host, lightChildren) {
|
|
2139
|
+
const outlets = [];
|
|
2140
|
+
let observer;
|
|
2141
|
+
let unregisterHost;
|
|
2142
|
+
const observe = () => {
|
|
2143
|
+
observer === null || observer === void 0 || observer.observe(host, {
|
|
2144
|
+
attributes: true,
|
|
2145
|
+
attributeFilter: ["slot"],
|
|
2146
|
+
childList: true,
|
|
2147
|
+
subtree: true
|
|
2148
|
+
});
|
|
2149
|
+
for (const node of lightChildren) {
|
|
2150
|
+
if (node.nodeType !== Node.ELEMENT_NODE || host.contains(node)) continue;
|
|
2151
|
+
observer === null || observer === void 0 || observer.observe(node, {
|
|
2152
|
+
attributes: true,
|
|
2153
|
+
attributeFilter: ["slot"]
|
|
2154
|
+
});
|
|
2155
|
+
}
|
|
2156
|
+
};
|
|
2157
|
+
const reconcile = () => {
|
|
2158
|
+
observer === null || observer === void 0 || observer.disconnect();
|
|
2159
|
+
const claimed = /* @__PURE__ */ new Set();
|
|
2160
|
+
for (const outlet of outlets) {
|
|
2161
|
+
const assigned = lightChildren.filter((node) => {
|
|
2162
|
+
if (claimed.has(node) || !matchesLightSlot(node, outlet.name)) return false;
|
|
2163
|
+
claimed.add(node);
|
|
2164
|
+
return true;
|
|
2165
|
+
});
|
|
2166
|
+
replaceOutletNodes(outlet, assigned.length > 0 ? assigned : outlet.fallbackNodes);
|
|
2167
|
+
}
|
|
2168
|
+
for (const node of lightChildren) if (!claimed.has(node) && host.contains(node)) {
|
|
2169
|
+
var _node$parentNode;
|
|
2170
|
+
(_node$parentNode = node.parentNode) === null || _node$parentNode === void 0 || _node$parentNode.removeChild(node);
|
|
2171
|
+
}
|
|
2172
|
+
observer === null || observer === void 0 || observer.takeRecords();
|
|
2173
|
+
observe();
|
|
2174
|
+
};
|
|
2175
|
+
const handleMutations = (records) => {
|
|
2176
|
+
const added = /* @__PURE__ */ new Set();
|
|
2177
|
+
const removed = /* @__PURE__ */ new Set();
|
|
2178
|
+
let changed = false;
|
|
2179
|
+
for (const record of records) {
|
|
2180
|
+
if (record.type === "attributes") {
|
|
2181
|
+
if (lightChildren.includes(record.target)) changed = true;
|
|
2182
|
+
continue;
|
|
2183
|
+
}
|
|
2184
|
+
for (const node of record.removedNodes) if (lightChildren.includes(node)) removed.add(node);
|
|
2185
|
+
if (record.target !== host) continue;
|
|
2186
|
+
const additions = Array.from(record.addedNodes).filter((node) => {
|
|
2187
|
+
return !isRuntimeOwnedNode(node);
|
|
2188
|
+
});
|
|
2189
|
+
if (additions.length === 0) continue;
|
|
2190
|
+
for (const node of additions) added.add(node);
|
|
2191
|
+
insertLightChildren(lightChildren, additions, record);
|
|
2192
|
+
changed = true;
|
|
2193
|
+
}
|
|
2194
|
+
for (const node of removed) {
|
|
2195
|
+
if (added.has(node) || host.contains(node)) continue;
|
|
2196
|
+
const index = lightChildren.indexOf(node);
|
|
2197
|
+
if (index >= 0) {
|
|
2198
|
+
lightChildren.splice(index, 1);
|
|
2199
|
+
changed = true;
|
|
2200
|
+
}
|
|
2201
|
+
}
|
|
2202
|
+
if (changed) reconcile();
|
|
2203
|
+
};
|
|
2204
|
+
return {
|
|
2205
|
+
createSlot(name, fallback) {
|
|
2206
|
+
const fragment = document.createDocumentFragment();
|
|
2207
|
+
const start = document.createComment(name ? `zeus-slot:${name}` : "zeus-slot");
|
|
2208
|
+
const end = document.createComment("/zeus-slot");
|
|
2209
|
+
fragment.append(start, end);
|
|
2210
|
+
const outlet = {
|
|
2211
|
+
name,
|
|
2212
|
+
start,
|
|
2213
|
+
end,
|
|
2214
|
+
fallbackNodes: fallback ? insertTracked(fragment, fallback(), end) : []
|
|
2215
|
+
};
|
|
2216
|
+
outlets.push(outlet);
|
|
2217
|
+
reconcile();
|
|
2218
|
+
return fragment;
|
|
2219
|
+
},
|
|
2220
|
+
connect() {
|
|
2221
|
+
var _host$ownerDocument$d;
|
|
2222
|
+
if (observer) return;
|
|
2223
|
+
const Observer = (_host$ownerDocument$d = host.ownerDocument.defaultView) === null || _host$ownerDocument$d === void 0 ? void 0 : _host$ownerDocument$d.MutationObserver;
|
|
2224
|
+
if (!Observer) return;
|
|
2225
|
+
unregisterHost = registerLightDomHost(host, lightChildren);
|
|
2226
|
+
observer = new Observer(handleMutations);
|
|
2227
|
+
observe();
|
|
2228
|
+
},
|
|
2229
|
+
disconnect() {
|
|
2230
|
+
observer === null || observer === void 0 || observer.disconnect();
|
|
2231
|
+
observer = void 0;
|
|
2232
|
+
unregisterHost === null || unregisterHost === void 0 || unregisterHost();
|
|
2233
|
+
unregisterHost = void 0;
|
|
2234
|
+
}
|
|
2235
|
+
};
|
|
2236
|
+
}
|
|
2237
|
+
function replaceOutletNodes(outlet, nextNodes) {
|
|
2238
|
+
const parent = outlet.end.parentNode;
|
|
2239
|
+
if (!parent || parent !== outlet.start.parentNode) return;
|
|
2240
|
+
let current = outlet.start.nextSibling;
|
|
2241
|
+
while (current && current !== outlet.end) {
|
|
2242
|
+
const next = current.nextSibling;
|
|
2243
|
+
parent.removeChild(current);
|
|
2244
|
+
current = next;
|
|
2245
|
+
}
|
|
2246
|
+
for (const node of nextNodes) parent.insertBefore(node, outlet.end);
|
|
2247
|
+
}
|
|
2248
|
+
function insertLightChildren(lightChildren, additions, record) {
|
|
2249
|
+
for (const node of additions) {
|
|
2250
|
+
const currentIndex = lightChildren.indexOf(node);
|
|
2251
|
+
if (currentIndex >= 0) lightChildren.splice(currentIndex, 1);
|
|
2252
|
+
}
|
|
2253
|
+
let insertionIndex = lightChildren.length;
|
|
2254
|
+
const previousIndex = record.previousSibling ? lightChildren.indexOf(record.previousSibling) : -1;
|
|
2255
|
+
const nextIndex = record.nextSibling ? lightChildren.indexOf(record.nextSibling) : -1;
|
|
2256
|
+
if (previousIndex >= 0) insertionIndex = previousIndex + 1;
|
|
2257
|
+
else if (nextIndex >= 0) insertionIndex = nextIndex;
|
|
2258
|
+
else if (record.previousSibling === null) insertionIndex = 0;
|
|
2259
|
+
lightChildren.splice(insertionIndex, 0, ...additions);
|
|
2260
|
+
}
|
|
2261
|
+
function createNativeSlot(name, fallback) {
|
|
2262
|
+
const slot = document.createElement("slot");
|
|
2263
|
+
if (name) slot.setAttribute("name", name);
|
|
2264
|
+
const fallbackValue = fallback === null || fallback === void 0 ? void 0 : fallback();
|
|
2265
|
+
if (fallbackValue != null) insert(slot, fallbackValue);
|
|
2266
|
+
return slot;
|
|
2267
|
+
}
|
|
2268
|
+
function findLightSlotNodes(nodes, name) {
|
|
2269
|
+
return nodes.filter((node) => matchesLightSlot(node, name));
|
|
2270
|
+
}
|
|
2271
|
+
function matchesLightSlot(node, name) {
|
|
2272
|
+
if (name) {
|
|
2273
|
+
if (node.nodeType !== Node.ELEMENT_NODE) return false;
|
|
2274
|
+
return node.getAttribute("slot") === name;
|
|
2275
|
+
}
|
|
2276
|
+
if (node.nodeType === Node.ELEMENT_NODE) return !node.hasAttribute("slot");
|
|
2277
|
+
return isMeaningfulTextNode(node);
|
|
2278
|
+
}
|
|
2279
|
+
function isMeaningfulTextNode(node) {
|
|
2280
|
+
var _node$textContent;
|
|
2281
|
+
if (node.nodeType !== Node.TEXT_NODE) return false;
|
|
2282
|
+
return Boolean((_node$textContent = node.textContent) === null || _node$textContent === void 0 ? void 0 : _node$textContent.trim());
|
|
2283
|
+
}
|
|
2284
|
+
//#endregion
|
|
641
2285
|
//#region packages/core/runtime-dom/src/defineElement.ts
|
|
642
2286
|
const ZEUS_ELEMENT_DEFINITION = Symbol.for("zeus.element.definition");
|
|
643
2287
|
function prop(input, options = {}) {
|
|
@@ -678,9 +2322,9 @@ function createPropStore(defs) {
|
|
|
678
2322
|
const slots = /* @__PURE__ */ new Map();
|
|
679
2323
|
const props = {};
|
|
680
2324
|
for (const def of defs) {
|
|
681
|
-
const slot =
|
|
682
|
-
slots.set(def.
|
|
683
|
-
Object.defineProperty(props, def.
|
|
2325
|
+
const slot = state();
|
|
2326
|
+
slots.set(def.name, slot);
|
|
2327
|
+
Object.defineProperty(props, def.name, {
|
|
684
2328
|
configurable: false,
|
|
685
2329
|
enumerable: true,
|
|
686
2330
|
get() {
|
|
@@ -719,7 +2363,7 @@ function defineElement(tagName, options, setup) {
|
|
|
719
2363
|
setup,
|
|
720
2364
|
propDefs
|
|
721
2365
|
};
|
|
722
|
-
const observedAttributes = propDefs
|
|
2366
|
+
const observedAttributes = getCustomElementObservedAttributes(propDefs);
|
|
723
2367
|
class ZeusElement extends HTMLElement {
|
|
724
2368
|
static get observedAttributes() {
|
|
725
2369
|
return observedAttributes;
|
|
@@ -728,7 +2372,8 @@ function defineElement(tagName, options, setup) {
|
|
|
728
2372
|
super();
|
|
729
2373
|
this.lightChildren = [];
|
|
730
2374
|
this.capturedLightChildren = false;
|
|
731
|
-
this.
|
|
2375
|
+
this.attributeProps = /* @__PURE__ */ new Set();
|
|
2376
|
+
this.reflectingAttrs = /* @__PURE__ */ new Set();
|
|
732
2377
|
this.propStore = createPropStore(propDefs);
|
|
733
2378
|
this.props = this.propStore.props;
|
|
734
2379
|
applyPropDefaults(this.propStore, propDefs);
|
|
@@ -740,17 +2385,23 @@ function defineElement(tagName, options, setup) {
|
|
|
740
2385
|
emit: createEmitApi(this, options.emits),
|
|
741
2386
|
expose: createExpose(this)
|
|
742
2387
|
};
|
|
2388
|
+
this.mountLifecycle = createCustomElementMountLifecycle(() => this.mountElement());
|
|
743
2389
|
}
|
|
744
2390
|
connectedCallback() {
|
|
2391
|
+
this.mountLifecycle.connect();
|
|
2392
|
+
}
|
|
2393
|
+
disconnectedCallback() {
|
|
2394
|
+
this.mountLifecycle.disconnect();
|
|
2395
|
+
}
|
|
2396
|
+
mountElement() {
|
|
745
2397
|
var _options$shadow, _options$consumes;
|
|
746
|
-
if (this.dispose) return;
|
|
747
2398
|
const shadow = (_options$shadow = options.shadow) !== null && _options$shadow !== void 0 ? _options$shadow : false;
|
|
748
2399
|
const mode = shadow ? "shadow" : "light";
|
|
749
2400
|
if (mode === "light" && !this.capturedLightChildren) {
|
|
750
2401
|
this.lightChildren = Array.from(this.childNodes);
|
|
751
2402
|
this.capturedLightChildren = true;
|
|
752
2403
|
}
|
|
753
|
-
this.
|
|
2404
|
+
const projection = mode === "light" ? createLightDomProjection(this, this.lightChildren) : void 0;
|
|
754
2405
|
const owner = createOwner();
|
|
755
2406
|
for (const context of (_options$consumes = options.consumes) !== null && _options$consumes !== void 0 ? _options$consumes : []) {
|
|
756
2407
|
const resolved = resolveDOMContext(this, context);
|
|
@@ -761,18 +2412,19 @@ function defineElement(tagName, options, setup) {
|
|
|
761
2412
|
const hostContext = {
|
|
762
2413
|
host: this,
|
|
763
2414
|
mode,
|
|
764
|
-
lightChildren: this.lightChildren
|
|
2415
|
+
lightChildren: this.lightChildren,
|
|
2416
|
+
projection
|
|
765
2417
|
};
|
|
766
|
-
|
|
2418
|
+
const dispose = render(() => runWithOwner(owner, () => withHostContext(hostContext, () => {
|
|
767
2419
|
syncFormValue(this.props, this.setupContext, options.form);
|
|
768
2420
|
return setup(this.props, this.setupContext);
|
|
769
2421
|
})), target, { owner });
|
|
770
2422
|
mountStyles(target, options.styles);
|
|
771
|
-
|
|
772
|
-
|
|
773
|
-
|
|
774
|
-
|
|
775
|
-
|
|
2423
|
+
projection === null || projection === void 0 || projection.connect();
|
|
2424
|
+
return { dispose() {
|
|
2425
|
+
projection === null || projection === void 0 || projection.disconnect();
|
|
2426
|
+
dispose();
|
|
2427
|
+
} };
|
|
776
2428
|
}
|
|
777
2429
|
formAssociatedCallback(form) {
|
|
778
2430
|
var _options$form, _options$form$associa;
|
|
@@ -791,10 +2443,11 @@ function defineElement(tagName, options, setup) {
|
|
|
791
2443
|
(_options$form4 = options.form) === null || _options$form4 === void 0 || (_options$form4$stateR = _options$form4.stateRestore) === null || _options$form4$stateR === void 0 || _options$form4$stateR.call(_options$form4, state, mode, this.props, this.setupContext);
|
|
792
2444
|
}
|
|
793
2445
|
attributeChangedCallback(name, oldValue, newValue) {
|
|
794
|
-
if (oldValue === newValue || this.
|
|
795
|
-
const def = propDefs.find((item) => item.
|
|
2446
|
+
if (oldValue === newValue || this.reflectingAttrs.has(name)) return;
|
|
2447
|
+
const def = propDefs.find((item) => item.attrName === name);
|
|
796
2448
|
if (!def) return;
|
|
797
|
-
this.
|
|
2449
|
+
this.attributeProps.add(def.name);
|
|
2450
|
+
this.propStore.set(def.name, coerceCustomElementAttribute(def, newValue));
|
|
798
2451
|
}
|
|
799
2452
|
resolveRenderTarget(shadow) {
|
|
800
2453
|
if (this.target) return this.target;
|
|
@@ -805,24 +2458,11 @@ function defineElement(tagName, options, setup) {
|
|
|
805
2458
|
this.target = this.attachShadow(typeof shadow === "object" ? shadow : { mode: "open" });
|
|
806
2459
|
return this.target;
|
|
807
2460
|
}
|
|
808
|
-
syncAttributesToProps(defs) {
|
|
809
|
-
for (const def of defs) {
|
|
810
|
-
if (def.attr === false) continue;
|
|
811
|
-
const value = this.getAttribute(def.attr);
|
|
812
|
-
if (value !== null || def.type === Boolean) this.propStore.set(def.key, castAttributeValue(value, def));
|
|
813
|
-
}
|
|
814
|
-
}
|
|
815
2461
|
_writePropFromProperty(key, value) {
|
|
816
|
-
const def = propDefs.find((item) => item.
|
|
2462
|
+
const def = propDefs.find((item) => item.name === key);
|
|
2463
|
+
this.attributeProps.delete(key);
|
|
817
2464
|
this.propStore.set(key, value);
|
|
818
|
-
if (
|
|
819
|
-
this.reflecting = true;
|
|
820
|
-
try {
|
|
821
|
-
reflectPropToAttribute(this, def, value);
|
|
822
|
-
} finally {
|
|
823
|
-
this.reflecting = false;
|
|
824
|
-
}
|
|
825
|
-
}
|
|
2465
|
+
if (def === null || def === void 0 ? void 0 : def.reflect) reflectCustomElementProperty(this, def, value, this.reflectingAttrs);
|
|
826
2466
|
}
|
|
827
2467
|
}
|
|
828
2468
|
ZeusElement.formAssociated = Boolean(options.formAssociated);
|
|
@@ -845,13 +2485,13 @@ function mountElementDefinition(ctor, host, initialValues = /* @__PURE__ */ new
|
|
|
845
2485
|
applyPropDefaults(propStore, propDefs);
|
|
846
2486
|
for (const def of propDefs) {
|
|
847
2487
|
var _mountState$attribute;
|
|
848
|
-
if (def.
|
|
849
|
-
propStore.set(def.
|
|
850
|
-
initialValues.set(def.
|
|
2488
|
+
if (def.attrName !== false && ((_mountState$attribute = mountState.attributeProps) === null || _mountState$attribute === void 0 ? void 0 : _mountState$attribute.has(def.name))) {
|
|
2489
|
+
propStore.set(def.name, coerceCustomElementAttribute(def, host.getAttribute(def.attrName)));
|
|
2490
|
+
initialValues.set(def.name, propStore.get(def.name));
|
|
851
2491
|
continue;
|
|
852
2492
|
}
|
|
853
|
-
if (initialValues.has(def.
|
|
854
|
-
propStore.set(def.
|
|
2493
|
+
if (initialValues.has(def.name)) {
|
|
2494
|
+
propStore.set(def.name, initialValues.get(def.name));
|
|
855
2495
|
continue;
|
|
856
2496
|
}
|
|
857
2497
|
/**
|
|
@@ -859,11 +2499,11 @@ function mountElementDefinition(ctor, host, initialValues = /* @__PURE__ */ new
|
|
|
859
2499
|
* back to the lazy host value map so that `element.propName` returns the
|
|
860
2500
|
* correct default value rather than undefined.
|
|
861
2501
|
*/
|
|
862
|
-
initialValues.set(def.
|
|
2502
|
+
initialValues.set(def.name, propStore.get(def.name));
|
|
863
2503
|
}
|
|
864
2504
|
for (const def of propDefs) {
|
|
865
2505
|
var _mountState$attribute2;
|
|
866
|
-
if (def.reflect && def.serialize && !((_mountState$attribute2 = mountState.attributeProps) === null || _mountState$attribute2 === void 0 ? void 0 : _mountState$attribute2.has(def.
|
|
2506
|
+
if (def.reflect && def.serialize && !((_mountState$attribute2 = mountState.attributeProps) === null || _mountState$attribute2 === void 0 ? void 0 : _mountState$attribute2.has(def.name))) reflectCustomElementProperty(host, def, propStore.get(def.name), mountState.reflectingAttrs);
|
|
867
2507
|
}
|
|
868
2508
|
const shadow = (_options$shadow2 = options.shadow) !== null && _options$shadow2 !== void 0 ? _options$shadow2 : false;
|
|
869
2509
|
const mode = shadow ? "shadow" : "light";
|
|
@@ -872,6 +2512,7 @@ function mountElementDefinition(ctor, host, initialValues = /* @__PURE__ */ new
|
|
|
872
2512
|
mountState.capturedLightChildren = true;
|
|
873
2513
|
}
|
|
874
2514
|
const lightChildren = (_mountState$lightChil = mountState.lightChildren) !== null && _mountState$lightChil !== void 0 ? _mountState$lightChil : [];
|
|
2515
|
+
const projection = mode === "light" ? createLightDomProjection(host, lightChildren) : void 0;
|
|
875
2516
|
const owner = createOwner();
|
|
876
2517
|
for (const context of (_options$consumes2 = options.consumes) !== null && _options$consumes2 !== void 0 ? _options$consumes2 : []) {
|
|
877
2518
|
const resolved = resolveDOMContext(host, context);
|
|
@@ -882,7 +2523,8 @@ function mountElementDefinition(ctor, host, initialValues = /* @__PURE__ */ new
|
|
|
882
2523
|
const hostContext = {
|
|
883
2524
|
host,
|
|
884
2525
|
mode,
|
|
885
|
-
lightChildren
|
|
2526
|
+
lightChildren,
|
|
2527
|
+
projection
|
|
886
2528
|
};
|
|
887
2529
|
const setupContext = {
|
|
888
2530
|
host,
|
|
@@ -896,15 +2538,16 @@ function mountElementDefinition(ctor, host, initialValues = /* @__PURE__ */ new
|
|
|
896
2538
|
return setup(propStore.props, setupContext);
|
|
897
2539
|
})), target, { owner });
|
|
898
2540
|
mountStyles(target, options.styles);
|
|
2541
|
+
projection === null || projection === void 0 || projection.connect();
|
|
899
2542
|
return {
|
|
900
2543
|
propertyChanged(name, _oldValue, newValue) {
|
|
901
2544
|
var _mountState$attribute3;
|
|
902
|
-
const def = propDefs.find((item) => item.
|
|
903
|
-
const fromAttribute = Boolean((def === null || def === void 0 ? void 0 : def.
|
|
904
|
-
const value = fromAttribute && def ?
|
|
2545
|
+
const def = propDefs.find((item) => item.name === name);
|
|
2546
|
+
const fromAttribute = Boolean((def === null || def === void 0 ? void 0 : def.attrName) !== false && ((_mountState$attribute3 = mountState.attributeProps) === null || _mountState$attribute3 === void 0 ? void 0 : _mountState$attribute3.has(name)));
|
|
2547
|
+
const value = fromAttribute && def ? coerceCustomElementAttribute(def, typeof newValue === "string" ? newValue : null) : newValue;
|
|
905
2548
|
propStore.set(name, value);
|
|
906
2549
|
initialValues.set(name, value);
|
|
907
|
-
if ((def === null || def === void 0 ? void 0 : def.reflect) && !fromAttribute)
|
|
2550
|
+
if ((def === null || def === void 0 ? void 0 : def.reflect) && !fromAttribute) reflectCustomElementProperty(host, def, value, mountState.reflectingAttrs);
|
|
908
2551
|
},
|
|
909
2552
|
formAssociated(form) {
|
|
910
2553
|
var _options$form5, _options$form5$associ;
|
|
@@ -923,6 +2566,7 @@ function mountElementDefinition(ctor, host, initialValues = /* @__PURE__ */ new
|
|
|
923
2566
|
(_options$form8 = options.form) === null || _options$form8 === void 0 || (_options$form8$stateR = _options$form8.stateRestore) === null || _options$form8$stateR === void 0 || _options$form8$stateR.call(_options$form8, state, mode, propStore.props, setupContext);
|
|
924
2567
|
},
|
|
925
2568
|
dispose() {
|
|
2569
|
+
projection === null || projection === void 0 || projection.disconnect();
|
|
926
2570
|
dispose();
|
|
927
2571
|
}
|
|
928
2572
|
};
|
|
@@ -934,18 +2578,18 @@ function normalizePropDefinitions(props) {
|
|
|
934
2578
|
if (typeof input === "function") {
|
|
935
2579
|
const type = input;
|
|
936
2580
|
return {
|
|
937
|
-
|
|
938
|
-
|
|
939
|
-
type,
|
|
2581
|
+
name: propKey,
|
|
2582
|
+
attrName: isAttributeBackedConstructor(type) ? toKebabCase(propKey) : false,
|
|
2583
|
+
type: normalizePropType(type),
|
|
940
2584
|
reflect: false
|
|
941
2585
|
};
|
|
942
2586
|
}
|
|
943
2587
|
const type = input === null || input === void 0 ? void 0 : input.type;
|
|
944
2588
|
const defaultAttr = isAttributeBackedConstructor(type) ? toKebabCase(propKey) : false;
|
|
945
2589
|
return {
|
|
946
|
-
|
|
947
|
-
|
|
948
|
-
type,
|
|
2590
|
+
name: propKey,
|
|
2591
|
+
attrName: (input === null || input === void 0 ? void 0 : input.attr) === void 0 ? defaultAttr : input.attr,
|
|
2592
|
+
type: normalizePropType(type),
|
|
949
2593
|
reflect: Boolean(input === null || input === void 0 ? void 0 : input.reflect),
|
|
950
2594
|
default: input === null || input === void 0 ? void 0 : input.default,
|
|
951
2595
|
serialize: input === null || input === void 0 ? void 0 : input.serialize,
|
|
@@ -957,12 +2601,12 @@ function applyPropDefaults(store, defs) {
|
|
|
957
2601
|
for (const def of defs) {
|
|
958
2602
|
if (!("default" in def)) continue;
|
|
959
2603
|
const value = typeof def.default === "function" ? def.default() : def.default;
|
|
960
|
-
store.set(def.
|
|
2604
|
+
store.set(def.name, value);
|
|
961
2605
|
}
|
|
962
2606
|
}
|
|
963
2607
|
function definePropAccessors(element, store, defs) {
|
|
964
2608
|
for (const def of defs) {
|
|
965
|
-
const key = def.
|
|
2609
|
+
const key = def.name;
|
|
966
2610
|
const hadOwnValue = Object.prototype.hasOwnProperty.call(element, key);
|
|
967
2611
|
const ownValue = hadOwnValue ? element[key] : void 0;
|
|
968
2612
|
if (hadOwnValue) delete element[key];
|
|
@@ -984,59 +2628,11 @@ function definePropAccessors(element, store, defs) {
|
|
|
984
2628
|
if (hadOwnValue) element._writePropFromProperty(key, ownValue);
|
|
985
2629
|
}
|
|
986
2630
|
}
|
|
987
|
-
function castAttributeValue(value, def) {
|
|
988
|
-
if (def.deserialize) return def.deserialize(value);
|
|
989
|
-
if (def.type === Boolean) return value !== null;
|
|
990
|
-
if (value === null) return;
|
|
991
|
-
if (def.type === Number) return Number(value);
|
|
992
|
-
if (def.type === Object || def.type === Array) try {
|
|
993
|
-
return JSON.parse(value);
|
|
994
|
-
} catch {
|
|
995
|
-
console.warn(`[Zeus custom-element] Failed to parse JSON attribute "${def.attr}".`);
|
|
996
|
-
return def.type === Array ? [] : {};
|
|
997
|
-
}
|
|
998
|
-
if (def.type === Function) return;
|
|
999
|
-
return value;
|
|
1000
|
-
}
|
|
1001
|
-
function reflectPropToAttribute(element, def, value) {
|
|
1002
|
-
if (def.attr === false) return;
|
|
1003
|
-
if (def.serialize) {
|
|
1004
|
-
const serialized = def.serialize(value);
|
|
1005
|
-
if (serialized == null) element.removeAttribute(def.attr);
|
|
1006
|
-
else element.setAttribute(def.attr, serialized);
|
|
1007
|
-
return;
|
|
1008
|
-
}
|
|
1009
|
-
if (def.type === Boolean) {
|
|
1010
|
-
if (value) element.setAttribute(def.attr, "");
|
|
1011
|
-
else element.removeAttribute(def.attr);
|
|
1012
|
-
return;
|
|
1013
|
-
}
|
|
1014
|
-
if (value == null) {
|
|
1015
|
-
element.removeAttribute(def.attr);
|
|
1016
|
-
return;
|
|
1017
|
-
}
|
|
1018
|
-
if (def.type === Object || def.type === Array) {
|
|
1019
|
-
element.setAttribute(def.attr, JSON.stringify(value));
|
|
1020
|
-
return;
|
|
1021
|
-
}
|
|
1022
|
-
if (def.type === Function) return;
|
|
1023
|
-
element.setAttribute(def.attr, String(value));
|
|
1024
|
-
}
|
|
1025
|
-
function reflectExternalProp(element, def, value, reflectingAttrs) {
|
|
1026
|
-
if (def.attr === false) return;
|
|
1027
|
-
const attrName = def.attr.toLowerCase();
|
|
1028
|
-
reflectingAttrs === null || reflectingAttrs === void 0 || reflectingAttrs.add(attrName);
|
|
1029
|
-
try {
|
|
1030
|
-
reflectPropToAttribute(element, def, value);
|
|
1031
|
-
} finally {
|
|
1032
|
-
reflectingAttrs === null || reflectingAttrs === void 0 || reflectingAttrs.delete(attrName);
|
|
1033
|
-
}
|
|
1034
|
-
}
|
|
1035
2631
|
function syncFormValue(props, context, form) {
|
|
1036
2632
|
const valueResolver = form === null || form === void 0 ? void 0 : form.value;
|
|
1037
2633
|
const stateResolver = form === null || form === void 0 ? void 0 : form.state;
|
|
1038
2634
|
if (!context.internals || valueResolver === void 0) return;
|
|
1039
|
-
|
|
2635
|
+
effect(() => {
|
|
1040
2636
|
const value = resolveFormValue(props, valueResolver);
|
|
1041
2637
|
const state = stateResolver === void 0 ? void 0 : resolveFormValue(props, stateResolver);
|
|
1042
2638
|
context.internals.setFormValue(value, state);
|
|
@@ -1093,6 +2689,15 @@ function createExpose(host) {
|
|
|
1093
2689
|
function isAttributeBackedConstructor(type) {
|
|
1094
2690
|
return type === String || type === Number || type === Boolean;
|
|
1095
2691
|
}
|
|
2692
|
+
function normalizePropType(type) {
|
|
2693
|
+
if (type === String) return "string";
|
|
2694
|
+
if (type === Number) return "number";
|
|
2695
|
+
if (type === Boolean) return "boolean";
|
|
2696
|
+
if (type === Object) return "object";
|
|
2697
|
+
if (type === Array) return "array";
|
|
2698
|
+
if (type === Function) return "function";
|
|
2699
|
+
return "unknown";
|
|
2700
|
+
}
|
|
1096
2701
|
function resolveExternalRenderTarget(host, shadow) {
|
|
1097
2702
|
var _host$shadowRoot;
|
|
1098
2703
|
if (!shadow) return host;
|
|
@@ -1111,38 +2716,6 @@ function toKebabCase(value) {
|
|
|
1111
2716
|
return value.replace(/[A-Z]/g, (match) => `-${match.toLowerCase()}`);
|
|
1112
2717
|
}
|
|
1113
2718
|
//#endregion
|
|
1114
|
-
//#region packages/core/runtime-dom/src/slot.ts
|
|
1115
|
-
function createSlot(name, fallback) {
|
|
1116
|
-
const context = getCurrentHostContext();
|
|
1117
|
-
if (!context) return createNativeSlot(name, fallback);
|
|
1118
|
-
if (context.mode === "shadow") return createNativeSlot(name, fallback);
|
|
1119
|
-
const assigned = findLightSlotNodes(context.lightChildren, name);
|
|
1120
|
-
if (assigned.length > 0) return Array.from(assigned);
|
|
1121
|
-
return fallback ? fallback() : null;
|
|
1122
|
-
}
|
|
1123
|
-
function createNativeSlot(name, fallback) {
|
|
1124
|
-
const slot = document.createElement("slot");
|
|
1125
|
-
if (name) slot.setAttribute("name", name);
|
|
1126
|
-
const fallbackValue = fallback === null || fallback === void 0 ? void 0 : fallback();
|
|
1127
|
-
if (fallbackValue != null) insert(slot, fallbackValue);
|
|
1128
|
-
return slot;
|
|
1129
|
-
}
|
|
1130
|
-
function findLightSlotNodes(nodes, name) {
|
|
1131
|
-
if (name) return nodes.filter((node) => {
|
|
1132
|
-
if (node.nodeType !== Node.ELEMENT_NODE) return false;
|
|
1133
|
-
return node.getAttribute("slot") === name;
|
|
1134
|
-
});
|
|
1135
|
-
return nodes.filter((node) => {
|
|
1136
|
-
if (node.nodeType === Node.ELEMENT_NODE) return !node.hasAttribute("slot");
|
|
1137
|
-
return isMeaningfulTextNode(node);
|
|
1138
|
-
});
|
|
1139
|
-
}
|
|
1140
|
-
function isMeaningfulTextNode(node) {
|
|
1141
|
-
var _node$textContent;
|
|
1142
|
-
if (node.nodeType !== Node.TEXT_NODE) return false;
|
|
1143
|
-
return Boolean((_node$textContent = node.textContent) === null || _node$textContent === void 0 ? void 0 : _node$textContent.trim());
|
|
1144
|
-
}
|
|
1145
|
-
//#endregion
|
|
1146
2719
|
//#region packages/core/runtime-dom/src/webComponents.ts
|
|
1147
2720
|
const HOST_RESERVED_KEYS = /* @__PURE__ */ new Set([
|
|
1148
2721
|
"children",
|
|
@@ -1250,16 +2823,21 @@ exports.bindText = bindText;
|
|
|
1250
2823
|
exports.bindTextContent = bindTextContent;
|
|
1251
2824
|
exports.captureCurrentHostContext = captureCurrentHostContext;
|
|
1252
2825
|
exports.child = child;
|
|
2826
|
+
exports.coerceCustomElementAttribute = coerceCustomElementAttribute;
|
|
1253
2827
|
exports.createComponent = createComponent;
|
|
1254
2828
|
exports.createContext = createContext;
|
|
2829
|
+
exports.createCustomElementMountLifecycle = createCustomElementMountLifecycle;
|
|
1255
2830
|
exports.createDOMContextBoundary = createDOMContextBoundary;
|
|
1256
2831
|
exports.createOwner = createOwner;
|
|
1257
2832
|
exports.createSlot = createSlot;
|
|
1258
2833
|
exports.defineElement = defineElement;
|
|
1259
2834
|
exports.delegateEvents = delegateEvents;
|
|
1260
2835
|
exports.event = event;
|
|
2836
|
+
exports.findCustomElementPropByAttribute = findCustomElementPropByAttribute;
|
|
1261
2837
|
exports.getCurrentHostContext = getCurrentHostContext;
|
|
1262
2838
|
exports.getCurrentOwner = getCurrentOwner;
|
|
2839
|
+
exports.getCustomElementAttributeName = getCustomElementAttributeName;
|
|
2840
|
+
exports.getCustomElementObservedAttributes = getCustomElementObservedAttributes;
|
|
1263
2841
|
exports.getElementDefinition = getElementDefinition;
|
|
1264
2842
|
exports.inject = inject;
|
|
1265
2843
|
exports.insert = insert;
|
|
@@ -1273,6 +2851,7 @@ exports.normalizeClass = normalizeClass;
|
|
|
1273
2851
|
exports.prop = prop;
|
|
1274
2852
|
exports.provide = provide;
|
|
1275
2853
|
exports.provideDOMContext = provideDOMContext;
|
|
2854
|
+
exports.reflectCustomElementProperty = reflectCustomElementProperty;
|
|
1276
2855
|
exports.removeNodes = removeNodes;
|
|
1277
2856
|
exports.render = render;
|
|
1278
2857
|
exports.resolveDOMContext = resolveDOMContext;
|