@zeroheight/adoption-cli 2.0.2 → 2.2.0

package/CHANGELOG.md

@@ -1,5 +1,13 @@
 # Release notes
 
+## [2.2.0](https://www.npmjs.com/package/@zeroheight/adoption-cli/v/2.2.0) - 8th November 2024
+
+- Include export names in package file as part of component analyzing
+
+## [2.1.0](https://www.npmjs.com/package/@zeroheight/adoption-cli/v/2.1.0) - 8th November 2024
+
+- Start collecting component property usage data as part of component analyzing
+
 ## [2.0.2](https://www.npmjs.com/package/@zeroheight/adoption-cli/v/2.0.2) - 29th October 2024
 
 - Update readme

package/dist/ast/analyze.d.ts

@@ -1,18 +1,39 @@
 import type { Node, Program, Identifier } from "acorn";
+type AttrValueType = "JSXExpressionContainer" | "NumericLiteral" | "StringLiteral" | "BooleanLiteral" | "Identifier" | "TemplateLiteral" | "ArrowFunctionExpression" | "StaticMemberExpression" | "CallExpression" | "TSAsExpression" | "ObjectExpression" | "ArrayExpression" | "BinaryExpression" | undefined;
 export interface PlainIdentifier extends Node {
     type: "Identifier";
     local: Identifier;
 }
+export interface Props {
+    name: string;
+    type?: AttrValueType[];
+    values: [string | number | typeof RUNTIME_VALUE | null | undefined];
+}
 export type VisitorState = {
     components: Map<string, number>;
+    props: Map<string, Props[]>;
     imports: Map<string, {
         package: string;
         name: string;
     }>;
 };
+type PropValues = string | number | null | undefined;
+export type ComponentProps = {
+    [propName: string]: {
+        type?: AttrValueType[];
+        count?: number;
+        values: PropValues[];
+    };
+};
 export type RawUsage = {
     name: string;
     count: number;
     package: string;
+    props: ComponentProps;
 };
+declare const RUNTIME_VALUE = "zh-runtime-value";
+export declare const ARRAY_VALUE = "zh-array-value";
+export declare const BINARY_VALUE = "zh-binary-value";
+export declare const OBJECT_VALUE = "zh-object-value";
 export declare function analyze(ast: Program): RawUsage[];
+export {};

package/dist/ast/analyze.js

@@ -1,4 +1,16 @@
 import * as walk from "acorn-walk";
+const DYNAMIC_EXPRESSIONS = [
+    "Identifier",
+    "TemplateLiteral",
+    "ArrowFunctionExpression",
+    "StaticMemberExpression",
+    "CallExpression",
+    "TSAsExpression",
+];
+const RUNTIME_VALUE = "zh-runtime-value";
+export const ARRAY_VALUE = "zh-array-value";
+export const BINARY_VALUE = "zh-binary-value";
+export const OBJECT_VALUE = "zh-object-value";
 function transformVisitorStateToRawUsage(visitorState) {
     const transformedUsageMap = new Map();
     for (const [name, count] of visitorState.components) {
@@ -10,10 +22,30 @@ function transformVisitorStateToRawUsage(visitorState) {
             name: actualName,
             count: 0,
             package: importInfo?.package ?? "",
+            props: {},
         };
         transformedUsageMap.set(key, {
             ...currentValue,
             count: currentValue.count + count,
+            props: {},
+        });
+    }
+    for (const [name, props] of visitorState.props) {
+        const importInfo = visitorState.imports.get(name);
+        const actualName = importInfo?.name ?? name;
+        const packageName = importInfo?.package ?? "";
+        const key = `package:${packageName} name:${actualName}`;
+        const currentValue = transformedUsageMap.get(key);
+        const componentProps = currentValue.props;
+        props.forEach((prop) => {
+            componentProps[prop.name] = {
+                type: Array.from(new Set([...(componentProps[prop.name]?.type ?? []), ...(prop.type ?? [])])),
+                values: [...(componentProps[prop.name]?.values ?? []), ...prop.values],
+            };
+        });
+        transformedUsageMap.set(key, {
+            ...currentValue,
+            props: componentProps,
         });
     }
     return Array.from(transformedUsageMap.values());
@@ -21,6 +53,7 @@ function transformVisitorStateToRawUsage(visitorState) {
 export function analyze(ast) {
     const visitorState = {
         components: new Map(),
+        props: new Map(),
         imports: new Map(),
     };
     const visitorFunctions = {
@@ -84,6 +117,63 @@ export function analyze(ast) {
             const elName = el.name.name;
             // Ignore html tags e.g. div, h1, span
             if (elName?.[0] !== elName?.[0]?.toLocaleLowerCase()) {
+                if (el.attributes.length > 0) {
+                    const attrProps = [];
+                    el.attributes.forEach((attr) => {
+                        // We won't have a name if it is a JSXSpreadAttribute
+                        if (attr.name) {
+                            if (attr.value?.type === "JSXExpressionContainer") {
+                                const expressionType = attr.value.expression.type;
+                                // These are props determined at runtime so we cannot parse them
+                                if (expressionType &&
+                                    DYNAMIC_EXPRESSIONS.includes(expressionType)) {
+                                    attrProps.push({
+                                        name: attr.name.name,
+                                        type: [expressionType],
+                                        values: [RUNTIME_VALUE],
+                                    });
+                                }
+                                else if (expressionType && expressionType === 'ObjectExpression') {
+                                    attrProps.push({
+                                        name: attr.name.name,
+                                        type: [expressionType],
+                                        values: [OBJECT_VALUE],
+                                    });
+                                }
+                                else if (expressionType && expressionType === 'ArrayExpression') {
+                                    attrProps.push({
+                                        name: attr.name.name,
+                                        type: [expressionType],
+                                        values: [ARRAY_VALUE],
+                                    });
+                                }
+                                else if (expressionType && expressionType === 'BinaryExpression') {
+                                    attrProps.push({
+                                        name: attr.name.name,
+                                        type: [expressionType],
+                                        values: [BINARY_VALUE],
+                                    });
+                                }
+                                else {
+                                    attrProps.push({
+                                        name: attr.name.name,
+                                        type: [expressionType],
+                                        values: [attr.value.expression.value || attr.value.expression.name],
+                                    });
+                                }
+                            }
+                            else {
+                                attrProps.push({
+                                    name: attr.name.name,
+                                    type: [attr.value?.type],
+                                    values: [attr.value?.value],
+                                });
+                            }
+                        }
+                    });
+                    const existingProps = state.props.get(elName) ?? [];
+                    state.props.set(elName, [...attrProps, ...existingProps]);
+                }
                 state.components.set(elName, (state.components.get(elName) ?? 0) + 1);
             }
             node.children.forEach((child) => {

package/dist/cli.js

@@ -12,7 +12,7 @@ const { output, cleanup } = render(React.createElement(HelpInfo, null));
 program
     .name("zh-adoption")
     .description("CLI for measuring design system usage usage in your products")
-    .version("2.0.2")
+    .version("2.2.0")
     .addHelpText("before", output)
     .addCommand(analyzeCommand())
     .addCommand(authCommand())

package/dist/commands/analyze.utils.d.ts

@@ -1,9 +1,11 @@
 import { RawUsageMap } from "./analyze.js";
+import { ComponentProps } from "../ast/analyze.js";
 export interface ComponentUsageRecord {
     name: string;
     files: string[];
     count: number;
     package: string;
+    props: ComponentProps;
 }
 /**
  * Get a list of files matching extensions, skips hidden files and node_modules

package/dist/commands/track-package.utils.d.ts

@@ -8,3 +8,7 @@ export declare function getPackageInfo(): Promise<{
     files: PackageFile[];
     error: string | null;
 }>;
+/**
+ * Transform exports object into fully qualified aliases
+ */
+export declare function getAliasesFromExports(packageName: string, exports?: PackageFile["exports"]): string[];

package/dist/commands/track-package.utils.js

@@ -21,10 +21,12 @@ export async function getPackageInfo() {
     try {
         const packageFiles = await Promise.all(files.map(async (file) => {
             const fileContents = await readFile(file, "utf-8");
+            const parsedPackage = JSON.parse(fileContents);
             return {
-                name: JSON.parse(fileContents).name,
+                name: parsedPackage.name,
                 path: `.${files[0]?.split(base).pop()}`,
-                version: JSON.parse(fileContents).version,
+                version: parsedPackage.version,
+                exports: parsedPackage.exports,
             };
         }));
         return {
@@ -39,3 +41,13 @@ export async function getPackageInfo() {
         };
     }
 }
+/**
+ * Transform exports object into fully qualified aliases
+ */
+export function getAliasesFromExports(packageName, exports) {
+    if (!exports)
+        return [];
+    return Object.keys(exports)
+        .map((path) => joinPath(packageName, path))
+        .filter((name) => name !== packageName);
+}

package/dist/common/api.d.ts

@@ -1,3 +1,4 @@
+import { ComponentProps } from "../ast/analyze.js";
 import { RawUsageMap } from "../commands/analyze.js";
 import { Credentials } from "./config.js";
 export declare enum ResponseStatus {
@@ -38,7 +39,7 @@ interface PackageDetailsSuccessResponse {
         updated_at: string;
     };
 }
-export declare function submitPackageDetails(name: string, path: string, version: string, credentials: Credentials): Promise<APIResponse<PackageDetailsSuccessResponse, {}, {}>>;
+export declare function submitPackageDetails(name: string, path: string, version: string, aliases: string[], credentials: Credentials): Promise<APIResponse<PackageDetailsSuccessResponse, {}, {}>>;
 interface MonitoredRepoDetailsSuccess {
     monitored_repository: {
         id: number;
@@ -73,10 +74,10 @@ interface ComponentUsageDetailsSuccess {
     };
 }
 export declare function submitUsageData(usage: RawUsageMap, repoName: string, credentials: Credentials): Promise<APIResponse<ComponentUsageDetailsSuccess>>;
-interface RepoNamesSuccss {
+interface RepoNamesSuccess {
     repo_names: string[];
 }
-export declare function getExistingRepoNames(credentials: Credentials): Promise<APIResponse<RepoNamesSuccss>>;
+export declare function getExistingRepoNames(credentials: Credentials): Promise<APIResponse<RepoNamesSuccess>>;
 interface AuthTokensResponse {
     scopes: string[];
     email: string;
@@ -90,4 +91,5 @@ interface AuthTokensResponse {
     };
 }
 export declare function getAuthDetails(credentials: Credentials): Promise<APIResponse<AuthTokensResponse>>;
+export declare function mergeUsageProps(newProps: ComponentProps, currentProps?: ComponentProps): any;
 export {};

package/dist/common/api.js

@@ -13,11 +13,12 @@ export function getZeroheightURL() {
         return new URL("https://zeroheight.com");
     }
 }
-export async function submitPackageDetails(name, path, version, credentials) {
+export async function submitPackageDetails(name, path, version, aliases, credentials) {
     return post("/design_system_packages", {
         name,
         path,
         latest_version: version,
+        aliases,
     }, credentials);
 }
 export async function submitMonitoredRepoDetails(name, version, lockfilePath, packages, credentials) {
@@ -71,13 +72,35 @@ async function request(path, credentials, init) {
     }
     return await response.json();
 }
+export function mergeUsageProps(newProps, currentProps) {
+    if (!currentProps)
+        return newProps;
+    if (!newProps)
+        return currentProps;
+    const props = Array.from(new Set([...Object.keys(currentProps), ...Object.keys(newProps)]));
+    const mergedProps = {};
+    props.forEach((prop) => {
+        const existingProp = currentProps[prop] ?? {};
+        const newProp = newProps[prop];
+        const mergedValues = [
+            ...(existingProp?.values ?? []),
+            ...(newProp?.values ?? []),
+        ];
+        mergedProps[prop] = {
+            type: Array.from(new Set([...(existingProp.type ?? []), ...(newProp?.type ?? [])])),
+            count: mergedValues.length,
+            values: mergedValues,
+        };
+    });
+    return mergedProps;
+}
 /**
  * Transform usage map grouped by file into usage map grouped by component
  */
 function transformUsageByName(usage) {
     const transformedUsageMap = new Map();
     for (const [file, rawUsage] of usage) {
-        for (const { count, package: packageName, name } of rawUsage) {
+        for (const { count, package: packageName, name, props } of rawUsage) {
             const key = `package:${packageName} name:${name}`;
             const currentValue = transformedUsageMap.get(key);
             const newFileList = [...(currentValue?.files ?? []), file]; // Add file to list
@@ -86,6 +109,7 @@ function transformUsageByName(usage) {
                 files: Array.from(new Set(newFileList)), // Ensure unique file paths
                 count: count + (currentValue?.count ?? 0),
                 package: packageName,
+                props: mergeUsageProps(props, currentValue?.props ?? {}),
             });
         }
     }

package/dist/common/types/package-file.d.ts

@@ -5,4 +5,9 @@ export interface PackageFile {
     name: string;
     path: string;
     version: string;
+    exports?: Record<string, Partial<{
+        import: string;
+        require: string;
+        types: string;
+    }> | string>;
 }

package/dist/components/track-package/non-interactive-track-package.js

@@ -2,7 +2,7 @@ import React from "react";
 import { Newline, Text, useApp } from "ink";
 import Spinner from "ink-spinner";
 import { readConfig } from "../../common/config.js";
-import { getPackageInfo } from "../../commands/track-package.utils.js";
+import { getAliasesFromExports, getPackageInfo, } from "../../commands/track-package.utils.js";
 import { ResponseStatus, submitPackageDetails } from "../../common/api.js";
 var Step;
 (function (Step) {
@@ -24,11 +24,12 @@ export default function NonInteractiveTrackPackage() {
         const { files, error } = await getPackageInfo();
         try {
             if (files.length === 1) {
-                const { name, path, version } = files[0];
+                const { name, path, version, exports } = files[0];
                 setPackageName(name);
                 setPackageVersion(version);
                 setCurrentStep(Step.SINGLE_PACKAGE_FOUND);
-                const response = await submitPackageDetails(name, path, version, {
+                const aliases = getAliasesFromExports(name, exports);
+                const response = await submitPackageDetails(name, path, version, aliases, {
                     token: config.token,
                     client: config.client,
                 });
@@ -46,7 +47,8 @@ export default function NonInteractiveTrackPackage() {
                 setPackageFiles(files);
                 setCurrentStep(Step.MULTIPLE_PACKAGES_FOUND);
                 await Promise.all(files.map(async (pack) => {
-                    await submitPackageDetails(pack.name, pack.path, pack.version, {
+                    const aliases = getAliasesFromExports(pack.name, pack.exports);
+                    await submitPackageDetails(pack.name, pack.path, pack.version, aliases, {
                         token: config.token,
                         client: config.client,
                     });

package/dist/components/track-package/track-package.js

@@ -5,7 +5,7 @@ import SelectInput from "ink-select-input";
 import Spinner from "ink-spinner";
 import ConfirmInput from "../ui/confirm-input.js";
 import { readConfig } from "../../common/config.js";
-import { getPackageInfo } from "../../commands/track-package.utils.js";
+import { getAliasesFromExports, getPackageInfo, } from "../../commands/track-package.utils.js";
 import { submitPackageDetails } from "../../common/api.js";
 var Step;
 (function (Step) {
@@ -28,12 +28,13 @@ export default function TrackPackage() {
     const [packageName, setPackageName] = React.useState(null);
     const [packagePath, setPackagePath] = React.useState(null);
     const [packageVersion, setPackageVersion] = React.useState(null);
+    const [packageAliases, setPackageAliases] = React.useState([]);
     const [shouldSend, setShouldSend] = React.useState("");
     const [shouldMultiSelect, setShouldMultiSelect] = React.useState("");
     const [packageSelection, setPackageSelection] = React.useState([]);
     const [selectedFileLabels, setSelectedFileLabels] = React.useState([]);
-    async function submitPackage(name, path, version) {
-        await submitPackageDetails(name, path, version, credentials);
+    async function submitPackage(name, path, version, aliases) {
+        await submitPackageDetails(name, path, version, aliases, credentials);
     }
     async function sendData() {
         setCurrentStep(Step.SENDING_DETAILS);
@@ -42,18 +43,20 @@ export default function TrackPackage() {
                 const packagesToSend = packageFiles.filter((p) => selectedFileLabels.includes(`${p.name}@${p.version}`));
                 if (packagesToSend.length > 0) {
                     await Promise.all(packagesToSend.map(async (pack) => {
-                        submitPackage(pack.name, pack.path, pack.version);
+                        const aliases = getAliasesFromExports(pack.name, pack.exports);
+                        submitPackage(pack.name, pack.path, pack.version, aliases);
                     }));
                 }
                 else {
                     await Promise.all(packageFiles.map(async (pack) => {
-                        submitPackage(pack.name, pack.path, pack.version);
+                        const aliases = getAliasesFromExports(pack.name, pack.exports);
+                        submitPackage(pack.name, pack.path, pack.version, aliases);
                     }));
                 }
                 setCurrentStep(Step.COMPLETE);
             }
             else {
-                await submitPackage(packageName, packagePath, packageVersion);
+                await submitPackage(packageName, packagePath, packageVersion, packageAliases);
                 setCurrentStep(Step.COMPLETE);
             }
         }
@@ -101,10 +104,11 @@ export default function TrackPackage() {
             }
             const { files, error } = await getPackageInfo();
             if (files.length === 1) {
-                const { name, path, version } = files[0];
+                const { name, path, version, exports } = files[0];
                 setPackageName(name);
                 setPackagePath(path);
                 setPackageVersion(version);
+                setPackageAliases(getAliasesFromExports(name, exports));
                 setCurrentStep(Step.SINGLE_PACKAGE_FOUND);
             }
             else if (files.length > 1) {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@zeroheight/adoption-cli",
-  "version": "2.0.2",
+  "version": "2.2.0",
   "license": "ISC",
   "main": "dist/cli.js",
   "bin": {