@pyreon/runtime-dom 0.14.0 → 0.16.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/lib/analysis/index.js.html +1 -1
- package/lib/analysis/keep-alive-entry.js.html +1 -1
- package/lib/analysis/transition-entry.js.html +1 -1
- package/lib/index.js +150 -62
- package/lib/keep-alive-entry.js +81 -44
- package/lib/transition-entry.js +3 -2
- package/lib/types/index.d.ts +54 -5
- package/package.json +7 -6
- package/src/delegate.ts +16 -0
- package/src/hydrate.ts +9 -2
- package/src/hydration-debug.ts +99 -14
- package/src/index.ts +11 -3
- package/src/keep-alive.ts +15 -4
- package/src/mount.ts +1 -2
- package/src/nodes.ts +87 -41
- package/src/props.ts +11 -2
- package/src/template.ts +48 -2
- package/src/tests/dev-gate-pattern.test.ts +17 -11
- package/src/tests/dev-gate-treeshake.test.ts +20 -26
- package/src/tests/fanout-repro.test.tsx +219 -0
- package/src/tests/hydration-integration.test.tsx +166 -1
- package/src/tests/mount.test.ts +92 -1
- package/src/tests/native-markers.test.ts +19 -0
- package/src/tests/runtime-dom.browser.test.ts +58 -6
- package/src/tests/show-context.test.ts +93 -0
- package/src/tests/template.test.ts +71 -1
- package/src/tests/transition.test.ts +5 -1
- package/src/transition-group.ts +22 -7
- package/src/transition.ts +11 -3
- package/lib/index.js.map +0 -1
- package/lib/keep-alive-entry.js.map +0 -1
- package/lib/transition-entry.js.map +0 -1
- package/lib/types/index.d.ts.map +0 -1
- package/lib/types/keep-alive-entry.d.ts.map +0 -1
- package/lib/types/transition-entry.d.ts.map +0 -1
|
@@ -5386,7 +5386,7 @@ var drawChart = (function (exports) {
|
|
|
5386
5386
|
</script>
|
|
5387
5387
|
<script>
|
|
5388
5388
|
/*<!--*/
|
|
5389
|
-
const data = {"version":2,"tree":{"name":"root","children":[{"name":"index.js","children":[{"name":"src","children":[{"uid":"
|
|
5389
|
+
const data = {"version":2,"tree":{"name":"root","children":[{"name":"index.js","children":[{"name":"src","children":[{"uid":"215d335a-1","name":"delegate.ts"},{"uid":"215d335a-3","name":"hydration-debug.ts"},{"uid":"215d335a-5","name":"devtools.ts"},{"uid":"215d335a-7","name":"nodes.ts"},{"uid":"215d335a-9","name":"props.ts"},{"uid":"215d335a-11","name":"mount.ts"},{"uid":"215d335a-13","name":"hydrate.ts"},{"uid":"215d335a-15","name":"keep-alive.ts"},{"uid":"215d335a-17","name":"template.ts"},{"uid":"215d335a-19","name":"transition.ts"},{"uid":"215d335a-21","name":"transition-group.ts"},{"uid":"215d335a-23","name":"index.ts"}]}]}],"isRoot":true},"nodeParts":{"215d335a-1":{"renderedLength":2090,"gzipLength":1029,"brotliLength":0,"metaUid":"215d335a-0"},"215d335a-3":{"renderedLength":1395,"gzipLength":718,"brotliLength":0,"metaUid":"215d335a-2"},"215d335a-5":{"renderedLength":7009,"gzipLength":2149,"brotliLength":0,"metaUid":"215d335a-4"},"215d335a-7":{"renderedLength":17556,"gzipLength":4660,"brotliLength":0,"metaUid":"215d335a-6"},"215d335a-9":{"renderedLength":8129,"gzipLength":3082,"brotliLength":0,"metaUid":"215d335a-8"},"215d335a-11":{"renderedLength":12232,"gzipLength":3882,"brotliLength":0,"metaUid":"215d335a-10"},"215d335a-13":{"renderedLength":8312,"gzipLength":2472,"brotliLength":0,"metaUid":"215d335a-12"},"215d335a-15":{"renderedLength":1518,"gzipLength":724,"brotliLength":0,"metaUid":"215d335a-14"},"215d335a-17":{"renderedLength":5942,"gzipLength":2283,"brotliLength":0,"metaUid":"215d335a-16"},"215d335a-19":{"renderedLength":4929,"gzipLength":1410,"brotliLength":0,"metaUid":"215d335a-18"},"215d335a-21":{"renderedLength":8002,"gzipLength":2092,"brotliLength":0,"metaUid":"215d335a-20"},"215d335a-23":{"renderedLength":985,"gzipLength":549,"brotliLength":0,"metaUid":"215d335a-22"}},"nodeMetas":{"215d335a-0":{"id":"/src/delegate.ts","moduleParts":{"index.js":"215d335a-1"},"imported":[{"uid":"215d335a-24"}],"importedBy":[{"uid":"215d335a-22"},{"uid":"215d335a-12"},{"uid":"215d335a-8"}]},"215d335a-2":{"id":"/src/hydration-debug.ts","moduleParts":{"index.js":"215d335a-3"},"imported":[],"importedBy":[{"uid":"215d335a-22"},{"uid":"215d335a-12"}]},"215d335a-4":{"id":"/src/devtools.ts","moduleParts":{"index.js":"215d335a-5"},"imported":[],"importedBy":[{"uid":"215d335a-22"},{"uid":"215d335a-10"}]},"215d335a-6":{"id":"/src/nodes.ts","moduleParts":{"index.js":"215d335a-7"},"imported":[{"uid":"215d335a-25"},{"uid":"215d335a-24"}],"importedBy":[{"uid":"215d335a-12"},{"uid":"215d335a-10"}]},"215d335a-8":{"id":"/src/props.ts","moduleParts":{"index.js":"215d335a-9"},"imported":[{"uid":"215d335a-25"},{"uid":"215d335a-24"},{"uid":"215d335a-0"}],"importedBy":[{"uid":"215d335a-22"},{"uid":"215d335a-12"},{"uid":"215d335a-10"}]},"215d335a-10":{"id":"/src/mount.ts","moduleParts":{"index.js":"215d335a-11"},"imported":[{"uid":"215d335a-25"},{"uid":"215d335a-24"},{"uid":"215d335a-4"},{"uid":"215d335a-6"},{"uid":"215d335a-8"}],"importedBy":[{"uid":"215d335a-22"},{"uid":"215d335a-12"},{"uid":"215d335a-14"},{"uid":"215d335a-16"},{"uid":"215d335a-20"}]},"215d335a-12":{"id":"/src/hydrate.ts","moduleParts":{"index.js":"215d335a-13"},"imported":[{"uid":"215d335a-25"},{"uid":"215d335a-24"},{"uid":"215d335a-0"},{"uid":"215d335a-2"},{"uid":"215d335a-10"},{"uid":"215d335a-6"},{"uid":"215d335a-8"}],"importedBy":[{"uid":"215d335a-22"}]},"215d335a-14":{"id":"/src/keep-alive.ts","moduleParts":{"index.js":"215d335a-15"},"imported":[{"uid":"215d335a-25"},{"uid":"215d335a-24"},{"uid":"215d335a-10"}],"importedBy":[{"uid":"215d335a-22"}]},"215d335a-16":{"id":"/src/template.ts","moduleParts":{"index.js":"215d335a-17"},"imported":[{"uid":"215d335a-24"},{"uid":"215d335a-10"}],"importedBy":[{"uid":"215d335a-22"}]},"215d335a-18":{"id":"/src/transition.ts","moduleParts":{"index.js":"215d335a-19"},"imported":[{"uid":"215d335a-25"},{"uid":"215d335a-24"}],"importedBy":[{"uid":"215d335a-22"}]},"215d335a-20":{"id":"/src/transition-group.ts","moduleParts":{"index.js":"215d335a-21"},"imported":[{"uid":"215d335a-25"},{"uid":"215d335a-24"},{"uid":"215d335a-10"}],"importedBy":[{"uid":"215d335a-22"}]},"215d335a-22":{"id":"/src/index.ts","moduleParts":{"index.js":"215d335a-23"},"imported":[{"uid":"215d335a-0"},{"uid":"215d335a-12"},{"uid":"215d335a-2"},{"uid":"215d335a-14"},{"uid":"215d335a-10"},{"uid":"215d335a-8"},{"uid":"215d335a-16"},{"uid":"215d335a-18"},{"uid":"215d335a-20"},{"uid":"215d335a-4"}],"importedBy":[],"isEntry":true},"215d335a-24":{"id":"@pyreon/reactivity","moduleParts":{},"imported":[],"importedBy":[{"uid":"215d335a-0"},{"uid":"215d335a-12"},{"uid":"215d335a-14"},{"uid":"215d335a-10"},{"uid":"215d335a-8"},{"uid":"215d335a-16"},{"uid":"215d335a-18"},{"uid":"215d335a-20"},{"uid":"215d335a-6"}]},"215d335a-25":{"id":"@pyreon/core","moduleParts":{},"imported":[],"importedBy":[{"uid":"215d335a-12"},{"uid":"215d335a-14"},{"uid":"215d335a-10"},{"uid":"215d335a-8"},{"uid":"215d335a-18"},{"uid":"215d335a-20"},{"uid":"215d335a-6"}]}},"env":{"rollup":"4.23.0"},"options":{"gzip":true,"brotli":false,"sourcemap":false}};
|
|
5390
5390
|
|
|
5391
5391
|
const run = () => {
|
|
5392
5392
|
const width = window.innerWidth;
|
|
@@ -5386,7 +5386,7 @@ var drawChart = (function (exports) {
|
|
|
5386
5386
|
</script>
|
|
5387
5387
|
<script>
|
|
5388
5388
|
/*<!--*/
|
|
5389
|
-
const data = {"version":2,"tree":{"name":"root","children":[{"name":"keep-alive-entry.js","children":[{"name":"src","children":[{"uid":"
|
|
5389
|
+
const data = {"version":2,"tree":{"name":"root","children":[{"name":"keep-alive-entry.js","children":[{"name":"src","children":[{"uid":"a0f1ebd2-1","name":"devtools.ts"},{"uid":"a0f1ebd2-3","name":"nodes.ts"},{"uid":"a0f1ebd2-5","name":"delegate.ts"},{"uid":"a0f1ebd2-7","name":"props.ts"},{"uid":"a0f1ebd2-9","name":"mount.ts"},{"uid":"a0f1ebd2-11","name":"keep-alive.ts"}]}]}],"isRoot":true},"nodeParts":{"a0f1ebd2-1":{"renderedLength":759,"gzipLength":340,"brotliLength":0,"metaUid":"a0f1ebd2-0"},"a0f1ebd2-3":{"renderedLength":17556,"gzipLength":4658,"brotliLength":0,"metaUid":"a0f1ebd2-2"},"a0f1ebd2-5":{"renderedLength":790,"gzipLength":436,"brotliLength":0,"metaUid":"a0f1ebd2-4"},"a0f1ebd2-7":{"renderedLength":7659,"gzipLength":2923,"brotliLength":0,"metaUid":"a0f1ebd2-6"},"a0f1ebd2-9":{"renderedLength":12162,"gzipLength":3873,"brotliLength":0,"metaUid":"a0f1ebd2-8"},"a0f1ebd2-11":{"renderedLength":1518,"gzipLength":724,"brotliLength":0,"metaUid":"a0f1ebd2-10"}},"nodeMetas":{"a0f1ebd2-0":{"id":"/src/devtools.ts","moduleParts":{"keep-alive-entry.js":"a0f1ebd2-1"},"imported":[],"importedBy":[{"uid":"a0f1ebd2-8"}]},"a0f1ebd2-2":{"id":"/src/nodes.ts","moduleParts":{"keep-alive-entry.js":"a0f1ebd2-3"},"imported":[{"uid":"a0f1ebd2-12"},{"uid":"a0f1ebd2-13"}],"importedBy":[{"uid":"a0f1ebd2-8"}]},"a0f1ebd2-4":{"id":"/src/delegate.ts","moduleParts":{"keep-alive-entry.js":"a0f1ebd2-5"},"imported":[{"uid":"a0f1ebd2-13"}],"importedBy":[{"uid":"a0f1ebd2-6"}]},"a0f1ebd2-6":{"id":"/src/props.ts","moduleParts":{"keep-alive-entry.js":"a0f1ebd2-7"},"imported":[{"uid":"a0f1ebd2-12"},{"uid":"a0f1ebd2-13"},{"uid":"a0f1ebd2-4"}],"importedBy":[{"uid":"a0f1ebd2-8"}]},"a0f1ebd2-8":{"id":"/src/mount.ts","moduleParts":{"keep-alive-entry.js":"a0f1ebd2-9"},"imported":[{"uid":"a0f1ebd2-12"},{"uid":"a0f1ebd2-13"},{"uid":"a0f1ebd2-0"},{"uid":"a0f1ebd2-2"},{"uid":"a0f1ebd2-6"}],"importedBy":[{"uid":"a0f1ebd2-10"}]},"a0f1ebd2-10":{"id":"/src/keep-alive.ts","moduleParts":{"keep-alive-entry.js":"a0f1ebd2-11"},"imported":[{"uid":"a0f1ebd2-12"},{"uid":"a0f1ebd2-13"},{"uid":"a0f1ebd2-8"}],"importedBy":[],"isEntry":true},"a0f1ebd2-12":{"id":"@pyreon/core","moduleParts":{},"imported":[],"importedBy":[{"uid":"a0f1ebd2-10"},{"uid":"a0f1ebd2-8"},{"uid":"a0f1ebd2-2"},{"uid":"a0f1ebd2-6"}]},"a0f1ebd2-13":{"id":"@pyreon/reactivity","moduleParts":{},"imported":[],"importedBy":[{"uid":"a0f1ebd2-10"},{"uid":"a0f1ebd2-8"},{"uid":"a0f1ebd2-2"},{"uid":"a0f1ebd2-6"},{"uid":"a0f1ebd2-4"}]}},"env":{"rollup":"4.23.0"},"options":{"gzip":true,"brotli":false,"sourcemap":false}};
|
|
5390
5390
|
|
|
5391
5391
|
const run = () => {
|
|
5392
5392
|
const width = window.innerWidth;
|
|
@@ -5386,7 +5386,7 @@ var drawChart = (function (exports) {
|
|
|
5386
5386
|
</script>
|
|
5387
5387
|
<script>
|
|
5388
5388
|
/*<!--*/
|
|
5389
|
-
const data = {"version":2,"tree":{"name":"root","children":[{"name":"transition-entry.js","children":[{"name":"src/transition.ts","uid":"
|
|
5389
|
+
const data = {"version":2,"tree":{"name":"root","children":[{"name":"transition-entry.js","children":[{"name":"src/transition.ts","uid":"266bed6c-1"}]}],"isRoot":true},"nodeParts":{"266bed6c-1":{"renderedLength":4925,"gzipLength":1407,"brotliLength":0,"metaUid":"266bed6c-0"}},"nodeMetas":{"266bed6c-0":{"id":"/src/transition.ts","moduleParts":{"transition-entry.js":"266bed6c-1"},"imported":[{"uid":"266bed6c-2"},{"uid":"266bed6c-3"}],"importedBy":[],"isEntry":true},"266bed6c-2":{"id":"@pyreon/core","moduleParts":{},"imported":[],"importedBy":[{"uid":"266bed6c-0"}]},"266bed6c-3":{"id":"@pyreon/reactivity","moduleParts":{},"imported":[],"importedBy":[{"uid":"266bed6c-0"}]}},"env":{"rollup":"4.23.0"},"options":{"gzip":true,"brotli":false,"sourcemap":false}};
|
|
5390
5390
|
|
|
5391
5391
|
const run = () => {
|
|
5392
5392
|
const width = window.innerWidth;
|
package/lib/index.js
CHANGED
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import { batch, effect, effectScope, renderEffect, runUntracked, setCurrentScope, signal } from "@pyreon/reactivity";
|
|
2
|
-
import { EMPTY_PROPS, ForSymbol, Fragment, PortalSymbol, captureContextStack, createRef, cx, dispatchToErrorBoundary, h, makeReactiveProps, normalizeStyleValue, onMount, onUnmount, propagateError, reportError, restoreContextStack, runWithHooks, toKebabCase } from "@pyreon/core";
|
|
2
|
+
import { EMPTY_PROPS, ForSymbol, Fragment, PortalSymbol, captureContextStack, createRef, cx, dispatchToErrorBoundary, h, makeReactiveProps, nativeCompat, normalizeStyleValue, onMount, onUnmount, propagateError, reportError, restoreContextStack, runWithHooks, toKebabCase } from "@pyreon/core";
|
|
3
3
|
|
|
4
4
|
//#region src/delegate.ts
|
|
5
5
|
/**
|
|
@@ -66,6 +66,10 @@ function setupDelegation(container) {
|
|
|
66
66
|
while (el && el !== container) {
|
|
67
67
|
const handler = el[prop];
|
|
68
68
|
if (typeof handler === "function") {
|
|
69
|
+
Object.defineProperty(e, "currentTarget", {
|
|
70
|
+
value: el,
|
|
71
|
+
configurable: true
|
|
72
|
+
});
|
|
69
73
|
batch(() => handler(e));
|
|
70
74
|
if (e.cancelBubble) break;
|
|
71
75
|
}
|
|
@@ -77,13 +81,29 @@ function setupDelegation(container) {
|
|
|
77
81
|
|
|
78
82
|
//#endregion
|
|
79
83
|
//#region src/hydration-debug.ts
|
|
80
|
-
let _enabled =
|
|
84
|
+
let _enabled = process.env.NODE_ENV !== "production";
|
|
81
85
|
function enableHydrationWarnings() {
|
|
82
86
|
_enabled = true;
|
|
83
87
|
}
|
|
84
88
|
function disableHydrationWarnings() {
|
|
85
89
|
_enabled = false;
|
|
86
90
|
}
|
|
91
|
+
let _handlers = [];
|
|
92
|
+
/**
|
|
93
|
+
* Register a hydration mismatch handler. Called on every mismatch in BOTH
|
|
94
|
+
* development and production, independent of the dev-mode warn toggle.
|
|
95
|
+
*
|
|
96
|
+
* Mirrors `@pyreon/core`'s `registerErrorHandler` pattern — multiple
|
|
97
|
+
* handlers can be registered; each is called in registration order;
|
|
98
|
+
* handler errors are swallowed so they don't propagate into the
|
|
99
|
+
* framework. Returns an unregister function.
|
|
100
|
+
*/
|
|
101
|
+
function onHydrationMismatch(handler) {
|
|
102
|
+
_handlers.push(handler);
|
|
103
|
+
return () => {
|
|
104
|
+
_handlers = _handlers.filter((h) => h !== handler);
|
|
105
|
+
};
|
|
106
|
+
}
|
|
87
107
|
/**
|
|
88
108
|
* Emit a hydration mismatch warning.
|
|
89
109
|
* @param type - Kind of mismatch
|
|
@@ -91,9 +111,20 @@ function disableHydrationWarnings() {
|
|
|
91
111
|
* @param actual - What the DOM had
|
|
92
112
|
* @param path - Human-readable path in the tree, e.g. "root > div > span"
|
|
93
113
|
*/
|
|
94
|
-
function warnHydrationMismatch(
|
|
95
|
-
if (
|
|
96
|
-
|
|
114
|
+
function warnHydrationMismatch(type, expected, actual, path) {
|
|
115
|
+
if (_enabled) console.warn(`[Pyreon] Hydration mismatch (${type}): expected ${String(expected)}, got ${String(actual)} at ${path}`);
|
|
116
|
+
if (_handlers.length > 0) {
|
|
117
|
+
const ctx = {
|
|
118
|
+
type,
|
|
119
|
+
expected,
|
|
120
|
+
actual,
|
|
121
|
+
path,
|
|
122
|
+
timestamp: Date.now()
|
|
123
|
+
};
|
|
124
|
+
for (const h of _handlers) try {
|
|
125
|
+
h(ctx);
|
|
126
|
+
} catch {}
|
|
127
|
+
}
|
|
97
128
|
}
|
|
98
129
|
|
|
99
130
|
//#endregion
|
|
@@ -279,13 +310,18 @@ function installDevTools() {
|
|
|
279
310
|
});
|
|
280
311
|
const win = window;
|
|
281
312
|
win.$p = {
|
|
313
|
+
/** List all mounted components */
|
|
282
314
|
components: () => devtools.getAllComponents(),
|
|
315
|
+
/** Component tree (roots only) */
|
|
283
316
|
tree: () => devtools.getComponentTree(),
|
|
317
|
+
/** Highlight a component by id */
|
|
284
318
|
highlight: (id) => devtools.highlight(id),
|
|
319
|
+
/** Toggle component inspector overlay */
|
|
285
320
|
inspect: () => {
|
|
286
321
|
if (_overlayActive) disableOverlay();
|
|
287
322
|
else enableOverlay();
|
|
288
323
|
},
|
|
324
|
+
/** Print component count */
|
|
289
325
|
stats: () => {
|
|
290
326
|
const all = devtools.getAllComponents();
|
|
291
327
|
const roots = devtools.getComponentTree();
|
|
@@ -295,6 +331,7 @@ function installDevTools() {
|
|
|
295
331
|
roots: roots.length
|
|
296
332
|
};
|
|
297
333
|
},
|
|
334
|
+
/** Quick help */
|
|
298
335
|
help: () => {
|
|
299
336
|
console.log("[Pyreon] $p commands:\n $p.components() — list all mounted components\n $p.tree() — component tree (roots only)\n $p.highlight(id)— outline a component\n $p.inspect() — toggle component inspector\n $p.stats() — print component count\n $p.help() — this message");
|
|
300
337
|
}
|
|
@@ -303,8 +340,8 @@ function installDevTools() {
|
|
|
303
340
|
|
|
304
341
|
//#endregion
|
|
305
342
|
//#region src/nodes.ts
|
|
306
|
-
const __DEV__$5 =
|
|
307
|
-
const _countSink$
|
|
343
|
+
const __DEV__$5 = process.env.NODE_ENV !== "production";
|
|
344
|
+
const _countSink$4 = globalThis;
|
|
308
345
|
/**
|
|
309
346
|
* Move all nodes strictly between `start` and `end` into a throwaway
|
|
310
347
|
* DocumentFragment, detaching them from the live DOM in O(n) top-level moves.
|
|
@@ -326,6 +363,10 @@ function clearBetween(start, end) {
|
|
|
326
363
|
cur = next;
|
|
327
364
|
}
|
|
328
365
|
}
|
|
366
|
+
/** Emit `runtime.cleanup` once per registered mount cleanup that actually runs. */
|
|
367
|
+
function _emitCleanup() {
|
|
368
|
+
if (__DEV__$5) _countSink$4.__pyreon_count__?.("runtime.cleanup");
|
|
369
|
+
}
|
|
329
370
|
/**
|
|
330
371
|
* Mount a reactive node whose content changes over time.
|
|
331
372
|
*
|
|
@@ -333,24 +374,34 @@ function clearBetween(start, end) {
|
|
|
333
374
|
* On each change: old nodes are removed, new ones inserted before the anchor.
|
|
334
375
|
*/
|
|
335
376
|
function mountReactive(accessor, parent, anchor, mount) {
|
|
377
|
+
if (__DEV__$5) _countSink$4.__pyreon_count__?.("runtime.mountReactive");
|
|
336
378
|
const marker = document.createComment("pyreon");
|
|
337
379
|
parent.insertBefore(marker, anchor);
|
|
338
380
|
const contextSnapshot = captureContextStack();
|
|
339
381
|
let currentCleanup = () => {};
|
|
382
|
+
let hasCleanup = false;
|
|
340
383
|
let generation = 0;
|
|
341
384
|
const e = effect(() => {
|
|
342
385
|
const myGen = ++generation;
|
|
386
|
+
if (hasCleanup) _emitCleanup();
|
|
343
387
|
runUntracked(() => currentCleanup());
|
|
344
388
|
currentCleanup = () => {};
|
|
389
|
+
hasCleanup = false;
|
|
345
390
|
const value = accessor();
|
|
346
391
|
if (value != null && value !== false) {
|
|
347
392
|
const cleanup = runUntracked(() => restoreContextStack(contextSnapshot, () => mount(value, parent, marker)));
|
|
348
|
-
if (myGen === generation)
|
|
349
|
-
|
|
393
|
+
if (myGen === generation) {
|
|
394
|
+
currentCleanup = cleanup;
|
|
395
|
+
hasCleanup = true;
|
|
396
|
+
} else {
|
|
397
|
+
_emitCleanup();
|
|
398
|
+
cleanup();
|
|
399
|
+
}
|
|
350
400
|
}
|
|
351
401
|
});
|
|
352
402
|
return () => {
|
|
353
403
|
e.dispose();
|
|
404
|
+
if (hasCleanup) _emitCleanup();
|
|
354
405
|
currentCleanup();
|
|
355
406
|
marker.parentNode?.removeChild(marker);
|
|
356
407
|
};
|
|
@@ -387,7 +438,7 @@ function computeKeyedLis(lis, n, newKeyOrder, curPos) {
|
|
|
387
438
|
if (lo > 0) pred[i] = tailIdx[lo - 1];
|
|
388
439
|
if (lo === lisLen) lisLen++;
|
|
389
440
|
}
|
|
390
|
-
if (__DEV__$5 && ops > 0) _countSink$
|
|
441
|
+
if (__DEV__$5 && ops > 0) _countSink$4.__pyreon_count__?.("runtime.mountFor.lisOps", ops);
|
|
391
442
|
return lisLen;
|
|
392
443
|
}
|
|
393
444
|
function markStayingEntries(lis, lisLen) {
|
|
@@ -450,6 +501,7 @@ function mountKeyedList(accessor, parent, listAnchor, mountVNode) {
|
|
|
450
501
|
const removeStaleEntries = (newKeySet) => {
|
|
451
502
|
for (const [key, entry] of cache) {
|
|
452
503
|
if (newKeySet.has(key)) continue;
|
|
504
|
+
_emitCleanup();
|
|
453
505
|
entry.cleanup();
|
|
454
506
|
entry.anchor.parentNode?.removeChild(entry.anchor);
|
|
455
507
|
cache.delete(key);
|
|
@@ -474,28 +526,34 @@ function mountKeyedList(accessor, parent, listAnchor, mountVNode) {
|
|
|
474
526
|
const e = effect(() => {
|
|
475
527
|
const newList = accessor();
|
|
476
528
|
const n = newList.length;
|
|
477
|
-
|
|
478
|
-
|
|
479
|
-
|
|
529
|
+
runUntracked(() => {
|
|
530
|
+
if (n === 0 && cache.size > 0) {
|
|
531
|
+
for (const entry of cache.values()) {
|
|
532
|
+
_emitCleanup();
|
|
533
|
+
entry.cleanup();
|
|
534
|
+
}
|
|
535
|
+
cache.clear();
|
|
536
|
+
curPos.clear();
|
|
537
|
+
currentKeyOrder = [];
|
|
538
|
+
clearBetween(startMarker, tailMarker);
|
|
539
|
+
return;
|
|
540
|
+
}
|
|
541
|
+
const { newKeyOrder, newKeySet } = collectKeyOrder(newList);
|
|
542
|
+
removeStaleEntries(newKeySet);
|
|
543
|
+
mountNewEntries(newList);
|
|
544
|
+
if (currentKeyOrder.length > 0 && n > 0) lis = keyedListReorder(lis, n, newKeyOrder, curPos, cache, parent, tailMarker);
|
|
480
545
|
curPos.clear();
|
|
481
|
-
|
|
482
|
-
|
|
483
|
-
|
|
484
|
-
|
|
485
|
-
|
|
486
|
-
|
|
487
|
-
mountNewEntries(newList);
|
|
488
|
-
if (currentKeyOrder.length > 0 && n > 0) lis = keyedListReorder(lis, n, newKeyOrder, curPos, cache, parent, tailMarker);
|
|
489
|
-
curPos.clear();
|
|
490
|
-
for (let i = 0; i < newKeyOrder.length; i++) {
|
|
491
|
-
const k = newKeyOrder[i];
|
|
492
|
-
if (k !== void 0) curPos.set(k, i);
|
|
493
|
-
}
|
|
494
|
-
currentKeyOrder = newKeyOrder;
|
|
546
|
+
for (let i = 0; i < newKeyOrder.length; i++) {
|
|
547
|
+
const k = newKeyOrder[i];
|
|
548
|
+
if (k !== void 0) curPos.set(k, i);
|
|
549
|
+
}
|
|
550
|
+
currentKeyOrder = newKeyOrder;
|
|
551
|
+
});
|
|
495
552
|
});
|
|
496
553
|
return () => {
|
|
497
554
|
e.dispose();
|
|
498
555
|
for (const entry of cache.values()) {
|
|
556
|
+
_emitCleanup();
|
|
499
557
|
entry.cleanup();
|
|
500
558
|
entry.anchor.parentNode?.removeChild(entry.anchor);
|
|
501
559
|
}
|
|
@@ -554,7 +612,7 @@ function computeForLis(lis, n, newKeys, cache) {
|
|
|
554
612
|
tailIdx[lo] = i;
|
|
555
613
|
if (lo > 0) pred[i] = tailIdx[lo - 1];
|
|
556
614
|
}
|
|
557
|
-
if (__DEV__$5 && ops > 0) _countSink$
|
|
615
|
+
if (__DEV__$5 && ops > 0) _countSink$4.__pyreon_count__?.("runtime.mountFor.lisOps", ops);
|
|
558
616
|
return lisLen;
|
|
559
617
|
}
|
|
560
618
|
function applyForMoves(n, newKeys, stay, cache, liveParent, tailMarker) {
|
|
@@ -672,7 +730,10 @@ function mountFor(source, getKey, renderItem, parent, anchor, mountChild) {
|
|
|
672
730
|
};
|
|
673
731
|
const handleReplaceAll = (items, n, newKeys, liveParent) => {
|
|
674
732
|
if (cleanupCount > 0) {
|
|
675
|
-
for (const entry of cache.values()) if (entry.cleanup)
|
|
733
|
+
for (const entry of cache.values()) if (entry.cleanup) {
|
|
734
|
+
_emitCleanup();
|
|
735
|
+
entry.cleanup();
|
|
736
|
+
}
|
|
676
737
|
}
|
|
677
738
|
cache = /* @__PURE__ */ new Map();
|
|
678
739
|
cleanupCount = 0;
|
|
@@ -697,6 +758,7 @@ function mountFor(source, getKey, renderItem, parent, anchor, mountChild) {
|
|
|
697
758
|
for (const [key, entry] of cache) {
|
|
698
759
|
if (newKeySet.has(key)) continue;
|
|
699
760
|
if (entry.cleanup) {
|
|
761
|
+
_emitCleanup();
|
|
700
762
|
entry.cleanup();
|
|
701
763
|
cleanupCount--;
|
|
702
764
|
}
|
|
@@ -716,7 +778,10 @@ function mountFor(source, getKey, renderItem, parent, anchor, mountChild) {
|
|
|
716
778
|
const handleFastClear = (liveParent) => {
|
|
717
779
|
if (cache.size === 0) return;
|
|
718
780
|
if (cleanupCount > 0) {
|
|
719
|
-
for (const entry of cache.values()) if (entry.cleanup)
|
|
781
|
+
for (const entry of cache.values()) if (entry.cleanup) {
|
|
782
|
+
_emitCleanup();
|
|
783
|
+
entry.cleanup();
|
|
784
|
+
}
|
|
720
785
|
}
|
|
721
786
|
const pp = liveParent.parentNode;
|
|
722
787
|
if (pp && liveParent.firstChild === startMarker && liveParent.lastChild === tailMarker) {
|
|
@@ -754,25 +819,30 @@ function mountFor(source, getKey, renderItem, parent, anchor, mountChild) {
|
|
|
754
819
|
if (!liveParent) return;
|
|
755
820
|
const items = source();
|
|
756
821
|
const n = items.length;
|
|
757
|
-
|
|
758
|
-
|
|
759
|
-
|
|
760
|
-
|
|
761
|
-
|
|
762
|
-
|
|
763
|
-
|
|
764
|
-
|
|
765
|
-
|
|
766
|
-
|
|
767
|
-
|
|
768
|
-
|
|
769
|
-
|
|
770
|
-
|
|
822
|
+
runUntracked(() => {
|
|
823
|
+
if (n === 0) {
|
|
824
|
+
handleFastClear(liveParent);
|
|
825
|
+
return;
|
|
826
|
+
}
|
|
827
|
+
if (currentKeys.length === 0) {
|
|
828
|
+
handleFreshRender(items, n, liveParent);
|
|
829
|
+
return;
|
|
830
|
+
}
|
|
831
|
+
const newKeys = collectNewKeys(items, n);
|
|
832
|
+
if (!hasAnyKeptKey(n, newKeys)) {
|
|
833
|
+
handleReplaceAll(items, n, newKeys, liveParent);
|
|
834
|
+
return;
|
|
835
|
+
}
|
|
836
|
+
handleIncrementalUpdate(items, n, newKeys, liveParent);
|
|
837
|
+
});
|
|
771
838
|
});
|
|
772
839
|
return () => {
|
|
773
840
|
e.dispose();
|
|
774
841
|
for (const entry of cache.values()) {
|
|
775
|
-
if (cleanupCount > 0 && entry.cleanup)
|
|
842
|
+
if (cleanupCount > 0 && entry.cleanup) {
|
|
843
|
+
_emitCleanup();
|
|
844
|
+
entry.cleanup();
|
|
845
|
+
}
|
|
776
846
|
entry.anchor.parentNode?.removeChild(entry.anchor);
|
|
777
847
|
}
|
|
778
848
|
cache = /* @__PURE__ */ new Map();
|
|
@@ -835,7 +905,8 @@ function moveEntryBefore(parent, startNode, before) {
|
|
|
835
905
|
|
|
836
906
|
//#endregion
|
|
837
907
|
//#region src/props.ts
|
|
838
|
-
const __DEV__$4 =
|
|
908
|
+
const __DEV__$4 = process.env.NODE_ENV !== "production";
|
|
909
|
+
const _countSink$3 = globalThis;
|
|
839
910
|
let _customSanitizer = null;
|
|
840
911
|
/**
|
|
841
912
|
* Set a custom HTML sanitizer used by `innerHTML` and `sanitizeHtml()`.
|
|
@@ -999,6 +1070,7 @@ function applyProps(el, props) {
|
|
|
999
1070
|
* Bind an event handler (onClick → "click") with batching + delegation support.
|
|
1000
1071
|
*/
|
|
1001
1072
|
function applyEventProp(el, key, value) {
|
|
1073
|
+
if (__DEV__$4) _countSink$3.__pyreon_count__?.("runtime.applyEvent");
|
|
1002
1074
|
if (typeof value !== "function") {
|
|
1003
1075
|
if (__DEV__$4 && value != null) console.warn(`[Pyreon] Event handler "${key}" received a non-function value (${typeof value}). Expected a function. Did you mean ${key}={() => ...}?`);
|
|
1004
1076
|
return null;
|
|
@@ -1045,6 +1117,7 @@ function applyStaticProp(el, key, value) {
|
|
|
1045
1117
|
setStaticProp(el, key, value);
|
|
1046
1118
|
}
|
|
1047
1119
|
function applyProp(el, key, value) {
|
|
1120
|
+
if (__DEV__$4) _countSink$3.__pyreon_count__?.("runtime.applyProp");
|
|
1048
1121
|
if (EVENT_RE.test(key)) return applyEventProp(el, key, value);
|
|
1049
1122
|
if (typeof value === "function") return renderEffect(() => applyStaticProp(el, key, value()));
|
|
1050
1123
|
applyStaticProp(el, key, value);
|
|
@@ -1135,7 +1208,7 @@ function setStaticProp(el, key, value) {
|
|
|
1135
1208
|
|
|
1136
1209
|
//#endregion
|
|
1137
1210
|
//#region src/mount.ts
|
|
1138
|
-
const __DEV__$3 =
|
|
1211
|
+
const __DEV__$3 = process.env.NODE_ENV !== "production";
|
|
1139
1212
|
const _countSink$2 = globalThis;
|
|
1140
1213
|
const noop$1 = () => {};
|
|
1141
1214
|
let _elementDepth = 0;
|
|
@@ -1685,10 +1758,10 @@ function hydrateComponent(vnode, domNode, parent, anchor, path = "root") {
|
|
|
1685
1758
|
const mountCleanups = [];
|
|
1686
1759
|
let nextDom = domNode;
|
|
1687
1760
|
const componentName = vnode.type.name || "Anonymous";
|
|
1688
|
-
const mergedProps = (vnode.children ?? []).length > 0 && vnode.props.children === void 0 ? {
|
|
1761
|
+
const mergedProps = makeReactiveProps((vnode.children ?? []).length > 0 && vnode.props.children === void 0 ? {
|
|
1689
1762
|
...vnode.props,
|
|
1690
1763
|
children: (vnode.children ?? []).length === 1 ? (vnode.children ?? [])[0] : vnode.children ?? []
|
|
1691
|
-
} : vnode.props;
|
|
1764
|
+
} : vnode.props);
|
|
1692
1765
|
let result;
|
|
1693
1766
|
try {
|
|
1694
1767
|
result = runWithHooks(vnode.type, mergedProps);
|
|
@@ -1792,7 +1865,7 @@ function KeepAlive(props) {
|
|
|
1792
1865
|
const e = effect(() => {
|
|
1793
1866
|
const isActive = props.active?.() ?? true;
|
|
1794
1867
|
if (!childMounted) {
|
|
1795
|
-
childCleanup = mountChild(props.children ?? null, container, null);
|
|
1868
|
+
childCleanup = runUntracked(() => mountChild(props.children ?? null, container, null));
|
|
1796
1869
|
childMounted = true;
|
|
1797
1870
|
}
|
|
1798
1871
|
container.style.display = isActive ? "" : "none";
|
|
@@ -1807,10 +1880,11 @@ function KeepAlive(props) {
|
|
|
1807
1880
|
style: "display: contents"
|
|
1808
1881
|
});
|
|
1809
1882
|
}
|
|
1883
|
+
nativeCompat(KeepAlive);
|
|
1810
1884
|
|
|
1811
1885
|
//#endregion
|
|
1812
1886
|
//#region src/template.ts
|
|
1813
|
-
const __DEV__$2 =
|
|
1887
|
+
const __DEV__$2 = process.env.NODE_ENV !== "production";
|
|
1814
1888
|
const _countSink$1 = globalThis;
|
|
1815
1889
|
/**
|
|
1816
1890
|
* Creates a row/item factory backed by HTML template cloning.
|
|
@@ -1867,6 +1941,7 @@ function createTemplate(html, bind) {
|
|
|
1867
1941
|
* @param node - The Text node to update
|
|
1868
1942
|
*/
|
|
1869
1943
|
function _bindText(source, node) {
|
|
1944
|
+
if (__DEV__$2) _countSink$1.__pyreon_count__?.("runtime.bindText");
|
|
1870
1945
|
if (source.direct) {
|
|
1871
1946
|
const textUpdate = () => {
|
|
1872
1947
|
const v = source._v;
|
|
@@ -1900,6 +1975,7 @@ function _bindText(source, node) {
|
|
|
1900
1975
|
* @param updater - Function that reads `source._v` and applies the DOM update
|
|
1901
1976
|
*/
|
|
1902
1977
|
function _bindDirect(source, updater) {
|
|
1978
|
+
if (__DEV__$2) _countSink$1.__pyreon_count__?.("runtime.bindDirect");
|
|
1903
1979
|
if (source.direct) {
|
|
1904
1980
|
updater(source._v);
|
|
1905
1981
|
return source.direct(() => updater(source._v));
|
|
@@ -1907,6 +1983,7 @@ function _bindDirect(source, updater) {
|
|
|
1907
1983
|
const fn = source;
|
|
1908
1984
|
return renderEffect(() => updater(fn()));
|
|
1909
1985
|
}
|
|
1986
|
+
const TPL_CACHE_MAX = 1024;
|
|
1910
1987
|
const _tplCache = /* @__PURE__ */ new Map();
|
|
1911
1988
|
/**
|
|
1912
1989
|
* Compiler-emitted template instantiation.
|
|
@@ -1937,6 +2014,13 @@ function _tpl(html, bind) {
|
|
|
1937
2014
|
if (!tpl) {
|
|
1938
2015
|
tpl = document.createElement("template");
|
|
1939
2016
|
tpl.innerHTML = html;
|
|
2017
|
+
if (_tplCache.size >= TPL_CACHE_MAX) {
|
|
2018
|
+
const oldest = _tplCache.keys().next().value;
|
|
2019
|
+
if (oldest !== void 0) _tplCache.delete(oldest);
|
|
2020
|
+
}
|
|
2021
|
+
_tplCache.set(html, tpl);
|
|
2022
|
+
} else {
|
|
2023
|
+
_tplCache.delete(html);
|
|
1940
2024
|
_tplCache.set(html, tpl);
|
|
1941
2025
|
}
|
|
1942
2026
|
const el = tpl.content.firstElementChild?.cloneNode(true);
|
|
@@ -1971,7 +2055,7 @@ function _mountSlot(children, parent, placeholder) {
|
|
|
1971
2055
|
|
|
1972
2056
|
//#endregion
|
|
1973
2057
|
//#region src/transition.ts
|
|
1974
|
-
const __DEV__$1 =
|
|
2058
|
+
const __DEV__$1 = process.env.NODE_ENV !== "production";
|
|
1975
2059
|
/**
|
|
1976
2060
|
* Transition — adds CSS enter/leave animation classes to a single child element,
|
|
1977
2061
|
* controlled by the reactive `show` prop.
|
|
@@ -2130,6 +2214,7 @@ function Transition(props) {
|
|
|
2130
2214
|
};
|
|
2131
2215
|
});
|
|
2132
2216
|
}
|
|
2217
|
+
nativeCompat(Transition);
|
|
2133
2218
|
|
|
2134
2219
|
//#endregion
|
|
2135
2220
|
//#region src/transition-group.ts
|
|
@@ -2265,17 +2350,19 @@ function TransitionGroup(props) {
|
|
|
2265
2350
|
const key = props.keyFn(item, i);
|
|
2266
2351
|
if (entries.has(key)) continue;
|
|
2267
2352
|
const itemRef = createRef();
|
|
2268
|
-
const rawVNode = runUntracked(() => props.render(item, i));
|
|
2269
2353
|
const entry = {
|
|
2270
2354
|
key,
|
|
2271
2355
|
ref: itemRef,
|
|
2272
|
-
cleanup:
|
|
2273
|
-
|
|
2274
|
-
|
|
2275
|
-
...rawVNode
|
|
2276
|
-
|
|
2277
|
-
|
|
2278
|
-
|
|
2356
|
+
cleanup: runUntracked(() => {
|
|
2357
|
+
const rawVNode = props.render(item, i);
|
|
2358
|
+
return mountChild(typeof rawVNode.type === "string" ? {
|
|
2359
|
+
...rawVNode,
|
|
2360
|
+
props: {
|
|
2361
|
+
...rawVNode.props,
|
|
2362
|
+
ref: itemRef
|
|
2363
|
+
}
|
|
2364
|
+
} : rawVNode, container, null);
|
|
2365
|
+
}),
|
|
2279
2366
|
leaving: false,
|
|
2280
2367
|
cancelTransition: null
|
|
2281
2368
|
};
|
|
@@ -2383,10 +2470,11 @@ function TransitionGroup(props) {
|
|
|
2383
2470
|
});
|
|
2384
2471
|
return h(tag, { ref: containerRef });
|
|
2385
2472
|
}
|
|
2473
|
+
nativeCompat(TransitionGroup);
|
|
2386
2474
|
|
|
2387
2475
|
//#endregion
|
|
2388
2476
|
//#region src/index.ts
|
|
2389
|
-
const __DEV__ =
|
|
2477
|
+
const __DEV__ = process.env.NODE_ENV !== "production";
|
|
2390
2478
|
const _countSink = globalThis;
|
|
2391
2479
|
/**
|
|
2392
2480
|
* Mount a VNode tree into a container element.
|
|
@@ -2414,5 +2502,5 @@ function mount(root, container) {
|
|
|
2414
2502
|
const render = mount;
|
|
2415
2503
|
|
|
2416
2504
|
//#endregion
|
|
2417
|
-
export { DELEGATED_EVENTS, KeepAlive, Transition, TransitionGroup, applyProps as _applyProps, applyProps, _bindDirect, _bindText, _mountSlot, _tpl, applyProp, createTemplate, delegatedPropName, disableHydrationWarnings, enableHydrationWarnings, hydrateRoot, mount, mountChild, render, sanitizeHtml, setSanitizer, setupDelegation };
|
|
2505
|
+
export { DELEGATED_EVENTS, KeepAlive, Transition, TransitionGroup, applyProps as _applyProps, applyProps, _bindDirect, _bindText, _mountSlot, _tpl, applyProp, createTemplate, delegatedPropName, disableHydrationWarnings, enableHydrationWarnings, hydrateRoot, mount, mountChild, onHydrationMismatch, render, sanitizeHtml, setSanitizer, setupDelegation };
|
|
2418
2506
|
//# sourceMappingURL=index.js.map
|