minimal-preact-measure

measure.js

import { options } from "preact";

function getComponentName(vnode) {
  return vnode.type.displayName || vnode.name || "Component";
}

let prevBeforeDiff = (options._diff = options.__b);
options._diff = options.__b = (vnode) => {
  if (typeof vnode.type === "function") {
    const name = getComponentName(vnode);
    performance.mark(name);
  }
  if (prevBeforeDiff) prevBeforeDiff(vnode);
};

let prevDiffed = options.diffed;
options.diffed = options.__b = (vnode) => {
  if (typeof vnode.type === "function") {
    const name = getComponentName(vnode);

    const start = `${name}_diff`;
    const end = `${name}_diffed`;
    if (performance.getEntriesByName(start).length > 0) {
      performance.mark(end);
      performance.measure(name, start, end);
    }
    performance.clearMarks(start);
    performance.clearMarks(end);
    performance.clearMeasures(name);
  }

  if (prevDiffed) prevDiffed(vnode);
};