feat: per-page JS bundle panel in debug bar by khromov · Pull Request #42 · khromov/mochi

khromov · 2026-05-25T18:15:55Z

Summary

Replaces the old external "Bundles ↗" link in the debug bar with an inline JS bundle panel showing per-page framework JS breakdown
Badge shows total JS weight (e.g. 48 KB); pages with no islands show a green 0 with a sparkle animation
Panel groups bundles by kind (Runtime, Islands, Shared Chunks) with expandable rows showing input source files and click-to-copy paths
Bundle data is scoped per page — only includes bootstrap, rendered island entries, and shared chunks; excludes the debug bar bundle itself
Data is populated server-side in ComponentRegistry.renderComponent() from clientStats and seeded via window.__mochi_debug.bundles
CI review workflow now packs mochi-framework as a downloadable artifact with "Try this PR" install instructions in the review comment
LOC comment sections for non-mochi packages are now collapsible

Test plan

Run bun run dev:site, open a page with islands — badge should show total JS size
Click the badge — panel should list bootstrap, island entries, and chunks with individual sizes
Expand a bundle row — input files should appear with sizes, click to copy path
Open a page with no islands — badge should show green 0 with sparkle
Verify "Full bundle analysis" link inside the panel still works
Push to a PR branch and verify the review workflow uploads the tarball artifact and renders install instructions

Show total framework JS weight as a round badge in the debug bar. Clicking opens a panel listing bootstrap, island entries, and shared chunks with individual sizes — scoped to the current page's rendered islands.

github-actions · 2026-05-25T18:16:10Z

Mochi review report

Try this PR

Expand instructions

gh run download -R khromov/mochi 26419797109 -n mochi-framework-pr -D /tmp/mochi-pr && bun i /tmp/mochi-pr/mochi-framework-pr.tgz

_{Download manually}

Lines of code (non-blank lines)

packages/mochi

Category	main	PR	Δ
`src/Mochi.ts`	1093	1103	+10
`src/ComponentRegistry.ts`	1391	1477	+86
`src/{requestContext,forms,errors}.ts`	251	260	+9
`src/{types.ts,*.d.ts}`	601	602	+1
`src/debug-bar/**`	1376	1866	+490
Total	15557	16153	+596

Unchanged: src/**/*.test.ts (5444), src/hooks.ts (229), src/{events,log,logger}.ts (317), src/consoleLogger.ts (342), src/cookies*.ts (157), src/extensions.ts (191), src/cache.ts (60), src/middleware/** (81), src/enhance*.ts (184), src/build*.ts (251), src/proxy.ts (125), src/cli* (112), src/{csrf,serverIslandCrypto}.ts (240), src/web-components/** (431), src/templates/** (790), Other (1891).

packages/docs

Category	main	PR	Δ
Total	3464	3464	0

Unchanged: Docs (3464).

packages/site

Category	main	PR	Δ
`Other`	1356	1363	+7
Total	9647	9654	+7

Unchanged: src/demos/** (5488), src/components/** (2080), src/lib/** (697), src/stores/** (26).

packages/demos

Category	main	PR	Δ
`Other`	2015	2022	+7
Total	3100	3107	+7

Unchanged: src/hn/** (1085).

packages/minimal

Category	main	PR	Δ
Total	538	538	0

Unchanged: Other (538).

packages/cli

Category	main	PR	Δ
Total	502	502	0

Unchanged: src/**/*.test.ts (117), src/cli* (161), src/{create,templates,utils}.ts (220), Other (4).

Each bundle row in the JS panel is now expandable to show the source files that contributed bytes (from Bun's metafile inputs). Entries that import shared chunks show the effective size (transitive closure of chunk deps) alongside the raw shim size, with chunk dependency pills listing each imported chunk and its size.

Truncated file paths in the bundle inputs list can now be clicked to expand to full multiline view with highlighting. The path is copied to clipboard on click. Click again to collapse.

Strip leading ../ segments, node_modules/, and Bun's .bun/<pkg>+<hash>/node_modules/ from displayed paths for readability. Full path is still copied to clipboard on click.

🤖 I have created a release *beep* *boop* --- <details><summary>mochi-framework: 0.4.0</summary> ## [0.4.0](mochi-framework-v0.3.2...mochi-framework-v0.4.0) (2026-05-26) ### Features * make url export isomorphic (server + client) ([#47](#47)) ([11bbbe6](11bbbe6)) * per-page JS bundle panel in debug bar ([#42](#42)) ([7eba984](7eba984)) ### Bug Fixes * resolve Svelte 5 state warnings and add autofixer tooling ([#49](#49)) ([3d949a5](3d949a5)) ### Performance * consolidate per-request HTML passes in renderComponent ([#36](#36)) ([285a87f](285a87f)) * reduce server island runtime by ~80% (8.59kB → 1.91kB ) ([#50](#50)) ([d570bc8](d570bc8)) </details> <details><summary>create-mochi: 0.2.3</summary> ## [0.2.3](create-mochi-v0.2.2...create-mochi-v0.2.3) (2026-05-26) ### Bug Fixes * remove redundant project name prompt from create-mochi ([#44](#44)) ([dfa3c95](dfa3c95)) </details> --- This PR was generated with [Release Please](https://github.com/googleapis/release-please). See [documentation](https://github.com/googleapis/release-please#release-please). Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com>

feat: add JS bundle size badge and panel to debug bar

eb04d29

Show total framework JS weight as a round badge in the debug bar. Clicking opens a panel listing bootstrap, island entries, and shared chunks with individual sizes — scoped to the current page's rendered islands.

wip

b1e64af

khromov force-pushed the js-panel branch 2 times, most recently from b792fc5 to 457dc6b Compare May 25, 2026 18:41

khromov force-pushed the js-panel branch from 457dc6b to 0aeb7f8 Compare May 25, 2026 18:54

khromov added 19 commits May 25, 2026 21:17

feat: click-to-expand and copy input paths in JS bundles panel

e775cf8

Truncated file paths in the bundle inputs list can now be clicked to expand to full multiline view with highlighting. The path is copied to clipboard on click. Click again to collapse.

fix: shorten node_modules paths in JS bundles panel

228ff98

Strip leading ../ segments, node_modules/, and Bun's .bun/<pkg>+<hash>/node_modules/ from displayed paths for readability. Full path is still copied to clipboard on click.

fix: remove RTL direction trick that mangled @ in scoped package paths

b083e4e

feat: show 'Copied' toast when clicking an input path in bundles panel

d02c40a

fix: copied toast overlays row with pill, bootstrap paths now clickable

394295d

misc: create pr artifact

3233b22

chore: move analytics so they don't trigger in dev

f91abdf

Update BundlesPanel.svelte

1da34a4

Update MochiDebugBar.svelte

36896c3

wip

00e78d8

wip

4d411ff

Update BundlesPanel.svelte

ad72429

Update BundlesPanel.svelte

952cf67

Update BundlesPanel.svelte

cc844df

beep

3a80f81

Update BundlesPanel.svelte

e4f407b

Update Mochi.ts

3a40320

Update loc-comment.ts

9203f24

Update loc-comment.ts

bfabc3f

khromov changed the title ~~feat: JS bundle size badge and panel in debug bar~~ feat: per-page JS bundle panel in debug bar May 25, 2026

khromov added 3 commits May 25, 2026 22:32

Update loc-comment.ts

91b6ac9

cleanup

8ebd948

wip

a3581af

khromov added 4 commits May 25, 2026 22:53

Update BundlesPanel.svelte

a39bce7

wip

08ff95f

wip

65b0e60

wip

afc2436

khromov merged commit 7eba984 into main May 25, 2026
3 checks passed

github-actions Bot mentioned this pull request May 25, 2026

chore: release main #43

Merged

khromov deleted the js-panel branch June 6, 2026 20:39

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

feat: per-page JS bundle panel in debug bar#42

feat: per-page JS bundle panel in debug bar#42
khromov merged 29 commits into
mainfrom
js-panel

khromov commented May 25, 2026 •

edited

Loading

Uh oh!

github-actions Bot commented May 25, 2026 •

edited

Loading

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

1 participant

Conversation

khromov commented May 25, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Summary

Test plan

Uh oh!

github-actions Bot commented May 25, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Mochi review report

Try this PR

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

1 participant

khromov commented May 25, 2026 •

edited

Loading

github-actions Bot commented May 25, 2026 •

edited

Loading