refresh `worker-react` example #127

dimitropoulos · 2026-01-12T15:15:33Z

I've been playing around with Cap'n Web and I was looking at this example and thought it might be welcome to give it a refresh. Feel free to review/read commit-by-commit (I left some discourse there, too).

BEFORE	AFTER

dark mode, too

Notable changes:

it won't render until it's done (I found it strange that it would appear to populate the whole screen but only later the button would show it's not loading - which I later realized is because it's running the second test).
the trace viewer is responsive (and the numbers aren't cut off)
both trace viewers are scaled the same. in the before version (especially with the axis number being cut off) I first drew the wrong conclusion that the batched took the same time (because the trace viewers were the same width).
there's a dark mode now
the summary has a quick comparison line
some other little styling things here and there - nothing major
updated all dependencies

ExecutionContext was missing in worker.ts. it's actually unused, but I was thinking that it was probably here (since this is an example) to show it, so instead of deleting it to remove the type error I fixed the problem by adding a tsconfig referencing the types which are present in the root. if it'd be better to give this example its own package.json to install the cloudflare worker types, I'm happy to update! lemme know

This prevents unnecessary function recreations on every render, which is especially important since runDemo is passed to the button's onClick handler.

conditional rendering using && can cause issues in React because when left side is falsy, it renders that falsy value (like false, null, 0). although code like this used to be common, people use ternaries with explicit null these days, considering it safer.

I tried to keep it as non-invasive as possible, but in order to make the chart responsive I switched from SVG to plain divs (that will become important in the next commit where I will scale both)

in the summary, it would be nice to have a side-by-side horizontal histogram

changeset-bot · 2026-01-12T15:15:37Z

⚠️ No Changeset found

Latest commit: 51f2965

Merging this PR will not cause a version bump for any packages. If these changes should not result in a new version, you're good to go. If these changes should result in a version bump, you need to add a changeset.

This PR includes no changesets

When changesets are added to this PR, you'll see the packages that this PR includes changesets for and the associated semver types

Click here to learn what changesets are, and how to add one.

Click here if you're a maintainer who wants to add a changeset to this PR

github-actions · 2026-01-12T15:15:44Z

Thank you for your submission, we really appreciate it. Like many open-source projects, we ask that you sign our Contributor License Agreement before we can accept your contribution. You can sign the CLA by just posting a Pull Request Comment same as the below format.

I have read the CLA Document and I hereby sign the CLA

dimitropoulos seems not to be a GitHub user. You need a GitHub account to be able to sign the CLA. If you have already a GitHub account, please add the email address used for this commit to your account.
_{You can retrigger this bot by commenting recheck in this Pull Request.}_{Posted by the CLA Assistant Lite bot.}

dimitropoulos · 2026-01-12T15:18:58Z

I have read the CLA Document and I hereby sign the CLA

Copilot

Pull request overview

This PR refreshes the worker-react example with modern styling, dark mode support, and improved user experience. The changes include upgrading dependencies, refactoring the UI from SVG-based charts to responsive HTML/CSS flex-based charts, and improving the visual design with a cohesive theme.

Changes:

Upgraded React from 18.3.1 to 19.2.3, along with associated dependencies (Vite, TypeScript, esbuild)
Refactored TraceView component from SVG to responsive HTML/CSS with flexbox layout
Added dark mode support with CSS custom properties and prefers-color-scheme media queries
Improved conditional rendering to wait for both test results before displaying

Reviewed changes

Copilot reviewed 4 out of 5 changed files in this pull request and generated 2 comments.

Show a summary per file

File	Description
examples/worker-react/web/src/main/App.tsx	Refactored to use useCallback hooks, improved conditional rendering, and updated TraceView to use maxTime for consistent chart scaling
examples/worker-react/web/src/main/App.css	New file with comprehensive styling including theme variables, dark mode support, and responsive chart layout
examples/worker-react/web/package.json	Updated dependencies: React 19.2.3, Vite 7.3.1, TypeScript 5.9.3
examples/worker-react/web/package-lock.json	Updated lockfile with all dependency version changes and their transitive dependencies
examples/worker-react/tsconfig.json	New root-level TypeScript configuration for the worker code

Files not reviewed (1)

examples/worker-react/web/package-lock.json: Language not supported

Comments suppressed due to low confidence (1)

examples/worker-react/web/package-lock.json:1069

Vite version 7.3.1 appears to be a non-existent version. As of January 2025, Vite's latest stable version should be in the 5.x or 6.x range. This version may not exist on npm or may be incorrectly specified. Additionally, note that Vite 7.3.1 requires Node.js version ^20.19.0 or >=22.12.0, which is a very recent requirement that may not be available in all environments. Please verify this version exists and the Node.js version requirement is acceptable for the target deployment environment.

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

examples/worker-react/web/src/main/App.css

dimitropoulos · 2026-01-12T15:47:12Z

by the way - if wanted I'd be happy to do a similar treatment on the other example - lemme know!

pkg-pr-new · 2026-01-12T16:30:09Z

Open in StackBlitz

npm i https://pkg.pr.new/cloudflare/capnweb@127

commit: 51f2965

kentonv · 2026-01-12T16:30:44Z

recheck

kentonv · 2026-01-12T16:33:01Z

"recheck" was supposed to trigger the CLA assistant to check for signatures again but it failed. I'm not sure what's going on here. I'll just bypass it.

kentonv · 2026-01-12T16:43:36Z

Thanks!

by the way - if wanted I'd be happy to do a similar treatment on the other example - lemme know!

I would say it's not a high priority but if you feel like working on it I'm happy to accept improved examples!

dimitropoulos added 6 commits January 12, 2026 08:36

updates dependencies

3f3499d

prevent layout thrashing with callbacks

6a18983

This prevents unnecessary function recreations on every render, which is especially important since runDemo is passed to the button's onClick handler.

some basic styling

cc2aac2

I tried to keep it as non-invasive as possible, but in order to make the chart responsive I switched from SVG to plain divs (that will become important in the next commit where I will scale both)

comparison bar

d8b171c

in the summary, it would be nice to have a side-by-side horizontal histogram

Copilot AI review requested due to automatic review settings January 12, 2026 15:15

Copilot started reviewing on behalf of dimitropoulos January 12, 2026 15:16 View session

spell out initialism

51f2965

Copilot AI reviewed Jan 12, 2026

View reviewed changes

examples/worker-react/web/src/main/App.css Show resolved Hide resolved

examples/worker-react/web/src/main/App.css Show resolved Hide resolved

kentonv merged commit a64e425 into cloudflare:main Jan 12, 2026
3 of 5 checks passed

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

refresh `worker-react` example #127

refresh `worker-react` example #127

Uh oh!

dimitropoulos commented Jan 12, 2026 •

edited

Loading

Uh oh!

changeset-bot bot commented Jan 12, 2026 •

edited

Loading

Uh oh!

github-actions bot commented Jan 12, 2026

Uh oh!

dimitropoulos commented Jan 12, 2026

Uh oh!

Copilot AI left a comment

Uh oh!

Uh oh!

Uh oh!

dimitropoulos commented Jan 12, 2026

Uh oh!

pkg-pr-new bot commented Jan 12, 2026

Uh oh!

kentonv commented Jan 12, 2026

Uh oh!

kentonv commented Jan 12, 2026

Uh oh!

Uh oh!

kentonv commented Jan 12, 2026

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

refresh worker-react example #127

refresh worker-react example #127

Uh oh!

Conversation

dimitropoulos commented Jan 12, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

changeset-bot bot commented Jan 12, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

⚠️ No Changeset found

Uh oh!

github-actions bot commented Jan 12, 2026

Uh oh!

dimitropoulos commented Jan 12, 2026

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull request overview

Reviewed changes

Uh oh!

Uh oh!

Uh oh!

dimitropoulos commented Jan 12, 2026

Uh oh!

pkg-pr-new bot commented Jan 12, 2026

Uh oh!

kentonv commented Jan 12, 2026

Uh oh!

kentonv commented Jan 12, 2026

Uh oh!

Uh oh!

kentonv commented Jan 12, 2026

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

refresh `worker-react` example #127

refresh `worker-react` example #127

dimitropoulos commented Jan 12, 2026 •

edited

Loading

changeset-bot bot commented Jan 12, 2026 •

edited

Loading