@nx/react 24.0.0-beta.2 → 24.0.0-beta.3

package/dist/src/generators/remote/remote.js

@@ -1,201 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.addModuleFederationFiles = addModuleFederationFiles;
-exports.remoteGenerator = remoteGenerator;
-const tslib_1 = require("tslib");
-const internal_1 = require("@nx/devkit/internal");
-const assert_supported_react_version_1 = require("../../utils/assert-supported-react-version");
-const internal_2 = require("@nx/eslint/internal");
-const devkit_1 = require("@nx/devkit");
-const path_1 = require("path");
-const js_1 = require("@nx/js");
-const internal_3 = require("@nx/js/internal");
-const update_module_federation_project_1 = require("../../rules/update-module-federation-project");
-const add_mf_env_to_inputs_1 = require("../../utils/add-mf-env-to-inputs");
-const normalize_remote_1 = require("../../utils/normalize-remote");
-const find_free_port_1 = require("../application/lib/find-free-port");
-const maybe_js_1 = require("../../utils/maybe-js");
-const module_federation_deprecation_1 = require("../../utils/module-federation-deprecation");
-const versions_1 = require("../../utils/versions");
-const application_1 = tslib_1.__importDefault(require("../application/application"));
-const create_application_files_1 = require("../application/lib/create-application-files");
-const normalize_options_1 = require("../application/lib/normalize-options");
-const setup_ssr_1 = tslib_1.__importDefault(require("../setup-ssr/setup-ssr"));
-const add_remote_to_dynamic_host_1 = require("./lib/add-remote-to-dynamic-host");
-const setup_package_json_exports_for_remote_1 = require("./lib/setup-package-json-exports-for-remote");
-const setup_ssr_for_remote_1 = require("./lib/setup-ssr-for-remote");
-const setup_tspath_for_remote_1 = require("./lib/setup-tspath-for-remote");
-const update_host_with_remote_1 = require("./lib/update-host-with-remote");
-function addModuleFederationFiles(host, options) {
-    const templateVariables = options.bundler === 'rspack'
-        ? {
-            ...(0, create_application_files_1.getDefaultTemplateVariables)(host, options),
-            rspackPluginOptions: {
-                ...(0, create_application_files_1.createNxRspackPluginOptions)(options, (0, devkit_1.offsetFromRoot)(options.appProjectRoot), false),
-                mainServer: `./server.ts`,
-            },
-        }
-        : {
-            ...(0, devkit_1.names)(options.projectName),
-            ...options,
-            tmpl: '',
-        };
-    (0, devkit_1.generateFiles)(host, (0, path_1.join)(__dirname, `./files/${options.js
-        ? options.bundler === 'rspack'
-            ? 'rspack-common'
-            : 'common'
-        : 'common-ts'}`), options.appProjectRoot, templateVariables);
-    const pathToModuleFederationFiles = options.typescriptConfiguration
-        ? `${options.bundler === 'rspack' ? 'rspack-' : 'webpack-'}module-federation-ts`
-        : `${options.bundler === 'rspack' ? 'rspack-' : 'webpack-'}module-federation`;
-    (0, devkit_1.generateFiles)(host, (0, path_1.join)(__dirname, `./files/${pathToModuleFederationFiles}`), options.appProjectRoot, templateVariables);
-    if (options.typescriptConfiguration) {
-        const pathToBundlerConfig = (0, devkit_1.joinPathFragments)(options.appProjectRoot, options.bundler === 'rspack' ? 'rspack.config.js' : 'webpack.config.js');
-        const pathToWebpackProdConfig = (0, devkit_1.joinPathFragments)(options.appProjectRoot, options.bundler === 'rspack'
-            ? 'rspack.config.prod.js'
-            : 'webpack.config.prod.js');
-        if (host.exists(pathToBundlerConfig)) {
-            host.delete(pathToBundlerConfig);
-        }
-        if (host.exists(pathToWebpackProdConfig)) {
-            host.delete(pathToWebpackProdConfig);
-        }
-        // Delete TypeScript prod config in TS solution setup - not needed in Crystal
-        if ((0, internal_3.isUsingTsSolutionSetup)(host)) {
-            const pathToTsProdConfig = (0, devkit_1.joinPathFragments)(options.appProjectRoot, options.bundler === 'rspack'
-                ? 'rspack.config.prod.ts'
-                : 'webpack.config.prod.ts');
-            if (host.exists(pathToTsProdConfig)) {
-                host.delete(pathToTsProdConfig);
-            }
-        }
-    }
-}
-async function remoteGenerator(host, schema) {
-    (0, assert_supported_react_version_1.assertSupportedReactVersion)(host);
-    (0, module_federation_deprecation_1.warnReactRemoteGeneratorDeprecation)();
-    const tasks = [];
-    const name = await (0, normalize_remote_1.normalizeRemoteName)(host, schema.name, schema);
-    const options = {
-        ...(await (0, normalize_options_1.normalizeOptions)(host, {
-            ...schema,
-            name,
-        })),
-        // when js is set to true, we want to use the js configuration
-        js: schema.js ?? false,
-        typescriptConfiguration: schema.js
-            ? false
-            : (schema.typescriptConfiguration ?? true),
-        dynamic: schema.dynamic ?? false,
-        // TODO(colum): remove when Webpack MF works with Crystal
-        addPlugin: !schema.bundler || schema.bundler === 'rspack' ? true : false,
-        bundler: schema.bundler ?? 'rspack',
-        // Unlike a plain app, a remote needs a port of its own: updateModuleFederationProject
-        // writes it to the serve target, and a dynamic remote's is also recorded in the host
-        // manifest. findFreePort reads the ports already claimed, so remotes step past each other.
-        port: schema.port ?? schema.devServerPort ?? (0, find_free_port_1.findFreePort)(host),
-    };
-    if (options.dynamic) {
-        // Dynamic remotes generate with library { type: 'var' } by default.
-        // We need to ensure that the remote name is a valid variable name.
-        const isValidRemote = (0, js_1.isValidVariable)(options.projectName);
-        if (!isValidRemote.isValid) {
-            throw new Error(`Invalid remote name provided: ${options.projectName}. ${isValidRemote.message}`);
-        }
-    }
-    await (0, internal_1.ensureRootProjectName)(options, 'application');
-    const isValidRemote = (0, js_1.isValidVariable)(options.projectName);
-    if (!isValidRemote.isValid) {
-        throw new Error(`Invalid remote name provided: ${options.projectName}. ${isValidRemote.message}`);
-    }
-    const initAppTask = await (0, application_1.default)(host, {
-        ...options,
-        name: options.projectName,
-        skipFormat: true,
-    });
-    tasks.push(initAppTask);
-    // In TS solution setup, update package.json to use simple name instead of scoped name
-    if ((0, internal_3.isUsingTsSolutionSetup)(host)) {
-        const remotePackageJsonPath = (0, devkit_1.joinPathFragments)(options.appProjectRoot, 'package.json');
-        if (host.exists(remotePackageJsonPath)) {
-            (0, devkit_1.updateJson)(host, remotePackageJsonPath, (json) => {
-                json.name = options.projectName;
-                return json;
-            });
-        }
-    }
-    if (options.host) {
-        (0, update_host_with_remote_1.updateHostWithRemote)(host, options.host, options.projectName);
-    }
-    // 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, path_1.join)(options.appProjectRoot, (0, maybe_js_1.maybeJs)({ js: options.js, useJsx: options.bundler === 'rspack' }, 'src/main.tsx')), (0, path_1.join)(options.appProjectRoot, (0, maybe_js_1.maybeJs)({ js: options.js, useJsx: options.bundler === 'rspack' }, 'src/bootstrap.tsx')));
-    addModuleFederationFiles(host, options);
-    (0, update_module_federation_project_1.updateModuleFederationProject)(host, options);
-    // Conditionally setup TS path or package.json exports based on TS solution setup
-    if ((0, internal_3.isUsingTsSolutionSetup)(host)) {
-        (0, setup_package_json_exports_for_remote_1.setupPackageJsonExportsForRemote)(host, options);
-    }
-    else {
-        (0, setup_tspath_for_remote_1.setupTspathForRemote)(host, options);
-    }
-    if (options.ssr) {
-        if (options.bundler !== 'rspack') {
-            const setupSsrTask = await (0, setup_ssr_1.default)(host, {
-                project: options.projectName,
-                serverPort: options.port,
-                skipFormat: true,
-                bundler: options.bundler,
-            });
-            tasks.push(setupSsrTask);
-        }
-        const setupSsrForRemoteTask = await (0, setup_ssr_for_remote_1.setupSsrForRemote)(host, options, options.projectName);
-        tasks.push(setupSsrForRemoteTask);
-        const projectConfig = (0, devkit_1.readProjectConfiguration)(host, options.projectName);
-        if (options.bundler !== 'rspack') {
-            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 (!(0, internal_2.isTypedLintingEnabled)(options)) {
-        host.delete((0, devkit_1.joinPathFragments)(options.appProjectRoot, 'tsconfig.lint.json'));
-    }
-    if (options.host && options.bundler === 'rspack') {
-        const projectConfig = (0, devkit_1.readProjectConfiguration)(host, options.projectName);
-        projectConfig.targets.serve ??= {};
-        projectConfig.targets.serve.dependsOn ??= [];
-        projectConfig.targets.serve.dependsOn.push(`${options.host}:serve`);
-        (0, devkit_1.updateProjectConfiguration)(host, options.projectName, projectConfig);
-    }
-    if (options.host && options.dynamic) {
-        const hostConfig = (0, devkit_1.readProjectConfiguration)(host, schema.host);
-        const pathToMFManifest = (0, devkit_1.joinPathFragments)((0, internal_3.getProjectSourceRoot)(hostConfig, host), 'assets/module-federation.manifest.json');
-        (0, add_remote_to_dynamic_host_1.addRemoteToDynamicHost)(host, options.projectName, options.port, pathToMFManifest);
-    }
-    (0, add_mf_env_to_inputs_1.addMfEnvToTargetDefaultInputs)(host, options.bundler);
-    const installTask = (0, devkit_1.addDependenciesToPackageJson)(host, {}, {
-        '@module-federation/enhanced': versions_1.moduleFederationEnhancedVersion,
-        '@nx/web': versions_1.nxVersion,
-        '@nx/module-federation': versions_1.nxVersion,
-        // The webpack path also generates a `serve-static` target running the
-        // `module-federation-static-server` executor, which proxies via express.
-        ...(options.bundler !== 'rspack'
-            ? {
-                express: versions_1.expressVersion,
-                'http-proxy-middleware': versions_1.httpProxyMiddlewareVersion,
-            }
-            : {}),
-    }, undefined, true);
-    tasks.push(installTask);
-    // The TS config templates use extensionless relative imports and
-    // `__dirname`, which Node's native type stripping cannot load.
-    if (options.typescriptConfiguration) {
-        tasks.push((0, internal_3.addSwcRegisterDependencies)(host));
-    }
-    if (!options.skipFormat) {
-        await (0, devkit_1.formatFiles)(host);
-    }
-    return (0, devkit_1.runTasksInSerial)(...tasks);
-}
-exports.default = remoteGenerator;

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

@@ -1,39 +0,0 @@
-import type { LinterType } from '@nx/js';
-import type { SupportedStyles } from '../../../typings/style';
-import type { NormalizedSchema as ApplicationNormalizedSchema } from '../application/schema';
-
-export interface Schema {
-  classComponent?: boolean;
-  compiler?: 'babel' | 'swc';
-  port?: number;
-  /** @deprecated Use {@link Schema.port} instead. This option will be removed in Nx v24. */
-  devServerPort?: number;
-  directory: string;
-  e2eTestRunner: 'cypress' | 'playwright' | 'none';
-  globalCss?: boolean;
-  host?: string;
-  js?: boolean;
-  linter?: LinterType;
-  name?: string;
-  routing?: boolean;
-  enableTypedLinting?: boolean;
-  /**
-   * @deprecated Use `enableTypedLinting` instead. This option will be removed in Nx v24.
-   */
-  setParserOptionsProject?: boolean;
-  skipFormat: boolean;
-  skipNxJson?: boolean;
-  skipPackageJson?: boolean;
-  ssr?: boolean;
-  strict?: boolean;
-  style: SupportedStyles;
-  tags?: string;
-  unitTestRunner: 'jest' | 'vitest' | 'none';
-  typescriptConfiguration?: boolean;
-  dynamic?: boolean;
-  bundler?: 'rspack' | 'webpack';
-}
-
-export interface NormalizedSchema extends ApplicationNormalizedSchema {
-  typescriptConfiguration: boolean;
-}

package/dist/src/generators/remote/schema.json

@@ -1,173 +0,0 @@
-{
-  "$schema": "https://json-schema.org/schema",
-  "$id": "GeneratorReactRemote",
-  "cli": "nx",
-  "title": "Generate Module Federation Setup for React Producer (Remote) App",
-  "description": "Create Module Federation configuration files for given React Producer (Remote) Application.",
-  "type": "object",
-  "properties": {
-    "directory": {
-      "description": "The directory of the new application.",
-      "type": "string",
-      "alias": "dir",
-      "$default": {
-        "$source": "argv",
-        "index": 0
-      },
-      "x-prompt": "Which directory do you want to create the application in?"
-    },
-    "name": {
-      "type": "string",
-      "description": "The name of the Producer (remote) application to generate the Module Federation configuration",
-      "pattern": "^[a-zA-Z][^:]*$",
-      "x-priority": "important"
-    },
-    "dynamic": {
-      "type": "boolean",
-      "description": "Should the Consumer (host) application use dynamic federation?",
-      "default": false,
-      "x-priority": "internal"
-    },
-    "style": {
-      "description": "The file extension to be used for style files.",
-      "type": "string",
-      "default": "css",
-      "alias": "s",
-      "enum": ["css", "scss", "none"],
-      "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": "none",
-            "label": "None"
-          }
-        ]
-      }
-    },
-    "linter": {
-      "description": "The tool to use for running lint checks. Defaults to the linter the workspace already uses.",
-      "type": "string",
-      "enum": ["eslint", "oxlint", "none"]
-    },
-    "routing": {
-      "type": "boolean",
-      "description": "Generate application with routes.",
-      "default": false
-    },
-    "skipFormat": {
-      "description": "Skip formatting files.",
-      "type": "boolean",
-      "default": false,
-      "x-priority": "internal"
-    },
-    "skipNxJson": {
-      "description": "Skip updating nx.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", "vitest", "none"],
-      "description": "Test runner to use for unit tests.",
-      "default": "jest"
-    },
-    "e2eTestRunner": {
-      "type": "string",
-      "enum": ["playwright", "cypress", "none"],
-      "description": "Test runner to use for end to end (E2E) tests.",
-      "x-prompt": "Which E2E test runner would you like to use?",
-      "default": "playwright"
-    },
-    "tags": {
-      "type": "string",
-      "description": "Add tags to the application (used for linting).",
-      "alias": "t"
-    },
-    "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
-    },
-    "enableTypedLinting": {
-      "type": "boolean",
-      "description": "Whether to enable typed linting. For flat configs, this configures the recommended `parserOptions.projectService` and `tsconfigRootDir`. For legacy `.eslintrc` configs, this configures `parserOptions.project`. We do not enable this by default for lint performance reasons.",
-      "default": false
-    },
-    "setParserOptionsProject": {
-      "type": "boolean",
-      "description": "Deprecated alias for `enableTypedLinting`.",
-      "default": false,
-      "x-deprecated": "Use `enableTypedLinting` instead. This option will be removed in Nx v24."
-    },
-    "compiler": {
-      "type": "string",
-      "description": "The compiler to use.",
-      "enum": ["babel", "swc"],
-      "default": "babel"
-    },
-    "host": {
-      "type": "string",
-      "description": "The Consumer (host) application for this Producer (remote).",
-      "x-priority": "important",
-      "alias": "consumer"
-    },
-    "port": {
-      "type": "number",
-      "description": "The port on which this Producer (remote) app should be served.",
-      "aliases": ["devServerPort"],
-      "x-priority": "important"
-    },
-    "ssr": {
-      "description": "Whether to configure SSR for the Consumer (host) application",
-      "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
-    },
-    "skipPackageJson": {
-      "description": "Do not add dependencies to `package.json`.",
-      "type": "boolean",
-      "default": false,
-      "x-priority": "internal"
-    },
-    "bundler": {
-      "description": "The bundler to use.",
-      "type": "string",
-      "enum": ["rspack", "webpack"],
-      "x-prompt": "Which bundler do you want to use to build the application?",
-      "default": "rspack",
-      "x-priority": "important"
-    }
-  },
-  "required": ["directory"],
-  "additionalProperties": false
-}

package/dist/src/generators/setup-ssr/files/server.ts__tmpl__

@@ -1,28 +0,0 @@
-import * as path from 'path';
-import express from 'express';
-import cors from 'cors';
-
-import { handleRequest } from './src/main.server';
-
-const port = process.env['PORT'] || <%= port %>;
-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, () => {
-  // Server has started
-});
-
-server.on('error', console.error);

package/dist/src/generators/setup-ssr/files/src/main.server.tsx__tmpl__

@@ -1,47 +0,0 @@
-import type { Request, Response } from 'express';
-import * as fs from 'fs';
-import * as ReactDOMServer from 'react-dom/server';
-import isbot from 'isbot'
-
-import App from './<%= appComponentImport %>';
-
-
-let indexHtml: null | string = null;
-
-export function handleRequest(indexPath: string) {
-  return function render(req: Request, res: Response) {
-    let didError = false;
-
-    if (!indexHtml) {
-      indexHtml = fs.readFileSync(indexPath).toString();
-    }
-
-    const [htmlStart, htmlEnd] = indexHtml.split(`<div id="root"></div>`);
-
-    // For bots (e.g. search engines), the content will not be streamed but render all at once.
-    // For users, content should be streamed to the user as they are ready.
-    const callbackName = isbot(req.headers['user-agent']) ? 'onAllReady' : 'onShellReady';
-
-    const stream = ReactDOMServer.renderToPipeableStream(
-      <App />,
-      {
-        [callbackName]() {
-          res.statusCode = didError ? 500 : 200;
-          res.setHeader('Content-type', 'text/html; charset=utf-8');
-          res.write(`${htmlStart}<div id="root">`);
-          stream.pipe(res);
-          res.write(`</div>${htmlEnd}`);
-        },
-        onShellError(error) {
-          console.error(error);
-          res.statusCode = 500;
-          res.send('<!doctype html><h1>Server Error</h1>');
-        },
-        onError(error) {
-          didError = true;
-          console.error(error);
-        }
-      }
-    );
-  }
-}

package/dist/src/generators/setup-ssr/files/tsconfig.server.json__tmpl__

@@ -1,17 +0,0 @@
-{
-  "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": [
-    <%- extraInclude %>
-    "src/main.server.tsx",
-    "server.ts"
-  ]
-}

package/dist/src/generators/setup-ssr/schema.d.ts

@@ -1,8 +0,0 @@
-export interface Schema {
-  project: string;
-  appComponentImportPath?: string;
-  serverPort?: number;
-  skipFormat?: boolean;
-  extraInclude?: string[];
-  bundler?: 'rspack' | 'webpack';
-}

package/dist/src/generators/setup-ssr/schema.json

@@ -1,54 +0,0 @@
-{
-  "$schema": "https://json-schema.org/schema",
-  "$id": "GeneratorReactSSRSetup",
-  "cli": "nx",
-  "title": "Generate SSR setup for a React app",
-  "description": "Create the additional configuration required to enable SSR via Express for a React application.",
-  "type": "object",
-  "properties": {
-    "project": {
-      "type": "string",
-      "description": "The name of the application to add SSR support to.",
-      "$default": {
-        "$source": "argv",
-        "index": 0
-      },
-      "x-prompt": "What app would you like to add SSR support to?",
-      "x-dropdown": "projects",
-      "x-priority": "important"
-    },
-    "appComponentImportPath": {
-      "type": "string",
-      "description": "The import path of the <App/ > component, relative to project sourceRoot.",
-      "default": "app/app"
-    },
-    "serverPort": {
-      "type": "number",
-      "default": 4200,
-      "description": "The port for the Express server.",
-      "x-priority": "important"
-    },
-    "skipFormat": {
-      "type": "boolean",
-      "description": "Skip formatting the workspace after the generator completes.",
-      "x-priority": "internal"
-    },
-    "extraInclude": {
-      "type": "array",
-      "items": {
-        "type": "string"
-      },
-      "hidden": true,
-      "description": "Extra include entries in tsconfig.",
-      "default": []
-    },
-    "bundler": {
-      "description": "The bundler to use.",
-      "type": "string",
-      "enum": ["rspack", "webpack"],
-      "default": "webpack"
-    }
-  },
-  "required": ["project"],
-  "additionalProperties": false
-}

package/dist/src/generators/setup-ssr/setup-ssr.d.ts

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