@nx/react 19.6.1 → 19.6.3

package/README.md

@@ -22,7 +22,7 @@
 
 # Nx: Smart Monorepos · Fast CI
 
-Nx is a build system with built-in tooling and advanced CI capabilities. It helps you maintain and scale monorepos, both locally and on CI.
+Nx is a build system, optimized for monorepos, with plugins for popular frameworks and tools and advanced CI capabilities including caching and distribution.
 
 This package is a [React plugin for Nx](https://nx.dev/nx-api/react).
 

package/mf/index.d.ts

@@ -1 +1 @@
-export { loadRemoteModule, setRemoteDefinitions, setRemoteUrlResolver, } from './dynamic-federation';
+export { loadRemoteModule, setRemoteDefinition, setRemoteDefinitions, setRemoteUrlResolver, } from './dynamic-federation';

package/mf/index.js

@@ -1,7 +1,8 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.setRemoteUrlResolver = exports.setRemoteDefinitions = exports.loadRemoteModule = void 0;
+exports.setRemoteUrlResolver = exports.setRemoteDefinitions = exports.setRemoteDefinition = exports.loadRemoteModule = void 0;
 var dynamic_federation_1 = require("./dynamic-federation");
 Object.defineProperty(exports, "loadRemoteModule", { enumerable: true, get: function () { return dynamic_federation_1.loadRemoteModule; } });
+Object.defineProperty(exports, "setRemoteDefinition", { enumerable: true, get: function () { return dynamic_federation_1.setRemoteDefinition; } });
 Object.defineProperty(exports, "setRemoteDefinitions", { enumerable: true, get: function () { return dynamic_federation_1.setRemoteDefinitions; } });
 Object.defineProperty(exports, "setRemoteUrlResolver", { enumerable: true, get: function () { return dynamic_federation_1.setRemoteUrlResolver; } });

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nx/react",
-  "version": "19.6.1",
+  "version": "19.6.3",
   "private": false,
   "description": "The React plugin for Nx contains executors and generators for managing React applications and libraries within an Nx workspace. It provides:\n\n\n- Integration with libraries such as Jest, Vitest, Playwright, Cypress, and Storybook.\n\n- Generators for applications, libraries, components, hooks, and more.\n\n- Library build support for publishing packages to npm or other registries.\n\n- Utilities for automatic workspace refactoring.",
   "repository": {
@@ -39,11 +39,11 @@
     "minimatch": "9.0.3",
     "tslib": "^2.3.0",
     "@module-federation/enhanced": "~0.2.3",
-    "@nx/devkit": "19.6.1",
-    "@nx/js": "19.6.1",
-    "@nx/eslint": "19.6.1",
-    "@nx/web": "19.6.1",
-    "@nrwl/react": "19.6.1"
+    "@nx/devkit": "19.6.3",
+    "@nx/js": "19.6.3",
+    "@nx/eslint": "19.6.3",
+    "@nx/web": "19.6.3",
+    "@nrwl/react": "19.6.3"
   },
   "publishConfig": {
     "access": "public"

package/src/executors/module-federation-dev-server/module-federation-dev-server.impl.js

@@ -187,7 +187,10 @@ async function* moduleFederationDevServer(options, context) {
     }, pathToManifestFile);
     options.staticRemotesPort ??= remotes.staticRemotePort;
     // Set NX_MF_DEV_REMOTES for the Nx Runtime Library Control Plugin
-    process.env.NX_MF_DEV_REMOTES = JSON.stringify(remotes.devRemotes.map((r) => (typeof r === 'string' ? r : r.remoteName)));
+    process.env.NX_MF_DEV_REMOTES = JSON.stringify([
+        ...(remotes.devRemotes.map((r) => typeof r === 'string' ? r : r.remoteName) ?? []),
+        p.name,
+    ]);
     const staticRemotesConfig = (0, parse_static_remotes_config_1.parseStaticRemotesConfig)([...remotes.staticRemotes, ...remotes.dynamicRemotes], context);
     const mappedLocationsOfStaticRemotes = await buildStaticRemotes(staticRemotesConfig, nxBin, context, options);
     const devRemoteIters = await startRemotes(remotes.devRemotes, context, options, 'serve');

package/src/executors/module-federation-ssr-dev-server/module-federation-ssr-dev-server.impl.js

@@ -162,7 +162,10 @@ async function* moduleFederationSsrDevServer(ssrDevServerOptions, context) {
         root: context.root,
     }, pathToManifestFile);
     options.staticRemotesPort ??= remotes.staticRemotePort;
-    process.env.NX_MF_DEV_REMOTES = JSON.stringify(remotes.devRemotes.map((r) => (typeof r === 'string' ? r : r.remoteName)));
+    process.env.NX_MF_DEV_REMOTES = JSON.stringify([
+        ...(remotes.devRemotes.map((r) => typeof r === 'string' ? r : r.remoteName) ?? []),
+        projectConfig.name,
+    ]);
     const staticRemotesConfig = (0, parse_static_remotes_config_1.parseStaticSsrRemotesConfig)([...remotes.staticRemotes, ...remotes.dynamicRemotes], context);
     const mappedLocationsOfStaticRemotes = await buildSsrStaticRemotes(staticRemotesConfig, nxBin, context, options);
     const devRemoteIters = await startRemotes(remotes.devRemotes, context, options);

package/src/generators/application/files/style-tailwind/src/app/__fileName__.tsx__tmpl__

@@ -2,6 +2,8 @@
 import { Component } from 'react';
 <% } if (!minimal) { %>
 import NxWelcome from "./nx-welcome";
+<% } if (bundler === "rspack") { %>
+import '../styles.css';
 <% } %>
 
 <% if (classComponent) { %>

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

@@ -1,5 +1,5 @@
 import type { ProjectNameAndRootFormat } from '@nx/devkit/src/generators/project-name-and-root-utils';
-import type { Linter } from '@nx/eslint';
+import type { Linter, LinterType } from '@nx/eslint';
 import type { SupportedStyles } from '../../../typings/style';
 
 export interface Schema {
@@ -12,7 +12,7 @@ export interface Schema {
   unitTestRunner?: 'jest' | 'vitest' | 'none';
   inSourceTests?: boolean;
   e2eTestRunner: 'cypress' | 'playwright' | 'none';
-  linter: Linter;
+  linter: Linter | LinterType;
   pascalCaseFiles?: boolean;
   classComponent?: boolean;
   routing?: boolean;

package/src/generators/component-cypress-spec/component-cypress-spec.js

@@ -25,7 +25,7 @@ function getArgsDefaultValue(property) {
         [tsModule.SyntaxKind.BooleanKeyword]: false,
     };
     const resolvedValue = typeNameToDefault[property];
-    if (typeof resolvedValue === undefined) {
+    if (resolvedValue === undefined) {
         return '';
     }
     else if (typeof resolvedValue === 'string') {
@@ -74,13 +74,18 @@ function createComponentSpecFile(tree, { project, componentPath, js, cypressProj
     }
 }
 function findPropsAndGenerateFileForCypress(tree, sourceFile, cmpDeclaration, e2eLibIntegrationFolderPath, componentName, project, js, fromNodeArray) {
-    const propsInterface = (0, ast_utils_1.getComponentPropsInterface)(sourceFile, cmpDeclaration);
+    const info = (0, ast_utils_1.parseComponentPropsInfo)(sourceFile, cmpDeclaration);
     let props = [];
-    if (propsInterface) {
-        props = propsInterface.members.map((member) => {
+    if (info) {
+        if (!tsModule) {
+            tsModule = (0, ensure_typescript_1.ensureTypescript)();
+        }
+        props = info.props.map((member) => {
             return {
                 name: member.name.text,
-                defaultValue: getArgsDefaultValue(member.type.kind),
+                defaultValue: tsModule.isBindingElement(member)
+                    ? getArgsDefaultValue(member.kind)
+                    : getArgsDefaultValue(member.type.kind),
             };
         });
     }

package/src/generators/component-story/component-story.js

@@ -45,14 +45,13 @@ function createComponentStoriesFile(host, { project, componentPath, interactionT
     }
 }
 function findPropsAndGenerateFile(host, sourceFile, cmpDeclaration, componentDirectory, name, interactionTests, isPlainJs, fromNodeArray) {
-    const { propsTypeName, props, argTypes } = (0, component_props_1.getDefaultsForComponent)(sourceFile, cmpDeclaration);
+    const { props, argTypes } = (0, component_props_1.getComponentPropDefaults)(sourceFile, cmpDeclaration);
     (0, devkit_1.generateFiles)(host, (0, devkit_1.joinPathFragments)(__dirname, `./files${isPlainJs ? '/jsx' : '/tsx'}`), (0, devkit_1.normalizePath)(componentDirectory), {
         tmpl: '',
         componentFileName: fromNodeArray
             ? `${name}--${cmpDeclaration.name.text}`
             : name,
         componentImportFileName: name,
-        propsTypeName,
         props,
         argTypes,
         componentName: cmpDeclaration.name.text,

package/src/generators/component-test/component-test.js

@@ -38,7 +38,7 @@ function generateSpecsForComponents(tree, filePath) {
     const defaultExport = (0, ast_utils_1.getComponentNode)(sourceFile);
     if (cmpNodes?.length) {
         const components = cmpNodes.map((cmp) => {
-            const defaults = (0, component_props_1.getDefaultsForComponent)(sourceFile, cmp);
+            const defaults = (0, component_props_1.getComponentPropDefaults)(sourceFile, cmp);
             const isDefaultExport = defaultExport
                 ? defaultExport.name.text === cmp.name.text
                 : false;
@@ -47,6 +47,7 @@ function generateSpecsForComponents(tree, filePath) {
                 props: [...defaults.props, ...defaults.argTypes],
                 name: cmp.name.text,
                 typeName: defaults.propsTypeName,
+                inlineTypeString: defaults.inlineTypeString,
             };
         });
         const namedImports = components

package/src/generators/component-test/files/__fileName__.cy__ext__

@@ -2,8 +2,8 @@ import * as React from 'react'
 <%- importStatement %>
 
 <% for (let cmp of components) { %>
-describe(<%= cmp.name %>.name, () => {<% if (cmp.typeName) { %>
-  let props: <%= cmp.typeName%>;
+describe(<%= cmp.name %>.name, () => {<% if (cmp.props.length > 0) { %>
+  let props: <% if (cmp.typeName) { %><%= cmp.typeName %><% } else if (cmp.inlineTypeString) { %><%- cmp.inlineTypeString %><% } else { %>unknown<% } %>;
 
   beforeEach(() => {
     props = {<% for (let prop of cmp.props) { %>

package/src/generators/federate-module/schema.d.ts

@@ -1,3 +1,5 @@
+import { Linter, LinterType } from '@nx/eslint';
+
 export interface Schema {
   name: string;
   path: string;
@@ -6,7 +8,7 @@ export interface Schema {
   projectNameAndRootFormat?: ProjectNameAndRootFormat;
   e2eTestRunner?: 'cypress' | 'playwright' | 'none';
   host?: string;
-  linter?: Linter;
+  linter?: Linter | LinterType;
   skipFormat?: boolean;
   style?: SupportedStyles;
   unitTestRunner?: 'jest' | 'vitest' | 'none';

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

@@ -1,5 +1,5 @@
 import type { ProjectNameAndRootFormat } from '@nx/devkit/src/generators/project-name-and-root-utils';
-import type { Linter } from '@nx/eslint';
+import type { Linter, LinterType } from '@nx/eslint';
 import type { SupportedStyles } from '../../../typings/style';
 
 export interface Schema {
@@ -11,7 +11,7 @@ export interface Schema {
   e2eTestRunner: 'cypress' | 'playwright' | 'none';
   globalCss?: boolean;
   js?: boolean;
-  linter: Linter;
+  linter: Linter | LinterType;
   name: string;
   pascalCaseFiles?: boolean;
   remotes?: string[];

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

@@ -1,5 +1,5 @@
 import type { ProjectNameAndRootFormat } from '@nx/devkit/src/generators/project-name-and-root-utils';
-import type { Linter } from '@nx/eslint';
+import type { Linter, LinterType } from '@nx/eslint';
 import type { SupportedStyles } from '../../../typings/style';
 
 export interface Schema {
@@ -14,7 +14,7 @@ export interface Schema {
   importPath?: string;
   inSourceTests?: boolean;
   js?: boolean;
-  linter: Linter;
+  linter: Linter | LinterType;
   name: string;
   pascalCaseFiles?: boolean;
   publishable?: boolean;

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

@@ -1,5 +1,5 @@
 import type { ProjectNameAndRootFormat } from '@nx/devkit/src/generators/project-name-and-root-utils';
-import type { Linter } from '@nx/eslint';
+import type { Linter, LinterType } from '@nx/eslint';
 import type { SupportedStyles } from '../../../typings/style';
 import type { NormalizedSchema as ApplicationNormalizedSchema } from '../application/schema';
 
@@ -13,7 +13,7 @@ export interface Schema {
   globalCss?: boolean;
   host?: string;
   js?: boolean;
-  linter: Linter;
+  linter: Linter | LinterType;
   name: string;
   pascalCaseFiles?: boolean;
   routing?: boolean;

package/src/generators/storybook-configuration/schema.d.ts

@@ -1,4 +1,4 @@
-import { Linter } from '@nx/eslint';
+import { Linter, LinterType } from '@nx/eslint';
 
 export interface StorybookConfigureSchema {
   project: string;
@@ -6,7 +6,7 @@ export interface StorybookConfigureSchema {
   generateStories?: boolean;
   js?: boolean;
   tsConfiguration?: boolean;
-  linter?: Linter;
+  linter?: Linter | LinterType;
   ignorePaths?: string[];
   configureStaticServe?: boolean;
   configureCypress?: boolean;

package/src/utils/ast-utils.d.ts

@@ -26,4 +26,8 @@ export declare function updateReduxStore(sourcePath: string, source: ts.SourceFi
     modulePath: string;
 }): StringChange[];
 export declare function getComponentNode(sourceFile: ts.SourceFile): ts.Node | null;
-export declare function getComponentPropsInterface(sourceFile: ts.SourceFile, cmpDeclaration: ts.Node): ts.InterfaceDeclaration | null;
+export declare function parseComponentPropsInfo(sourceFile: ts.SourceFile, cmpDeclaration: ts.Node): {
+    props: Array<ts.PropertySignature | ts.BindingElement>;
+    propsTypeName: string | null;
+    inlineTypeString: string | null;
+} | null;

package/src/utils/ast-utils.js

@@ -18,7 +18,7 @@ exports.addStaticRouter = addStaticRouter;
 exports.addReduxStoreToMain = addReduxStoreToMain;
 exports.updateReduxStore = updateReduxStore;
 exports.getComponentNode = getComponentNode;
-exports.getComponentPropsInterface = getComponentPropsInterface;
+exports.parseComponentPropsInfo = parseComponentPropsInfo;
 const js_1 = require("@nx/js");
 const devkit_1 = require("@nx/devkit");
 const ensure_typescript_1 = require("@nx/js/src/utils/typescript/ensure-typescript");
@@ -470,24 +470,58 @@ function getComponentNode(sourceFile) {
     }
     return defaultExport;
 }
-function getComponentPropsInterface(sourceFile, cmpDeclaration) {
+function parseComponentPropsInfo(sourceFile, cmpDeclaration) {
     if (!tsModule) {
         tsModule = (0, ensure_typescript_1.ensureTypescript)();
     }
     let propsTypeName = null;
+    let inlineTypeString = null;
+    const props = [];
+    const processParameters = (parameters) => {
+        if (!parameters.length) {
+            return null;
+        }
+        const propsParam = parameters[0];
+        if (propsParam.type) {
+            if (tsModule.isTypeReferenceNode(propsParam.type)) {
+                // function Cmp(props: Props) {}
+                propsTypeName = propsParam.type.typeName.getText();
+            }
+            else if (tsModule.isTypeLiteralNode(propsParam.type)) {
+                // function Cmp(props: {a: string, b: number}) {}
+                props.push(...propsParam.type.members);
+                inlineTypeString = propsParam.type.getText();
+            }
+            else {
+                // we don't support other types (e.g. union types)
+                return false;
+            }
+        }
+        else if (tsModule.isObjectBindingPattern(propsParam.name)) {
+            // function Cmp({a, b}) {}
+            props.push(...propsParam.name.elements);
+            inlineTypeString = `{\n${propsParam.name.elements
+                .map((x) => `${x.name.getText()}: unknown;\n`)
+                .join('')}}`;
+        }
+        else {
+            // function Cmp(props) {}
+            return false;
+        }
+        return true;
+    };
     if (tsModule.isFunctionDeclaration(cmpDeclaration)) {
-        const propsParam = cmpDeclaration.parameters.find((x) => tsModule.isParameter(x) && x.name.text === 'props');
-        if (propsParam?.type?.['typeName']) {
-            propsTypeName = propsParam.type.typeName.text;
+        const result = processParameters(cmpDeclaration.parameters);
+        if (!result) {
+            return null;
         }
     }
-    else if (cmpDeclaration.initializer &&
+    else if (tsModule.isVariableDeclaration(cmpDeclaration) &&
+        cmpDeclaration.initializer &&
         tsModule.isArrowFunction(cmpDeclaration.initializer)) {
-        const arrowFn = cmpDeclaration
-            .initializer;
-        const propsParam = arrowFn.parameters.find((x) => tsModule.isParameter(x) && x.name.text === 'props');
-        if (propsParam?.type?.['typeName']) {
-            propsTypeName = propsParam.type.typeName.text;
+        const result = processParameters(cmpDeclaration.initializer.parameters);
+        if (!result) {
+            return null;
         }
     }
     else if (
@@ -511,11 +545,56 @@ function getComponentPropsInterface(sourceFile, cmpDeclaration) {
         return null;
     }
     if (propsTypeName) {
-        return (0, js_1.findNodes)(sourceFile, tsModule.SyntaxKind.InterfaceDeclaration).find((x) => {
+        const foundProps = getPropsFromTypeName(sourceFile, propsTypeName);
+        if (!foundProps) {
+            return null;
+        }
+        for (const prop of foundProps) {
+            props.push(prop);
+        }
+    }
+    return {
+        propsTypeName,
+        props,
+        inlineTypeString,
+    };
+}
+function getPropsFromTypeName(sourceFile, propsTypeName) {
+    const matchingNode = (0, js_1.findNodes)(sourceFile, [
+        tsModule.SyntaxKind.InterfaceDeclaration,
+        tsModule.SyntaxKind.TypeAliasDeclaration,
+    ]).find((x) => {
+        if (tsModule.isTypeAliasDeclaration(x) ||
+            tsModule.isInterfaceDeclaration(x)) {
             return x.name.getText() === propsTypeName;
-        });
+        }
+        return false;
+    });
+    if (!matchingNode) {
+        return null;
+    }
+    const props = [];
+    if (tsModule.isTypeAliasDeclaration(matchingNode)) {
+        if (tsModule.isTypeLiteralNode(matchingNode.type)) {
+            for (const prop of matchingNode.type.members) {
+                props.push(prop);
+            }
+        }
+        else if (tsModule.isTypeReferenceNode(matchingNode.type)) {
+            const result = getPropsFromTypeName(sourceFile, matchingNode.type.typeName.getText());
+            if (result) {
+                props.push(...result);
+            }
+        }
+        else {
+            // we don't support other types of type aliases (e.g. union types)
+            return null;
+        }
     }
     else {
-        return null;
+        for (const prop of matchingNode.members) {
+            props.push(prop);
+        }
     }
+    return props;
 }

package/src/utils/component-props.d.ts

@@ -1,7 +1,8 @@
 import type * as ts from 'typescript';
 export declare function getArgsDefaultValue(property: ts.SyntaxKind): string;
-export declare function getDefaultsForComponent(sourceFile: ts.SourceFile, cmpDeclaration: ts.Node): {
-    propsTypeName: string;
+export declare function getComponentPropDefaults(sourceFile: ts.SourceFile, cmpDeclaration: ts.Node): {
+    propsTypeName: string | null;
+    inlineTypeString: string | null;
     props: {
         name: string;
         defaultValue: any;

package/src/utils/component-props.js

@@ -1,7 +1,7 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.getArgsDefaultValue = getArgsDefaultValue;
-exports.getDefaultsForComponent = getDefaultsForComponent;
+exports.getComponentPropDefaults = getComponentPropDefaults;
 exports.getImportForType = getImportForType;
 const ensure_typescript_1 = require("@nx/js/src/utils/typescript/ensure-typescript");
 const ast_utils_1 = require("./ast-utils");
@@ -17,41 +17,53 @@ function getArgsDefaultValue(property) {
         [tsModule.SyntaxKind.BooleanKeyword]: false,
     };
     const resolvedValue = typeNameToDefault[property];
-    if (typeof resolvedValue === undefined) {
+    if (resolvedValue === undefined) {
         return "''";
     }
     else {
         return resolvedValue;
     }
 }
-function getDefaultsForComponent(sourceFile, cmpDeclaration) {
+function getComponentPropDefaults(sourceFile, cmpDeclaration) {
     if (!tsModule) {
         tsModule = (0, ensure_typescript_1.ensureTypescript)();
     }
-    const propsInterface = (0, ast_utils_1.getComponentPropsInterface)(sourceFile, cmpDeclaration);
+    const info = (0, ast_utils_1.parseComponentPropsInfo)(sourceFile, cmpDeclaration);
     let propsTypeName = null;
+    let inlineTypeString = null;
     let props = [];
     let argTypes = [];
-    if (propsInterface) {
-        propsTypeName = propsInterface.name.text;
-        props = propsInterface.members.map((member) => {
-            if (member.type.kind === tsModule.SyntaxKind.FunctionType) {
-                argTypes.push({
-                    name: member.name.text,
-                    type: 'action',
-                    actionText: `${member.name.text} executed!`,
-                });
+    if (info) {
+        propsTypeName = info.propsTypeName;
+        inlineTypeString = info.inlineTypeString;
+        props = info.props.map((member) => {
+            if (tsModule.isPropertySignature(member)) {
+                if (member.type.kind === tsModule.SyntaxKind.FunctionType) {
+                    argTypes.push({
+                        name: member.name.getText(),
+                        type: 'action',
+                        actionText: `${member.name.getText()} executed!`,
+                    });
+                }
+                else {
+                    return {
+                        name: member.name.getText(),
+                        defaultValue: getArgsDefaultValue(member.type.kind),
+                    };
+                }
             }
             else {
+                // it's a binding element, which doesn't have a type, e.g.:
+                // const Cmp = ({ a, b }) => {}
                 return {
-                    name: member.name.text,
-                    defaultValue: getArgsDefaultValue(member.type.kind),
+                    name: member.name.getText(),
+                    defaultValue: getArgsDefaultValue(member.kind),
                 };
             }
         });
         props = props.filter((p) => p && p.defaultValue !== undefined);
     }
-    return { propsTypeName, props, argTypes };
+    return { propsTypeName, inlineTypeString, props, argTypes };
 }
 function getImportForType(sourceFile, typeName) {
     return sourceFile.statements.find((statement) => tsModule.isImportDeclaration(statement) &&