@b9g/crank 0.7.6 → 0.7.8

package/crank.js

@@ -1,6 +1,6 @@
 /// <reference types="crank.d.ts" />
 import { removeEventTargetDelegates, addEventTargetDelegates, clearEventListeners, CustomEventTarget } from './event-target.js';
-import { isPromiseLike, unwrap, wrap, arrayify, safeRace, isIteratorLike } from './_utils.js';
+import { markStart, isPromiseLike, measureMark, unwrap, wrap, arrayify, safeRace, isIteratorLike } from './_utils.js';
 
 const NOOP = () => { };
 function getTagName(tag) {
@@ -425,11 +425,16 @@ function getRootRetainer(renderer, bridge, { children, root, hydrate, }) {
     return ret;
 }
 function renderRoot(adapter, root, ret, children) {
+    const commitLabel = "commit (" + getTagName(ret.el.tag) + ")";
+    markStart("diff");
     const diff = diffChildren(adapter, root, ret, ret.ctx, ret.scope, ret, children);
     const schedulePromises = [];
     if (isPromiseLike(diff)) {
         return diff.then(() => {
+            measureMark("diff");
+            markStart(commitLabel);
             commit(adapter, ret, ret, ret.ctx, ret.scope, root, 0, schedulePromises, undefined);
+            measureMark(commitLabel);
             if (schedulePromises.length > 0) {
                 return Promise.all(schedulePromises).then(() => {
                     if (typeof root !== "object" || root === null) {
@@ -444,7 +449,10 @@ function renderRoot(adapter, root, ret, children) {
             return adapter.read(unwrap(getChildValues(ret)));
         });
     }
+    measureMark("diff");
+    markStart(commitLabel);
     commit(adapter, ret, ret, ret.ctx, ret.scope, root, 0, schedulePromises, undefined);
+    measureMark(commitLabel);
     if (schedulePromises.length > 0) {
         return Promise.all(schedulePromises).then(() => {
             if (typeof root !== "object" || root === null) {
@@ -1546,6 +1554,7 @@ class Context extends CustomEventTarget {
         if (getFlag(ctx.ret, IsScheduling)) {
             setFlag(ctx.ret, IsSchedulingRefresh);
         }
+        const commitLabel = "commit (" + getTagName(ctx.ret.el.tag) + ")";
         let diff;
         const schedulePromises = [];
         try {
@@ -1553,7 +1562,12 @@ class Context extends CustomEventTarget {
             diff = enqueueComponent(ctx);
             if (isPromiseLike(diff)) {
                 return diff
-                    .then(() => ctx.adapter.read(commitComponent(ctx, schedulePromises)))
+                    .then(() => {
+                    markStart(commitLabel);
+                    const value = commitComponent(ctx, schedulePromises);
+                    measureMark(commitLabel);
+                    return ctx.adapter.read(value);
+                })
                     .then((result) => {
                     if (schedulePromises.length) {
                         return Promise.all(schedulePromises).then(() => {
@@ -1583,7 +1597,9 @@ class Context extends CustomEventTarget {
                 })
                     .finally(() => setFlag(ctx.ret, IsRefreshing, false));
             }
+            markStart(commitLabel);
             const result = ctx.adapter.read(commitComponent(ctx, schedulePromises));
+            measureMark(commitLabel);
             if (schedulePromises.length) {
                 return Promise.all(schedulePromises).then(() => {
                     return ctx.adapter.read(getValue(ctx.ret));
@@ -1813,11 +1829,13 @@ function runComponent(ctx) {
     }
     const ret = ctx.ret;
     const initial = !ctx.iterator;
+    const tagName = getTagName(ret.el.tag);
     if (initial) {
         setFlag(ctx.ret, IsExecuting);
         clearEventListeners(ctx.ctx);
         let returned;
         try {
+            markStart(tagName);
             returned = ret.el.tag.call(ctx.ctx, ret.el.props, ctx.ctx);
         }
         catch (err) {
@@ -1832,6 +1850,7 @@ function runComponent(ctx) {
         }
         else if (!isPromiseLike(returned)) {
             // sync function component
+            measureMark(tagName);
             return [
                 undefined,
                 diffComponentChildren(ctx, returned, false),
@@ -1840,6 +1859,7 @@ function runComponent(ctx) {
         else {
             // async function component
             const returned1 = returned instanceof Promise ? returned : Promise.resolve(returned);
+            returned1.then(() => measureMark(tagName), () => measureMark(tagName));
             return [
                 returned1.catch(NOOP),
                 returned1.then((returned) => diffComponentChildren(ctx, returned, false), (err) => {
@@ -1853,6 +1873,7 @@ function runComponent(ctx) {
     if (initial) {
         try {
             setFlag(ctx.ret, IsExecuting);
+            markStart(tagName);
             iteration = ctx.iterator.next();
         }
         catch (err) {
@@ -1875,7 +1896,9 @@ function runComponent(ctx) {
             try {
                 setFlag(ctx.ret, IsExecuting);
                 const oldResult = ctx.adapter.read(getValue(ctx.ret));
+                markStart(tagName);
                 iteration = ctx.iterator.next(oldResult);
+                measureMark(tagName);
             }
             catch (err) {
                 setFlag(ctx.ret, IsErrored);
@@ -1885,6 +1908,9 @@ function runComponent(ctx) {
                 setFlag(ctx.ret, IsExecuting, false);
             }
         }
+        else {
+            measureMark(tagName);
+        }
         if (isPromiseLike(iteration)) {
             throw new Error("Mixed generator component");
         }
@@ -1907,6 +1933,7 @@ function runComponent(ctx) {
     else {
         if (getFlag(ctx.ret, IsInForAwaitOfLoop)) {
             // initializes the async generator loop
+            measureMark(tagName);
             pullComponent(ctx, iteration);
             const block = resumePropsAsyncIterator(ctx);
             return [block, ctx.pull && ctx.pull.diff];
@@ -1919,6 +1946,7 @@ function runComponent(ctx) {
                 try {
                     setFlag(ctx.ret, IsExecuting);
                     const oldResult = ctx.adapter.read(getValue(ctx.ret));
+                    markStart(tagName);
                     iteration = ctx.iterator.next(oldResult);
                 }
                 catch (err) {
@@ -1932,6 +1960,7 @@ function runComponent(ctx) {
             if (!isPromiseLike(iteration)) {
                 throw new Error("Mixed generator component");
             }
+            iteration.then(() => measureMark(tagName), () => measureMark(tagName));
             const diff = iteration.then((iteration) => {
                 if (getFlag(ctx.ret, IsInForAwaitOfLoop)) {
                     // We have entered a for await...of loop, so we start pulling
@@ -2326,7 +2355,7 @@ async function unmountComponent(ctx, isNested) {
         }
     }
     let didLinger = false;
-    if (!isNested && cleanupPromises && getChildValues(ctx.ret).length > 0) {
+    if (!isNested && cleanupPromises) {
         didLinger = true;
         const index = ctx.index;
         const lingerers = ctx.host.lingerers || (ctx.host.lingerers = []);