fix(core): React workspaces that use pnpm & the new TS solution shoul…

…d be declared correctly so that it can be referenced.
nrwl · Dec 5, 2024 · 47956db · 47956db
1 parent e9a07da
commit 47956db
Show file tree

Hide file tree

Showing 17 changed files with 481 additions and 278 deletions.
diff --git a/e2e/react/src/react.test.ts b/e2e/react/src/react.test.ts
diff --git a/e2e/utils/create-project-utils.ts b/e2e/utils/create-project-utils.ts
@@ -76,10 +76,12 @@ export function newProject({
   name = uniq('proj'),
   packageManager = getSelectedPackageManager(),
   packages,
+  workspaces = false,
 }: {
   name?: string;
   packageManager?: 'npm' | 'yarn' | 'pnpm' | 'bun';
   readonly packages?: Array<NxPackage>;
+  workspaces?: boolean;
 } = {}): string {
   const newProjectStart = performance.mark('new-project:start');
   try {
@@ -95,6 +97,7 @@ export function newProject({
       runCreateWorkspace(projScope, {
         preset: 'apps',
         packageManager,
+        workspaces,
       });
       const createNxWorkspaceEnd = performance.mark('create-nx-workspace:end');
       createNxWorkspaceMeasure = performance.measure(
@@ -228,6 +231,7 @@ export function runCreateWorkspace(
     ssr,
     framework,
     prefix,
+    workspaces,
   }: {
     preset: string;
     appName?: string;
@@ -249,13 +253,17 @@ export function runCreateWorkspace(
     ssr?: boolean;
     framework?: string;
     prefix?: string;
+    workspaces?: boolean;
   }
 ) {
   projName = name;
 
   const pm = getPackageManagerCommand({ packageManager });
 
+  preset = workspaces ? 'ts' : preset;
+
   let command = `${pm.createWorkspace} ${name} --preset=${preset} --nxCloud=skip --no-interactive`;
+
   if (appName) {
     command += ` --appName=${appName}`;
   }
@@ -327,6 +335,10 @@ export function runCreateWorkspace(
     command += ` --prefix=${prefix}`;
   }
 
+  if (workspaces) {
+    command += ` --workspaces`;
+  }
+
   try {
     const create = execSync(`${command}${isVerbose() ? ' --verbose' : ''}`, {
       cwd,

diff --git a/packages/expo/src/generators/application/application.ts b/packages/expo/src/generators/application/application.ts
@@ -1,4 +1,5 @@
 import {
+  detectPackageManager,
   formatFiles,
   GeneratorCallback,
   joinPathFragments,
@@ -21,6 +22,7 @@ import { Schema } from './schema';
 import { ensureDependencies } from '../../utils/ensure-dependencies';
 import { initRootBabelConfig } from '../../utils/init-root-babel-config';
 import { logShowProjectCommand } from '@nx/devkit/src/utils/log-show-project-command';
+import { addProjectToTsSolutionWorkspace } from '@nx/react/src/utils/add-app-to-pnpm-workspace';
 
 export async function expoApplicationGenerator(
   host: Tree,
@@ -95,6 +97,12 @@ export async function expoApplicationGeneratorInternal(
       : undefined
   );
 
+  // If we are using the new TS solution
+  // We need to update the workspace file (package.json or pnpm-workspaces.yaml) to include the new project
+  if (options.useTsSolution) {
+    addProjectToTsSolutionWorkspace(host, options.appProjectRoot);
+  }
+
   if (!options.skipFormat) {
     await formatFiles(host);
   }

diff --git a/packages/expo/src/generators/library/library.ts b/packages/expo/src/generators/library/library.ts
@@ -38,6 +38,7 @@ import { addBuildTargetDefaults } from '@nx/devkit/src/generators/target-default
 import { logShowProjectCommand } from '@nx/devkit/src/utils/log-show-project-command';
 import { updateTsconfigFiles } from '@nx/js/src/utils/typescript/ts-solution-setup';
 import { getImportPath } from '@nx/js/src/utils/get-import-path';
+import { addProjectToTsSolutionWorkspace } from '@nx/react/src/utils/add-app-to-pnpm-workspace';
 
 export async function expoLibraryGenerator(
   host: Tree,
@@ -130,6 +131,10 @@ export async function expoLibraryGeneratorInternal(
       : undefined
   );
 
+  if (options.isUsingTsSolutionConfig) {
+    addProjectToTsSolutionWorkspace(host, `${options.projectRoot}/*`);
+  }
+
   if (!options.skipFormat) {
     await formatFiles(host);
   }

diff --git a/packages/next/src/generators/application/application.ts b/packages/next/src/generators/application/application.ts
@@ -1,5 +1,6 @@
 import {
   addDependenciesToPackageJson,
+  detectPackageManager,
   formatFiles,
   GeneratorCallback,
   joinPathFragments,
@@ -31,6 +32,7 @@ import { showPossibleWarnings } from './lib/show-possible-warnings';
 import { tsLibVersion } from '../../utils/versions';
 import { logShowProjectCommand } from '@nx/devkit/src/utils/log-show-project-command';
 import { updateTsconfigFiles } from '@nx/js/src/utils/typescript/ts-solution-setup';
+import { addProjectToTsSolutionWorkspace } from '@nx/react/src/utils/add-app-to-pnpm-workspace';
 
 export async function applicationGenerator(host: Tree, schema: Schema) {
   return await applicationGeneratorInternal(host, {
@@ -132,6 +134,12 @@ export async function applicationGeneratorInternal(host: Tree, schema: Schema) {
     options.src ? 'src' : '.'
   );
 
+  // If we are using the new TS solution
+  // We need to update the workspace file (package.json or pnpm-workspaces.yaml) to include the new project
+  if (options.useTsSolution) {
+    addProjectToTsSolutionWorkspace(host, options.appProjectRoot);
+  }
+
   if (!options.skipFormat) {
     await formatFiles(host);
   }

diff --git a/packages/next/src/generators/library/lib/normalize-options.ts b/packages/next/src/generators/library/lib/normalize-options.ts
@@ -4,10 +4,12 @@ import {
   ensureProjectName,
 } from '@nx/devkit/src/generators/project-name-and-root-utils';
 import { Schema } from '../schema';
+import { isUsingTsSolutionSetup } from '@nx/js/src/utils/typescript/ts-solution-setup';
 
 export interface NormalizedSchema extends Schema {
   importPath: string;
   projectRoot: string;
+  isUsingTsSolutionConfig: boolean;
 }
 
 export async function normalizeOptions(
@@ -35,5 +37,6 @@ export async function normalizeOptions(
     ...options,
     importPath,
     projectRoot,
+    isUsingTsSolutionConfig: isUsingTsSolutionSetup(host),
   };
 }
diff --git a/packages/next/src/generators/library/library.ts b/packages/next/src/generators/library/library.ts
@@ -16,6 +16,7 @@ import { Schema } from './schema';
 import { normalizeOptions } from './lib/normalize-options';
 import { eslintConfigNextVersion, tsLibVersion } from '../../utils/versions';
 import { updateTsconfigFiles } from '@nx/js/src/utils/typescript/ts-solution-setup';
+import { addProjectToTsSolutionWorkspace } from '@nx/react/src/utils/add-app-to-pnpm-workspace';
 
 export async function libraryGenerator(host: Tree, rawOptions: Schema) {
   return await libraryGeneratorInternal(host, {
@@ -154,6 +155,10 @@ export async function libraryGeneratorInternal(host: Tree, rawOptions: Schema) {
       : undefined
   );
 
+  if (options.isUsingTsSolutionConfig) {
+    addProjectToTsSolutionWorkspace(host, `${options.projectRoot}/*`);
+  }
+
   if (!options.skipFormat) {
     await formatFiles(host);
   }

diff --git a/packages/react-native/src/generators/application/application.ts b/packages/react-native/src/generators/application/application.ts
@@ -1,4 +1,5 @@
 import {
+  detectPackageManager,
   formatFiles,
   GeneratorCallback,
   joinPathFragments,
@@ -26,6 +27,7 @@ import { ensureDependencies } from '../../utils/ensure-dependencies';
 import { syncDeps } from '../../executors/sync-deps/sync-deps.impl';
 import { PackageJson } from 'nx/src/utils/package-json';
 import { updateTsconfigFiles } from '@nx/js/src/utils/typescript/ts-solution-setup';
+import { addProjectToTsSolutionWorkspace } from '@nx/react/src/utils/add-app-to-pnpm-workspace';
 
 export async function reactNativeApplicationGenerator(
   host: Tree,
@@ -143,6 +145,12 @@ export async function reactNativeApplicationGeneratorInternal(
       : undefined
   );
 
+  // If we are using the new TS solution
+  // We need to update the workspace file (package.json or pnpm-workspaces.yaml) to include the new project
+  if (options.useTsSolution) {
+    addProjectToTsSolutionWorkspace(host, options.appProjectRoot);
+  }
+
   if (!options.skipFormat) {
     await formatFiles(host);
   }

diff --git a/packages/react-native/src/generators/library/library.ts b/packages/react-native/src/generators/library/library.ts
@@ -39,6 +39,7 @@ import {
   updateTsconfigFiles,
 } from '@nx/js/src/utils/typescript/ts-solution-setup';
 import { getImportPath } from '@nx/js/src/utils/get-import-path';
+import { addProjectToTsSolutionWorkspace } from '@nx/react/src/utils/add-app-to-pnpm-workspace';
 
 export async function reactNativeLibraryGenerator(
   host: Tree,
@@ -130,6 +131,10 @@ export async function reactNativeLibraryGeneratorInternal(
       : undefined
   );
 
+  if (options.isUsingTsSolutionConfig) {
+    addProjectToTsSolutionWorkspace(host, `${options.projectRoot}/*`);
+  }
+
   if (!options.skipFormat) {
     await formatFiles(host);
   }

diff --git a/packages/react/package.json b/packages/react/package.json
@@ -44,7 +44,8 @@
     "@nx/web": "file:../web",
     "@nx/module-federation": "file:../module-federation",
     "express": "^4.19.2",
-    "http-proxy-middleware": "^3.0.3"
+    "http-proxy-middleware": "^3.0.3",
+    "@zkochan/js-yaml": "0.0.7"
   },
   "publishConfig": {
     "access": "public"

diff --git a/packages/react/src/generators/application/application.ts b/packages/react/src/generators/application/application.ts
@@ -10,6 +10,7 @@ import { setDefaults } from './lib/set-defaults';
 import { addStyledModuleDependencies } from '../../rules/add-styled-dependencies';
 import {
   addDependenciesToPackageJson,
+  detectPackageManager,
   ensurePackage,
   formatFiles,
   GeneratorCallback,
@@ -41,7 +42,11 @@ import { initGenerator as jsInitGenerator } from '@nx/js';
 import { logShowProjectCommand } from '@nx/devkit/src/utils/log-show-project-command';
 import { setupTailwindGenerator } from '../setup-tailwind/setup-tailwind';
 import { useFlatConfig } from '@nx/eslint/src/utils/flat-config';
-import { updateTsconfigFiles } from '@nx/js/src/utils/typescript/ts-solution-setup';
+import {
+  isUsingTsSolutionSetup,
+  updateTsconfigFiles,
+} from '@nx/js/src/utils/typescript/ts-solution-setup';
+import { addProjectToTsSolutionWorkspace } from '../../utils/add-app-to-pnpm-workspace';
 
 async function addLinting(host: Tree, options: NormalizedSchema) {
   const tasks: GeneratorCallback[] = [];
@@ -115,7 +120,7 @@ export async function applicationGeneratorInternal(
     ...schema,
     tsConfigName: schema.rootProject ? 'tsconfig.json' : 'tsconfig.base.json',
     skipFormat: true,
-    addTsPlugin: schema.useTsSolution,
+    addTsPlugin: isUsingTsSolutionSetup(host),
     formatter: schema.formatter,
   });
   tasks.push(jsInitTask);
@@ -367,6 +372,12 @@ export async function applicationGeneratorInternal(
     moduleResolution: 'bundler',
   });
 
+  // If we are using the new TS solution
+  // We need to update the workspace file (package.json or pnpm-workspaces.yaml) to include the new project
+  if (options.useTsSolution) {
+    addProjectToTsSolutionWorkspace(host, options.appProjectRoot);
+  }
+
   if (!options.skipFormat) {
     await formatFiles(host);
   }

diff --git a/packages/react/src/generators/library/lib/normalize-options.ts b/packages/react/src/generators/library/lib/normalize-options.ts
@@ -13,7 +13,6 @@ import {
 import { assertValidStyle } from '../../../utils/assertion';
 import { NormalizedSchema, Schema } from '../schema';
 import { isUsingTsSolutionSetup } from '@nx/js/src/utils/typescript/ts-solution-setup';
-import { promptWhenInteractive } from '@nx/devkit/src/generators/prompt';
 
 export async function normalizeOptions(
   host: Tree,

diff --git a/packages/react/src/generators/library/library.ts b/packages/react/src/generators/library/library.ts
@@ -33,6 +33,7 @@ import { installCommonDependencies } from './lib/install-common-dependencies';
 import { setDefaults } from './lib/set-defaults';
 import { updateTsconfigFiles } from '@nx/js/src/utils/typescript/ts-solution-setup';
 import { ensureProjectIsExcludedFromPluginRegistrations } from '@nx/js/src/utils/typescript/plugin';
+import { addProjectToTsSolutionWorkspace } from '../../utils/add-app-to-pnpm-workspace';
 
 export async function libraryGenerator(host: Tree, schema: Schema) {
   return await libraryGeneratorInternal(host, {
@@ -278,6 +279,9 @@ export async function libraryGeneratorInternal(host: Tree, schema: Schema) {
       : undefined
   );
 
+  if (options.isUsingTsSolutionConfig) {
+    addProjectToTsSolutionWorkspace(host, `${options.projectRoot}/*`);
+  }
   if (!options.skipFormat) {
     await formatFiles(host);
   }

diff --git a/packages/react/src/utils/add-app-to-pnpm-workspace.ts b/packages/react/src/utils/add-app-to-pnpm-workspace.ts
@@ -0,0 +1,33 @@
+import { detectPackageManager, readJson, Tree } from '@nx/devkit';
+
+export function addProjectToTsSolutionWorkspace(
+  tree: Tree,
+  projectDir: string
+) {
+  if (detectPackageManager() === 'pnpm') {
+    const { load, dump } = require('@zkochan/js-yaml');
+    if (tree.exists('pnpm-workspace.yaml')) {
+      const workspaceFile = tree.read('pnpm-workspace.yaml', 'utf-8');
+      const yamlData = load(workspaceFile);
+
+      if (!yamlData.packages) {
+        yamlData.packages = [];
+      }
+
+      if (!yamlData.packages.includes(projectDir)) {
+        yamlData.packages.push(projectDir);
+        tree.write('pnpm-workspace.yaml', dump(yamlData, { indent: 2 }));
+      }
+    }
+  } else {
+    // Update package.json
+    const packageJson = readJson(tree, 'package.json');
+    if (!packageJson.workspaces) {
+      packageJson.workspaces = [];
+    }
+    if (!packageJson.workspaces.includes(projectDir)) {
+      packageJson.workspaces.push(projectDir);
+      tree.write('package.json', JSON.stringify(packageJson, null, 2));
+    }
+  }
+}
diff --git a/packages/remix/src/generators/application/application.impl.ts b/packages/remix/src/generators/application/application.impl.ts
@@ -1,5 +1,6 @@
 import {
   addProjectConfiguration,
+  detectPackageManager,
   ensurePackage,
   formatFiles,
   generateFiles,
@@ -48,6 +49,7 @@ import {
   isUsingTsSolutionSetup,
   updateTsconfigFiles,
 } from '@nx/js/src/utils/typescript/ts-solution-setup';
+import { addProjectToTsSolutionWorkspace } from '@nx/react/src/utils/add-app-to-pnpm-workspace';
 
 export function remixApplicationGenerator(
   tree: Tree,
@@ -374,6 +376,12 @@ export default {...nxPreset};
     '.'
   );
 
+  // If we are using the new TS solution
+  // We need to update the workspace file (package.json or pnpm-workspaces.yaml) to include the new project
+  if (options.useTsSolution) {
+    addProjectToTsSolutionWorkspace(tree, options.projectRoot);
+  }
+
   tasks.push(() => {
     logShowProjectCommand(options.projectName);
   });

diff --git a/packages/workspace/src/generators/new/generate-workspace-files.spec.ts b/packages/workspace/src/generators/new/generate-workspace-files.spec.ts
@@ -332,8 +332,8 @@ describe('@nx/workspace:generateWorkspaceFiles', () => {
     const packageJson = tree.read('/proj/pnpm-workspace.yaml', 'utf-8');
     expect(packageJson).toMatchInlineSnapshot(`
       "packages: 
-        - apps/**
-        - packages/**
+        - "apps/**"
+        - "packages/**"
       "
     `);
   });

diff --git a/packages/workspace/src/generators/new/generate-workspace-files.ts b/packages/workspace/src/generators/new/generate-workspace-files.ts
@@ -429,7 +429,7 @@ function setUpWorkspacesInPackageJson(tree: Tree, options: NormalizedSchema) {
       tree.write(
         join(options.directory, 'pnpm-workspace.yaml'),
         `packages: 
-  - ${workspaces.join('\n  - ')}
+  ${workspaces.map((workspace) => `- "${workspace}"`).join('\n  ')}
 `
       );
     } else {