@nx/angular 23.0.0-pr.35465.2bc2643 → 23.0.0-rc.1

package/dist/src/generators/utils/storybook-ast/component-info.js

@@ -0,0 +1,191 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.getComponentsInfo = getComponentsInfo;
+exports.getStandaloneComponentsInfo = getStandaloneComponentsInfo;
+const devkit_1 = require("@nx/devkit");
+const internal_1 = require("@nx/js/internal");
+const path_1 = require("path");
+const ast_utils_1 = require("../../../utils/nx-devkit/ast-utils");
+const module_info_1 = require("./module-info");
+let tsModule;
+let tsqueryAst;
+let tsqueryQuery;
+function getComponentsInfo(tree, entryPoint, moduleFilePaths, projectName) {
+    return moduleFilePaths
+        .flatMap((moduleFilePath) => {
+        const file = (0, ast_utils_1.getTsSourceFile)(tree, moduleFilePath);
+        const moduleDeclarations = (0, module_info_1.getModuleDeclarations)(file, moduleFilePath, projectName);
+        if (moduleDeclarations.length === 0) {
+            return undefined;
+        }
+        if (!tsModule) {
+            tsModule = (0, internal_1.ensureTypescript)();
+        }
+        const imports = file.statements.filter((statement) => statement.kind === tsModule.SyntaxKind.ImportDeclaration);
+        const componentsInfo = moduleDeclarations.map((maybeComponentName) => tryGetComponentInfo(tree, entryPoint, file, imports, moduleFilePath, maybeComponentName));
+        return componentsInfo;
+    })
+        .filter((f) => f !== undefined);
+}
+function getStandaloneComponentsInfo(tree, entryPoint) {
+    const componentsInfo = [];
+    (0, devkit_1.visitNotIgnoredFiles)(tree, entryPoint.path, (filePath) => {
+        const normalizedFilePath = (0, devkit_1.normalizePath)(filePath);
+        if (entryPoint.excludeDirs?.some((excludeDir) => normalizedFilePath.startsWith(excludeDir))) {
+            return;
+        }
+        if ((0, path_1.extname)(normalizedFilePath) !== '.ts' ||
+            normalizedFilePath.includes('.storybook')) {
+            return;
+        }
+        const standaloneComponents = getStandaloneComponents(tree, normalizedFilePath);
+        if (!standaloneComponents.length) {
+            return;
+        }
+        standaloneComponents.forEach((componentName) => {
+            componentsInfo.push({
+                componentFileName: (0, path_1.basename)(normalizedFilePath, '.ts'),
+                moduleFolderPath: entryPoint.path,
+                name: componentName,
+                path: (0, path_1.dirname)((0, path_1.relative)(entryPoint.path, normalizedFilePath)),
+                entryPointName: entryPoint.name,
+            });
+        });
+    });
+    return componentsInfo;
+}
+function getStandaloneComponents(tree, filePath) {
+    if (!tsqueryAst) {
+        (0, internal_1.ensureTypescript)();
+        const tsqueryModule = require('@phenomnomnominal/tsquery');
+        tsqueryAst = tsqueryModule.ast;
+        tsqueryQuery = tsqueryModule.query;
+    }
+    const fileContent = tree.read(filePath, 'utf-8');
+    const sourceFile = tsqueryAst(fileContent);
+    // standalone: true is the default, so all components except those with
+    // standalone: false are considered standalone
+    const standaloneComponentNodes = tsqueryQuery(sourceFile, 'ClassDeclaration:has(Decorator > CallExpression:has(Identifier[name=Component]) ObjectLiteralExpression:not(:has(PropertyAssignment:has(Identifier[name=standalone]) > FalseKeyword))) > Identifier');
+    return standaloneComponentNodes.map((component) => component.getText());
+}
+function getComponentImportPath(componentName, imports) {
+    if (!tsModule) {
+        tsModule = (0, internal_1.ensureTypescript)();
+    }
+    const componentImportStatement = imports.find((statement) => {
+        const namedImports = statement
+            .getChildren()
+            .find((node) => node.kind === tsModule.SyntaxKind.ImportClause)
+            .getChildren()
+            .find((node) => node.kind === tsModule.SyntaxKind.NamedImports);
+        if (namedImports === undefined)
+            return false;
+        const importedIdentifiers = namedImports
+            .getChildren()
+            .find((node) => node.kind === tsModule.SyntaxKind.SyntaxList)
+            .getChildren()
+            .filter((node) => node.kind === tsModule.SyntaxKind.ImportSpecifier)
+            .map((node) => node.getText());
+        return importedIdentifiers.includes(componentName);
+    });
+    const importPath = componentImportStatement
+        .getChildren()
+        .find((node) => node.kind === tsModule.SyntaxKind.StringLiteral)
+        .getText()
+        .slice(1, -1);
+    return importPath;
+}
+function tryGetComponentInfo(tree, entryPoint, sourceFile, imports, moduleFilePath, symbolName) {
+    try {
+        if (!tsqueryQuery) {
+            (0, internal_1.ensureTypescript)();
+            const tsqueryModule = require('@phenomnomnominal/tsquery');
+            tsqueryAst = tsqueryModule.ast;
+            tsqueryQuery = tsqueryModule.query;
+        }
+        const moduleFolderPath = (0, path_1.dirname)(moduleFilePath);
+        // try to get the component from the same file (inline scam)
+        const node = tsqueryQuery(sourceFile, `ClassDeclaration:has(Decorator > CallExpression > Identifier[name=Component]):has(Identifier[name=${symbolName}])`)[0];
+        if (node) {
+            return {
+                componentFileName: (0, path_1.basename)(moduleFilePath, '.ts'),
+                moduleFolderPath,
+                name: symbolName,
+                path: '.',
+                entryPointName: entryPoint.name,
+            };
+        }
+        // try to get the component from the imports
+        const symbolFilePathRelativeToModule = getComponentImportPath(symbolName, imports);
+        let symbolImportPath = getFullComponentFilePath(moduleFolderPath, symbolFilePathRelativeToModule);
+        if (tree.exists(symbolImportPath) && !tree.isFile(symbolImportPath)) {
+            return tryGetComponentInfoFromDir(tree, entryPoint, symbolImportPath, symbolName, moduleFolderPath);
+        }
+        const candidatePaths = [
+            symbolImportPath,
+            `${symbolImportPath}.ts`,
+            `${symbolImportPath}.js`,
+        ];
+        for (const candidatePath of candidatePaths) {
+            if (!tree.exists(candidatePath)) {
+                continue;
+            }
+            const content = tree.read(candidatePath, 'utf-8');
+            const classAndComponentRegex = new RegExp(`@Component[\\s\\S\n]*?\\bclass ${symbolName}\\b`, 'g');
+            if (content.match(classAndComponentRegex)) {
+                const path = (0, path_1.dirname)(symbolFilePathRelativeToModule);
+                const componentFileName = (0, path_1.basename)(symbolFilePathRelativeToModule);
+                return {
+                    componentFileName,
+                    moduleFolderPath,
+                    name: symbolName,
+                    path,
+                    entryPointName: entryPoint.name,
+                };
+            }
+        }
+        return undefined;
+    }
+    catch (ex) {
+        devkit_1.logger.warn(`Could not generate a story for ${symbolName}. Error: ${ex}`);
+        return undefined;
+    }
+}
+function tryGetComponentInfoFromDir(tree, entryPoint, dir, symbolName, moduleFolderPath) {
+    let path = null;
+    let componentFileName = null;
+    const componentImportPathChildren = [];
+    (0, devkit_1.visitNotIgnoredFiles)(tree, dir, (filePath) => {
+        componentImportPathChildren.push((0, devkit_1.normalizePath)(filePath));
+    });
+    for (const candidateFile of componentImportPathChildren) {
+        if (candidateFile.endsWith('.ts')) {
+            const content = tree.read(candidateFile, 'utf-8');
+            const classAndComponentRegex = new RegExp(`@Component[\\s\\S\n]*?\\bclass ${symbolName}\\b`, 'g');
+            if (content.match(classAndComponentRegex)) {
+                path = candidateFile
+                    .slice(0, candidateFile.lastIndexOf('/'))
+                    .replace(moduleFolderPath, '.');
+                componentFileName = candidateFile.slice(candidateFile.lastIndexOf('/') + 1, candidateFile.lastIndexOf('.'));
+                break;
+            }
+        }
+    }
+    if (path === null) {
+        console.warn(`Couldn't resolve "${symbolName}" imported from ${dir} relative to ${moduleFolderPath}.`);
+        return undefined;
+    }
+    return {
+        componentFileName,
+        moduleFolderPath,
+        name: symbolName,
+        path,
+        entryPointName: entryPoint.name,
+    };
+}
+function getFullComponentFilePath(moduleFolderPath, componentFilePath) {
+    if (moduleFolderPath.startsWith('/')) {
+        moduleFolderPath = moduleFolderPath.slice(1, moduleFolderPath.length);
+    }
+    return (0, devkit_1.joinPathFragments)(moduleFolderPath, componentFilePath);
+}

package/dist/src/generators/utils/storybook-ast/entry-point.d.ts

@@ -0,0 +1,7 @@
+import type { Tree } from '@nx/devkit';
+export type EntryPoint = {
+    name: string;
+    path: string;
+    excludeDirs?: string[];
+};
+export declare function getProjectEntryPoints(tree: Tree, projectName: string): EntryPoint[];

package/dist/src/generators/utils/storybook-ast/module-info.d.ts

@@ -0,0 +1,5 @@
+import type { Tree } from '@nx/devkit';
+import type { SourceFile } from 'typescript';
+import type { EntryPoint } from './entry-point';
+export declare function getModuleDeclarations(file: SourceFile, moduleFilePath: string, projectName: string): string[];
+export declare function getModuleFilePaths(tree: Tree, entryPoint: EntryPoint): string[];

package/dist/src/generators/utils/storybook-ast/module-info.js

@@ -0,0 +1,214 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.getModuleDeclarations = getModuleDeclarations;
+exports.getModuleFilePaths = getModuleFilePaths;
+const devkit_1 = require("@nx/devkit");
+const js_1 = require("@nx/js");
+const path_1 = require("path");
+const ast_utils_1 = require("../../../utils/nx-devkit/ast-utils");
+const internal_1 = require("@nx/js/internal");
+let tsModule;
+function getModuleDeclarations(file, moduleFilePath, projectName) {
+    const ngModuleDecorator = getNgModuleDecorator(file, moduleFilePath);
+    const declarationsPropertyAssignment = getNgModuleDeclarationsPropertyAssignment(ngModuleDecorator, moduleFilePath, projectName);
+    if (!declarationsPropertyAssignment) {
+        return [];
+    }
+    const declarationsArray = getDeclarationsArray(file, declarationsPropertyAssignment, moduleFilePath, projectName);
+    if (!declarationsArray) {
+        return [];
+    }
+    return getDeclaredComponentNodes(declarationsArray).map((node) => node.getText());
+}
+function getModuleFilePaths(tree, entryPoint) {
+    let moduleFilePaths = [];
+    (0, devkit_1.visitNotIgnoredFiles)(tree, entryPoint.path, (filePath) => {
+        const normalizedFilePath = (0, devkit_1.normalizePath)(filePath);
+        if (entryPoint.excludeDirs?.some((excludeDir) => normalizedFilePath.startsWith(excludeDir))) {
+            return;
+        }
+        if ((0, path_1.extname)(normalizedFilePath) === '.ts' &&
+            !normalizedFilePath.includes('.storybook') &&
+            hasNgModule(tree, normalizedFilePath)) {
+            moduleFilePaths.push(normalizedFilePath);
+        }
+    });
+    return moduleFilePaths;
+}
+function hasNgModule(tree, filePath) {
+    (0, internal_1.ensureTypescript)();
+    const { ast, query } = require('@phenomnomnominal/tsquery');
+    const fileContent = tree.read(filePath, 'utf-8');
+    const sourceFile = ast(fileContent);
+    const ngModule = query(sourceFile, 'ClassDeclaration > Decorator > CallExpression > Identifier[name=NgModule]');
+    return ngModule.length > 0;
+}
+function getDeclaredComponentNodes(declarationsArray) {
+    if (!tsModule) {
+        tsModule = (0, internal_1.ensureTypescript)();
+    }
+    const cmps = declarationsArray
+        .getChildren()
+        .find((node) => node.kind === tsModule.SyntaxKind.SyntaxList)
+        .getChildren()
+        .map((node) => {
+        if (node.kind === tsModule.SyntaxKind.Identifier) {
+            return node;
+        }
+        // if the node is a destructuring, follow the variable
+        if (node.kind === tsModule.SyntaxKind.SpreadElement) {
+            const declarationVariableNode = node
+                .getChildren()
+                .find((node) => node.kind === tsModule.SyntaxKind.Identifier);
+            // try to find the variable declaration in the same component
+            const declarationVariable = getVariableDeclaration(declarationVariableNode.getText(), declarationVariableNode.getSourceFile());
+            if (declarationVariable &&
+                declarationVariable.initializer.kind ===
+                    tsModule.SyntaxKind.ArrayLiteralExpression) {
+                const nodes = getDeclaredComponentNodes(declarationVariable.initializer);
+                return nodes;
+            }
+        }
+        return null;
+    })
+        .filter((node) => !!node);
+    return flatten(cmps);
+}
+function flatten(arr) {
+    let flattened = [];
+    for (const entry of arr) {
+        if (Array.isArray(entry)) {
+            flattened.push(...flatten(entry));
+        }
+        else {
+            flattened.push(entry);
+        }
+    }
+    return flattened;
+}
+function getDeclarationsArray(file, declarationsPropertyAssignment, moduleFilePath, projectName) {
+    if (!tsModule) {
+        tsModule = (0, internal_1.ensureTypescript)();
+    }
+    let declarationArray = declarationsPropertyAssignment
+        .getChildren()
+        .find((node) => node.kind === tsModule.SyntaxKind.ArrayLiteralExpression);
+    if (declarationArray) {
+        return declarationArray;
+    }
+    // Attempt to follow a variable instead of the literal
+    declarationArray = getModuleDeclaredComponentsFromVariable(file, declarationsPropertyAssignment);
+    if (declarationArray) {
+        return declarationArray;
+    }
+    // Attempt to follow a class declaration instead of the literal
+    declarationArray = getModuleDeclaredComponentsFromClass(file, declarationsPropertyAssignment);
+    if (!declarationArray) {
+        devkit_1.logger.warn((0, devkit_1.stripIndents) `No stories generated because the declarations in ${moduleFilePath} is not an array literal or the variable could not be found. Hint: you can always generate stories later with the 'nx generate @nx/angular:stories --name=${projectName}' command.`);
+    }
+    return declarationArray;
+}
+/**
+ * Try to get declared components like `declarations: someComponentsArrayConst`
+ */
+function getModuleDeclaredComponentsFromVariable(file, declarationsPropertyAssignment) {
+    if (!tsModule) {
+        tsModule = (0, internal_1.ensureTypescript)();
+    }
+    let declarationsVariable = declarationsPropertyAssignment
+        .getChildren()
+        .filter((node) => node.kind === tsModule.SyntaxKind.Identifier)[1];
+    if (!declarationsVariable) {
+        return undefined;
+    }
+    // Attempt to find variable declaration in the file
+    let variableDeclaration = getVariableDeclaration(declarationsVariable.getText(), file);
+    if (!variableDeclaration) {
+        return undefined;
+    }
+    const declarationArray = variableDeclaration
+        .getChildren()
+        .find((node) => node.kind === tsModule.SyntaxKind.ArrayLiteralExpression);
+    return declarationArray;
+}
+/**
+ * Try to get declared components like `declarations: SomeClass.components` as in
+ * https://github.com/nrwl/nx/issues/7276.
+ */
+function getModuleDeclaredComponentsFromClass(file, declarationsPropertyAssignment) {
+    if (!tsModule) {
+        tsModule = (0, internal_1.ensureTypescript)();
+    }
+    const propertyAccessExpression = declarationsPropertyAssignment
+        .getChildren()
+        .filter((node) => node.kind === tsModule.SyntaxKind.PropertyAccessExpression)[0];
+    if (!propertyAccessExpression) {
+        return undefined;
+    }
+    // Should contain 2 identifiers [SomeClass, components]
+    const [clazz, componentsProperty] = propertyAccessExpression
+        .getChildren()
+        .filter((node) => node.kind === tsModule.SyntaxKind.Identifier);
+    if (!clazz || !componentsProperty) {
+        return undefined;
+    }
+    // Attempt to find class declaration in the file
+    let classDeclaration = getClassDeclaration(clazz.getText(), file);
+    if (!classDeclaration) {
+        return undefined;
+    }
+    const declarationArray = classDeclaration.members
+        .filter((node) => node.kind === tsModule.SyntaxKind.PropertyDeclaration)
+        .find((propertyDeclaration) => propertyDeclaration
+        .getChildren()
+        .find((node) => node.kind === tsModule.SyntaxKind.Identifier &&
+        node.getText() === componentsProperty.getText()))
+        .getChildren()
+        .find((node) => node.kind === tsModule.SyntaxKind.ArrayLiteralExpression);
+    return declarationArray;
+}
+function getClassDeclaration(className, file) {
+    if (!tsModule) {
+        tsModule = (0, internal_1.ensureTypescript)();
+    }
+    const classDeclaration = (0, js_1.findNodes)(file, tsModule.SyntaxKind.ClassDeclaration).find((classDeclaration) => classDeclaration
+        .getChildren()
+        .find((node) => node.kind === tsModule.SyntaxKind.Identifier &&
+        node.getText() === className));
+    return classDeclaration;
+}
+function getVariableDeclaration(variableName, file) {
+    if (!tsModule) {
+        tsModule = (0, internal_1.ensureTypescript)();
+    }
+    const variableDeclaration = (0, js_1.findNodes)(file, tsModule.SyntaxKind.VariableDeclaration).find((variableDeclaration) => variableDeclaration
+        .getChildren()
+        .find((node) => node.kind === tsModule.SyntaxKind.Identifier &&
+        node.getText() === variableName));
+    return variableDeclaration;
+}
+function getNgModuleDeclarationsPropertyAssignment(ngModuleDecorator, moduleFilePath, projectName) {
+    if (!tsModule) {
+        tsModule = (0, internal_1.ensureTypescript)();
+    }
+    const syntaxList = ngModuleDecorator.getChildren().find((node) => {
+        return node.kind === tsModule.SyntaxKind.SyntaxList;
+    });
+    const declarationsPropertyAssignment = syntaxList
+        .getChildren()
+        .find((node) => {
+        return (node.kind === tsModule.SyntaxKind.PropertyAssignment &&
+            node.getChildren()[0].getText() === 'declarations');
+    });
+    if (!declarationsPropertyAssignment) {
+        devkit_1.logger.warn((0, devkit_1.stripIndents) `No stories generated because there were no components declared in ${moduleFilePath}. Hint: you can always generate stories later with the 'nx generate @nx/angular:stories --name=${projectName}' command.`);
+    }
+    return declarationsPropertyAssignment;
+}
+function getNgModuleDecorator(file, moduleFilePath) {
+    const ngModuleDecorators = (0, ast_utils_1.getDecoratorMetadata)(file, 'NgModule', '@angular/core');
+    if (ngModuleDecorators.length === 0) {
+        throw new Error(`No @NgModule decorator in ${moduleFilePath}.`);
+    }
+    return ngModuleDecorators[0];
+}

package/dist/src/generators/utils/storybook-ast/storybook-inputs.d.ts

@@ -0,0 +1,12 @@
+import type { Tree } from '@nx/devkit';
+import type { PropertyDeclaration } from 'typescript';
+export type ArgType = 'text' | 'boolean' | 'number' | 'select';
+export interface InputDescriptor {
+    name: string;
+    type: ArgType;
+    defaultValue?: string;
+}
+export declare function getInputPropertyDeclarations(tree: Tree, path: string): PropertyDeclaration[];
+export declare function getComponentProps(tree: Tree, componentPath: string, getArgsDefaultValueFn?: (property: PropertyDeclaration) => string | undefined, useDecoratorName?: boolean): InputDescriptor[];
+export declare function getArgType(property: PropertyDeclaration): ArgType;
+export declare function getArgsDefaultValue(property: PropertyDeclaration): string;

package/dist/src/generators/utils/storybook-ast/storybook-inputs.js

@@ -0,0 +1,77 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.getInputPropertyDeclarations = getInputPropertyDeclarations;
+exports.getComponentProps = getComponentProps;
+exports.getArgType = getArgType;
+exports.getArgsDefaultValue = getArgsDefaultValue;
+const js_1 = require("@nx/js");
+const ast_utils_1 = require("../../../utils/nx-devkit/ast-utils");
+const internal_1 = require("@nx/js/internal");
+let tsModule;
+function getInputPropertyDeclarations(tree, path) {
+    if (!tsModule) {
+        tsModule = (0, internal_1.ensureTypescript)();
+    }
+    const file = (0, ast_utils_1.getTsSourceFile)(tree, path);
+    const decorators = (0, js_1.getSourceNodes)(file).filter((node) => node.kind === tsModule.SyntaxKind.Decorator);
+    return decorators
+        .filter((decorator) => (0, js_1.findNodes)(decorator, tsModule.SyntaxKind.Identifier).some((node) => node.getText() === 'Input'))
+        .map((node) => node.parent);
+}
+function getComponentProps(tree, componentPath, getArgsDefaultValueFn = getArgsDefaultValue, useDecoratorName = true) {
+    if (!tsModule) {
+        tsModule = (0, internal_1.ensureTypescript)();
+    }
+    const props = getInputPropertyDeclarations(tree, componentPath).map((node) => {
+        const decoratorContent = (0, js_1.findNodes)((0, js_1.findNodes)(node, tsModule.SyntaxKind.Decorator).find((n) => n.getText().startsWith('@Input')), tsModule.SyntaxKind.StringLiteral);
+        const name = useDecoratorName && decoratorContent.length
+            ? !decoratorContent[0].getText().includes('.')
+                ? decoratorContent[0].getText().slice(1, -1)
+                : node.name.getText()
+            : node.name.getText();
+        const type = getArgType(node);
+        const defaultValue = getArgsDefaultValueFn(node);
+        return {
+            name,
+            type,
+            defaultValue,
+        };
+    });
+    return props;
+}
+function getArgType(property) {
+    if (!tsModule) {
+        tsModule = (0, internal_1.ensureTypescript)();
+    }
+    if (property.type) {
+        const typeName = property.type.getText();
+        const typeNameToArgType = {
+            string: 'text',
+            number: 'number',
+            boolean: 'boolean',
+        };
+        return typeNameToArgType[typeName] || 'text';
+    }
+    if (property.initializer) {
+        const initializerKindToArgType = {
+            [tsModule.SyntaxKind.StringLiteral]: 'text',
+            [tsModule.SyntaxKind.NumericLiteral]: 'number',
+            [tsModule.SyntaxKind.TrueKeyword]: 'boolean',
+            [tsModule.SyntaxKind.FalseKeyword]: 'boolean',
+        };
+        return initializerKindToArgType[property.initializer.kind] || 'text';
+    }
+    return 'text';
+}
+function getArgsDefaultValue(property) {
+    const typeNameToDefault = {
+        string: "''",
+        number: '0',
+        boolean: 'false',
+    };
+    return property.initializer
+        ? property.initializer.getText()
+        : property.type
+            ? typeNameToDefault[property.type.getText()]
+            : "''";
+}

package/dist/src/generators/utils/testing.d.ts

@@ -0,0 +1,10 @@
+import type { Tree } from '@nx/devkit';
+import type { Schema as ApplicationOptions } from '../application/schema';
+import type { Schema as HostOptions } from '../host/schema';
+import type { Schema as LibraryOptions } from '../library/schema';
+import type { Schema as RemoteOptions } from '../remote/schema';
+export declare function generateTestApplication(tree: Tree, options: ApplicationOptions): Promise<void>;
+export declare function generateTestHostApplication(tree: Tree, options: HostOptions): Promise<void>;
+export declare function generateTestRemoteApplication(tree: Tree, options: RemoteOptions): Promise<void>;
+export declare function generateTestLibrary(tree: Tree, options: LibraryOptions): Promise<void>;
+export declare function createStorybookTestWorkspaceForLib(libName: string): Promise<Tree>;