@expressive/dom 0.2.0 → 0.3.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +1 -1
- package/dist/chunk-hot-BAqPvKEQ.js +331 -0
- package/dist/chunk-hot-BAqPvKEQ.js.map +1 -0
- package/dist/chunk-loader-kjuM318E.d.ts +58 -0
- package/dist/{chunk-vnode-CzmFSz5_.js → chunk-vnode-BG1Cv8F9.js} +11 -8
- package/dist/chunk-vnode-BG1Cv8F9.js.map +1 -0
- package/dist/index.d.ts +3 -31
- package/dist/index.js +178 -326
- package/dist/index.js.map +1 -1
- package/dist/jsx-dev-runtime.d.ts +2 -3
- package/dist/jsx-dev-runtime.js +3 -3
- package/dist/jsx-dev-runtime.js.map +1 -1
- package/dist/jsx-runtime.d.ts +44 -5
- package/dist/jsx-runtime.js +2 -2
- package/dist/jsx-runtime.js.map +1 -1
- package/dist/vite.js +43 -30
- package/dist/vite.js.map +1 -1
- package/package.json +5 -3
- package/dist/chunk-hot-gq8TyYJV.js +0 -178
- package/dist/chunk-hot-gq8TyYJV.js.map +0 -1
- package/dist/chunk-vnode-BsbDCqd1.d.ts +0 -25
- package/dist/chunk-vnode-CzmFSz5_.js.map +0 -1
package/dist/index.js
CHANGED
|
@@ -1,239 +1,10 @@
|
|
|
1
|
-
import { a as untrack, c as
|
|
2
|
-
import { a as
|
|
1
|
+
import { a as untrack, c as dispose, d as claim$1, f as release, h as transition, i as track, l as enter, m as settle$1, n as latest, o as call, p as schedule, r as same, s as commit, u as afterFlush } from "./chunk-hot-BAqPvKEQ.js";
|
|
2
|
+
import { a as createElement, i as childrenOf, n as PORTAL, o as isVNode, r as Portal, s as vnode, t as Fragment } from "./chunk-vnode-BG1Cv8F9.js";
|
|
3
3
|
import "./jsx-runtime.js";
|
|
4
|
-
import { Component, Context, State, has, map
|
|
4
|
+
import { Component, Context, State, has, map } from "@expressive/mvc";
|
|
5
5
|
import { watch } from "@expressive/mvc/observable";
|
|
6
|
-
import { Fragment } from "@expressive/mvc/runtime";
|
|
6
|
+
import { Fragment as Fragment$1, compose } from "@expressive/mvc/jsx-runtime";
|
|
7
7
|
|
|
8
|
-
//#region src/adapter.ts
|
|
9
|
-
let current;
|
|
10
|
-
let collecting;
|
|
11
|
-
function enter(scope, render) {
|
|
12
|
-
const parent = current;
|
|
13
|
-
const releases = collecting;
|
|
14
|
-
const next = [];
|
|
15
|
-
current = scope;
|
|
16
|
-
collecting = next;
|
|
17
|
-
scope.childContext = scope.context;
|
|
18
|
-
scope.useIndex = 0;
|
|
19
|
-
try {
|
|
20
|
-
const output = render();
|
|
21
|
-
if (scope.kind == "function" && scope.useIndex !== scope.uses.length) {
|
|
22
|
-
if (!scope.hot) throw new Error("State.use() calls must keep the same order on every function-component render.");
|
|
23
|
-
truncate(scope, scope.useIndex);
|
|
24
|
-
}
|
|
25
|
-
return output;
|
|
26
|
-
} finally {
|
|
27
|
-
scope.hot = void 0;
|
|
28
|
-
current = parent;
|
|
29
|
-
collecting = releases;
|
|
30
|
-
scope.subscriptions.forEach((release) => release());
|
|
31
|
-
scope.subscriptions = next;
|
|
32
|
-
}
|
|
33
|
-
}
|
|
34
|
-
function dispose(scope) {
|
|
35
|
-
scope.active = false;
|
|
36
|
-
unschedule(scope);
|
|
37
|
-
scope.subscriptions.forEach((release) => release());
|
|
38
|
-
scope.subscriptions = [];
|
|
39
|
-
truncate(scope, 0);
|
|
40
|
-
}
|
|
41
|
-
/** Destroy the `State.use()` slots of a scope from `index` on. */
|
|
42
|
-
function truncate(scope, index) {
|
|
43
|
-
for (let i = scope.uses.length - 1; i >= index; i--) {
|
|
44
|
-
const slot = scope.uses[i];
|
|
45
|
-
slot.release();
|
|
46
|
-
if (typeof slot.cleanup == "function") slot.cleanup();
|
|
47
|
-
slot.context.pop();
|
|
48
|
-
slot.instance.set(null);
|
|
49
|
-
}
|
|
50
|
-
scope.uses.length = index;
|
|
51
|
-
}
|
|
52
|
-
function commit(scope) {
|
|
53
|
-
for (const slot of scope.uses) if (!slot.mounted) {
|
|
54
|
-
slot.mounted = true;
|
|
55
|
-
slot.cleanup = slot.instance.mount?.();
|
|
56
|
-
}
|
|
57
|
-
}
|
|
58
|
-
function requireScope() {
|
|
59
|
-
if (!current) throw new Error("State.get() and State.use() may only run while @expressive/dom is rendering.");
|
|
60
|
-
return current;
|
|
61
|
-
}
|
|
62
|
-
function tracked(target, required) {
|
|
63
|
-
const scope = requireScope();
|
|
64
|
-
let proxy = target;
|
|
65
|
-
let first = true;
|
|
66
|
-
const release = watch(target, (next) => {
|
|
67
|
-
proxy = next;
|
|
68
|
-
if (!first && scope.active) schedule(scope);
|
|
69
|
-
first = false;
|
|
70
|
-
}, required, transition);
|
|
71
|
-
collecting.push(release);
|
|
72
|
-
return proxy;
|
|
73
|
-
}
|
|
74
|
-
State.get = function get(argument) {
|
|
75
|
-
const scope = requireScope();
|
|
76
|
-
const instance = scope.childContext.get(this, argument === false ? false : true);
|
|
77
|
-
if (!instance) return void 0;
|
|
78
|
-
const proxy = tracked(instance, argument === true);
|
|
79
|
-
if (typeof argument != "function") return proxy;
|
|
80
|
-
const refresh = ((action) => {
|
|
81
|
-
if (typeof action == "function") action = action();
|
|
82
|
-
schedule(scope);
|
|
83
|
-
return action instanceof Promise ? action.finally(() => schedule(scope)) : void 0;
|
|
84
|
-
});
|
|
85
|
-
return argument.call(proxy, proxy, refresh) ?? null;
|
|
86
|
-
};
|
|
87
|
-
State.use = function use(...args) {
|
|
88
|
-
const scope = requireScope();
|
|
89
|
-
if (scope.kind != "function") throw new Error("State.use() is only available at the top level of a function component.");
|
|
90
|
-
const index = scope.useIndex++;
|
|
91
|
-
let slot = scope.uses[index];
|
|
92
|
-
if (slot && slot.Type !== this) {
|
|
93
|
-
if (!scope.hot) throw new Error("State.use() calls must keep the same order on every function-component render.");
|
|
94
|
-
truncate(scope, index);
|
|
95
|
-
slot = void 0;
|
|
96
|
-
}
|
|
97
|
-
if (!slot) {
|
|
98
|
-
let instance;
|
|
99
|
-
const assign = (value) => typeof value == "object" && value && instance.set(value);
|
|
100
|
-
let apply = (...values) => Promise.all(values.flat().map(assign));
|
|
101
|
-
instance = new this((self) => {
|
|
102
|
-
const own = self;
|
|
103
|
-
if (typeof own.use == "function") {
|
|
104
|
-
apply = own.use.bind(own);
|
|
105
|
-
apply(...args);
|
|
106
|
-
return;
|
|
107
|
-
}
|
|
108
|
-
return args;
|
|
109
|
-
});
|
|
110
|
-
const context = scope.childContext.push(instance);
|
|
111
|
-
slot = {
|
|
112
|
-
Type: this,
|
|
113
|
-
context,
|
|
114
|
-
instance,
|
|
115
|
-
proxy: instance,
|
|
116
|
-
release: void 0,
|
|
117
|
-
apply
|
|
118
|
-
};
|
|
119
|
-
let first = true;
|
|
120
|
-
slot.release = watch(instance, (proxy) => {
|
|
121
|
-
slot.proxy = proxy;
|
|
122
|
-
if (!first && scope.active) schedule(scope);
|
|
123
|
-
first = false;
|
|
124
|
-
}, void 0, transition);
|
|
125
|
-
slot.apply = apply;
|
|
126
|
-
scope.uses.push(slot);
|
|
127
|
-
} else slot.apply(...args);
|
|
128
|
-
scope.childContext = slot.context;
|
|
129
|
-
return slot.proxy;
|
|
130
|
-
};
|
|
131
|
-
Object.defineProperty(Component, "use", {
|
|
132
|
-
configurable: true,
|
|
133
|
-
value() {
|
|
134
|
-
throw new Error(`${this} is a Component - render it instead of calling use().`);
|
|
135
|
-
}
|
|
136
|
-
});
|
|
137
|
-
Component.on({
|
|
138
|
-
type(type) {
|
|
139
|
-
subcomponents(type.prototype);
|
|
140
|
-
},
|
|
141
|
-
before(self) {
|
|
142
|
-
subcomponents(self);
|
|
143
|
-
}
|
|
144
|
-
});
|
|
145
|
-
function subcomponents(target) {
|
|
146
|
-
for (const key of Object.getOwnPropertyNames(target)) {
|
|
147
|
-
if (!/^[A-Z]/.test(key)) continue;
|
|
148
|
-
const { value } = Object.getOwnPropertyDescriptor(target, key);
|
|
149
|
-
if (typeof value != "function") continue;
|
|
150
|
-
Object.defineProperty(target, key, {
|
|
151
|
-
configurable: true,
|
|
152
|
-
get() {
|
|
153
|
-
const owner = this.is;
|
|
154
|
-
let render = unbind(value);
|
|
155
|
-
const Subcomponent = (props) => render.call(tracked(owner), props);
|
|
156
|
-
Object.defineProperty(owner, key, {
|
|
157
|
-
configurable: true,
|
|
158
|
-
get: () => Subcomponent,
|
|
159
|
-
set(next) {
|
|
160
|
-
render = next;
|
|
161
|
-
}
|
|
162
|
-
});
|
|
163
|
-
return Subcomponent;
|
|
164
|
-
},
|
|
165
|
-
set(next) {
|
|
166
|
-
Object.defineProperty(this, key, {
|
|
167
|
-
value: next,
|
|
168
|
-
writable: true,
|
|
169
|
-
enumerable: true,
|
|
170
|
-
configurable: true
|
|
171
|
-
});
|
|
172
|
-
subcomponents(this);
|
|
173
|
-
}
|
|
174
|
-
});
|
|
175
|
-
}
|
|
176
|
-
}
|
|
177
|
-
|
|
178
|
-
//#endregion
|
|
179
|
-
//#region src/context.ts
|
|
180
|
-
function Consumer(props) {
|
|
181
|
-
return props.for.get((value) => props.children(value));
|
|
182
|
-
}
|
|
183
|
-
function Provider(_props) {
|
|
184
|
-
throw new Error("Provider must be rendered by @expressive/dom.");
|
|
185
|
-
}
|
|
186
|
-
function provide(context, props) {
|
|
187
|
-
const { for: input, is, children: _children, fallback: _fallback, name: _name, ...rest } = props;
|
|
188
|
-
const mount = [];
|
|
189
|
-
let single;
|
|
190
|
-
const solo = State.is(input) || input instanceof State;
|
|
191
|
-
context.set(input || {}, (state, owned) => {
|
|
192
|
-
if (solo) single = state;
|
|
193
|
-
is?.(state);
|
|
194
|
-
if (owned) {
|
|
195
|
-
let cleanup;
|
|
196
|
-
mount.push(() => {
|
|
197
|
-
cleanup = state.mount?.();
|
|
198
|
-
});
|
|
199
|
-
return () => cleanup?.();
|
|
200
|
-
}
|
|
201
|
-
});
|
|
202
|
-
if (solo && !single) {
|
|
203
|
-
const Type = input instanceof State ? input.constructor : input;
|
|
204
|
-
single = context.get(Type, false);
|
|
205
|
-
}
|
|
206
|
-
if (single && Object.keys(rest).length) single.set(rest);
|
|
207
|
-
return () => mount.forEach((commit) => commit());
|
|
208
|
-
}
|
|
209
|
-
|
|
210
|
-
//#endregion
|
|
211
|
-
//#region src/lazy.ts
|
|
212
|
-
function lazy(load) {
|
|
213
|
-
let pending;
|
|
214
|
-
let resolved;
|
|
215
|
-
let rejected;
|
|
216
|
-
let failed = false;
|
|
217
|
-
return function Lazy(props) {
|
|
218
|
-
if (failed) throw rejected;
|
|
219
|
-
if (resolved) return vnode(resolved, props);
|
|
220
|
-
if (!pending) pending = load().then((module) => {
|
|
221
|
-
const output = typeof module == "function" ? module : module?.default;
|
|
222
|
-
if (typeof output != "function") {
|
|
223
|
-
failed = true;
|
|
224
|
-
rejected = /* @__PURE__ */ new Error("lazy() loader resolved no component.");
|
|
225
|
-
return;
|
|
226
|
-
}
|
|
227
|
-
resolved = output;
|
|
228
|
-
}, (error) => {
|
|
229
|
-
failed = true;
|
|
230
|
-
rejected = error;
|
|
231
|
-
});
|
|
232
|
-
throw pending;
|
|
233
|
-
};
|
|
234
|
-
}
|
|
235
|
-
|
|
236
|
-
//#endregion
|
|
237
8
|
//#region src/css.ts
|
|
238
9
|
const unitless = /* @__PURE__ */ new Map();
|
|
239
10
|
let probe;
|
|
@@ -631,6 +402,71 @@ function serialize(document, declarations) {
|
|
|
631
402
|
return value.cssText;
|
|
632
403
|
}
|
|
633
404
|
|
|
405
|
+
//#endregion
|
|
406
|
+
//#region src/loader.ts
|
|
407
|
+
const LOADS = /* @__PURE__ */ new WeakMap();
|
|
408
|
+
function resolve(type, props, run) {
|
|
409
|
+
const load = LOADS.get(type);
|
|
410
|
+
if (load?.resolved) return vnode(load.resolved, props);
|
|
411
|
+
if (load?.failed) {
|
|
412
|
+
LOADS.delete(type);
|
|
413
|
+
throw load.failed.error;
|
|
414
|
+
}
|
|
415
|
+
if (load) throw load.pending;
|
|
416
|
+
const output = run();
|
|
417
|
+
if (!output || typeof output.then != "function") return output;
|
|
418
|
+
const next = {};
|
|
419
|
+
LOADS.set(type, next);
|
|
420
|
+
throw next.pending = output.then((module) => {
|
|
421
|
+
const component = typeof module == "function" ? module : module?.default;
|
|
422
|
+
if (typeof component == "function") next.resolved = component;
|
|
423
|
+
else next.failed = { error: /* @__PURE__ */ new Error("Loader resolved no component.") };
|
|
424
|
+
}, (error) => {
|
|
425
|
+
next.failed = { error };
|
|
426
|
+
});
|
|
427
|
+
}
|
|
428
|
+
|
|
429
|
+
//#endregion
|
|
430
|
+
//#region src/commits.ts
|
|
431
|
+
const DETACHED = /* @__PURE__ */ new WeakMap();
|
|
432
|
+
let batch;
|
|
433
|
+
/** Run `run` once `fiber` is on the page: now, after the current batch, or when its detached root attaches. */
|
|
434
|
+
function inserted(fiber, run) {
|
|
435
|
+
enqueue([fiber, run]);
|
|
436
|
+
}
|
|
437
|
+
/** A fragment whose commits wait until it attaches. */
|
|
438
|
+
function fragment() {
|
|
439
|
+
const root = document.createDocumentFragment();
|
|
440
|
+
DETACHED.set(root, []);
|
|
441
|
+
return root;
|
|
442
|
+
}
|
|
443
|
+
function attach(root) {
|
|
444
|
+
const held = DETACHED.get(root);
|
|
445
|
+
DETACHED.delete(root);
|
|
446
|
+
held?.forEach(enqueue);
|
|
447
|
+
}
|
|
448
|
+
/** Defer commits made during `work` until it returns or throws. */
|
|
449
|
+
function batched(work) {
|
|
450
|
+
if (batch) return work();
|
|
451
|
+
const entries = batch = [];
|
|
452
|
+
try {
|
|
453
|
+
return work();
|
|
454
|
+
} finally {
|
|
455
|
+
batch = void 0;
|
|
456
|
+
entries.forEach(deliver);
|
|
457
|
+
}
|
|
458
|
+
}
|
|
459
|
+
function enqueue(entry) {
|
|
460
|
+
if (batch) batch.push(entry);
|
|
461
|
+
else deliver(entry);
|
|
462
|
+
}
|
|
463
|
+
function deliver(entry) {
|
|
464
|
+
const [fiber, run] = entry;
|
|
465
|
+
const held = DETACHED.get(fiber.start.getRootNode());
|
|
466
|
+
if (held) held.push(entry);
|
|
467
|
+
else if (!fiber.dead) run();
|
|
468
|
+
}
|
|
469
|
+
|
|
634
470
|
//#endregion
|
|
635
471
|
//#region src/render.ts
|
|
636
472
|
const roots = /* @__PURE__ */ new WeakMap();
|
|
@@ -653,7 +489,7 @@ const focusing = [];
|
|
|
653
489
|
const controlled = /* @__PURE__ */ new WeakMap();
|
|
654
490
|
const restoring = /* @__PURE__ */ new WeakSet();
|
|
655
491
|
let passiveRender = false;
|
|
656
|
-
let
|
|
492
|
+
let holding;
|
|
657
493
|
let depth = 0;
|
|
658
494
|
let settling = false;
|
|
659
495
|
let rendering;
|
|
@@ -714,11 +550,17 @@ function makeScope(kind, context, update) {
|
|
|
714
550
|
uses: []
|
|
715
551
|
};
|
|
716
552
|
}
|
|
553
|
+
function park(fiber) {
|
|
554
|
+
move(fiber, fragment(), null);
|
|
555
|
+
}
|
|
717
556
|
function complete(fiber, work) {
|
|
718
557
|
try {
|
|
719
558
|
work();
|
|
720
559
|
} catch (error) {
|
|
721
|
-
|
|
560
|
+
if (holding && error === holding.thrown) {
|
|
561
|
+
park(fiber);
|
|
562
|
+
holding.fiber = fiber;
|
|
563
|
+
} else unmountFiber(fiber);
|
|
722
564
|
throw error;
|
|
723
565
|
}
|
|
724
566
|
return fiber;
|
|
@@ -759,21 +601,20 @@ function mount(value, parent, before, context, boundary, appearance) {
|
|
|
759
601
|
children: []
|
|
760
602
|
};
|
|
761
603
|
}
|
|
762
|
-
if (value
|
|
604
|
+
if (renderable(value)) return mountComponent(value, parent, before, context, boundary, appearance);
|
|
763
605
|
if (isCollection(value)) return mountCollection(value, parent, before, context, boundary, appearance);
|
|
764
606
|
if (!isVNode(value)) throw new TypeError(`Cannot render ${String(value)}.`);
|
|
765
|
-
if (value.type === Fragment) return mountFragment(value, parent, before, context, boundary, appearance);
|
|
607
|
+
if (value.type === Fragment$1) return mountFragment(value, parent, before, context, boundary, appearance);
|
|
766
608
|
if (value.type === PORTAL) return mountPortal(value, parent, before, context, boundary, appearance);
|
|
767
|
-
if (value.type === Provider) return mountProvider(value, parent, before, context, boundary, appearance);
|
|
768
609
|
if (typeof value.type == "string") return mountElement(value, parent, before, context, boundary, appearance);
|
|
769
610
|
if (typeof value.type != "function") throw new Error(`Cannot render ${String(value.type)}.`);
|
|
770
|
-
if (value.type.prototype instanceof
|
|
611
|
+
if (value.type.prototype instanceof State) return mountOwnedComponent(value, parent, before, context, boundary, appearance);
|
|
771
612
|
return mountFunction(value, parent, before, context, boundary, appearance);
|
|
772
613
|
}
|
|
773
614
|
function mountFragment(value, parent, before, context, boundary, appearance) {
|
|
774
615
|
const fiber = range("fragment", parent, before, context);
|
|
775
616
|
fiber.key = value.key;
|
|
776
|
-
fiber.type = Fragment;
|
|
617
|
+
fiber.type = Fragment$1;
|
|
777
618
|
fiber.appearance = appearance;
|
|
778
619
|
return complete(fiber, () => {
|
|
779
620
|
reconcile(fiber, value.props.children, context, boundary, appearance);
|
|
@@ -788,7 +629,10 @@ function mountFunction(value, parent, before, context, boundary, appearance) {
|
|
|
788
629
|
fiber.boundary = boundary;
|
|
789
630
|
fiber.appearance = resolved.appearance;
|
|
790
631
|
fiber.scope = makeScope("function", context, (passive) => runFunction(fiber, passive));
|
|
791
|
-
fiber.render = () => enter(fiber.scope, () =>
|
|
632
|
+
fiber.render = () => enter(fiber.scope, () => {
|
|
633
|
+
const type = latest(fiber.type);
|
|
634
|
+
return resolve(type, fiber.props, () => call(type, fiber.props));
|
|
635
|
+
});
|
|
792
636
|
track(fiber.type, fiber.scope);
|
|
793
637
|
probing(fiber);
|
|
794
638
|
return complete(fiber, () => {
|
|
@@ -797,7 +641,10 @@ function mountFunction(value, parent, before, context, boundary, appearance) {
|
|
|
797
641
|
}
|
|
798
642
|
function mountOwnedComponent(value, parent, before, context, boundary, appearance) {
|
|
799
643
|
const resolved = componentProps(value.type, value.props, appearance);
|
|
800
|
-
|
|
644
|
+
const Type = value.type;
|
|
645
|
+
const props = observe(resolved.props);
|
|
646
|
+
const instance = new Type(props, Type.prototype instanceof Component ? void 0 : () => props.is?.(instance));
|
|
647
|
+
return mountComponent(instance, parent, before, context, boundary, resolved.appearance, true, value.key, props);
|
|
801
648
|
}
|
|
802
649
|
function runFunction(fiber, passive) {
|
|
803
650
|
const result = attempt(fiber, passive, fiber.render);
|
|
@@ -815,12 +662,19 @@ function probing(fiber) {
|
|
|
815
662
|
}
|
|
816
663
|
};
|
|
817
664
|
}
|
|
818
|
-
function mountComponent(instance, parent, before, context, inherited, appearance, owned = false, key) {
|
|
665
|
+
function mountComponent(instance, parent, before, context, inherited, appearance, owned = false, key, props = instance.props) {
|
|
819
666
|
const fiber = range("component", parent, before, context);
|
|
820
667
|
const childContext = context.push(instance);
|
|
821
|
-
const
|
|
822
|
-
|
|
823
|
-
|
|
668
|
+
const element = owned ? props : {};
|
|
669
|
+
const fallback = element.fallback !== void 0 ? element.fallback : instance.fallback;
|
|
670
|
+
const ownBoundary = fallback !== void 0 && fallback !== false || element.catch || instance.catch ? {
|
|
671
|
+
catch: element.catch || instance.catch ? (error) => {
|
|
672
|
+
return (owned && fiber.props.catch || instance.catch).call(instance, error, instance);
|
|
673
|
+
} : void 0,
|
|
674
|
+
fallback: () => {
|
|
675
|
+
const placed = owned ? fiber.props.fallback : void 0;
|
|
676
|
+
return placed !== void 0 ? placed : instance.fallback;
|
|
677
|
+
},
|
|
824
678
|
owner: fiber,
|
|
825
679
|
parent: inherited
|
|
826
680
|
} : inherited;
|
|
@@ -830,11 +684,11 @@ function mountComponent(instance, parent, before, context, inherited, appearance
|
|
|
830
684
|
fiber.instance = instance;
|
|
831
685
|
fiber.key = owned ? key : instance.key;
|
|
832
686
|
fiber.type = instance.constructor;
|
|
833
|
-
fiber.props =
|
|
687
|
+
fiber.props = props;
|
|
834
688
|
fiber.owned = owned;
|
|
835
689
|
fiber.appearance = appearance;
|
|
836
690
|
fiber.scope = makeScope("component", childContext, (passive) => runComponent(fiber, passive));
|
|
837
|
-
fiber.render = () => enter(fiber.scope, () =>
|
|
691
|
+
fiber.render = () => enter(fiber.scope, () => compose.call(fiber.value, fiber.props));
|
|
838
692
|
probing(fiber);
|
|
839
693
|
let first = true;
|
|
840
694
|
let proxy = instance;
|
|
@@ -847,10 +701,13 @@ function mountComponent(instance, parent, before, context, inherited, appearance
|
|
|
847
701
|
first = false;
|
|
848
702
|
}, void 0, transition);
|
|
849
703
|
Object.defineProperty(fiber, "value", { get: () => proxy });
|
|
850
|
-
|
|
851
|
-
|
|
852
|
-
|
|
853
|
-
|
|
704
|
+
try {
|
|
705
|
+
complete(fiber, () => {
|
|
706
|
+
runComponent(fiber, passiveRender);
|
|
707
|
+
});
|
|
708
|
+
} finally {
|
|
709
|
+
if (owned && !fiber.dead) inserted(fiber, () => fiber.cleanup = instance.mount?.());
|
|
710
|
+
}
|
|
854
711
|
return fiber;
|
|
855
712
|
}
|
|
856
713
|
function runComponent(fiber, passive) {
|
|
@@ -880,31 +737,9 @@ function runCollection(fiber, passive) {
|
|
|
880
737
|
return value instanceof map.Managed ? [...value.values()] : [...value];
|
|
881
738
|
});
|
|
882
739
|
}
|
|
883
|
-
function mountProvider(value, parent, before, context, inherited, appearance) {
|
|
884
|
-
const fiber = range("provider", parent, before, context);
|
|
885
|
-
const childContext = new Context(context);
|
|
886
|
-
fiber.key = value.key;
|
|
887
|
-
fiber.type = Provider;
|
|
888
|
-
fiber.props = value.props;
|
|
889
|
-
fiber.appearance = appearance;
|
|
890
|
-
fiber.childContext = childContext;
|
|
891
|
-
const commit = provide(childContext, value.props);
|
|
892
|
-
const boundary = value.props.fallback !== void 0 ? {
|
|
893
|
-
fallback: () => fiber.props.fallback,
|
|
894
|
-
owner: fiber,
|
|
895
|
-
parent: inherited
|
|
896
|
-
} : inherited;
|
|
897
|
-
fiber.boundary = boundary;
|
|
898
|
-
if (boundary !== inherited) fiber.ownBoundary = boundary;
|
|
899
|
-
complete(fiber, () => {
|
|
900
|
-
reconcile(fiber, value.props.children, childContext, boundary, appearance);
|
|
901
|
-
});
|
|
902
|
-
commit();
|
|
903
|
-
return fiber;
|
|
904
|
-
}
|
|
905
740
|
function mountPortal(value, parent, before, context, boundary, appearance) {
|
|
906
741
|
const marker = document.createComment("portal");
|
|
907
|
-
const container = value.props.
|
|
742
|
+
const container = target(value.props.into, parent);
|
|
908
743
|
const portalStart = document.createComment("portal-root");
|
|
909
744
|
const portalEnd = document.createComment("/portal-root");
|
|
910
745
|
parent.insertBefore(marker, before);
|
|
@@ -928,6 +763,14 @@ function mountPortal(value, parent, before, context, boundary, appearance) {
|
|
|
928
763
|
reconcilePortal(output, value.props.children, context, boundary, appearance);
|
|
929
764
|
});
|
|
930
765
|
}
|
|
766
|
+
function target(into, parent) {
|
|
767
|
+
if (typeof into != "string") return into;
|
|
768
|
+
const root = parent.getRootNode();
|
|
769
|
+
const found = [...document.querySelectorAll(into)];
|
|
770
|
+
if (root instanceof DocumentFragment) found.push(...root.querySelectorAll(into));
|
|
771
|
+
if (found.length != 1) throw new Error(`Portal target "${into}" ${found.length ? "is ambiguous" : "was not found"}.`);
|
|
772
|
+
return found[0];
|
|
773
|
+
}
|
|
931
774
|
function mountElement(value, parent, before, context, boundary, appearance) {
|
|
932
775
|
const tag = value.type;
|
|
933
776
|
let host = parent;
|
|
@@ -970,38 +813,31 @@ function attempt(fiber, passive, render) {
|
|
|
970
813
|
const previous = passiveRender;
|
|
971
814
|
const scope = fiber.scope;
|
|
972
815
|
const probed = scope.probed;
|
|
816
|
+
const empty = !fiber.children.length;
|
|
973
817
|
scope.probed = void 0;
|
|
974
818
|
passiveRender ||= passive;
|
|
975
|
-
if (passive && !depth &&
|
|
976
|
-
const
|
|
977
|
-
|
|
978
|
-
|
|
979
|
-
|
|
980
|
-
|
|
981
|
-
|
|
982
|
-
|
|
983
|
-
const queued = fiber.inserted;
|
|
984
|
-
fiber.end.parentNode.insertBefore(fiber.staging, fiber.end);
|
|
985
|
-
fiber.staging = fiber.inserted = void 0;
|
|
986
|
-
inserting = outer;
|
|
987
|
-
queued.forEach((run) => run());
|
|
988
|
-
}
|
|
989
|
-
if (!fiber.recovering) unwait(fiber);
|
|
990
|
-
fiber.retried = void 0;
|
|
991
|
-
return true;
|
|
992
|
-
} catch (thrown) {
|
|
993
|
-
return suspend(fiber, thrown, passive);
|
|
819
|
+
if (passive && !depth && empty && !fiber.stash) fiber.staging ||= fragment();
|
|
820
|
+
const run = () => pass(() => {
|
|
821
|
+
try {
|
|
822
|
+
reconcile(fiber, probed ? probed.output : consume(fiber, render), scope.childContext, fiber.boundary, renderedAppearance(fiber));
|
|
823
|
+
if (fiber.staging) {
|
|
824
|
+
fiber.end.parentNode.insertBefore(fiber.staging, fiber.end);
|
|
825
|
+
attach(fiber.staging);
|
|
826
|
+
fiber.staging = void 0;
|
|
994
827
|
}
|
|
995
|
-
|
|
828
|
+
if (!fiber.recovering) unwait(fiber);
|
|
829
|
+
fiber.retried = void 0;
|
|
830
|
+
return true;
|
|
831
|
+
} catch (thrown) {
|
|
832
|
+
return suspend(fiber, thrown, passive, empty);
|
|
833
|
+
}
|
|
834
|
+
});
|
|
835
|
+
try {
|
|
836
|
+
return passive ? batched(run) : run();
|
|
996
837
|
} finally {
|
|
997
838
|
passiveRender = previous;
|
|
998
|
-
inserting = outer;
|
|
999
839
|
}
|
|
1000
840
|
}
|
|
1001
|
-
function inserted(fiber, run) {
|
|
1002
|
-
if (inserting) inserting.push(() => fiber.dead || run());
|
|
1003
|
-
else run();
|
|
1004
|
-
}
|
|
1005
841
|
function observe(props) {
|
|
1006
842
|
if (!("style" in props)) return props;
|
|
1007
843
|
let output = observed.get(props);
|
|
@@ -1123,11 +959,15 @@ function moveRange(start, end, target) {
|
|
|
1123
959
|
node = next;
|
|
1124
960
|
}
|
|
1125
961
|
}
|
|
1126
|
-
function suspend(fiber, thrown, passive) {
|
|
962
|
+
function suspend(fiber, thrown, passive, empty) {
|
|
1127
963
|
const boundary = fiber.boundary;
|
|
1128
964
|
if (isThenable(thrown)) {
|
|
1129
965
|
if (!boundary) throw thrown;
|
|
1130
|
-
if (passive &&
|
|
966
|
+
if (passive && empty && depth > 1) {
|
|
967
|
+
if (holding?.thrown !== thrown) holding = { thrown };
|
|
968
|
+
throw thrown;
|
|
969
|
+
}
|
|
970
|
+
holding = void 0;
|
|
1131
971
|
if (!passive) wait(fiber, boundary);
|
|
1132
972
|
const scope = fiber.scope;
|
|
1133
973
|
let held = scope.holds;
|
|
@@ -1193,26 +1033,32 @@ function reconcileChildren(owner, parent, before, value, context, boundary, appe
|
|
|
1193
1033
|
let child = key !== null && key !== void 0 ? keyed.get(key) : old[index]?.key == null ? old[index] : void 0;
|
|
1194
1034
|
if (child && used.has(child)) child = void 0;
|
|
1195
1035
|
if (child) used.add(child);
|
|
1196
|
-
|
|
1036
|
+
const fiber = patch(child, value, parent, before, context, boundary, appearance);
|
|
1037
|
+
if (fiber !== child) used.delete(child);
|
|
1038
|
+
next.push(fiber);
|
|
1197
1039
|
}
|
|
1198
1040
|
} catch (error) {
|
|
1041
|
+
if (holding && error === holding.thrown) {
|
|
1042
|
+
for (const fiber of next) if (!old.includes(fiber)) park(fiber);
|
|
1043
|
+
if (holding.fiber) next.push(holding.fiber);
|
|
1044
|
+
holding.fiber = void 0;
|
|
1045
|
+
}
|
|
1199
1046
|
owner.children = [...next, ...old.filter((child) => !child.dead && !next.includes(child))];
|
|
1200
1047
|
throw error;
|
|
1201
1048
|
}
|
|
1202
1049
|
for (const child of old) if (!used.has(child)) unmountFiber(child);
|
|
1203
1050
|
let anchor = before;
|
|
1204
1051
|
for (let index = next.length - 1; index >= 0; index--) {
|
|
1205
|
-
|
|
1206
|
-
|
|
1052
|
+
const child = next[index];
|
|
1053
|
+
const root = child.start.getRootNode();
|
|
1054
|
+
move(child, parent, anchor);
|
|
1055
|
+
anchor = child.start;
|
|
1056
|
+
if (child.start.getRootNode() !== root) attach(root);
|
|
1207
1057
|
}
|
|
1208
1058
|
owner.children = next;
|
|
1209
1059
|
}
|
|
1210
1060
|
function patch(old, value, parent, before, context, boundary, appearance) {
|
|
1211
|
-
if (!old || !compatible(old, value))
|
|
1212
|
-
const next = mount(value, parent, old?.start || before, context, boundary, appearance);
|
|
1213
|
-
if (old) unmountFiber(old);
|
|
1214
|
-
return next;
|
|
1215
|
-
}
|
|
1061
|
+
if (!old || !compatible(old, value)) return mount(value, parent, old?.start || before, context, boundary, appearance);
|
|
1216
1062
|
if (old.ownBoundary) old.ownBoundary.parent = boundary;
|
|
1217
1063
|
old.boundary = old.ownBoundary || boundary;
|
|
1218
1064
|
if (old.kind == "collection") {
|
|
@@ -1246,22 +1092,18 @@ function patch(old, value, parent, before, context, boundary, appearance) {
|
|
|
1246
1092
|
} else if (old.kind == "component") {
|
|
1247
1093
|
const resolved = isVNode(value) ? componentProps(value.type, value.props, appearance) : {
|
|
1248
1094
|
appearance,
|
|
1249
|
-
props: old.
|
|
1095
|
+
props: old.props
|
|
1250
1096
|
};
|
|
1251
1097
|
old.appearance = resolved.appearance;
|
|
1252
1098
|
const props = isVNode(value) ? observe(resolved.props) : resolved.props;
|
|
1253
|
-
if (isVNode(value) && props !== old.
|
|
1099
|
+
if (isVNode(value) && props !== old.props) {
|
|
1100
|
+
const instance = old.instance;
|
|
1254
1101
|
if (passiveRender) old.applied = true;
|
|
1255
|
-
|
|
1102
|
+
if (instance instanceof Component) instance.props = props;
|
|
1103
|
+
else instance.set(merge(old.props, props));
|
|
1256
1104
|
}
|
|
1257
1105
|
old.props = props;
|
|
1258
1106
|
rerun(old, () => runComponent(old, passiveRender));
|
|
1259
|
-
} else if (old.kind == "provider") {
|
|
1260
|
-
old.appearance = appearance;
|
|
1261
|
-
old.props = value.props;
|
|
1262
|
-
const commit = provide(old.childContext, old.props);
|
|
1263
|
-
reconcile(old, old.props.children, old.childContext, old.boundary, appearance);
|
|
1264
|
-
commit();
|
|
1265
1107
|
} else {
|
|
1266
1108
|
old.appearance = appearance;
|
|
1267
1109
|
const vnode = value;
|
|
@@ -1281,23 +1123,34 @@ function compatible(fiber, value) {
|
|
|
1281
1123
|
"number",
|
|
1282
1124
|
"bigint"
|
|
1283
1125
|
].includes(typeof value);
|
|
1284
|
-
if (value
|
|
1126
|
+
if (renderable(value)) return fiber.kind == "component" && fiber.instance === value;
|
|
1285
1127
|
if (isCollection(value)) return fiber.kind == "collection" && fiber.source === value;
|
|
1286
1128
|
if (!isVNode(value)) return false;
|
|
1287
1129
|
if (fiber.key !== value.key || !same(fiber.type, value.type)) return false;
|
|
1288
|
-
if (fiber.kind == "portal") return fiber.
|
|
1130
|
+
if (fiber.kind == "portal") return fiber.props.into === value.props.into;
|
|
1289
1131
|
return true;
|
|
1290
1132
|
}
|
|
1291
1133
|
function source(value) {
|
|
1292
|
-
if (value instanceof
|
|
1134
|
+
if (value instanceof State) return value.is;
|
|
1293
1135
|
while (isCollection(value) && isCollection(Object.getPrototypeOf(value))) value = Object.getPrototypeOf(value);
|
|
1294
1136
|
return value;
|
|
1295
1137
|
}
|
|
1138
|
+
function renderable(value) {
|
|
1139
|
+
return value instanceof State && typeof value.render == "function";
|
|
1140
|
+
}
|
|
1141
|
+
function merge(previous, next) {
|
|
1142
|
+
const output = {};
|
|
1143
|
+
for (const key in previous) output[key] = void 0;
|
|
1144
|
+
return {
|
|
1145
|
+
...output,
|
|
1146
|
+
...next
|
|
1147
|
+
};
|
|
1148
|
+
}
|
|
1296
1149
|
function isCollection(value) {
|
|
1297
1150
|
return value instanceof has.List || value instanceof has.Pool || value instanceof map.Managed;
|
|
1298
1151
|
}
|
|
1299
1152
|
function keyOf(value) {
|
|
1300
|
-
if (value
|
|
1153
|
+
if (renderable(value)) return value.key;
|
|
1301
1154
|
return isVNode(value) ? value.key : void 0;
|
|
1302
1155
|
}
|
|
1303
1156
|
function move(fiber, parent, before) {
|
|
@@ -1534,8 +1387,7 @@ function unmountFiber(fiber) {
|
|
|
1534
1387
|
if (typeof fiber.cleanup == "function") fiber.cleanup();
|
|
1535
1388
|
fiber.childContext?.pop();
|
|
1536
1389
|
if (fiber.owned && !fiber.instance.get(null)) fiber.instance.set(null);
|
|
1537
|
-
} else if (fiber.kind == "
|
|
1538
|
-
else if (fiber.kind == "portal") {
|
|
1390
|
+
} else if (fiber.kind == "portal") {
|
|
1539
1391
|
fiber.portalStart.remove();
|
|
1540
1392
|
fiber.portalEnd.remove();
|
|
1541
1393
|
}
|
|
@@ -1552,5 +1404,5 @@ function removeRange(start, end) {
|
|
|
1552
1404
|
}
|
|
1553
1405
|
|
|
1554
1406
|
//#endregion
|
|
1555
|
-
export {
|
|
1407
|
+
export { Fragment, Portal, createElement, css, macro, render, style };
|
|
1556
1408
|
//# sourceMappingURL=index.js.map
|