@pyreon/runtime-dom 0.11.2 → 0.11.4
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/index.js +14 -12
- package/lib/index.js.map +1 -1
- package/lib/types/index.d.ts.map +1 -1
- package/package.json +3 -3
- package/src/delegate.ts +2 -2
- package/src/hydrate.ts +8 -4
- package/src/keep-alive.ts +2 -1
- package/src/mount.ts +6 -5
- package/src/props.ts +7 -5
- package/src/tests/props.test.ts +463 -0
- package/src/tests/show-context.test.ts +177 -0
- package/src/tests/transition.test.ts +550 -0
|
@@ -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":"03763e65-1","name":"delegate.ts"},{"uid":"03763e65-3","name":"hydration-debug.ts"},{"uid":"03763e65-5","name":"devtools.ts"},{"uid":"03763e65-7","name":"nodes.ts"},{"uid":"03763e65-9","name":"props.ts"},{"uid":"03763e65-11","name":"mount.ts"},{"uid":"03763e65-13","name":"hydrate.ts"},{"uid":"03763e65-15","name":"keep-alive.ts"},{"uid":"03763e65-17","name":"template.ts"},{"uid":"03763e65-19","name":"transition.ts"},{"uid":"03763e65-21","name":"transition-group.ts"},{"uid":"03763e65-23","name":"index.ts"}]}]}],"isRoot":true},"nodeParts":{"03763e65-1":{"renderedLength":1990,"gzipLength":976,"brotliLength":0,"metaUid":"03763e65-0"},"03763e65-3":{"renderedLength":704,"gzipLength":397,"brotliLength":0,"metaUid":"03763e65-2"},"03763e65-5":{"renderedLength":6803,"gzipLength":2095,"brotliLength":0,"metaUid":"03763e65-4"},"03763e65-7":{"renderedLength":16273,"gzipLength":4364,"brotliLength":0,"metaUid":"03763e65-6"},"03763e65-9":{"renderedLength":6157,"gzipLength":2362,"brotliLength":0,"metaUid":"03763e65-8"},"03763e65-11":{"renderedLength":9397,"gzipLength":2862,"brotliLength":0,"metaUid":"03763e65-10"},"03763e65-13":{"renderedLength":7694,"gzipLength":2333,"brotliLength":0,"metaUid":"03763e65-12"},"03763e65-15":{"renderedLength":1473,"gzipLength":701,"brotliLength":0,"metaUid":"03763e65-14"},"03763e65-17":{"renderedLength":4512,"gzipLength":1811,"brotliLength":0,"metaUid":"03763e65-16"},"03763e65-19":{"renderedLength":4007,"gzipLength":1316,"brotliLength":0,"metaUid":"03763e65-18"},"03763e65-21":{"renderedLength":6362,"gzipLength":1937,"brotliLength":0,"metaUid":"03763e65-20"},"03763e65-23":{"renderedLength":811,"gzipLength":491,"brotliLength":0,"metaUid":"03763e65-22"}},"nodeMetas":{"03763e65-0":{"id":"/src/delegate.ts","moduleParts":{"index.js":"03763e65-1"},"imported":[{"uid":"03763e65-24"}],"importedBy":[{"uid":"03763e65-22"},{"uid":"03763e65-12"},{"uid":"03763e65-8"}]},"03763e65-2":{"id":"/src/hydration-debug.ts","moduleParts":{"index.js":"03763e65-3"},"imported":[],"importedBy":[{"uid":"03763e65-22"},{"uid":"03763e65-12"}]},"03763e65-4":{"id":"/src/devtools.ts","moduleParts":{"index.js":"03763e65-5"},"imported":[],"importedBy":[{"uid":"03763e65-22"},{"uid":"03763e65-10"}]},"03763e65-6":{"id":"/src/nodes.ts","moduleParts":{"index.js":"03763e65-7"},"imported":[{"uid":"03763e65-24"}],"importedBy":[{"uid":"03763e65-12"},{"uid":"03763e65-10"}]},"03763e65-8":{"id":"/src/props.ts","moduleParts":{"index.js":"03763e65-9"},"imported":[{"uid":"03763e65-25"},{"uid":"03763e65-24"},{"uid":"03763e65-0"}],"importedBy":[{"uid":"03763e65-22"},{"uid":"03763e65-12"},{"uid":"03763e65-10"}]},"03763e65-10":{"id":"/src/mount.ts","moduleParts":{"index.js":"03763e65-11"},"imported":[{"uid":"03763e65-25"},{"uid":"03763e65-24"},{"uid":"03763e65-4"},{"uid":"03763e65-6"},{"uid":"03763e65-8"}],"importedBy":[{"uid":"03763e65-22"},{"uid":"03763e65-12"},{"uid":"03763e65-14"},{"uid":"03763e65-20"}]},"03763e65-12":{"id":"/src/hydrate.ts","moduleParts":{"index.js":"03763e65-13"},"imported":[{"uid":"03763e65-25"},{"uid":"03763e65-24"},{"uid":"03763e65-0"},{"uid":"03763e65-2"},{"uid":"03763e65-10"},{"uid":"03763e65-6"},{"uid":"03763e65-8"}],"importedBy":[{"uid":"03763e65-22"}]},"03763e65-14":{"id":"/src/keep-alive.ts","moduleParts":{"index.js":"03763e65-15"},"imported":[{"uid":"03763e65-25"},{"uid":"03763e65-24"},{"uid":"03763e65-10"}],"importedBy":[{"uid":"03763e65-22"}]},"03763e65-16":{"id":"/src/template.ts","moduleParts":{"index.js":"03763e65-17"},"imported":[{"uid":"03763e65-24"}],"importedBy":[{"uid":"03763e65-22"}]},"03763e65-18":{"id":"/src/transition.ts","moduleParts":{"index.js":"03763e65-19"},"imported":[{"uid":"03763e65-25"},{"uid":"03763e65-24"}],"importedBy":[{"uid":"03763e65-22"}]},"03763e65-20":{"id":"/src/transition-group.ts","moduleParts":{"index.js":"03763e65-21"},"imported":[{"uid":"03763e65-25"},{"uid":"03763e65-24"},{"uid":"03763e65-10"}],"importedBy":[{"uid":"03763e65-22"}]},"03763e65-22":{"id":"/src/index.ts","moduleParts":{"index.js":"03763e65-23"},"imported":[{"uid":"03763e65-0"},{"uid":"03763e65-12"},{"uid":"03763e65-2"},{"uid":"03763e65-14"},{"uid":"03763e65-10"},{"uid":"03763e65-8"},{"uid":"03763e65-16"},{"uid":"03763e65-18"},{"uid":"03763e65-20"},{"uid":"03763e65-4"}],"importedBy":[],"isEntry":true},"03763e65-24":{"id":"@pyreon/reactivity","moduleParts":{},"imported":[],"importedBy":[{"uid":"03763e65-0"},{"uid":"03763e65-12"},{"uid":"03763e65-14"},{"uid":"03763e65-10"},{"uid":"03763e65-8"},{"uid":"03763e65-16"},{"uid":"03763e65-18"},{"uid":"03763e65-20"},{"uid":"03763e65-6"}]},"03763e65-25":{"id":"@pyreon/core","moduleParts":{},"imported":[],"importedBy":[{"uid":"03763e65-12"},{"uid":"03763e65-14"},{"uid":"03763e65-10"},{"uid":"03763e65-8"},{"uid":"03763e65-18"},{"uid":"03763e65-20"}]}},"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
|
@@ -65,7 +65,7 @@ function setupDelegation(container) {
|
|
|
65
65
|
let el = e.target;
|
|
66
66
|
while (el && el !== container) {
|
|
67
67
|
const handler = el[prop];
|
|
68
|
-
if (handler) {
|
|
68
|
+
if (typeof handler === "function") {
|
|
69
69
|
batch(() => handler(e));
|
|
70
70
|
if (e.cancelBubble) break;
|
|
71
71
|
}
|
|
@@ -973,8 +973,8 @@ function applyProps(el, props) {
|
|
|
973
973
|
* Bind an event handler (onClick → "click") with batching + delegation support.
|
|
974
974
|
*/
|
|
975
975
|
function applyEventProp(el, key, value) {
|
|
976
|
-
if (
|
|
977
|
-
console.warn(`[Pyreon] Event handler "${key}" received a non-function value (${typeof value}). Expected a function. Did you mean ${key}={() => ...}?`);
|
|
976
|
+
if (typeof value !== "function") {
|
|
977
|
+
if (__DEV__$3) console.warn(`[Pyreon] Event handler "${key}" received a non-function value (${typeof value}). Expected a function. Did you mean ${key}={() => ...}?`);
|
|
978
978
|
return null;
|
|
979
979
|
}
|
|
980
980
|
const eventName = key[2]?.toLowerCase() + key.slice(3);
|
|
@@ -1127,7 +1127,7 @@ function mountChild(child, parent, anchor = null) {
|
|
|
1127
1127
|
};
|
|
1128
1128
|
}
|
|
1129
1129
|
const vnode = child;
|
|
1130
|
-
if (vnode.type === Fragment) return mountChildren(vnode.children, parent, anchor);
|
|
1130
|
+
if (vnode.type === Fragment) return mountChildren(vnode.children ?? [], parent, anchor);
|
|
1131
1131
|
if (vnode.type === ForSymbol) {
|
|
1132
1132
|
const { each, by, children } = vnode.props;
|
|
1133
1133
|
const prevDepth = _elementDepth;
|
|
@@ -1170,11 +1170,11 @@ const VOID_ELEMENTS = new Set([
|
|
|
1170
1170
|
]);
|
|
1171
1171
|
function mountElement(vnode, parent, anchor) {
|
|
1172
1172
|
const el = document.createElement(vnode.type);
|
|
1173
|
-
if (__DEV__$2 && vnode.children
|
|
1173
|
+
if (__DEV__$2 && (vnode.children?.length ?? 0) > 0 && VOID_ELEMENTS.has(vnode.type)) console.warn(`[Pyreon] <${vnode.type}> is a void element and cannot have children. Children passed to void elements will be ignored by the browser.`);
|
|
1174
1174
|
const props = vnode.props;
|
|
1175
1175
|
const propCleanup = props !== EMPTY_PROPS ? applyProps(el, props) : null;
|
|
1176
1176
|
_elementDepth++;
|
|
1177
|
-
const childCleanup = mountChildren(vnode.children, el, null);
|
|
1177
|
+
const childCleanup = mountChildren(vnode.children ?? [], el, null);
|
|
1178
1178
|
_elementDepth--;
|
|
1179
1179
|
parent.insertBefore(el, anchor);
|
|
1180
1180
|
const ref = props.ref;
|
|
@@ -1217,9 +1217,10 @@ function mountComponent(vnode, parent, anchor) {
|
|
|
1217
1217
|
const compId = `${componentName}-${Math.random().toString(36).slice(2, 9)}`;
|
|
1218
1218
|
const parentId = _mountingStack[_mountingStack.length - 1] ?? null;
|
|
1219
1219
|
_mountingStack.push(compId);
|
|
1220
|
-
const
|
|
1220
|
+
const children = vnode.children ?? [];
|
|
1221
|
+
const mergedProps = children.length > 0 && vnode.props.children === void 0 ? {
|
|
1221
1222
|
...vnode.props,
|
|
1222
|
-
children:
|
|
1223
|
+
children: children.length === 1 ? children[0] : children
|
|
1223
1224
|
} : vnode.props;
|
|
1224
1225
|
try {
|
|
1225
1226
|
const result = runWithHooks(vnode.type, mergedProps);
|
|
@@ -1401,7 +1402,7 @@ function hydrateReactiveText(child, domNode, parent, anchor, path) {
|
|
|
1401
1402
|
}
|
|
1402
1403
|
/** Hydrate a VNode (fragment, For, Portal, component, element). */
|
|
1403
1404
|
function hydrateVNode(vnode, domNode, parent, anchor, path) {
|
|
1404
|
-
if (vnode.type === Fragment) return hydrateChildren(vnode.children, domNode, parent, anchor, path);
|
|
1405
|
+
if (vnode.type === Fragment) return hydrateChildren(vnode.children ?? [], domNode, parent, anchor, path);
|
|
1405
1406
|
if (vnode.type === ForSymbol) return [mountChild(vnode, parent, insertMarker(parent, domNode, "pyreon-for")), null];
|
|
1406
1407
|
if (vnode.type === PortalSymbol) return [mountChild(vnode, parent, anchor), domNode];
|
|
1407
1408
|
if (typeof vnode.type === "function") return hydrateComponent(vnode, domNode, parent, anchor, path);
|
|
@@ -1438,7 +1439,7 @@ function hydrateElement(vnode, domNode, parent, anchor, path = "root") {
|
|
|
1438
1439
|
const propCleanup = applyProps(el, vnode.props);
|
|
1439
1440
|
if (propCleanup) cleanups.push(propCleanup);
|
|
1440
1441
|
const firstChild = firstReal(el.firstChild);
|
|
1441
|
-
const [childCleanup] = hydrateChildren(vnode.children, firstChild, el, null, elPath);
|
|
1442
|
+
const [childCleanup] = hydrateChildren(vnode.children ?? [], firstChild, el, null, elPath);
|
|
1442
1443
|
cleanups.push(childCleanup);
|
|
1443
1444
|
const ref = vnode.props.ref;
|
|
1444
1445
|
if (ref) if (typeof ref === "function") ref(el);
|
|
@@ -1475,9 +1476,9 @@ function hydrateComponent(vnode, domNode, parent, anchor, path = "root") {
|
|
|
1475
1476
|
const mountCleanups = [];
|
|
1476
1477
|
let nextDom = domNode;
|
|
1477
1478
|
const componentName = vnode.type.name || "Anonymous";
|
|
1478
|
-
const mergedProps = vnode.children.length > 0 && vnode.props.children === void 0 ? {
|
|
1479
|
+
const mergedProps = (vnode.children ?? []).length > 0 && vnode.props.children === void 0 ? {
|
|
1479
1480
|
...vnode.props,
|
|
1480
|
-
children: vnode.children.length === 1 ? vnode.children[0] : vnode.children
|
|
1481
|
+
children: (vnode.children ?? []).length === 1 ? (vnode.children ?? [])[0] : vnode.children ?? []
|
|
1481
1482
|
} : vnode.props;
|
|
1482
1483
|
let result;
|
|
1483
1484
|
try {
|
|
@@ -1578,6 +1579,7 @@ function KeepAlive(props) {
|
|
|
1578
1579
|
let childMounted = false;
|
|
1579
1580
|
onMount(() => {
|
|
1580
1581
|
const container = containerRef.current;
|
|
1582
|
+
if (!container) return;
|
|
1581
1583
|
const e = effect(() => {
|
|
1582
1584
|
const isActive = props.active?.() ?? true;
|
|
1583
1585
|
if (!childMounted) {
|