mirror of
https://github.com/Gitlawb/openclaude.git
synced 2026-08-24 02:34:15 -05:00
fix(build): shim jsxDEV when bundling production React — TUI rendered nothing (#1863)
Since 354feb48 (#1856) mapped react/jsx-dev-runtime to React's production
file, the CLI launched to the startup banner and then rendered no UI at
all — no prompt box, no typing, no visible error.
Root cause: Bun transpiles our JSX with the dev transform (no
NODE_ENV=production at build time), so every JSX callsite compiles to
jsxDEV(). React's react-jsx-dev-runtime.production.js deliberately exports
`jsxDEV: undefined` (production bundles are expected to use the non-dev
transform), so every element creation invoked undefined() and React never
committed a single frame. Nothing surfaced because the failure happens
while building the element tree, before the renderer's error callbacks.
Fix: map react/jsx-dev-runtime to a local shim that dispatches jsxDEV onto
the production jsx/jsxs — the same dispatch React's own dev runtime
performs, minus dev-only validation. The shim's own react/jsx-runtime
import is remapped by the plugin, so the bundle stays all-production
(memory goal of #1856 intact): react, jsx-runtime, reconciler, constants,
and scheduler all resolve to .production.js, with no development copies.
Regression tests (per review) pin the shim's dispatch: jsxDEV must exist,
route to jsx/jsxs on isStaticChildren, pass the key through, re-export the
real Fragment, and produce the standard element shape — compared directly
against the real react/jsx-runtime exports so the tests track React.
Verified live in the TUI (tmux): prompt box renders, typing echoes, slash
menu opens and filters, Esc dismisses; sourcemap shows only production
React modules plus the shim.
Co-authored-by: OpenClaude <openclaude@gitlawb.com>
This commit is contained in:
co-authored by
OpenClaude
parent
77c0a0d780
commit
203f05538e
+7
-1
@@ -29,9 +29,15 @@ const productionReactModules = new Map<string, string>([
|
||||
'react/jsx-runtime',
|
||||
join(reactPackageDir, 'cjs/react-jsx-runtime.production.js'),
|
||||
],
|
||||
// NOT react-jsx-dev-runtime.production.js: that file exports
|
||||
// `jsxDEV: undefined` on purpose (production code is expected to use the
|
||||
// non-dev transform), but Bun transpiles our JSX to jsxDEV() calls, so the
|
||||
// real production file would leave every component invoking undefined()
|
||||
// and the UI would never render. The shim dispatches to production
|
||||
// jsx/jsxs; its own `react/jsx-runtime` import is remapped by this plugin.
|
||||
[
|
||||
'react/jsx-dev-runtime',
|
||||
join(reactPackageDir, 'cjs/react-jsx-dev-runtime.production.js'),
|
||||
join(import.meta.dir, 'reactJsxDevRuntimeProductionShim.js'),
|
||||
],
|
||||
[
|
||||
'react-reconciler',
|
||||
|
||||
@@ -0,0 +1,18 @@
|
||||
// React's cjs/react-jsx-dev-runtime.production.js deliberately exports
|
||||
// `jsxDEV: undefined` — production bundles are expected to compile JSX with
|
||||
// the non-dev transform. Our CLI build runs Bun's transpiler without
|
||||
// NODE_ENV=production, so every JSX callsite compiles to a jsxDEV() call.
|
||||
// Mapping the specifier straight to React's production file therefore left
|
||||
// the whole UI invoking undefined() and nothing past the startup banner ever
|
||||
// rendered. Implement jsxDEV in terms of the production jsx/jsxs instead —
|
||||
// the same dispatch React's own dev runtime performs, minus dev-only
|
||||
// validation. The extra dev-transform args (source, self) are ignorable.
|
||||
import { Fragment, jsx, jsxs } from 'react/jsx-runtime'
|
||||
|
||||
export { Fragment }
|
||||
|
||||
export function jsxDEV(type, config, maybeKey, isStaticChildren) {
|
||||
return isStaticChildren
|
||||
? jsxs(type, config, maybeKey)
|
||||
: jsx(type, config, maybeKey)
|
||||
}
|
||||
@@ -0,0 +1,43 @@
|
||||
import { describe, expect, test } from 'bun:test'
|
||||
// eslint-disable-next-line no-restricted-imports -- comparing shim output against the real runtime is the point
|
||||
import { Fragment, jsx, jsxs } from 'react/jsx-runtime'
|
||||
import {
|
||||
Fragment as ShimFragment,
|
||||
jsxDEV,
|
||||
} from './reactJsxDevRuntimeProductionShim.js'
|
||||
|
||||
// The CLI bundle compiles every JSX callsite to jsxDEV() (Bun's dev
|
||||
// transform) but bundles production React, whose jsx-dev-runtime exports
|
||||
// `jsxDEV: undefined` — that combination rendered the entire TUI blank with
|
||||
// no error (see the shim's header comment). These tests pin the shim's
|
||||
// dispatch so a future edit can't silently reintroduce that failure.
|
||||
describe('reactJsxDevRuntimeProductionShim', () => {
|
||||
test('jsxDEV is a function (the whole reason the shim exists)', () => {
|
||||
expect(typeof jsxDEV).toBe('function')
|
||||
})
|
||||
|
||||
test('re-exports the real Fragment', () => {
|
||||
expect(ShimFragment).toBe(Fragment)
|
||||
})
|
||||
|
||||
test('routes to jsx() when isStaticChildren is false', () => {
|
||||
const props = { className: 'a', children: 'hi' }
|
||||
expect(jsxDEV('div', props, 'k', false)).toEqual(jsx('div', props, 'k'))
|
||||
})
|
||||
|
||||
test('routes to jsxs() when isStaticChildren is true', () => {
|
||||
const children = ['one', 'two']
|
||||
const props = { children }
|
||||
expect(jsxDEV('div', props, undefined, true)).toEqual(
|
||||
jsxs('div', props, undefined),
|
||||
)
|
||||
})
|
||||
|
||||
test('returns the expected element shape for a trivial element', () => {
|
||||
const el = jsxDEV('span', { children: 'x' }, 'key1', false)
|
||||
expect(el.$$typeof).toBe(Symbol.for('react.transitional.element'))
|
||||
expect(el.type).toBe('span')
|
||||
expect(el.key).toBe('key1')
|
||||
expect(el.props).toEqual({ children: 'x' })
|
||||
})
|
||||
})
|
||||
Reference in New Issue
Block a user