@nx/react 24.0.0-pr.37405.acdaf31 → 24.0.0-rc.1

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;

package/dist/src/generators/setup-ssr/setup-ssr.js

@@ -1,198 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.setupSsrGenerator = setupSsrGenerator;
-const devkit_1 = require("@nx/devkit");
-const internal_1 = require("@nx/devkit/internal");
-const assert_supported_react_version_1 = require("../../utils/assert-supported-react-version");
-const internal_2 = require("@nx/js/internal");
-const path_1 = require("path");
-const ast_utils_1 = require("../../utils/ast-utils");
-const versions_1 = require("../../utils/versions");
-let tsModule;
-function readEntryFile(host, path) {
-    if (!tsModule) {
-        tsModule = (0, internal_2.ensureTypescript)();
-    }
-    const content = host.read(path, 'utf-8');
-    return {
-        content,
-        source: tsModule.createSourceFile(path, content, tsModule.ScriptTarget.Latest, true),
-    };
-}
-async function getProjectConfig(tree, projectName) {
-    let maybeProjectConfig = (0, devkit_1.readProjectConfiguration)(tree, projectName);
-    if (!maybeProjectConfig.targets?.build) {
-        let projectGraph;
-        try {
-            projectGraph = (0, devkit_1.readCachedProjectGraph)();
-        }
-        catch {
-            projectGraph = await (0, devkit_1.createProjectGraphAsync)();
-        }
-        maybeProjectConfig = projectGraph.nodes[projectName].data;
-    }
-    return maybeProjectConfig;
-}
-async function setupSsrGenerator(tree, options) {
-    (0, assert_supported_react_version_1.assertSupportedReactVersion)(tree);
-    const projectConfig = await getProjectConfig(tree, options.project);
-    const projectRoot = projectConfig.root;
-    const appImportCandidates = [
-        options.appComponentImportPath ?? 'app/app',
-        'app',
-        'App',
-        'app/App',
-        'App/App',
-    ].map((importPath) => {
-        return {
-            importPath,
-            filePath: (0, devkit_1.joinPathFragments)((0, internal_2.getProjectSourceRoot)(projectConfig, tree), `${importPath}.tsx`),
-        };
-    });
-    const appComponentInfo = appImportCandidates.find((candidate) => tree.exists(candidate.filePath));
-    if (!appComponentInfo) {
-        throw new Error(`Cannot find an import path for <App/> component. Try passing setting --appComponentImportPath option.`);
-    }
-    if (!projectConfig.targets.build || !projectConfig.targets.serve) {
-        throw new Error(`Project ${options.project} does not have build and serve targets`);
-    }
-    if (projectConfig.targets.server) {
-        throw new Error(`Project ${options.project} already has a server target.`);
-    }
-    const originalOutputPath = projectConfig.targets.build?.options?.outputPath ??
-        projectConfig.targets.build?.outputs[0];
-    if (!originalOutputPath) {
-        throw new Error(`Project ${options.project} does not contain a outputPath for the build target.`);
-    }
-    // TODO(colum): We need to figure out how to handle this for Crystal
-    if (projectConfig.targets.build.options?.outputPath) {
-        projectConfig.targets.build.options.outputPath = (0, devkit_1.joinPathFragments)(originalOutputPath, 'browser');
-    }
-    if (projectConfig.targets.build.executor === '@nx/rspack:rspack') {
-        options.bundler = 'rspack';
-    }
-    else if (projectConfig.targets.build.executor === '@nx/webpack:webpack') {
-        options.bundler = 'webpack';
-    }
-    projectConfig.targets = {
-        ...projectConfig.targets,
-        server: {
-            dependsOn: ['build'],
-            executor: options.bundler === 'rspack'
-                ? '@nx/rspack:rspack'
-                : '@nx/webpack:webpack',
-            outputs: ['{options.outputPath}'],
-            defaultConfiguration: 'production',
-            options: {
-                target: 'node',
-                main: `${projectRoot}/server.ts`,
-                outputPath: (0, devkit_1.joinPathFragments)(originalOutputPath, 'server'),
-                outputFileName: 'server.js',
-                tsConfig: `${projectRoot}/tsconfig.server.json`,
-                compiler: 'babel',
-                externalDependencies: 'all',
-                outputHashing: 'none',
-                ...(options.bundler === 'rspack'
-                    ? { rspackConfig: (0, devkit_1.joinPathFragments)(projectRoot, 'rspack.config.js') }
-                    : {
-                        webpackConfig: (0, devkit_1.joinPathFragments)(projectRoot, 'webpack.config.js'),
-                    }),
-            },
-            configurations: {
-                development: {
-                    optimization: false,
-                    sourceMap: true,
-                },
-                production: {
-                    fileReplacements: [
-                        {
-                            replace: `${projectRoot}/src/environments/environment.ts`,
-                            with: `${projectRoot}/src/environments/environment.prod.ts`,
-                        },
-                    ],
-                    sourceMap: false,
-                },
-            },
-        },
-        'serve-browser': projectConfig.targets.serve,
-        'serve-server': {
-            executor: '@nx/js:node',
-            defaultConfiguration: 'development',
-            options: {
-                buildTarget: `${options.project}:server:development`,
-                buildTargetOptions: {
-                    watch: true,
-                },
-            },
-            configurations: {
-                development: {},
-                production: {
-                    buildTarget: `${options.project}:server:production`,
-                },
-            },
-        },
-        serve: {
-            executor: options.bundler === 'rspack'
-                ? '@nx/rspack:ssr-dev-server'
-                : '@nx/webpack:ssr-dev-server',
-            defaultConfiguration: 'development',
-            options: {
-                browserTarget: `${options.project}:build:development`,
-                serverTarget: `${options.project}:serve-server:development`,
-                port: options.serverPort,
-                browserTargetOptions: {
-                    watch: true,
-                },
-            },
-            configurations: {
-                development: {},
-                production: {
-                    browserTarget: `${options.project}:build:production`,
-                    serverTarget: `${options.project}:serve-server:production`,
-                },
-            },
-        },
-    };
-    (0, devkit_1.updateProjectConfiguration)(tree, options.project, projectConfig);
-    const nxJson = (0, devkit_1.readNxJson)(tree);
-    if (nxJson.tasksRunnerOptions?.default &&
-        !nxJson.tasksRunnerOptions?.default.options.cacheableOperations.includes('server')) {
-        nxJson.tasksRunnerOptions.default.options.cacheableOperations = [
-            ...nxJson.tasksRunnerOptions.default.options.cacheableOperations,
-            'server',
-        ];
-    }
-    (0, devkit_1.generateFiles)(tree, (0, path_1.join)(__dirname, 'files'), projectRoot, {
-        tmpl: '',
-        port: Number(options?.serverPort) || 4200,
-        extraInclude: options.extraInclude?.length > 0
-            ? `"${options.extraInclude.join('", "')}",`
-            : '',
-        appComponentImport: appComponentInfo.importPath,
-        browserBuildOutputPath: projectConfig.targets.build?.options?.outputPath ??
-            projectConfig.targets.build?.outputs[0],
-    });
-    // Add <StaticRouter> to server main if needed.
-    // TODO: need to read main.server.tsx not main.tsx.
-    const appContent = tree.read(appComponentInfo.filePath, 'utf-8');
-    const isRouterPresent = appContent.match(/react-router-dom/);
-    if (isRouterPresent) {
-        const serverEntry = (0, devkit_1.joinPathFragments)(projectRoot, 'src/main.server.tsx');
-        const { content, source } = readEntryFile(tree, serverEntry);
-        const changes = (0, devkit_1.applyChangesToString)(content, (0, ast_utils_1.addStaticRouter)(serverEntry, source));
-        tree.write(serverEntry, changes);
-    }
-    (0, internal_1.upsertTargetDefault)(tree, nxJson, { target: 'server', cache: true });
-    (0, devkit_1.updateNxJson)(tree, nxJson);
-    const installTask = (0, devkit_1.addDependenciesToPackageJson)(tree, {
-        express: versions_1.expressVersion,
-        isbot: versions_1.isbotVersion,
-        cors: versions_1.corsVersion,
-    }, {
-        '@types/express': versions_1.typesExpressVersion,
-        '@types/cors': versions_1.typesCorsVersion,
-    }, undefined, true);
-    await (0, devkit_1.formatFiles)(tree);
-    return installTask;
-}
-exports.default = setupSsrGenerator;

package/dist/src/module-federation/ast-utils.d.ts

@@ -1,8 +0,0 @@
-import type * as ts from 'typescript';
-import { StringChange } from '@nx/devkit';
-export declare function addRemoteToConfig(source: ts.SourceFile, app: string): StringChange[];
-export declare function addRemoteDefinition(source: ts.SourceFile, app: string): StringChange[];
-export declare function addRemoteRoute(source: ts.SourceFile, names: {
-    fileName: string;
-    className: string;
-}): StringChange[];

package/dist/src/module-federation/ast-utils.js

@@ -1,101 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.addRemoteToConfig = addRemoteToConfig;
-exports.addRemoteDefinition = addRemoteDefinition;
-exports.addRemoteRoute = addRemoteRoute;
-const devkit_1 = require("@nx/devkit");
-const js_1 = require("@nx/js");
-const ast_utils_1 = require("../utils/ast-utils");
-const internal_1 = require("@nx/js/internal");
-let tsModule;
-function addRemoteToConfig(source, app) {
-    if (!tsModule) {
-        tsModule = (0, internal_1.ensureTypescript)();
-    }
-    const assignments = (0, js_1.findNodes)(source, tsModule.SyntaxKind.PropertyAssignment);
-    const remotesAssignment = assignments.find((s) => s.name.getText() === 'remotes');
-    if (remotesAssignment) {
-        const arrayExpression = remotesAssignment.initializer;
-        if (!arrayExpression.elements)
-            return [];
-        const lastElement = arrayExpression.elements[arrayExpression.elements.length - 1];
-        return [
-            lastElement && !arrayExpression.elements.hasTrailingComma
-                ? {
-                    type: devkit_1.ChangeType.Insert,
-                    index: lastElement.end,
-                    text: `,`,
-                }
-                : null,
-            {
-                type: devkit_1.ChangeType.Insert,
-                index: remotesAssignment.end - 1,
-                text: `'${app}',\n`,
-            },
-        ].filter(Boolean);
-    }
-    const binaryExpressions = (0, js_1.findNodes)(source, tsModule.SyntaxKind.BinaryExpression);
-    const exportExpression = binaryExpressions.find((b) => {
-        if (b.left.kind === tsModule.SyntaxKind.PropertyAccessExpression) {
-            const pae = b.left;
-            return (pae.expression.getText() === 'module' &&
-                pae.name.getText() === 'exports');
-        }
-    });
-    if (exportExpression?.right.kind === tsModule.SyntaxKind.ObjectLiteralExpression) {
-        const ole = exportExpression.right;
-        return [
-            {
-                type: devkit_1.ChangeType.Insert,
-                index: ole.end - 1,
-                text: `remotes: ['${app}']\n`,
-            },
-        ];
-    }
-    return [];
-}
-function addRemoteDefinition(source, app) {
-    return [
-        {
-            type: devkit_1.ChangeType.Insert,
-            index: source.end,
-            text: `\ndeclare module '${app}/Module';`,
-        },
-    ];
-}
-function addRemoteRoute(source, names) {
-    const routes = (0, ast_utils_1.findElements)(source, 'Route');
-    const links = (0, ast_utils_1.findElements)(source, 'Link');
-    if (routes.length === 0) {
-        return [];
-    }
-    else {
-        const changes = [];
-        const firstRoute = routes[0];
-        const firstLink = links[0];
-        changes.push(...(0, ast_utils_1.addImport)(source, `const ${names.className} = React.lazy(() => import('${names.fileName}/Module'));`));
-        changes.push({
-            type: devkit_1.ChangeType.Insert,
-            index: firstRoute.end,
-            text: `\n<Route path="/${names.fileName}" element={<${names.className} />} />`,
-        });
-        if (firstLink) {
-            const parentLi = (0, ast_utils_1.findClosestOpening)('li', firstLink);
-            if (parentLi) {
-                changes.push({
-                    type: devkit_1.ChangeType.Insert,
-                    index: parentLi.end,
-                    text: `\n<li><Link to="/${names.fileName}">${names.className}</Link></li>`,
-                });
-            }
-            else {
-                changes.push({
-                    type: devkit_1.ChangeType.Insert,
-                    index: firstLink.parent.end,
-                    text: `\n<Link to="/${names.fileName}">${names.className}</Link>`,
-                });
-            }
-        }
-        return changes;
-    }
-}

package/dist/src/rules/update-module-federation-project.d.ts

@@ -1,11 +0,0 @@
-import { Tree } from '@nx/devkit';
-export declare function updateModuleFederationProject(host: Tree, options: {
-    js?: boolean;
-    projectName: string;
-    appProjectRoot: string;
-    port?: number;
-    typescriptConfiguration?: boolean;
-    dynamic?: boolean;
-    bundler?: 'rspack' | 'webpack';
-    ssr?: boolean;
-}, isHost?: boolean): void;