@aws/nx-plugin 1.0.0-rc.9 → 1.0.0-rc.90

package/src/ts/react-website/app/generator.js

@@ -1,51 +1,143 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.REACT_WEBSITE_APP_GENERATOR_INFO = exports.SUPPORTED_UX_PROVIDERS = void 0;
-exports.tsReactWebsiteGenerator = tsReactWebsiteGenerator;
 /**
  * Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
  * SPDX-License-Identifier: Apache-2.0
- */
-const devkit_1 = require("@nx/devkit");
-const react_1 = require("@nx/react");
-const path_1 = require("path");
-const ast_1 = require("../../../utils/ast");
-const format_1 = require("../../../utils/format");
-const iac_1 = require("../../../utils/iac");
-const metrics_1 = require("../../../utils/metrics");
-const names_1 = require("../../../utils/names");
-const npm_scope_1 = require("../../../utils/npm-scope");
-const nx_1 = require("../../../utils/nx");
-const object_1 = require("../../../utils/object");
-const paths_1 = require("../../../utils/paths");
-const pkg_manager_1 = require("../../../utils/pkg-manager");
-const shared_constructs_1 = require("../../../utils/shared-constructs");
-const shared_constructs_constants_1 = require("../../../utils/shared-constructs-constants");
-const shared_shadcn_1 = require("../../../utils/shared-shadcn");
-const versions_1 = require("../../../utils/versions");
-const website_constructs_1 = require("../../../utils/website-constructs/website-constructs");
-const ts_project_utils_1 = require("../../lib/ts-project-utils");
-exports.SUPPORTED_UX_PROVIDERS = ['none', 'cloudscape', 'shadcn'];
-exports.REACT_WEBSITE_APP_GENERATOR_INFO = (0, nx_1.getGeneratorInfo)(__filename);
-async function tsReactWebsiteGenerator(tree, schema) {
+ */ import { detectPackageManager, generateFiles, joinPathFragments, names, OverwriteStrategy, readProjectConfiguration, removeDependenciesFromPackageJson, updateJson, updateProjectConfiguration } from "@nx/devkit";
+import { applicationGenerator } from "@nx/react";
+import { relative, sep } from "path";
+import { addTsDependencies } from "../../../utils/add-dependencies.js";
+import { addDestructuredImport, addSingleImport, appendToArrayViaGritQL, applyGritQL } from "../../../utils/ast.js";
+import { declareDependencies, ownedElsewhere } from "../../../utils/declared-dependencies.js";
+import { formatFilesInSubtree } from "../../../utils/format.js";
+import { resolveIac } from "../../../utils/iac.js";
+import { installDependencies } from "../../../utils/install.js";
+import { addGeneratorMetricsIfApplicable } from "../../../utils/metrics.js";
+import { kebabCase, toClassName, toKebabCase } from "../../../utils/names.js";
+import { getNpmScopePrefix } from "../../../utils/npm-scope.js";
+import { addGeneratorMetadata, getGeneratorInfo } from "../../../utils/nx.js";
+import { sortObjectKeys } from "../../../utils/object.js";
+import { getRelativePathToRoot } from "../../../utils/paths.js";
+import { getPackageManagerDisplayCommands } from "../../../utils/pkg-manager.js";
+import { SHARED_CONSTRUCTS_DEPENDENCIES, sharedConstructsGenerator } from "../../../utils/shared-constructs.js";
+import { PACKAGES_DIR, SHARED_SHADCN_DIR, TERRAFORM_WEBSITE_RUNTIME_CONFIG_FILE } from "../../../utils/shared-constructs-constants.js";
+import { SHADCN_DEPENDENCIES, sharedShadcnGenerator } from "../../../utils/shared-shadcn.js";
+import { withVersions } from "../../../utils/versions.js";
+import { addWebsiteInfra, WEBSITE_CONSTRUCTS_PY_DEPENDENCIES } from "../../../utils/website-constructs/website-constructs.js";
+import { configureTsProject } from "../../lib/ts-project-utils.js";
+import { VITEST_DEPENDENCIES } from "../../lib/vitest.js";
+// Each entry names the branch it belongs to, so the same declaration drives both
+// adding and the version sync.
+export const DEPENDENCIES = declareDependencies()({
+    ts: [
+        {
+            name: 'react'
+        },
+        {
+            name: 'react-dom'
+        },
+        // Build/test tooling imported only from vite.config.mts stays at the root.
+        {
+            name: '@nx/react',
+            dev: true,
+            root: true
+        },
+        {
+            name: '@vitest/ui',
+            dev: true,
+            root: true
+        },
+        {
+            name: '@cloudscape-design/components',
+            when: (m)=>m.ux === 'cloudscape'
+        },
+        {
+            name: '@cloudscape-design/board-components',
+            when: (m)=>m.ux === 'cloudscape'
+        },
+        {
+            name: '@cloudscape-design/global-styles',
+            when: (m)=>m.ux === 'cloudscape'
+        },
+        // Shared shadcn components live in the common/shadcn package, but the
+        // website's own generated components (e.g. the tanstack-router sidebar)
+        // import lucide-react directly, so the website must declare it.
+        {
+            name: 'lucide-react',
+            when: (m)=>m.ux === 'shadcn' && m.tanstackRouter
+        },
+        {
+            name: 'tailwindcss',
+            when: (m)=>m.tailwind
+        },
+        {
+            name: '@tailwindcss/vite',
+            when: (m)=>m.tailwind,
+            dev: true,
+            root: true
+        },
+        {
+            name: '@tanstack/react-router',
+            when: (m)=>m.tanstackRouter
+        },
+        {
+            name: '@tanstack/router-plugin',
+            when: (m)=>m.tanstackRouter,
+            dev: true,
+            root: true
+        },
+        {
+            name: '@tanstack/router-generator',
+            when: (m)=>m.tanstackRouter,
+            dev: true,
+            root: true
+        },
+        {
+            name: '@tanstack/virtual-file-routes',
+            when: (m)=>m.tanstackRouter,
+            dev: true,
+            root: true
+        },
+        {
+            name: '@tanstack/router-utils',
+            when: (m)=>m.tanstackRouter,
+            dev: true,
+            root: true
+        },
+        // Declared for its pinned version, which goes into npm's `overrides` below.
+        {
+            name: 'express',
+            versionOnly: true
+        },
+        ...ownedElsewhere(SHADCN_DEPENDENCIES),
+        ...ownedElsewhere(VITEST_DEPENDENCIES),
+        ...ownedElsewhere(SHARED_CONSTRUCTS_DEPENDENCIES)
+    ],
+    py: ownedElsewhere(WEBSITE_CONSTRUCTS_PY_DEPENDENCIES)
+});
+export const SUPPORTED_UX_PROVIDERS = [
+    'none',
+    'cloudscape',
+    'shadcn'
+];
+export const REACT_WEBSITE_APP_GENERATOR_INFO = getGeneratorInfo(import.meta.filename);
+export async function tsReactWebsiteGenerator(tree, schema) {
     const tailwind = schema.tailwind ?? true;
     const tanstackRouter = schema.tanstackRouter ?? true;
-    const ux = schema.ux ?? 'cloudscape';
+    const ux = schema.ux ?? 'shadcn';
     if (ux === 'shadcn' && !tailwind) {
         throw new Error('Shadcn requires TailwindCSS to be enabled.');
     }
-    const npmScopePrefix = (0, npm_scope_1.getNpmScopePrefix)(tree);
-    const scopeAlias = (0, npm_scope_1.toScopeAlias)(npmScopePrefix);
-    const websiteNameClassName = (0, names_1.toClassName)(schema.name);
-    const websiteNameKebabCase = (0, names_1.toKebabCase)(schema.name);
+    const npmScopePrefix = getNpmScopePrefix(tree);
+    const scopeAlias = npmScopePrefix;
+    const websiteNameClassName = toClassName(schema.name);
+    const websiteNameKebabCase = toKebabCase(schema.name);
     const fullyQualifiedName = `${npmScopePrefix}${websiteNameKebabCase}`;
     // NB: interactive nx generator cli can pass empty string
-    const websiteContentPath = (0, devkit_1.joinPathFragments)(schema.directory || '.', schema.subDirectory || websiteNameKebabCase);
-    const projectAlreadyExists = tree.exists((0, devkit_1.joinPathFragments)(websiteContentPath, 'project.json'));
+    const websiteContentPath = joinPathFragments(schema.directory || '.', schema.subDirectory || websiteNameKebabCase);
+    const projectAlreadyExists = tree.exists(joinPathFragments(websiteContentPath, 'project.json'));
     // TODO: consider exposing and supporting e2e tests
     const e2eTestRunner = 'none';
     if (!projectAlreadyExists) {
-        await (0, react_1.applicationGenerator)(tree, {
+        await applicationGenerator(tree, {
             ...schema,
             name: fullyQualifiedName,
             directory: websiteContentPath,
@@ -56,269 +148,331 @@ async function tsReactWebsiteGenerator(tree, schema) {
             unitTestRunner: 'vitest',
             useProjectJson: true,
             style: 'css',
+            // Register the @nx/vite and @nx/vitest plugins so build/serve/test
+            // targets are inferred rather than emitting deprecated executor targets.
+            addPlugin: true
+        });
+        // Pin the inferred target names. The vite production build is exposed as
+        // `bundle` (which produces the deployable artifact), leaving `build` as an
+        // aggregator over lint/compile/test/bundle. vite's own typecheck is dropped
+        // in favour of the tsc `compile`.
+        updateJson(tree, 'nx.json', (nxJson)=>{
+            for (const plugin of nxJson.plugins ?? []){
+                if (typeof plugin === 'string') continue;
+                if (plugin.plugin === '@nx/vite/plugin') {
+                    plugin.options = {
+                        ...plugin.options,
+                        buildTargetName: 'bundle',
+                        // Map both of vite's inferred dev-server targets onto `serve` so the
+                        // plugin doesn't emit a separate `dev`; we author our own `dev`
+                        // below running the local-dev vite mode.
+                        serveTargetName: 'serve',
+                        devTargetName: 'serve',
+                        previewTargetName: 'preview',
+                        serveStaticTargetName: 'serve-static',
+                        typecheckTargetName: 'vite:typecheck'
+                    };
+                } else if (plugin.plugin === '@nx/vitest') {
+                    plugin.options = {
+                        ...plugin.options,
+                        testTargetName: 'test'
+                    };
+                }
+            }
+            return nxJson;
         });
         // Replace with simpler sample source code
-        tree.delete((0, devkit_1.joinPathFragments)(websiteContentPath, 'src'));
+        tree.delete(joinPathFragments(websiteContentPath, 'src'));
     }
-    const projectConfiguration = (0, devkit_1.readProjectConfiguration)(tree, fullyQualifiedName);
+    const projectConfiguration = readProjectConfiguration(tree, fullyQualifiedName);
     const targets = projectConfiguration.targets;
     const infra = schema.infra ?? 'cloudfront-s3';
-    // Configure load:runtime-config target based on IaC provider (only when infra is not none)
-    const iac = infra !== 'none' ? await (0, iac_1.resolveIac)(tree, schema.iac) : undefined;
+    // Configure load-runtime-config target based on IaC provider (only when infra is not none)
+    const iac = infra !== 'none' ? await resolveIac(tree, schema.iac) : undefined;
     if (iac === 'cdk') {
-        targets['load:runtime-config'] = {
+        targets['load-runtime-config'] = {
             executor: 'nx:run-commands',
             metadata: {
-                description: `Load runtime config from your deployed stack for dev purposes. You must set your AWS CLI credentials whilst calling '${(0, pkg_manager_1.getPackageManagerDisplayCommands)().exec} nx run ${fullyQualifiedName}:load:runtime-config'`,
+                description: `Load runtime config from your deployed stack for dev purposes. You must set your AWS CLI credentials whilst calling '${getPackageManagerDisplayCommands().exec} nx load-runtime-config ${fullyQualifiedName}'`
             },
             options: {
-                command: `aws s3 cp s3://\`aws cloudformation describe-stacks --query "Stacks[?starts_with(StackName, '${(0, names_1.kebabCase)(npmScopePrefix)}-')][].Outputs[] | [?contains(OutputKey, '${websiteNameClassName}WebsiteBucketName')].OutputValue" --output text\`/runtime-config.json "{projectRoot}/public/runtime-config.json"`,
-            },
+                command: `aws s3 cp s3://\`aws cloudformation describe-stacks --query "Stacks[?starts_with(StackName, '${kebabCase(npmScopePrefix)}-')][].Outputs[] | [?contains(OutputKey, '${websiteNameClassName}WebsiteBucketName')].OutputValue" --output text\`/runtime-config.json "{projectRoot}/public/runtime-config.json"`
+            }
         };
-    }
-    else if (iac === 'terraform') {
-        targets['load:runtime-config'] = {
+    } else if (iac === 'terraform') {
+        targets['load-runtime-config'] = {
             executor: 'nx:run-commands',
             metadata: {
-                description: "Load runtime config from most recently applied terraform env for dev purposes. Copies the runtime config from the Terraform dist directory to the website's public directory.",
+                description: "Load runtime config from most recently applied terraform env for dev purposes. Copies the runtime config from the Terraform dist directory to the website's public directory."
             },
             options: {
                 command: 'node -e "const fs=require(\'fs\');fs.mkdirSync(process.env.DEST_DIR,{recursive:true});fs.copyFileSync(process.env.SRC_FILE,process.env.DEST_FILE);"',
                 env: {
-                    SRC_FILE: 'dist/packages/common/terraform/runtime-config.json',
+                    SRC_FILE: TERRAFORM_WEBSITE_RUNTIME_CONFIG_FILE,
                     DEST_DIR: `{projectRoot}/public`,
-                    DEST_FILE: `{projectRoot}/public/runtime-config.json`,
-                },
-            },
+                    DEST_FILE: `{projectRoot}/public/runtime-config.json`
+                }
+            }
         };
     }
     if (!projectAlreadyExists) {
-        const buildTarget = targets['build'];
         targets['compile'] = {
-            dependsOn: ['bundle'],
+            // `tsc` needs its dependencies' declarations, which `compile` emits — not
+            // their lint or test results.
+            dependsOn: [
+                '^compile'
+            ],
             executor: 'nx:run-commands',
-            outputs: ['{workspaceRoot}/dist/{projectRoot}/tsc'],
+            outputs: [
+                '{workspaceRoot}/dist/{projectRoot}/tsc'
+            ],
             options: {
                 command: 'tsc --build tsconfig.app.json',
-                cwd: '{projectRoot}',
-            },
-        };
-        targets['bundle'] = {
-            ...buildTarget,
-            options: {
-                ...buildTarget.options,
-                outputPath: 'dist/{projectRoot}/bundle',
-            },
+                cwd: '{projectRoot}'
+            }
         };
+        // bundle is the @nx/vite/plugin inferred `vite build` (writing to the
+        // bundle dir configured in vite.config) — it produces the deployable
+        // artifact. build aggregates lint/compile/test/bundle.
         targets['build'] = {
             dependsOn: [
                 'lint',
                 'compile',
-                'bundle',
                 'test',
-                ...(buildTarget.dependsOn ?? []),
-            ],
-            options: {
-                outputPath: 'dist/{projectRoot}/bundle',
-            },
+                'bundle'
+            ]
         };
-        targets['test'] = {
-            ...targets['test'],
-            options: {
-                ...(targets['test']?.options ?? {}),
-                reportsDirectory: '{workspaceRoot}/coverage/{projectRoot}',
-            },
+        targets['assemble'] = {
+            dependsOn: [
+                'compile',
+                'bundle'
+            ]
         };
-        // Add a serve-local target for running the website and its dependencies locally
-        targets['serve-local'] = {
-            executor: '@nx/vite:dev-server',
-            options: {
-                buildTarget: `${fullyQualifiedName}:build:development`,
-                hmr: true,
-                mode: 'serve-local',
-            },
+        // Run the website and its connected dependencies locally. Mirrors the
+        // inferred `serve` target but with the local-dev vite mode.
+        targets['dev'] = {
+            executor: 'nx:run-commands',
             continuous: true,
+            options: {
+                command: 'vite --mode local-dev',
+                cwd: '{projectRoot}'
+            }
         };
     }
-    projectConfiguration.targets = (0, object_1.sortObjectKeys)(targets);
-    (0, devkit_1.updateProjectConfiguration)(tree, fullyQualifiedName, projectConfiguration);
-    (0, nx_1.addGeneratorMetadata)(tree, projectConfiguration.name, exports.REACT_WEBSITE_APP_GENERATOR_INFO, {
+    projectConfiguration.targets = sortObjectKeys(targets);
+    updateProjectConfiguration(tree, fullyQualifiedName, projectConfiguration);
+    // Recorded here and read by the declaration's predicates, so the packages
+    // added below are exactly the ones the version sync will own.
+    const metadata = {
         ux,
         framework: 'react',
         infra,
-    });
-    await (0, ts_project_utils_1.configureTsProject)(tree, {
+        tailwind,
+        tanstackRouter,
+        // Undefined when no infrastructure was generated, so neither provider's
+        // packages were added.
+        ...iac ? {
+            iac
+        } : {}
+    };
+    addGeneratorMetadata(tree, projectConfiguration.name, REACT_WEBSITE_APP_GENERATOR_INFO, metadata);
+    await configureTsProject(tree, {
         dir: websiteContentPath,
-        fullyQualifiedName,
-    });
+        fullyQualifiedName
+    }, DEPENDENCIES);
     if (ux === 'shadcn') {
-        await (0, shared_shadcn_1.sharedShadcnGenerator)(tree);
+        await sharedShadcnGenerator(tree, DEPENDENCIES);
     }
     if (iac) {
-        await (0, shared_constructs_1.sharedConstructsGenerator)(tree, {
-            iac,
-        });
-        await (0, website_constructs_1.addWebsiteInfra)(tree, {
+        await sharedConstructsGenerator(tree, {
+            iac
+        }, DEPENDENCIES);
+        await addWebsiteInfra(tree, {
             iac,
             websiteProjectName: fullyQualifiedName,
             scopeAlias,
-            websiteContentPath: (0, devkit_1.joinPathFragments)('dist', websiteContentPath),
+            websiteContentPath: joinPathFragments('dist', websiteContentPath),
             websiteNameKebabCase,
-            websiteNameClassName,
+            websiteNameClassName
         });
     }
-    const projectConfig = (0, devkit_1.readProjectConfiguration)(tree, fullyQualifiedName);
+    const projectConfig = readProjectConfiguration(tree, fullyQualifiedName);
     const libraryRoot = projectConfig.root;
-    const sharedShadcnStylesImport = (0, path_1.relative)((0, devkit_1.joinPathFragments)(libraryRoot, 'src'), (0, devkit_1.joinPathFragments)(shared_constructs_constants_1.PACKAGES_DIR, shared_constructs_constants_1.SHARED_SHADCN_DIR, 'src', 'styles', 'globals.css'))
-        .split(path_1.sep)
-        .join('/');
-    const sharedShadcnTsconfigRef = (0, path_1.relative)((0, devkit_1.joinPathFragments)(tree.root, websiteContentPath), (0, devkit_1.joinPathFragments)(tree.root, shared_constructs_constants_1.PACKAGES_DIR, shared_constructs_constants_1.SHARED_SHADCN_DIR, 'tsconfig.json'))
-        .split(path_1.sep)
-        .join('/');
+    const sharedShadcnStylesImport = relative(joinPathFragments(libraryRoot, 'src'), joinPathFragments(PACKAGES_DIR, SHARED_SHADCN_DIR, 'src', 'styles', 'globals.css')).split(sep).join('/');
+    const sharedShadcnTsconfigRef = relative(joinPathFragments(tree.root, websiteContentPath), joinPathFragments(tree.root, PACKAGES_DIR, SHARED_SHADCN_DIR, 'tsconfig.json')).split(sep).join('/');
     const templateOptions = {
         ...schema,
         fullyQualifiedName,
-        pkgMgrCmd: (0, pkg_manager_1.getPackageManagerDisplayCommands)().exec,
+        pkgMgrCmd: getPackageManagerDisplayCommands().exec,
         tailwind,
         tanstackRouter,
         scopeAlias,
-        sharedShadcnStylesImport,
+        sharedShadcnStylesImport
     };
-    tree.delete((0, devkit_1.joinPathFragments)(libraryRoot, 'src', 'app'));
-    const appCommonTemplatePath = (0, devkit_1.joinPathFragments)(__dirname, './files/app/common');
-    const appTemplatePath = (0, devkit_1.joinPathFragments)(__dirname, `./files/app/${ux.toLowerCase()}`);
-    (0, devkit_1.generateFiles)(tree, // the virtual file system
-    appCommonTemplatePath, // path to the file templates
-    libraryRoot, // destination path of the files
-    templateOptions, // config object to replace variable in file templates
-    {
+    tree.delete(joinPathFragments(libraryRoot, 'src', 'app'));
+    const appCommonTemplatePath = joinPathFragments(import.meta.dirname, './files/app/common');
+    const appTemplatePath = joinPathFragments(import.meta.dirname, `./files/app/${ux.toLowerCase()}`);
+    generateFiles(tree, appCommonTemplatePath, libraryRoot, templateOptions, {
         // User-editable source - preserve any edits on re-run
-        overwriteStrategy: devkit_1.OverwriteStrategy.KeepExisting,
+        overwriteStrategy: OverwriteStrategy.KeepExisting
     });
-    (0, devkit_1.generateFiles)(tree, // the virtual file system
-    appTemplatePath, // path to the file templates
-    libraryRoot, // destination path of the files
-    templateOptions, // config object to replace variable in file templates
-    {
+    generateFiles(tree, appTemplatePath, libraryRoot, templateOptions, {
         // User-editable source - preserve any edits on re-run
-        overwriteStrategy: devkit_1.OverwriteStrategy.KeepExisting,
+        overwriteStrategy: OverwriteStrategy.KeepExisting
     });
     if (tanstackRouter) {
-        const routerCommonTemplatePath = (0, devkit_1.joinPathFragments)(__dirname, './files/tanstack-router/common');
-        const routerTemplatePath = (0, devkit_1.joinPathFragments)(__dirname, `./files/tanstack-router/${ux.toLowerCase()}`);
-        (0, devkit_1.generateFiles)(tree, routerCommonTemplatePath, libraryRoot, templateOptions, {
+        const routerCommonTemplatePath = joinPathFragments(import.meta.dirname, './files/tanstack-router/common');
+        const routerTemplatePath = joinPathFragments(import.meta.dirname, `./files/tanstack-router/${ux.toLowerCase()}`);
+        generateFiles(tree, routerCommonTemplatePath, libraryRoot, templateOptions, {
             // User-editable source (and the TanStack-managed route tree) - preserve on re-run
-            overwriteStrategy: devkit_1.OverwriteStrategy.KeepExisting,
+            overwriteStrategy: OverwriteStrategy.KeepExisting
         });
-        (0, devkit_1.generateFiles)(tree, routerTemplatePath, libraryRoot, templateOptions, // config object to replace variable in file templates
-        {
+        generateFiles(tree, routerTemplatePath, libraryRoot, templateOptions, {
             // User-editable source - preserve any edits on re-run
-            overwriteStrategy: devkit_1.OverwriteStrategy.KeepExisting,
+            overwriteStrategy: OverwriteStrategy.KeepExisting
         });
-        tree.delete((0, devkit_1.joinPathFragments)(websiteContentPath, 'src', 'app.tsx'));
+        tree.delete(joinPathFragments(websiteContentPath, 'src', 'app.tsx'));
     }
     if (e2eTestRunner !== 'none') {
         const e2eFullyQualifiedName = `${fullyQualifiedName}-e2e`;
-        const e2eRoot = (0, devkit_1.readProjectConfiguration)(tree, e2eFullyQualifiedName).root;
-        (0, devkit_1.generateFiles)(tree, // the virtual file system
-        (0, devkit_1.joinPathFragments)(__dirname, `./files/e2e/${e2eTestRunner}`), // path to the file templates
-        e2eRoot, // destination path of the files
-        { ...schema, ...(0, devkit_1.names)(fullyQualifiedName) }, {
-            overwriteStrategy: devkit_1.OverwriteStrategy.KeepExisting,
+        const e2eRoot = readProjectConfiguration(tree, e2eFullyQualifiedName).root;
+        generateFiles(tree, joinPathFragments(import.meta.dirname, `./files/e2e/${e2eTestRunner}`), e2eRoot, {
+            ...schema,
+            ...names(fullyQualifiedName)
+        }, {
+            overwriteStrategy: OverwriteStrategy.KeepExisting
         });
-        await (0, ts_project_utils_1.configureTsProject)(tree, {
+        await configureTsProject(tree, {
             fullyQualifiedName: e2eFullyQualifiedName,
-            dir: e2eRoot,
-        });
+            dir: e2eRoot
+        }, DEPENDENCIES);
     }
-    const viteConfigPath = (0, devkit_1.joinPathFragments)(libraryRoot, 'vite.config.mts');
+    const viteConfigPath = joinPathFragments(libraryRoot, 'vite.config.mts');
     if (tree.exists(viteConfigPath)) {
         // Add Tanstack Router import if enabled
         if (tanstackRouter) {
-            await (0, ast_1.addDestructuredImport)(tree, viteConfigPath, ['tanstackRouter'], '@tanstack/router-plugin/vite');
-            await (0, ast_1.addDestructuredImport)(tree, viteConfigPath, ['resolve'], 'path');
+            await addDestructuredImport(tree, viteConfigPath, [
+                'tanstackRouter'
+            ], '@tanstack/router-plugin/vite');
+            await addDestructuredImport(tree, viteConfigPath, [
+                'resolve'
+            ], 'path');
         }
         // Add TailwindCSS import if enabled
         if (tailwind) {
-            await (0, ast_1.addSingleImport)(tree, viteConfigPath, 'tailwindcss', '@tailwindcss/vite');
+            await addSingleImport(tree, viteConfigPath, 'tailwindcss', '@tailwindcss/vite');
         }
-        // Update build.outDir
-        const outDir = (0, devkit_1.joinPathFragments)((0, paths_1.getRelativePathToRoot)(tree, fullyQualifiedName), 'dist', websiteContentPath);
-        await (0, ast_1.applyGritQL)(tree, viteConfigPath, `\`build: { $bprops }\` where { $bprops <: contains \`outDir: $_\` => \`outDir: '${outDir}'\` }`);
+        // Update build.outDir. The inferred `vite build` target writes here, so
+        // point it at the bundle dir the website infrastructure consumes.
+        const outDir = joinPathFragments(getRelativePathToRoot(tree, fullyQualifiedName), 'dist', websiteContentPath, 'bundle');
+        await applyGritQL(tree, viteConfigPath, `\`build: { $bprops }\` where { $bprops <: contains \`outDir: $_\` => \`outDir: '${outDir}'\` }`);
         // Add plugins to the plugins array
         if (tanstackRouter) {
             // Prepend tanstackRouter (must be first plugin) — rewrite works for both single/multi-element
-            await (0, ast_1.applyGritQL)(tree, viteConfigPath, "`plugins: [$items]` => `plugins: [tanstackRouter({ routesDirectory: resolve(__dirname, 'src/routes'), generatedRouteTree: resolve(__dirname, 'src/routeTree.gen.ts') }), $items]` where { $items <: within `defineConfig($_)`, $items <: not contains `tanstackRouter` }");
+            await applyGritQL(tree, viteConfigPath, "`plugins: [$items]` => `plugins: [tanstackRouter({ routesDirectory: resolve(import.meta.dirname, 'src/routes'), generatedRouteTree: resolve(import.meta.dirname, 'src/routeTree.gen.ts') }), $items]` where { $items <: within `defineConfig($_)`, $items <: not contains `tanstackRouter` }");
         }
         if (tailwind) {
-            await (0, ast_1.applyGritQL)(tree, viteConfigPath, '`plugins: [$items]` => `plugins: [$items, tailwindcss()]` where { $items <: within `defineConfig($_)`, $items <: not some `tailwindcss()` }');
+            await appendToArrayViaGritQL(tree, viteConfigPath, 'plugins:', 'tailwindcss()', {
+                scope: 'defineConfig($_)'
+            });
         }
-        // Use Vite's native tsconfig paths resolution (replaces vite-tsconfig-paths)
-        await (0, ast_1.applyGritQL)(tree, viteConfigPath, 'or { `defineConfig(() => ({ $props }))` where { $props <: not some `resolve: $_`, $props += `resolve: { tsconfigPaths: true }` }, `defineConfig({ $props })` where { $props <: not some `resolve: $_`, $props += `resolve: { tsconfigPaths: true }` } }');
+        // Use Vite's native tsconfig paths resolution (replaces vite-tsconfig-paths).
+        // `dedupe` forces a single copy of react/react-dom into the bundle: each
+        // project declares its own react dependency, so without this a workspace
+        // library's hoisted copy can produce a second React instance and the
+        // "Invalid hook call" runtime crash.
+        await applyGritQL(tree, viteConfigPath, "or { `defineConfig(() => ({ $props }))` where { $props <: not some `resolve: $_`, $props += `resolve: { tsconfigPaths: true, dedupe: ['react', 'react-dom'] }` }, `defineConfig({ $props })` where { $props <: not some `resolve: $_`, $props += `resolve: { tsconfigPaths: true, dedupe: ['react', 'react-dom'] }` } }");
         // Add define: { global: {} } to the config (handles both callback and direct forms)
-        await (0, ast_1.applyGritQL)(tree, viteConfigPath, 'or { `defineConfig(() => ({ $props }))` where { $props <: not contains `define`, $props += `define: { global: {} }` }, `defineConfig({ $props })` where { $props <: not contains `define`, $props += `define: { global: {} }` } }');
+        await applyGritQL(tree, viteConfigPath, 'or { `defineConfig(() => ({ $props }))` where { $props <: not contains `define`, $props += `define: { global: {} }` }, `defineConfig({ $props })` where { $props <: not contains `define`, $props += `define: { global: {} }` } }');
     }
-    (0, devkit_1.updateJson)(tree, (0, devkit_1.joinPathFragments)(websiteContentPath, 'tsconfig.json'), (tsconfig) => ({
-        ...tsconfig,
-        compilerOptions: {
-            ...tsconfig.compilerOptions,
-            moduleResolution: 'Bundler',
-            module: 'Preserve',
-        },
-    }));
-    const outDirToRootRelativePath = (0, path_1.relative)((0, devkit_1.joinPathFragments)(tree.root, websiteContentPath), tree.root);
-    const distDir = (0, devkit_1.joinPathFragments)(outDirToRootRelativePath, 'dist', websiteContentPath, 'tsc');
-    (0, devkit_1.updateJson)(tree, (0, devkit_1.joinPathFragments)(websiteContentPath, 'tsconfig.app.json'), (tsconfig) => ({
-        ...tsconfig,
-        compilerOptions: {
-            ...tsconfig.compilerOptions,
-            outDir: distDir,
-            tsBuildInfoFile: (0, devkit_1.joinPathFragments)(distDir, 'tsconfig.lib.tsbuildinfo'),
-            lib: ['DOM'],
-        },
-        references: ux === 'shadcn'
-            ? [
-                ...(tsconfig.references ?? []).filter((ref) => ref.path !== sharedShadcnTsconfigRef),
+    updateJson(tree, joinPathFragments(websiteContentPath, 'tsconfig.json'), (tsconfig)=>({
+            ...tsconfig,
+            compilerOptions: {
+                ...tsconfig.compilerOptions,
+                moduleResolution: 'Bundler',
+                module: 'Preserve'
+            }
+        }));
+    const outDirToRootRelativePath = relative(joinPathFragments(tree.root, websiteContentPath), tree.root);
+    const distDir = joinPathFragments(outDirToRootRelativePath, 'dist', websiteContentPath, 'tsc');
+    updateJson(tree, joinPathFragments(websiteContentPath, 'tsconfig.app.json'), (tsconfig)=>({
+            ...tsconfig,
+            compilerOptions: {
+                ...tsconfig.compilerOptions,
+                outDir: distDir,
+                tsBuildInfoFile: joinPathFragments(distDir, 'tsconfig.lib.tsbuildinfo'),
+                lib: [
+                    'DOM'
+                ]
+            },
+            references: ux === 'shadcn' ? [
+                ...(tsconfig.references ?? []).filter((ref)=>ref.path !== sharedShadcnTsconfigRef),
                 {
-                    path: sharedShadcnTsconfigRef,
-                },
-            ]
-            : tsconfig.references,
-    }));
-    const devDependencies = ['@nx/react', '@vitest/ui'];
-    const dependencies = ['react', 'react-dom'];
-    if (ux === 'cloudscape') {
-        dependencies.push('@cloudscape-design/components', '@cloudscape-design/board-components', '@cloudscape-design/global-styles');
-    }
-    else if (ux === 'shadcn') {
-        // not required to add any dependencies because dependencies are added by the common/shadcn package.
-    }
-    // Add TailwindCSS dependencies if enabled
-    if (tailwind) {
-        dependencies.push('tailwindcss');
-        devDependencies.push('@tailwindcss/vite');
-    }
-    if (tanstackRouter) {
-        dependencies.push('@tanstack/react-router');
-        devDependencies.push('@tanstack/router-plugin', '@tanstack/router-generator', '@tanstack/virtual-file-routes', '@tanstack/router-utils');
-    }
-    (0, devkit_1.addDependenciesToPackageJson)(tree, (0, versions_1.withVersions)(dependencies), (0, versions_1.withVersions)(devDependencies));
-    (0, devkit_1.updateJson)(tree, 'package.json', (pkgJson) => {
-        pkgJson.scripts ??= {};
-        if (!pkgJson.scripts.dev) {
-            pkgJson.scripts.dev = `nx serve-local ${fullyQualifiedName}`;
-        }
-        return pkgJson;
+                    path: sharedShadcnTsconfigRef
+                }
+            ] : tsconfig.references
+        }));
+    addTsDependencies(tree, DEPENDENCIES, {
+        metadata,
+        projectRoot: libraryRoot
     });
-    await (0, metrics_1.addGeneratorMetricsIfApplicable)(tree, [
-        exports.REACT_WEBSITE_APP_GENERATOR_INFO,
+    // @nx/react declares an optional `express` peer on the major behind the one
+    // vended here, for a module-federation dev-server this never runs. npm alone
+    // fails the whole install on an optional peer it cannot satisfy, so it gets a
+    // scoped override; the other package managers only warn.
+    if (detectPackageManager() === 'npm') {
+        updateJson(tree, 'package.json', (packageJson)=>{
+            packageJson.overrides = {
+                ...packageJson.overrides,
+                '@nx/react': {
+                    ...packageJson.overrides?.['@nx/react'],
+                    ...withVersions(DEPENDENCIES, [
+                        'express'
+                    ])
+                }
+            };
+            return packageJson;
+        });
+    }
+    // @nx/react's applicationGenerator seeds react/react-dom into the root
+    // manifest. The website now declares its own pinned versions, so drop the
+    // root copies: without catalogs (npm) the root's floating range resolves to
+    // a different version than the website's pin, installing a second React and
+    // producing the "Invalid hook call" runtime crash.
+    removeDependenciesFromPackageJson(tree, [
+        'react',
+        'react-dom'
+    ], []);
+    await addGeneratorMetricsIfApplicable(tree, [
+        REACT_WEBSITE_APP_GENERATOR_INFO
     ]);
-    await (0, format_1.formatFilesInSubtree)(tree);
-    return () => {
-        if (!schema.skipInstall) {
-            (0, devkit_1.installPackagesTask)(tree);
-        }
-    };
+    // TanStack Router's vite plugin owns this website's route tree and rewrites it
+    // in its own (unformatted) shape whenever the config is loaded — including when
+    // Nx computes the project graph — so formatting it here would only make
+    // generation non-idempotent. The vended biome config excludes `**/*.gen.*`, so
+    // the workspace's own `format` target leaves it alone too.
+    await formatFilesInSubtree(tree, undefined, {
+        ignore: tanstackRouter ? [
+            joinPathFragments(libraryRoot, 'src', 'routeTree.gen.ts')
+        ] : []
+    });
+    // The generated vite.config.mts imports these, and Nx's inferred `@nx/vite`
+    // plugin loads that config when computing the project graph — so they must be
+    // installed even if the caller would otherwise prefer to defer.
+    return ()=>installDependencies(tree, schema.preferInstallDependencies, {
+            languages: [
+                'typescript'
+            ],
+            ensureResolvable: [
+                ...tailwind ? [
+                    '@tailwindcss/vite'
+                ] : [],
+                ...tanstackRouter ? [
+                    '@tanstack/router-plugin'
+                ] : []
+            ]
+        });
 }
-exports.default = tsReactWebsiteGenerator;
+export default tsReactWebsiteGenerator;
+
 //# sourceMappingURL=generator.js.map