diff --git a/docs/map.json b/docs/map.json index 934778e187d72e..ac1c941031e00e 100644 --- a/docs/map.json +++ b/docs/map.json @@ -2079,6 +2079,20 @@ } ] }, + { + "name": "vue", + "id": "vue", + "description": "Vue package.", + "itemList": [ + { + "id": "overview", + "path": "/packages/vue", + "name": "Overview of the Nx Vue Plugin", + "description": "The Nx Plugin for Vue contains generators for managing Vue applications and libraries within an Nx workspace. This page also explains how to configure Vue on your Nx workspace.", + "file": "shared/packages/vue/vue-plugin" + } + ] + }, { "name": "webpack", "id": "webpack", diff --git a/docs/packages.json b/docs/packages.json index e48b86656430ad..11483d176b7abd 100644 --- a/docs/packages.json +++ b/docs/packages.json @@ -361,6 +361,16 @@ "generators": ["init", "configuration", "vitest"] } }, + { + "name": "vue", + "packageName": "vue", + "description": "The Vue plugin for Nx contains executors and generators for managing Vue applications and libraries within an Nx workspace. It provides:\n\n\n- Integration with libraries such as Jest, Cypress, and Storybook.\n\n- Generators for applications, libraries, components, hooks, and more.\n\n- Library build support for publishing packages to npm or other registries.\n\n- Utilities for automatic workspace refactoring.", + "path": "generated/packages/vite.json", + "schemas": { + "executors": [], + "generators": ["init", "library", "application", "component"] + } + }, { "name": "web", "packageName": "web", diff --git a/docs/shared/packages/vue/vue-plugin.md b/docs/shared/packages/vue/vue-plugin.md new file mode 100644 index 00000000000000..909efd6957661d --- /dev/null +++ b/docs/shared/packages/vue/vue-plugin.md @@ -0,0 +1,60 @@ +--- +title: Overview of the Nx Vue Plugin +description: The Nx Plugin for Vue contains generators for managing Vue applications and libraries within an Nx workspace. This page also explains how to configure Vue on your Nx workspace. +--- + +The Nx plugin for [Vue](https://vuejs.org/). + +## Setting up a new Nx workspace with Vue + +You can create a new workspace that uses Vue with one of the following commands: + +- Generate a new monorepo with a Vue app set up with Vue + +```shell +npx create-nx-workspace@latest --preset=vue +``` + +## Add Vue to an existing workspace + +There are a number of ways to use Vue in your existing workspace. + +### Install the `@nx/vue` plugin + +{% tabs %} +{% tab label="npm" %} + +```shell +npm install -D @nx/vue +``` + +{% /tab %} +{% tab label="yarn" %} + +```shell +yarn add -D @nx/vue +``` + +{% /tab %} +{% tab label="pnpm" %} + +```shell +pnpm install -D @nx/vue +``` + +{% /tab %} +{% /tabs %} + +### Generate a new project using Vue + +To generate a Vue application, run the following: + +```bash +nx g @nx/vue:app my-app +``` + +To generate a Vue library, run the following: + +```bash +nx g @nx/vue:lib my-lib +``` diff --git a/e2e/utils/create-project-utils.ts b/e2e/utils/create-project-utils.ts index b00d2b492a6951..01a91b4a1be824 100644 --- a/e2e/utils/create-project-utils.ts +++ b/e2e/utils/create-project-utils.ts @@ -89,6 +89,7 @@ export function newProject({ `@nx/rollup`, `@nx/react`, `@nx/storybook`, + `@nx/vue`, `@nx/vite`, `@nx/web`, `@nx/webpack`, diff --git a/e2e/vue/src/vue.test.ts b/e2e/vue/src/vue.test.ts new file mode 100644 index 00000000000000..a6023b20882e5c --- /dev/null +++ b/e2e/vue/src/vue.test.ts @@ -0,0 +1,63 @@ +import { + cleanupProject, + killPorts, + newProject, + promisifiedTreeKill, + runCLI, + runCLIAsync, + runCommandUntil, + uniq, +} from '@nx/e2e/utils'; + +const myApp = uniq('my-app'); +const myLib = uniq('my-lib'); + +describe('Vue Plugin', () => { + let proj: string; + + describe('Vite on React apps', () => { + describe('successfully create and serve a vue app', () => { + beforeEach(() => { + proj = newProject({ + unsetProjectNameAndRootFormat: false, + }); + runCLI(`generate @nx/vue:app ${myApp}`); + runCLI(`generate @nx/vue:lib ${myLib} --bundler=vite`); + }); + afterEach(() => cleanupProject()); + + it('should serve application in dev mode', async () => { + const p = await runCommandUntil(`run ${myApp}:serve`, (output) => { + return output.includes('Local:'); + }); + try { + await promisifiedTreeKill(p.pid, 'SIGKILL'); + await killPorts(4200); + } catch (e) { + // ignore + } + }, 200_000); + + it('should test application', async () => { + const result = await runCLIAsync(`test ${myApp}`); + expect(result.combinedOutput).toContain( + `Successfully ran target test for project ${myApp}` + ); + }); + + it('should build application', async () => { + const result = await runCLIAsync(`build ${myApp}`); + expect(result.combinedOutput).toContain( + `Successfully ran target build for project ${myApp}` + ); + }); + + it('should build library', async () => { + const result = await runCLIAsync(`build ${myLib}`); + expect(result.combinedOutput).toContain( + `Successfully ran target build for project ${myLib}` + ); + }); + }); + }); +}); diff --git a/packages/react/src/generators/application/application.spec.ts b/packages/react/src/generators/application/application.spec.ts index cd9a5113ccc3e3..2c04b808011aaa 100644 --- a/packages/react/src/generators/application/application.spec.ts +++ b/packages/react/src/generators/application/application.spec.ts @@ -63,6 +63,7 @@ describe('app', () => { 'vitest/importMeta', 'vite/client', 'node', + 'vitest', ]); }); diff --git a/packages/react/src/generators/application/application.ts b/packages/react/src/generators/application/application.ts index 9e6fe7d9e525ba..9eea9beea4d3f9 100644 --- a/packages/react/src/generators/application/application.ts +++ b/packages/react/src/generators/application/application.ts @@ -39,6 +39,7 @@ import { addExtendsToLintConfig, isEslintConfigSupported, } from '@nx/linter/src/generators/utils/eslint-file'; +import { createOrEditViteConfig } from '@nx/vite'; async function addLinting(host: Tree, options: NormalizedSchema) { const tasks: GeneratorCallback[] = []; @@ -138,6 +139,28 @@ export async function applicationGeneratorInternal( skipFormat: true, }); tasks.push(viteTask); + createOrEditViteConfig( + host, + { + project: options.projectName, + includeLib: false, + includeVitest: options.unitTestRunner === 'vitest', + inSourceTests: options.inSourceTests, + rollupOptionsExternal: [ + `'react'`, + `'react-dom'`, + `'react/jsx-runtime'`, + ], + rollupOptionsExternalString: `"'react', 'react-dom', 'react/jsx-runtime'"`, + imports: [ + options.compiler === 'swc' + ? `import react from '@vitejs/plugin-react-swc'` + : `import react from '@vitejs/plugin-react'`, + ], + plugins: ['react()'], + }, + false + ); } else if (options.bundler === 'webpack') { const { webpackInitGenerator } = ensurePackage< typeof import('@nx/webpack') @@ -180,6 +203,28 @@ export async function applicationGeneratorInternal( skipFormat: true, }); tasks.push(vitestTask); + createOrEditViteConfig( + host, + { + project: options.projectName, + includeLib: false, + includeVitest: true, + inSourceTests: options.inSourceTests, + rollupOptionsExternal: [ + `'react'`, + `'react-dom'`, + `'react/jsx-runtime'`, + ], + rollupOptionsExternalString: `"'react', 'react-dom', 'react/jsx-runtime'"`, + imports: [ + options.compiler === 'swc' + ? `import react from '@vitejs/plugin-react-swc'` + : `import react from '@vitejs/plugin-react'`, + ], + plugins: ['react()'], + }, + true + ); } if ( diff --git a/packages/react/src/generators/library/library.spec.ts b/packages/react/src/generators/library/library.spec.ts index ebc8bfd12427f7..2420d6b64e499a 100644 --- a/packages/react/src/generators/library/library.spec.ts +++ b/packages/react/src/generators/library/library.spec.ts @@ -80,6 +80,7 @@ describe('lib', () => { 'vitest/importMeta', 'vite/client', 'node', + 'vitest', ]); }); diff --git a/packages/react/src/generators/library/library.ts b/packages/react/src/generators/library/library.ts index 413291220efa88..969cc4b8d0917c 100644 --- a/packages/react/src/generators/library/library.ts +++ b/packages/react/src/generators/library/library.ts @@ -69,9 +69,8 @@ export async function libraryGeneratorInternal(host: Tree, schema: Schema) { // Set up build target if (options.buildable && options.bundler === 'vite') { - const { viteConfigurationGenerator } = ensurePackage< - typeof import('@nx/vite') - >('@nx/vite', nxVersion); + const { viteConfigurationGenerator, createOrEditViteConfig } = + ensurePackage('@nx/vite', nxVersion); const viteTask = await viteConfigurationGenerator(host, { uiFramework: 'react', project: options.name, @@ -84,6 +83,28 @@ export async function libraryGeneratorInternal(host: Tree, schema: Schema) { testEnvironment: 'jsdom', }); tasks.push(viteTask); + createOrEditViteConfig( + host, + { + project: options.name, + includeLib: true, + includeVitest: options.unitTestRunner === 'vitest', + inSourceTests: options.inSourceTests, + rollupOptionsExternal: [ + `'react'`, + `'react-dom'`, + `'react/jsx-runtime'`, + ], + rollupOptionsExternalString: `"'react', 'react-dom', 'react/jsx-runtime'"`, + imports: [ + options.compiler === 'swc' + ? `import react from '@vitejs/plugin-react-swc'` + : `import react from '@vitejs/plugin-react'`, + ], + plugins: ['react()'], + }, + false + ); } else if (options.buildable && options.bundler === 'rollup') { const rollupTask = await addRollupBuildTarget(host, options); tasks.push(rollupTask); @@ -120,10 +141,9 @@ export async function libraryGeneratorInternal(host: Tree, schema: Schema) { options.unitTestRunner === 'vitest' && options.bundler !== 'vite' // tests are already configured if bundler is vite ) { - const { vitestGenerator } = ensurePackage( - '@nx/vite', - nxVersion - ); + const { vitestGenerator, createOrEditViteConfig } = ensurePackage< + typeof import('@nx/vite') + >('@nx/vite', nxVersion); const vitestTask = await vitestGenerator(host, { uiFramework: 'react', project: options.name, @@ -133,6 +153,24 @@ export async function libraryGeneratorInternal(host: Tree, schema: Schema) { testEnvironment: 'jsdom', }); tasks.push(vitestTask); + createOrEditViteConfig( + host, + { + project: options.name, + includeLib: true, + includeVitest: true, + inSourceTests: options.inSourceTests, + rollupOptionsExternal: [ + `'react'`, + `'react-dom'`, + `'react/jsx-runtime'`, + ], + rollupOptionsExternalString: `"'react', 'react-dom', 'react/jsx-runtime'"`, + imports: [`import react from '@vitejs/plugin-react'`], + plugins: ['react()'], + }, + true + ); } if (options.component) { diff --git a/packages/vite/src/generators/configuration/__snapshots__/configuration.spec.ts.snap b/packages/vite/src/generators/configuration/__snapshots__/configuration.spec.ts.snap index 13b7f088bbde14..6255454a5b971a 100644 --- a/packages/vite/src/generators/configuration/__snapshots__/configuration.spec.ts.snap +++ b/packages/vite/src/generators/configuration/__snapshots__/configuration.spec.ts.snap @@ -1,24 +1,24 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP exports[`@nx/vite:configuration library mode should add config for building library 1`] = ` -"/// +"/// import { defineConfig } from 'vite'; import react from '@vitejs/plugin-react'; -import { nxViteTsPaths } from '@nx/vite/plugins/nx-tsconfig-paths.plugin'; import dts from 'vite-plugin-dts'; import * as path from 'path'; +import { nxViteTsPaths } from '@nx/vite/plugins/nx-tsconfig-paths.plugin'; export default defineConfig({ cacheDir: '../node_modules/.vite/my-lib', plugins: [ + react(), + nxViteTsPaths(), dts({ entryRoot: 'src', tsConfigFilePath: path.join(__dirname, 'tsconfig.lib.json'), skipDiagnostics: true, }), - react(), - nxViteTsPaths(), ], // Uncomment this if you are using workers. @@ -48,24 +48,24 @@ export default defineConfig({ `; exports[`@nx/vite:configuration library mode should set up non buildable library correctly 1`] = ` -"/// +"/// import { defineConfig } from 'vite'; import react from '@vitejs/plugin-react'; -import { nxViteTsPaths } from '@nx/vite/plugins/nx-tsconfig-paths.plugin'; import dts from 'vite-plugin-dts'; import * as path from 'path'; +import { nxViteTsPaths } from '@nx/vite/plugins/nx-tsconfig-paths.plugin'; export default defineConfig({ cacheDir: '../../node_modules/.vite/react-lib-nonb-jest', plugins: [ + react(), + nxViteTsPaths(), dts({ entryRoot: 'src', tsConfigFilePath: path.join(__dirname, 'tsconfig.lib.json'), skipDiagnostics: true, }), - react(), - nxViteTsPaths(), ], // Uncomment this if you are using workers. @@ -143,7 +143,7 @@ exports[`@nx/vite:configuration library mode should set up non buildable library import * as path from 'path'; import { defineConfig } from 'vite'; import react from '@vitejs/plugin-react'; -import viteTsConfigPaths from 'vite-tsconfig-paths'; +import { nxViteTsPaths } from '@nx/vite/plugins/nx-tsconfig-paths.plugin'; export default defineConfig({ // Configuration for building your library. @@ -165,12 +165,8 @@ export default defineConfig({ }, }, plugins: [ - ...[ - react(), - viteTsConfigPaths({ - root: '../../', - }), - ], + nxViteTsPaths(), + react(), dts({ entryRoot: 'src', tsConfigFilePath: path.join(__dirname, 'tsconfig.lib.json'), @@ -180,9 +176,7 @@ export default defineConfig({ test: { globals: true, - cache: { - dir: '../../node_modules/.vitest', - }, + cache: { dir: '../../node_modules/.vitest' }, environment: 'jsdom', include: ['src/**/*.{test,spec}.{js,mjs,cjs,ts,mts,cts,jsx,tsx}'], }, @@ -286,7 +280,7 @@ exports[`@nx/vite:configuration transform React app to use Vite by providing cus `; exports[`@nx/vite:configuration transform React app to use Vite should create vite.config file at the root of the app 1`] = ` -"/// +"/// import { defineConfig } from 'vite'; import react from '@vitejs/plugin-react'; import { nxViteTsPaths } from '@nx/vite/plugins/nx-tsconfig-paths.plugin'; @@ -427,7 +421,7 @@ exports[`@nx/vite:configuration transform React app to use Vite should transform `; exports[`@nx/vite:configuration transform Web app to use Vite should create vite.config file at the root of the app 1`] = ` -"/// +"/// import { defineConfig } from 'vite'; import { nxViteTsPaths } from '@nx/vite/plugins/nx-tsconfig-paths.plugin'; @@ -555,7 +549,7 @@ exports[`@nx/vite:configuration transform Web app to use Vite should transform w `; exports[`@nx/vite:configuration vitest should create a vitest configuration if "includeVitest" is true 1`] = ` -"/// +"/// import { defineConfig } from 'vite'; import react from '@vitejs/plugin-react'; import { nxViteTsPaths } from '@nx/vite/plugins/nx-tsconfig-paths.plugin'; diff --git a/packages/vite/src/generators/configuration/configuration.spec.ts b/packages/vite/src/generators/configuration/configuration.spec.ts index 4d423ba05a92a5..13920f06013148 100644 --- a/packages/vite/src/generators/configuration/configuration.spec.ts +++ b/packages/vite/src/generators/configuration/configuration.spec.ts @@ -350,7 +350,6 @@ describe('@nx/vite:configuration', () => { const { Confirm } = require('enquirer'); const confirmSpy = jest.spyOn(Confirm.prototype, 'run'); confirmSpy.mockResolvedValue(true); - expect.assertions(2); mockReactLibNonBuildableVitestRunnerGenerator(tree); diff --git a/packages/vite/src/generators/configuration/configuration.ts b/packages/vite/src/generators/configuration/configuration.ts index bafa4642cae372..f433f5f9dfa751 100644 --- a/packages/vite/src/generators/configuration/configuration.ts +++ b/packages/vite/src/generators/configuration/configuration.ts @@ -198,7 +198,32 @@ export async function viteConfigurationGenerator( }); } - createOrEditViteConfig(tree, schema, false, projectAlreadyHasViteTargets); + if (schema.uiFramework === 'react') { + createOrEditViteConfig( + tree, + { + project: schema.project, + includeLib: schema.includeLib, + includeVitest: schema.includeVitest, + inSourceTests: schema.inSourceTests, + rollupOptionsExternal: [ + `'react'`, + `'react-dom'`, + `'react/jsx-runtime'`, + ], + rollupOptionsExternalString: `"'react', 'react-dom', 'react/jsx-runtime'"`, + imports: [ + schema.compiler === 'swc' + ? `import react from '@vitejs/plugin-react-swc'` + : `import react from '@vitejs/plugin-react'`, + ], + plugins: ['react()'], + }, + false + ); + } else { + createOrEditViteConfig(tree, schema, false, projectAlreadyHasViteTargets); + } if (schema.includeVitest) { const vitestTask = await vitestGenerator(tree, { diff --git a/packages/vite/src/generators/init/init.ts b/packages/vite/src/generators/init/init.ts index bf2c38b9611904..9a52754d89163e 100644 --- a/packages/vite/src/generators/init/init.ts +++ b/packages/vite/src/generators/init/init.ts @@ -45,7 +45,7 @@ function checkDependenciesInstalled(host: Tree, schema: InitGeneratorSchema) { devDependencies['happy-dom'] = happyDomVersion; } else if (schema.testEnvironment === 'edge-runtime') { devDependencies['@edge-runtime/vm'] = edgeRuntimeVmVersion; - } else if (schema.testEnvironment !== 'node') { + } else if (schema.testEnvironment !== 'node' && schema.testEnvironment) { logger.info( `A custom environment was provided: ${schema.testEnvironment}. You need to install it manually.` ); diff --git a/packages/vite/src/generators/vitest/__snapshots__/vitest.spec.ts.snap b/packages/vite/src/generators/vitest/__snapshots__/vitest.spec.ts.snap index 4087eb8e6d90aa..247c582f920251 100644 --- a/packages/vite/src/generators/vitest/__snapshots__/vitest.spec.ts.snap +++ b/packages/vite/src/generators/vitest/__snapshots__/vitest.spec.ts.snap @@ -1,7 +1,7 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP exports[`vitest generator insourceTests should add the insourceSource option in the vite config 1`] = ` -"/// +"/// import { defineConfig } from 'vite'; import react from '@vitejs/plugin-react'; import { nxViteTsPaths } from '@nx/vite/plugins/nx-tsconfig-paths.plugin'; @@ -33,7 +33,7 @@ export default defineConfig({ `; exports[`vitest generator vite.config should create correct vite.config.ts file for apps 1`] = ` -"/// +"/// import { defineConfig } from 'vite'; import react from '@vitejs/plugin-react'; import { nxViteTsPaths } from '@nx/vite/plugins/nx-tsconfig-paths.plugin'; @@ -61,7 +61,7 @@ export default defineConfig({ `; exports[`vitest generator vite.config should create correct vite.config.ts file for non buildable libs 1`] = ` -"/// +"/// import { defineConfig } from 'vite'; import react from '@vitejs/plugin-react'; import { nxViteTsPaths } from '@nx/vite/plugins/nx-tsconfig-paths.plugin'; diff --git a/packages/vite/src/generators/vitest/vitest-generator.ts b/packages/vite/src/generators/vitest/vitest-generator.ts index 92388d8d0aef6d..9cfab4d019defc 100644 --- a/packages/vite/src/generators/vitest/vitest-generator.ts +++ b/packages/vite/src/generators/vitest/vitest-generator.ts @@ -52,15 +52,36 @@ export async function vitestGenerator( tasks.push(initTask); if (!schema.skipViteConfig) { - createOrEditViteConfig( - tree, - { - ...schema, - includeVitest: true, - includeLib: projectType === 'library', - }, - true - ); + if (schema.uiFramework === 'react') { + createOrEditViteConfig( + tree, + { + project: schema.project, + includeLib: projectType === 'library', + includeVitest: true, + inSourceTests: schema.inSourceTests, + rollupOptionsExternal: [ + `'react'`, + `'react-dom'`, + `'react/jsx-runtime'`, + ], + rollupOptionsExternalString: `"'react', 'react-dom', 'react/jsx-runtime'"`, + imports: [`import react from '@vitejs/plugin-react'`], + plugins: ['react()'], + }, + true + ); + } else { + createOrEditViteConfig( + tree, + { + ...schema, + includeVitest: true, + includeLib: projectType === 'library', + }, + true + ); + } } createFiles(tree, schema, root); @@ -89,26 +110,55 @@ function updateTsConfig( options: VitestGeneratorSchema, projectRoot: string ) { - updateJson(tree, joinPathFragments(projectRoot, 'tsconfig.json'), (json) => { - if ( - json.references && - !json.references.some((r) => r.path === './tsconfig.spec.json') - ) { - json.references.push({ - path: './tsconfig.spec.json', - }); - } + if (tree.exists(joinPathFragments(projectRoot, 'tsconfig.spec.json'))) { + updateJson( + tree, + joinPathFragments(projectRoot, 'tsconfig.spec.json'), + (json) => { + if (!json.compilerOptions?.types?.includes('vitest')) { + if (json.compilerOptions?.types) { + json.compilerOptions.types.push('vitest'); + } else { + json.compilerOptions ??= {}; + json.compilerOptions.types = ['vitest']; + } + } + return json; + } + ); - if (!json.compilerOptions?.types?.includes('vitest')) { - if (json.compilerOptions?.types) { - json.compilerOptions.types.push('vitest'); - } else { - json.compilerOptions ??= {}; - json.compilerOptions.types = ['vitest']; + updateJson( + tree, + joinPathFragments(projectRoot, 'tsconfig.json'), + (json) => { + if ( + json.references && + !json.references.some((r) => r.path === './tsconfig.spec.json') + ) { + json.references.push({ + path: './tsconfig.spec.json', + }); + } + return json; } - } - return json; - }); + ); + } else { + updateJson( + tree, + joinPathFragments(projectRoot, 'tsconfig.json'), + (json) => { + if (!json.compilerOptions?.types?.includes('vitest')) { + if (json.compilerOptions?.types) { + json.compilerOptions.types.push('vitest'); + } else { + json.compilerOptions ??= {}; + json.compilerOptions.types = ['vitest']; + } + } + return json; + } + ); + } if (options.inSourceTests) { const tsconfigLibPath = joinPathFragments(projectRoot, 'tsconfig.lib.json'); diff --git a/packages/vite/src/generators/vitest/vitest.spec.ts b/packages/vite/src/generators/vitest/vitest.spec.ts index 8bb3ca9474028e..a1ccf542303119 100644 --- a/packages/vite/src/generators/vitest/vitest.spec.ts +++ b/packages/vite/src/generators/vitest/vitest.spec.ts @@ -96,6 +96,7 @@ describe('vitest generator', () => { "vitest/importMeta", "vite/client", "node", + "vitest", ], }, "extends": "./tsconfig.json", diff --git a/packages/vite/src/utils/__snapshots__/vite-config-edit-utils.spec.ts.snap b/packages/vite/src/utils/__snapshots__/vite-config-edit-utils.spec.ts.snap index 4972eb3df2939c..238797a188409f 100644 --- a/packages/vite/src/utils/__snapshots__/vite-config-edit-utils.spec.ts.snap +++ b/packages/vite/src/utils/__snapshots__/vite-config-edit-utils.spec.ts.snap @@ -1,19 +1,18 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP exports[`ensureViteConfigIsCorrect should add build and test options if defineConfig is empty 1`] = ` -"import dts from 'vite-plugin-dts'; -import { joinPathFragments } from '@nx/devkit'; +"import dts from 'vite-plugin-dts';import { joinPathFragments } from '@nx/devkit' /// import { defineConfig } from 'vite'; import react from '@vitejs/plugin-react'; - import viteTsConfigPaths from 'vite-tsconfig-paths'; + import { nxViteTsPaths } from '@nx/vite/plugins/nx-tsconfig-paths.plugin'; export default defineConfig({ - // Configuration for building your library. // See: https://vitejs.dev/guide/build.html#library-mode - build: { + plugins: [react(), +nxViteTsPaths()],build: { lib: { // Could also be a dictionary or array of multiple entry points. entry: 'src/index.ts', @@ -27,18 +26,7 @@ import { joinPathFragments } from '@nx/devkit'; // External packages that should not be bundled into your library. external: ["'react', 'react-dom', 'react/jsx-runtime'"] } - },plugins: [ - dts({ - entryRoot: 'src', - tsConfigFilePath: joinPathFragments(__dirname, 'tsconfig.lib.json'), - skipDiagnostics: true, - }), - react(), - viteTsConfigPaths({ - root: '../../', - }), - ], - test: { + },test: { globals: true, cache: { dir: '../node_modules/.vitest' @@ -50,11 +38,10 @@ import { joinPathFragments } from '@nx/devkit'; `; exports[`ensureViteConfigIsCorrect should add build option but not update test option if test already setup 1`] = ` -"import dts from 'vite-plugin-dts'; -import { joinPathFragments } from '@nx/devkit'; +"import dts from 'vite-plugin-dts';import { joinPathFragments } from '@nx/devkit' import { defineConfig } from 'vite'; import react from '@vitejs/plugin-react'; - import viteTsConfigPaths from 'vite-tsconfig-paths'; + import { nxViteTsPaths } from '@nx/vite/plugins/nx-tsconfig-paths.plugin'; export default defineConfig({ @@ -74,19 +61,9 @@ import { defineConfig } from 'vite'; // External packages that should not be bundled into your library. external: ["'react', 'react-dom', 'react/jsx-runtime'"] } - },plugins: [ - ...[ - react(), - viteTsConfigPaths({ - root: '../../', - }), - ], - dts({ - entryRoot: 'src', - tsConfigFilePath: joinPathFragments(__dirname, 'tsconfig.lib.json'), - skipDiagnostics: true, - }), - ], + },plugins: [react(), +nxViteTsPaths(), +], test: { globals: true, @@ -102,11 +79,10 @@ import { defineConfig } from 'vite'; `; exports[`ensureViteConfigIsCorrect should add build options if build options don't exist 1`] = ` -"import dts from 'vite-plugin-dts'; -import { joinPathFragments } from '@nx/devkit'; +"import dts from 'vite-plugin-dts';import { joinPathFragments } from '@nx/devkit' import { defineConfig } from 'vite'; import react from '@vitejs/plugin-react'; - import viteTsConfigPaths from 'vite-tsconfig-paths'; + import { nxViteTsPaths } from '@nx/vite/plugins/nx-tsconfig-paths.plugin'; export default defineConfig({ @@ -126,19 +102,9 @@ import { defineConfig } from 'vite'; // External packages that should not be bundled into your library. external: ["'react', 'react-dom', 'react/jsx-runtime'"] } - },plugins: [ - ...[ - react(), - viteTsConfigPaths({ - root: '../../', - }), - ], - dts({ - entryRoot: 'src', - tsConfigFilePath: joinPathFragments(__dirname, 'tsconfig.lib.json'), - skipDiagnostics: true, - }), - ], + },plugins: [react(), +nxViteTsPaths(), +], test: { globals: true, @@ -154,11 +120,10 @@ import { defineConfig } from 'vite'; `; exports[`ensureViteConfigIsCorrect should add build options if defineConfig is not used 1`] = ` -"import dts from 'vite-plugin-dts'; -import { joinPathFragments } from '@nx/devkit'; +"import dts from 'vite-plugin-dts';import { joinPathFragments } from '@nx/devkit' import { defineConfig } from 'vite'; import react from '@vitejs/plugin-react'; - import viteTsConfigPaths from 'vite-tsconfig-paths'; + import { nxViteTsPaths } from '@nx/vite/plugins/nx-tsconfig-paths.plugin'; export default { // Configuration for building your library. @@ -185,19 +150,9 @@ import { defineConfig } from 'vite'; environment: 'jsdom', include: ['src/**/*.{test,spec}.{js,mjs,cjs,ts,mts,cts,jsx,tsx}'], }, - plugins: [ - ...[ - react(), - viteTsConfigPaths({ - root: '../../', - }), - ], - dts({ - entryRoot: 'src', - tsConfigFilePath: joinPathFragments(__dirname, 'tsconfig.lib.json'), - skipDiagnostics: true, - }), - ], + plugins: [react(), +nxViteTsPaths(), +], }; " `; @@ -219,33 +174,22 @@ exports[`ensureViteConfigIsCorrect should add build options if it is using condi my: 'option', }, ..."\\n // Configuration for building your library.\\n // See: https://vitejs.dev/guide/build.html#library-mode\\n build: {\\n lib: {\\n // Could also be a dictionary or array of multiple entry points.\\n entry: 'src/index.ts',\\n name: 'my-app',\\n fileName: 'index',\\n // Change this to the formats you want to support.\\n // Don't forget to update your package.json as well.\\n formats: ['es', 'cjs']\\n },\\n rollupOptions: {\\n // External packages that should not be bundled into your library.\\n external: [\\"'react', 'react-dom', 'react/jsx-runtime'\\"]\\n }\\n }," - } + } } }) " `; exports[`ensureViteConfigIsCorrect should add new build options if some build options already exist 1`] = ` -"import dts from 'vite-plugin-dts'; -import { joinPathFragments } from '@nx/devkit'; +"import dts from 'vite-plugin-dts';import { joinPathFragments } from '@nx/devkit' import { defineConfig } from 'vite'; import react from '@vitejs/plugin-react'; - import viteTsConfigPaths from 'vite-tsconfig-paths'; + import { nxViteTsPaths } from '@nx/vite/plugins/nx-tsconfig-paths.plugin'; export default defineConfig({ - plugins: [ - ...[ - react(), - viteTsConfigPaths({ - root: '../../', - }), - ], - dts({ - entryRoot: 'src', - tsConfigFilePath: joinPathFragments(__dirname, 'tsconfig.lib.json'), - skipDiagnostics: true, - }), - ], + plugins: [react(), +nxViteTsPaths(), +], test: { globals: true, @@ -257,11 +201,11 @@ import { defineConfig } from 'vite'; }, build: { - ...{ - my: 'option', - }, - ...{"lib":{"entry":"src/index.ts","name":"my-app","fileName":"index","formats":["es","cjs"]},"rollupOptions":{"external":["'react', 'react-dom', 'react/jsx-runtime'"]}} - } + 'my': 'option', +'lib': {"entry":"src/index.ts","name":"my-app","fileName":"index","formats":["es","cjs"]}, +'rollupOptions': {"external":["'react', 'react-dom', 'react/jsx-runtime'"]}, + + } }); " @@ -271,25 +215,17 @@ exports[`ensureViteConfigIsCorrect should not do anything if cannot understand s exports[`ensureViteConfigIsCorrect should not do anything if project has everything setup already 1`] = ` " - /// - import { defineConfig } from 'vite'; +import { defineConfig } from 'vite'; import react from '@vitejs/plugin-react'; - import viteTsConfigPaths from 'vite-tsconfig-paths'; + import { nxViteTsPaths } from '@nx/vite/plugins/nx-tsconfig-paths.plugin'; import dts from 'vite-plugin-dts'; import { joinPathFragments } from '@nx/devkit'; export default defineConfig({ - plugins: [ - dts({ - entryRoot: 'src', - tsConfigFilePath: joinPathFragments(__dirname, 'tsconfig.lib.json'), - skipDiagnostics: true, - }), - react(), - viteTsConfigPaths({ - root: '../../../', - }), - ], + plugins: [dts({ entryRoot: 'src', tsConfigFilePath: joinPathFragments(__dirname, 'tsconfig.lib.json'), skipDiagnostics: true }), +react(), +nxViteTsPaths(), +], // Configuration for building your library. // See: https://vitejs.dev/guide/build.html#library-mode @@ -322,40 +258,31 @@ exports[`ensureViteConfigIsCorrect should not do anything if project has everyth `; exports[`ensureViteConfigIsCorrect should update both test and build options - keep existing settings 1`] = ` -"import dts from 'vite-plugin-dts'; -import { joinPathFragments } from '@nx/devkit'; +"import dts from 'vite-plugin-dts';import { joinPathFragments } from '@nx/devkit' import { defineConfig } from 'vite'; import react from '@vitejs/plugin-react'; - import viteTsConfigPaths from 'vite-tsconfig-paths'; + import { nxViteTsPaths } from '@nx/vite/plugins/nx-tsconfig-paths.plugin'; export default defineConfig({ - plugins: [ - ...[ - react(), - viteTsConfigPaths({ - root: '../../', - }), - ], - dts({ - entryRoot: 'src', - tsConfigFilePath: joinPathFragments(__dirname, 'tsconfig.lib.json'), - skipDiagnostics: true, - }), - ], + plugins: [react(), +nxViteTsPaths(), +], test: { - ...{ - my: 'option', - }, - ...{"globals":true,"cache":{"dir":"../node_modules/.vitest"},"environment":"jsdom","include":["src/**/*.{test,spec}.{js,mjs,cjs,ts,mts,cts,jsx,tsx}"]} - }, + 'my': 'option', +'globals': true, +'cache': {"dir":"../node_modules/.vitest"}, +'environment': "jsdom", +'include': ["src/**/*.{test,spec}.{js,mjs,cjs,ts,mts,cts,jsx,tsx}"], + + }, build: { - ...{ - my: 'option', - }, - ...{"lib":{"entry":"src/index.ts","name":"my-app","fileName":"index","formats":["es","cjs"]},"rollupOptions":{"external":["'react', 'react-dom', 'react/jsx-runtime'"]}} - } + 'my': 'option', +'lib': {"entry":"src/index.ts","name":"my-app","fileName":"index","formats":["es","cjs"]}, +'rollupOptions': {"external":["'react', 'react-dom', 'react/jsx-runtime'"]}, + + } }); " diff --git a/packages/vite/src/utils/generator-utils.ts b/packages/vite/src/utils/generator-utils.ts index c89d04e6fff051..cbaf67522a8c85 100644 --- a/packages/vite/src/utils/generator-utils.ts +++ b/packages/vite/src/utils/generator-utils.ts @@ -441,14 +441,14 @@ export function moveAndEditIndexHtml( const indexHtmlContent = tree.read(indexHtmlPath, 'utf8'); if ( !indexHtmlContent.includes( - `` + `` ) ) { tree.write( `${projectConfig.root}/index.html`, indexHtmlContent.replace( '', - ` + ` ` ) ); @@ -461,25 +461,37 @@ export function moveAndEditIndexHtml( tree.write( `${projectConfig.root}/index.html`, ` - + - - - + + + Vite -
- +
+ ` ); } } +export interface ViteConfigFileOptions { + project: string; + includeLib?: boolean; + includeVitest?: boolean; + inSourceTests?: boolean; + testEnvironment?: 'node' | 'jsdom' | 'happy-dom' | 'edge-runtime' | string; + rollupOptionsExternalString?: string; + rollupOptionsExternal?: string[]; + imports?: string[]; + plugins?: string[]; +} + export function createOrEditViteConfig( tree: Tree, - options: ViteConfigurationGeneratorSchema, + options: ViteConfigFileOptions, onlyVitest: boolean, projectAlreadyHasViteTargets?: TargetFlags ) { @@ -505,33 +517,32 @@ export function createOrEditViteConfig( }, rollupOptions: { // External packages that should not be bundled into your library. - external: [${ - options.uiFramework === 'react' - ? "'react', 'react-dom', 'react/jsx-runtime'" - : '' - }] + external: [${options.rollupOptionsExternal ?? ''}] } },` : ``; - const dtsPlugin = onlyVitest - ? '' - : options.includeLib - ? `dts({ - entryRoot: 'src', - tsConfigFilePath: path.join(__dirname, 'tsconfig.lib.json'), - skipDiagnostics: true, - }),` - : ''; + const imports: string[] = options.imports ? options.imports : []; - const dtsImportLine = onlyVitest - ? '' - : options.includeLib - ? `import dts from 'vite-plugin-dts';\nimport * as path from 'path';` - : ''; + if (!onlyVitest && options.includeLib) { + imports.push( + `import dts from 'vite-plugin-dts'`, + `import * as path from 'path'` + ); + } let viteConfigContent = ''; + const plugins = options.plugins + ? [...options.plugins, `nxViteTsPaths()`] + : [`nxViteTsPaths()`]; + + if (!onlyVitest && options.includeLib) { + plugins.push( + `dts({ entryRoot: 'src', tsConfigFilePath: path.join(__dirname, 'tsconfig.lib.json'), skipDiagnostics: true })` + ); + } + const testOption = options.includeVitest ? `test: { globals: true, @@ -554,15 +565,6 @@ export function createOrEditViteConfig( },` : ''; - const reactPluginImportLine = - options.uiFramework === 'react' - ? options.compiler === 'swc' - ? `import react from '@vitejs/plugin-react-swc';` - : `import react from '@vitejs/plugin-react';` - : ''; - - const reactPlugin = options.uiFramework === 'react' ? `react(),` : ''; - const devServerOption = onlyVitest ? '' : options.includeLib @@ -583,14 +585,6 @@ export function createOrEditViteConfig( host: 'localhost', },`; - const pluginOption = ` - plugins: [ - ${dtsPlugin} - ${reactPlugin} - nxViteTsPaths(), - ], - `; - const workerOption = ` // Uncomment this if you are using workers. // worker: { @@ -607,9 +601,8 @@ export function createOrEditViteConfig( viteConfigPath, options, buildOption, - dtsPlugin, - dtsImportLine, - pluginOption, + imports, + plugins, testOption, cacheDir, offsetFromRoot(projectConfig.root), @@ -619,17 +612,17 @@ export function createOrEditViteConfig( } viteConfigContent = ` - /// + /// import { defineConfig } from 'vite'; - ${reactPluginImportLine} + ${imports.join(';\n')}${imports.length ? ';' : ''} import { nxViteTsPaths } from '@nx/vite/plugins/nx-tsconfig-paths.plugin'; - ${dtsImportLine} export default defineConfig({ ${cacheDir} ${devServerOption} ${previewServerOption} - ${pluginOption} + + plugins: [${plugins.join(',\n')}], ${workerOption} ${buildOption} ${defineOption} @@ -774,21 +767,28 @@ export async function handleUnknownExecutors(projectName: string) { function handleViteConfigFileExists( tree: Tree, viteConfigPath: string, - options: ViteConfigurationGeneratorSchema, + options: ViteConfigFileOptions, buildOption: string, - dtsPlugin: string, - dtsImportLine: string, - pluginOption: string, + imports: string[], + plugins: string[], testOption: string, cacheDir: string, offsetFromRoot: string, projectAlreadyHasViteTargets?: TargetFlags ) { - if (projectAlreadyHasViteTargets.build && projectAlreadyHasViteTargets.test) { + if ( + projectAlreadyHasViteTargets?.build && + projectAlreadyHasViteTargets?.test + ) { return; } - logger.info(`vite.config.ts already exists for project ${options.project}.`); + if (process.env.NX_VERBOSE_LOGGING === 'true') { + logger.info( + `vite.config.ts already exists for project ${options.project}.` + ); + } + const buildOptionObject = { lib: { entry: 'src/index.ts', @@ -797,10 +797,7 @@ function handleViteConfigFileExists( formats: ['es', 'cjs'], }, rollupOptions: { - external: - options.uiFramework === 'react' - ? ['react', 'react-dom', 'react/jsx-runtime'] - : [], + external: options.rollupOptionsExternal ?? [], }, }; @@ -818,13 +815,12 @@ function handleViteConfigFileExists( viteConfigPath, buildOption, buildOptionObject, - dtsPlugin, - dtsImportLine, - pluginOption, + imports, + plugins, testOption, testOptionObject, cacheDir, - projectAlreadyHasViteTargets + projectAlreadyHasViteTargets ?? {} ); if (!changed) { @@ -835,9 +831,5 @@ function handleViteConfigFileExists( ` ); - } else { - logger.info(` - Vite configuration file (${viteConfigPath}) has been updated with the required settings for the new target(s). - `); } } diff --git a/packages/vite/src/utils/test-files/test-vite-configs.ts b/packages/vite/src/utils/test-files/test-vite-configs.ts index b1a9f81f0f9de3..02b8b64527767d 100644 --- a/packages/vite/src/utils/test-files/test-vite-configs.ts +++ b/packages/vite/src/utils/test-files/test-vite-configs.ts @@ -2,14 +2,12 @@ export const noBuildOptions = ` /// import { defineConfig } from 'vite'; import react from '@vitejs/plugin-react'; - import viteTsConfigPaths from 'vite-tsconfig-paths'; + import { nxViteTsPaths } from '@nx/vite/plugins/nx-tsconfig-paths.plugin'; export default defineConfig({ plugins: [ react(), - viteTsConfigPaths({ - root: '../../', - }), + nxViteTsPaths(), ], test: { @@ -28,14 +26,12 @@ export const someBuildOptions = ` /// import { defineConfig } from 'vite'; import react from '@vitejs/plugin-react'; - import viteTsConfigPaths from 'vite-tsconfig-paths'; + import { nxViteTsPaths } from '@nx/vite/plugins/nx-tsconfig-paths.plugin'; export default defineConfig({ plugins: [ react(), - viteTsConfigPaths({ - root: '../../', - }), + nxViteTsPaths(), ], test: { @@ -58,7 +54,7 @@ export const noContentDefineConfig = ` /// import { defineConfig } from 'vite'; import react from '@vitejs/plugin-react'; - import viteTsConfigPaths from 'vite-tsconfig-paths'; + import { nxViteTsPaths } from '@nx/vite/plugins/nx-tsconfig-paths.plugin'; export default defineConfig({}); `; @@ -85,14 +81,12 @@ export const configNoDefineConfig = ` /// import { defineConfig } from 'vite'; import react from '@vitejs/plugin-react'; - import viteTsConfigPaths from 'vite-tsconfig-paths'; + import { nxViteTsPaths } from '@nx/vite/plugins/nx-tsconfig-paths.plugin'; export default { plugins: [ react(), - viteTsConfigPaths({ - root: '../../', - }), + nxViteTsPaths(), ], }; `; @@ -101,14 +95,12 @@ export const noBuildOptionsHasTestOption = ` /// import { defineConfig } from 'vite'; import react from '@vitejs/plugin-react'; - import viteTsConfigPaths from 'vite-tsconfig-paths'; + import { nxViteTsPaths } from '@nx/vite/plugins/nx-tsconfig-paths.plugin'; export default defineConfig({ plugins: [ react(), - viteTsConfigPaths({ - root: '../../', - }), + nxViteTsPaths(), ], test: { @@ -127,14 +119,12 @@ export const someBuildOptionsSomeTestOption = ` /// import { defineConfig } from 'vite'; import react from '@vitejs/plugin-react'; - import viteTsConfigPaths from 'vite-tsconfig-paths'; + import { nxViteTsPaths } from '@nx/vite/plugins/nx-tsconfig-paths.plugin'; export default defineConfig({ plugins: [ react(), - viteTsConfigPaths({ - root: '../../', - }), + nxViteTsPaths(), ], test: { @@ -152,21 +142,15 @@ export const hasEverything = ` /// import { defineConfig } from 'vite'; import react from '@vitejs/plugin-react'; - import viteTsConfigPaths from 'vite-tsconfig-paths'; + import { nxViteTsPaths } from '@nx/vite/plugins/nx-tsconfig-paths.plugin'; import dts from 'vite-plugin-dts'; import { joinPathFragments } from '@nx/devkit'; export default defineConfig({ plugins: [ - dts({ - entryRoot: 'src', - tsConfigFilePath: joinPathFragments(__dirname, 'tsconfig.lib.json'), - skipDiagnostics: true, - }), + dts({ entryRoot: 'src', tsConfigFilePath: joinPathFragments(__dirname, 'tsconfig.lib.json'), skipDiagnostics: true }), react(), - viteTsConfigPaths({ - root: '../../../', - }), + nxViteTsPaths(), ], // Configuration for building your library. @@ -246,19 +230,9 @@ export const testOptionObject = { include: ['src/**/*.{test,spec}.{js,mjs,cjs,ts,mts,cts,jsx,tsx}'], }; -export const dtsPlugin = `dts({ - entryRoot: 'src', - tsConfigFilePath: joinPathFragments(__dirname, 'tsconfig.lib.json'), - skipDiagnostics: true, - }),`; -export const dtsImportLine = `import dts from 'vite-plugin-dts';\nimport { joinPathFragments } from '@nx/devkit';`; +export const imports = [ + `import dts from 'vite-plugin-dts'`, + `import { joinPathFragments } from '@nx/devkit'`, +]; -export const pluginOption = ` - plugins: [ - ${dtsPlugin} - react(), - viteTsConfigPaths({ - root: '../../', - }), - ], - `; +export const plugins = [`react()`, `nxViteTsPaths()`]; diff --git a/packages/vite/src/utils/test-utils.ts b/packages/vite/src/utils/test-utils.ts index a5de667765efc4..5cbea4463e4840 100644 --- a/packages/vite/src/utils/test-utils.ts +++ b/packages/vite/src/utils/test-utils.ts @@ -537,15 +537,13 @@ export function mockReactLibNonBuildableVitestRunnerGenerator( `/// import { defineConfig } from 'vite'; import react from '@vitejs/plugin-react'; - import viteTsConfigPaths from 'vite-tsconfig-paths'; + import { nxViteTsPaths } from '@nx/vite/plugins/nx-tsconfig-paths.plugin'; export default defineConfig({ plugins: [ + nxViteTsPaths(), react(), - viteTsConfigPaths({ - root: '../../', - }), ], test: { diff --git a/packages/vite/src/utils/vite-config-edit-utils.spec.ts b/packages/vite/src/utils/vite-config-edit-utils.spec.ts index d4fbf56b6a8d99..1057cabeca6083 100644 --- a/packages/vite/src/utils/vite-config-edit-utils.spec.ts +++ b/packages/vite/src/utils/vite-config-edit-utils.spec.ts @@ -6,13 +6,12 @@ import { buildOptionObject, conditionalConfig, configNoDefineConfig, - dtsImportLine, - dtsPlugin, + imports, hasEverything, noBuildOptions, noBuildOptionsHasTestOption, noContentDefineConfig, - pluginOption, + plugins, someBuildOptions, someBuildOptionsSomeTestOption, testOption, @@ -34,9 +33,8 @@ describe('ensureViteConfigIsCorrect', () => { 'apps/my-app/vite.config.ts', buildOption, buildOptionObject, - dtsPlugin, - dtsImportLine, - pluginOption, + imports, + plugins, testOption, testOptionObject, '', @@ -59,9 +57,8 @@ describe('ensureViteConfigIsCorrect', () => { 'apps/my-app/vite.config.ts', buildOption, buildOptionObject, - dtsPlugin, - dtsImportLine, - pluginOption, + imports, + plugins, testOption, testOptionObject, '', @@ -84,9 +81,8 @@ describe('ensureViteConfigIsCorrect', () => { 'apps/my-app/vite.config.ts', buildOption, buildOptionObject, - dtsPlugin, - dtsImportLine, - pluginOption, + imports, + plugins, testOption, testOptionObject, '', @@ -109,9 +105,8 @@ describe('ensureViteConfigIsCorrect', () => { 'apps/my-app/vite.config.ts', buildOption, buildOptionObject, - dtsPlugin, - dtsImportLine, - pluginOption, + imports, + plugins, testOption, testOptionObject, '', @@ -134,9 +129,8 @@ describe('ensureViteConfigIsCorrect', () => { 'apps/my-app/vite.config.ts', buildOption, buildOptionObject, - dtsPlugin, - dtsImportLine, - pluginOption, + imports, + plugins, testOption, testOptionObject, '', @@ -159,9 +153,8 @@ describe('ensureViteConfigIsCorrect', () => { 'apps/my-app/vite.config.ts', buildOption, buildOptionObject, - dtsPlugin, - dtsImportLine, - pluginOption, + imports, + plugins, testOption, testOptionObject, '', @@ -178,9 +171,8 @@ describe('ensureViteConfigIsCorrect', () => { 'apps/my-app/vite.config.ts', buildOption, buildOptionObject, - dtsPlugin, - dtsImportLine, - pluginOption, + imports, + plugins, testOption, testOptionObject, '', @@ -197,9 +189,8 @@ describe('ensureViteConfigIsCorrect', () => { 'apps/my-app/vite.config.ts', buildOption, buildOptionObject, - dtsPlugin, - dtsImportLine, - pluginOption, + imports, + plugins, testOption, testOptionObject, '', @@ -216,9 +207,8 @@ describe('ensureViteConfigIsCorrect', () => { 'apps/my-app/vite.config.ts', buildOption, buildOptionObject, - dtsPlugin, - dtsImportLine, - pluginOption, + imports, + plugins, testOption, testOptionObject, '', diff --git a/packages/vite/src/utils/vite-config-edit-utils.ts b/packages/vite/src/utils/vite-config-edit-utils.ts index 637e50c8fa333c..ec515a45e93619 100644 --- a/packages/vite/src/utils/vite-config-edit-utils.ts +++ b/packages/vite/src/utils/vite-config-edit-utils.ts @@ -1,16 +1,20 @@ import { applyChangesToString, ChangeType, Tree } from '@nx/devkit'; import { findNodes } from '@nx/js'; import { TargetFlags } from './generator-utils'; -import type { Node, ReturnStatement } from 'typescript'; +import type { + ArrayLiteralExpression, + Node, + PropertyAssignment, + ReturnStatement, +} from 'typescript'; export function ensureViteConfigIsCorrect( tree: Tree, path: string, buildConfigString: string, buildConfigObject: {}, - dtsPlugin: string, - dtsImportLine: string, - pluginOption: string, + imports: string[], + plugins: string[], testConfigString: string, testConfigObject: {}, cacheDir: string, @@ -30,13 +34,6 @@ export function ensureViteConfigIsCorrect( } if (!projectAlreadyHasViteTargets?.build && buildConfigString?.length) { - updatedContent = handlePluginNode( - updatedContent ?? fileContent, - dtsPlugin, - dtsImportLine, - pluginOption - ); - updatedContent = handleBuildOrTestNode( updatedContent ?? fileContent, buildConfigString, @@ -45,12 +42,17 @@ export function ensureViteConfigIsCorrect( ); } + updatedContent = + handlePluginNode(updatedContent ?? fileContent, imports, plugins) ?? + updatedContent; + if (cacheDir?.length) { updatedContent = handleCacheDirNode( updatedContent ?? fileContent, cacheDir ); } + if (updatedContent) { tree.write(path, updatedContent); return true; @@ -66,21 +68,37 @@ function handleBuildOrTestNode( name: 'build' | 'test' ): string | undefined { const { tsquery } = require('@phenomnomnominal/tsquery'); - const buildNode = tsquery.query( + const buildOrTestNode = tsquery.query( updatedFileContent, `PropertyAssignment:has(Identifier[name="${name}"])` ); - if (buildNode.length) { + if (buildOrTestNode.length) { return tsquery.replace( updatedFileContent, `PropertyAssignment:has(Identifier[name="${name}"])`, - (node: Node) => { - const found = tsquery.query(node, 'ObjectLiteralExpression'); + (node: PropertyAssignment) => { + const existingProperties = tsquery.query( + node.initializer, + 'PropertyAssignment' + ) as PropertyAssignment[]; + let updatedPropsString = ''; + for (const prop of existingProperties) { + const propName = prop.name.getText(); + if (!configContentObject[propName] && propName !== 'dir') { + updatedPropsString += `'${propName}': ${prop.initializer.getText()},\n`; + } + } + for (const [propName, propValue] of Object.entries( + configContentObject + )) { + updatedPropsString += `'${propName}': ${JSON.stringify( + propValue + )},\n`; + } return `${name}: { - ...${found?.[0].getText()}, - ...${JSON.stringify(configContentObject)} - }`; + ${updatedPropsString} + }`; } ); } else { @@ -173,7 +191,6 @@ function transformCurrentBuildObject( const currentBuildObjectStart = returnStatements[index].getStart(); const currentBuildObjectEnd = returnStatements[index].getEnd(); - const newReturnObject = tsquery.replace( returnStatements[index].getText(), 'ObjectLiteralExpression', @@ -181,7 +198,7 @@ function transformCurrentBuildObject( return `{ ...${currentBuildObject}, ...${JSON.stringify(buildConfigObject)} - }`; + }`; } ); @@ -209,7 +226,6 @@ function transformConditionalConfig( const { tsquery } = require('@phenomnomnominal/tsquery'); const { SyntaxKind } = require('typescript'); const functionBlock = tsquery.query(conditionalConfig[0], 'Block'); - const ifStatement = tsquery.query(functionBlock?.[0], 'IfStatement'); const binaryExpressions = tsquery.query(ifStatement?.[0], 'BinaryExpression'); @@ -235,7 +251,6 @@ function transformConditionalConfig( if (!buildExists) { if (serveExists && elseKeywordExists) { // build options live inside the else block - return ( transformCurrentBuildObject( returnStatements?.length - 1, @@ -278,12 +293,10 @@ function transformConditionalConfig( function handlePluginNode( appFileContent: string, - dtsPlugin: string, - dtsImportLine: string, - pluginOption: string + imports: string[], + plugins: string[] ): string | undefined { const { tsquery } = require('@phenomnomnominal/tsquery'); - const file = tsquery.ast(appFileContent); const pluginsNode = tsquery.query( file, @@ -297,11 +310,29 @@ function handlePluginNode( file.getText(), 'PropertyAssignment:has(Identifier[name="plugins"])', (node: Node) => { - const found = tsquery.query(node, 'ArrayLiteralExpression'); - return `plugins: [ - ...${found?.[0].getText()}, - ${dtsPlugin} - ]`; + const found = tsquery.query( + node, + 'ArrayLiteralExpression' + ) as ArrayLiteralExpression[]; + let updatedPluginsString = ''; + + const existingPluginNodes = found?.[0].elements ?? []; + + for (const plugin of existingPluginNodes) { + updatedPluginsString += `${plugin.getText()},\n`; + } + + for (const plugin of plugins) { + if ( + !existingPluginNodes?.some((node) => + node.getText().includes(plugin) + ) + ) { + updatedPluginsString += `${plugin},\n`; + } + } + + return `plugins: [${updatedPluginsString}]`; } ); writeFile = true; @@ -335,7 +366,7 @@ function handlePluginNode( { type: ChangeType.Insert, index: propertyAssignments[0].getStart(), - text: pluginOption, + text: `plugins: [${plugins.join(',\n')}],`, }, ]); writeFile = true; @@ -344,7 +375,7 @@ function handlePluginNode( { type: ChangeType.Insert, index: foundDefineConfig[0].getStart() + 14, - text: pluginOption, + text: `plugins: [${plugins.join(',\n')}],`, }, ]); writeFile = true; @@ -364,7 +395,7 @@ function handlePluginNode( { type: ChangeType.Insert, index: startOfObject + 1, - text: pluginOption, + text: `plugins: [${plugins.join(',\n')}],`, }, ]); writeFile = true; @@ -373,14 +404,27 @@ function handlePluginNode( } } } - if (writeFile) { - if (!appFileContent.includes(`import dts from 'vite-plugin-dts'`)) { - return dtsImportLine + '\n' + appFileContent; - } - return appFileContent; + const filteredImports = filterImport(appFileContent, imports); + return filteredImports.join(';') + '\n' + appFileContent; } - return appFileContent; +} + +function filterImport(appFileContent: string, imports: string[]): string[] { + const { tsquery } = require('@phenomnomnominal/tsquery'); + const file = tsquery.ast(appFileContent); + const importNodes = tsquery.query( + file, + ':matches(ImportDeclaration, VariableStatement)' + ); + + const importsArrayExisting = importNodes?.map((node) => { + return node.getText().slice(0, -1); + }); + + return imports.filter((importString) => { + return !importsArrayExisting?.includes(importString); + }); } function handleCacheDirNode(appFileContent: string, cacheDir: string): string { diff --git a/packages/vue/.eslintrc.json b/packages/vue/.eslintrc.json index 379043e4b42a9e..de85e34ac952c9 100644 --- a/packages/vue/.eslintrc.json +++ b/packages/vue/.eslintrc.json @@ -29,7 +29,12 @@ "error", { "buildTargets": ["build-base"], - "ignoredDependencies": ["nx", "typescript"] + "ignoredDependencies": [ + "nx", + "typescript", + "@nx/cypress", + "@nx/playwright" + ] } ] } diff --git a/packages/vue/generators.json b/packages/vue/generators.json index f07d4711fb3fc1..1f247e517b147f 100644 --- a/packages/vue/generators.json +++ b/packages/vue/generators.json @@ -1,5 +1,33 @@ { "name": "Nx Vue", "version": "0.1", - "generators": {} + "generators": { + "init": { + "factory": "./src/generators/init/init", + "schema": "./src/generators/init/schema.json", + "description": "Initialize the `@nx/vue` plugin.", + "aliases": ["ng-add"], + "hidden": true + }, + "application": { + "factory": "./src/generators/application/application", + "schema": "./src/generators/application/schema.json", + "aliases": ["app"], + "description": "Create a Vue application." + }, + "library": { + "factory": "./src/generators/library/library", + "schema": "./src/generators/library/schema.json", + "aliases": ["lib"], + "x-type": "library", + "description": "Create a Vue library." + }, + "component": { + "factory": "./src/generators/component/component", + "schema": "./src/generators/component/schema.json", + "aliases": ["c"], + "x-type": "component", + "description": "Create a Vue component." + } + } } diff --git a/packages/vue/index.ts b/packages/vue/index.ts index e69de29bb2d1d6..6d0ccd97c36178 100644 --- a/packages/vue/index.ts +++ b/packages/vue/index.ts @@ -0,0 +1,6 @@ +export * from './src/utils/versions'; +export { applicationGenerator } from './src/generators/application/application'; +export { libraryGenerator } from './src/generators/library/library'; +export { componentGenerator } from './src/generators/component/component'; +export { type InitSchema } from './src/generators/init/schema'; +export { vueInitGenerator } from './src/generators/init/init'; diff --git a/packages/vue/package.json b/packages/vue/package.json index a46b2559e68585..c1f8ecf1aaeab4 100644 --- a/packages/vue/package.json +++ b/packages/vue/package.json @@ -28,14 +28,19 @@ "migrations": "./migrations.json" }, "dependencies": { - "tslib": "^2.3.0" + "tslib": "^2.3.0", + "@nx/devkit": "file:../devkit", + "@nx/jest": "file:../jest", + "@nx/js": "file:../js", + "@nx/linter": "file:../linter", + "@nx/vite": "file:../vite", + "@nx/web": "file:../web", + "@phenomnomnominal/tsquery": "~5.0.1" }, "publishConfig": { "access": "public" }, - "peerDependencies": { - "nx": ">= 15 <= 17" - }, + "peerDependencies": {}, "exports": { ".": "./index.js", "./package.json": "./package.json", diff --git a/packages/vue/src/generators/application/__snapshots__/application.spec.ts.snap b/packages/vue/src/generators/application/__snapshots__/application.spec.ts.snap new file mode 100644 index 00000000000000..d0c7ad0cabd5c1 --- /dev/null +++ b/packages/vue/src/generators/application/__snapshots__/application.spec.ts.snap @@ -0,0 +1,194 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`application generator should set up project correctly with given options 1`] = ` +"import vue from '@vitejs/plugin-vue'; +import { defineConfig } from 'vite'; + +import { nxViteTsPaths } from '@nx/vite/plugins/nx-tsconfig-paths.plugin'; + +export default defineConfig({ + cacheDir: '../node_modules/.vite/test', + + server: { + port: 4200, + host: 'localhost', + }, + + preview: { + port: 4300, + host: 'localhost', + }, + + plugins: [nxViteTsPaths(), vue()], + + // Uncomment this if you are using workers. + // worker: { + // plugins: [ nxViteTsPaths() ], + // }, + + test: { + globals: true, + cache: { dir: '../node_modules/.vitest' }, + environment: 'jsdom', + include: ['src/**/*.{test,spec}.{js,mjs,cjs,ts,mts,cts,jsx,tsx}'], + }, +}); +" +`; + +exports[`application generator should set up project correctly with given options 2`] = ` +"{ + "name": "test", + "$schema": "../node_modules/nx/schemas/project-schema.json", + "projectType": "application", + "sourceRoot": "test/src", + "targets": { + "lint": { + "executor": "@nx/linter:eslint", + "outputs": ["{options.outputFile}"], + "options": { + "lintFilePatterns": ["test/**/*.{ts,tsx,js,jsx,vue}"] + } + }, + "build": { + "executor": "@nx/vite:build", + "outputs": ["{options.outputPath}"], + "defaultConfiguration": "production", + "options": { + "outputPath": "dist/test", + "skipTypeCheck": true + }, + "configurations": { + "development": { + "mode": "development" + }, + "production": { + "mode": "production" + } + } + }, + "serve": { + "executor": "@nx/vite:dev-server", + "defaultConfiguration": "development", + "options": { + "buildTarget": "test:build" + }, + "configurations": { + "development": { + "buildTarget": "test:build:development", + "hmr": true + }, + "production": { + "buildTarget": "test:build:production", + "hmr": false + } + } + }, + "preview": { + "executor": "@nx/vite:preview-server", + "defaultConfiguration": "development", + "options": { + "buildTarget": "test:build" + }, + "configurations": { + "development": { + "buildTarget": "test:build:development" + }, + "production": { + "buildTarget": "test:build:production" + } + } + }, + "test": { + "executor": "@nx/vite:test", + "outputs": ["{options.reportsDirectory}"], + "options": { + "passWithNoTests": true, + "reportsDirectory": "../coverage/test" + } + }, + "serve-static": { + "executor": "@nx/web:file-server", + "options": { + "buildTarget": "test:build" + } + } + } +} +" +`; + +exports[`application generator should set up project correctly with given options 3`] = ` +"{ + "extends": [ + "plugin:vue/vue3-essential", + "eslint:recommended", + "@vue/eslint-config-typescript", + "@vue/eslint-config-prettier/skip-formatting", + "../.eslintrc.json" + ], + "ignorePatterns": ["!**/*"], + "overrides": [ + { + "files": ["*.ts", "*.tsx", "*.js", "*.jsx"], + "rules": {} + }, + { + "files": ["*.ts", "*.tsx"], + "rules": {} + }, + { + "files": ["*.js", "*.jsx"], + "rules": {} + } + ] +} +" +`; + +exports[`application generator should set up project correctly with given options 4`] = ` +"import { describe, it, expect } from 'vitest'; + +import { mount } from '@vue/test-utils'; +import App from '../App.vue'; + +describe('App', () => { + it('renders properly', () => { + const wrapper = mount(App, {}); + expect(wrapper.text()).toContain('Welcome test 👋'); + }); +}); +" +`; + +exports[`application generator should set up project correctly with given options 5`] = ` +[ + ".eslintignore", + ".eslintrc.json", + ".prettierignore", + ".prettierrc", + "nx.json", + "package.json", + "test-e2e/.eslintrc.json", + "test-e2e/cypress.config.ts", + "test-e2e/project.json", + "test-e2e/src/e2e/app.cy.ts", + "test-e2e/src/fixtures/example.json", + "test-e2e/src/support/app.po.ts", + "test-e2e/src/support/commands.ts", + "test-e2e/src/support/e2e.ts", + "test-e2e/tsconfig.json", + "test/.eslintrc.json", + "test/index.html", + "test/project.json", + "test/src/__tests__/App.spec.ts", + "test/src/App.vue", + "test/src/components/NxWelcome.vue", + "test/src/main.ts", + "test/tsconfig.app.json", + "test/tsconfig.json", + "test/tsconfig.spec.json", + "test/vite.config.ts", + "tsconfig.base.json", +] +`; diff --git a/packages/vue/src/generators/application/application.spec.ts b/packages/vue/src/generators/application/application.spec.ts new file mode 100644 index 00000000000000..537d1319ecc3e6 --- /dev/null +++ b/packages/vue/src/generators/application/application.spec.ts @@ -0,0 +1,49 @@ +import { createTreeWithEmptyWorkspace } from '@nx/devkit/testing'; +import { Tree, readProjectConfiguration } from '@nx/devkit'; + +import { applicationGenerator } from './application'; +import { Schema } from './schema'; + +describe('application generator', () => { + let tree: Tree; + const options: Schema = { name: 'test' } as Schema; + + beforeEach(() => { + tree = createTreeWithEmptyWorkspace(); + }); + + it('should run successfully', async () => { + await applicationGenerator(tree, options); + const config = readProjectConfiguration(tree, 'test'); + expect(config).toBeDefined(); + }); + + it('should set up project correctly with given options', async () => { + await applicationGenerator(tree, { ...options, unitTestRunner: 'vitest' }); + expect(tree.read('test/vite.config.ts', 'utf-8')).toMatchSnapshot(); + expect(tree.read('test/project.json', 'utf-8')).toMatchSnapshot(); + expect(tree.read('test/.eslintrc.json', 'utf-8')).toMatchSnapshot(); + expect( + tree.read('test/src/__tests__/App.spec.ts', 'utf-8') + ).toMatchSnapshot(); + expect(listFiles(tree)).toMatchSnapshot(); + }); + + it('should not use stylesheet if --style=none', async () => { + await applicationGenerator(tree, { ...options, style: 'none' }); + + expect(tree.exists('test/src/style.none')).toBeFalsy(); + expect(tree.read('test/src/main.ts', 'utf-8')).not.toContain('styles.none'); + }); +}); + +function listFiles(tree: Tree): string[] { + const files = new Set(); + tree.listChanges().forEach((change) => { + if (change.type !== 'DELETE') { + files.add(change.path); + } + }); + + return Array.from(files).sort((a, b) => a.localeCompare(b)); +} diff --git a/packages/vue/src/generators/application/application.ts b/packages/vue/src/generators/application/application.ts new file mode 100644 index 00000000000000..bc45d0367c705d --- /dev/null +++ b/packages/vue/src/generators/application/application.ts @@ -0,0 +1,75 @@ +import { + addProjectConfiguration, + formatFiles, + GeneratorCallback, + runTasksInSerial, + toJS, + Tree, +} from '@nx/devkit'; +import { Linter } from '@nx/linter'; +import { Schema } from './schema'; +import { normalizeOptions } from './lib/normalize-options'; +import { vueInitGenerator } from '../init/init'; +import { addLinting } from '../../utils/add-linting'; +import { addE2e } from './lib/add-e2e'; +import { createApplicationFiles } from './lib/create-application-files'; +import { addVite } from './lib/add-vite'; +import { addJest } from './lib/add-jest'; +import { extractTsConfigBase } from '../../utils/create-ts-config'; + +export async function applicationGenerator( + tree: Tree, + _options: Schema +): Promise { + const options = await normalizeOptions(tree, _options); + const tasks: GeneratorCallback[] = []; + + addProjectConfiguration(tree, options.name, { + root: options.appProjectRoot, + projectType: 'application', + sourceRoot: `${options.appProjectRoot}/src`, + targets: {}, + }); + + tasks.push( + await vueInitGenerator(tree, { + ...options, + skipFormat: true, + }) + ); + + extractTsConfigBase(tree); + + createApplicationFiles(tree, options); + + tasks.push( + await addLinting( + tree, + { + name: options.projectName, + projectRoot: options.appProjectRoot, + linter: options.linter ?? Linter.EsLint, + unitTestRunner: options.unitTestRunner, + skipPackageJson: options.skipPackageJson, + setParserOptionsProject: options.setParserOptionsProject, + rootProject: options.rootProject, + }, + 'app' + ) + ); + + tasks.push(await addVite(tree, options)); + + if (options.unitTestRunner === 'jest') + tasks.push(await addJest(tree, options)); + + tasks.push(await addE2e(tree, options)); + + if (options.js) toJS(tree); + + if (!options.skipFormat) await formatFiles(tree); + + return runTasksInSerial(...tasks); +} + +export default applicationGenerator; diff --git a/packages/vue/src/generators/application/files/common/index.html.template b/packages/vue/src/generators/application/files/common/index.html.template new file mode 100644 index 00000000000000..3f979c03e4909b --- /dev/null +++ b/packages/vue/src/generators/application/files/common/index.html.template @@ -0,0 +1,13 @@ + + + + + + + <%= title %> + + +
+ + + diff --git a/packages/vue/src/generators/application/files/common/src/App.vue.template b/packages/vue/src/generators/application/files/common/src/App.vue.template new file mode 100644 index 00000000000000..37c59f5b84e742 --- /dev/null +++ b/packages/vue/src/generators/application/files/common/src/App.vue.template @@ -0,0 +1,53 @@ + + + + +<% if (routing && style !== 'none') { %> + +<% } %> diff --git a/packages/vue/src/generators/application/files/common/src/__tests__/App.spec.ts.template b/packages/vue/src/generators/application/files/common/src/__tests__/App.spec.ts.template new file mode 100644 index 00000000000000..863050a51b72f7 --- /dev/null +++ b/packages/vue/src/generators/application/files/common/src/__tests__/App.spec.ts.template @@ -0,0 +1,12 @@ +<% if ( unitTestRunner === 'vitest' ) { %> +import { describe, it, expect } from 'vitest' +<% } %> +import { mount } from '@vue/test-utils' +import App from '../App.vue'; + +describe('App', () => { + it('renders properly', () => { + const wrapper = mount(App, {}) + expect(wrapper.text()).toContain('Welcome <%= title %> 👋') + }) +}); diff --git a/packages/vue/src/generators/application/files/common/src/components/NxWelcome.vue.template b/packages/vue/src/generators/application/files/common/src/components/NxWelcome.vue.template new file mode 100644 index 00000000000000..0e2c3b8c93934c --- /dev/null +++ b/packages/vue/src/generators/application/files/common/src/components/NxWelcome.vue.template @@ -0,0 +1,793 @@ + + + + + diff --git a/packages/vue/src/generators/application/files/common/src/main.ts.template b/packages/vue/src/generators/application/files/common/src/main.ts.template new file mode 100644 index 00000000000000..1221a42662b360 --- /dev/null +++ b/packages/vue/src/generators/application/files/common/src/main.ts.template @@ -0,0 +1,15 @@ +<% if (style !== 'none') { %> +import './styles.<%= style %>'; +<% } %> +<% if (routing) { %> +import router from './router'; +<% } %> + +import { createApp } from 'vue'; +import App from './App.vue'; + +const app = createApp(App); +<% if (routing) { %> +app.use(router); +<% } %> +app.mount('#root'); diff --git a/packages/vue/src/generators/application/files/common/tsconfig.app.json.template b/packages/vue/src/generators/application/files/common/tsconfig.app.json.template new file mode 100644 index 00000000000000..670c50a809afbe --- /dev/null +++ b/packages/vue/src/generators/application/files/common/tsconfig.app.json.template @@ -0,0 +1,8 @@ +{ + "extends": "./tsconfig.json", + "compilerOptions": { + "outDir": "<%= offsetFromRoot %>dist/out-tsc" + }, + "exclude": ["src/**/*.spec.ts", "src/**/*.test.ts", "src/**/*.spec.vue", "src/**/*.test.vue"], + "include": ["src/**/*.js", "src/**/*.jsx", "src/**/*.ts", "src/**/*.vue"] +} diff --git a/packages/vue/src/generators/application/files/routing/src/router/index.ts.template b/packages/vue/src/generators/application/files/routing/src/router/index.ts.template new file mode 100644 index 00000000000000..a49ae507f39bdb --- /dev/null +++ b/packages/vue/src/generators/application/files/routing/src/router/index.ts.template @@ -0,0 +1,23 @@ +import { createRouter, createWebHistory } from 'vue-router' +import HomeView from '../views/HomeView.vue' + +const router = createRouter({ + history: createWebHistory(import.meta.env.BASE_URL), + routes: [ + { + path: '/', + name: 'home', + component: HomeView + }, + { + path: '/about', + name: 'about', + // route level code-splitting + // this generates a separate chunk (About.[hash].js) for this route + // which is lazy-loaded when the route is visited. + component: () => import('../views/AboutView.vue') + } + ] +}) + +export default router diff --git a/packages/vue/src/generators/application/files/routing/src/views/AboutView.vue.template b/packages/vue/src/generators/application/files/routing/src/views/AboutView.vue.template new file mode 100644 index 00000000000000..0fb2cc027ea9b4 --- /dev/null +++ b/packages/vue/src/generators/application/files/routing/src/views/AboutView.vue.template @@ -0,0 +1,16 @@ + + + diff --git a/packages/vue/src/generators/application/files/routing/src/views/HomeView.vue.template b/packages/vue/src/generators/application/files/routing/src/views/HomeView.vue.template new file mode 100644 index 00000000000000..718d800c819e3b --- /dev/null +++ b/packages/vue/src/generators/application/files/routing/src/views/HomeView.vue.template @@ -0,0 +1,9 @@ + + + diff --git a/packages/vue/src/generators/application/files/stylesheet/styles.__style__.template b/packages/vue/src/generators/application/files/stylesheet/styles.__style__.template new file mode 100644 index 00000000000000..7405b3a27c2202 --- /dev/null +++ b/packages/vue/src/generators/application/files/stylesheet/styles.__style__.template @@ -0,0 +1,42 @@ +html { + -webkit-text-size-adjust: 100%; + font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, + 'Segoe UI', Roboto, 'Helvetica Neue', Arial, 'Noto Sans', sans-serif, + 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', + 'Noto Color Emoji'; + line-height: 1.5; + tab-size: 4; + scroll-behavior: smooth; +} +body { + font-family: inherit; + line-height: inherit; + margin: 0; +} +h1, +h2, +p, +pre { + margin: 0; +} +*, +::before, +::after { + box-sizing: border-box; + border-width: 0; + border-style: solid; + border-color: currentColor; +} +h1, +h2 { + font-size: inherit; + font-weight: inherit; +} +a { + color: inherit; + text-decoration: inherit; +} +pre { + font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, + 'Liberation Mono', 'Courier New', monospace; +} diff --git a/packages/vue/src/generators/application/lib/add-e2e.ts b/packages/vue/src/generators/application/lib/add-e2e.ts new file mode 100644 index 00000000000000..1977289b3cc627 --- /dev/null +++ b/packages/vue/src/generators/application/lib/add-e2e.ts @@ -0,0 +1,64 @@ +import type { GeneratorCallback, Tree } from '@nx/devkit'; +import { + addProjectConfiguration, + ensurePackage, + getPackageManagerCommand, + joinPathFragments, +} from '@nx/devkit'; +import { webStaticServeGenerator } from '@nx/web'; + +import { nxVersion } from '../../../utils/versions'; +import { NormalizedSchema } from '../schema'; + +export async function addE2e( + tree: Tree, + options: NormalizedSchema +): Promise { + switch (options.e2eTestRunner) { + case 'cypress': + webStaticServeGenerator(tree, { + buildTarget: `${options.projectName}:build`, + targetName: 'serve-static', + }); + + const { cypressProjectGenerator } = ensurePackage< + typeof import('@nx/cypress') + >('@nx/cypress', nxVersion); + + return await cypressProjectGenerator(tree, { + ...options, + name: options.e2eProjectName, + directory: options.e2eProjectRoot, + projectNameAndRootFormat: 'as-provided', + project: options.projectName, + bundler: 'vite', + skipFormat: true, + }); + case 'playwright': + const { configurationGenerator } = ensurePackage< + typeof import('@nx/playwright') + >('@nx/playwright', nxVersion); + addProjectConfiguration(tree, options.e2eProjectName, { + root: options.e2eProjectRoot, + sourceRoot: joinPathFragments(options.e2eProjectRoot, 'src'), + targets: {}, + implicitDependencies: [options.projectName], + }); + return configurationGenerator(tree, { + project: options.e2eProjectName, + skipFormat: true, + skipPackageJson: options.skipPackageJson, + directory: 'src', + js: false, + linter: options.linter, + setParserOptionsProject: options.setParserOptionsProject, + webServerCommand: `${getPackageManagerCommand().exec} nx serve ${ + options.name + }`, + webServerAddress: 'http://localhost:4200', + }); + case 'none': + default: + return () => {}; + } +} diff --git a/packages/vue/src/generators/application/lib/add-jest.ts b/packages/vue/src/generators/application/lib/add-jest.ts new file mode 100644 index 00000000000000..dfd6df2fef8df1 --- /dev/null +++ b/packages/vue/src/generators/application/lib/add-jest.ts @@ -0,0 +1,44 @@ +import { + addDependenciesToPackageJson, + ensurePackage, + GeneratorCallback, + runTasksInSerial, + Tree, +} from '@nx/devkit'; + +import { NormalizedSchema } from '../schema'; +import { nxVersion, vueJest3Version } from '../../../utils/versions'; +import { setupJestProject } from '../../../utils/setup-jest'; + +export async function addJest( + tree: Tree, + options: NormalizedSchema +): Promise { + const tasks: GeneratorCallback[] = []; + const { configurationGenerator } = ensurePackage( + '@nx/jest', + nxVersion + ); + tasks.push( + await configurationGenerator(tree, { + project: options.name, + skipFormat: true, + testEnvironment: 'jsdom', + compiler: 'babel', + }) + ); + + setupJestProject(tree, options.appProjectRoot); + + tasks.push( + addDependenciesToPackageJson( + tree, + {}, + { + '@vue/vue3-jest': vueJest3Version, + } + ) + ); + + return runTasksInSerial(...tasks); +} diff --git a/packages/vue/src/generators/application/lib/add-vite.ts b/packages/vue/src/generators/application/lib/add-vite.ts new file mode 100644 index 00000000000000..d94274765db22b --- /dev/null +++ b/packages/vue/src/generators/application/lib/add-vite.ts @@ -0,0 +1,46 @@ +import { + GeneratorCallback, + readProjectConfiguration, + Tree, + updateProjectConfiguration, +} from '@nx/devkit'; +import { createOrEditViteConfig, viteConfigurationGenerator } from '@nx/vite'; + +import { NormalizedSchema } from '../schema'; + +export async function addVite( + tree: Tree, + options: NormalizedSchema +): Promise { + // Set up build target (and test target if using vitest) + const viteTask = await viteConfigurationGenerator(tree, { + uiFramework: 'none', + project: options.name, + newProject: true, + inSourceTests: options.inSourceTests, + includeVitest: options.unitTestRunner === 'vitest', + skipFormat: true, + testEnvironment: 'jsdom', + }); + + createOrEditViteConfig( + tree, + { + project: options.name, + includeLib: false, + includeVitest: options.unitTestRunner === 'vitest', + inSourceTests: options.inSourceTests, + imports: [`import vue from '@vitejs/plugin-vue'`], + plugins: ['vue()'], + }, + false + ); + + // Update build to skip type checking since tsc won't work on .vue files. + // Need to use vue-tsc instead. + const projectConfig = readProjectConfiguration(tree, options.name); + projectConfig.targets.build.options.skipTypeCheck = true; + updateProjectConfiguration(tree, options.name, projectConfig); + + return viteTask; +} diff --git a/packages/vue/src/generators/application/lib/create-application-files.ts b/packages/vue/src/generators/application/lib/create-application-files.ts new file mode 100644 index 00000000000000..0bfb41a0cc6def --- /dev/null +++ b/packages/vue/src/generators/application/lib/create-application-files.ts @@ -0,0 +1,53 @@ +import * as path from 'path'; +import { generateFiles, offsetFromRoot, Tree } from '@nx/devkit'; +import { getRelativePathToRootTsConfig } from '@nx/js'; + +import { createTsConfig } from '../../../utils/create-ts-config'; +import { NormalizedSchema } from '../schema'; + +export function createApplicationFiles(tree: Tree, options: NormalizedSchema) { + generateFiles( + tree, + path.join(__dirname, '../files/common'), + options.appProjectRoot, + { + ...options, + offsetFromRoot: offsetFromRoot(options.appProjectRoot), + title: options.projectName, + } + ); + + if (options.style === 'none') { + generateFiles( + tree, + path.join(__dirname, '../files/stylesheet'), + options.appProjectRoot, + { + ...options, + offsetFromRoot: offsetFromRoot(options.appProjectRoot), + title: options.projectName, + } + ); + } + + if (options.routing) { + generateFiles( + tree, + path.join(__dirname, '../files/routing'), + options.appProjectRoot, + { + ...options, + offsetFromRoot: offsetFromRoot(options.appProjectRoot), + title: options.projectName, + } + ); + } + + createTsConfig( + tree, + options.appProjectRoot, + 'app', + options, + getRelativePathToRootTsConfig(tree, options.appProjectRoot) + ); +} diff --git a/packages/vue/src/generators/application/lib/normalize-options.ts b/packages/vue/src/generators/application/lib/normalize-options.ts new file mode 100644 index 00000000000000..a9203ba5d39c39 --- /dev/null +++ b/packages/vue/src/generators/application/lib/normalize-options.ts @@ -0,0 +1,56 @@ +import { Tree, extractLayoutDirectory, names } from '@nx/devkit'; +import { determineProjectNameAndRootOptions } from '@nx/devkit/src/generators/project-name-and-root-utils'; +import { NormalizedSchema, Schema } from '../schema'; + +export function normalizeDirectory(options: Schema) { + options.directory = options.directory?.replace(/\\{1,2}/g, '/'); + const { projectDirectory } = extractLayoutDirectory(options.directory); + return projectDirectory + ? `${names(projectDirectory).fileName}/${names(options.name).fileName}` + : names(options.name).fileName; +} + +export async function normalizeOptions( + host: Tree, + options: Schema, + callingGenerator = '@nx/vue:application' +): Promise { + const { + projectName: appProjectName, + projectRoot: appProjectRoot, + projectNameAndRootFormat, + } = await determineProjectNameAndRootOptions(host, { + name: options.name, + projectType: 'application', + directory: options.directory, + projectNameAndRootFormat: options.projectNameAndRootFormat, + rootProject: options.rootProject, + callingGenerator, + }); + options.rootProject = appProjectRoot === '.'; + options.projectNameAndRootFormat = projectNameAndRootFormat; + + const e2eProjectName = options.rootProject ? 'e2e' : `${appProjectName}-e2e`; + const e2eProjectRoot = options.rootProject ? 'e2e' : `${appProjectRoot}-e2e`; + + const parsedTags = options.tags + ? options.tags.split(',').map((s) => s.trim()) + : []; + + const normalized = { + ...options, + name: names(options.name).fileName, + projectName: appProjectName, + appProjectRoot, + e2eProjectName, + e2eProjectRoot, + parsedTags, + } as NormalizedSchema; + + normalized.style = options.style ?? 'css'; + normalized.routing = normalized.routing ?? false; + normalized.unitTestRunner ??= 'vitest'; + normalized.e2eTestRunner = normalized.e2eTestRunner ?? 'cypress'; + + return normalized; +} diff --git a/packages/vue/src/generators/application/schema.d.ts b/packages/vue/src/generators/application/schema.d.ts new file mode 100644 index 00000000000000..3ce0654f7236a5 --- /dev/null +++ b/packages/vue/src/generators/application/schema.d.ts @@ -0,0 +1,30 @@ +import type { ProjectNameAndRootFormat } from '@nx/devkit/src/generators/project-name-and-root-utils'; +import type { Linter } from '@nx/linter'; + +export interface Schema { + name: string; + style: 'none' | 'css' | 'scss' | 'less'; + skipFormat?: boolean; + directory?: string; + projectNameAndRootFormat?: ProjectNameAndRootFormat; + tags?: string; + unitTestRunner?: 'jest' | 'vitest' | 'none'; + inSourceTests?: boolean; + e2eTestRunner: 'cypress' | 'playwright' | 'none'; + linter: Linter; + routing?: boolean; + js?: boolean; + strict?: boolean; + setParserOptionsProject?: boolean; + skipPackageJson?: boolean; + rootProject?: boolean; +} + +export interface NormalizedSchema extends Schema { + projectName: string; + appProjectRoot: string; + e2eProjectName: string; + e2eProjectRoot: string; + parsedTags: string[]; + devServerPort?: number; +} diff --git a/packages/vue/src/generators/application/schema.json b/packages/vue/src/generators/application/schema.json new file mode 100644 index 00000000000000..5448809da1552a --- /dev/null +++ b/packages/vue/src/generators/application/schema.json @@ -0,0 +1,140 @@ +{ + "$schema": "http://json-schema.org/schema", + "cli": "nx", + "$id": "NxVueApp", + "title": "Create a Vue Application", + "description": "Create a Vue application for Nx.", + "examples": [ + { + "command": "nx g app myapp --directory=myorg/myapp", + "description": "Generate `apps/myorg/myapp` and `apps/myorg/myapp-e2e`" + }, + { + "command": "nx g app myapp --routing", + "description": "Set up Vue Router" + } + ], + "type": "object", + "properties": { + "name": { + "description": "The name of the application.", + "type": "string", + "$default": { + "$source": "argv", + "index": 0 + }, + "x-prompt": "What name would you like to use for the application?", + "pattern": "^[a-zA-Z][^:]*$" + }, + "directory": { + "description": "The directory of the new application.", + "type": "string", + "alias": "dir", + "x-priority": "important" + }, + "projectNameAndRootFormat": { + "description": "Whether to generate the project name and root directory as provided (`as-provided`) or generate them composing their values and taking the configured layout into account (`derived`).", + "type": "string", + "enum": ["as-provided", "derived"] + }, + "style": { + "description": "The file extension to be used for style files.", + "type": "string", + "default": "css", + "alias": "s", + "x-prompt": { + "message": "Which stylesheet format would you like to use?", + "type": "list", + "items": [ + { + "value": "css", + "label": "CSS" + }, + { + "value": "scss", + "label": "SASS(.scss) [ http://sass-lang.com ]" + }, + { + "value": "less", + "label": "LESS [ http://lesscss.org ]" + }, + { + "value": "none", + "label": "None" + } + ] + } + }, + "linter": { + "description": "The tool to use for running lint checks.", + "type": "string", + "enum": ["eslint", "none"], + "default": "eslint" + }, + "routing": { + "type": "boolean", + "description": "Generate application with routes.", + "x-prompt": "Would you like to add Vue Router to this application?", + "default": false + }, + "skipFormat": { + "description": "Skip formatting files.", + "type": "boolean", + "default": false, + "x-priority": "internal" + }, + "unitTestRunner": { + "type": "string", + "enum": ["jest", "vitest", "none"], + "description": "Test runner to use for unit tests.", + "x-prompt": "Which unit test runner would you like to use?", + "default": "none" + }, + "inSourceTests": { + "type": "boolean", + "default": false, + "description": "When using Vitest, separate spec files will not be generated and instead will be included within the source files. Read more on the Vitest docs site: https://vitest.dev/guide/in-source.html" + }, + "e2eTestRunner": { + "type": "string", + "enum": ["cypress", "playwright", "none"], + "description": "Test runner to use for end to end (E2E) tests.", + "x-prompt": "Which E2E test runner would you like to use?", + "default": "cypress" + }, + "tags": { + "type": "string", + "description": "Add tags to the application (used for linting).", + "alias": "t" + }, + "js": { + "type": "boolean", + "description": "Generate JavaScript files rather than TypeScript files.", + "default": false + }, + "strict": { + "type": "boolean", + "description": "Whether to enable tsconfig strict mode or not.", + "default": true + }, + "setParserOptionsProject": { + "type": "boolean", + "description": "Whether or not to configure the ESLint `parserOptions.project` option. We do not do this by default for lint performance reasons.", + "default": false + }, + "skipPackageJson": { + "description": "Do not add dependencies to `package.json`.", + "type": "boolean", + "default": false, + "x-priority": "internal" + }, + "rootProject": { + "description": "Create a application at the root of the workspace", + "type": "boolean", + "default": false, + "hidden": true + } + }, + "required": ["name"], + "examplesFile": "../../../docs/application-examples.md" +} diff --git a/packages/vue/src/generators/component/__snapshots__/component.spec.ts.snap b/packages/vue/src/generators/component/__snapshots__/component.spec.ts.snap new file mode 100644 index 00000000000000..7889a1eba45d6b --- /dev/null +++ b/packages/vue/src/generators/component/__snapshots__/component.spec.ts.snap @@ -0,0 +1,72 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`component --export should add to index.ts barrel 1`] = ` +"export { default as Hello } from './lib/hello/hello.vue'; +" +`; + +exports[`component should generate files with jest 1`] = ` +" + + + + +" +`; + +exports[`component should generate files with jest 2`] = ` +"import { mount } from '@vue/test-utils'; +import Hello from '../hello.vue'; + +describe('Hello', () => { + it('renders properly', () => { + const wrapper = mount(Hello, {}); + expect(wrapper.text()).toContain('Welcome to Hello'); + }); +}); +" +`; + +exports[`component should generate files with vitest 1`] = ` +" + + + + +" +`; + +exports[`component should generate files with vitest 2`] = ` +"import { describe, it, expect } from 'vitest'; + +import { mount } from '@vue/test-utils'; +import Hello from '../hello.vue'; + +describe('Hello', () => { + it('renders properly', () => { + const wrapper = mount(Hello, {}); + expect(wrapper.text()).toContain('Welcome to Hello'); + }); +}); +" +`; diff --git a/packages/vue/src/generators/component/component.spec.ts b/packages/vue/src/generators/component/component.spec.ts new file mode 100644 index 00000000000000..5b305a15c761ed --- /dev/null +++ b/packages/vue/src/generators/component/component.spec.ts @@ -0,0 +1,187 @@ +import { logger, readJson, Tree } from '@nx/devkit'; +import { createTreeWithEmptyWorkspace } from '@nx/devkit/testing'; +import { componentGenerator } from './component'; +import { createLib } from '../../utils/test-utils'; + +describe('component', () => { + let appTree: Tree; + let projectName: string; + + beforeEach(async () => { + projectName = 'my-lib'; + appTree = createTreeWithEmptyWorkspace(); + await createLib(appTree, projectName); + jest.spyOn(logger, 'warn').mockImplementation(() => {}); + jest.spyOn(logger, 'debug').mockImplementation(() => {}); + }); + + afterEach(() => { + jest.restoreAllMocks(); + }); + + it('should generate files with vitest', async () => { + await componentGenerator(appTree, { + name: 'hello', + project: projectName, + unitTestRunner: 'vitest', + }); + + expect(appTree.exists('my-lib/src/lib/hello/hello.vue')).toBeTruthy(); + expect( + appTree.exists('my-lib/src/lib/hello/__tests__/hello.spec.ts') + ).toBeTruthy(); + + expect( + appTree.read('my-lib/src/lib/hello/hello.vue', 'utf-8') + ).toMatchSnapshot(); + expect( + appTree.read('my-lib/src/lib/hello/__tests__/hello.spec.ts', 'utf-8') + ).toMatchSnapshot(); + }); + + it('should generate files with jest', async () => { + await componentGenerator(appTree, { + name: 'hello', + project: projectName, + unitTestRunner: 'jest', + }); + + expect( + appTree.read('my-lib/src/lib/hello/hello.vue', 'utf-8') + ).toMatchSnapshot(); + expect( + appTree.read('my-lib/src/lib/hello/__tests__/hello.spec.ts', 'utf-8') + ).toMatchSnapshot(); + }); + + // we don't have app generator yet + xit('should generate files for an app', async () => { + await componentGenerator(appTree, { + name: 'hello', + project: 'my-app', + unitTestRunner: 'vitest', + }); + + expect(appTree.exists('my-app/src/app/hello/hello.tsx')).toBeTruthy(); + expect(appTree.exists('my-app/src/app/hello/hello.spec.ts')).toBeTruthy(); + expect( + appTree.exists('my-app/src/app/hello/hello.module.css') + ).toBeTruthy(); + }); + + describe('--export', () => { + it('should add to index.ts barrel', async () => { + await componentGenerator(appTree, { + name: 'hello', + project: projectName, + export: true, + }); + expect(appTree.read('my-lib/src/index.ts', 'utf-8')).toMatchSnapshot(); + }); + + // no app generator yet + xit('should not export from an app', async () => { + await componentGenerator(appTree, { + name: 'hello', + project: 'my-app', + export: true, + }); + + expect(appTree.read('my-app/src/index.ts', 'utf-8')).toMatchSnapshot(); + }); + }); + + describe('--pascalCaseFiles', () => { + it('should generate component files with upper case names', async () => { + await componentGenerator(appTree, { + name: 'hello', + project: projectName, + pascalCaseFiles: true, + }); + expect(appTree.exists('my-lib/src/lib/hello/Hello.vue')).toBeTruthy(); + expect( + appTree.exists('my-lib/src/lib/hello/__tests__/Hello.spec.ts') + ).toBeTruthy(); + }); + }); + + describe('--pascalCaseDirectory', () => { + it('should generate component files with pascal case directories', async () => { + await componentGenerator(appTree, { + name: 'hello-world', + project: projectName, + pascalCaseFiles: true, + pascalCaseDirectory: true, + }); + expect( + appTree.exists('my-lib/src/lib/HelloWorld/HelloWorld.vue') + ).toBeTruthy(); + expect( + appTree.exists('my-lib/src/lib/HelloWorld/__tests__/HelloWorld.spec.ts') + ).toBeTruthy(); + }); + }); + + // TODO: figure out routing + xdescribe('--routing', () => { + it('should add routes to the component', async () => { + await componentGenerator(appTree, { + name: 'hello', + project: projectName, + routing: true, + }); + + const content = appTree.read('my-lib/src/lib/hello/hello.tsx').toString(); + expect(content).toContain('react-router-dom'); + expect(content).toMatch(/ { + it('should create component under the directory', async () => { + await componentGenerator(appTree, { + name: 'hello', + project: projectName, + directory: 'components', + }); + + expect(appTree.exists('/my-lib/src/components/hello/hello.vue')); + }); + + it('should create with nested directories', async () => { + await componentGenerator(appTree, { + name: 'helloWorld', + project: projectName, + directory: 'lib/foo', + }); + + expect(appTree.exists('/my-lib/src/lib/foo/hello-world/hello-world.vue')); + }); + }); + + describe('--flat', () => { + it('should create in project directory rather than in its own folder', async () => { + await componentGenerator(appTree, { + name: 'hello', + project: projectName, + flat: true, + }); + + expect(appTree.exists('/my-lib/src/lib/hello.vue')); + }); + it('should work with custom directory path', async () => { + await componentGenerator(appTree, { + name: 'hello', + project: projectName, + flat: true, + directory: 'components', + }); + + expect(appTree.exists('/my-lib/src/components/hello.vue')); + }); + }); +}); diff --git a/packages/vue/src/generators/component/component.ts b/packages/vue/src/generators/component/component.ts new file mode 100644 index 00000000000000..adac545ccbc826 --- /dev/null +++ b/packages/vue/src/generators/component/component.ts @@ -0,0 +1,172 @@ +import { + applyChangesToString, + formatFiles, + generateFiles, + GeneratorCallback, + getProjects, + joinPathFragments, + logger, + names, + readProjectConfiguration, + runTasksInSerial, + toJS, + Tree, +} from '@nx/devkit'; +import { NormalizedSchema, Schema } from './schema'; +import { ensureTypescript } from '@nx/js/src/utils/typescript/ensure-typescript'; +import { join } from 'path'; +import { addImport } from '../../utils/ast-utils'; + +export async function componentGenerator(host: Tree, schema: Schema) { + const options = await normalizeOptions(host, schema); + createComponentFiles(host, options); + + const tasks: GeneratorCallback[] = []; + + addExportsToBarrel(host, options); + + if (!options.skipFormat) { + await formatFiles(host); + } + + return runTasksInSerial(...tasks); +} + +function createComponentFiles(host: Tree, options: NormalizedSchema) { + const componentDir = joinPathFragments( + options.projectSourceRoot, + options.directory + ); + + generateFiles(host, join(__dirname, './files'), componentDir, { + ...options, + tmpl: '', + unitTestRunner: options.unitTestRunner, + }); + + for (const c of host.listChanges()) { + let deleteFile = false; + + if ( + (options.skipTests || options.inSourceTests) && + /.*spec.ts/.test(c.path) + ) { + deleteFile = true; + } + + if (deleteFile) { + host.delete(c.path); + } + } + + if (options.js) toJS(host); +} + +let tsModule: typeof import('typescript'); + +function addExportsToBarrel(host: Tree, options: NormalizedSchema) { + if (!tsModule) { + tsModule = ensureTypescript(); + } + const workspace = getProjects(host); + const isApp = workspace.get(options.project).projectType === 'application'; + + if (options.export && !isApp) { + const indexFilePath = joinPathFragments( + options.projectSourceRoot, + options.js ? 'index.js' : 'index.ts' + ); + const indexSource = host.read(indexFilePath, 'utf-8'); + if (indexSource !== null) { + const indexSourceFile = tsModule.createSourceFile( + indexFilePath, + indexSource, + tsModule.ScriptTarget.Latest, + true + ); + const changes = applyChangesToString( + indexSource, + addImport( + indexSourceFile, + `export { default as ${options.className} } from './${options.directory}/${options.fileName}.vue';` + ) + ); + host.write(indexFilePath, changes); + } + } +} + +async function normalizeOptions( + host: Tree, + options: Schema +): Promise { + assertValidOptions(options); + + const { className, fileName } = names(options.name); + const componentFileName = + options.fileName ?? (options.pascalCaseFiles ? className : fileName); + const project = getProjects(host).get(options.project); + + if (!project) { + throw new Error( + `Cannot find the ${options.project} project. Please double check the project name.` + ); + } + + const { sourceRoot: projectSourceRoot, projectType } = project; + + const directory = await getDirectory(host, options); + + if (options.export && projectType === 'application') { + logger.warn( + `The "--export" option should not be used with applications and will do nothing.` + ); + } + + options.routing = options.routing ?? false; + options.inSourceTests = options.inSourceTests ?? false; + + return { + ...options, + directory, + className, + fileName: componentFileName, + projectSourceRoot, + }; +} + +async function getDirectory(host: Tree, options: Schema) { + if (options.directory) return options.directory; + if (options.flat) + return readProjectConfiguration(host, options.project).projectType === + 'application' + ? 'app' + : 'lib'; + const { className, fileName } = names(options.name); + const nestedDir = options.pascalCaseDirectory === true ? className : fileName; + return joinPathFragments( + readProjectConfiguration(host, options.project).projectType === + 'application' + ? 'app' + : 'lib', + nestedDir + ); +} + +function assertValidOptions(options: Schema) { + const slashes = ['/', '\\']; + slashes.forEach((s) => { + if (options.name.indexOf(s) !== -1) { + const [name, ...rest] = options.name.split(s).reverse(); + let suggestion = rest.map((x) => x.toLowerCase()).join(s); + if (options.directory) { + suggestion = `${options.directory}${s}${suggestion}`; + } + throw new Error( + `Found "${s}" in the component name. Did you mean to use the --directory option (e.g. \`nx g c ${name} --directory ${suggestion}\`)?` + ); + } + }); +} + +export default componentGenerator; diff --git a/packages/vue/src/generators/component/files/__fileName__.vue__tmpl__ b/packages/vue/src/generators/component/files/__fileName__.vue__tmpl__ new file mode 100644 index 00000000000000..08f17aeb6ee0d0 --- /dev/null +++ b/packages/vue/src/generators/component/files/__fileName__.vue__tmpl__ @@ -0,0 +1,15 @@ + + + + + \ No newline at end of file diff --git a/packages/vue/src/generators/component/files/__tests__/__fileName__.spec.ts__tmpl__ b/packages/vue/src/generators/component/files/__tests__/__fileName__.spec.ts__tmpl__ new file mode 100644 index 00000000000000..ce03988f4e53c5 --- /dev/null +++ b/packages/vue/src/generators/component/files/__tests__/__fileName__.spec.ts__tmpl__ @@ -0,0 +1,13 @@ +<% if ( unitTestRunner === 'vitest' ) { %> +import { describe, it, expect } from 'vitest' +<% } %> + +import { mount } from '@vue/test-utils' +import <%= className %> from '../<%= fileName %>.vue'; + +describe('<%= className %>', () => { + it('renders properly', () => { + const wrapper = mount(<%= className %>, {}) + expect(wrapper.text()).toContain('Welcome to <%= className %>') + }) +}); diff --git a/packages/vue/src/generators/component/schema.d.ts b/packages/vue/src/generators/component/schema.d.ts new file mode 100644 index 00000000000000..42cae02cd4f3cf --- /dev/null +++ b/packages/vue/src/generators/component/schema.d.ts @@ -0,0 +1,22 @@ +export interface Schema { + name: string; + project: string; + skipTests?: boolean; + directory?: string; + export?: boolean; + pascalCaseFiles?: boolean; + pascalCaseDirectory?: boolean; + routing?: boolean; + js?: boolean; + flat?: boolean; + fileName?: string; + inSourceTests?: boolean; + skipFormat?: boolean; + unitTestRunner?: 'jest' | 'vitest' | 'none'; +} + +export interface NormalizedSchema extends Schema { + projectSourceRoot: string; + fileName: string; + className: string; +} diff --git a/packages/vue/src/generators/component/schema.json b/packages/vue/src/generators/component/schema.json new file mode 100644 index 00000000000000..27a4305b959954 --- /dev/null +++ b/packages/vue/src/generators/component/schema.json @@ -0,0 +1,107 @@ +{ + "$schema": "http://json-schema.org/schema", + "cli": "nx", + "$id": "NxVueComponent", + "title": "Create a Vue Component", + "description": "Create a Vue Component for Nx.", + "type": "object", + "examples": [ + { + "command": "nx g component my-component --project=mylib", + "description": "Generate a component in the `mylib` library" + }, + { + "command": "nx g component my-component --project=mylib --classComponent", + "description": "Generate a class component in the `mylib` library" + } + ], + "properties": { + "project": { + "type": "string", + "description": "The name of the project.", + "alias": "p", + "$default": { + "$source": "projectName" + }, + "x-prompt": "What is the name of the project for this component?", + "x-priority": "important" + }, + "name": { + "type": "string", + "description": "The name of the component.", + "$default": { + "$source": "argv", + "index": 0 + }, + "x-prompt": "What name would you like to use for the component?", + "x-priority": "important" + }, + "js": { + "type": "boolean", + "description": "Generate JavaScript files rather than TypeScript files.", + "default": false + }, + "skipTests": { + "type": "boolean", + "description": "When true, does not create `spec.ts` test files for the new component.", + "default": false, + "x-priority": "internal" + }, + "directory": { + "type": "string", + "description": "Create the component under this directory (can be nested).", + "alias": "dir", + "x-priority": "important" + }, + "flat": { + "type": "boolean", + "description": "Create component at the source root rather than its own directory.", + "default": false + }, + "export": { + "type": "boolean", + "description": "When true, the component is exported from the project `index.ts` (if it exists).", + "alias": "e", + "default": false, + "x-prompt": "Should this component be exported in the project?" + }, + "pascalCaseFiles": { + "type": "boolean", + "description": "Use pascal case component file name (e.g. `App.tsx`).", + "alias": "P", + "default": false + }, + "pascalCaseDirectory": { + "type": "boolean", + "description": "Use pascal case directory name (e.g. `App/App.tsx`).", + "alias": "R", + "default": false + }, + "routing": { + "type": "boolean", + "description": "Generate a library with routes." + }, + "fileName": { + "type": "string", + "description": "Create a component with this file name." + }, + "inSourceTests": { + "type": "boolean", + "default": false, + "description": "When using Vitest, separate spec files will not be generated and instead will be included within the source files. Read more on the Vitest docs site: https://vitest.dev/guide/in-source.html" + }, + "skipFormat": { + "description": "Skip formatting files.", + "type": "boolean", + "default": false, + "x-priority": "internal" + }, + "unitTestRunner": { + "type": "string", + "enum": ["vitest", "jest", "none"], + "description": "Test runner to use for unit tests.", + "x-prompt": "What unit test runner should be used?" + } + }, + "required": ["name", "project"] +} diff --git a/packages/vue/src/generators/init/__snapshots__/init.spec.ts.snap b/packages/vue/src/generators/init/__snapshots__/init.spec.ts.snap new file mode 100644 index 00000000000000..a8e1f103008433 --- /dev/null +++ b/packages/vue/src/generators/init/__snapshots__/init.spec.ts.snap @@ -0,0 +1,21 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`init should add vue dependencies 1`] = ` +{ + "dependencies": { + "vue": "^3.3.4", + "vue-router": "^4.2.4", + "vue-tsc": "^1.8.8", + }, + "devDependencies": { + "@nx/js": "0.0.1", + "@nx/vue": "0.0.1", + "@vitejs/plugin-vue": "^4.3.1", + "@vue/test-utils": "^2.4.1", + "@vue/tsconfig": "^0.4.0", + "prettier": "^2.6.2", + "typescript": "~5.1.3", + }, + "name": "test-name", +} +`; diff --git a/packages/vue/src/generators/init/init.spec.ts b/packages/vue/src/generators/init/init.spec.ts new file mode 100644 index 00000000000000..f0c8464dddbe82 --- /dev/null +++ b/packages/vue/src/generators/init/init.spec.ts @@ -0,0 +1,22 @@ +import { readJson, Tree } from '@nx/devkit'; +import { createTreeWithEmptyWorkspace } from '@nx/devkit/testing'; +import { vueInitGenerator } from './init'; +import { InitSchema } from './schema'; + +describe('init', () => { + let tree: Tree; + + beforeEach(() => { + tree = createTreeWithEmptyWorkspace(); + }); + + it('should add vue dependencies', async () => { + await vueInitGenerator(tree, { + skipFormat: false, + unitTestRunner: 'vitest', + routing: true, + }); + const packageJson = readJson(tree, 'package.json'); + expect(packageJson).toMatchSnapshot(); + }); +}); diff --git a/packages/vue/src/generators/init/init.ts b/packages/vue/src/generators/init/init.ts new file mode 100755 index 00000000000000..9a3d888823d949 --- /dev/null +++ b/packages/vue/src/generators/init/init.ts @@ -0,0 +1,70 @@ +import { + addDependenciesToPackageJson, + GeneratorCallback, + removeDependenciesFromPackageJson, + runTasksInSerial, + Tree, +} from '@nx/devkit'; + +import { initGenerator as jsInitGenerator } from '@nx/js'; +import { + lessVersion, + nxVersion, + sassVersion, + vitePluginVueVersion, + vueRouterVersion, + vueTestUtilsVersion, + vueTsconfigVersion, + vueTscVersion, + vueVersion, +} from '../../utils/versions'; +import { InitSchema } from './schema'; + +function updateDependencies(host: Tree, schema: InitSchema) { + removeDependenciesFromPackageJson(host, ['@nx/vue'], []); + + let dependencies: { [key: string]: string } = { + vue: vueVersion, + 'vue-tsc': vueTscVersion, + }; + + let devDependencies: { [key: string]: string } = { + '@nx/vue': nxVersion, + '@vue/tsconfig': vueTsconfigVersion, + '@vue/test-utils': vueTestUtilsVersion, + }; + + if (schema.unitTestRunner === 'vitest') { + devDependencies['@vitejs/plugin-vue'] = vitePluginVueVersion; + } + + if (schema.routing) { + dependencies['vue-router'] = vueRouterVersion; + } + + if (schema.style === 'scss') { + devDependencies['sass'] = sassVersion; + } else if (schema.style === 'less') { + devDependencies['less'] = lessVersion; + } + + return addDependenciesToPackageJson(host, dependencies, devDependencies); +} + +export async function vueInitGenerator(host: Tree, schema: InitSchema) { + const tasks: GeneratorCallback[] = []; + + tasks.push( + await jsInitGenerator(host, { + ...schema, + tsConfigName: schema.rootProject ? 'tsconfig.json' : 'tsconfig.base.json', + skipFormat: true, + }) + ); + + tasks.push(updateDependencies(host, schema)); + + return runTasksInSerial(...tasks); +} + +export default vueInitGenerator; diff --git a/packages/vue/src/generators/init/schema.d.ts b/packages/vue/src/generators/init/schema.d.ts new file mode 100644 index 00000000000000..cf3fcf8bc5b446 --- /dev/null +++ b/packages/vue/src/generators/init/schema.d.ts @@ -0,0 +1,9 @@ +export interface InitSchema { + unitTestRunner?: 'vitest' | 'jest' | 'none'; + e2eTestRunner?: 'cypress' | 'playwright' | 'none'; + skipFormat?: boolean; + js?: boolean; + rootProject?: boolean; + routing?: boolean; + style?: 'css' | 'scss' | 'less' | 'none'; +} diff --git a/packages/vue/src/generators/init/schema.json b/packages/vue/src/generators/init/schema.json new file mode 100644 index 00000000000000..1ad78c79655f7b --- /dev/null +++ b/packages/vue/src/generators/init/schema.json @@ -0,0 +1,49 @@ +{ + "$schema": "http://json-schema.org/schema", + "$id": "NxVueInit", + "title": "Init Vue Plugin", + "description": "Initialize a Vue Plugin.", + "cli": "nx", + "type": "object", + "properties": { + "unitTestRunner": { + "description": "Adds the specified unit test runner.", + "type": "string", + "enum": ["vitest", "none"], + "default": "vitest" + }, + "e2eTestRunner": { + "description": "Adds the specified E2E test runner.", + "type": "string", + "enum": ["cypress", "playwright", "none"], + "default": "cypress" + }, + "skipFormat": { + "description": "Skip formatting files.", + "type": "boolean", + "default": false + }, + "js": { + "type": "boolean", + "description": "Use JavaScript instead of TypeScript", + "default": false + }, + "rootProject": { + "description": "Create a project at the root of the workspace", + "type": "boolean", + "default": false + }, + "routing": { + "type": "boolean", + "description": "Generate application with routes.", + "x-prompt": "Would you like to add React Router to this application?", + "default": false + }, + "style": { + "description": "The file extension to be used for style files.", + "type": "string", + "default": "css" + } + }, + "required": [] +} diff --git a/packages/vue/src/generators/library/__snapshots__/library.spec.ts.snap b/packages/vue/src/generators/library/__snapshots__/library.spec.ts.snap new file mode 100644 index 00000000000000..e328d6d98253dd --- /dev/null +++ b/packages/vue/src/generators/library/__snapshots__/library.spec.ts.snap @@ -0,0 +1,240 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`lib nested should create a local tsconfig.json 1`] = ` +{ + "compilerOptions": { + "allowJs": true, + "allowSyntheticDefaultImports": true, + "esModuleInterop": false, + "jsx": "preserve", + "jsxImportSource": "vue", + "moduleResolution": "bundler", + "resolveJsonModule": true, + "strict": true, + "verbatimModuleSyntax": true, + }, + "extends": "../../tsconfig.base.json", + "files": [], + "include": [], + "references": [ + { + "path": "./tsconfig.lib.json", + }, + { + "path": "./tsconfig.spec.json", + }, + ], +} +`; + +exports[`lib should add correct jest.config.ts and dependencies to package.json 1`] = ` +{ + "dependencies": { + "tslib": "^2.3.0", + "vue": "^3.3.4", + "vue-tsc": "^1.8.8", + }, + "devDependencies": { + "@nx/cypress": "0.0.1", + "@nx/eslint-plugin": "0.0.1", + "@nx/jest": "0.0.1", + "@nx/js": "0.0.1", + "@nx/linter": "0.0.1", + "@nx/rollup": "0.0.1", + "@nx/vite": "0.0.1", + "@nx/vue": "0.0.1", + "@types/jest": "^29.4.0", + "@types/node": "16.11.7", + "@typescript-eslint/eslint-plugin": "^5.60.1", + "@typescript-eslint/parser": "^5.60.1", + "@vue/eslint-config-prettier": "^8.0.0", + "@vue/eslint-config-typescript": "^11.0.3", + "@vue/test-utils": "^2.4.1", + "@vue/tsconfig": "^0.4.0", + "@vue/vue3-jest": "^29.2.6", + "babel-jest": "^29.4.1", + "eslint": "~8.46.0", + "eslint-config-prettier": "8.1.0", + "eslint-plugin-vue": "^9.16.1", + "jest": "^29.4.1", + "jest-environment-jsdom": "^29.4.1", + "prettier": "^2.6.2", + "ts-jest": "^29.1.0", + "ts-node": "10.9.1", + "typescript": "~5.1.3", + }, + "name": "test-name", +} +`; + +exports[`lib should add correct jest.config.ts and dependencies to package.json 2`] = ` +"/* eslint-disable */ +export default { + displayName: 'my-lib', + preset: '../jest.preset.js', + + coverageDirectory: '../coverage/my-lib', + moduleFileExtensions: ['js', 'ts', 'json', 'vue'], + transform: { + '^.+.[tj]sx?$': ['babel-jest'], + '^.+.vue$': [ + '@vue/vue3-jest', + { + tsConfig: './tsconfig.spec.json', + }, + ], + }, + testEnvironment: 'jsdom', + testMatch: ['**/__tests__/**/*.spec.ts?(x)', '**/__tests__/*.ts?(x)'], +}; +" +`; + +exports[`lib should add correct jest.config.ts and dependencies to package.json 3`] = ` +"{ + "presets": ["@nx/js/babel"] +} +" +`; + +exports[`lib should add vite types to tsconfigs and generate correct vite.config.ts file 1`] = ` +"import vue from '@vitejs/plugin-vue'; +import { defineConfig } from 'vite'; +import dts from 'vite-plugin-dts'; +import * as path from 'path'; +import { nxViteTsPaths } from '@nx/vite/plugins/nx-tsconfig-paths.plugin'; + +export default defineConfig({ + cacheDir: '../node_modules/.vite/my-lib', + + plugins: [ + nxViteTsPaths(), + dts({ + entryRoot: 'src', + tsConfigFilePath: path.join(__dirname, 'tsconfig.lib.json'), + skipDiagnostics: true, + }), + vue(), + ], + + // Uncomment this if you are using workers. + // worker: { + // plugins: [ nxViteTsPaths() ], + // }, + + // Configuration for building your library. + // See: https://vitejs.dev/guide/build.html#library-mode + build: { + entry: 'src/index.ts', + name: 'my-lib', + fileName: 'index', + formats: ['es', 'cjs'], + external: [], + lib: { + entry: 'src/index.ts', + name: 'my-lib', + fileName: 'index', + formats: ['es', 'cjs'], + }, + rollupOptions: { external: [] }, + }, + + test: { + globals: true, + cache: { dir: '../node_modules/.vitest' }, + environment: 'jsdom', + include: ['src/**/*.{test,spec}.{js,mjs,cjs,ts,mts,cts,jsx,tsx}'], + }, +}); +" +`; + +exports[`lib should add vue, vite and vitest to package.json 1`] = ` +{ + "dependencies": { + "vue": "^3.3.4", + "vue-tsc": "^1.8.8", + }, + "devDependencies": { + "@nx/cypress": "0.0.1", + "@nx/eslint-plugin": "0.0.1", + "@nx/js": "0.0.1", + "@nx/linter": "0.0.1", + "@nx/rollup": "0.0.1", + "@nx/vite": "0.0.1", + "@nx/vue": "0.0.1", + "@typescript-eslint/eslint-plugin": "^5.60.1", + "@typescript-eslint/parser": "^5.60.1", + "@vitejs/plugin-vue": "^4.3.1", + "@vitest/coverage-c8": "~0.32.0", + "@vitest/ui": "~0.32.0", + "@vue/eslint-config-prettier": "^8.0.0", + "@vue/eslint-config-typescript": "^11.0.3", + "@vue/test-utils": "^2.4.1", + "@vue/tsconfig": "^0.4.0", + "eslint": "~8.46.0", + "eslint-config-prettier": "8.1.0", + "eslint-plugin-vue": "^9.16.1", + "jsdom": "~22.1.0", + "prettier": "^2.6.2", + "typescript": "~5.1.3", + "vite": "~4.3.9", + "vitest": "~0.32.0", + }, + "name": "test-name", +} +`; + +exports[`lib should generate files 1`] = ` +{ + "extends": [ + "plugin:vue/vue3-essential", + "eslint:recommended", + "@vue/eslint-config-typescript", + "@vue/eslint-config-prettier/skip-formatting", + "../.eslintrc.json", + ], + "ignorePatterns": [ + "!**/*", + ], + "overrides": [ + { + "files": [ + "*.ts", + "*.tsx", + "*.js", + "*.jsx", + ], + "rules": {}, + }, + { + "files": [ + "*.ts", + "*.tsx", + ], + "rules": {}, + }, + { + "files": [ + "*.js", + "*.jsx", + ], + "rules": {}, + }, + ], +} +`; + +exports[`lib should ignore test files in tsconfig.lib.json 1`] = ` +[ + "src/**/__tests__/*", + "src/**/*.spec.ts", + "src/**/*.test.ts", + "src/**/*.spec.tsx", + "src/**/*.test.tsx", + "src/**/*.spec.js", + "src/**/*.test.js", + "src/**/*.spec.jsx", + "src/**/*.test.jsx", +] +`; diff --git a/packages/vue/src/generators/library/files/README.md b/packages/vue/src/generators/library/files/README.md new file mode 100644 index 00000000000000..8c7900842716ee --- /dev/null +++ b/packages/vue/src/generators/library/files/README.md @@ -0,0 +1,7 @@ +# <%= name %> + +This library was generated with [Nx](https://nx.dev). + +## Running unit tests + +Run `nx test <%= name %>` to execute the unit tests via [Vitest](https://vitest.dev/). diff --git a/packages/vue/src/generators/library/files/package.json__tmpl__ b/packages/vue/src/generators/library/files/package.json__tmpl__ new file mode 100644 index 00000000000000..507420ee308347 --- /dev/null +++ b/packages/vue/src/generators/library/files/package.json__tmpl__ @@ -0,0 +1,12 @@ +{ + "name": "<%= name %>", + "version": "0.0.1", + "main": "./index.js", + "types": "./index.d.ts", + "exports": { + ".": { + "import": "./index.mjs", + "require": "./index.js" + } + } +} diff --git a/packages/vue/src/generators/library/files/src/index.ts__tmpl__ b/packages/vue/src/generators/library/files/src/index.ts__tmpl__ new file mode 100644 index 00000000000000..e69de29bb2d1d6 diff --git a/packages/vue/src/generators/library/files/src/vue-shims.d.ts__tmpl__ b/packages/vue/src/generators/library/files/src/vue-shims.d.ts__tmpl__ new file mode 100644 index 00000000000000..798e8fcfac4afa --- /dev/null +++ b/packages/vue/src/generators/library/files/src/vue-shims.d.ts__tmpl__ @@ -0,0 +1,5 @@ +declare module '*.vue' { + import { defineComponent } from 'vue'; + const component: ReturnType; + export default component; +} diff --git a/packages/vue/src/generators/library/files/tsconfig.lib.json__tmpl__ b/packages/vue/src/generators/library/files/tsconfig.lib.json__tmpl__ new file mode 100644 index 00000000000000..e74cdb1ddf94d9 --- /dev/null +++ b/packages/vue/src/generators/library/files/tsconfig.lib.json__tmpl__ @@ -0,0 +1,34 @@ +{ + "extends": "./tsconfig.json", + "compilerOptions": { + "outDir": "<%= offsetFromRoot %>dist/out-tsc", + "baseUrl": ".", + "paths": { + "@/*": ["./src/*"] + }, + "types": [], + "lib": [ + "ES2016", + "DOM", + "DOM.Iterable" + ], + }, + "exclude": [ + "src/**/__tests__/*", + "src/**/*.spec.ts", + "src/**/*.test.ts", + "src/**/*.spec.tsx", + "src/**/*.test.tsx", + "src/**/*.spec.js", + "src/**/*.test.js", + "src/**/*.spec.jsx", + "src/**/*.test.jsx" + ], + "include": [ + "src/**/*.js", + "src/**/*.jsx", + "src/**/*.ts", + "src/**/*.tsx", + "src/**/*.vue" + ] +} diff --git a/packages/vue/src/generators/library/files/tsconfig.spec.json__tmpl__ b/packages/vue/src/generators/library/files/tsconfig.spec.json__tmpl__ new file mode 100644 index 00000000000000..dcd6c5da6b02a5 --- /dev/null +++ b/packages/vue/src/generators/library/files/tsconfig.spec.json__tmpl__ @@ -0,0 +1,27 @@ +{ + "extends": "./tsconfig.json", + "exclude": [], + "compilerOptions": { + "outDir": "../../dist/out-tsc", + "lib": [], + "types": [ + "vitest", + "vitest/globals", + "vitest/importMeta", + "vite/client", + "node"] + }, + "include": [ + "vite.config.ts", + "src/**/__tests__/*", + "src/**/*.test.ts", + "src/**/*.spec.ts", + "src/**/*.test.tsx", + "src/**/*.spec.tsx", + "src/**/*.test.js", + "src/**/*.spec.js", + "src/**/*.test.jsx", + "src/**/*.spec.jsx", + "src/**/*.d.ts" + ] +} diff --git a/packages/vue/src/generators/library/lib/add-jest.ts b/packages/vue/src/generators/library/lib/add-jest.ts new file mode 100644 index 00000000000000..9fcc2f3fab71a7 --- /dev/null +++ b/packages/vue/src/generators/library/lib/add-jest.ts @@ -0,0 +1,41 @@ +import { + addDependenciesToPackageJson, + ensurePackage, + GeneratorCallback, + runTasksInSerial, + Tree, +} from '@nx/devkit'; + +import { nxVersion, vueJest3Version } from '../../../utils/versions'; +import { setupJestProject } from '../../../utils/setup-jest'; +import { NormalizedSchema } from '../schema'; + +export async function addJest( + tree: Tree, + options: NormalizedSchema +): Promise { + const tasks: GeneratorCallback[] = []; + const { configurationGenerator } = ensurePackage( + '@nx/jest', + nxVersion + ); + const jestTask = await configurationGenerator(tree, { + project: options.name, + skipFormat: true, + testEnvironment: 'jsdom', + compiler: 'babel', + }); + tasks.push(jestTask); + + setupJestProject(tree, options.projectRoot); + tasks.push( + addDependenciesToPackageJson( + tree, + {}, + { + '@vue/vue3-jest': vueJest3Version, + } + ) + ); + return runTasksInSerial(...tasks); +} diff --git a/packages/vue/src/generators/library/lib/add-vite.ts b/packages/vue/src/generators/library/lib/add-vite.ts new file mode 100644 index 00000000000000..f0eea26c33205f --- /dev/null +++ b/packages/vue/src/generators/library/lib/add-vite.ts @@ -0,0 +1,78 @@ +import { + GeneratorCallback, + Tree, + ensurePackage, + runTasksInSerial, +} from '@nx/devkit'; +import { NormalizedSchema } from '../schema'; +import { nxVersion } from '../../../utils/versions'; + +export async function addVite( + tree: Tree, + options: NormalizedSchema +): Promise { + const tasks: GeneratorCallback[] = []; + // Set up build target + if (options.bundler === 'vite') { + const { viteConfigurationGenerator, createOrEditViteConfig } = + ensurePackage('@nx/vite', nxVersion); + const viteTask = await viteConfigurationGenerator(tree, { + uiFramework: 'none', + project: options.name, + newProject: true, + includeLib: true, + inSourceTests: options.inSourceTests, + includeVitest: options.unitTestRunner === 'vitest', + skipFormat: true, + testEnvironment: 'jsdom', + }); + tasks.push(viteTask); + + createOrEditViteConfig( + tree, + { + project: options.name, + includeLib: true, + includeVitest: options.unitTestRunner === 'vitest', + inSourceTests: options.inSourceTests, + imports: [`import vue from '@vitejs/plugin-vue'`], + plugins: ['vue()'], + }, + false + ); + } + + // Set up test target + if ( + options.unitTestRunner === 'vitest' && + options.bundler !== 'vite' // tests are already configured if bundler is vite + ) { + const { vitestGenerator, createOrEditViteConfig } = ensurePackage< + typeof import('@nx/vite') + >('@nx/vite', nxVersion); + const vitestTask = await vitestGenerator(tree, { + uiFramework: 'none', + project: options.name, + coverageProvider: 'c8', + inSourceTests: options.inSourceTests, + skipFormat: true, + testEnvironment: 'jsdom', + }); + tasks.push(vitestTask); + + createOrEditViteConfig( + tree, + { + project: options.name, + includeLib: true, + includeVitest: true, + inSourceTests: options.inSourceTests, + imports: [`import vue from '@vitejs/plugin-vue'`], + plugins: ['vue()'], + }, + true + ); + } + + return runTasksInSerial(...tasks); +} diff --git a/packages/vue/src/generators/library/lib/create-library-files.ts b/packages/vue/src/generators/library/lib/create-library-files.ts new file mode 100644 index 00000000000000..9e2c6ccb3b2608 --- /dev/null +++ b/packages/vue/src/generators/library/lib/create-library-files.ts @@ -0,0 +1,53 @@ +import type { Tree } from '@nx/devkit'; +import { + generateFiles, + joinPathFragments, + names, + offsetFromRoot, + toJS, + writeJson, +} from '@nx/devkit'; +import { getRelativePathToRootTsConfig } from '@nx/js'; +import { NormalizedSchema } from '../schema'; +import { createTsConfig } from '../../../utils/create-ts-config'; + +export function createLibraryFiles(host: Tree, options: NormalizedSchema) { + const relativePathToRootTsConfig = getRelativePathToRootTsConfig( + host, + options.projectRoot + ); + const substitutions = { + ...options, + ...names(options.name), + tmpl: '', + offsetFromRoot: offsetFromRoot(options.projectRoot), + fileName: options.fileName, + }; + + generateFiles( + host, + joinPathFragments(__dirname, '../files'), + options.projectRoot, + substitutions + ); + + if (!options.publishable && options.bundler === 'none') { + host.delete(`${options.projectRoot}/package.json`); + } + + if (options.unitTestRunner !== 'vitest') { + host.delete(`${options.projectRoot}/tsconfig.spec.json`); + } + + if (options.js) { + toJS(host); + } + + createTsConfig( + host, + options.projectRoot, + 'lib', + options, + relativePathToRootTsConfig + ); +} diff --git a/packages/vue/src/generators/library/lib/normalize-options.spec.ts b/packages/vue/src/generators/library/lib/normalize-options.spec.ts new file mode 100644 index 00000000000000..c126e30d8db320 --- /dev/null +++ b/packages/vue/src/generators/library/lib/normalize-options.spec.ts @@ -0,0 +1,53 @@ +import type { Tree } from '@nx/devkit'; +import { Linter } from '@nx/linter'; +import { createTreeWithEmptyWorkspace } from '@nx/devkit/testing'; +import { normalizeOptions } from './normalize-options'; + +describe('normalizeOptions', () => { + let tree: Tree; + + beforeEach(() => { + tree = createTreeWithEmptyWorkspace({ layout: 'apps-libs' }); + }); + + it('should set unitTestRunner=jest and bundler=none by default', async () => { + const options = await normalizeOptions(tree, { + name: 'test', + linter: Linter.None, + unitTestRunner: 'vitest', + }); + + expect(options).toMatchObject({ + bundler: 'none', + unitTestRunner: 'vitest', + }); + }); + + it('should set unitTestRunner=vitest by default when bundler is vite', async () => { + const options = await normalizeOptions(tree, { + name: 'test', + linter: Linter.None, + bundler: 'vite', + unitTestRunner: 'vitest', + }); + + expect(options).toMatchObject({ + bundler: 'vite', + unitTestRunner: 'vitest', + }); + }); + + it('should set maintain unitTestRunner when bundler is vite', async () => { + const options = await normalizeOptions(tree, { + name: 'test', + linter: Linter.None, + bundler: 'vite', + unitTestRunner: 'vitest', + }); + + expect(options).toMatchObject({ + bundler: 'vite', + unitTestRunner: 'vitest', + }); + }); +}); diff --git a/packages/vue/src/generators/library/lib/normalize-options.ts b/packages/vue/src/generators/library/lib/normalize-options.ts new file mode 100644 index 00000000000000..5452b9cc328d06 --- /dev/null +++ b/packages/vue/src/generators/library/lib/normalize-options.ts @@ -0,0 +1,77 @@ +import { getProjects, logger, normalizePath, Tree } from '@nx/devkit'; +import { determineProjectNameAndRootOptions } from '@nx/devkit/src/generators/project-name-and-root-utils'; +import { NormalizedSchema, Schema } from '../schema'; + +export async function normalizeOptions( + host: Tree, + options: Schema +): Promise { + const { + projectName, + names: projectNames, + projectRoot, + importPath, + } = await determineProjectNameAndRootOptions(host, { + name: options.name, + projectType: 'library', + directory: options.directory, + importPath: options.importPath, + projectNameAndRootFormat: options.projectNameAndRootFormat, + callingGenerator: '@nx/vue:library', + }); + + const fileName = projectNames.projectFileName; + + const parsedTags = options.tags + ? options.tags.split(',').map((s) => s.trim()) + : []; + + let bundler = options.bundler ?? 'none'; + + if (bundler === 'none') { + if (options.publishable) { + logger.warn( + `Publishable libraries cannot be used with bundler: 'none'. Defaulting to 'vite'.` + ); + bundler = 'vite'; + } + } + + const normalized = { + ...options, + bundler, + fileName, + routePath: `/${projectNames.projectFileName}`, + name: projectName, + projectRoot, + parsedTags, + importPath, + } as NormalizedSchema; + + // Libraries with a bundler or is publishable must also be buildable. + normalized.bundler = + normalized.bundler !== 'none' || options.publishable ? 'vite' : 'none'; + + normalized.inSourceTests === normalized.minimal || normalized.inSourceTests; + + if (options.appProject) { + const appProjectConfig = getProjects(host).get(options.appProject); + + if (appProjectConfig.projectType !== 'application') { + throw new Error( + `appProject expected type of "application" but got "${appProjectConfig.projectType}"` + ); + } + + try { + normalized.appMain = appProjectConfig.targets.build.options.main; + normalized.appSourceRoot = normalizePath(appProjectConfig.sourceRoot); + } catch (e) { + throw new Error( + `Could not locate project main for ${options.appProject}` + ); + } + } + + return normalized; +} diff --git a/packages/vue/src/generators/library/library.spec.ts b/packages/vue/src/generators/library/library.spec.ts new file mode 100644 index 00000000000000..78569908091398 --- /dev/null +++ b/packages/vue/src/generators/library/library.spec.ts @@ -0,0 +1,404 @@ +import { + getProjects, + readJson, + readProjectConfiguration, + Tree, + updateJson, +} from '@nx/devkit'; +import { createTreeWithEmptyWorkspace } from '@nx/devkit/testing'; +import { Linter } from '@nx/linter'; +import { nxVersion } from '../../utils/versions'; +import libraryGenerator from './library'; +import { Schema } from './schema'; + +describe('lib', () => { + let tree: Tree; + + let defaultSchema: Schema = { + name: 'myLib', + linter: Linter.EsLint, + skipFormat: false, + skipTsConfig: false, + unitTestRunner: 'vitest', + component: true, + strict: true, + }; + + beforeEach(() => { + tree = createTreeWithEmptyWorkspace(); + updateJson(tree, '/package.json', (json) => { + json.devDependencies = { + '@nx/cypress': nxVersion, + '@nx/rollup': nxVersion, + '@nx/vite': nxVersion, + }; + return json; + }); + }); + + it('should update project configuration', async () => { + await libraryGenerator(tree, defaultSchema); + const project = readProjectConfiguration(tree, 'my-lib'); + expect(project.root).toEqual('my-lib'); + expect(project.targets.build).toBeUndefined(); + expect(project.targets.lint).toEqual({ + executor: '@nx/linter:eslint', + outputs: ['{options.outputFile}'], + options: { + lintFilePatterns: ['my-lib/**/*.{ts,tsx,js,jsx,vue}'], + }, + }); + }); + + it('should add vite types to tsconfigs and generate correct vite.config.ts file', async () => { + await libraryGenerator(tree, { + ...defaultSchema, + bundler: 'vite', + unitTestRunner: 'vitest', + }); + const tsconfigApp = readJson(tree, 'my-lib/tsconfig.lib.json'); + expect(tsconfigApp.compilerOptions.types).toEqual(['vite/client']); + const tsconfigSpec = readJson(tree, 'my-lib/tsconfig.spec.json'); + expect(tsconfigSpec.compilerOptions.types).toEqual([ + 'vitest/globals', + 'vitest/importMeta', + 'vite/client', + 'node', + 'vitest', + ]); + expect(tree.read('my-lib/vite.config.ts', 'utf-8')).toMatchSnapshot(); + }); + + it('should update tags', async () => { + await libraryGenerator(tree, { ...defaultSchema, tags: 'one,two' }); + const project = readProjectConfiguration(tree, 'my-lib'); + expect(project).toEqual( + expect.objectContaining({ + tags: ['one', 'two'], + }) + ); + }); + + it('should add vue, vite and vitest to package.json', async () => { + await libraryGenerator(tree, defaultSchema); + expect(readJson(tree, '/package.json')).toMatchSnapshot(); + }); + + it('should add correct jest.config.ts and dependencies to package.json', async () => { + await libraryGenerator(tree, { ...defaultSchema, unitTestRunner: 'jest' }); + expect(readJson(tree, '/package.json')).toMatchSnapshot(); + expect(tree.read('my-lib/jest.config.ts', 'utf-8')).toMatchSnapshot(); + expect(tree.read('my-lib/.babelrc', 'utf-8')).toMatchSnapshot(); + }); + + it('should update root tsconfig.base.json', async () => { + await libraryGenerator(tree, defaultSchema); + const tsconfigJson = readJson(tree, '/tsconfig.base.json'); + expect(tsconfigJson.compilerOptions.paths['@proj/my-lib']).toEqual([ + 'my-lib/src/index.ts', + ]); + }); + + it('should create tsconfig.base.json out of tsconfig.json', async () => { + tree.rename('tsconfig.base.json', 'tsconfig.json'); + + await libraryGenerator(tree, defaultSchema); + + expect(tree.exists('tsconfig.base.json')).toEqual(true); + const tsconfigJson = readJson(tree, 'tsconfig.base.json'); + expect(tsconfigJson.compilerOptions.paths['@proj/my-lib']).toEqual([ + 'my-lib/src/index.ts', + ]); + }); + + it('should update root tsconfig.base.json (no existing path mappings)', async () => { + updateJson(tree, 'tsconfig.base.json', (json) => { + json.compilerOptions.paths = undefined; + return json; + }); + + await libraryGenerator(tree, defaultSchema); + const tsconfigJson = readJson(tree, '/tsconfig.base.json'); + expect(tsconfigJson.compilerOptions.paths['@proj/my-lib']).toEqual([ + 'my-lib/src/index.ts', + ]); + }); + + it('should create a local tsconfig.json', async () => { + await libraryGenerator(tree, defaultSchema); + + const tsconfigJson = readJson(tree, 'my-lib/tsconfig.json'); + expect(tsconfigJson.extends).toBe('../tsconfig.base.json'); + expect(tsconfigJson.references).toEqual([ + { + path: './tsconfig.lib.json', + }, + { + path: './tsconfig.spec.json', + }, + ]); + }); + + it('should extend the tsconfig.lib.json with tsconfig.spec.json', async () => { + await libraryGenerator(tree, defaultSchema); + const tsconfigJson = readJson(tree, 'my-lib/tsconfig.spec.json'); + expect(tsconfigJson.extends).toEqual('./tsconfig.json'); + }); + + it('should extend ./tsconfig.json with tsconfig.lib.json', async () => { + await libraryGenerator(tree, defaultSchema); + const tsconfigJson = readJson(tree, 'my-lib/tsconfig.lib.json'); + expect(tsconfigJson.extends).toEqual('./tsconfig.json'); + }); + + it('should ignore test files in tsconfig.lib.json', async () => { + await libraryGenerator(tree, defaultSchema); + const tsconfigJson = readJson(tree, 'my-lib/tsconfig.lib.json'); + expect(tsconfigJson.exclude).toMatchSnapshot(); + }); + + it('should generate files', async () => { + await libraryGenerator(tree, defaultSchema); + expect(tree.exists('my-lib/package.json')).toBeFalsy(); + expect(tree.exists('my-lib/src/index.ts')).toBeTruthy(); + expect(tree.exists('my-lib/src/lib/my-lib.vue')).toBeTruthy(); + expect(tree.exists('my-lib/src/lib/__tests__/my-lib.spec.ts')).toBeTruthy(); + const eslintJson = readJson(tree, 'my-lib/.eslintrc.json'); + expect(eslintJson).toMatchSnapshot(); + }); + + describe('nested', () => { + it('should update tags and implicitDependencies', async () => { + await libraryGenerator(tree, { + ...defaultSchema, + directory: 'myDir', + tags: 'one', + }); + const myLib = readProjectConfiguration(tree, 'my-dir-my-lib'); + expect(myLib).toEqual( + expect.objectContaining({ + tags: ['one'], + }) + ); + + await libraryGenerator(tree, { + ...defaultSchema, + name: 'myLib2', + directory: 'myDir', + tags: 'one,two', + }); + + const myLib2 = readProjectConfiguration(tree, 'my-dir-my-lib2'); + expect(myLib2).toEqual( + expect.objectContaining({ + tags: ['one', 'two'], + }) + ); + }); + + it('should generate files', async () => { + await libraryGenerator(tree, { ...defaultSchema, directory: 'myDir' }); + expect(tree.exists('my-dir/my-lib/src/index.ts')).toBeTruthy(); + expect( + tree.exists('my-dir/my-lib/src/lib/my-dir-my-lib.vue') + ).toBeTruthy(); + expect( + tree.exists('my-dir/my-lib/src/lib/__tests__/my-dir-my-lib.spec.ts') + ).toBeTruthy(); + }); + + it('should update project configurations', async () => { + await libraryGenerator(tree, { ...defaultSchema, directory: 'myDir' }); + const config = readProjectConfiguration(tree, 'my-dir-my-lib'); + + expect(config.root).toEqual('my-dir/my-lib'); + expect(config.targets.lint).toEqual({ + executor: '@nx/linter:eslint', + outputs: ['{options.outputFile}'], + options: { + lintFilePatterns: ['my-dir/my-lib/**/*.{ts,tsx,js,jsx,vue}'], + }, + }); + }); + + it('should update root tsconfig.base.json', async () => { + await libraryGenerator(tree, { ...defaultSchema, directory: 'myDir' }); + const tsconfigJson = readJson(tree, '/tsconfig.base.json'); + expect(tsconfigJson.compilerOptions.paths['@proj/my-dir/my-lib']).toEqual( + ['my-dir/my-lib/src/index.ts'] + ); + expect( + tsconfigJson.compilerOptions.paths['my-dir-my-lib/*'] + ).toBeUndefined(); + }); + + it('should create a local tsconfig.json', async () => { + await libraryGenerator(tree, { ...defaultSchema, directory: 'myDir' }); + + const tsconfigJson = readJson(tree, 'my-dir/my-lib/tsconfig.json'); + expect(tsconfigJson).toMatchSnapshot(); + }); + }); + + describe('--no-component', () => { + it('should not generate components or styles', async () => { + await libraryGenerator(tree, { ...defaultSchema, component: false }); + + expect(tree.exists('my-lib/src/lib')).toBeFalsy(); + }); + }); + + describe('--unit-test-runner none', () => { + it('should not generate test configuration', async () => { + await libraryGenerator(tree, { + ...defaultSchema, + unitTestRunner: 'none', + }); + + expect(tree.exists('my-lib/tsconfig.spec.json')).toBeFalsy(); + const config = readProjectConfiguration(tree, 'my-lib'); + expect(config.targets.test).toBeUndefined(); + expect(config.targets.lint).toMatchInlineSnapshot(` + { + "executor": "@nx/linter:eslint", + "options": { + "lintFilePatterns": [ + "my-lib/**/*.{ts,tsx,js,jsx,vue}", + ], + }, + "outputs": [ + "{options.outputFile}", + ], + } + `); + }); + }); + + describe('--publishable', () => { + it('should add build targets', async () => { + await libraryGenerator(tree, { + ...defaultSchema, + publishable: true, + importPath: '@proj/my-lib', + }); + + const projectsConfigurations = getProjects(tree); + + expect(projectsConfigurations.get('my-lib').targets.build).toMatchObject({ + executor: '@nx/vite:build', + outputs: ['{options.outputPath}'], + options: { + outputPath: 'dist/my-lib', + }, + }); + }); + + it('should fail if no importPath is provided with publishable', async () => { + expect.assertions(1); + + try { + await libraryGenerator(tree, { + ...defaultSchema, + directory: 'myDir', + publishable: true, + }); + } catch (e) { + expect(e.message).toContain( + 'For publishable libs you have to provide a proper "--importPath" which needs to be a valid npm package name (e.g. my-awesome-lib or @myorg/my-lib)' + ); + } + }); + + it('should add package.json and .babelrc', async () => { + await libraryGenerator(tree, { + ...defaultSchema, + publishable: true, + importPath: '@proj/my-lib', + }); + + const packageJson = readJson(tree, '/my-lib/package.json'); + expect(packageJson.name).toEqual('@proj/my-lib'); + expect(tree.exists('/my-lib/.babelrc')); + }); + }); + + describe('--js', () => { + it('should generate JS files', async () => { + await libraryGenerator(tree, { + ...defaultSchema, + js: true, + }); + + expect(tree.exists('/my-lib/src/index.js')).toBe(true); + }); + }); + + describe('--importPath', () => { + it('should update the package.json & tsconfig with the given import path', async () => { + await libraryGenerator(tree, { + ...defaultSchema, + publishable: true, + directory: 'myDir', + importPath: '@myorg/lib', + }); + const packageJson = readJson(tree, 'my-dir/my-lib/package.json'); + const tsconfigJson = readJson(tree, '/tsconfig.base.json'); + + expect(packageJson.name).toBe('@myorg/lib'); + expect( + tsconfigJson.compilerOptions.paths[packageJson.name] + ).toBeDefined(); + }); + + it('should fail if the same importPath has already been used', async () => { + await libraryGenerator(tree, { + ...defaultSchema, + name: 'myLib1', + publishable: true, + importPath: '@myorg/lib', + }); + + try { + await libraryGenerator(tree, { + ...defaultSchema, + name: 'myLib2', + publishable: true, + importPath: '@myorg/lib', + }); + } catch (e) { + expect(e.message).toContain( + 'You already have a library using the import path' + ); + } + + expect.assertions(1); + }); + }); + + describe('--no-strict', () => { + it('should not add options for strict mode', async () => { + await libraryGenerator(tree, { + ...defaultSchema, + strict: false, + }); + const tsconfigJson = readJson(tree, '/my-lib/tsconfig.json'); + + expect(tsconfigJson.compilerOptions.strict).toEqual(false); + }); + }); + + describe('--setParserOptionsProject', () => { + it('should set the parserOptions.project in the eslintrc.json file', async () => { + await libraryGenerator(tree, { + ...defaultSchema, + setParserOptionsProject: true, + }); + + const eslintConfig = readJson(tree, 'my-lib/.eslintrc.json'); + + expect(eslintConfig.overrides[0].parserOptions.project).toEqual([ + 'my-lib/tsconfig.*?.json', + ]); + }); + }); +}); diff --git a/packages/vue/src/generators/library/library.ts b/packages/vue/src/generators/library/library.ts new file mode 100644 index 00000000000000..f72989de37d340 --- /dev/null +++ b/packages/vue/src/generators/library/library.ts @@ -0,0 +1,103 @@ +import { + addProjectConfiguration, + formatFiles, + GeneratorCallback, + joinPathFragments, + runTasksInSerial, + toJS, + Tree, + updateJson, +} from '@nx/devkit'; +import { addTsConfigPath } from '@nx/js'; +import { vueInitGenerator } from '../init/init'; +import { Schema } from './schema'; +import { normalizeOptions } from './lib/normalize-options'; +import { addLinting } from '../../utils/add-linting'; +import { createLibraryFiles } from './lib/create-library-files'; +import { extractTsConfigBase } from '../../utils/create-ts-config'; +import componentGenerator from '../component/component'; +import { addVite } from './lib/add-vite'; +import { addJest } from './lib/add-jest'; + +export async function libraryGenerator(tree: Tree, schema: Schema) { + const tasks: GeneratorCallback[] = []; + + const options = await normalizeOptions(tree, schema); + if (options.publishable === true && !schema.importPath) { + throw new Error( + `For publishable libs you have to provide a proper "--importPath" which needs to be a valid npm package name (e.g. my-awesome-lib or @myorg/my-lib)` + ); + } + + addProjectConfiguration(tree, options.name, { + root: options.projectRoot, + sourceRoot: joinPathFragments(options.projectRoot, 'src'), + projectType: 'library', + tags: options.parsedTags, + targets: {}, + }); + + tasks.push( + await vueInitGenerator(tree, { + ...options, + e2eTestRunner: 'none', + skipFormat: true, + }) + ); + + extractTsConfigBase(tree); + + tasks.push(await addLinting(tree, options, 'lib')); + + createLibraryFiles(tree, options); + + tasks.push(await addVite(tree, options)); + + if (options.unitTestRunner === 'jest') + tasks.push(await addJest(tree, options)); + + if (options.component) { + tasks.push( + await componentGenerator(tree, { + name: options.fileName, + project: options.name, + flat: true, + skipTests: + options.unitTestRunner === 'none' || + (options.unitTestRunner === 'vitest' && + options.inSourceTests == true), + export: true, + routing: options.routing, + js: options.js, + pascalCaseFiles: options.pascalCaseFiles, + inSourceTests: options.inSourceTests, + skipFormat: true, + }) + ); + } + + if (options.publishable || options.bundler !== 'none') { + updateJson(tree, `${options.projectRoot}/package.json`, (json) => { + json.name = options.importPath; + return json; + }); + } + + if (!options.skipTsConfig) { + addTsConfigPath(tree, options.importPath, [ + joinPathFragments( + options.projectRoot, + './src', + 'index.' + (options.js ? 'js' : 'ts') + ), + ]); + } + + if (options.js) toJS(tree); + + if (!options.skipFormat) await formatFiles(tree); + + return runTasksInSerial(...tasks); +} + +export default libraryGenerator; diff --git a/packages/vue/src/generators/library/schema.d.ts b/packages/vue/src/generators/library/schema.d.ts new file mode 100644 index 00000000000000..6b08f31cb153a0 --- /dev/null +++ b/packages/vue/src/generators/library/schema.d.ts @@ -0,0 +1,41 @@ +import type { ProjectNameAndRootFormat } from '@nx/devkit/src/generators/project-name-and-root-utils'; +import type { Linter } from '@nx/linter'; +import type { SupportedStyles } from '../../../typings/style'; + +export interface Schema { + appProject?: string; + bundler?: 'none' | 'vite'; + component?: boolean; + directory?: string; + projectNameAndRootFormat?: ProjectNameAndRootFormat; + importPath?: string; + inSourceTests?: boolean; + js?: boolean; + linter: Linter; + name: string; + pascalCaseFiles?: boolean; + publishable?: boolean; + routing?: boolean; + setParserOptionsProject?: boolean; + skipFormat?: boolean; + skipPackageJson?: boolean; + skipTsConfig?: boolean; + strict?: boolean; + tags?: string; + unitTestRunner?: 'jest' | 'vitest' | 'none'; + minimal?: boolean; + e2eTestRunner?: 'cypress' | 'none'; +} + +export interface NormalizedSchema extends Schema { + js: boolean; + name: string; + linter: Linter; + fileName: string; + projectRoot: string; + routePath: string; + parsedTags: string[]; + appMain?: string; + appSourceRoot?: string; + unitTestRunner?: 'jest' | 'vitest' | 'none'; +} diff --git a/packages/vue/src/generators/library/schema.json b/packages/vue/src/generators/library/schema.json new file mode 100644 index 00000000000000..503f3e9d2a36cd --- /dev/null +++ b/packages/vue/src/generators/library/schema.json @@ -0,0 +1,139 @@ +{ + "$schema": "http://json-schema.org/schema", + "cli": "nx", + "$id": "NxVueLibrary", + "title": "Create a Vue Library", + "description": "Create a Vue Library for an Nx workspace.", + "type": "object", + "examples": [ + { + "command": "nx g lib mylib --directory=libs/mylib", + "description": "Generate `libs/mylib`" + }, + { + "command": "nx g lib mylib --appProject=myapp", + "description": "Generate a library with routes and add them to `myapp`" + } + ], + "properties": { + "name": { + "type": "string", + "description": "Library name", + "$default": { + "$source": "argv", + "index": 0 + }, + "x-prompt": "What name would you like to use for the library?", + "pattern": "(?:^@[a-zA-Z0-9-*~][a-zA-Z0-9-*._~]*\\/[a-zA-Z0-9-~][a-zA-Z0-9-._~]*|^[a-zA-Z][^:]*)$", + "x-priority": "important" + }, + "directory": { + "type": "string", + "description": "A directory where the lib is placed.", + "alias": "dir", + "x-priority": "important" + }, + "projectNameAndRootFormat": { + "description": "Whether to generate the project name and root directory as provided (`as-provided`) or generate them composing their values and taking the configured layout into account (`derived`).", + "type": "string", + "enum": ["as-provided", "derived"] + }, + "linter": { + "description": "The tool to use for running lint checks.", + "type": "string", + "enum": ["eslint", "none"], + "default": "eslint" + }, + "unitTestRunner": { + "type": "string", + "enum": ["vitest", "jest", "none"], + "description": "Test runner to use for unit tests.", + "x-prompt": "What unit test runner should be used?" + }, + "inSourceTests": { + "type": "boolean", + "default": false, + "description": "When using Vitest, separate spec files will not be generated and instead will be included within the source files." + }, + "tags": { + "type": "string", + "description": "Add tags to the library (used for linting).", + "alias": "t" + }, + "skipFormat": { + "description": "Skip formatting files.", + "type": "boolean", + "default": false, + "x-priority": "internal" + }, + "skipTsConfig": { + "type": "boolean", + "default": false, + "description": "Do not update `tsconfig.json` for development experience.", + "x-priority": "internal" + }, + "pascalCaseFiles": { + "type": "boolean", + "description": "Use pascal case component file name (e.g. `App.tsx`).", + "alias": "P", + "default": false + }, + "routing": { + "type": "boolean", + "description": "Generate library with routes." + }, + "appProject": { + "type": "string", + "description": "The application project to add the library route to.", + "alias": "a" + }, + "publishable": { + "type": "boolean", + "description": "Create a publishable library." + }, + "importPath": { + "type": "string", + "description": "The library name used to import it, like `@myorg/my-awesome-lib`." + }, + "component": { + "type": "boolean", + "description": "Generate a default component.", + "default": true + }, + "js": { + "type": "boolean", + "description": "Generate JavaScript files rather than TypeScript files.", + "default": false + }, + "strict": { + "type": "boolean", + "description": "Whether to enable tsconfig strict mode or not.", + "default": true + }, + "setParserOptionsProject": { + "type": "boolean", + "description": "Whether or not to configure the ESLint `parserOptions.project` option. We do not do this by default for lint performance reasons.", + "default": false + }, + "bundler": { + "type": "string", + "description": "The bundler to use. Choosing 'none' means this library is not buildable.", + "enum": ["none", "vite"], + "default": "none", + "x-prompt": "Which bundler would you like to use to build the library? Choose 'none' to skip build setup.", + "x-priority": "important" + }, + "skipPackageJson": { + "description": "Do not add dependencies to `package.json`.", + "type": "boolean", + "default": false, + "x-priority": "internal" + }, + "minimal": { + "description": "Create a Vue library with a minimal setup, no separate test files.", + "type": "boolean", + "default": false + } + }, + "required": ["name"] +} diff --git a/packages/vue/src/utils/add-linting.ts b/packages/vue/src/utils/add-linting.ts new file mode 100644 index 00000000000000..76d4d75711cd68 --- /dev/null +++ b/packages/vue/src/utils/add-linting.ts @@ -0,0 +1,60 @@ +import { Tree } from 'nx/src/generators/tree'; +import { Linter, lintProjectGenerator } from '@nx/linter'; +import { joinPathFragments } from 'nx/src/utils/path'; +import { addDependenciesToPackageJson, runTasksInSerial } from '@nx/devkit'; +import { extraEslintDependencies } from './lint'; +import { + addExtendsToLintConfig, + isEslintConfigSupported, +} from '@nx/linter/src/generators/utils/eslint-file'; + +export async function addLinting( + host: Tree, + options: { + linter: Linter; + name: string; + projectRoot: string; + unitTestRunner?: 'jest' | 'vitest' | 'none'; + setParserOptionsProject?: boolean; + skipPackageJson?: boolean; + rootProject?: boolean; + }, + projectType: 'lib' | 'app' +) { + if (options.linter === Linter.EsLint) { + const lintTask = await lintProjectGenerator(host, { + linter: options.linter, + project: options.name, + tsConfigPaths: [ + joinPathFragments(options.projectRoot, `tsconfig.${projectType}.json`), + ], + unitTestRunner: options.unitTestRunner, + eslintFilePatterns: [`${options.projectRoot}/**/*.{ts,tsx,js,jsx,vue}`], + skipFormat: true, + setParserOptionsProject: options.setParserOptionsProject, + rootProject: options.rootProject, + }); + + if (isEslintConfigSupported(host)) { + addExtendsToLintConfig(host, options.projectRoot, [ + 'plugin:vue/vue3-essential', + 'eslint:recommended', + '@vue/eslint-config-typescript', + '@vue/eslint-config-prettier/skip-formatting', + ]); + } + + let installTask = () => {}; + if (!options.skipPackageJson) { + installTask = addDependenciesToPackageJson( + host, + extraEslintDependencies.dependencies, + extraEslintDependencies.devDependencies + ); + } + + return runTasksInSerial(lintTask, installTask); + } else { + return () => {}; + } +} diff --git a/packages/vue/src/utils/ast-utils.ts b/packages/vue/src/utils/ast-utils.ts new file mode 100644 index 00000000000000..2a20d08ecd052e --- /dev/null +++ b/packages/vue/src/utils/ast-utils.ts @@ -0,0 +1,35 @@ +import type * as ts from 'typescript'; +import { findNodes } from '@nx/js'; +import { ChangeType, StringChange } from '@nx/devkit'; +import { ensureTypescript } from '@nx/js/src/utils/typescript/ensure-typescript'; + +let tsModule: typeof import('typescript'); + +export function addImport( + source: ts.SourceFile, + statement: string +): StringChange[] { + if (!tsModule) { + tsModule = ensureTypescript(); + } + + const allImports = findNodes(source, tsModule.SyntaxKind.ImportDeclaration); + if (allImports.length > 0) { + const lastImport = allImports[allImports.length - 1]; + return [ + { + type: ChangeType.Insert, + index: lastImport.end + 1, + text: `\n${statement}\n`, + }, + ]; + } else { + return [ + { + type: ChangeType.Insert, + index: 0, + text: `\n${statement}\n`, + }, + ]; + } +} diff --git a/packages/vue/src/utils/create-ts-config.ts b/packages/vue/src/utils/create-ts-config.ts new file mode 100644 index 00000000000000..f7fba3afda4346 --- /dev/null +++ b/packages/vue/src/utils/create-ts-config.ts @@ -0,0 +1,84 @@ +import { Tree, updateJson, writeJson } from '@nx/devkit'; +import * as shared from '@nx/js/src/utils/typescript/create-ts-config'; + +export function createTsConfig( + host: Tree, + projectRoot: string, + type: 'app' | 'lib', + options: { + strict?: boolean; + style?: string; + bundler?: string; + rootProject?: boolean; + unitTestRunner?: string; + }, + relativePathToRootTsConfig: string +) { + const json = { + compilerOptions: { + allowJs: true, + esModuleInterop: false, + allowSyntheticDefaultImports: true, + strict: options.strict, + jsx: 'preserve', + jsxImportSource: 'vue', + moduleResolution: 'bundler', + resolveJsonModule: true, + verbatimModuleSyntax: options.unitTestRunner !== 'jest', + }, + files: [], + include: [], + references: [ + { + path: type === 'app' ? './tsconfig.app.json' : './tsconfig.lib.json', + }, + ], + } as any; + + if (options.unitTestRunner === 'vitest') { + json.references.push({ + path: './tsconfig.spec.json', + }); + } + + // inline tsconfig.base.json into the project + if (options.rootProject) { + json.compileOnSave = false; + json.compilerOptions = { + ...shared.tsConfigBaseOptions, + ...json.compilerOptions, + }; + json.exclude = ['node_modules', 'tmp']; + } else { + json.extends = relativePathToRootTsConfig; + } + + writeJson(host, `${projectRoot}/tsconfig.json`, json); + + const tsconfigProjectPath = `${projectRoot}/tsconfig.${type}.json`; + if (options.bundler === 'vite' && host.exists(tsconfigProjectPath)) { + updateJson(host, tsconfigProjectPath, (json) => { + json.compilerOptions ??= {}; + + const types = new Set(json.compilerOptions.types ?? []); + types.add('vite/client'); + + json.compilerOptions.types = Array.from(types); + + return json; + }); + } else { + } +} + +export function extractTsConfigBase(host: Tree) { + shared.extractTsConfigBase(host); + + if (host.exists('vite.config.ts')) { + const vite = host.read('vite.config.ts').toString(); + host.write( + 'vite.config.ts', + vite.replace(`projects: []`, `projects: ['tsconfig.base.json']`) + ); + } +} diff --git a/packages/vue/src/utils/lint.ts b/packages/vue/src/utils/lint.ts new file mode 100644 index 00000000000000..923bcd2abfbb3e --- /dev/null +++ b/packages/vue/src/utils/lint.ts @@ -0,0 +1,29 @@ +import { + eslintPluginVueVersion, + vueEslintConfigPrettierVersion, + vueEslintConfigTypescriptVersion, +} from './versions'; + +export const extraEslintDependencies = { + dependencies: {}, + devDependencies: { + '@vue/eslint-config-prettier': vueEslintConfigPrettierVersion, + '@vue/eslint-config-typescript': vueEslintConfigTypescriptVersion, + 'eslint-plugin-vue': eslintPluginVueVersion, + }, +}; + +export const extendVueEslintJson = (json: any) => { + const { extends: pluginExtends, ...config } = json; + + return { + extends: [ + 'plugin:vue/vue3-essential', + 'eslint:recommended', + '@vue/eslint-config-typescript', + '@vue/eslint-config-prettier/skip-formatting', + ...(pluginExtends || []), + ], + ...config, + }; +}; diff --git a/packages/vue/src/utils/setup-jest.ts b/packages/vue/src/utils/setup-jest.ts new file mode 100644 index 00000000000000..a8d0ad9c4ef981 --- /dev/null +++ b/packages/vue/src/utils/setup-jest.ts @@ -0,0 +1,124 @@ +import { + applyChangesToString, + ChangeType, + joinPathFragments, + offsetFromRoot, + Tree, + writeJson, +} from '@nx/devkit'; +import { ObjectLiteralExpression } from 'typescript'; + +export function setupJestProject(tree: Tree, projectRoot: string) { + updateJestConfigTsFile(tree, projectRoot); + writeBabelRcFile(tree, projectRoot); +} + +export function writeBabelRcFile(tree: Tree, projectRoot: string) { + writeJson(tree, joinPathFragments(projectRoot, '.babelrc'), { + presets: ['@nx/js/babel'], + }); +} + +export function updateJestConfigTsFile(tree: Tree, projectRoot: string) { + const jestConfigTs = joinPathFragments(projectRoot, 'jest.config.ts'); + if (tree.exists(jestConfigTs)) { + const { tsquery } = require('@phenomnomnominal/tsquery'); + let fileContent = tree.read(jestConfigTs, 'utf-8'); + const sourceFile = tsquery.ast(fileContent); + + const settingsObject = tsquery.query( + sourceFile, + 'ObjectLiteralExpression' + )?.[0] as ObjectLiteralExpression; + + if (settingsObject) { + const moduleFileExtensions = tsquery.query( + sourceFile, + `PropertyAssignment:has(Identifier:has([name="moduleFileExtensions"]))` + )?.[0]; + + if (moduleFileExtensions) { + fileContent = applyChangesToString(fileContent, [ + { + type: ChangeType.Delete, + start: moduleFileExtensions.getStart(), + length: + moduleFileExtensions.getEnd() - + moduleFileExtensions.getStart() + + 1, + }, + ]); + } + + const transformProperty = tsquery.query( + sourceFile, + `PropertyAssignment:has(Identifier:has([name="transform"]))` + )?.[0]; + + if (transformProperty) { + fileContent = applyChangesToString(fileContent, [ + { + type: ChangeType.Delete, + start: transformProperty.getStart(), + length: + transformProperty.getEnd() - transformProperty.getStart() + 1, + }, + ]); + } + + const settingsObjectUpdated = tsquery.query( + fileContent, + 'ObjectLiteralExpression' + )?.[0] as ObjectLiteralExpression; + + fileContent = applyChangesToString(fileContent, [ + { + type: ChangeType.Insert, + index: settingsObjectUpdated.getEnd() - 1, + text: `, + moduleFileExtensions: ['js', 'ts', 'json', 'vue'], + transform: { + '^.+\\.[tj]sx?$': ['babel-jest'], + '^.+\\.vue$': [ + '@vue/vue3-jest', + { + tsConfig: './tsconfig.spec.json', + }, + ], + }, + testEnvironment: 'jsdom', + testMatch: ['**/__tests__/**/*.spec.ts?(x)', '**/__tests__/*.ts?(x)'], + `, + }, + ]); + tree.write(jestConfigTs, fileContent); + } else { + writeNewJestConfig(tree, projectRoot); + } + } else { + writeNewJestConfig(tree, projectRoot); + } +} + +function writeNewJestConfig(tree: Tree, projectRoot: string) { + tree.write( + joinPathFragments(projectRoot, 'jest.config.js'), + ` + module.exports = { + preset: '${offsetFromRoot}/jest.preset.js', + moduleFileExtensions: ['js', 'ts', 'json', 'vue'], + transform: { + '^.+\\.[tj]sx?$': ['babel-jest'], + '^.+\\.vue$': [ + '@vue/vue3-jest', + { + tsConfig: './tsconfig.spec.json', + }, + ], + }, + testEnvironment: 'jsdom', + testMatch: ['**/__tests__/**/*.spec.ts?(x)', '**/__tests__/*.ts?(x)'], + }; + ` + ); +} diff --git a/packages/vue/src/utils/test-utils.ts b/packages/vue/src/utils/test-utils.ts new file mode 100644 index 00000000000000..dd4f2377546283 --- /dev/null +++ b/packages/vue/src/utils/test-utils.ts @@ -0,0 +1,29 @@ +import { addProjectConfiguration, names, Tree } from '@nx/devkit'; +import { Linter } from '@nx/linter'; +import applicationGenerator from '../generators/application/application'; + +export async function createApp(tree: Tree, appName: string): Promise { + await applicationGenerator(tree, { + e2eTestRunner: 'none', + linter: Linter.EsLint, + skipFormat: true, + style: 'css', + unitTestRunner: 'none', + name: appName, + projectNameAndRootFormat: 'as-provided', + }); +} + +export async function createLib(tree: Tree, libName: string): Promise { + const { fileName } = names(libName); + + tree.write(`/${fileName}/src/index.ts`, ``); + + addProjectConfiguration(tree, fileName, { + tags: [], + root: `${fileName}`, + projectType: 'library', + sourceRoot: `${fileName}/src`, + targets: {}, + }); +} diff --git a/packages/vue/src/utils/versions.ts b/packages/vue/src/utils/versions.ts new file mode 100644 index 00000000000000..8d01f547ac118a --- /dev/null +++ b/packages/vue/src/utils/versions.ts @@ -0,0 +1,23 @@ +export const nxVersion = require('../../package.json').version; + +// vue core +export const vueVersion = '^3.3.4'; +export const vueTscVersion = '^1.8.8'; +export const vueRouterVersion = '^4.2.4'; + +// build deps +export const vueTsconfigVersion = '^0.4.0'; + +// test deps +export const vueTestUtilsVersion = '^2.4.1'; +export const vitePluginVueVersion = '^4.3.1'; +export const vueJest3Version = '^29.2.6'; + +// linting deps +export const vueEslintConfigPrettierVersion = '^8.0.0'; +export const vueEslintConfigTypescriptVersion = '^11.0.3'; +export const eslintPluginVueVersion = '^9.16.1'; + +// other deps +export const sassVersion = '1.62.1'; +export const lessVersion = '3.12.2'; diff --git a/packages/web/src/generators/application/application.spec.ts b/packages/web/src/generators/application/application.spec.ts index 75cc9ed57d2ff5..d6f156f3799067 100644 --- a/packages/web/src/generators/application/application.spec.ts +++ b/packages/web/src/generators/application/application.spec.ts @@ -184,10 +184,7 @@ describe('app', () => { path: './tsconfig.spec.json', }, ]); - expect(tsconfig.compilerOptions.types).toMatchObject([ - 'vite/client', - 'vitest', - ]); + expect(tsconfig.compilerOptions.types).toMatchObject(['vite/client']); expect(tree.exists('my-app-e2e/cypress.config.ts')).toBeTruthy(); expect(tree.exists('my-app/index.html')).toBeTruthy(); @@ -555,6 +552,7 @@ describe('app', () => { "vitest/importMeta", "vite/client", "node", + "vitest", ] `); expect( @@ -660,10 +658,7 @@ describe('app', () => { it('should create correct tsconfig compilerOptions', () => { const tsconfigJson = readJson(viteAppTree, '/my-app/tsconfig.json'); - expect(tsconfigJson.compilerOptions.types).toMatchObject([ - 'vite/client', - 'vitest', - ]); + expect(tsconfigJson.compilerOptions.types).toMatchObject(['vite/client']); }); it('should create index.html and vite.config file at the root of the app', () => { diff --git a/tsconfig.base.json b/tsconfig.base.json index da982c302f2b43..f5ae71b58e20ac 100644 --- a/tsconfig.base.json +++ b/tsconfig.base.json @@ -101,7 +101,7 @@ "@nx/typedoc-theme": ["typedoc-theme/src/index.ts"], "@nx/vite": ["packages/vite"], "@nx/vite/*": ["packages/vite/*"], - "@nx/vue": ["packages/vue/index.ts"], + "@nx/vue": ["packages/vue"], "@nx/vue/*": ["packages/vue/*"], "@nx/web": ["packages/web"], "@nx/web/*": ["packages/web/*"],