feat(vite): add nodes - fixing vite build issues

nrwl · Nov 7, 2023 · b8f5f81 · b8f5f81
1 parent 666782d
commit b8f5f81
Show file tree

Hide file tree

Showing 11 changed files with 180 additions and 145 deletions.
diff --git a/docs/generated/packages/vite/generators/vitest.json b/docs/generated/packages/vite/generators/vitest.json
@@ -32,7 +32,7 @@
       },
       "coverageProvider": {
         "type": "string",
-        "enum": ["v8", "c8", "istanbul"],
+        "enum": ["v8", "c8", "custom"],
         "default": "v8",
         "description": "Coverage provider to use."
       },

diff --git a/packages/vite/src/executors/test/vitest.impl.ts b/packages/vite/src/executors/test/vitest.impl.ts
@@ -108,13 +108,18 @@ async function getSettings(
   const packageJson = existsSync(packageJsonPath)
     ? readJsonFile(packageJsonPath)
     : undefined;
-  let provider: 'v8' | 'c8' = 'v8';
+
+  let provider: 'c8' | 'istanbul' | 'custom';
+
   if (
-    packageJson?.dependencies?.['@vitest/coverage-c8'] ||
-    packageJson?.devDependencies?.['@vitest/coverage-c8']
+    packageJson?.dependencies?.['@vitest/coverage-istanbul'] ||
+    packageJson?.devDependencies?.['@vitest/coverage-istanbul']
   ) {
+    provider = 'istanbul';
+  } else {
     provider = 'c8';
   }
+
   const offset = relative(workspaceRoot, context.cwd);
   // if reportsDirectory is not provided vitest will remove all files in the project root
   // when coverage is enabled in the vite.config.ts

diff --git a/packages/vite/src/generators/configuration/configuration.ts b/packages/vite/src/generators/configuration/configuration.ts
@@ -2,6 +2,7 @@ import {
   formatFiles,
   GeneratorCallback,
   joinPathFragments,
+  readNxJson,
   readProjectConfiguration,
   runTasksInSerial,
   Tree,
@@ -163,19 +164,27 @@ export async function viteConfigurationGenerator(
   });
   tasks.push(initTask);
 
-  if (!projectAlreadyHasViteTargets.build) {
-    addOrChangeBuildTarget(tree, schema, buildTargetName);
-  }
+  const nxJson = readNxJson(tree);
+  const hasPlugin = nxJson.plugins?.some((p) =>
+    typeof p === 'string'
+      ? p === '@nx/vite/plugin'
+      : p.plugin === '@nx/vite/plugin'
+  );
 
-  if (!schema.includeLib) {
-    if (!projectAlreadyHasViteTargets.serve) {
-      addOrChangeServeTarget(tree, schema, serveTargetName);
+  if (!hasPlugin) {
+    if (!projectAlreadyHasViteTargets.build) {
+      addOrChangeBuildTarget(tree, schema, buildTargetName);
     }
-    if (!projectAlreadyHasViteTargets.preview) {
-      addPreviewTarget(tree, schema, serveTargetName);
+
+    if (!schema.includeLib) {
+      if (!projectAlreadyHasViteTargets.serve) {
+        addOrChangeServeTarget(tree, schema, serveTargetName);
+      }
+      if (!projectAlreadyHasViteTargets.preview) {
+        addPreviewTarget(tree, schema, serveTargetName);
+      }
     }
   }
-
   if (projectType === 'library') {
     // update tsconfig.lib.json to include vite/client
     updateJson(tree, joinPathFragments(root, 'tsconfig.lib.json'), (json) => {

diff --git a/packages/vite/src/generators/init/init.ts b/packages/vite/src/generators/init/init.ts
@@ -1,107 +1,13 @@
-import {
-  addDependenciesToPackageJson,
-  logger,
-  readJson,
-  readNxJson,
-  runTasksInSerial,
-  Tree,
-  updateJson,
-  updateNxJson,
-} from '@nx/devkit';
+import { Tree, runTasksInSerial } from '@nx/devkit';
 
 import { initGenerator as jsInitGenerator } from '@nx/js';
 
-import {
-  edgeRuntimeVmVersion,
-  happyDomVersion,
-  jsdomVersion,
-  nxVersion,
-  vitePluginDtsVersion,
-  vitePluginReactSwcVersion,
-  vitePluginReactVersion,
-  vitestUiVersion,
-  vitestVersion,
-  viteVersion,
-} from '../../utils/versions';
 import { InitGeneratorSchema } from './schema';
-
-function checkDependenciesInstalled(host: Tree, schema: InitGeneratorSchema) {
-  const packageJson = readJson(host, 'package.json');
-  const devDependencies = {};
-  const dependencies = {};
-  packageJson.dependencies = packageJson.dependencies || {};
-  packageJson.devDependencies = packageJson.devDependencies || {};
-
-  // base deps
-  devDependencies['@nx/vite'] = nxVersion;
-  devDependencies['vite'] = viteVersion;
-  devDependencies['vitest'] = vitestVersion;
-  devDependencies['@vitest/ui'] = vitestUiVersion;
-
-  if (schema.testEnvironment === 'jsdom') {
-    devDependencies['jsdom'] = jsdomVersion;
-  } else if (schema.testEnvironment === 'happy-dom') {
-    devDependencies['happy-dom'] = happyDomVersion;
-  } else if (schema.testEnvironment === 'edge-runtime') {
-    devDependencies['@edge-runtime/vm'] = edgeRuntimeVmVersion;
-  } else if (schema.testEnvironment !== 'node' && schema.testEnvironment) {
-    logger.info(
-      `A custom environment was provided: ${schema.testEnvironment}. You need to install it manually.`
-    );
-  }
-
-  if (schema.uiFramework === 'react') {
-    if (schema.compiler === 'swc') {
-      devDependencies['@vitejs/plugin-react-swc'] = vitePluginReactSwcVersion;
-    } else {
-      devDependencies['@vitejs/plugin-react'] = vitePluginReactVersion;
-    }
-  }
-
-  if (schema.includeLib) {
-    devDependencies['vite-plugin-dts'] = vitePluginDtsVersion;
-  }
-
-  return addDependenciesToPackageJson(host, dependencies, devDependencies);
-}
-
-function moveToDevDependencies(tree: Tree) {
-  updateJson(tree, 'package.json', (packageJson) => {
-    packageJson.dependencies = packageJson.dependencies || {};
-    packageJson.devDependencies = packageJson.devDependencies || {};
-
-    if (packageJson.dependencies['@nx/vite']) {
-      packageJson.devDependencies['@nx/vite'] =
-        packageJson.dependencies['@nx/vite'];
-      delete packageJson.dependencies['@nx/vite'];
-    }
-    return packageJson;
-  });
-}
-
-export function createVitestConfig(tree: Tree) {
-  const nxJson = readNxJson(tree);
-
-  const productionFileSet = nxJson.namedInputs?.production;
-  if (productionFileSet) {
-    productionFileSet.push(
-      '!{projectRoot}/**/?(*.)+(spec|test).[jt]s?(x)?(.snap)',
-      '!{projectRoot}/tsconfig.spec.json'
-    );
-
-    nxJson.namedInputs.production = Array.from(new Set(productionFileSet));
-  }
-
-  nxJson.targetDefaults ??= {};
-  nxJson.targetDefaults['@nx/vite:test'] ??= {};
-  nxJson.targetDefaults['@nx/vite:test'].cache ??= true;
-  nxJson.targetDefaults['@nx/vite:test'].inputs ??= [
-    'default',
-    productionFileSet ? '^production' : '^default',
-  ];
-
-  updateNxJson(tree, nxJson);
-}
+import {
+  checkDependenciesInstalled,
+  createVitestConfig,
+  moveToDevDependencies,
+} from './lib/utils';
 
 export async function initGenerator(tree: Tree, schema: InitGeneratorSchema) {
   moveToDevDependencies(tree);

diff --git a/packages/vite/src/generators/init/lib/utils.ts b/packages/vite/src/generators/init/lib/utils.ts
@@ -0,0 +1,108 @@
+import {
+  addDependenciesToPackageJson,
+  logger,
+  readJson,
+  readNxJson,
+  Tree,
+  updateJson,
+  updateNxJson,
+} from '@nx/devkit';
+
+import {
+  edgeRuntimeVmVersion,
+  happyDomVersion,
+  jsdomVersion,
+  nxVersion,
+  vitePluginDtsVersion,
+  vitePluginReactSwcVersion,
+  vitePluginReactVersion,
+  vitestUiVersion,
+  vitestVersion,
+  viteVersion,
+} from '../../../utils/versions';
+import { InitGeneratorSchema } from '../schema';
+
+export function checkDependenciesInstalled(
+  host: Tree,
+  schema: InitGeneratorSchema
+) {
+  const packageJson = readJson(host, 'package.json');
+  const devDependencies = {};
+  const dependencies = {};
+  packageJson.dependencies = packageJson.dependencies || {};
+  packageJson.devDependencies = packageJson.devDependencies || {};
+
+  // base deps
+  devDependencies['@nx/vite'] = nxVersion;
+  devDependencies['vite'] = viteVersion;
+  devDependencies['vitest'] = vitestVersion;
+  devDependencies['@vitest/ui'] = vitestUiVersion;
+
+  if (process.env['NX_PCV3'] === 'true') {
+    devDependencies['@nx/vite/plugin'] = nxVersion;
+  }
+
+  if (schema.testEnvironment === 'jsdom') {
+    devDependencies['jsdom'] = jsdomVersion;
+  } else if (schema.testEnvironment === 'happy-dom') {
+    devDependencies['happy-dom'] = happyDomVersion;
+  } else if (schema.testEnvironment === 'edge-runtime') {
+    devDependencies['@edge-runtime/vm'] = edgeRuntimeVmVersion;
+  } else if (schema.testEnvironment !== 'node' && schema.testEnvironment) {
+    logger.info(
+      `A custom environment was provided: ${schema.testEnvironment}. You need to install it manually.`
+    );
+  }
+
+  if (schema.uiFramework === 'react') {
+    if (schema.compiler === 'swc') {
+      devDependencies['@vitejs/plugin-react-swc'] = vitePluginReactSwcVersion;
+    } else {
+      devDependencies['@vitejs/plugin-react'] = vitePluginReactVersion;
+    }
+  }
+
+  if (schema.includeLib) {
+    devDependencies['vite-plugin-dts'] = vitePluginDtsVersion;
+  }
+
+  return addDependenciesToPackageJson(host, dependencies, devDependencies);
+}
+
+export function moveToDevDependencies(tree: Tree) {
+  updateJson(tree, 'package.json', (packageJson) => {
+    packageJson.dependencies = packageJson.dependencies || {};
+    packageJson.devDependencies = packageJson.devDependencies || {};
+
+    if (packageJson.dependencies['@nx/vite']) {
+      packageJson.devDependencies['@nx/vite'] =
+        packageJson.dependencies['@nx/vite'];
+      delete packageJson.dependencies['@nx/vite'];
+    }
+    return packageJson;
+  });
+}
+
+export function createVitestConfig(tree: Tree) {
+  const nxJson = readNxJson(tree);
+
+  const productionFileSet = nxJson.namedInputs?.production;
+  if (productionFileSet) {
+    productionFileSet.push(
+      '!{projectRoot}/**/?(*.)+(spec|test).[jt]s?(x)?(.snap)',
+      '!{projectRoot}/tsconfig.spec.json'
+    );
+
+    nxJson.namedInputs.production = Array.from(new Set(productionFileSet));
+  }
+
+  nxJson.targetDefaults ??= {};
+  nxJson.targetDefaults['@nx/vite:test'] ??= {};
+  nxJson.targetDefaults['@nx/vite:test'].cache ??= true;
+  nxJson.targetDefaults['@nx/vite:test'].inputs ??= [
+    'default',
+    productionFileSet ? '^production' : '^default',
+  ];
+
+  updateNxJson(tree, nxJson);
+}
diff --git a/packages/vite/src/generators/vitest/schema.d.ts b/packages/vite/src/generators/vitest/schema.d.ts
@@ -1,7 +1,7 @@
 export interface VitestGeneratorSchema {
   project: string;
   uiFramework: 'react' | 'none';
-  coverageProvider: 'v8' | 'c8' | 'istanbul';
+  coverageProvider: 'c8' | 'istanbul' | 'custom';
   inSourceTests?: boolean;
   skipViteConfig?: boolean;
   testTarget?: string;

diff --git a/packages/vite/src/generators/vitest/schema.json b/packages/vite/src/generators/vitest/schema.json
@@ -31,7 +31,7 @@
     },
     "coverageProvider": {
       "type": "string",
-      "enum": ["v8", "c8", "istanbul"],
+      "enum": ["v8", "c8", "custom"],
       "default": "v8",
       "description": "Coverage provider to use."
     },

diff --git a/packages/vite/src/generators/vitest/vitest-generator.ts b/packages/vite/src/generators/vitest/vitest-generator.ts
@@ -5,6 +5,7 @@ import {
   GeneratorCallback,
   joinPathFragments,
   offsetFromRoot,
+  readNxJson,
   readProjectConfiguration,
   runTasksInSerial,
   Tree,
@@ -21,7 +22,6 @@ import initGenerator from '../init/init';
 import {
   vitestCoverageC8Version,
   vitestCoverageIstanbulVersion,
-  vitestCoverageV8Version,
 } from '../../utils/versions';
 
 import { addTsLibDependencies } from '@nx/js';
@@ -37,13 +37,20 @@ export async function vitestGenerator(
     tree,
     schema.project
   );
-  let testTarget =
-    schema.testTarget ??
-    findExistingTargetsInProject(targets).validFoundTargetName.test ??
-    'test';
-
-  addOrChangeTestTarget(tree, schema, testTarget);
 
+  const nxJson = readNxJson(tree);
+  const hasPlugin = nxJson.plugins?.some((p) =>
+    typeof p === 'string'
+      ? p === '@nx/vite/plugin'
+      : p.plugin === '@nx/vite/plugin'
+  );
+  if (!hasPlugin) {
+    const testTarget =
+      schema.testTarget ??
+      findExistingTargetsInProject(targets).validFoundTargetName.test ??
+      'test';
+    addOrChangeTestTarget(tree, schema, testTarget);
+  }
   const initTask = await initGenerator(tree, {
     uiFramework: schema.uiFramework,
     testEnvironment: schema.testEnvironment,
@@ -212,7 +219,7 @@ function getCoverageProviderDependency(
       };
     default:
       return {
-        '@vitest/coverage-v8': vitestCoverageV8Version,
+        '@vitest/coverage-c8': vitestCoverageC8Version,
       };
   }
 }