Skip to content

Remove Babel from the build; let Vite transform everything natively - #157

Merged
fwextensions merged 2 commits into
devfrom
claude/debabel-wjrm30
Jul 19, 2026
Merged

Remove Babel from the build; let Vite transform everything natively#157
fwextensions merged 2 commits into
devfrom
claude/debabel-wjrm30

Conversation

@fwextensions

Copy link
Copy Markdown
Owner

Summary

Babel had two remaining jobs after the Vite migration, and this removes both at the source so Vite's native transform handles all packaging:

  1. JSX in .js files → the 32 files containing JSX are renamed to .jsx (pure git mv, 100% similarity on all but the demo files). Every import in the codebase was already extensionless, so no import statements change — Vite resolves .jsx automatically.
  2. babel-plugin-transform-goober → the 21 styled.tag usages in the options demo components are rewritten to explicit styled("tag") calls. This was the semantically-required transform: goober has no runtime support for the property-access form, so the source only worked because of the build-time rewrite. Now the code matches goober's documented API directly.

With nothing left for Babel to do, build/scripts/babel-jsx.mjs is deleted and the @babel/core, @babel/plugin-transform-react-jsx, and babel-plugin-transform-goober dev deps are removed.

Side benefits:

  • drops the last Babel 7 pin (the goober plugin never supported Babel 8)
  • permanently removes the rolldown INVALID_ANNOTATION warnings, which came from the goober plugin's misplaced /*#__PURE__*/ annotations
  • one less custom plugin in the build and the SSR pre-render

Net diff: +34 / −561 (mostly the deleted plugin and lockfile pruning).

Verification

  • production build is clean with no warnings
  • the popup pre-render produces byte-identical markup to the checked-in src/popup.html (Vite's automatic-runtime JSX output matches what Babel produced)
  • all 70 unit tests pass
  • Playwright smoke tests against the built extension: popup search + virtualized scrolling/paging across 25 tabs, options pages including the goober-styled animated demos — no console, page, or hydration errors

Note

git log --follow tracks the renames; blame gains one hop on the 32 renamed files.

🤖 Generated with Claude Code

https://claude.ai/code/session_017DTY8KLAPgLRcooVuTUMKi


Generated by Claude Code

claude added 2 commits July 19, 2026 02:20
Babel was doing two remaining jobs: transforming JSX in .js files
(which vite's native transform won't parse) and running
babel-plugin-transform-goober, which rewrote styled.div`...` to
styled("div")`...` because goober has no runtime support for the
property-access form. Both are eliminated at the source:

- the 32 files containing JSX are renamed to .jsx, which vite
  transforms natively with the automatic runtime. All imports were
  already extensionless, so no import statements change.
- the 21 styled.tag usages across the options demo components are
  rewritten to explicit styled("tag") calls, matching goober's
  documented API instead of relying on a build-time rewrite.

That leaves nothing for Babel to do, so babel-jsx.mjs and the
@babel/core, @babel/plugin-transform-react-jsx, and
babel-plugin-transform-goober dev deps are removed. This also drops the
last Babel 7 pin (the goober plugin never supported Babel 8) and the
rolldown INVALID_ANNOTATION warnings caused by the plugin's misplaced
pure annotations.

Verified: production build is clean, the popup pre-render produces
byte-identical markup to the checked-in src/popup.html, all 70 unit
tests pass, and the extension smoke tests (popup search/virtualized
scrolling, options pages including the styled demos) run with no
console or hydration errors.

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_017DTY8KLAPgLRcooVuTUMKi
The Test workflow previously only ran on pushes to the long-lived
branches, so PRs merged without CI ever seeing them. The pull_request
trigger runs the same job against the PR's merge preview.

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_017DTY8KLAPgLRcooVuTUMKi
@fwextensions
fwextensions force-pushed the claude/debabel-wjrm30 branch from 2bae903 to 39c53c9 Compare July 19, 2026 02:21
@fwextensions
fwextensions merged commit 02e6106 into dev Jul 19, 2026
1 check passed
@fwextensions
fwextensions deleted the claude/debabel-wjrm30 branch July 19, 2026 03:44
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants