Skip to content

build(kumo): bundle CLI with vp pack - #680

Open
TheAlexLichter wants to merge 14 commits into
cloudflare:mainfrom
TheAlexLichter:build/cli-tsdown
Open

build(kumo): bundle CLI with vp pack#680
TheAlexLichter wants to merge 14 commits into
cloudflare:mainfrom
TheAlexLichter:build/cli-tsdown

Conversation

@TheAlexLichter

@TheAlexLichter TheAlexLichter commented Jul 28, 2026

Copy link
Copy Markdown
Contributor

Replace the CLI script that calls esbuild multiple times with a tsdown /
vp pack pass, so no external build script or scaffolding is needed anymore.

This also fully removes esbuild from the toolchain 🎉

Speed is roughly the same (~180ms faster), and output is equivalent.


  • Reviews
    • bonk has reviewed the change
    • automated review not possible because: automated reviewer feedback is unavailable; package-output behavior is covered by focused tests
  • Tests
    • Tests included/updated
    • Automated tests not possible - manual testing has been completed as follows:
    • Additional testing not necessary because:
@pkg-pr-new

pkg-pr-new Bot commented Jul 29, 2026

Copy link
Copy Markdown
npm i https://pkg.pr.new/@cloudflare/kumo@680

commit: d6c4be5

@github-actions

github-actions Bot commented Jul 29, 2026

Copy link
Copy Markdown
Contributor

Docs Preview

View docs preview

Commit: d6c4be5

@github-actions

github-actions Bot commented Jul 29, 2026

Copy link
Copy Markdown
Contributor
Visual Regression Report — 27 changed, 16 unchanged

27 screenshot(s) with visual changes:

Button / Variant: Secondary

250 px (0.28%) changed

Before After Diff
Before After Diff

Button / Variant: Ghost

101 px (0.11%) changed

Before After Diff
Before After Diff

Button / Loading State

490 px (0.55%) changed

Before After Diff
Before After Diff

Button / Disabled State

117 px (0.13%) changed

Before After Diff
Before After Diff

Button / Title

405 px (0.46%) changed

Before After Diff
Before After Diff

Dialog / Dialog With Actions

298 px (0.34%) changed

Before After Diff
Before After Diff

Dialog / Dialog Basic

114 px (0.13%) changed

Before After Diff
Before After Diff

Dialog / Dialog Sizes

3,205 px (3.62%) changed

Before After Diff
Before After Diff

Dialog / Dialog Alert

912 px (1.03%) changed

Before After Diff
Before After Diff

Dialog / Dialog Confirmation

855 px (0.97%) changed

Before After Diff
Before After Diff

Dialog / Custom Max Width

954 px (1.08%) changed

Before After Diff
Before After Diff

Dialog / Dialog With Select

383 px (0.43%) changed

Before After Diff
Before After Diff

Dialog / Dialog With Combobox

130 px (0.15%) changed

Before After Diff
Before After Diff

Dialog / Dialog With Dropdown

483 px (0.55%) changed

Before After Diff
Before After Diff

Select / Select Basic

1,029 px (1.16%) changed

Before After Diff
Before After Diff

Select / Select Sizes

2,670 px (1.64%) changed

Before After Diff
Before After Diff

Select / Select With Description

2,015 px (1.94%) changed

Before After Diff
Before After Diff

Select / Select With Error

1,730 px (1.66%) changed

Before After Diff
Before After Diff

Select / Select Placeholder

977 px (1.1%) changed

Before After Diff
Before After Diff

Select / Select With Tooltip

196 px (0.22%) changed

Before After Diff
Before After Diff

Select / Select Loading

2,110 px (1.2%) changed

Before After Diff
Before After Diff

Select / Select Complex

1,098 px (1.06%) changed

Before After Diff
Before After Diff

Select / Select Disabled Items

103 px (0.12%) changed

Before After Diff
Before After Diff

Select / Select Grouped

105 px (0.12%) changed

Before After Diff
Before After Diff

Select / Select Grouped With Disabled

1,435 px (1.62%) changed

Before After Diff
Before After Diff

Select / Select Long List

2,487 px (2.39%) changed

Before After Diff
Before After Diff

Select (Open)

0 px (0%) changed

Before After Diff
Before After Diff
16 screenshot(s) unchanged
  • Button / Basic
  • Button / Variant: Primary
  • Button / Variant: Destructive
  • Button / Variant: Outline
  • Button / Variant: Secondary Destructive
  • Button / Sizes
  • Button / With Icon
  • Button / Icon Only
  • Button / Link as Button
  • Button / Link with Tooltip
  • Button / Disabled Link
  • Dialog (Open)
  • Select / Select Without Label
  • Select / Select Custom Rendering
  • Select / Select Multiple
  • Select / Select Disabled Options

Generated by Kumo Visual Regression

@geoquant

Copy link
Copy Markdown
Collaborator

/bonk review

@ask-bonk ask-bonk Bot left a comment

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Nice cleanup — replacing the custom esbuild script and CSS copy script with an integrated vp pack pass is a clear win. The new setup is simpler, the tests verify the build artifacts correctly, and the old redundant per-command bundles are eliminated.

A few observations:

  1. The old build-cli.ts produced separate bundles for each command file (commands/ls.js, commands/doc.js, etc.) that were never actually imported by cli.js because esbuild bundle: true already inlined them. Collapsing to a single cli.js entry is the correct fix.

  2. deps: { neverBundle: true } for the CLI pass externalizes Node dependencies while bundling the local command-line imports into the single output — this is exactly what's needed for a package-bundled CLI.

  3. The getPackageAssetConfig() integration into the CLI pack entry is elegant. The writeBundle plugin for Tailwind standalone CSS runs only during command === 'build', which avoids unnecessary work in dev/watch mode.

  4. Tests comprehensively cover the new behavior: single CLI bundle, shebang, CSS parity, block source copying, and a functional smoke test through the package bin.

One minor suggestion inline. Otherwise LGTM!

Comment thread packages/kumo/vite.config.ts
@ask-bonk

ask-bonk Bot commented Aug 24, 2026

Copy link
Copy Markdown
Contributor

I've reviewed PR #680 and submitted a batch review. Here's the summary:

Overall assessment: LGTM — this is a clean consolidation of the build pipeline.

The PR correctly replaces two custom scripts (scripts/css-build.ts and src/command-line/build-cli.ts) with an integrated vp pack pass. Key points from the review:

  1. Single CLI bundle: The old esbuild script produced redundant per-command bundles (commands/ls.js, commands/doc.js, etc.) that were never actually used, since cli.ts already bundled its imports. Collapsing to a single cli.js is the right fix.

  2. neverBundle: true behavior: Externalizes Node dependencies while bundling local ./commands/*.js imports into the output — exactly what's needed for a package-bundled CLI.

  3. Asset handling: getPackageAssetConfig() elegantly handles CSS copying, block source copying, and Tailwind standalone CSS compilation via a writeBundle plugin, scoped to command === "build" to avoid unnecessary work in dev mode.

  4. Test coverage: The added tests comprehensively validate the CLI bundle structure, shebang preservation, CSS parity, block source copying, and a functional smoke test through the package bin.

  5. Dependency cleanup: Removing the direct esbuild dependency from @cloudflare/kumo is appropriate since the package no longer uses it directly.

One minor inline suggestion was left on vite.config.ts to add a clarifying comment about how neverBundle treats local imports vs. external deps.

github run

@github-actions

Copy link
Copy Markdown
Contributor

📐 Bundle Size

Consumer fixtures bundled against packages/kumo/dist (peers external, minified ESM).

Fixture Raw Gzip Brotli
Button (root) 177.6 KB 50.5 KB 43.6 KB
Button (components/button) 177.6 KB 50.5 KB 43.6 KB
Button + Dialog + Select (root) 299.9 KB 85.9 KB 71.9 KB
Button + Dialog + Select (component subpaths) 299.9 KB 86.0 KB 71.9 KB
Chart (root) 218.6 KB 63.0 KB 54.4 KB
Chart (components/chart) 218.6 KB 63.0 KB 54.4 KB
Badge (components/badge) 44.7 KB 11.7 KB 10.1 KB
Flow (components/flow) 208.9 KB 58.3 KB 50.6 KB
Button (primitives/button) 11.8 KB 4.3 KB 3.8 KB
Primitives barrel 650.8 KB 178.6 KB 139.8 KB
Code highlighting (code) 2.08 MB 468.3 KB 349.5 KB

npm tarball: 510 files, 1.42 MB packed, 6.70 MB unpacked.

⚠️ 21 flagged files in tarball (tests / raw scripts)
  • dist/blocks-source/resource-list/resource-list.test.tsx
  • scripts/component-registry/cache.ts
  • scripts/component-registry/discovery.ts
  • scripts/component-registry/example-cleanup.ts
  • scripts/component-registry/index.test.ts
  • scripts/component-registry/index.ts
  • scripts/component-registry/markdown-generator.ts
  • scripts/component-registry/metadata.ts
  • scripts/component-registry/props-filter.ts
  • scripts/component-registry/schema-generator.ts
  • scripts/component-registry/sub-components.ts
  • scripts/component-registry/types.ts
  • scripts/component-registry/utils.ts
  • scripts/component-registry/variant-parser.ts
  • scripts/generate-primitives.ts
  • scripts/theme-generator/config.ts
  • scripts/theme-generator/generate-css.test.ts
  • scripts/theme-generator/generate-css.ts
  • scripts/theme-generator/index.ts
  • scripts/theme-generator/migrate.ts
  • scripts/theme-generator/types.ts

Report-only: no size thresholds are enforced yet.

Commit: d6c4be5f

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

2 participants