@nx/react 19.7.0-canary.20240820-0853690 → 19.7.0-canary.20240821-2065033

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nx/react",
-  "version": "19.7.0-canary.20240820-0853690",
+  "version": "19.7.0-canary.20240821-2065033",
   "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.7.0-canary.20240820-0853690",
-    "@nx/js": "19.7.0-canary.20240820-0853690",
-    "@nx/eslint": "19.7.0-canary.20240820-0853690",
-    "@nx/web": "19.7.0-canary.20240820-0853690",
-    "@nrwl/react": "19.7.0-canary.20240820-0853690"
+    "@nx/devkit": "19.7.0-canary.20240821-2065033",
+    "@nx/js": "19.7.0-canary.20240821-2065033",
+    "@nx/eslint": "19.7.0-canary.20240821-2065033",
+    "@nx/web": "19.7.0-canary.20240821-2065033",
+    "@nrwl/react": "19.7.0-canary.20240821-2065033"
   },
   "publishConfig": {
     "access": "public"

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/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) &&