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

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

@@ -1,173 +0,0 @@
-{
-  "$schema": "https://json-schema.org/schema",
-  "$id": "GeneratorReactHost",
-  "cli": "nx",
-  "title": "Generate Module Federation Setup for React Consumer (Host) App",
-  "description": "Create Module Federation configuration files for given React Consumer (Host) 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 Consumer (host) application to generate the Module Federation configuration",
-      "pattern": "^[a-zA-Z][^:]*$",
-      "x-priority": "important"
-    },
-    "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"]
-    },
-    "dynamic": {
-      "type": "boolean",
-      "description": "Should the Consumer (host) application use dynamic federation?",
-      "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"
-    },
-    "remotes": {
-      "type": "array",
-      "description": "A list of Producer (remote) application names that the Consumer (host) application should consume.",
-      "default": [],
-      "x-priority": "important",
-      "alias": "producers"
-    },
-    "port": {
-      "type": "number",
-      "description": "The port at which the Consumer (host) application should be served. Defaults to 4200.",
-      "aliases": ["devServerPort"],
-      "x-priority": "important"
-    },
-    "ssr": {
-      "description": "Whether to configure SSR for the Consumer (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
-    },
-    "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/remote/files/common/src/main.js__tmpl__

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

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

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

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

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

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

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

package/dist/src/generators/remote/files/rspack-common/src/main.jsx__tmpl__

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

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

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

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

@@ -1,12 +0,0 @@
-/**
-* Nx requires a default export of the config to allow correct resolution of the module federation graph.
-**/
-module.exports = {
-  name: '<%= projectName %>',
-  <%_ if (dynamic) { _%>
-  library: { type: 'var', name: '<%= projectName %>'},
-  <%_ } _%>
-  exposes: {
-    './Module': './src/remote-entry.<%= js ? 'js' : 'ts' %>',
-  },
-};

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

@@ -1,45 +0,0 @@
-const { NxAppRspackPlugin } = require('@nx/rspack/app-plugin');
-const { NxReactRspackPlugin } = require('@nx/rspack/react-plugin');
-const { NxModuleFederationPlugin, NxModuleFederationDevServerPlugin } = require('@nx/module-federation/rspack');
-const { join } = require('path');
-
-const config = require('./module-federation.config');
-
-module.exports = {
-  // rspack-cli dev mode defaults this on; it breaks module federation.
-  lazyCompilation: false,
-  output: {
-    path: join(__dirname, '<%= rspackPluginOptions.outputPath %>'),
-    publicPath: 'auto'
-  },
-  devServer: {
-    port: <%= port %>,
-    headers: {
-      "Access-Control-Allow-Origin": "*"
-    },
-    historyApiFallback: {
-      index: '/index.html',
-      disableDotRule: true,
-      htmlAcceptHeaders: ['text/html', 'application/xhtml+xml'],
-    },
-  },
-  plugins: [
-    new NxAppRspackPlugin({
-      tsConfig: '<%= rspackPluginOptions.tsConfig %>',
-      main: '<%= rspackPluginOptions.main %>',
-      index: '<%= rspackPluginOptions.index %>',
-      baseHref: '<%= rspackPluginOptions.baseHref %>',
-      assets: <%- JSON.stringify(rspackPluginOptions.assets) %>,
-      styles: <%- JSON.stringify(rspackPluginOptions.styles) %>,
-      outputHashing: process.env['NODE_ENV'] === 'production' ? 'all' : 'none',
-      optimization: process.env['NODE_ENV'] === 'production',
-    }),
-    new NxReactRspackPlugin({
-      // Uncomment this line if you don't want to use SVGR
-      // See: https://react-svgr.com/
-      // svgr: false
-    }),
-    new NxModuleFederationPlugin({ config }, { dts: false }),
-    new NxModuleFederationDevServerPlugin({ config }),
-  ],
-};

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

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

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

@@ -1,15 +0,0 @@
-/**
-* Nx requires a default export of the config to allow correct resolution of the module federation graph.
-**/
-module.exports = {
-  name: '<%= projectName %>',
-  exposes: {
-    './Module': './src/remote-entry.<%= js ? 'js' : 'ts' %>',
-  },
-  shared: (libraryName, libraryConfig) => {
-      return {
-        ...libraryConfig,
-        eager: true
-      }
-    },
-};

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

@@ -1,71 +0,0 @@
-const { NxAppRspackPlugin } = require('@nx/rspack/app-plugin');
-const { NxReactRspackPlugin } = require('@nx/rspack/react-plugin');
-const { NxModuleFederationPlugin, NxModuleFederationSSRDevServerPlugin } = require('@nx/module-federation/rspack');
-const { join } = require('path');
-
-const browserMfConfig = require('./module-federation.config');
-const serverMfConfig = require('./module-federation.server.config');
-
-const browserRspackConfig = {
-  name: 'browser',
-  // rspack-cli dev mode defaults this on; it breaks module federation.
-  lazyCompilation: false,
-  output: {
-    path: join(__dirname, '<%= rspackPluginOptions.outputPath %>', 'browser'),
-    publicPath: 'auto'
-  },
-  devServer: {
-    port: <%= port %>,
-    headers: {
-      "Access-Control-Allow-Origin": "*"
-    },
-    historyApiFallback: {
-      index: '/index.html',
-      disableDotRule: true,
-      htmlAcceptHeaders: ['text/html', 'application/xhtml+xml'],
-    },
-    devMiddleware: {
-      writeToDisk: (file: string) => !file.includes('.hot-update.'),
-    },
-  },
-  plugins: [
-    new NxAppRspackPlugin({
-      tsConfig: '<%= rspackPluginOptions.tsConfig %>',
-      main: '<%= rspackPluginOptions.main %>',
-      index: '<%= rspackPluginOptions.index %>',
-      baseHref: '<%= rspackPluginOptions.baseHref %>',
-      assets: <%- JSON.stringify(rspackPluginOptions.assets) %>,
-      styles: <%- JSON.stringify(rspackPluginOptions.styles) %>,
-      outputHashing: process.env['NODE_ENV'] === 'production' ? 'all' : 'none',
-      optimization: process.env['NODE_ENV'] === 'production',
-    }),
-    new NxReactRspackPlugin({
-      // Uncomment this line if you don't want to use SVGR
-      // See: https://react-svgr.com/
-      // svgr: false
-    }),
-    new NxModuleFederationPlugin({ config: browserMfConfig }, { dts: false }),
-  ],
-};
-
-const serverRspackConfig = {
-  name: 'server',
-    target: 'async-node',
-    output: {
-      path: join(__dirname, '<%= rspackPluginOptions.outputPath %>', 'server'),
-      filename: 'server.js'
-    },
-    plugins: [
-      new NxAppRspackPlugin({
-        outputPath: join(__dirname, '<%= rspackPluginOptions.outputPath %>', 'server'),
-        outputFileName: 'server.js',
-        tsConfig: '<%= rspackPluginOptions.tsConfig %>',
-        main: '<%= rspackPluginOptions.mainServer %>',
-        baseHref: '<%= rspackPluginOptions.baseHref %>',
-      }),
-      new NxModuleFederationPlugin({ config: serverMfConfig, isServer: true }, { dts: false }),
-      new NxModuleFederationSSRDevServerPlugin({ config: serverMfConfig }),
-    ],
-};
-
-module.exports = [browserRspackConfig, serverRspackConfig];

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

@@ -1,45 +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(), '<%= rspackPluginOptions.outputPath %>', 'browser');
-const serverDist = path.join(process.cwd(), '<%= rspackPluginOptions.outputPath %>', 'server');
-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/dist/src/generators/remote/files/rspack-module-federation-ssr/src/main.server.tsx__tmpl__

@@ -1,45 +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 './app/app';
-
-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/remote/files/rspack-module-federation-ssr-ts/module-federation.server.config.ts__tmpl__

@@ -1,19 +0,0 @@
-import type {ModuleFederationConfig} from '@nx/module-federation';
-
-const config: ModuleFederationConfig = {
-  name: '<%= projectName %>',
-  exposes: {
-      './Module': './src/remote-entry.<%= js ? 'js' : 'ts' %>',
-  },
-  shared: (libraryName, libraryConfig) => {
-      return {
-        ...libraryConfig,
-        eager: true
-      }
-    },
-};
-
-/**
-* Nx requires a default export of the config to allow correct resolution of the module federation graph.
-**/
-export default config;

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

@@ -1,71 +0,0 @@
-import { NxAppRspackPlugin } from '@nx/rspack/app-plugin.js';
-import { NxReactRspackPlugin } from '@nx/rspack/react-plugin.js';
-import { NxModuleFederationPlugin, NxModuleFederationSSRDevServerPlugin } from '@nx/module-federation/rspack';
-import { join } from 'path';
-
-import browserMfConfig from './module-federation.config';
-import serverMfConfig from './module-federation.server.config';
-
-const browserRspackConfig = {
-  name: 'browser',
-  // rspack-cli dev mode defaults this on; it breaks module federation.
-  lazyCompilation: false,
-  output: {
-    path: join(__dirname, '<%= rspackPluginOptions.outputPath %>', 'browser'),
-    publicPath: 'auto'
-  },
-  devServer: {
-    port: <%= port %>,
-    headers: {
-      "Access-Control-Allow-Origin": "*"
-    },
-    historyApiFallback: {
-      index: '/index.html',
-      disableDotRule: true,
-      htmlAcceptHeaders: ['text/html', 'application/xhtml+xml'],
-    },
-    devMiddleware: {
-      writeToDisk: (file: string) => !file.includes('.hot-update.'),
-    },
-  },
-  plugins: [
-    new NxAppRspackPlugin({
-      tsConfig: '<%= rspackPluginOptions.tsConfig %>',
-      main: '<%= rspackPluginOptions.main %>',
-      index: '<%= rspackPluginOptions.index %>',
-      baseHref: '<%= rspackPluginOptions.baseHref %>',
-      assets: <%- JSON.stringify(rspackPluginOptions.assets) %>,
-      styles: <%- JSON.stringify(rspackPluginOptions.styles) %>,
-      outputHashing: process.env['NODE_ENV'] === 'production' ? 'all' : 'none',
-      optimization: process.env['NODE_ENV'] === 'production',
-    }),
-    new NxReactRspackPlugin({
-      // Uncomment this line if you don't want to use SVGR
-      // See: https://react-svgr.com/
-      // svgr: false
-    }),
-    new NxModuleFederationPlugin({ config: browserMfConfig }, { dts: false }),
-  ],
-};
-
-const serverRspackConfig = {
-  name: 'server',
-    target: 'async-node',
-    output: {
-      path: join(__dirname, '<%= rspackPluginOptions.outputPath %>', 'server'),
-      filename: 'server.js'
-    },
-    plugins: [
-      new NxAppRspackPlugin({
-        outputPath: join(__dirname, '<%= rspackPluginOptions.outputPath %>', 'server'),
-        outputFileName: 'server.js',
-        tsConfig: '<%= rspackPluginOptions.tsConfig %>',
-        main: '<%= rspackPluginOptions.mainServer %>',
-        baseHref: '<%= rspackPluginOptions.baseHref %>',
-      }),
-      new NxModuleFederationPlugin({ config: serverMfConfig, isServer: true }, { dts: false }),
-      new NxModuleFederationSSRDevServerPlugin({ config: serverMfConfig }),
-    ],
-};
-
-export default [browserRspackConfig, serverRspackConfig];

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

@@ -1,45 +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(), '<%= rspackPluginOptions.outputPath %>', 'browser');
-const serverDist = path.join(process.cwd(), '<%= rspackPluginOptions.outputPath %>', 'server');
-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/dist/src/generators/remote/files/rspack-module-federation-ssr-ts/src/main.server.tsx__tmpl__

@@ -1,45 +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 './app/app';
-
-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/remote/files/rspack-module-federation-ssr-ts/tsconfig.lint.json__tmpl__

@@ -1,19 +0,0 @@
-{
-  "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",
-    "rspack.config.ts",
-    "rspack.prod.config.ts"
-  ]
-}

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

@@ -1,16 +0,0 @@
-import type {ModuleFederationConfig} from '@nx/module-federation';
-
-const config: ModuleFederationConfig = {
-  name: '<%= projectName %>',
-  <%_ if (dynamic) { _%>
-  library: { type: 'var', name: '<%= projectName %>'},
-  <%_ } _%>
-  exposes: {
-    './Module': './src/remote-entry.<%= js ? 'js' : 'ts' %>',
-  },
-};
-
-/**
-* Nx requires a default export of the config to allow correct resolution of the module federation graph.
-**/
-export default config;

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

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