├── .gitignore
├── src
├── vite.env.d.ts
├── demo
│ ├── index.html
│ ├── index.tsx
│ ├── instructions.tsx
│ └── hackernews.tsx
└── index.ts
├── assets
└── image.png
├── tsconfig.json
├── vite.config.demo.js
├── vite.config.js
├── .github
└── workflows
│ └── deploy_pages.yml
├── LICENSE
├── package.json
├── README.md
└── pnpm-lock.yaml
/.gitignore:
--------------------------------------------------------------------------------
1 | node_modules
2 | /dist
3 | /demo
4 |
--------------------------------------------------------------------------------
/src/vite.env.d.ts:
--------------------------------------------------------------------------------
1 | ///
2 |
--------------------------------------------------------------------------------
/assets/image.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/KrofDrakula/preact-perf-profiler/HEAD/assets/image.png
--------------------------------------------------------------------------------
/tsconfig.json:
--------------------------------------------------------------------------------
1 | {
2 | "compilerOptions": {
3 | "target": "ESNext",
4 | "lib": ["DOM", "ESNext"],
5 | "module": "ESNext",
6 | "moduleResolution": "NodeNext",
7 | "jsx": "react-jsx",
8 | "jsxImportSource": "preact",
9 | "strict": true
10 | }
11 | }
12 |
--------------------------------------------------------------------------------
/src/demo/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 | Preact Perf Profiler example
6 |
7 |
8 |
9 |
10 |
11 |
12 |
--------------------------------------------------------------------------------
/vite.config.demo.js:
--------------------------------------------------------------------------------
1 | import { resolve } from "node:path";
2 | import { defineConfig } from "vite";
3 |
4 | export default defineConfig({
5 | esbuild: {
6 | jsxImportSource: "preact",
7 | },
8 | build: {
9 | outDir: resolve(__dirname, "demo"),
10 | sourcemap: true,
11 | target: "esnext",
12 | emptyOutDir: true,
13 | },
14 | root: "./src/demo",
15 | });
16 |
--------------------------------------------------------------------------------
/src/demo/index.tsx:
--------------------------------------------------------------------------------
1 | import { render } from "preact";
2 | import { track } from "../index.js";
3 | import Hackernews from "./hackernews.js";
4 | import Instructions from "./instructions.js";
5 |
6 | const root = document.getElementById("app")!;
7 |
8 | track(Hackernews);
9 |
10 | render(
11 | <>
12 |
13 |
14 | ,
15 | root
16 | );
17 |
--------------------------------------------------------------------------------
/vite.config.js:
--------------------------------------------------------------------------------
1 | import { resolve } from "node:path";
2 | import { defineConfig } from "vite";
3 | import dts from "vite-plugin-dts";
4 |
5 | export default defineConfig({
6 | build: {
7 | lib: {
8 | entry: resolve(__dirname, "src/index.ts"),
9 | name: "PreactPerfProfiler",
10 | fileName: "index",
11 | },
12 | sourcemap: true,
13 | target: "esnext",
14 | emptyOutDir: true,
15 | reportCompressedSize: true,
16 | rollupOptions: {
17 | external: ["preact"],
18 | },
19 | },
20 | plugins: [dts({ entryRoot: "src" })],
21 | });
22 |
--------------------------------------------------------------------------------
/.github/workflows/deploy_pages.yml:
--------------------------------------------------------------------------------
1 | name: deploy-pages
2 | run-name: Deploy demo to GitHub Pages
3 | on:
4 | push:
5 | branches:
6 | - master
7 | jobs:
8 | build-pages:
9 | runs-on: ubuntu-latest
10 | steps:
11 | - uses: actions/checkout@v3
12 | - uses: pnpm/action-setup@v2
13 | with:
14 | version: "latest"
15 | - uses: actions/setup-node@v3
16 | with:
17 | node-version: "18.x"
18 | cache: "pnpm"
19 | - run: pnpm install
20 | - run: pnpm run build-demo --base=/preact-perf-profiler/
21 | - uses: actions/upload-pages-artifact@v1
22 | with:
23 | path: "demo"
24 | deploy-pages:
25 | runs-on: ubuntu-latest
26 | needs: build-pages
27 | permissions:
28 | pages: write # to deploy to Pages
29 | id-token: write # to verify the deployment originates from an appropriate source
30 | steps:
31 | - uses: actions/deploy-pages@v2
32 |
--------------------------------------------------------------------------------
/src/demo/instructions.tsx:
--------------------------------------------------------------------------------
1 | export default () => (
2 | <>
3 |
4 | preact-perf-profiler demo
5 |
6 |
7 |
11 | github.com/krofdrakula/preact-perf-profiler
12 |
13 |
14 |
15 | This demo loads top stories from{" "}
16 |
17 | Hackernews
18 | {" "}
19 | and renders a table. It tracks this component's rendering performance by
20 | injecting performance.mark() and{" "}
21 | performance.measure() calls during component rendering to
22 | mark locations on the Dev Tools timeline.
23 |
24 |
25 | To see how the table component performs on this page, record a timeline in
26 | the Performance tab in Dev Tools and you should be able to see timings in
27 | the User Timings section.
28 |
29 |
30 | );
31 |
--------------------------------------------------------------------------------
/LICENSE:
--------------------------------------------------------------------------------
1 | MIT License
2 |
3 | Copyright (c) 2016 Klemen Slavič
4 |
5 | Permission is hereby granted, free of charge, to any person obtaining a copy
6 | of this software and associated documentation files (the "Software"), to deal
7 | in the Software without restriction, including without limitation the rights
8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
9 | copies of the Software, and to permit persons to whom the Software is
10 | furnished to do so, subject to the following conditions:
11 |
12 | The above copyright notice and this permission notice shall be included in all
13 | copies or substantial portions of the Software.
14 |
15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21 | SOFTWARE.
22 |
--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "preact-perf-profiler",
3 | "version": "2.0.1",
4 | "description": "A utility for measuring rendering performance with Preact",
5 | "author": "Klemen Slavič (https://krofdrakula.github.io/)",
6 | "license": "MIT",
7 | "bugs": {
8 | "url": "https://github.com/krofdrakula/preact-perf-profiler/issues"
9 | },
10 | "homepage": "https://github.com/krofdrakula/preact-perf-profiler#readme",
11 | "repository": {
12 | "type": "git",
13 | "url": "git+https://github.com/krofdrakula/preact-perf-profiler.git"
14 | },
15 | "keywords": [
16 | "preact",
17 | "performance"
18 | ],
19 | "type": "module",
20 | "main": "dist/index.umd.cjs",
21 | "umd:main": "dist/index.umd.cjs",
22 | "module": "dist/index.js",
23 | "types": "dist/index.d.ts",
24 | "exports": {
25 | ".": {
26 | "types": "./dist/index.d.ts",
27 | "import": "./dist/index.js",
28 | "require": "./dist/index.umd.cjs"
29 | }
30 | },
31 | "files": [
32 | "./dist",
33 | "./src",
34 | "./README.md",
35 | "./LICENSE",
36 | "./package.json",
37 | "./tsconfig.json"
38 | ],
39 | "scripts": {
40 | "build": "vite build",
41 | "build-demo": "vite build --config vite.config.demo.js",
42 | "dev": "vite --config vite.config.demo.js",
43 | "prepublish": "vite build"
44 | },
45 | "peerDependencies": {
46 | "preact": ">=10"
47 | },
48 | "devDependencies": {
49 | "preact": ">=10",
50 | "vite": "^4.4.3",
51 | "vite-plugin-dts": "^3.2.0"
52 | }
53 | }
54 |
--------------------------------------------------------------------------------
/src/index.ts:
--------------------------------------------------------------------------------
1 | import { options, Options, ComponentType, VNode } from "preact";
2 |
3 | type OptionsWithInternals = Options & {
4 | _diff?: (vnode: VNode) => void;
5 | __b: (vnode: VNode) => void;
6 | };
7 |
8 | // aliasing to provide internal options
9 | const opts = options as OptionsWithInternals;
10 | let id = 0;
11 |
12 | const trackedComponents = new Set();
13 |
14 | const isTracking = (vnode: VNode) =>
15 | typeof vnode.type != "string" && trackedComponents.has(vnode.type);
16 |
17 | const originals = { ...opts };
18 |
19 | const marks: string[] = [];
20 |
21 | opts._diff = opts.__b = (vnode) => {
22 | if (isTracking(vnode)) {
23 | marks.push(`component_${id++}`);
24 | performance.mark(marks.at(-1)!);
25 | }
26 | return originals._diff?.(vnode);
27 | };
28 |
29 | opts.diffed = (vnode) => {
30 | if (isTracking(vnode)) {
31 | const component = vnode.type as ComponentType;
32 | const startMark = marks.pop();
33 | if (startMark) {
34 | const endMark = `${startMark}_end`;
35 | performance.mark(endMark);
36 | performance.measure(
37 | `⚛️ ${component.displayName ?? component.name ?? "component"}`,
38 | startMark,
39 | endMark
40 | );
41 | performance.clearMarks(startMark);
42 | performance.clearMarks(endMark);
43 | } else if (import.meta.env.DEV) {
44 | console.error(`Cannot find start mark for `, vnode);
45 | }
46 | }
47 | originals.diffed?.(vnode);
48 | };
49 |
50 | export const track = >(component: T): void => {
51 | trackedComponents.add(component);
52 | };
53 |
54 | export const untrack = >(component: T): void => {
55 | trackedComponents.delete(component);
56 | };
57 |
--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 | # `preact-perf-profiler`
2 |
3 | 
4 | 
5 | 
6 |
7 | This library allows you to register a Preact component for measuring its rendering performance using the [User Timing Performance API](https://developer.mozilla.org/en-US/docs/Web/API/Performance_API/User_timing). The measurements show up in the Performance tab timeline in Chromium-based browsers and Firefox browsers and are available through the [`PerformanceObserver` API](https://developer.mozilla.org/en-US/docs/Web/API/Performance_API/Performance_data) if you would like to collect remote telemetry from clients.
8 |
9 | ## Demo
10 |
11 | Open [the demo site](https://krofdrakula.github.io/preact-perf-profiler/) to see it in action.
12 |
13 | You can also check out the demo locally and run it on your own machine:
14 |
15 | ```bash
16 | pnpm install
17 | pnpm run dev
18 | ```
19 |
20 | Open Dev Tools and you should be able to see the performance measure for the tracked component:
21 |
22 | 
23 |
24 | ## Usage
25 |
26 | The API consist of two methods that take a component class or function and returns it:
27 |
28 | - `track(k: ComponentType) => void`
29 | - `untrack(k: ComponentType) => void`
30 |
31 | Registering a component adds that component to a `Set` of components. This means that multiple registrations will only add the tracked component once. Same for unregistering.
32 |
33 | The easiest way to track a component is to register it where it is defined:
34 |
35 | ```ts
36 | import { track } from "preact-perf-profiler";
37 |
38 | const MyComponent = () => Hello!
;
39 |
40 | export default MyComponent;
41 |
42 | track(MyComponent);
43 | ```
44 |
45 | If you do not control the source of the component, you can start tracking the component after importing it elsewhere:
46 |
47 | ```ts
48 | import { track } from "preact-perf-profiler";
49 | import MyComponent from "./my-component.tsx";
50 |
51 | track(MyComponent);
52 |
53 | const MyOtherComponent = () => ;
54 |
55 | export default MyOtherComponent;
56 | ```
57 |
--------------------------------------------------------------------------------
/src/demo/hackernews.tsx:
--------------------------------------------------------------------------------
1 | import { FunctionComponent, FunctionalComponent } from "preact";
2 | import { useEffect, useState } from "preact/hooks";
3 |
4 | const chunk = function* (list: Iterable, count: number): Generator {
5 | let buffer: T[] = [];
6 | for (const item of list) {
7 | buffer.push(item);
8 | if (buffer.length == count) {
9 | yield buffer;
10 | buffer = [];
11 | }
12 | }
13 | if (buffer.length > 0) yield buffer;
14 | };
15 |
16 | interface Props {
17 | maxStories: number;
18 | }
19 |
20 | interface HackernewsItem {
21 | by: string;
22 | descendants: number;
23 | id: number;
24 | kids: number[];
25 | score: number;
26 | time: number;
27 | title: string;
28 | type: string;
29 | url: string;
30 | }
31 |
32 | const Hackernews: FunctionComponent = ({ maxStories }) => {
33 | const [error, setError] = useState(null);
34 | const [list, setList] = useState(null);
35 |
36 | useEffect(() => {
37 | fetch(`https://hacker-news.firebaseio.com/v0/topstories.json`)
38 | .then((response) => response.json())
39 | .then((ids) => chunk(ids.slice(0, maxStories), 5))
40 | .then(async (chunks) => {
41 | let data: HackernewsItem[] = [];
42 | for (const chunk of chunks) {
43 | data.push(
44 | ...(await Promise.all(
45 | chunk.map((id) =>
46 | fetch(
47 | `https://hacker-news.firebaseio.com/v0/item/${id}.json`
48 | ).then((response) => response.json())
49 | )
50 | ))
51 | );
52 | }
53 | setList(data);
54 | })
55 | .catch((err) => setError(err));
56 | }, []);
57 |
58 | if (error) {
59 | return (
60 |
61 |
62 | {error.toString()}
63 |
64 |
Loading...
;
70 | }
71 |
72 | return (
73 | <>
74 |
83 | Hackernews top stories
84 |
85 |
86 |
87 |
88 | | ID |
89 | Created |
90 | Title |
91 | Author |
92 |
93 |
94 |
95 | {list.map((item) => (
96 |
97 | | {item.id} |
98 |
99 | {new Date(item.time).toDateString()} @{" "}
100 | {new Date(item.time).toLocaleTimeString()}
101 | |
102 |
103 |
104 | {item.title}
105 |
106 | |
107 |
108 |
112 | {item.by}
113 |
114 | |
115 |
116 | ))}
117 |
118 |
119 |