@b9g/crank 0.7.7 → 0.7.8

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@b9g/crank",
-  "version": "0.7.7",
+  "version": "0.7.8",
   "repository": {
     "type": "git",
     "url": "https://github.com/bikeshaving/crank.git"

package/umd.js

@@ -250,6 +250,24 @@
 	    delegates.clear();
 	}
 
+	const supportsUserTiming = typeof performance !== "undefined" && typeof performance.mark === "function";
+	function markStart(label) {
+	    if (supportsUserTiming) {
+	        performance.mark("⚙ " + label);
+	    }
+	}
+	function measureMark(label) {
+	    if (supportsUserTiming) {
+	        const name = "⚙ " + label;
+	        try {
+	            performance.measure(name, name);
+	        }
+	        catch (_) {
+	            // Mark may not exist
+	        }
+	        performance.clearMarks(name);
+	    }
+	}
 	function wrap(value) {
 	    return value === undefined ? [] : Array.isArray(value) ? value : [value];
 	}
@@ -770,11 +788,16 @@
 	    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) {
@@ -789,7 +812,10 @@
 	            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) {
@@ -1891,6 +1917,7 @@
 	        if (getFlag(ctx.ret, IsScheduling)) {
 	            setFlag(ctx.ret, IsSchedulingRefresh);
 	        }
+	        const commitLabel = "commit (" + getTagName(ctx.ret.el.tag) + ")";
 	        let diff;
 	        const schedulePromises = [];
 	        try {
@@ -1898,7 +1925,12 @@
 	            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(() => {
@@ -1928,7 +1960,9 @@
 	                })
 	                    .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));
@@ -2158,11 +2192,13 @@
 	    }
 	    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) {
@@ -2177,6 +2213,7 @@
 	        }
 	        else if (!isPromiseLike(returned)) {
 	            // sync function component
+	            measureMark(tagName);
 	            return [
 	                undefined,
 	                diffComponentChildren(ctx, returned, false),
@@ -2185,6 +2222,7 @@
 	        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) => {
@@ -2198,6 +2236,7 @@
 	    if (initial) {
 	        try {
 	            setFlag(ctx.ret, IsExecuting);
+	            markStart(tagName);
 	            iteration = ctx.iterator.next();
 	        }
 	        catch (err) {
@@ -2220,7 +2259,9 @@
 	            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);
@@ -2230,6 +2271,9 @@
 	                setFlag(ctx.ret, IsExecuting, false);
 	            }
 	        }
+	        else {
+	            measureMark(tagName);
+	        }
 	        if (isPromiseLike(iteration)) {
 	            throw new Error("Mixed generator component");
 	        }
@@ -2252,6 +2296,7 @@
 	    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];
@@ -2264,6 +2309,7 @@
 	                try {
 	                    setFlag(ctx.ret, IsExecuting);
 	                    const oldResult = ctx.adapter.read(getValue(ctx.ret));
+	                    markStart(tagName);
 	                    iteration = ctx.iterator.next(oldResult);
 	                }
 	                catch (err) {
@@ -2277,6 +2323,7 @@
 	            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
@@ -2671,7 +2718,7 @@
 	        }
 	    }
 	    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 = []);