@nx/react 0.0.0-pr-22179-271588f

package/src/generators/host/files/module-federation-ssr-ts/server.ts__tmpl__

@@ -0,0 +1,28 @@
+import * as path from 'path';
+import express from 'express';
+import cors from 'cors';
+
+import { handleRequest } from './src/main.server';
+
+const port = process.env['PORT'] || 4200;
+const app = express();
+
+const browserDist = path.join(process.cwd(), '<%= browserBuildOutputPath %>');
+const indexPath = path.join(browserDist, 'index.html');
+
+app.use(cors());
+
+app.get(
+  '*.*',
+  express.static(browserDist, {
+    maxAge: '1y',
+  })
+);
+
+app.use('*', handleRequest(indexPath));
+
+const server = app.listen(port, () => {
+  console.log(`Express server listening on http://localhost:${port}`);
+});
+
+server.on('error', console.error);

package/src/generators/host/files/module-federation-ssr-ts/tsconfig.server.json__tmpl__

@@ -0,0 +1,17 @@
+{
+  "extends": "./tsconfig.app.json",
+  "compilerOptions": {
+    "outDir": "../../out-tsc/server",
+    "target": "es2019",
+    "types": [
+      "node",
+      "@nx/react/typings/cssmodule.d.ts",
+      "@nx/react/typings/image.d.ts"
+    ]
+  },
+  "include": [
+    "src/remotes.d.ts",
+    "src/main.server.tsx",
+    "server.ts"
+  ]
+}

package/src/generators/host/files/module-federation-ssr-ts/webpack.server.config.ts__tmpl__

@@ -0,0 +1,12 @@
+import {composePlugins, withNx} from '@nx/webpack';
+import {withReact} from '@nx/react';
+import {withModuleFederationForSSR} from '@nx/react/module-federation';
+
+import baseConfig from './module-federation.config';
+
+const defaultConfig = {
+    ...baseConfig
+};
+
+// Nx plugins for webpack to build config object from Nx options and context.
+export default composePlugins(withNx(), withReact({ssr: true}), withModuleFederationForSSR(defaultConfig));

package/src/generators/host/files/module-federation-ts/module-federation.config.ts__tmpl__

@@ -0,0 +1,25 @@
+import { ModuleFederationConfig } from '@nx/webpack';
+
+const config: ModuleFederationConfig = {
+    name: '<%= projectName %>',
+    /**
+     * To use a remote that does not exist in your current Nx Workspace
+     * You can use the tuple-syntax to define your remote
+     *
+     * remotes: [['my-external-remote', 'https://nx-angular-remote.netlify.app']]
+     *
+     * You _may_ need to add a `remotes.d.ts` file to your `src/` folder declaring the external remote for tsc, with the
+     * following content:
+     *
+     * declare module 'my-external-remote';
+     *
+     */
+    remotes: [
+            <% if (static) { 
+         remotes.forEach(function(r) { %> "<%= r.fileName %>", <% }); 
+       }
+    %>
+  ],
+};
+
+export default config;

package/src/generators/host/files/module-federation-ts/webpack.config.prod.ts__tmpl__

@@ -0,0 +1,33 @@
+import { composePlugins, withNx } from '@nx/webpack';
+import { withReact } from '@nx/react';
+import { withModuleFederation } from '@nx/react/module-federation';
+import { ModuleFederationConfig } from '@nx/webpack';
+
+import baseConfig from './module-federation.config';
+
+const prodConfig: ModuleFederationConfig = {
+    ...baseConfig,
+    /*
+     * Remote overrides for production.
+     * Each entry is a pair of a unique name and the URL where it is deployed.
+     *
+     * e.g.
+     * remotes: [
+     *   ['app1', 'http://app1.example.com'],
+     *   ['app2', 'http://app2.example.com'],
+     * ]
+     *
+     * You can also use a full path to the remoteEntry.js file if desired.
+     *
+     * remotes: [
+     *   ['app1', 'http://example.com/path/to/app1/remoteEntry.js'],
+     *   ['app2', 'http://example.com/path/to/app2/remoteEntry.js'],
+     * ]
+     */
+    remotes: [
+        <% remotes.forEach(function(r) {%>['<%= r.fileName %>', 'http://localhost:<%= r.port %>/'],<% }); %>
+],
+};
+
+// Nx plugins for webpack to build config object from Nx options and context.
+export default composePlugins(withNx(), withReact(), withModuleFederation(prodConfig));

package/src/generators/host/files/module-federation-ts/webpack.config.ts__tmpl__

@@ -0,0 +1,12 @@
+import {composePlugins, withNx, ModuleFederationConfig} from '@nx/webpack';
+import {withReact} from '@nx/react';
+import {withModuleFederation} from '@nx/react/module-federation';
+
+import baseConfig from './module-federation.config';
+
+const config: ModuleFederationConfig = {
+    ...baseConfig,
+};
+
+// Nx plugins for webpack to build config object from Nx options and context.
+export default composePlugins(withNx(), withReact(), withModuleFederation(config));

package/src/generators/host/host.d.ts

@@ -0,0 +1,5 @@
+import { GeneratorCallback, Tree } from '@nx/devkit';
+import { Schema } from './schema';
+export declare function hostGenerator(host: Tree, schema: Schema): Promise<GeneratorCallback>;
+export declare function hostGeneratorInternal(host: Tree, schema: Schema): Promise<GeneratorCallback>;
+export default hostGenerator;

package/src/generators/host/host.js

@@ -0,0 +1,95 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.hostGeneratorInternal = exports.hostGenerator = void 0;
+const devkit_1 = require("@nx/devkit");
+const update_module_federation_project_1 = require("../../rules/update-module-federation-project");
+const application_1 = require("../application/application");
+const normalize_options_1 = require("../application/lib/normalize-options");
+const remote_1 = require("../remote/remote");
+const setup_ssr_1 = require("../setup-ssr/setup-ssr");
+const add_module_federation_files_1 = require("./lib/add-module-federation-files");
+const normalize_remote_1 = require("./lib/normalize-remote");
+const setup_ssr_for_host_1 = require("./lib/setup-ssr-for-host");
+const update_module_federation_e2e_project_1 = require("./lib/update-module-federation-e2e-project");
+const add_mf_env_to_inputs_1 = require("../../utils/add-mf-env-to-inputs");
+async function hostGenerator(host, schema) {
+    return hostGeneratorInternal(host, {
+        projectNameAndRootFormat: 'derived',
+        ...schema,
+    });
+}
+exports.hostGenerator = hostGenerator;
+async function hostGeneratorInternal(host, schema) {
+    const tasks = [];
+    const options = {
+        ...(await (0, normalize_options_1.normalizeOptions)(host, schema, '@nx/react:host')),
+        js: schema.js ?? false,
+        typescriptConfiguration: schema.js
+            ? false
+            : schema.typescriptConfiguration ?? true,
+        dynamic: schema.dynamic ?? false,
+        // TODO(colum): remove when MF works with Crystal
+        addPlugin: false,
+    };
+    const initTask = await (0, application_1.default)(host, {
+        ...options,
+        // The target use-case is loading remotes as child routes, thus always enable routing.
+        routing: true,
+        // Only webpack works with module federation for now.
+        bundler: 'webpack',
+        skipFormat: true,
+    });
+    tasks.push(initTask);
+    const remotesWithPorts = [];
+    if (schema.remotes) {
+        let remotePort = options.devServerPort + 1;
+        for (const remote of schema.remotes) {
+            const remoteName = await (0, normalize_remote_1.normalizeRemoteName)(host, remote, options);
+            remotesWithPorts.push({ name: remoteName, port: remotePort });
+            const remoteTask = await (0, remote_1.default)(host, {
+                name: remote,
+                directory: (0, normalize_remote_1.normalizeRemoteDirectory)(remote, options),
+                style: options.style,
+                unitTestRunner: options.unitTestRunner,
+                e2eTestRunner: options.e2eTestRunner,
+                linter: options.linter,
+                devServerPort: remotePort,
+                ssr: options.ssr,
+                skipFormat: true,
+                projectNameAndRootFormat: options.projectNameAndRootFormat,
+                typescriptConfiguration: options.typescriptConfiguration,
+                js: options.js,
+                dynamic: options.dynamic,
+                host: options.name,
+            });
+            tasks.push(remoteTask);
+            remotePort++;
+        }
+    }
+    (0, add_module_federation_files_1.addModuleFederationFiles)(host, options, remotesWithPorts);
+    (0, update_module_federation_project_1.updateModuleFederationProject)(host, options);
+    (0, update_module_federation_e2e_project_1.updateModuleFederationE2eProject)(host, options);
+    if (options.ssr) {
+        const setupSsrTask = await (0, setup_ssr_1.default)(host, {
+            project: options.projectName,
+            serverPort: options.devServerPort,
+            skipFormat: true,
+        });
+        tasks.push(setupSsrTask);
+        const setupSsrForHostTask = await (0, setup_ssr_for_host_1.setupSsrForHost)(host, options, options.projectName, remotesWithPorts);
+        tasks.push(setupSsrForHostTask);
+        const projectConfig = (0, devkit_1.readProjectConfiguration)(host, options.projectName);
+        projectConfig.targets.server.options.webpackConfig = (0, devkit_1.joinPathFragments)(projectConfig.root, `webpack.server.config.${options.typescriptConfiguration ? 'ts' : 'js'}`);
+        (0, devkit_1.updateProjectConfiguration)(host, options.projectName, projectConfig);
+    }
+    if (!options.setParserOptionsProject) {
+        host.delete((0, devkit_1.joinPathFragments)(options.appProjectRoot, 'tsconfig.lint.json'));
+    }
+    (0, add_mf_env_to_inputs_1.addMfEnvToTargetDefaultInputs)(host);
+    if (!options.skipFormat) {
+        await (0, devkit_1.formatFiles)(host);
+    }
+    return (0, devkit_1.runTasksInSerial)(...tasks);
+}
+exports.hostGeneratorInternal = hostGeneratorInternal;
+exports.default = hostGenerator;

package/src/generators/host/lib/add-module-federation-files.d.ts

@@ -0,0 +1,6 @@
+import { Tree } from '@nx/devkit';
+import { NormalizedSchema } from '../schema';
+export declare function addModuleFederationFiles(host: Tree, options: NormalizedSchema, defaultRemoteManifest: {
+    name: string;
+    port: number;
+}[]): void;

package/src/generators/host/lib/add-module-federation-files.js

@@ -0,0 +1,52 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.addModuleFederationFiles = void 0;
+const devkit_1 = require("@nx/devkit");
+const maybe_js_1 = require("../../../utils/maybe-js");
+function addModuleFederationFiles(host, options, defaultRemoteManifest) {
+    const templateVariables = {
+        ...(0, devkit_1.names)(options.name),
+        ...options,
+        static: !options?.dynamic,
+        tmpl: '',
+        remotes: defaultRemoteManifest.map(({ name, port }) => {
+            return {
+                ...(0, devkit_1.names)(name),
+                port,
+            };
+        }),
+    };
+    const projectConfig = (0, devkit_1.readProjectConfiguration)(host, options.name);
+    const pathToMFManifest = (0, devkit_1.joinPathFragments)(projectConfig.sourceRoot, 'assets/module-federation.manifest.json');
+    // Module federation requires bootstrap code to be dynamically imported.
+    // Renaming original entry file so we can use `import(./bootstrap)` in
+    // new entry file.
+    host.rename((0, devkit_1.joinPathFragments)(options.appProjectRoot, (0, maybe_js_1.maybeJs)(options, 'src/main.tsx')), (0, devkit_1.joinPathFragments)(options.appProjectRoot, (0, maybe_js_1.maybeJs)(options, 'src/bootstrap.tsx')));
+    (0, devkit_1.generateFiles)(host, (0, devkit_1.joinPathFragments)(__dirname, `../files/${options.js ? 'common' : 'common-ts'}`), options.appProjectRoot, templateVariables);
+    const pathToModuleFederationFiles = options.typescriptConfiguration
+        ? 'module-federation-ts'
+        : 'module-federation';
+    // New entry file is created here.
+    (0, devkit_1.generateFiles)(host, (0, devkit_1.joinPathFragments)(__dirname, `../files/${pathToModuleFederationFiles}`), options.appProjectRoot, templateVariables);
+    function deleteFileIfExists(host, filePath) {
+        if (host.exists(filePath)) {
+            host.delete(filePath);
+        }
+    }
+    function processWebpackConfig(options, host, fileName) {
+        const pathToWebpackConfig = (0, devkit_1.joinPathFragments)(options.appProjectRoot, fileName);
+        deleteFileIfExists(host, pathToWebpackConfig);
+    }
+    if (options.typescriptConfiguration) {
+        processWebpackConfig(options, host, 'webpack.config.js');
+        processWebpackConfig(options, host, 'webpack.config.prod.js');
+    }
+    if (options.dynamic) {
+        processWebpackConfig(options, host, 'webpack.config.prod.js');
+        processWebpackConfig(options, host, 'webpack.config.prod.ts');
+        if (!host.exists(pathToMFManifest)) {
+            host.write(pathToMFManifest, '{}');
+        }
+    }
+}
+exports.addModuleFederationFiles = addModuleFederationFiles;

package/src/generators/host/lib/normalize-remote.d.ts

@@ -0,0 +1,4 @@
+import { Tree } from '@nx/devkit';
+import { NormalizedSchema } from '../schema';
+export declare function normalizeRemoteName(tree: Tree, remote: string, options: NormalizedSchema): Promise<string>;
+export declare function normalizeRemoteDirectory(remote: string, options: NormalizedSchema): string;

package/src/generators/host/lib/normalize-remote.js

@@ -0,0 +1,28 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.normalizeRemoteDirectory = exports.normalizeRemoteName = void 0;
+const devkit_1 = require("@nx/devkit");
+const project_name_and_root_utils_1 = require("@nx/devkit/src/generators/project-name-and-root-utils");
+async function normalizeRemoteName(tree, remote, options) {
+    const { projectName: remoteName } = await (0, project_name_and_root_utils_1.determineProjectNameAndRootOptions)(tree, {
+        name: remote,
+        projectType: 'application',
+        directory: options.directory,
+        projectNameAndRootFormat: options.projectNameAndRootFormat,
+        callingGenerator: '@nx/react:host',
+    });
+    return remoteName;
+}
+exports.normalizeRemoteName = normalizeRemoteName;
+function normalizeRemoteDirectory(remote, options) {
+    if (options.projectNameAndRootFormat === 'derived' || !options.directory) {
+        return options.directory;
+    }
+    /**
+     * With the `as-provided` format, the provided directory would be the root
+     * of the host application. Append the remote name to the host parent
+     * directory to get the remote directory.
+     */
+    return (0, devkit_1.joinPathFragments)(options.directory, '..', remote);
+}
+exports.normalizeRemoteDirectory = normalizeRemoteDirectory;

package/src/generators/host/lib/setup-ssr-for-host.d.ts

@@ -0,0 +1,6 @@
+import type { GeneratorCallback, Tree } from '@nx/devkit';
+import type { Schema } from '../schema';
+export declare function setupSsrForHost(tree: Tree, options: Schema, appName: string, defaultRemoteManifest: {
+    name: string;
+    port: number;
+}[]): Promise<GeneratorCallback>;

package/src/generators/host/lib/setup-ssr-for-host.js

@@ -0,0 +1,33 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.setupSsrForHost = void 0;
+const devkit_1 = require("@nx/devkit");
+const versions_1 = require("../../../utils/versions");
+async function setupSsrForHost(tree, options, appName, defaultRemoteManifest) {
+    const tasks = [];
+    let project = (0, devkit_1.readProjectConfiguration)(tree, appName);
+    project.targets.serve.executor = '@nx/react:module-federation-ssr-dev-server';
+    (0, devkit_1.updateProjectConfiguration)(tree, appName, project);
+    const pathToModuleFederationSsrFiles = options.typescriptConfiguration
+        ? 'module-federation-ssr-ts'
+        : 'module-federation-ssr';
+    (0, devkit_1.generateFiles)(tree, (0, devkit_1.joinPathFragments)(__dirname, `../files/${pathToModuleFederationSsrFiles}`), project.root, {
+        ...options,
+        static: !options?.dynamic,
+        remotes: defaultRemoteManifest.map(({ name, port }) => {
+            return {
+                ...(0, devkit_1.names)(name),
+                port,
+            };
+        }),
+        appName,
+        tmpl: '',
+        browserBuildOutputPath: project.targets.build.options.outputPath,
+    });
+    const installTask = (0, devkit_1.addDependenciesToPackageJson)(tree, {
+        '@module-federation/node': versions_1.moduleFederationNodeVersion,
+    }, {});
+    tasks.push(installTask);
+    return (0, devkit_1.runTasksInSerial)(...tasks);
+}
+exports.setupSsrForHost = setupSsrForHost;

package/src/generators/host/lib/update-module-federation-e2e-project.d.ts

@@ -0,0 +1,3 @@
+import { NormalizedSchema } from '../schema';
+import { Tree } from '@nx/devkit';
+export declare function updateModuleFederationE2eProject(host: Tree, options: NormalizedSchema): void;

package/src/generators/host/lib/update-module-federation-e2e-project.js

@@ -0,0 +1,20 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.updateModuleFederationE2eProject = void 0;
+const devkit_1 = require("@nx/devkit");
+function updateModuleFederationE2eProject(host, options) {
+    try {
+        let projectConfig = (0, devkit_1.readProjectConfiguration)(host, options.e2eProjectName);
+        if (projectConfig.targets.e2e.executor !== '@nx/playwright:playwright') {
+            projectConfig.targets.e2e.options = {
+                ...projectConfig.targets.e2e.options,
+                baseUrl: `http://localhost:${options.devServerPort}`,
+            };
+            (0, devkit_1.updateProjectConfiguration)(host, options.e2eProjectName, projectConfig);
+        }
+    }
+    catch {
+        // nothing
+    }
+}
+exports.updateModuleFederationE2eProject = updateModuleFederationE2eProject;

package/src/generators/host/schema.d.ts

@@ -0,0 +1,37 @@
+import type { ProjectNameAndRootFormat } from '@nx/devkit/src/generators/project-name-and-root-utils';
+import type { Linter } from '@nx/eslint';
+import type { SupportedStyles } from '../../../typings/style';
+
+export interface Schema {
+  classComponent?: boolean;
+  compiler?: 'babel' | 'swc';
+  devServerPort?: number;
+  directory?: string;
+  projectNameAndRootFormat?: ProjectNameAndRootFormat;
+  e2eTestRunner: 'cypress' | 'playwright' | 'none';
+  globalCss?: boolean;
+  js?: boolean;
+  linter: Linter;
+  name: string;
+  pascalCaseFiles?: boolean;
+  remotes?: string[];
+  setParserOptionsProject?: boolean;
+  skipFormat?: boolean;
+  skipNxJson?: boolean;
+  ssr?: boolean;
+  strict?: boolean;
+  style: SupportedStyles;
+  tags?: string;
+  unitTestRunner: 'jest' | 'vitest' | 'none';
+  minimal?: boolean;
+  typescriptConfiguration?: boolean;
+  dynamic?: boolean;
+  addPlugin?: boolean;
+}
+
+export interface NormalizedSchema extends Schema {
+  appProjectRoot: string;
+  e2eProjectName: string;
+  projectName: string;
+  addPlugin?: boolean;
+}

package/src/generators/host/schema.json

@@ -0,0 +1,184 @@
+{
+  "$schema": "https://json-schema.org/schema",
+  "$id": "GeneratorReactHost",
+  "cli": "nx",
+  "title": "Generate Module Federation Setup for React Host App",
+  "description": "Create Module Federation configuration files for given React Host Application.",
+  "type": "object",
+  "properties": {
+    "name": {
+      "type": "string",
+      "description": "The name of the host application to generate the Module Federation configuration",
+      "$default": {
+        "$source": "argv",
+        "index": 0
+      },
+      "x-prompt": "What name would you like to use as the host application?",
+      "pattern": "^[a-zA-Z][^:]*$",
+      "x-priority": "important"
+    },
+    "directory": {
+      "description": "The directory of the new application.",
+      "type": "string",
+      "alias": "dir",
+      "x-priority": "important"
+    },
+    "projectNameAndRootFormat": {
+      "description": "Whether to generate the project name and root directory as provided (`as-provided`) or generate them composing their values and taking the configured layout into account (`derived`).",
+      "type": "string",
+      "enum": ["as-provided", "derived"]
+    },
+    "style": {
+      "description": "The file extension to be used for style files.",
+      "type": "string",
+      "default": "css",
+      "alias": "s",
+      "x-prompt": {
+        "message": "Which stylesheet format would you like to use?",
+        "type": "list",
+        "items": [
+          {
+            "value": "css",
+            "label": "CSS"
+          },
+          {
+            "value": "scss",
+            "label": "SASS(.scss)       [ https://sass-lang.com                     ]"
+          },
+          {
+            "value": "less",
+            "label": "LESS              [ https://lesscss.org                       ]"
+          },
+          {
+            "value": "tailwind",
+            "label": "tailwind [ https://tailwindcss.com/            ]"
+          },
+          {
+            "value": "styled-components",
+            "label": "styled-components [ https://styled-components.com            ]"
+          },
+          {
+            "value": "@emotion/styled",
+            "label": "emotion           [ https://emotion.sh                       ]"
+          },
+          {
+            "value": "styled-jsx",
+            "label": "styled-jsx        [ https://www.npmjs.com/package/styled-jsx ]"
+          },
+          {
+            "value": "none",
+            "label": "None"
+          }
+        ]
+      }
+    },
+    "linter": {
+      "description": "The tool to use for running lint checks.",
+      "type": "string",
+      "enum": ["eslint"],
+      "default": "eslint"
+    },
+    "dynamic": {
+      "type": "boolean",
+      "description": "Should the host application use dynamic federation?",
+      "default": false
+    },
+    "skipFormat": {
+      "description": "Skip formatting files.",
+      "type": "boolean",
+      "default": false,
+      "x-priority": "internal"
+    },
+    "skipNxJson": {
+      "description": "Skip updating workspace.json with default options based on values provided to this app (e.g. babel, style).",
+      "type": "boolean",
+      "default": false,
+      "x-priority": "internal"
+    },
+    "unitTestRunner": {
+      "type": "string",
+      "enum": ["jest", "none"],
+      "description": "Test runner to use for unit tests.",
+      "default": "jest"
+    },
+    "e2eTestRunner": {
+      "type": "string",
+      "enum": ["cypress", "playwright", "none"],
+      "description": "Test runner to use for end to end (E2E) tests.",
+      "x-prompt": "Which E2E test runner would you like to use?",
+      "default": "cypress"
+    },
+    "tags": {
+      "type": "string",
+      "description": "Add tags to the application (used for linting).",
+      "alias": "t"
+    },
+    "pascalCaseFiles": {
+      "type": "boolean",
+      "description": "Use pascal case component file name (e.g. App.tsx).",
+      "alias": "P",
+      "default": false
+    },
+    "classComponent": {
+      "type": "boolean",
+      "description": "Use class components instead of functional component.",
+      "alias": "C",
+      "default": false
+    },
+    "js": {
+      "type": "boolean",
+      "description": "Generate JavaScript files rather than TypeScript files.",
+      "default": false
+    },
+    "globalCss": {
+      "type": "boolean",
+      "description": "Default is false. When true, the component is generated with *.css/*.scss instead of *.module.css/*.module.scss",
+      "default": false
+    },
+    "strict": {
+      "type": "boolean",
+      "description": "Creates an application with strict mode and strict type checking",
+      "default": true
+    },
+    "setParserOptionsProject": {
+      "type": "boolean",
+      "description": "Whether or not to configure the ESLint \"parserOptions.project\" option. We do not do this by default for lint performance reasons.",
+      "default": false
+    },
+    "compiler": {
+      "type": "string",
+      "description": "The compiler to use",
+      "enum": ["babel", "swc"],
+      "default": "babel"
+    },
+    "remotes": {
+      "type": "array",
+      "description": "A list of remote application names that the host application should consume.",
+      "default": [],
+      "x-priority": "important"
+    },
+    "devServerPort": {
+      "type": "number",
+      "description": "The port for the dev server of the remote app.",
+      "default": 4200,
+      "x-priority": "important"
+    },
+    "ssr": {
+      "description": "Whether to configure SSR for the host application",
+      "type": "boolean",
+      "default": false
+    },
+    "minimal": {
+      "description": "Generate a React app with a minimal setup. No nx starter template.",
+      "type": "boolean",
+      "default": false
+    },
+    "typescriptConfiguration": {
+      "type": "boolean",
+      "description": "Whether the module federation configuration and webpack configuration files should use TS. When --js is used, this flag is ignored.",
+      "default": true
+    }
+  },
+  "required": ["name"],
+  "additionalProperties": false
+}

package/src/generators/init/init.d.ts

@@ -0,0 +1,4 @@
+import { type GeneratorCallback, type Tree } from '@nx/devkit';
+import { InitSchema } from './schema';
+export declare function reactInitGenerator(host: Tree, schema: InitSchema): Promise<GeneratorCallback>;
+export default reactInitGenerator;

package/src/generators/init/init.js

@@ -0,0 +1,23 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.reactInitGenerator = void 0;
+const devkit_1 = require("@nx/devkit");
+const versions_1 = require("../../utils/versions");
+async function reactInitGenerator(host, schema) {
+    const tasks = [];
+    if (!schema.skipPackageJson) {
+        tasks.push((0, devkit_1.removeDependenciesFromPackageJson)(host, ['@nx/react'], []));
+        tasks.push((0, devkit_1.addDependenciesToPackageJson)(host, {
+            react: versions_1.reactVersion,
+            'react-dom': versions_1.reactDomVersion,
+        }, {
+            '@nx/react': versions_1.nxVersion,
+        }, undefined, schema.keepExistingVersions));
+    }
+    if (!schema.skipFormat) {
+        await (0, devkit_1.formatFiles)(host);
+    }
+    return (0, devkit_1.runTasksInSerial)(...tasks);
+}
+exports.reactInitGenerator = reactInitGenerator;
+exports.default = reactInitGenerator;

package/src/generators/init/schema.d.ts

@@ -0,0 +1,5 @@
+export interface InitSchema {
+  skipFormat?: boolean;
+  skipPackageJson?: boolean;
+  keepExistingVersions?: boolean;
+}