@b9g/crank 0.7.3 → 0.7.4

package/crank.d.ts

@@ -243,6 +243,7 @@ export interface RenderAdapter<TNode, TScope, TRoot extends TNode | undefined =
         tagName: string;
         props: Record<string, any>;
         scope: TScope | undefined;
+        root: TRoot | undefined;
     }): TNode;
     /**
      * Adopts existing nodes during hydration.
@@ -274,6 +275,7 @@ export interface RenderAdapter<TNode, TScope, TRoot extends TNode | undefined =
         props: Record<string, any>;
         node: TNode | undefined;
         scope: TScope | undefined;
+        root: TRoot | undefined;
     }): Array<TNode> | undefined;
     /**
      * Creates or updates a text node.
@@ -303,6 +305,7 @@ export interface RenderAdapter<TNode, TScope, TRoot extends TNode | undefined =
         scope: TScope | undefined;
         oldNode: TNode | undefined;
         hydrationNodes: Array<TNode> | undefined;
+        root: TRoot | undefined;
     }): TNode;
     /**
      * Computes scope context for child elements.
@@ -332,6 +335,7 @@ export interface RenderAdapter<TNode, TScope, TRoot extends TNode | undefined =
         tagName: string;
         props: Record<string, any>;
         scope: TScope | undefined;
+        root: TRoot | undefined;
     }): TScope | undefined;
     /**
      * Handles raw values (strings or nodes) that bypass normal element processing.
@@ -360,6 +364,7 @@ export interface RenderAdapter<TNode, TScope, TRoot extends TNode | undefined =
         value: string | TNode;
         scope: TScope | undefined;
         hydrationNodes: Array<TNode> | undefined;
+        root: TRoot | undefined;
     }): ElementValue<TNode>;
     /**
      * Updates a node's properties.
@@ -400,6 +405,7 @@ export interface RenderAdapter<TNode, TScope, TRoot extends TNode | undefined =
         props: Record<string, any>;
         oldProps: Record<string, any> | undefined;
         scope: TScope | undefined;
+        root: TRoot | undefined;
         copyProps: Set<string> | undefined;
         isHydrating: boolean;
         quietProps: Set<string> | undefined;
@@ -437,6 +443,7 @@ export interface RenderAdapter<TNode, TScope, TRoot extends TNode | undefined =
         props: Record<string, any>;
         children: Array<TNode>;
         oldProps: Record<string, any> | undefined;
+        root: TRoot | undefined;
     }): void;
     /**
      * Removes a node from its parent.
@@ -464,6 +471,7 @@ export interface RenderAdapter<TNode, TScope, TRoot extends TNode | undefined =
         node: TNode;
         parentNode: TNode;
         isNested: boolean;
+        root: TRoot | undefined;
     }): void;
     /**
      * Reads the final rendered value from an ElementValue.

package/crank.js

@@ -398,6 +398,7 @@ function getRootRetainer(renderer, bridge, { children, root, hydrate, }) {
             tagName: getTagName(Portal),
             props: stripSpecialProps(ret.el.props),
             scope: undefined,
+            root,
         });
         // remember that typeof null === "object"
         if (typeof root === "object" && root !== null && children != null) {
@@ -420,32 +421,32 @@ function renderRoot(adapter, root, ret, children) {
     const schedulePromises = [];
     if (isPromiseLike(diff)) {
         return diff.then(() => {
-            commit(adapter, ret, ret, ret.ctx, ret.scope, 0, schedulePromises, undefined);
+            commit(adapter, ret, ret, ret.ctx, ret.scope, root, 0, schedulePromises, undefined);
             if (schedulePromises.length > 0) {
                 return Promise.all(schedulePromises).then(() => {
                     if (typeof root !== "object" || root === null) {
-                        unmount(adapter, ret, ret.ctx, ret, false);
+                        unmount(adapter, ret, ret.ctx, root, ret, false);
                     }
                     return adapter.read(unwrap(getChildValues(ret)));
                 });
             }
             if (typeof root !== "object" || root === null) {
-                unmount(adapter, ret, ret.ctx, ret, false);
+                unmount(adapter, ret, ret.ctx, root, ret, false);
             }
             return adapter.read(unwrap(getChildValues(ret)));
         });
     }
-    commit(adapter, ret, ret, ret.ctx, ret.scope, 0, schedulePromises, undefined);
+    commit(adapter, ret, ret, ret.ctx, ret.scope, root, 0, schedulePromises, undefined);
     if (schedulePromises.length > 0) {
         return Promise.all(schedulePromises).then(() => {
             if (typeof root !== "object" || root === null) {
-                unmount(adapter, ret, ret.ctx, ret, false);
+                unmount(adapter, ret, ret.ctx, root, ret, false);
             }
             return adapter.read(unwrap(getChildValues(ret)));
         });
     }
     if (typeof root !== "object" || root === null) {
-        unmount(adapter, ret, ret.ctx, ret, false);
+        unmount(adapter, ret, ret.ctx, root, ret, false);
     }
     return adapter.read(unwrap(getChildValues(ret)));
 }
@@ -695,11 +696,12 @@ function diffHost(adapter, root, ctx, scope, ret) {
             tagName: getTagName(tag),
             props: el.props,
             scope,
+            root,
         });
     }
     return diffChildren(adapter, root, ret, ctx, scope, ret, ret.el.props.children);
 }
-function commit(adapter, host, ret, ctx, scope, index, schedulePromises, hydrationNodes) {
+function commit(adapter, host, ret, ctx, scope, root, index, schedulePromises, hydrationNodes) {
     if (getFlag(ret, IsCopied) && getFlag(ret, DidCommit)) {
         return getValue(ret);
     }
@@ -732,19 +734,19 @@ function commit(adapter, host, ret, ctx, scope, index, schedulePromises, hydrati
     }
     else {
         if (tag === Fragment) {
-            value = commitChildren(adapter, host, ctx, scope, ret, index, schedulePromises, hydrationNodes);
+            value = commitChildren(adapter, host, ctx, scope, root, ret, index, schedulePromises, hydrationNodes);
         }
         else if (tag === Text) {
-            value = commitText(adapter, ret, el, scope, hydrationNodes);
+            value = commitText(adapter, ret, el, scope, hydrationNodes, root);
         }
         else if (tag === Raw) {
-            value = commitRaw(adapter, host, ret, scope, hydrationNodes);
+            value = commitRaw(adapter, host, ret, scope, hydrationNodes, root);
         }
         else {
-            value = commitHost(adapter, ret, ctx, schedulePromises, hydrationNodes);
+            value = commitHost(adapter, ret, ctx, root, schedulePromises, hydrationNodes);
         }
         if (ret.fallback) {
-            unmount(adapter, host, ctx, ret.fallback, false);
+            unmount(adapter, host, ctx, root, ret.fallback, false);
             ret.fallback = undefined;
         }
     }
@@ -762,7 +764,7 @@ function commit(adapter, host, ret, ctx, scope, index, schedulePromises, hydrati
     }
     return value;
 }
-function commitChildren(adapter, host, ctx, scope, parent, index, schedulePromises, hydrationNodes) {
+function commitChildren(adapter, host, ctx, scope, root, parent, index, schedulePromises, hydrationNodes) {
     let values = [];
     for (let i = 0, children = wrap(parent.children); i < children.length; i++) {
         let child = children[i];
@@ -785,6 +787,7 @@ function commitChildren(adapter, host, ctx, scope, parent, index, schedulePromis
                         node,
                         parentNode: host.value,
                         isNested: false,
+                        root,
                     });
                 }
             }
@@ -844,7 +847,7 @@ function commitChildren(adapter, host, ctx, scope, parent, index, schedulePromis
             schedulePromises.push(safeRace(schedulePromises1));
         }
         if (child) {
-            const value = commit(adapter, host, child, ctx, scope, index, schedulePromises, hydrationNodes);
+            const value = commit(adapter, host, child, ctx, scope, root, index, schedulePromises, hydrationNodes);
             if (Array.isArray(value)) {
                 for (let j = 0; j < value.length; j++) {
                     values.push(value[j]);
@@ -860,7 +863,7 @@ function commitChildren(adapter, host, ctx, scope, parent, index, schedulePromis
     if (parent.graveyard) {
         for (let i = 0; i < parent.graveyard.length; i++) {
             const child = parent.graveyard[i];
-            unmount(adapter, host, ctx, child, false);
+            unmount(adapter, host, ctx, root, child, false);
         }
         parent.graveyard = undefined;
     }
@@ -871,17 +874,18 @@ function commitChildren(adapter, host, ctx, scope, parent, index, schedulePromis
     }
     return values;
 }
-function commitText(adapter, ret, el, scope, hydrationNodes) {
+function commitText(adapter, ret, el, scope, hydrationNodes, root) {
     const value = adapter.text({
         value: el.props.value,
         scope,
         oldNode: ret.value,
         hydrationNodes,
+        root,
     });
     ret.value = value;
     return value;
 }
-function commitRaw(adapter, host, ret, scope, hydrationNodes) {
+function commitRaw(adapter, host, ret, scope, hydrationNodes, root) {
     if (!ret.oldProps || ret.oldProps.value !== ret.el.props.value) {
         const oldNodes = wrap(ret.value);
         for (let i = 0; i < oldNodes.length; i++) {
@@ -890,18 +894,20 @@ function commitRaw(adapter, host, ret, scope, hydrationNodes) {
                 node: oldNode,
                 parentNode: host.value,
                 isNested: false,
+                root,
             });
         }
         ret.value = adapter.raw({
             value: ret.el.props.value,
             scope,
             hydrationNodes,
+            root,
         });
     }
     ret.oldProps = stripSpecialProps(ret.el.props);
     return ret.value;
 }
-function commitHost(adapter, ret, ctx, schedulePromises, hydrationNodes) {
+function commitHost(adapter, ret, ctx, root, schedulePromises, hydrationNodes) {
     if (getFlag(ret, IsCopied) && getFlag(ret, DidCommit)) {
         return getValue(ret);
     }
@@ -954,6 +960,7 @@ function commitHost(adapter, ret, ctx, schedulePromises, hydrationNodes) {
                     node,
                     props,
                     scope,
+                    root,
                 });
                 if (childHydrationNodes) {
                     for (let i = 0; i < childHydrationNodes.length; i++) {
@@ -961,6 +968,7 @@ function commitHost(adapter, ret, ctx, schedulePromises, hydrationNodes) {
                             node: childHydrationNodes[i],
                             parentNode: node,
                             isNested: false,
+                            root,
                         });
                     }
                 }
@@ -989,6 +997,7 @@ function commitHost(adapter, ret, ctx, schedulePromises, hydrationNodes) {
                     node: nextChild,
                     props,
                     scope,
+                    root,
                 });
                 if (childHydrationNodes) {
                     node = nextChild;
@@ -997,6 +1006,7 @@ function commitHost(adapter, ret, ctx, schedulePromises, hydrationNodes) {
                             node: childHydrationNodes[i],
                             parentNode: node,
                             isNested: false,
+                            root,
                         });
                     }
                 }
@@ -1011,6 +1021,7 @@ function commitHost(adapter, ret, ctx, schedulePromises, hydrationNodes) {
                     tagName: getTagName(tag),
                     props,
                     scope,
+                    root,
                 });
             }
             ret.value = node;
@@ -1024,13 +1035,14 @@ function commitHost(adapter, ret, ctx, schedulePromises, hydrationNodes) {
             props,
             oldProps,
             scope,
+            root,
             copyProps,
             isHydrating: !!childHydrationNodes,
             quietProps,
         });
     }
     if (!copyChildren) {
-        const children = commitChildren(adapter, ret, ctx, scope, ret, 0, schedulePromises, hydrationMetaProp && !hydrationMetaProp.includes("children")
+        const children = commitChildren(adapter, ret, ctx, scope, tag === Portal ? node : root, ret, 0, schedulePromises, hydrationMetaProp && !hydrationMetaProp.includes("children")
             ? undefined
             : childHydrationNodes);
         adapter.arrange({
@@ -1040,6 +1052,7 @@ function commitHost(adapter, ret, ctx, schedulePromises, hydrationNodes) {
             props,
             children,
             oldProps,
+            root,
         });
     }
     ret.oldProps = props;
@@ -1140,10 +1153,10 @@ function flush(adapter, root, initiator) {
         }
     }
 }
-function unmount(adapter, host, ctx, ret, isNested) {
+function unmount(adapter, host, ctx, root, ret, isNested) {
     // TODO: set the IsUnmounted flag consistently for all retainers
     if (ret.fallback) {
-        unmount(adapter, host, ctx, ret.fallback, isNested);
+        unmount(adapter, host, ctx, root, ret.fallback, isNested);
         ret.fallback = undefined;
     }
     if (getFlag(ret, IsResurrecting)) {
@@ -1154,7 +1167,7 @@ function unmount(adapter, host, ctx, ret, isNested) {
             const lingerers = ret.lingerers[i];
             if (lingerers) {
                 for (const lingerer of lingerers) {
-                    unmount(adapter, host, ctx, lingerer, isNested);
+                    unmount(adapter, host, ctx, root, lingerer, isNested);
                 }
             }
         }
@@ -1164,16 +1177,16 @@ function unmount(adapter, host, ctx, ret, isNested) {
         unmountComponent(ret.ctx, isNested);
     }
     else if (ret.el.tag === Fragment) {
-        unmountChildren(adapter, host, ctx, ret, isNested);
+        unmountChildren(adapter, host, ctx, root, ret, isNested);
     }
     else if (ret.el.tag === Portal) {
-        unmountChildren(adapter, ret, ctx, ret, false);
+        unmountChildren(adapter, ret, ctx, ret.value, ret, false);
         if (ret.value != null) {
             adapter.finalize(ret.value);
         }
     }
     else {
-        unmountChildren(adapter, ret, ctx, ret, true);
+        unmountChildren(adapter, ret, ctx, root, ret, true);
         if (getFlag(ret, DidCommit)) {
             if (ctx) {
                 // Remove the value from every context which shares the same host.
@@ -1183,22 +1196,23 @@ function unmount(adapter, host, ctx, ret, isNested) {
                 node: ret.value,
                 parentNode: host.value,
                 isNested,
+                root,
             });
         }
     }
 }
-function unmountChildren(adapter, host, ctx, ret, isNested) {
+function unmountChildren(adapter, host, ctx, root, ret, isNested) {
     if (ret.graveyard) {
         for (let i = 0; i < ret.graveyard.length; i++) {
             const child = ret.graveyard[i];
-            unmount(adapter, host, ctx, child, isNested);
+            unmount(adapter, host, ctx, root, child, isNested);
         }
         ret.graveyard = undefined;
     }
     for (let i = 0, children = wrap(ret.children); i < children.length; i++) {
         const child = children[i];
         if (typeof child === "object") {
-            unmount(adapter, host, ctx, child, isNested);
+            unmount(adapter, host, ctx, root, child, isNested);
         }
     }
 }
@@ -1992,7 +2006,7 @@ function commitComponent(ctx, schedulePromises, hydrationNodes) {
         });
         return getValue(ctx.ret);
     }
-    const values = commitChildren(ctx.adapter, ctx.host, ctx, ctx.scope, ctx.ret, ctx.index, schedulePromises, hydrationNodes);
+    const values = commitChildren(ctx.adapter, ctx.host, ctx, ctx.scope, ctx.root, ctx.ret, ctx.index, schedulePromises, hydrationNodes);
     if (getFlag(ctx.ret, IsUnmounted)) {
         return;
     }
@@ -2016,7 +2030,7 @@ function commitComponent(ctx, schedulePromises, hydrationNodes) {
                 setFlag(ctx.ret, IsScheduling, wasScheduling);
                 propagateComponent(ctx);
                 if (ctx.ret.fallback) {
-                    unmount(ctx.adapter, ctx.host, ctx.parent, ctx.ret.fallback, false);
+                    unmount(ctx.adapter, ctx.host, ctx.parent, ctx.root, ctx.ret.fallback, false);
                 }
                 ctx.ret.fallback = undefined;
             });
@@ -2042,7 +2056,7 @@ function commitComponent(ctx, schedulePromises, hydrationNodes) {
             propagateComponent(ctx);
         }
         if (ctx.ret.fallback) {
-            unmount(ctx.adapter, ctx.host, ctx.parent, ctx.ret.fallback, false);
+            unmount(ctx.adapter, ctx.host, ctx.parent, ctx.root, ctx.ret.fallback, false);
         }
         ctx.ret.fallback = undefined;
         setFlag(ctx.ret, IsUpdating, false);
@@ -2108,6 +2122,7 @@ function propagateComponent(ctx) {
         props,
         oldProps: props,
         children: hostChildren,
+        root: ctx.root,
     });
     flush(ctx.adapter, ctx.root, ctx);
 }
@@ -2162,7 +2177,7 @@ async function unmountComponent(ctx, isNested) {
         ctx.schedule = undefined;
     }
     clearEventListeners(ctx.ctx);
-    unmountChildren(ctx.adapter, ctx.host, ctx, ctx.ret, isNested);
+    unmountChildren(ctx.adapter, ctx.host, ctx, ctx.root, ctx.ret, isNested);
     if (didLinger) {
         // If we lingered, we call finalize to ensure rendering is finalized
         if (ctx.root != null) {