feat(vue): init, app, component and lib generators

Co-Authored-By: Jack Hsu <[email protected]>

.gitignore

@@ -11,6 +11,7 @@ tmp
 *.log
 jest.debug.config.js
 .tool-versions
+/.nx
 /.nx-cache
 /.verdaccio/build/local-registry
 /graph/client/src/assets/environment.js
@@ -19,7 +20,6 @@ jest.debug.config.js
 /graph/client/src/assets/generated-task-graphs
 /nx-dev/nx-dev/public/documentation
 /nx-dev/nx-dev/public/images/open-graph
-
 # Issues scraper creates these files, stored by github's cache
 /scripts/issues-scraper/cached
 

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",

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",

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
+```

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}`
+        );
+      });
+    });
+  });
+});

packages/linter/index.ts

@@ -3,6 +3,7 @@ export { lintInitGenerator } from './src/generators/init/init';
 export { Linter } from './src/generators/utils/linter';
 /** @deprecated This will be removed in v17 */
 export * from './src/utils/convert-tslint-to-eslint';
+export * from './src/utils/versions';
 
 // @nx/angular needs it for the Angular CLI workspace migration to Nx to
 // infer whether a config is using type aware rules and set the

packages/react/src/generators/application/application.spec.ts

@@ -63,6 +63,7 @@ describe('app', () => {
         'vitest/importMeta',
         'vite/client',
         'node',
+        'vitest',
       ]);
     });
 

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 (

packages/react/src/generators/application/lib/find-free-port.spec.ts

@@ -5,7 +5,7 @@ import { findFreePort } from './find-free-port';
 
 describe('findFreePort', () => {
   it('should return the largest port + 1', () => {
-    const tree = createTreeWithEmptyWorkspace({ layout: 'apps-libs' });
+    const tree = createTreeWithEmptyWorkspace();
     addProject(tree, 'app1', 4200);
     addProject(tree, 'app2', 4201);
     addProject(tree, 'no-serve');
@@ -16,7 +16,7 @@ describe('findFreePort', () => {
   });
 
   it('should default to port 4200', () => {
-    const tree = createTreeWithEmptyWorkspace({ layout: 'apps-libs' });
+    const tree = createTreeWithEmptyWorkspace();
     addProject(tree, 'no-serve');
 
     const port = findFreePort(tree);

packages/react/src/generators/application/lib/find-free-port.ts

@@ -1,8 +1,7 @@
-import { Tree } from 'nx/src/generators/tree';
-import { getProjects } from '@nx/devkit';
+import { getProjects, Tree } from '@nx/devkit';
 
-export function findFreePort(host: Tree) {
-  const projects = getProjects(host);
+export function findFreePort(tree: Tree) {
+  const projects = getProjects(tree);
   let port = -Infinity;
   for (const [, p] of projects.entries()) {
     const curr = p.targets?.serve?.options?.port;

packages/react/src/generators/library/library.spec.ts

@@ -80,6 +80,7 @@ describe('lib', () => {
       'vitest/importMeta',
       'vite/client',
       'node',
+      'vitest',
     ]);
   });
 

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<typeof import('@nx/vite')>('@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<typeof import('@nx/vite')>(
-      '@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) {