@nx/react 0.0.0-pr-27552-8322864 → 0.0.0-pr-27504-68aa5d2

package/README.md

@@ -22,7 +22,7 @@
 
 # Nx: Smart Monorepos · Fast CI
 
-Nx is a build system, optimized for monorepos, with plugins for popular frameworks and tools and advanced CI capabilities including caching and distribution.
+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.
 
 This package is a [React plugin for Nx](https://nx.dev/nx-api/react).
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nx/react",
-  "version": "0.0.0-pr-27552-8322864",
+  "version": "0.0.0-pr-27504-68aa5d2",
   "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": "0.0.0-pr-27552-8322864",
-    "@nx/js": "0.0.0-pr-27552-8322864",
-    "@nx/eslint": "0.0.0-pr-27552-8322864",
-    "@nx/web": "0.0.0-pr-27552-8322864",
-    "@nrwl/react": "0.0.0-pr-27552-8322864"
+    "@nx/devkit": "0.0.0-pr-27504-68aa5d2",
+    "@nx/js": "0.0.0-pr-27504-68aa5d2",
+    "@nx/eslint": "0.0.0-pr-27504-68aa5d2",
+    "@nx/web": "0.0.0-pr-27504-68aa5d2",
+    "@nrwl/react": "0.0.0-pr-27504-68aa5d2"
   },
   "publishConfig": {
     "access": "public"

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

@@ -187,10 +187,7 @@ 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) ?? []),
-        p.name,
-    ]);
+    process.env.NX_MF_DEV_REMOTES = JSON.stringify(remotes.devRemotes.map((r) => (typeof r === 'string' ? r : r.remoteName)));
     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,10 +162,7 @@ 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) ?? []),
-        projectConfig.name,
-    ]);
+    process.env.NX_MF_DEV_REMOTES = JSON.stringify(remotes.devRemotes.map((r) => (typeof r === 'string' ? r : r.remoteName)));
     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/schema.d.ts

@@ -1,5 +1,5 @@
 import type { ProjectNameAndRootFormat } from '@nx/devkit/src/generators/project-name-and-root-utils';
-import type { Linter, LinterType } from '@nx/eslint';
+import type { Linter } 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 | LinterType;
+  linter: Linter;
   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 (resolvedValue === undefined) {
+    if (typeof resolvedValue === undefined) {
         return '';
     }
     else if (typeof resolvedValue === 'string') {
@@ -74,18 +74,13 @@ function createComponentSpecFile(tree, { project, componentPath, js, cypressProj
     }
 }
 function findPropsAndGenerateFileForCypress(tree, sourceFile, cmpDeclaration, e2eLibIntegrationFolderPath, componentName, project, js, fromNodeArray) {
-    const info = (0, ast_utils_1.parseComponentPropsInfo)(sourceFile, cmpDeclaration);
+    const propsInterface = (0, ast_utils_1.getComponentPropsInterface)(sourceFile, cmpDeclaration);
     let props = [];
-    if (info) {
-        if (!tsModule) {
-            tsModule = (0, ensure_typescript_1.ensureTypescript)();
-        }
-        props = info.props.map((member) => {
+    if (propsInterface) {
+        props = propsInterface.members.map((member) => {
             return {
                 name: member.name.text,
-                defaultValue: tsModule.isBindingElement(member)
-                    ? getArgsDefaultValue(member.kind)
-                    : getArgsDefaultValue(member.type.kind),
+                defaultValue: getArgsDefaultValue(member.type.kind),
             };
         });
     }

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

@@ -45,13 +45,14 @@ function createComponentStoriesFile(host, { project, componentPath, interactionT
     }
 }
 function findPropsAndGenerateFile(host, sourceFile, cmpDeclaration, componentDirectory, name, interactionTests, isPlainJs, fromNodeArray) {
-    const { props, argTypes } = (0, component_props_1.getComponentPropDefaults)(sourceFile, cmpDeclaration);
+    const { propsTypeName, props, argTypes } = (0, component_props_1.getDefaultsForComponent)(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.getComponentPropDefaults)(sourceFile, cmp);
+            const defaults = (0, component_props_1.getDefaultsForComponent)(sourceFile, cmp);
             const isDefaultExport = defaultExport
                 ? defaultExport.name.text === cmp.name.text
                 : false;
@@ -47,7 +47,6 @@ 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.props.length > 0) { %>
-  let props: <% if (cmp.typeName) { %><%= cmp.typeName %><% } else if (cmp.inlineTypeString) { %><%- cmp.inlineTypeString %><% } else { %>unknown<% } %>;
+describe(<%= cmp.name %>.name, () => {<% if (cmp.typeName) { %>
+  let props: <%= cmp.typeName%>;
 
   beforeEach(() => {
     props = {<% for (let prop of cmp.props) { %>

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

@@ -1,5 +1,3 @@
-import { Linter, LinterType } from '@nx/eslint';
-
 export interface Schema {
   name: string;
   path: string;
@@ -8,7 +6,7 @@ export interface Schema {
   projectNameAndRootFormat?: ProjectNameAndRootFormat;
   e2eTestRunner?: 'cypress' | 'playwright' | 'none';
   host?: string;
-  linter?: Linter | LinterType;
+  linter?: Linter;
   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, LinterType } from '@nx/eslint';
+import type { Linter } 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 | LinterType;
+  linter: Linter;
   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, LinterType } from '@nx/eslint';
+import type { Linter } 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 | LinterType;
+  linter: Linter;
   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, LinterType } from '@nx/eslint';
+import type { Linter } 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 | LinterType;
+  linter: Linter;
   name: string;
   pascalCaseFiles?: boolean;
   routing?: boolean;

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

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

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

@@ -26,8 +26,4 @@ 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 parseComponentPropsInfo(sourceFile: ts.SourceFile, cmpDeclaration: ts.Node): {
-    props: Array<ts.PropertySignature | ts.BindingElement>;
-    propsTypeName: string | null;
-    inlineTypeString: string | null;
-} | null;
+export declare function getComponentPropsInterface(sourceFile: ts.SourceFile, cmpDeclaration: ts.Node): ts.InterfaceDeclaration | null;

package/src/utils/ast-utils.js

@@ -18,7 +18,7 @@ exports.addStaticRouter = addStaticRouter;
 exports.addReduxStoreToMain = addReduxStoreToMain;
 exports.updateReduxStore = updateReduxStore;
 exports.getComponentNode = getComponentNode;
-exports.parseComponentPropsInfo = parseComponentPropsInfo;
+exports.getComponentPropsInterface = getComponentPropsInterface;
 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,58 +470,24 @@ function getComponentNode(sourceFile) {
     }
     return defaultExport;
 }
-function parseComponentPropsInfo(sourceFile, cmpDeclaration) {
+function getComponentPropsInterface(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 result = processParameters(cmpDeclaration.parameters);
-        if (!result) {
-            return null;
+        const propsParam = cmpDeclaration.parameters.find((x) => tsModule.isParameter(x) && x.name.text === 'props');
+        if (propsParam?.type?.['typeName']) {
+            propsTypeName = propsParam.type.typeName.text;
         }
     }
-    else if (tsModule.isVariableDeclaration(cmpDeclaration) &&
-        cmpDeclaration.initializer &&
+    else if (cmpDeclaration.initializer &&
         tsModule.isArrowFunction(cmpDeclaration.initializer)) {
-        const result = processParameters(cmpDeclaration.initializer.parameters);
-        if (!result) {
-            return null;
+        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;
         }
     }
     else if (
@@ -545,56 +511,11 @@ function parseComponentPropsInfo(sourceFile, cmpDeclaration) {
         return null;
     }
     if (propsTypeName) {
-        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 (0, js_1.findNodes)(sourceFile, tsModule.SyntaxKind.InterfaceDeclaration).find((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 {
-        for (const prop of matchingNode.members) {
-            props.push(prop);
-        }
+        return null;
     }
-    return props;
 }

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

@@ -1,8 +1,7 @@
 import type * as ts from 'typescript';
 export declare function getArgsDefaultValue(property: ts.SyntaxKind): string;
-export declare function getComponentPropDefaults(sourceFile: ts.SourceFile, cmpDeclaration: ts.Node): {
-    propsTypeName: string | null;
-    inlineTypeString: string | null;
+export declare function getDefaultsForComponent(sourceFile: ts.SourceFile, cmpDeclaration: ts.Node): {
+    propsTypeName: string;
     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.getComponentPropDefaults = getComponentPropDefaults;
+exports.getDefaultsForComponent = getDefaultsForComponent;
 exports.getImportForType = getImportForType;
 const ensure_typescript_1 = require("@nx/js/src/utils/typescript/ensure-typescript");
 const ast_utils_1 = require("./ast-utils");
@@ -17,53 +17,41 @@ function getArgsDefaultValue(property) {
         [tsModule.SyntaxKind.BooleanKeyword]: false,
     };
     const resolvedValue = typeNameToDefault[property];
-    if (resolvedValue === undefined) {
+    if (typeof resolvedValue === undefined) {
         return "''";
     }
     else {
         return resolvedValue;
     }
 }
-function getComponentPropDefaults(sourceFile, cmpDeclaration) {
+function getDefaultsForComponent(sourceFile, cmpDeclaration) {
     if (!tsModule) {
         tsModule = (0, ensure_typescript_1.ensureTypescript)();
     }
-    const info = (0, ast_utils_1.parseComponentPropsInfo)(sourceFile, cmpDeclaration);
+    const propsInterface = (0, ast_utils_1.getComponentPropsInterface)(sourceFile, cmpDeclaration);
     let propsTypeName = null;
-    let inlineTypeString = null;
     let props = [];
     let argTypes = [];
-    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),
-                    };
-                }
+    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!`,
+                });
             }
             else {
-                // it's a binding element, which doesn't have a type, e.g.:
-                // const Cmp = ({ a, b }) => {}
                 return {
-                    name: member.name.getText(),
-                    defaultValue: getArgsDefaultValue(member.kind),
+                    name: member.name.text,
+                    defaultValue: getArgsDefaultValue(member.type.kind),
                 };
             }
         });
         props = props.filter((p) => p && p.defaultValue !== undefined);
     }
-    return { propsTypeName, inlineTypeString, props, argTypes };
+    return { propsTypeName, props, argTypes };
 }
 function getImportForType(sourceFile, typeName) {
     return sourceFile.statements.find((statement) => tsModule.isImportDeclaration(statement) &&