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

…d be declared correctly so that it can be referenced.

e2e/react/src/react.test.ts

@@ -8,6 +8,7 @@ import {
   listFiles,
   newProject,
   readFile,
+  readJson,
   runCLI,
   runCLIAsync,
   runE2ETests,
@@ -20,15 +21,13 @@ import { join } from 'path';
 
 describe('React Applications', () => {
   let proj: string;
-
   describe('Crystal Supported Tests', () => {
     beforeAll(() => {
       proj = newProject({ packages: ['@nx/react'] });
       ensureCypressInstallation();
     });
 
     afterAll(() => cleanupProject());
-
     it('should be able to use Vite to build and test apps', async () => {
       const appName = uniq('app');
       const libName = uniq('lib');
@@ -68,13 +67,13 @@ describe('React Applications', () => {
       const libName = uniq('lib');
 
       runCLI(
-        `generate @nx/react:app apps/${appName} --name=${appName} --useTsSolution true --bundler=vite --no-interactive --skipFormat --linter=eslint --unitTestRunner=vitest`
+        `generate @nx/react:app apps/${appName} --name=${appName} --useTsSolution=true --bundler=vite --no-interactive --skipFormat --linter=eslint --unitTestRunner=vitest`
       );
       runCLI(
         `generate @nx/react:lib ${libName} --bundler=none --no-interactive --unit-test-runner=vitest --skipFormat --linter=eslint`
       );
 
-      const nxJson = JSON.parse(readFile('nx.json'));
+      const nxJson = readJson('nx.json');
 
       const jsTypescriptPlugin = nxJson.plugins.find(
         (plugin) => plugin.plugin === '@nx/js/typescript'

e2e/utils/create-project-utils.ts

@@ -258,6 +258,7 @@ export function runCreateWorkspace(
   const pm = getPackageManagerCommand({ packageManager });
 
   let command = `${pm.createWorkspace} ${name} --preset=${preset} --nxCloud=skip --no-interactive`;
+
   if (appName) {
     command += ` --appName=${appName}`;
   }

packages/expo/src/generators/application/application.ts

@@ -6,7 +6,10 @@ import {
   Tree,
 } from '@nx/devkit';
 import { initGenerator as jsInitGenerator } from '@nx/js';
-import { updateTsconfigFiles } from '@nx/js/src/utils/typescript/ts-solution-setup';
+import {
+  addProjectToTsSolutionWorkspace,
+  updateTsconfigFiles,
+} from '@nx/js/src/utils/typescript/ts-solution-setup';
 
 import { addLinting } from '../../utils/add-linting';
 import { addJest } from '../../utils/add-jest';
@@ -95,6 +98,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);
   }

packages/expo/src/generators/library/library.ts

@@ -36,7 +36,10 @@ import { ensureDependencies } from '../../utils/ensure-dependencies';
 import { initRootBabelConfig } from '../../utils/init-root-babel-config';
 import { addBuildTargetDefaults } from '@nx/devkit/src/generators/target-defaults-utils';
 import { logShowProjectCommand } from '@nx/devkit/src/utils/log-show-project-command';
-import { updateTsconfigFiles } from '@nx/js/src/utils/typescript/ts-solution-setup';
+import {
+  addProjectToTsSolutionWorkspace,
+  updateTsconfigFiles,
+} from '@nx/js/src/utils/typescript/ts-solution-setup';
 import { getImportPath } from '@nx/js/src/utils/get-import-path';
 
 export async function expoLibraryGenerator(
@@ -130,6 +133,10 @@ export async function expoLibraryGeneratorInternal(
       : undefined
   );
 
+  if (options.isUsingTsSolutionConfig) {
+    addProjectToTsSolutionWorkspace(host, `${options.projectRoot}/*`);
+  }
+
   if (!options.skipFormat) {
     await formatFiles(host);
   }

packages/js/src/utils/typescript/ts-solution-setup.ts

@@ -1,4 +1,5 @@
 import {
+  detectPackageManager,
   joinPathFragments,
   offsetFromRoot,
   output,
@@ -204,3 +205,39 @@ export function updateTsconfigFiles(
     });
   }
 }
+
+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, quotingType: '"', forceQuotes: true })
+        );
+      }
+    }
+  } 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));
+    }
+  }
+}

packages/next/src/generators/application/application.ts

@@ -30,7 +30,10 @@ import { updateCypressTsConfig } from './lib/update-cypress-tsconfig';
 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,
+  updateTsconfigFiles,
+} from '@nx/js/src/utils/typescript/ts-solution-setup';
 
 export async function applicationGenerator(host: Tree, schema: Schema) {
   return await applicationGeneratorInternal(host, {
@@ -132,6 +135,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);
   }

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),
   };
 }

packages/next/src/generators/library/library.ts

@@ -17,6 +17,7 @@ import { normalizeOptions } from './lib/normalize-options';
 import { eslintConfigNextVersion, tsLibVersion } from '../../utils/versions';
 import {
   isUsingTsSolutionSetup,
+  addProjectToTsSolutionWorkspace,
   updateTsconfigFiles,
 } from '@nx/js/src/utils/typescript/ts-solution-setup';
 
@@ -161,6 +162,10 @@ export async function libraryGeneratorInternal(host: Tree, rawOptions: Schema) {
       : undefined
   );
 
+  if (options.isUsingTsSolutionConfig) {
+    addProjectToTsSolutionWorkspace(host, `${options.projectRoot}/*`);
+  }
+
   if (!options.skipFormat) {
     await formatFiles(host);
   }

packages/react-native/src/generators/application/application.ts

@@ -25,7 +25,10 @@ import { Schema } from './schema';
 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,
+  updateTsconfigFiles,
+} from '@nx/js/src/utils/typescript/ts-solution-setup';
 
 export async function reactNativeApplicationGenerator(
   host: Tree,
@@ -143,6 +146,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);
   }

packages/react-native/src/generators/library/library.ts

@@ -34,7 +34,10 @@ import { NormalizedSchema, normalizeOptions } from './lib/normalize-options';
 import { Schema } from './schema';
 import { ensureDependencies } from '../../utils/ensure-dependencies';
 import { logShowProjectCommand } from '@nx/devkit/src/utils/log-show-project-command';
-import { updateTsconfigFiles } from '@nx/js/src/utils/typescript/ts-solution-setup';
+import {
+  addProjectToTsSolutionWorkspace,
+  updateTsconfigFiles,
+} from '@nx/js/src/utils/typescript/ts-solution-setup';
 import { getImportPath } from '@nx/js/src/utils/get-import-path';
 
 export async function reactNativeLibraryGenerator(
@@ -127,6 +130,10 @@ export async function reactNativeLibraryGeneratorInternal(
       : undefined
   );
 
+  if (options.isUsingTsSolutionConfig) {
+    addProjectToTsSolutionWorkspace(host, `${options.projectRoot}/*`);
+  }
+
   if (!options.skipFormat) {
     await formatFiles(host);
   }

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

@@ -15,6 +15,7 @@ import { createTreeWithEmptyWorkspace } from '@nx/devkit/testing';
 import { Linter } from '@nx/eslint';
 import { applicationGenerator } from './application';
 import { Schema } from './schema';
+const { load } = require('@zkochan/js-yaml');
 // need to mock cypress otherwise it'll use the nx installed version from package.json
 //  which is v9 while we are testing for the new v10 version
 jest.mock('@nx/cypress/src/utils/cypress-version');
@@ -1276,6 +1277,7 @@ describe('app', () => {
   describe('TS solution setup', () => {
     beforeEach(() => {
       appTree = createTreeWithEmptyWorkspace();
+      appTree.write('pnpm-workspace.yaml', `packages:`);
       updateJson(appTree, 'package.json', (json) => {
         json.workspaces = ['packages/*', 'apps/*'];
         return json;
@@ -1453,5 +1455,22 @@ describe('app', () => {
         }
       `);
     });
+
+    it('should add project to workspaces when using TS solution', async () => {
+      await applicationGenerator(appTree, {
+        directory: 'myapp',
+        addPlugin: true,
+        linter: Linter.EsLint,
+        style: 'none',
+        bundler: 'vite',
+        unitTestRunner: 'none',
+        e2eTestRunner: 'none',
+      });
+
+      const pnpmContent = appTree.read('pnpm-workspace.yaml', 'utf-8');
+      const pnpmWorkspaceFile = load(pnpmContent);
+
+      expect(pnpmWorkspaceFile.packages).toEqual(['myapp']);
+    });
   });
 });

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 {
+  addProjectToTsSolutionWorkspace,
+  isUsingTsSolutionSetup,
+  updateTsconfigFiles,
+} from '@nx/js/src/utils/typescript/ts-solution-setup';
 
 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: schema.useTsSolution ?? isUsingTsSolutionSetup(host),
     formatter: schema.formatter,
   });
   tasks.push(jsInitTask);
@@ -375,6 +380,12 @@ export async function applicationGeneratorInternal(
       : 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.isUsingTsSolutionConfig) {
+    addProjectToTsSolutionWorkspace(host, options.appProjectRoot);
+  }
+
   if (!options.skipFormat) {
     await formatFiles(host);
   }

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,

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

@@ -15,6 +15,7 @@ import { nxVersion } from '../../utils/versions';
 import applicationGenerator from '../application/application';
 import libraryGenerator from './library';
 import { Schema } from './schema';
+const { load } = require('@zkochan/js-yaml');
 // need to mock cypress otherwise it'll use the nx installed version from package.json
 //  which is v9 while we are testing for the new v10 version
 jest.mock('@nx/cypress/src/utils/cypress-version');
@@ -930,6 +931,7 @@ module.exports = withNx(
   describe('TS solution setup', () => {
     beforeEach(() => {
       tree = createTreeWithEmptyWorkspace();
+      tree.write('pnpm-workspace.yaml', `packages:`);
       updateJson(tree, 'package.json', (json) => {
         json.workspaces = ['packages/*', 'apps/*'];
         return json;
@@ -1215,11 +1217,10 @@ module.exports = withNx(
       await libraryGenerator(tree, {
         ...defaultSchema,
         bundler: 'rollup',
-        publishable: true,
-        importPath: '@acme/mylib',
-        unitTestRunner: 'none',
         directory: 'mylib',
         name: 'mylib',
+        publishable: true,
+        importPath: '@acme/mylib',
       });
 
       expect(readJson(tree, 'mylib/package.json')).toMatchInlineSnapshot(`
@@ -1249,5 +1250,19 @@ module.exports = withNx(
         }
       `);
     });
+
+    it('should add project to workspaces when using TS solution', async () => {
+      await libraryGenerator(tree, {
+        ...defaultSchema,
+        bundler: 'rollup',
+        unitTestRunner: 'none',
+        directory: 'mylib',
+        name: 'mylib',
+      });
+      const pnpmContent = tree.read('pnpm-workspace.yaml', 'utf-8');
+      const pnpmWorkspaceFile = load(pnpmContent);
+
+      expect(pnpmWorkspaceFile.packages).toEqual(['mylib/*']);
+    });
   });
 });