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

package/src/generators/redux/redux.js

@@ -0,0 +1,143 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.reduxGeneratorInternal = exports.reduxGenerator = void 0;
+const path = require("path");
+const ast_utils_1 = require("../../utils/ast-utils");
+const versions_1 = require("../../utils/versions");
+const devkit_1 = require("@nx/devkit");
+const js_1 = require("@nx/js");
+const ensure_typescript_1 = require("@nx/js/src/utils/typescript/ensure-typescript");
+const artifact_name_and_directory_utils_1 = require("@nx/devkit/src/generators/artifact-name-and-directory-utils");
+let tsModule;
+async function reduxGenerator(host, schema) {
+    return reduxGeneratorInternal(host, {
+        nameAndDirectoryFormat: 'derived',
+        ...schema,
+    });
+}
+exports.reduxGenerator = reduxGenerator;
+async function reduxGeneratorInternal(host, schema) {
+    const options = await normalizeOptions(host, schema);
+    generateReduxFiles(host, options);
+    addExportsToBarrel(host, options);
+    const installTask = addReduxPackageDependencies(host);
+    addStoreConfiguration(host, options);
+    updateReducerConfiguration(host, options);
+    await (0, devkit_1.formatFiles)(host);
+    return installTask;
+}
+exports.reduxGeneratorInternal = reduxGeneratorInternal;
+function generateReduxFiles(host, options) {
+    (0, devkit_1.generateFiles)(host, (0, devkit_1.joinPathFragments)(__dirname, './files'), options.directory, {
+        ...options,
+        tmpl: '',
+    });
+    if (options.js) {
+        (0, devkit_1.toJS)(host);
+    }
+}
+function addReduxPackageDependencies(host) {
+    return (0, devkit_1.addDependenciesToPackageJson)(host, {
+        '@reduxjs/toolkit': versions_1.reduxjsToolkitVersion,
+        'react-redux': versions_1.reactReduxVersion,
+    }, {});
+}
+function addExportsToBarrel(host, options) {
+    if (!tsModule) {
+        tsModule = (0, ensure_typescript_1.ensureTypescript)();
+    }
+    const indexFilePath = path.join(options.projectSourcePath, options.js ? 'index.js' : 'index.ts');
+    const indexSource = host.read(indexFilePath, 'utf-8');
+    if (indexSource !== null) {
+        const indexSourceFile = tsModule.createSourceFile(indexFilePath, indexSource, tsModule.ScriptTarget.Latest, true);
+        const statePath = options.directory
+            ? `./lib/${options.directory}/${options.fileName}`
+            : `./lib/${options.fileName}`;
+        const changes = (0, devkit_1.applyChangesToString)(indexSource, (0, ast_utils_1.addImport)(indexSourceFile, `export * from '${statePath}.slice';`));
+        host.write(indexFilePath, changes);
+    }
+}
+function addStoreConfiguration(host, options) {
+    if (!options.appProjectSourcePath) {
+        return;
+    }
+    const mainSource = host.read(options.appMainFilePath, 'utf-8');
+    if (!mainSource.includes('redux')) {
+        const mainSourceFile = tsModule.createSourceFile(options.appMainFilePath, mainSource, tsModule.ScriptTarget.Latest, true);
+        const changes = (0, devkit_1.applyChangesToString)(mainSource, (0, ast_utils_1.addReduxStoreToMain)(options.appMainFilePath, mainSourceFile));
+        host.write(options.appMainFilePath, changes);
+    }
+}
+function updateReducerConfiguration(host, options) {
+    if (!tsModule) {
+        tsModule = (0, ensure_typescript_1.ensureTypescript)();
+    }
+    if (!options.appProjectSourcePath) {
+        return;
+    }
+    const mainSource = host.read(options.appMainFilePath, 'utf-8');
+    const mainSourceFile = tsModule.createSourceFile(options.appMainFilePath, mainSource, tsModule.ScriptTarget.Latest, true);
+    const changes = (0, devkit_1.applyChangesToString)(mainSource, (0, ast_utils_1.updateReduxStore)(options.appMainFilePath, mainSourceFile, {
+        keyName: `${options.constantName}_FEATURE_KEY`,
+        reducerName: `${options.propertyName}Reducer`,
+        modulePath: `${options.projectModulePath}`,
+    }));
+    host.write(options.appMainFilePath, changes);
+}
+async function normalizeOptions(host, options) {
+    const { artifactName: name, directory, fileName, project: projectName, } = await (0, artifact_name_and_directory_utils_1.determineArtifactNameAndDirectoryOptions)(host, {
+        artifactType: 'slice',
+        callingGenerator: '@nx/react:redux',
+        name: options.name,
+        directory: options.directory,
+        derivedDirectory: options.directory,
+        flat: true,
+        nameAndDirectoryFormat: options.nameAndDirectoryFormat,
+        project: options.project,
+        fileExtension: 'tsx',
+    });
+    let appProjectSourcePath;
+    let appMainFilePath;
+    const extraNames = (0, devkit_1.names)(name);
+    const projects = (0, devkit_1.getProjects)(host);
+    const project = projects.get(projectName);
+    const { sourceRoot, projectType } = project;
+    const tsConfigJson = (0, devkit_1.readJson)(host, (0, js_1.getRootTsConfigPathInTree)(host));
+    const tsPaths = tsConfigJson.compilerOptions
+        ? tsConfigJson.compilerOptions.paths || {}
+        : {};
+    const modulePath = projectType === 'application'
+        ? options.directory
+            ? `./app/${options.directory}/${extraNames.fileName}.slice`
+            : `./app/${extraNames.fileName}.slice`
+        : Object.keys(tsPaths).find((k) => tsPaths[k].some((s) => s.includes(sourceRoot)));
+    // If --project is set to an app, automatically configure store
+    // for it without needing to specify --appProject.
+    options.appProject =
+        options.appProject ||
+            (projectType === 'application' ? projectName : undefined);
+    if (options.appProject) {
+        const appConfig = projects.get(options.appProject);
+        if (appConfig.projectType !== 'application') {
+            throw new Error(`Expected ${options.appProject} to be an application but got ${appConfig.projectType}`);
+        }
+        appProjectSourcePath = appConfig.sourceRoot;
+        appMainFilePath = path.join(appProjectSourcePath, options.js ? 'main.js' : 'main.tsx');
+        if (!host.exists(appMainFilePath)) {
+            throw new Error(`Could not find ${appMainFilePath} during store configuration`);
+        }
+    }
+    return {
+        ...options,
+        ...extraNames,
+        fileName,
+        constantName: (0, devkit_1.names)(options.name).constantName.toUpperCase(),
+        directory,
+        projectType,
+        projectSourcePath: sourceRoot,
+        projectModulePath: modulePath,
+        appProjectSourcePath,
+        appMainFilePath,
+    };
+}
+exports.default = reduxGenerator;

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

@@ -0,0 +1,23 @@
+export interface Schema {
+  name: string;
+  /**
+   * @deprecated Provide the `directory` option instead and use the `as-provided` format. The project will be determined from the directory provided. It will be removed in Nx v19.
+   */
+  project?: string;
+  directory?: string;
+  appProject?: string;
+  js?: string;
+  nameAndDirectoryFormat?: 'as-provided' | 'derived';
+}
+
+interface NormalizedSchema extends Schema {
+  projectType: string;
+  projectSourcePath: string;
+  projectModulePath: string;
+  appProjectSourcePath: string;
+  appMainFilePath: string;
+  className: string;
+  constantName: string;
+  propertyName: string;
+  fileName: string;
+}

package/src/generators/redux/schema.json

@@ -0,0 +1,51 @@
+{
+  "$schema": "https://json-schema.org/schema",
+  "cli": "nx",
+  "$id": "redux",
+  "title": "Create Redux state",
+  "description": "Create a Redux state slice for a React project.",
+  "type": "object",
+  "properties": {
+    "name": {
+      "type": "string",
+      "description": "Redux slice name.",
+      "$default": {
+        "$source": "argv",
+        "index": 0
+      },
+      "x-priority": "important"
+    },
+    "project": {
+      "type": "string",
+      "description": "The name of the project to add the slice to. If it is an application, then the store configuration will be updated too.",
+      "alias": "p",
+      "$default": {
+        "$source": "projectName"
+      },
+      "x-deprecated": "Provide the `directory` option instead and use the `as-provided` format. The project will be determined from the directory provided. It will be removed in Nx v19."
+    },
+    "directory": {
+      "type": "string",
+      "alias": "dir",
+      "default": "",
+      "description": "The directory at which to create the Redux files. When `--nameAndDirectoryFormat=as-provided`, it will be relative to the current working directory. Otherwise, it will be relative to the project root.",
+      "x-priority": "important"
+    },
+    "nameAndDirectoryFormat": {
+      "description": "Whether to generate the component in the directory as provided, relative to the current working directory and ignoring the project (`as-provided`) or generate it using the project and directory relative to the workspace root (`derived`).",
+      "type": "string",
+      "enum": ["as-provided", "derived"]
+    },
+    "appProject": {
+      "type": "string",
+      "description": "The application project to add the slice to.",
+      "alias": "a"
+    },
+    "js": {
+      "type": "boolean",
+      "description": "Generate JavaScript files rather than TypeScript files.",
+      "default": false
+    }
+  },
+  "required": ["name"]
+}

package/src/generators/remote/files/common/src/main.js__tmpl__

@@ -0,0 +1 @@
+import('./bootstrap');

package/src/generators/remote/files/common/src/remote-entry.js__tmpl__

@@ -0,0 +1 @@
+export { default } from './app/app';

package/src/generators/remote/files/common-ts/src/main.ts__tmpl__

@@ -0,0 +1 @@
+import('./bootstrap');

package/src/generators/remote/files/common-ts/src/remote-entry.ts__tmpl__

@@ -0,0 +1 @@
+export { default } from './app/app';

package/src/generators/remote/files/module-federation/module-federation.config.js__tmpl__

@@ -0,0 +1,9 @@
+module.exports = {
+   name: '<%= projectName %>',
+   <% if (dynamic) { %>
+   library: { type: 'var', name: '<%= projectName %>'},
+   <% } %>
+   exposes: {
+     './Module': './src/remote-entry.<%= js ? 'js' : 'ts' %>',
+   },
+};

package/src/generators/remote/files/module-federation/webpack.config.js__tmpl__

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

package/src/generators/remote/files/module-federation/webpack.config.prod.js__tmpl__

@@ -0,0 +1 @@
+module.exports = require('./webpack.config');

package/src/generators/remote/files/module-federation-ssr/module-federation.server.config.js__tmpl__

@@ -0,0 +1,6 @@
+module.exports = {
+    name: '<%= projectName %>',
+   exposes: {
+     './Module': '<%= appProjectRoot %>/src/remote-entry.<%= js ? 'js' : 'ts' %>',
+   },
+};

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

@@ -0,0 +1,45 @@
+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 serverDist = path.join(process.cwd(), '<%= serverBuildOutputPath %>');
+const indexPath = path.join(browserDist, 'index.html');
+
+app.use(cors());
+
+// Client-side static bundles
+app.get(
+  '*.*',
+  express.static(browserDist, {
+    maxAge: '1y',
+  })
+);
+
+// Static bundles for server-side module federation
+app.use('/server',
+  express.static(serverDist, {
+    maxAge: '1y'
+  })
+);
+
+app.use('*', handleRequest(indexPath));
+
+const server = app.listen(port, () => {
+  console.log(`Express server listening on http://localhost:${port}`);
+
+  /**
+   * DO NOT REMOVE IF USING @nx/react:module-federation-dev-ssr executor
+   * to serve your Host application with this Remote application.
+   * This message allows Nx to determine when the Remote is ready to be
+   * consumed by the Host.
+   */
+  process.send?.('nx.server.ready');
+});
+
+server.on('error', console.error);

package/src/generators/remote/files/module-federation-ssr/webpack.server.config.js__tmpl__

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

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

@@ -0,0 +1,10 @@
+import {ModuleFederationConfig} from '@nx/webpack';
+
+const config: ModuleFederationConfig = {
+    name: '<%= projectName %>',
+    exposes: {
+        './Module': '<%= appProjectRoot %>/src/remote-entry.<%= js ? 'js' : 'ts' %>',
+    },
+};
+
+export default config;

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

@@ -0,0 +1,45 @@
+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 serverDist = path.join(process.cwd(), '<%= serverBuildOutputPath %>');
+const indexPath = path.join(browserDist, 'index.html');
+
+app.use(cors());
+
+// Client-side static bundles
+app.get(
+  '*.*',
+  express.static(browserDist, {
+    maxAge: '1y',
+  })
+);
+
+// Static bundles for server-side module federation
+app.use('/server',
+  express.static(serverDist, {
+    maxAge: '1y'
+  })
+);
+
+app.use('*', handleRequest(indexPath));
+
+const server = app.listen(port, () => {
+  console.log(`Express server listening on http://localhost:${port}`);
+
+  /**
+   * DO NOT REMOVE IF USING @nx/react:module-federation-dev-ssr executor
+   * to serve your Host application with this Remote application.
+   * This message allows Nx to determine when the Remote is ready to be
+   * consumed by the Host.
+   */
+  process.send?.('nx.server.ready');
+});
+
+server.on('error', console.error);

package/src/generators/remote/files/module-federation-ssr-ts/tsconfig.lint.json__tmpl__

@@ -0,0 +1,19 @@
+{
+  "extends": "./tsconfig.json",
+  "compilerOptions": {
+    "outDir": "../../dist/out-tsc",
+    "types": [
+        "node",
+        "@nx/react/typings/cssmodule.d.ts",
+        "@nx/react/typings/image.d.ts"
+    ]
+  },
+  "include": [
+    "src/**/*.js",
+    "src/**/*.jsx",
+    "src/**/*.ts",
+    "src/**/*.tsx",
+    "webpack.config.ts",
+    "webpack.prod.config.ts"
+  ]
+}

package/src/generators/remote/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.server.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/remote/files/module-federation-ts/module-federation.config.ts__tmpl__

@@ -0,0 +1,13 @@
+import {ModuleFederationConfig} from '@nx/webpack';
+
+const config: ModuleFederationConfig = {
+    name: '<%= projectName %>',
+    <% if (dynamic) { %>
+   library: { type: 'var', name: '<%= projectName %>'},
+   <% } %>
+    exposes: {
+        './Module': './src/remote-entry.<%= js ? 'js' : 'ts' %>',
+    },
+};
+
+export default config;

package/src/generators/remote/files/module-federation-ts/tsconfig.lint.json__tmpl__

@@ -0,0 +1,19 @@
+{
+  "extends": "./tsconfig.json",
+  "compilerOptions": {
+    "outDir": "../../dist/out-tsc",
+    "types": [
+        "node",
+        "@nx/react/typings/cssmodule.d.ts",
+        "@nx/react/typings/image.d.ts"
+    ]
+  },
+  "include": [
+    "src/**/*.js",
+    "src/**/*.jsx",
+    "src/**/*.ts",
+    "src/**/*.tsx",
+    "webpack.config.ts",
+    "webpack.prod.config.ts"
+  ]
+}

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

@@ -0,0 +1 @@
+export default require('./webpack.config');

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

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

package/src/generators/remote/lib/add-remote-to-dynamic-host.d.ts

@@ -0,0 +1,2 @@
+import { Tree } from '@nx/devkit';
+export declare function addRemoteToDynamicHost(tree: Tree, remoteName: string, remotePort: number, pathToMfManifest: string): void;

package/src/generators/remote/lib/add-remote-to-dynamic-host.js

@@ -0,0 +1,11 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.addRemoteToDynamicHost = void 0;
+function addRemoteToDynamicHost(tree, remoteName, remotePort, pathToMfManifest) {
+    const current = tree.read(pathToMfManifest, 'utf8');
+    tree.write(pathToMfManifest, JSON.stringify({
+        ...JSON.parse(current),
+        [remoteName]: `http://localhost:${remotePort}`,
+    }));
+}
+exports.addRemoteToDynamicHost = addRemoteToDynamicHost;

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

@@ -0,0 +1,4 @@
+import type { GeneratorCallback, Tree } from '@nx/devkit';
+import { NormalizedSchema } from '../../application/schema';
+import type { Schema } from '../schema';
+export declare function setupSsrForRemote(tree: Tree, options: NormalizedSchema<Schema>, appName: string): Promise<GeneratorCallback>;

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

@@ -0,0 +1,40 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.setupSsrForRemote = void 0;
+const devkit_1 = require("@nx/devkit");
+const versions_1 = require("../../../utils/versions");
+async function setupSsrForRemote(tree, options, appName) {
+    const tasks = [];
+    const project = (0, devkit_1.readProjectConfiguration)(tree, appName);
+    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,
+        appName,
+        tmpl: '',
+        browserBuildOutputPath: project.targets.build.options.outputPath,
+        serverBuildOutputPath: project.targets.server.options.outputPath,
+    });
+    // For hosts to use when running remotes in static mode.
+    const originalOutputPath = project.targets.build?.options?.outputPath;
+    const serverOptions = project.targets.server?.options;
+    const serverOutputPath = serverOptions?.outputPath ??
+        (0, devkit_1.joinPathFragments)(originalOutputPath, 'server');
+    const serverOutputName = serverOptions?.outputFileName ?? 'main.js';
+    project.targets['serve-static'] = {
+        dependsOn: ['build', 'server'],
+        executor: 'nx:run-commands',
+        defaultConfiguration: 'development',
+        options: {
+            command: `PORT=${options.devServerPort ?? 4200} node ${(0, devkit_1.joinPathFragments)(serverOutputPath, serverOutputName)}`,
+        },
+    };
+    (0, devkit_1.updateProjectConfiguration)(tree, appName, project);
+    const installTask = (0, devkit_1.addDependenciesToPackageJson)(tree, {
+        '@module-federation/node': versions_1.moduleFederationNodeVersion,
+    }, {});
+    tasks.push(installTask);
+    return (0, devkit_1.runTasksInSerial)(...tasks);
+}
+exports.setupSsrForRemote = setupSsrForRemote;

package/src/generators/remote/lib/setup-tspath-for-remote.d.ts

@@ -0,0 +1,3 @@
+import type { Tree } from '@nx/devkit';
+import type { Schema } from '../schema';
+export declare function setupTspathForRemote(tree: Tree, options: Schema): void;

package/src/generators/remote/lib/setup-tspath-for-remote.js

@@ -0,0 +1,15 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.setupTspathForRemote = void 0;
+const devkit_1 = require("@nx/devkit");
+const js_1 = require("@nx/js");
+const maybe_js_1 = require("../../../utils/maybe-js");
+function setupTspathForRemote(tree, options) {
+    const project = (0, devkit_1.readProjectConfiguration)(tree, options.name);
+    const exportPath = (0, maybe_js_1.maybeJs)(options, './src/remote-entry.ts');
+    const exportName = 'Module';
+    (0, js_1.addTsConfigPath)(tree, `${options.name}/${exportName}`, [
+        (0, devkit_1.joinPathFragments)(project.root, exportPath),
+    ]);
+}
+exports.setupTspathForRemote = setupTspathForRemote;

package/src/generators/remote/lib/update-host-with-remote.d.ts

@@ -0,0 +1,2 @@
+import { Tree } from '@nx/devkit';
+export declare function updateHostWithRemote(host: Tree, hostName: string, remoteName: string): void;

package/src/generators/remote/lib/update-host-with-remote.js

@@ -0,0 +1,64 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.updateHostWithRemote = void 0;
+const devkit_1 = require("@nx/devkit");
+const ast_utils_1 = require("../../../module-federation/ast-utils");
+const ensure_typescript_1 = require("@nx/js/src/utils/typescript/ensure-typescript");
+let tsModule;
+function updateHostWithRemote(host, hostName, remoteName) {
+    if (!tsModule) {
+        tsModule = (0, ensure_typescript_1.ensureTypescript)();
+    }
+    const hostConfig = (0, devkit_1.readProjectConfiguration)(host, hostName);
+    let moduleFederationConfigPath = (0, devkit_1.joinPathFragments)(hostConfig.root, 'module-federation.config.js');
+    if (!host.exists(moduleFederationConfigPath)) {
+        moduleFederationConfigPath = (0, devkit_1.joinPathFragments)(hostConfig.root, 'module-federation.config.ts');
+    }
+    const remoteDefsPath = (0, devkit_1.joinPathFragments)(hostConfig.sourceRoot, 'remotes.d.ts');
+    const appComponentPath = findAppComponentPath(host, hostConfig.sourceRoot);
+    if (host.exists(moduleFederationConfigPath)) {
+        // find the host project path
+        // Update remotes inside ${host_path}/src/remotes.d.ts
+        let sourceCode = host.read(moduleFederationConfigPath).toString();
+        const source = tsModule.createSourceFile(moduleFederationConfigPath, sourceCode, tsModule.ScriptTarget.Latest, true);
+        host.write(moduleFederationConfigPath, (0, devkit_1.applyChangesToString)(sourceCode, (0, ast_utils_1.addRemoteToConfig)(source, remoteName)));
+    }
+    else {
+        // TODO(jack): Point to the nx.dev guide when ready.
+        devkit_1.logger.warn(`Could not find configuration at ${moduleFederationConfigPath}. Did you generate this project with "@nx/react:host"?`);
+    }
+    if (host.exists(remoteDefsPath)) {
+        let sourceCode = host.read(remoteDefsPath).toString();
+        const source = tsModule.createSourceFile(moduleFederationConfigPath, sourceCode, tsModule.ScriptTarget.Latest, true);
+        host.write(remoteDefsPath, (0, devkit_1.applyChangesToString)(sourceCode, (0, ast_utils_1.addRemoteDefinition)(source, remoteName)));
+    }
+    else {
+        devkit_1.logger.warn(`Could not find remote definitions at ${remoteDefsPath}. Did you generate this project with "@nx/react:host"?`);
+    }
+    if (host.exists(appComponentPath)) {
+        let sourceCode = host.read(appComponentPath).toString();
+        const source = tsModule.createSourceFile(moduleFederationConfigPath, sourceCode, tsModule.ScriptTarget.Latest, true);
+        host.write(appComponentPath, (0, devkit_1.applyChangesToString)(sourceCode, (0, ast_utils_1.addRemoteRoute)(source, (0, devkit_1.names)(remoteName))));
+    }
+    else {
+        devkit_1.logger.warn(`Could not find app component at ${appComponentPath}. Did you generate this project with "@nx/react:host"?`);
+    }
+}
+exports.updateHostWithRemote = updateHostWithRemote;
+function findAppComponentPath(host, sourceRoot) {
+    const locations = [
+        'app/app.tsx',
+        'app/App.tsx',
+        'app/app.js',
+        'app/App.js',
+        'app.tsx',
+        'App.tsx',
+        'app.js',
+        'App.js',
+    ];
+    for (const loc of locations) {
+        if (host.exists((0, devkit_1.joinPathFragments)(sourceRoot, loc))) {
+            return (0, devkit_1.joinPathFragments)(sourceRoot, loc);
+        }
+    }
+}

package/src/generators/remote/remote.d.ts

@@ -0,0 +1,7 @@
+import { GeneratorCallback, Tree } from '@nx/devkit';
+import { NormalizedSchema } from '../application/schema';
+import { Schema } from './schema';
+export declare function addModuleFederationFiles(host: Tree, options: NormalizedSchema<Schema>): void;
+export declare function remoteGenerator(host: Tree, schema: Schema): Promise<GeneratorCallback>;
+export declare function remoteGeneratorInternal(host: Tree, schema: Schema): Promise<GeneratorCallback>;
+export default remoteGenerator;