@zeroheight/adoption-cli 0.2.8 → 0.2.10

package/dist/ast/html/analyzer.d.ts

@@ -0,0 +1,3 @@
+import { Root } from "hast";
+import { RawUsage } from "../analyze.js";
+export declare function analyze(tree: Root): RawUsage[];

package/dist/ast/html/analyzer.js

@@ -0,0 +1,57 @@
+import { visit } from "unist-util-visit";
+import { visit as visitEstree } from "estree-util-visit";
+import { transformVisitorStateToRawUsage, } from "../analyze.js";
+import { parse as parseTSJS } from "../ts-js/parser.js";
+export function analyze(tree) {
+    /**
+     * TODO: Populating imports means parsing JS files directly and finding:
+     * window.customElements.define('my-custom-element', MyCustomElement);
+     */
+    const state = {
+        components: new Map(),
+        imports: new Map(),
+    };
+    const rawPaths = [];
+    visit(tree, (node) => {
+        if (node.type !== "element")
+            return;
+        if (node.tagName === "script") {
+            rawPaths.push(...analyzeScript(node));
+            return;
+        }
+        const isCustomElement = node.tagName.includes("-");
+        if (!isCustomElement)
+            return;
+        state.components.set(node.tagName, (state.components.get(node.tagName) ?? 0) + 1);
+        // Dumb way of guessing import name
+        rawPaths.forEach((p) => {
+            if (p.includes(node.tagName)) {
+                state.imports.set(node.tagName, {
+                    name: node.tagName,
+                    package: p,
+                });
+            }
+        });
+    });
+    return transformVisitorStateToRawUsage(state);
+}
+function analyzeScript(node) {
+    const importPaths = [];
+    const rawCode = node.children
+        .filter((child) => child.type === "text")
+        .map((child) => child.value)
+        .join("\n");
+    const tree = parseTSJS(rawCode, {
+        type: "ts-js",
+        version: "latest",
+    });
+    visitEstree(tree, (jsNode) => {
+        if (jsNode.type !== "ImportDeclaration")
+            return;
+        const rawPath = jsNode.source.value;
+        if (typeof rawPath === "string") {
+            importPaths.push(rawPath);
+        }
+    });
+    return importPaths;
+}

package/dist/ast/html/parser.d.ts

@@ -0,0 +1,4 @@
+export interface HTMLOptions {
+    type: "html";
+}
+export declare function parse(code: string, _options?: HTMLOptions): import("hast").Root;

package/dist/ast/html/parser.js

@@ -0,0 +1,6 @@
+import { unified } from "unified";
+import rehypeParse from "rehype-parse";
+export function parse(code, _options) {
+    const tree = unified().use(rehypeParse, { fragment: true }).parse(code);
+    return tree;
+}

package/dist/ast/ts-js/analyzer.d.ts

@@ -0,0 +1,2 @@
+import type { Node } from "acorn";
+export declare function analyze(ast: Node): import("../analyze.js").RawUsage[];

package/dist/ast/ts-js/analyzer.js

@@ -0,0 +1,73 @@
+import * as walk from "acorn-walk";
+import { transformVisitorStateToRawUsage } from "../analyze.js";
+export function analyze(ast) {
+    const visitorState = {
+        components: new Map(),
+        imports: new Map(),
+    };
+    const visitors = {
+        JSXElement(node, state, _nodePath) {
+            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);
+        },
+        ImportDeclaration(node, state, _nodePath) {
+            const packageName = node.source.value;
+            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") {
+                    // handles the following cases:
+                    // import Icon from 'my-icon-library'
+                    name = specifier.local.name;
+                }
+                else if (specifier.type === "ImportSpecifier") {
+                    // handles the following cases:
+                    // import { Icon } from 'my-icon-library'
+                    // import { Icon as MyIcon } from 'my-icon-library'
+                    name =
+                        specifier.imported.type === "Literal"
+                            ? specifier.imported.value
+                            : specifier.imported.name;
+                }
+                state.imports.set(specifier.local.name, {
+                    package: packageName,
+                    name,
+                });
+            });
+        },
+    };
+    const base = {
+        ...walk.base,
+        TSInterfaceDeclaration() { },
+        TSModuleDeclaration() { },
+        TSAsExpression() { },
+        TSDeclareFunction() { },
+        TSTypeAliasDeclaration() { },
+        TSNonNullExpression() { },
+        TSEnumDeclaration() { },
+        TSParameterProperty() { },
+        TSImportEqualsDeclaration() { },
+        TSInstantiationExpression() { },
+        TSDeclareMethod() { },
+    };
+    try {
+        walk.ancestor(ast, visitors, base, visitorState);
+    }
+    catch (e) {
+        // We don't want to log the error to the users - maybe could add some actually logging in the future
+        // console.log("error", e);
+    }
+    finally {
+        return transformVisitorStateToRawUsage(visitorState);
+    }
+}

package/dist/ast/ts-js/parser.d.ts

@@ -0,0 +1,6 @@
+import * as acorn from "acorn";
+export interface TSJSOptions {
+    type: "ts-js";
+    version?: acorn.ecmaVersion;
+}
+export declare function parse(code: string, options?: TSJSOptions): acorn.Program;

package/dist/ast/ts-js/parser.js

@@ -0,0 +1,14 @@
+import * as acorn from "acorn";
+import { tsPlugin } from "acorn-typescript";
+import * as walk from "acorn-walk";
+import { extend } from "acorn-jsx-walk";
+export function parse(code, options) {
+    const typescriptPlugin = tsPlugin();
+    extend(walk.base);
+    const JSXParser = acorn.Parser.extend(typescriptPlugin);
+    return JSXParser.parse(code, {
+        ecmaVersion: options?.version ?? "latest",
+        sourceType: "module",
+        locations: true,
+    });
+}

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

package/dist/commands/auth.js

@@ -1,41 +1,9 @@
 import * as React from "react";
 import { Command } from "commander";
-import { Box, Text, render } from "ink";
-import CredentialsAlreadyExists from "../components/auth/credentials-already-exists.js";
-import CredentialsPreview from "../components/auth/credentials-preview.js";
-import NoCredentialsOnboarding from "../components/auth/no-credentials-onboarding.js";
-import { configPath, readConfig, writeConfig } from "../common/config.js";
+import { render } from "ink";
+import Auth from "../components/auth/auth.js";
 export async function authAction(options, renderOptions) {
-    const existingConfig = await readConfig();
-    if (existingConfig) {
-        const { waitUntilExit } = render(React.createElement(CredentialsAlreadyExists, { existingConfig: existingConfig, token: options.token, client: options.client, configPath: configPath(), onOverwriteCredentials: async () => {
-                const newClient = options.client ?? existingConfig.client;
-                const newToken = options.token ?? existingConfig.token;
-                await writeConfig({
-                    client: newClient,
-                    token: newToken,
-                });
-                render(React.createElement(Box, { flexDirection: "column" },
-                    React.createElement(Text, { color: "green" }, "Updated credentials"),
-                    React.createElement(CredentialsPreview, { client: newClient, token: newToken })));
-            } }), renderOptions);
-        await waitUntilExit();
-    }
-    else {
-        const { waitUntilExit, rerender } = render(React.createElement(NoCredentialsOnboarding, { configPath: configPath(), onSaveCredentials: async (persist, newClient, newToken) => {
-                if (persist) {
-                    await writeConfig({
-                        client: newClient,
-                        token: newToken,
-                    });
-                    rerender(React.createElement(Box, { flexDirection: "column" },
-                        React.createElement(Text, { color: "green" }, "Updated credentials"),
-                        React.createElement(CredentialsPreview, { client: newClient, token: newToken })));
-                }
-            } }));
-        await waitUntilExit();
-    }
-    render(React.createElement(Text, { bold: true }, "Done"));
+    render(React.createElement(Auth, { token: options.token, client: options.client }), renderOptions);
 }
 export function authCommand() {
     const command = new Command();

package/dist/components/auth/auth.d.ts

@@ -0,0 +1,7 @@
+import React from "react";
+interface AuthProps {
+    token?: string;
+    client?: string;
+}
+export default function Auth({ token, client }: AuthProps): React.JSX.Element;
+export {};

package/dist/components/auth/auth.js

@@ -0,0 +1,105 @@
+import { Box, Text } from "ink";
+import React from "react";
+import ConfirmInput from "../ui/confirm-input.js";
+import NoCredentialsOnboarding from "./no-credentials-onboarding.js";
+import { configPath, readConfig, writeConfig, } from "../../common/config.js";
+import CredentialsAlreadyExists from "./credentials-already-exists.js";
+import CredentialsPreview from "./credentials-preview.js";
+import Spinner from "ink-spinner";
+var Step;
+(function (Step) {
+    Step[Step["LOADING_CONFIG"] = 0] = "LOADING_CONFIG";
+    Step[Step["PROMPT_OVERWRITE"] = 1] = "PROMPT_OVERWRITE";
+    Step[Step["PROMPT_NEW_CREDENTIALS"] = 2] = "PROMPT_NEW_CREDENTIALS";
+    Step[Step["DONE_WRITE_FAIL"] = 3] = "DONE_WRITE_FAIL";
+    Step[Step["DONE_WRITE_SUCCESS"] = 4] = "DONE_WRITE_SUCCESS";
+    Step[Step["DONE_NO_CHANGE"] = 5] = "DONE_NO_CHANGE";
+})(Step || (Step = {}));
+export default function Auth({ token, client }) {
+    const [shouldOverwriteAnswer, setShouldOverwriteAnswer] = React.useState("");
+    const [existingConfig, setExistingConfig] = React.useState(null);
+    const [currentStep, setCurrentStep] = React.useState(Step.LOADING_CONFIG);
+    React.useEffect(() => {
+        readConfig().then((config) => {
+            setCurrentStep(Step.LOADING_CONFIG);
+            setExistingConfig(config);
+            if (!config) {
+                setCurrentStep(Step.PROMPT_NEW_CREDENTIALS);
+            }
+            else if ((config && token) || (config && client)) {
+                mergeAndWriteConfig(config, client, token);
+            }
+            else if (config) {
+                setCurrentStep(Step.PROMPT_OVERWRITE);
+            }
+        });
+    }, []);
+    async function mergeAndWriteConfig(oldConfig, newClient, newToken) {
+        const clientToWrite = newClient ?? oldConfig?.client;
+        const tokenToWrite = newToken ?? oldConfig?.token;
+        if (!clientToWrite || !tokenToWrite) {
+            setCurrentStep(Step.DONE_WRITE_FAIL);
+            return;
+        }
+        try {
+            const updatedConfig = {
+                client: clientToWrite,
+                token: tokenToWrite,
+            };
+            setCurrentStep(Step.LOADING_CONFIG);
+            setExistingConfig(updatedConfig);
+            await writeConfig(updatedConfig);
+        }
+        catch {
+            setCurrentStep(Step.DONE_WRITE_FAIL);
+            return;
+        }
+        setCurrentStep(Step.DONE_WRITE_SUCCESS);
+    }
+    async function handleSubmitOverwrite(override) {
+        if (override) {
+            setCurrentStep(Step.PROMPT_NEW_CREDENTIALS);
+        }
+        else {
+            setCurrentStep(Step.DONE_NO_CHANGE);
+        }
+    }
+    async function handleSaveCredentials(persist, newClient, newToken) {
+        if (persist) {
+            await mergeAndWriteConfig(existingConfig, newClient, newToken);
+        }
+        else {
+            setCurrentStep(Step.DONE_NO_CHANGE);
+        }
+    }
+    switch (currentStep) {
+        case Step.PROMPT_OVERWRITE:
+            return (React.createElement(React.Fragment, null,
+                existingConfig?.client && existingConfig?.token && (React.createElement(CredentialsAlreadyExists, { configPath: configPath(), existingConfig: existingConfig })),
+                React.createElement(Box, null,
+                    React.createElement(Text, null,
+                        "Would you like to overwrite these credentials?",
+                        " ",
+                        React.createElement(Text, { dimColor: true }, "(y/N)")),
+                    React.createElement(ConfirmInput, { isChecked: false, value: shouldOverwriteAnswer, onChange: setShouldOverwriteAnswer, onSubmit: handleSubmitOverwrite }))));
+        case Step.PROMPT_NEW_CREDENTIALS:
+            return (React.createElement(NoCredentialsOnboarding, { onSaveCredentials: handleSaveCredentials, configPath: configPath() }));
+        case Step.DONE_WRITE_SUCCESS:
+            return (React.createElement(Box, { flexDirection: "column" },
+                React.createElement(Text, { color: "green" }, "Updated credentials"),
+                existingConfig?.client && existingConfig?.token && (React.createElement(CredentialsPreview, { client: existingConfig.client, token: existingConfig.token }))));
+        case Step.DONE_NO_CHANGE:
+            return (React.createElement(Box, { flexDirection: "column" },
+                React.createElement(Text, { color: "yellow" }, "Credentials are unchanged"),
+                existingConfig?.client && existingConfig?.token && (React.createElement(CredentialsPreview, { client: existingConfig.client, token: existingConfig.token }))));
+        case Step.DONE_WRITE_FAIL:
+            return React.createElement(Text, { color: "yellow" }, "Something went wrong, try again.");
+        case Step.LOADING_CONFIG:
+            return (React.createElement(Text, null,
+                React.createElement(Text, { color: "green" },
+                    React.createElement(Spinner, { type: "dots" })),
+                " Loading config..."));
+        default:
+            return React.createElement(Text, null, "Done");
+    }
+}

package/dist/components/auth/credentials-already-exists.d.ts

@@ -1,16 +1,13 @@
 import * as React from "react";
 interface CredentialsAlreadyExistsProps {
-    client?: string;
-    token?: string;
     configPath: string;
     existingConfig: {
         client: string;
         token: string;
     };
-    onOverwriteCredentials: () => Promise<void>;
 }
 /**
- * Show when credentials already exist and prompt user to overwrite if applicable
+ * Show when credentials already exist
  */
-export default function CredentialsAlreadyExists({ client, token, configPath, existingConfig, onOverwriteCredentials, }: CredentialsAlreadyExistsProps): React.JSX.Element;
+export default function CredentialsAlreadyExists({ configPath, existingConfig, }: CredentialsAlreadyExistsProps): React.JSX.Element;
 export {};

package/dist/components/auth/credentials-already-exists.js

@@ -1,31 +1,16 @@
 import * as React from "react";
-import { Box, Text, useApp } from "ink";
+import { Box, Text } from "ink";
 import Link from "ink-link";
 import CredentialsPreview from "./credentials-preview.js";
-import ConfirmInput from "../ui/confirm-input.js";
 /**
- * Show when credentials already exist and prompt user to overwrite if applicable
+ * Show when credentials already exist
  */
-export default function CredentialsAlreadyExists({ client, token, configPath, existingConfig, onOverwriteCredentials, }) {
-    const { exit } = useApp();
-    const [shouldOverwrite, setShouldOverwrite] = React.useState("");
-    async function handleSubmitOverwrite(override) {
-        if (override) {
-            await onOverwriteCredentials();
-        }
-        exit();
-    }
+export default function CredentialsAlreadyExists({ configPath, existingConfig, }) {
     return (React.createElement(Box, { flexDirection: "column" },
         React.createElement(Text, { bold: true, color: "yellow" }, "Credentials already exist"),
         React.createElement(Text, null,
             "You already have credentials in",
             " ",
             React.createElement(Link, { url: configPath }, configPath)),
-        React.createElement(CredentialsPreview, { client: existingConfig.client, token: existingConfig.token }),
-        (client || token) && (React.createElement(Box, null,
-            React.createElement(Text, null,
-                "Would you like to overwrite these credentials?",
-                " ",
-                React.createElement(Text, { dimColor: true }, "(y/N)")),
-            React.createElement(ConfirmInput, { isChecked: false, value: shouldOverwrite, onChange: setShouldOverwrite, onSubmit: handleSubmitOverwrite })))));
+        React.createElement(CredentialsPreview, { client: existingConfig.client, token: existingConfig.token })));
 }

package/dist/components/auth/no-credentials-onboarding.js

@@ -34,7 +34,7 @@ export default function NoCredentialsOnboarding({ onSaveCredentials, configPath,
         field === "write" && (React.createElement(Box, { flexDirection: "column" },
             React.createElement(CredentialsPreview, { client: client, token: token }),
             React.createElement(Text, null,
-                "Would you like to write these credentials to",
+                "Write updated credentials to",
                 " ",
                 React.createElement(Link, { url: configPath }, configPath),
                 "?",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@zeroheight/adoption-cli",
-  "version": "0.2.8",
+  "version": "0.2.10",
   "license": "ISC",
   "main": "dist/cli.js",
   "bin": {
@@ -49,7 +49,7 @@
     "@vdemedes/prettier-config": "^2.0.1",
     "eslint-plugin-react": "^7.32.2",
     "eslint-plugin-react-hooks": "^4.6.0",
-    "ink-testing-library": "git+ssh://git@github.com/vadimdemedes/ink-testing-library.git#f44b077e9a05a1d615bab41c72906726d34ea085",
+    "ink-testing-library": "^4.0.0",
     "memfs": "^4.9.2",
     "mock-stdin": "^1.0.0",
     "prettier": "^2.8.8",