@zeroheight/adoption-cli 0.2.13 → 0.3.1

package/CHANGELOG.md

@@ -1,5 +1,14 @@
 # Release notes
 
+## [0.3.1](https://www.npmjs.com/package/@zeroheight/adoption-cli/v/0.3.1) - 30th July 2024
+
+- Condense analyze output to be easier to parse
+- Output parsing errors into log file
+
+## [0.3.0](https://www.npmjs.com/package/@zeroheight/adoption-cli/v/0.3.0) - 29th July 2024
+
+- Replace acorn parser with oxc-parser
+
 ## [0.2.13](https://www.npmjs.com/package/@zeroheight/adoption-cli/v/0.2.13) - 25th July 2024
 
 - Fix ws dependency security issue — https://github.com/advisories/GHSA-3h5v-q93c-6h6q

package/dist/ast/analyze.d.ts

@@ -1,4 +1,8 @@
-import type { Node } from "acorn";
+import type { Node, Program, Identifier } from "acorn";
+export interface PlainIdentifier extends Node {
+    type: "Identifier";
+    local: Identifier;
+}
 export type VisitorState = {
     components: Map<string, number>;
     imports: Map<string, {
@@ -11,4 +15,4 @@ export type RawUsage = {
     count: number;
     package: string;
 };
-export declare function analyze(ast: Node): RawUsage[];
+export declare function analyze(ast: Program): RawUsage[];

package/dist/ast/analyze.js

@@ -23,27 +23,98 @@ export function analyze(ast) {
         components: new Map(),
         imports: new Map(),
     };
-    const visitors = {
-        JSXElement(node, state, _nodePath) {
+    const visitorFunctions = {
+        CatchClause() { },
+        CatchParameter() { },
+        ComputedMemberExpression() { },
+        JSXText() { },
+        NullLiteral() { },
+        NumericLiteral() { },
+        BooleanLiteral() { },
+        ObjectExpression() { },
+        ObjectProperty() { },
+        StringLiteral() { },
+        TSAsExpression() { },
+        TSEnumDeclaration() { },
+        TSInterfaceDeclaration() { },
+        TSTypeAliasDeclaration() { },
+        TSModuleDeclaration() { },
+        TSSatisfiesExpression() { },
+        StaticMemberExpression() { },
+        RegExpLiteral() { },
+        TSNonNullExpression() { },
+        JSXEmptyExpression() { },
+        JSXFragment(node, state) {
+            node.children.forEach((child) => walk.recursive(child, state, visitorFunctions, walk.base));
+        },
+        IfStatement(node, state) {
+            walk.recursive(node.consequent, state, visitorFunctions, walk.base);
+            if (node.alternate) {
+                walk.recursive(node.alternate, state, visitorFunctions, walk.base);
+            }
+        },
+        VariableDeclaration(node, state) {
+            node.declarations.forEach((child) => {
+                walk.recursive(child, state, visitorFunctions, walk.base);
+            });
+        },
+        ArrowFunctionExpression(node, state) {
+            if (node.body.type === "FunctionBody") {
+                walk.recursive(node.body, state, visitorFunctions, walk.base);
+            }
+        },
+        ParenthesizedExpression(node, state) {
+            walk.recursive(node.expression, state, visitorFunctions, walk.base);
+        },
+        ReturnStatement(node, state) {
+            if (node.argument) {
+                walk.recursive(node.argument, state, visitorFunctions, walk.base);
+            }
+        },
+        FunctionBody(node, state) {
+            node.statements.forEach((child) => walk.recursive(child, state, visitorFunctions, walk.base));
+        },
+        Program(node, state) {
+            node.body.forEach((child) => {
+                walk.recursive(child, state, visitorFunctions, walk.base);
+            });
+        },
+        JSXElement(node, state) {
             const el = node.openingElement;
             const elName = el.name.name;
-            if (!elName)
-                return;
             // Ignore html tags e.g. div, h1, span
-            if (elName[0] === elName[0]?.toLocaleLowerCase())
-                return;
-            state.components.set(elName, (state.components.get(elName) ?? 0) + 1);
+            if (elName?.[0] !== elName?.[0]?.toLocaleLowerCase()) {
+                state.components.set(elName, (state.components.get(elName) ?? 0) + 1);
+            }
+            node.children.forEach((child) => {
+                walk.recursive(child, state, visitorFunctions, walk.base);
+            });
+        },
+        CallExpression(node, state) {
+            node.arguments.forEach((child) => walk.recursive(child, state, visitorFunctions, walk.base));
+        },
+        ExportDefaultDeclaration(node, state) {
+            if (node.declaration.type === "FunctionDeclaration") {
+                const { statements } = node.declaration.body;
+                statements.forEach((child) => {
+                    walk.recursive(child, state, visitorFunctions, walk.base);
+                });
+            }
+        },
+        JSXExpressionContainer(node, state) {
+            walk.recursive(node.expression, state, visitorFunctions, walk.base);
         },
-        ImportDeclaration(node, state, _nodePath) {
-            const packageName = node.source.value;
-            node.specifiers.forEach((specifier) => {
+        ImportDeclaration(node, state) {
+            const packageName = node.source.value?.toString() ?? "";
+            node.specifiers?.forEach((specifier) => {
                 // not handling namespace imports as we can't determine the actual name
                 // e.g. import * as MyIconLibrary from 'my-icon-library'
                 if (specifier.type === "ImportNamespaceSpecifier") {
                     return;
                 }
                 let name = specifier.local.name;
-                if (specifier.type === "ImportDefaultSpecifier") {
+                if (specifier.type === "ImportDefaultSpecifier" ||
+                    specifier.type === "Identifier") {
                     // handles the following cases:
                     // import Icon from 'my-icon-library'
                     name = specifier.local.name;
@@ -63,23 +134,10 @@ export function analyze(ast) {
                 });
             });
         },
-    };
-    const base = {
-        ...walk.base,
-        TSInterfaceDeclaration() { },
-        TSModuleDeclaration() { },
-        TSAsExpression() { },
-        TSDeclareFunction() { },
-        TSTypeAliasDeclaration() { },
-        TSNonNullExpression() { },
-        TSEnumDeclaration() { },
-        TSParameterProperty() { },
-        TSImportEqualsDeclaration() { },
-        TSInstantiationExpression() { },
-        TSDeclareMethod() { },
+        // FIXME: Not the best typing but there are additional types not in acorn
     };
     try {
-        walk.ancestor(ast, visitors, base, visitorState);
+        walk.recursive(ast, visitorState, visitorFunctions, walk.base);
     }
     catch (e) {
         // We don't want to log the error to the users - maybe could add some actually logging in the future

package/dist/ast/parser.d.ts

@@ -1,11 +1,10 @@
-import * as acorn from "acorn";
 /**
  * Parse code and return AST
  *
  * This extends the acorn parser with support for TypeScript and JSX
  *
- * @param code The string containing JS/TS
- * @param version a version of ECMA Script to use, defaults to latest
+ * @param code The string containing JS?X/TS?X
+ * @param sourceFilename a filename to help with inference
  * @returns Parsed AST
  */
-export declare function parse(code: string, version?: acorn.ecmaVersion): acorn.Program;
+export declare function parse(code: string, sourceFilename?: string): any;

package/dist/ast/parser.js

@@ -1,23 +1,16 @@
-import * as acorn from "acorn";
-import { tsPlugin } from "acorn-typescript";
-import * as walk from "acorn-walk";
-import { extend } from "acorn-jsx-walk";
+import oxc from "oxc-parser";
 /**
  * Parse code and return AST
  *
  * This extends the acorn parser with support for TypeScript and JSX
  *
- * @param code The string containing JS/TS
- * @param version a version of ECMA Script to use, defaults to latest
+ * @param code The string containing JS?X/TS?X
+ * @param sourceFilename a filename to help with inference
  * @returns Parsed AST
  */
-export function parse(code, version = "latest") {
-    const typescriptPlugin = tsPlugin();
-    extend(walk.base);
-    const JSXParser = acorn.Parser.extend(typescriptPlugin);
-    return JSXParser.parse(code, {
-        ecmaVersion: version,
-        sourceType: "module",
-        locations: true,
-    });
+export function parse(code, sourceFilename) {
+    const result = oxc.parseSync(code, { sourceFilename, sourceType: "module" });
+    // TODO: Surface these errors to help in debugging
+    // console.error(result.errors)
+    return JSON.parse(result.program);
 }

package/dist/cli.js

@@ -10,7 +10,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("0.2.13")
+    .version("0.3.1")
     .addHelpText("before", output)
     .addCommand(analyzeCommand())
     .addCommand(authCommand());

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

@@ -15,6 +15,6 @@ export interface ComponentUsageRecord {
  */
 export declare function findFiles(base: string, extensions: string, ignorePattern: string): Promise<string[]>;
 export declare function analyzeFiles(extensions: string, ignorePattern: string): Promise<{
-    errors: never[];
+    errorFile: string | null;
     usage: RawUsageMap;
 }>;

package/dist/commands/analyze.utils.js

@@ -51,18 +51,27 @@ export async function analyzeFiles(extensions, ignorePattern) {
     if (files.length === 0) {
         throw new Error("Can't find any relevant files");
     }
+    const parseErrors = [];
     const usageMap = new Map();
     for (const file of files) {
         try {
             const fileContents = await readFile(file, "utf-8");
-            const ast = parse(fileContents);
+            const ast = parse(fileContents, file);
             const usage = analyze(ast);
             if (usage.length > 0) {
                 const relativePath = file.slice(process.cwd().length);
                 usageMap.set(relativePath, usage);
             }
         }
-        catch { }
+        catch {
+            parseErrors.push(`Can't parse file ${file}`);
+        }
+    }
+    const errorFile = `/tmp/zh-adoption-analyze-errors-${Date.now()}`;
+    if (parseErrors.length > 0) {
+        const file = fs.createWriteStream(errorFile);
+        parseErrors.forEach((err) => { file.write(err + '\n'); });
+        file.end();
     }
-    return { errors: [], usage: usageMap };
+    return { errorFile: parseErrors.length > 0 ? errorFile : null, usage: usageMap };
 }

package/dist/components/analyze/analyze.d.ts

@@ -2,7 +2,7 @@ import React from "react";
 import { RawUsageMap } from "../../commands/analyze.js";
 export interface AnalyzeProps {
     onAnalyzeFiles: () => Promise<{
-        errors: string[];
+        errorFile: string | null;
         usage: RawUsageMap;
     }>;
     dryRun: boolean;

package/dist/components/analyze/analyze.js

@@ -8,19 +8,23 @@ import Link from "ink-link";
 import NoCredentialsOnboarding from "../auth/no-credentials-onboarding.js";
 import { getZeroheightURL, submitUsageData } from "../../common/api.js";
 import RepoNamePrompt from "../repo-name-prompt.js";
+import ConfirmInput from "../ui/confirm-input.js";
 export default function Analyze({ onAnalyzeFiles, dryRun, repoName, }) {
     const { exit } = useApp();
     const [usageResult, setUsageResult] = React.useState(null);
     const [isSendingData, setIsSendingData] = React.useState(false);
     const [errorList, setErrorList] = React.useState([]);
+    const [errorFileLocation, setErrorFileLocation] = React.useState(null);
     const [credentials, setCredentials] = React.useState(null);
     const [resourceURL, setResourceURL] = React.useState(null);
     const [repo, setRepo] = React.useState(repoName);
     const [promptRepo, setPromptRepo] = React.useState(repoName === undefined);
+    const [showContinue, setShowContinue] = React.useState(false);
+    const [showMoreResults, setShowMoreResults] = React.useState("");
     React.useEffect(() => {
         onAnalyzeFiles()
-            .then(({ errors, usage }) => {
-            setErrorList((s) => [...s, ...errors]);
+            .then(({ errorFile, usage }) => {
+            setErrorFileLocation(errorFile);
             setUsageResult(usage);
         })
             .catch((e) => setErrorList((s) => [...s, e]));
@@ -70,6 +74,24 @@ export default function Analyze({ onAnalyzeFiles, dryRun, repoName, }) {
         });
         setPromptRepo(false);
     }
+    function handleShowMore(showMore) {
+        if (showMore) {
+            setShowMoreResults('true');
+        }
+        else {
+            setShowContinue(true);
+        }
+    }
+    function calculateNumberOfComponents() {
+        if (usageResult) {
+            const components = Array.from(usageResult.entries()).flatMap((comps) => comps[1]);
+            const componentCount = components.reduce((prev, next) => {
+                return prev + next.count;
+            }, 0);
+            return componentCount;
+        }
+        return 0;
+    }
     if (errorList.length > 0) {
         return (React.createElement(Box, { flexDirection: "column" },
             React.createElement(Text, { color: "red" }, "Error:"),
@@ -117,7 +139,27 @@ export default function Analyze({ onAnalyzeFiles, dryRun, repoName, }) {
                 " ",
                 React.createElement(Link, { url: resourceURL.toString() }, "usage data on zeroheight"))));
     }
-    if (usageResult && !promptRepo) {
+    if (usageResult && !promptRepo && !(showMoreResults === 'true' || showContinue)) {
+        return (React.createElement(Box, { flexDirection: "column" },
+            React.createElement(Text, { color: "green" },
+                calculateNumberOfComponents(),
+                " components found"),
+            errorFileLocation && (React.createElement(React.Fragment, null,
+                React.createElement(Newline, null),
+                React.createElement(Box, null,
+                    React.createElement(Text, { color: "red" }, "Error:"),
+                    React.createElement(Text, null,
+                        ' ',
+                        "Some files could not be parsed. Errors can be found at ",
+                        React.createElement(Link, { url: errorFileLocation }, errorFileLocation))))),
+            React.createElement(Box, null,
+                React.createElement(Text, null,
+                    "Show more details?",
+                    " ",
+                    React.createElement(Text, { dimColor: true }, "(y/N)")),
+                React.createElement(ConfirmInput, { isChecked: false, value: showMoreResults, onChange: setShowMoreResults, onSubmit: handleShowMore }))));
+    }
+    if (usageResult && !promptRepo && showMoreResults === 'true') {
         return (React.createElement(Box, { flexDirection: "column" },
             React.createElement(UsageTable, { usage: usageResult }),
             dryRun && (React.createElement(React.Fragment, null,
@@ -129,6 +171,17 @@ export default function Analyze({ onAnalyzeFiles, dryRun, repoName, }) {
                 React.createElement(Newline, null))),
             !dryRun && React.createElement(ContinuePrompt, { onContinue: handleContinue })));
     }
+    if (usageResult && !promptRepo && showContinue) {
+        return (React.createElement(Box, { flexDirection: "column" },
+            dryRun && (React.createElement(React.Fragment, null,
+                React.createElement(Newline, null),
+                React.createElement(Text, null,
+                    "Nothing sent to zeroheight, if you want to track component usage data then remove the ",
+                    React.createElement(Text, { italic: true }, "--dry-run"),
+                    " option."),
+                React.createElement(Newline, null))),
+            !dryRun && React.createElement(ContinuePrompt, { onContinue: handleContinue })));
+    }
     if (promptRepo) {
         return (React.createElement(RepoNamePrompt, { credentials: credentials, onRepoNameSelected: handleOnRepoNameSelected }));
     }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@zeroheight/adoption-cli",
-  "version": "0.2.13",
+  "version": "0.3.1",
   "license": "ISC",
   "main": "dist/cli.js",
   "bin": {
@@ -26,8 +26,6 @@
   ],
   "dependencies": {
     "acorn": "^8.11.3",
-    "acorn-jsx-walk": "^2.0.0",
-    "acorn-typescript": "^1.4.13",
     "acorn-walk": "^8.3.2",
     "chalk": "^5.2.0",
     "commander": "^12.0.0",
@@ -39,6 +37,7 @@
     "ink-select-input": "^5.0.0",
     "ink-spinner": "^5.0.0",
     "ink-text-input": "^5.0.1",
+    "oxc-parser": "^0.22.0",
     "react": "^18.2.0",
     "yn": "^5.0.0"
   },