From 425232027a86a7347ef2c3debbe9308f62d37bba Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Arnaud=20Barr=C3=A9?= Date: Sat, 30 Aug 2025 16:43:31 +0200 Subject: [PATCH 1/3] feat(create-vite): support react compiler --- packages/create-vite/__tests__/cli.spec.ts | 21 +++++ packages/create-vite/src/index.ts | 92 +++++++++++++++++-- .../create-vite/template-react-ts/README.md | 4 + packages/create-vite/template-react/README.md | 4 + 4 files changed, 112 insertions(+), 9 deletions(-) diff --git a/packages/create-vite/__tests__/cli.spec.ts b/packages/create-vite/__tests__/cli.spec.ts index a0c4bab8ecd98b..2d5020c6a14e62 100644 --- a/packages/create-vite/__tests__/cli.spec.ts +++ b/packages/create-vite/__tests__/cli.spec.ts @@ -151,6 +151,27 @@ test('successfully scaffolds a project with subfolder based on react starter tem expect(templateFilesReact).toEqual(generatedFiles) }) +test('successfully scaffolds a project based on react-compiler-ts starter template', () => { + const { stdout } = run([projectName, '--template', 'react-compiler-ts'], { + cwd: __dirname, + }) + const configFile = fs.readFileSync( + path.join(genPath, 'vite.config.ts'), + 'utf-8', + ) + const packageJsonFile = fs.readFileSync( + path.join(genPath, 'package.json'), + 'utf-8', + ) + const readmeFile = fs.readFileSync(path.join(genPath, 'README.md'), 'utf-8') + + // Assertions + expect(stdout).toContain(`Scaffolding project in ${genPath}`) + expect(configFile).toContain('babel-plugin-react-compiler') + expect(packageJsonFile).toContain('babel-plugin-react-compiler') + expect(readmeFile).toContain('The React Compiler is enabled on this template') +}) + test('successfully scaffolds a project with subfolder based on react starter template with rolldown flag', () => { const { stdout } = run( [`subfolder/${projectName}`, '--template', 'react', '--rolldown'], diff --git a/packages/create-vite/src/index.ts b/packages/create-vite/src/index.ts index 37fc3b9a2f5a13..e6e1f40350bb02 100755 --- a/packages/create-vite/src/index.ts +++ b/packages/create-vite/src/index.ts @@ -47,15 +47,16 @@ Options: --interactive / --no-interactive force interactive / non-interactive mode Available templates: -${yellow ('vanilla-ts vanilla' )} -${green ('vue-ts vue' )} -${cyan ('react-ts react' )} -${cyan ('react-swc-ts react-swc')} -${magenta ('preact-ts preact' )} -${redBright ('lit-ts lit' )} -${red ('svelte-ts svelte' )} -${blue ('solid-ts solid' )} -${blueBright('qwik-ts qwik' )}` +${yellow ('vanilla-ts vanilla' )} +${green ('vue-ts vue' )} +${cyan ('react-ts react' )} +${cyan ('react-compiler-ts react-compiler')} +${cyan ('react-swc-ts react-swc' )} +${magenta ('preact-ts preact' )} +${redBright ('lit-ts lit' )} +${red ('svelte-ts svelte' )} +${blue ('solid-ts solid' )} +${blueBright('qwik-ts qwik' )}` type ColorFunc = (str: string | number) => string type Framework = { @@ -128,6 +129,11 @@ const FRAMEWORKS: Framework[] = [ display: 'TypeScript', color: blue, }, + { + name: 'react-compiler-ts', + display: 'TypeScript + React Compiler', + color: blue, + }, { name: 'react-swc-ts', display: 'TypeScript + SWC', @@ -138,6 +144,11 @@ const FRAMEWORKS: Framework[] = [ display: 'JavaScript', color: yellow, }, + { + name: 'react-compiler', + display: 'JavaScript + React Compiler', + color: yellow, + }, { name: 'react-swc', display: 'JavaScript + SWC', @@ -566,6 +577,11 @@ async function init() { isReactSwc = true template = template.replace('-swc', '') } + let isReactCompiler = false + if (template.includes('react-compiler')) { + isReactCompiler = true + template = template.replace('-compiler', '') + } const { customCommand } = FRAMEWORKS.flatMap((f) => f.variants).find((v) => v.name === template) ?? {} @@ -667,6 +683,8 @@ async function init() { if (isReactSwc) { setupReactSwc(root, template.endsWith('-ts')) + } else if (isReactCompiler) { + setupReactCompiler(root, template.endsWith('-ts')) } if (immediate) { @@ -780,6 +798,62 @@ function setupReactSwc(root: string, isTs: boolean) { return content.replace('@vitejs/plugin-react', '@vitejs/plugin-react-swc') }, ) + updateReactCompilerReadme( + root, + 'The React Compiler is currently not compatible with SWC. See [this issue](https://github.com/vitejs/vite-plugin-react/issues/428) for tracking the progress.', + ) +} + +function setupReactCompiler(root: string, isTs: boolean) { + // renovate: datasource=npm depName=babel-plugin-react-compiler + const reactCompilerPluginVersion = '19.1.0-rc.3' + + editFile(path.resolve(root, 'package.json'), (content) => { + const asObject = JSON.parse(content) + const devDepsEntries = Object.entries(asObject.devDependencies) + devDepsEntries.push([ + 'babel-plugin-react-compiler', + `^${reactCompilerPluginVersion}`, + ]) + devDepsEntries.sort() + asObject.devDependencies = Object.fromEntries(devDepsEntries) + return JSON.stringify(asObject, null, 2) + '\n' + }) + editFile( + path.resolve(root, `vite.config.${isTs ? 'ts' : 'js'}`), + (content) => { + return content.replace( + ' plugins: [react()],', + ` plugins: [ + react({ + babel: { + plugins: [['babel-plugin-react-compiler']], + }, + }), + ],`, + ) + }, + ) + updateReactCompilerReadme( + root, + 'The React Compiler is enabled on this template. See [this documentation](https://react.dev/learn/react-compiler) for more information.', + ) +} + +function updateReactCompilerReadme(root: string, newBody: string) { + editFile(path.resolve(root, `README.md`), (content) => { + const h2Start = content.indexOf('## React Compiler') + const bodyStart = content.indexOf('\n\n', h2Start) + const comilerSectionEnd = content.indexOf('\n## ', bodyStart) + if (h2Start === -1 || bodyStart === -1 || comilerSectionEnd === -1) { + console.warn('Could not update compiler section in README.md') + return content + } + return content.replace( + content.slice(bodyStart + 2, comilerSectionEnd - 1), + newBody, + ) + }) } function editFile(file: string, callback: (content: string) => string) { diff --git a/packages/create-vite/template-react-ts/README.md b/packages/create-vite/template-react-ts/README.md index d5e3c12dea8786..7c8e3b95638614 100644 --- a/packages/create-vite/template-react-ts/README.md +++ b/packages/create-vite/template-react-ts/README.md @@ -7,6 +7,10 @@ Currently, two official plugins are available: - [@vitejs/plugin-react](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react) uses [Babel](https://babeljs.io/) for Fast Refresh - [@vitejs/plugin-react-swc](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react-swc) uses [SWC](https://swc.rs/) for Fast Refresh +## React Compiler + +The React Compiler is not enabled on this template. To add it, see [this documentation](https://react.dev/learn/react-compiler/installation). + ## Expanding the ESLint configuration If you are developing a production application, we recommend updating the configuration to enable type-aware lint rules: diff --git a/packages/create-vite/template-react/README.md b/packages/create-vite/template-react/README.md index 7059a962adb013..e1bb5507e006bb 100644 --- a/packages/create-vite/template-react/README.md +++ b/packages/create-vite/template-react/README.md @@ -7,6 +7,10 @@ Currently, two official plugins are available: - [@vitejs/plugin-react](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react) uses [Babel](https://babeljs.io/) for Fast Refresh - [@vitejs/plugin-react-swc](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react-swc) uses [SWC](https://swc.rs/) for Fast Refresh +## React Compiler + +The React Compiler is not enabled on this template. To add it, see [this documentation](https://react.dev/learn/react-compiler/installation). + ## Expanding the ESLint configuration If you are developing a production application, we recommend using TypeScript with type-aware lint rules enabled. Check out the [TS template](https://github.com/vitejs/vite/tree/main/packages/create-vite/template-react-ts) for information on how to integrate TypeScript and [`typescript-eslint`](https://typescript-eslint.io) in your project. From d49f5ae4f90f15a99b43260cb9c46e4647db23e9 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Arnaud=20Barr=C3=A9?= Date: Tue, 23 Sep 2025 00:15:27 +0200 Subject: [PATCH 2/3] typo --- packages/create-vite/src/index.ts | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/packages/create-vite/src/index.ts b/packages/create-vite/src/index.ts index e6e1f40350bb02..4662d44c02f984 100755 --- a/packages/create-vite/src/index.ts +++ b/packages/create-vite/src/index.ts @@ -844,13 +844,13 @@ function updateReactCompilerReadme(root: string, newBody: string) { editFile(path.resolve(root, `README.md`), (content) => { const h2Start = content.indexOf('## React Compiler') const bodyStart = content.indexOf('\n\n', h2Start) - const comilerSectionEnd = content.indexOf('\n## ', bodyStart) - if (h2Start === -1 || bodyStart === -1 || comilerSectionEnd === -1) { + const compilerSectionEnd = content.indexOf('\n## ', bodyStart) + if (h2Start === -1 || bodyStart === -1 || compilerSectionEnd === -1) { console.warn('Could not update compiler section in README.md') return content } return content.replace( - content.slice(bodyStart + 2, comilerSectionEnd - 1), + content.slice(bodyStart + 2, compilerSectionEnd - 1), newBody, ) }) From a86ad0b51877af6aaed399190630de1187b1a5d6 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Arnaud=20Barr=C3=A9?= Date: Tue, 23 Sep 2025 00:19:15 +0200 Subject: [PATCH 3/3] Add note on performances --- packages/create-vite/src/index.ts | 2 +- packages/create-vite/template-react-ts/README.md | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/packages/create-vite/src/index.ts b/packages/create-vite/src/index.ts index 4662d44c02f984..ce1c785619502b 100755 --- a/packages/create-vite/src/index.ts +++ b/packages/create-vite/src/index.ts @@ -836,7 +836,7 @@ function setupReactCompiler(root: string, isTs: boolean) { ) updateReactCompilerReadme( root, - 'The React Compiler is enabled on this template. See [this documentation](https://react.dev/learn/react-compiler) for more information.', + 'The React Compiler is enabled on this template. See [this documentation](https://react.dev/learn/react-compiler) for more information.\n\nNote: This will impact Vite dev & build performances.', ) } diff --git a/packages/create-vite/template-react-ts/README.md b/packages/create-vite/template-react-ts/README.md index 7c8e3b95638614..4866cf0f1456c2 100644 --- a/packages/create-vite/template-react-ts/README.md +++ b/packages/create-vite/template-react-ts/README.md @@ -9,7 +9,7 @@ Currently, two official plugins are available: ## React Compiler -The React Compiler is not enabled on this template. To add it, see [this documentation](https://react.dev/learn/react-compiler/installation). +The React Compiler is not enabled on this template because of its impact on dev & build performances. To add it, see [this documentation](https://react.dev/learn/react-compiler/installation). ## Expanding the ESLint configuration