@b9g/crank 0.7.7 → 0.7.9

package/crank.d.ts

@@ -1,4 +1,5 @@
 import { CustomEventTarget } from "./event-target.js";
+import { setProfiling } from "./_utils.js";
 /**
  * A type which represents all valid values for an element tag.
  */
@@ -726,6 +727,7 @@ declare global {
  * Some JSX tools expect things like createElement/Fragment to be defined on
  * the default export. Prefer using the named exports directly.
  */
+export { setProfiling };
 declare const _default: {
     createElement: typeof createElement;
     Fragment: string;

package/crank.js

@@ -1,6 +1,7 @@
 /// <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 { isPromiseLike, unwrap, wrap, arrayify, safeRace, markStart, measureMark, isIteratorLike } from './_utils.js';
+export { setProfiling } from './_utils.js';
 
 const NOOP = () => { };
 function getTagName(tag) {
@@ -425,11 +426,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 +450,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 +1555,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 +1563,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 +1598,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 +1830,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 +1851,7 @@ function runComponent(ctx) {
         }
         else if (!isPromiseLike(returned)) {
             // sync function component
+            measureMark(tagName);
             return [
                 undefined,
                 diffComponentChildren(ctx, returned, false),
@@ -1840,6 +1860,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 +1874,7 @@ function runComponent(ctx) {
     if (initial) {
         try {
             setFlag(ctx.ret, IsExecuting);
+            markStart(tagName);
             iteration = ctx.iterator.next();
         }
         catch (err) {
@@ -1875,7 +1897,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 +1909,9 @@ function runComponent(ctx) {
                 setFlag(ctx.ret, IsExecuting, false);
             }
         }
+        else {
+            measureMark(tagName);
+        }
         if (isPromiseLike(iteration)) {
             throw new Error("Mixed generator component");
         }
@@ -1907,6 +1934,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 +1947,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 +1961,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 +2356,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 = []);
@@ -2503,12 +2533,6 @@ function propagateError(ctx, err, schedulePromises) {
     }
     commitComponent(parent, schedulePromises);
 }
-/**
- * A re-export of some Crank exports as the default export.
- *
- * Some JSX tools expect things like createElement/Fragment to be defined on
- * the default export. Prefer using the named exports directly.
- */
 var crank = { createElement, Fragment };
 
 export { Context, Copy, Element, Fragment, Portal, Raw, Renderer, Text, cloneElement, createElement, crank as default, isElement };