miel.truyen/nx
1
0
Fork 0
Code Issues Pull Requests Actions 5 Packages Projects Releases Wiki Activity

feat(react): add swc as compiler option for react vite (#17224)

Browse Source
This commit is contained in:
Emily Xiong 2023-05-30 14:06:50 -04:00 committed by GitHub
parent 7c9ec7241e
commit 631a948ded
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
15 changed files with 64 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
docs/generated/packages/react/generators/library.json
View File

@ -171,7 +171,7 @@
"type": "string",
"enum": ["babel", "swc"],
"default": "babel",
"description": "Which compiler to use. Only applies to `bundler: 'rollup'`."
"description": "Which compiler to use."
},
"skipPackageJson": {
"description": "Do not add dependencies to `package.json`.",

6
docs/generated/packages/vite/generators/configuration.json
View File

@ -32,6 +32,12 @@
"default": "none",
"x-prompt": "What UI framework plugin should Vite use?"
},
"compiler": {
"type": "string",
"description": "Compiler to use for Vite when UI Framework is React.",
"enum": ["babel", "swc"],
"default": "babel"
},
"newProject": {
"type": "boolean",
"description": "Is this a new project?",

6
docs/generated/packages/vite/generators/init.json
View File

@ -15,6 +15,12 @@
"default": "react",
"x-prompt": "What UI framework plugin should Vite use?"
},
"compiler": {
"type": "string",
"description": "Compiler to use for Vite when UI Framework is React.",
"enum": ["babel", "swc"],
"default": "babel"
},
"includeLib": {
"type": "boolean",
"description": "Add dependencies needed to build libraries.",

25
e2e/react-extensions/src/react-vite.test.ts
View File

@ -19,11 +19,32 @@ describe('Build React applications and libraries with Vite', () => {
cleanupProject();
});
it('should test and lint app with bundler=vite', async () => {
it('should test and lint app with bundler=vite and compiler=babel', async () => {
const viteApp = uniq('viteapp');
runCLI(
`generate @nx/react:app ${viteApp} --bundler=vite --unitTestRunner=vitest --no-interactive`
`generate @nx/react:app ${viteApp} --bundler=vite --compiler=babel --unitTestRunner=vitest --no-interactive`
);
const appTestResults = await runCLIAsync(`test ${viteApp}`);
expect(appTestResults.combinedOutput).toContain(
'Successfully ran target test'
);
const appLintResults = await runCLIAsync(`lint ${viteApp}`);
expect(appLintResults.combinedOutput).toContain(
'Successfully ran target lint'
);
await runCLIAsync(`build ${viteApp}`);
checkFilesExist(`dist/apps/${viteApp}/index.html`);
}, 300_000);
it('should test and lint app with bundler=vite and compiler=swc', async () => {
const viteApp = uniq('viteapp');
runCLI(
`generate @nx/react:app ${viteApp} --bundler=vite --compiler=swc --unitTestRunner=vitest --no-interactive`
);
const appTestResults = await runCLIAsync(`test ${viteApp}`);

1
packages/react/src/generators/application/application.ts
View File

@ -131,6 +131,7 @@ export async function applicationGenerator(
newProject: true,
includeVitest: options.unitTestRunner === 'vitest',
inSourceTests: options.inSourceTests,
compiler: options.compiler,
skipFormat: true,
});
tasks.push(viteTask);

1
packages/react/src/generators/library/library.ts
View File

@ -73,6 +73,7 @@ export async function libraryGenerator(host: Tree, schema: Schema) {
includeLib: true,
inSourceTests: options.inSourceTests,
includeVitest: options.unitTestRunner === 'vitest',
compiler: options.compiler,
skipFormat: true,
});
tasks.push(viteTask);

2
packages/react/src/generators/library/schema.json
View File

@ -174,7 +174,7 @@
"type": "string",
"enum": ["babel", "swc"],
"default": "babel",
"description": "Which compiler to use. Only applies to `bundler: 'rollup'`."
"description": "Which compiler to use."
},
"skipPackageJson": {
"description": "Do not add dependencies to `package.json`.",

1
packages/vite/src/generators/configuration/configuration.ts
View File

@ -152,6 +152,7 @@ export async function viteConfigurationGenerator(
const initTask = await initGenerator(tree, {
uiFramework: schema.uiFramework,
includeLib: schema.includeLib,
compiler: schema.compiler,
});
tasks.push(initTask);

1
packages/vite/src/generators/configuration/schema.d.ts vendored
View File

@ -1,5 +1,6 @@
export interface ViteConfigurationGeneratorSchema {
uiFramework: 'react' | 'none';
compiler?: 'babel' | 'swc';
project: string;
newProject?: boolean;
includeVitest?: boolean;

6
packages/vite/src/generators/configuration/schema.json
View File

@ -32,6 +32,12 @@
"default": "none",
"x-prompt": "What UI framework plugin should Vite use?"
},
"compiler": {
"type": "string",
"description": "Compiler to use for Vite when UI Framework is React.",
"enum": ["babel", "swc"],
"default": "babel"
},
"newProject": {
"type": "boolean",
"description": "Is this a new project?",

7
packages/vite/src/generators/init/init.ts
View File

@ -17,6 +17,7 @@ import {
vitePluginDtsVersion,
vitePluginEslintVersion,
vitePluginReactVersion,
vitePluginReactSwcVersion,
vitestUiVersion,
vitestVersion,
viteTsConfigPathsVersion,
@ -41,7 +42,11 @@ function checkDependenciesInstalled(host: Tree, schema: InitGeneratorSchema) {
devDependencies['jsdom'] = jsdomVersion;
if (schema.uiFramework === 'react') {
devDependencies['@vitejs/plugin-react'] = vitePluginReactVersion;
if (schema.compiler === 'swc') {
devDependencies['@vitejs/plugin-react-swc'] = vitePluginReactSwcVersion;
} else {
devDependencies['@vitejs/plugin-react'] = vitePluginReactVersion;
}
}
if (schema.includeLib) {

1
packages/vite/src/generators/init/schema.d.ts vendored
View File

@ -1,4 +1,5 @@
export interface InitGeneratorSchema {
uiFramework: 'react' | 'none';
compiler?: 'babel' | 'swc';
includeLib?: boolean;
}

6
packages/vite/src/generators/init/schema.json
View File

@ -12,6 +12,12 @@
"default": "react",
"x-prompt": "What UI framework plugin should Vite use?"
},
"compiler": {
"type": "string",
"description": "Compiler to use for Vite when UI Framework is React.",
"enum": ["babel", "swc"],
"default": "babel"
},
"includeLib": {
"type": "boolean",
"description": "Add dependencies needed to build libraries.",

4
packages/vite/src/utils/generator-utils.ts
View File

@ -556,7 +556,9 @@ export function createOrEditViteConfig(
const reactPluginImportLine =
options.uiFramework === 'react'
? `import react from '@vitejs/plugin-react';`
? options.compiler === 'swc'
? `import react from '@vitejs/plugin-react-swc';`
: `import react from '@vitejs/plugin-react';`
: '';
const reactPlugin = options.uiFramework === 'react' ? `react(),` : '';

1
packages/vite/src/utils/versions.ts
View File

@ -4,6 +4,7 @@ export const vitePluginEslintVersion = '^1.8.1';
export const vitestVersion = '^0.31.0';
export const vitestUiVersion = '^0.31.0';
export const vitePluginReactVersion = '^3.0.0';
export const vitePluginReactSwcVersion = '^3.3.1';
export const vitePluginVueVersion = '^3.2.0';
export const vitePluginVueJsxVersion = '^2.1.1';
export const viteTsConfigPathsVersion = '^4.0.2';