Repository navigation
fix(build): support Babel flowtype page compilation (#1506) - #1870
james-elicx wants to merge 6 commits into
Conversation
commit: |
|
|
/bigbonk review for issues |
/bigbonk review — PR #1870 (Babel flowtype page compilation)Verified the new test passes locally ( 1. Flow-pragma regex produces false positives (correctness — blocking)
// matches today (all false positives):
const doc = `\n// @flow\n`; // inside a template literal
function f() { /* ... */ }
// @flow annotations are cool // mid-file comment, line 4Both Suggest anchoring to the very start of the file (after optional leading whitespace/BOM, no // matches a leading `// @flow` or `/* @flow */` / `/** @flow */` only
/^\uFEFF?\s*(?:\/\/[^\n]*@flow\b|\/\*[\s\S]*?@flow\b)/.test(code)(At minimum, drop the 2. Block-comment
|
|
Posted the review on PR #1870. Summary of findings: Blocking / correctness
Parity Coverage Minor I cleaned up the |
…#1506) - Extract `hasFlowPragma` into `utils/flow-pragma.ts` with proper leading-comment-block scanning (mirrors `hasReactDirective`): only the file's BOM / hashbang / leading whitespace / leading comments are scanned, so mid-file `@flow` occurrences (template literals, strings, mid-file comments) never trigger the Babel fallback path. - Add block-comment pragma detection (`/* @flow */`, `/** @flow */`), matching Flow's own rules. - Fix misleading JSX comment: `@babel/preset-flow` only strips Flow types; a follow-up `transformWithOxc(lang:"jsx")` pass now compiles JSX so the Vite pipeline receives plain JS. - Memoize `@babel/core` resolve per projectRoot to avoid repeated `createRequire` overhead on every Flow file. - Surface a clear error instead of silently returning null when Babel produces empty output. - Rewrite unit test to import `hasFlowPragma` directly from the small util module (avoids the `image-size` transitive dep that caused the test suite to fail to load); 22 targeted detection tests covering true-positives, false-positives, block comments, edge cases, and the `@flowtype` non-match.
|
/bigbonk review for issues |
/bigbonk review — PR #1870 (Babel flowtype page compilation)The follow-up commit
Resolved since last review
Remaining issues1. PR-time tests still don't exercise the actual Babel transform (coverage — non-blocking, same as prior #3)
Consider adding 2. Source-map chain is broken across the two-stage transform (minor, new)
3. Doc/comment nit
SummaryThe blocking regression from the prior review (#1) is fixed, and #2/#4/#5 are genuinely resolved. The implementation is in good shape. The one item I'd push on before merge is #1 (real Babel coverage on PRs) — right now the actual fix is only exercised by a nightly suite, so a regression in |
|
Posted the review on PR #1870. Summary: Resolved since the prior review (follow-up commit
Verified locally: 22/22 flowtype tests pass, Remaining issues raised:
The blocking regression from the previous round is fixed; the main thing I'd push on before merge is getting real Babel coverage to run on PRs. |
regex doc - Pass Babel's output map as `inMap` to `transformWithOxc` so the composed sourcemap traces back to the original Flow source rather than Babel's intermediate JS output. - Correct the doc comment in `flow-pragma.ts` (and test): the regex used is `/@flow\b/`, not `/\b@flow\b/` (no leading word-boundary anchor).
|
/bigbonk review for issues |
There was a problem hiding this comment.
/bigbonk review — PR #1870 (Babel flowtype page compilation)
Reviewed the latest state including the new commit a6df73a (sourcemap chaining + doc fix). Verified locally:
vp test run tests/babel-flowtype.test.ts→ 22 passedvp checkon all 3 changed files → clean (format + lint + types)- Confirmed via a runtime probe that
transformWithOxc(..., inMap)actually composes the Babel map: the final map'ssourcestraces back tooriginal.flow.js(original Flow source), so the commit-a6df73asourcemap fix is real, not cosmetic.
Confirmed resolved
- The sourcemap-chain issue from the prior round is genuinely fixed —
babelMapis now passed asinMapand OXC composes it. ✅ - Doc/comment nit (
/@flow\b/vs/\b@flow\b/) is corrected in bothflow-pragma.tsand the test. ✅ - The earlier blocking false-positive pragma regex remains fixed (
hasFlowPragmais a proper leading-comment tokenizer; template literals / strings / mid-file comments all returnfalse). ✅
Remaining issues
1. No PR-time test exercises the actual Babel transform (coverage — non-blocking, carries over)
@babel/core / @babel/preset-flow are still not dependencies of this repo (confirmed not in root or packages/vinext/package.json). In the vitest environment transformWithFlowBabel therefore always hits the _babelCoreCache.set(projectRoot, null); return null branch. The 22 new tests reference transformWithFlowBabel 0 times — they only exercise hasFlowPragma (detection) in isolation. Nothing on this PR runs Babel, strips a Flow annotation, or asserts the OXC re-pass output.
The only end-to-end coverage is test/e2e/babel/index.test.ts, which lives in the Next.js repo and is run against vinext only by nextjs-deploy-suite.yml — confirmed on: schedule (cron) / workflow_dispatch, not pull_request. So a regression in transformWithFlowBabel (or in the new sourcemap chaining) would land green on every PR and only surface in the nightly run on main.
Recommend adding @babel/core + @babel/preset-flow as devDependencies and a test that drives transformWithFlowBabel (or the plugin transform) over the mycomponent.js-style fixture, asserting (a) Flow annotations are stripped, (b) JSX is compiled, and (c) the returned map's sources points at the original file. That converts the most important behavior — including the brand-new sourcemap chaining — from "verified nightly" to "verified per-PR."
2. "OXC will surface Flow is not supported" comment is inaccurate for the null (babel-missing) path (minor)
When @babel/core can't be resolved, transformWithFlowBabel returns null and the vinext:jsx-in-js transform returns without calling transformWithOxc. But Vite 8's built-in vite:oxc excludes .js (exclude: /\.js$/, per the comment at index.ts:1121), so the Flow .js file is then not parsed by OXC at all — it flows through with raw Flow + JSX intact and errors later in the rolldown/RSC analysis pass, not as a clean "Flow is not supported" from OXC. The behavior (some error occurs) is acceptable, but the comments at index.ts:639-641 and index.ts:657 overstate that OXC produces the clear error. Consider tempering the comment, or — better — emitting an explicit actionable error when a Flow pragma is detected but @babel/core is missing (e.g. "install @babel/core + @babel/preset-flow to compile Flow pages"), which would be a clearer DX than a downstream parser error.
Summary
No new blocking issues. The prior blocking regression stays fixed, and commit a6df73a's sourcemap chaining is correct (verified). The one item worth pushing on before merge is #1: the actual Babel transform (now including sourcemap composition) is still only exercised by a nightly suite, so add a PR-time test backed by @babel/core devDeps. #2 is a minor comment/DX nit.
|
@james-elicx Bonk workflow was cancelled. View workflow run · To retry, trigger Bonk again. |
|
/bigbonk review for issues |
1 similar comment
|
/bigbonk review for issues |
…onable babel-missing error Addresses the two remaining findings from the latest ask-bonk review: - Extract transformWithFlowBabel into utils/flow-babel.ts and drive it in tests/babel-flowtype.test.ts against a new workspace fixture (tests/fixtures/babel-flowtype) that depends on @babel/core + @babel/preset-flow + @babel/plugin-syntax-jsx like a real user project. The tests assert Flow types are stripped, the OXC re-pass compiles the leftover JSX, and the composed sourcemap traces back to the original Flow source — so the transform (incl. sourcemap chaining) is verified on every PR instead of only by the nightly deploy suite. - When a leading @flow pragma is detected but @babel/core is not resolvable, fall through to the regular OXC pass instead of skipping the transform: plain JS that merely mentions @flow in a leading comment still compiles, and genuine Flow syntax now fails with an actionable "install @babel/core + @babel/preset-flow" error (with the OXC parse error as cause) instead of a confusing downstream parser error. - Pin Babel's root/cwd to the project root so .babelrc resolution works when the Vite process is launched from a different directory (Babel's default babelrcRoots only honors .babelrc files in its root package). - Correct the doc comments: @babel/preset-flow alone cannot parse JSX, so Babel's output only retains JSX when the project's config parses-but- keeps it (e.g. @babel/plugin-syntax-jsx); next/babel compiles it. The OXC re-pass handles both.
|
Review addressed in #1 (PR-time coverage of the actual Babel transform):
#2 (babel-missing path / inaccurate "OXC will surface Flow is not supported" comment):
Also fixed while in there: Babel's Local verification: |
|
/bigbonk review for issues |
3 similar comments
|
/bigbonk review for issues |
|
/bigbonk review for issues |
|
/bigbonk review for issues |
/bigbonk review — PR #1870 (Babel flowtype page compilation)Reviewed the latest state including commit Verified locally:
Resolved since last review
Notes / minor (non-blocking)
SummaryBoth remaining findings from the prior reviews are resolved: the actual Babel transform (including sourcemap composition) is now exercised per-PR via a real-deps fixture, and the babel-missing path produces an actionable error instead of skipping the transform. Implementation is clean, checks pass, no blocking issues. The notes above are minor. |
|
Posted the review on PR #1870. SummaryThe latest commit Resolved:
Verification: 26/26 flowtype tests pass, 87/87 build-optimization tests pass, Notable wrinkle I hit: On a fresh checkout the 3 real-transform tests failed with No blocking issues. The implementation is clean and the prior coverage gap is genuinely closed. |
- Fail loud when the babel-flowtype fixture's node_modules is missing: a beforeAll resolves @babel/core from the fixture root and throws an actionable "run vp install" error instead of opaque null assertions. - Stop caching @babel/core resolution misses so installing it mid-dev- session takes effect without a server restart; successful resolutions stay memoized for the per-module-transform hot path. Locked in by a new install-after-miss test. - Pass cleanId (query params stripped) to the fallback OXC transform so it matches the filename given to transformWithFlowBabel. - Neutralize vp's NODE_PATH fallback in the babel-missing tests: on a hoisted install, NODE_PATH makes @babel/core resolvable from any directory, making those tests environment-sensitive.
|
Addressed all three minor notes from the last review in df5774c: 1. Tests skip-by-null on a non-installed checkout → now fail loud. The 2. 3. Bonus robustness fix found while verifying: Verification: |
|
/bigbonk review for issues |
There was a problem hiding this comment.
/bigbonk review — PR #1870 (Babel flowtype page compilation)
Reviewed the full current state through df5774c. Verified locally:
vp install(frozen) → fixturenode_modulesmaterializedvp test run tests/babel-flowtype.test.ts→ 27 passedvp checkonflow-babel.ts,flow-pragma.ts,index.ts,babel-flowtype.test.ts→ clean (format + lint + types)
This is the strongest state the PR has been in. All prior /bigbonk findings are genuinely resolved, and the recent df5774c notes are addressed well:
hasFlowPragma(utils/flow-pragma.ts) is a proper leading-comment tokenizer mirroringhasReactDirective— template literals, strings, and mid-file@flowall correctly returnfalse;// @flow,/* @flow */,/** @flow */, BOM, and hashbang-prefixed pragmas are detected;@flowtypeis correctly rejected via\b.- Two-stage transform (
utils/flow-babel.ts): Babel strips Flow types via the project.babelrc, then an OXClang:"jsx"re-pass compiles leftover JSX; the Babel map is chained into OXC asinMapso the composed sourcemap traces to original Flow source. The fixture (tests/fixtures/babel-flowtype/) is a real workspace package declaring its own@babel/*deps, so the actual transform + sourcemap composition is now exercised per-PR, not just nightly. - Babel-missing fallthrough: when
@flowis detected but@babel/coreis unresolvable, the plugin falls through to OXC and rethrows genuine Flow parse failures as an actionable install message with the original error ascause(index.ts:1127-1136). The_babelCoreCacheonly memoizes hits (misses re-attempt, so mid-session installs take effect), androot/cwdare pinned toprojectRootfor monorepo.babelrcresolution. - The
beforeAllfail-loud guard works: on this clean checkout the 3 real-transform tests failed with the actionable "runvp install" error rather than opaquenullassertions; after a frozen install all 27 pass.
Notes (all non-blocking)
-
The index.ts actionable-rethrow path has no test coverage. The
df5774c/6479ceeDX improvement — Flow pragma detected +@babel/coremissing + genuine Flow syntax → OXC throws → wrapped[vinext] Failed to compile … requires Babelerror (index.ts:1127-1136) — is not exercised by any test.tests/babel-flowtype.test.tscoverstransformWithFlowBabelreturningnull(babel-missing) and the happy path, but never the index.tscatchthat turns the OXC parse failure into the actionable message. A small unit test driving thevinext:jsx-in-jstransform (or asserting the wrap+causebehavior) would lock in the most user-facing piece of the babel-missing branch. The complementary case — plain JS with a leading@flowcomment but no Flow syntax compiling cleanly through the OXC fallback — is also untested at the plugin level. -
hasFlowPragmaruns on every.js/.mjstransform. It short-circuits at the first non-comment token, so cost is bounded to the leading comment block — fine. Just flagging that it's now on the hot path for all user JS files, not only Flow ones. -
withoutNodePathFallbackmutatesprocess.env.NODE_PATH+Module._initPaths()globally. Safe here becausefileParallelism: falseand the tests within the file run sequentially withfinallyrestoration, but it is process-global state — if these tests ever gain.concurrentor the suite's isolation model changes, this becomes a race. A comment to that effect (or scoping via a non-global resolver) would future-proof it.
Summary
No blocking issues. The blocking regression and parity gaps from earlier rounds are fixed, the real Babel transform + sourcemap chaining is verified per-PR via a real-deps fixture, and the babel-missing path produces an actionable error. The one thing I'd consider before merge is note #1 — adding a test for the index.ts actionable-rethrow path so the babel-missing DX behavior is covered, not just the transformWithFlowBabel null branch. The other two notes are minor.
|
Review posted to PR #1870. SummaryReviewed the full current state through All prior
No blocking issues. Three non-blocking notes:
Working tree left clean. |
…acted transformJsxInJs Extract the vinext:jsx-in-js transform body (Flow pragma detection, Babel attempt, OXC fallback, actionable rethrow) into transformJsxInJs in utils/flow-babel.ts so the babel-missing error path is unit-testable. New tests cover: the wrapped install-message error (with OXC parse error as cause), the pragma-comment-only fall-through compile, and the babel-installed happy path through the full pipeline.
|
Round-2 notes addressed in 1569302: 1. Actionable-rethrow path now has unit coverage. The 2. 3. Verification: |
|
/bigbonk review for issues |
1 similar comment
|
/bigbonk review for issues |
/bigbonk review — PR #1870 (Babel flowtype page compilation)Reviewed the full current state through Verified locally
Confirmed resolved
Notes (all non-blocking)
SummaryNo blocking issues. The implementation is clean and well-tested: detection, the real Babel→OXC two-stage transform, sourcemap chaining, the babel-missing actionable error, and the cache/monorepo semantics are all exercised per-PR via a real-deps fixture. Checks pass; the three notes above are minor. Working tree left clean. |
|
Posted the review to PR #1870. SummaryReviewed the full current state through Verified locally:
Confirmed resolved:
Notes (non-blocking):
Working tree left clean. |
Fixes #1506.
Failing test:
test/e2e/babel/index.test.ts— "Babel > Should compile a page with flowtype correctly".Adds Babel flowtype page compilation support (changes in
packages/vinext/src/index.ts+tests/babel-flowtype.test.ts).Note: recovered from a worker that completed the edit but was cut off before committing; relying on CI (Check/Vitest/E2E) + bonk for verification.