@dittowords/cli 2.8.0 → 3.2.0-alpha

package/lib/generate-suggestions.ts

@@ -0,0 +1,107 @@
+import fs from "fs-extra";
+import glob from "glob";
+import { parse } from "@babel/parser";
+import traverse from "@babel/traverse";
+
+import { fetchComponents } from "./http/fetchComponents";
+
+async function generateSuggestions() {
+  const components = await fetchComponents();
+  const results: {
+    [compApiId: string]: FindResults;
+  } = {};
+
+  for (const [compApiId, component] of Object.entries(components)) {
+    if (!results[compApiId]) {
+      results[compApiId] = [];
+    }
+    const result = await findTextInJSXFiles(".", component.text);
+    results[compApiId] = [...results[compApiId], ...result];
+  }
+
+  // Display results to user
+  console.log(JSON.stringify(results, null, 2));
+}
+
+interface Occurence {
+  lineNumber: number;
+  preview: string;
+}
+
+type FindResults = { file: string; occurrences: Occurence[] }[];
+
+async function findTextInJSXFiles(
+  path: string,
+  searchString: string
+): Promise<FindResults> {
+  const result: { file: string; occurrences: Occurence[] }[] = [];
+  const files = glob.sync(`${path}/**/*.+(jsx|tsx)`, {
+    ignore: "**/node_modules/**",
+  });
+
+  const promises: Promise<any>[] = [];
+
+  for (const file of files) {
+    promises.push(
+      fs.readFile(file, "utf-8").then((code) => {
+        const ast = parse(code, {
+          sourceType: "module",
+          plugins: ["jsx", "typescript"],
+        });
+
+        const occurrences: Occurence[] = [];
+
+        traverse(ast, {
+          JSXText(path) {
+            if (path.node.value.includes(searchString)) {
+              const regex = new RegExp(searchString, "g");
+              let match;
+              while ((match = regex.exec(path.node.value)) !== null) {
+                const lines = path.node.value.slice(0, match.index).split("\n");
+
+                if (!path.node.loc) {
+                  continue;
+                }
+
+                const lineNumber = path.node.loc.start.line + lines.length - 1;
+
+                const codeLines = code.split("\n");
+                const line = codeLines[lineNumber - 1];
+                const preview = replaceAt(
+                  line,
+                  match.index,
+                  searchString,
+                  `{{${searchString}}}`
+                );
+
+                occurrences.push({ lineNumber, preview });
+              }
+            }
+          },
+        });
+
+        if (occurrences.length > 0) {
+          result.push({ file, occurrences });
+        }
+      })
+    );
+  }
+
+  await Promise.all(promises);
+
+  return result;
+}
+
+function replaceAt(
+  str: string,
+  index: number,
+  searchString: string,
+  replacement: string
+) {
+  return (
+    str.substring(0, index) +
+    str.substring(index, str.length).replace(searchString, replacement)
+  );
+}
+
+export { findTextInJSXFiles, generateSuggestions };

package/lib/http/fetchComponents.ts

@@ -0,0 +1,14 @@
+import api from "../api";
+
+export async function fetchComponents() {
+  const { data } = await api.get<{
+    [compApiId: string]: {
+      name: string;
+      text: string;
+      status: "NONE" | "WIP" | "REVIEW" | "FINAL";
+      folder: "string" | null;
+    };
+  }>("/components", {});
+
+  return data;
+}

package/lib/http/fetchVariants.ts

@@ -0,0 +1,30 @@
+import { AxiosRequestConfig } from "axios";
+import api from "../api";
+import { PullOptions } from "../pull";
+import { SourceInformation } from "../types";
+
+export async function fetchVariants(
+  source: SourceInformation,
+  options: PullOptions = {}
+) {
+  if (!source.variants) {
+    return null;
+  }
+
+  const { shouldFetchComponentLibrary, validProjects } = source;
+
+  const config: AxiosRequestConfig = {
+    params: { ...options?.meta },
+  };
+
+  // if we're not syncing from the component library, then we pass the project ids
+  // to limit the list of returned variants to only those that are relevant for the
+  // specified projects
+  if (validProjects.length && !shouldFetchComponentLibrary) {
+    config.params.projectIds = validProjects.map(({ id }) => id);
+  }
+
+  const { data } = await api.get<{ apiID: string }[]>("/variants", config);
+
+  return data;
+}

package/lib/init/init.ts

@@ -4,13 +4,15 @@ import boxen from "boxen";
 import chalk from "chalk";
 import projectsToText from "../utils/projectsToText";
 
-import { needsSource, collectAndSaveProject } from "./project";
+import { needsSource, collectAndSaveSource } from "./project";
 import { needsToken, collectAndSaveToken } from "./token";
 
 import config from "../config";
+import output from "../output";
 import sourcesToText from "../utils/sourcesToText";
+import { quit } from "../utils/quit";
 
-export const needsInit = () => needsToken() || needsSource();
+export const needsTokenOrSource = () => needsToken() || needsSource();
 
 function welcome() {
   const msg = chalk.white(`${chalk.bold(
@@ -29,11 +31,41 @@ export const init = async () => {
     await collectAndSaveToken();
   }
 
-  const { hasSourceData, validProjects, shouldFetchComponentLibrary } =
-    config.parseSourceInformation();
+  const {
+    hasSourceData,
+    validProjects,
+    shouldFetchComponentLibrary,
+    hasTopLevelComponentsField,
+    hasTopLevelProjectsField,
+  } = config.parseSourceInformation();
+
+  if (hasTopLevelProjectsField) {
+    return quit(`${output.errorText(
+      `Support for ${output.warnText(
+        "projects"
+      )} as a top-level field has been removed; please configure ${output.warnText(
+        "sources.projects"
+      )} instead.`
+    )}
+See ${output.url("https://github.com/dittowords/cli")} for more information.`);
+  }
+
+  if (hasTopLevelComponentsField) {
+    return quit(
+      `${output.errorText(
+        "Support for `components` as a top-level field has been removed; please configure `sources.components` instead."
+      )}
+See ${output.url("https://github.com/dittowords/cli")} for more information.`
+    );
+  }
 
   if (!hasSourceData) {
-    await collectAndSaveProject(true);
+    console.log(
+      `Looks like there are no Ditto sources selected for your current directory: ${output.info(
+        process.cwd()
+      )}.`
+    );
+    await collectAndSaveSource({ initialize: true, components: true });
     return;
   }
 
@@ -44,4 +76,4 @@ export const init = async () => {
   console.log(message);
 };
 
-export default { needsInit, init };
+export default { init };

package/lib/init/project.test.ts

@@ -42,8 +42,8 @@ describe("saveProject", () => {
   it("creates a config file with config data", () => {
     const fileContents = fs.readFileSync(configFile, "utf8");
     const data = yaml.load(fileContents);
-    expect(data.projects).toBeDefined();
-    expect(data.projects[0].name).toEqual(projectName);
-    expect(data.projects[0].id).toEqual(projectId);
+    expect(data.sources.projects).toBeDefined();
+    expect(data.sources.projects[0].name).toEqual(projectName);
+    expect(data.sources.projects[0].id).toEqual(projectId);
   });
 });

package/lib/init/project.ts

@@ -12,25 +12,18 @@ import {
 import promptForProject from "../utils/promptForProject";
 import { AxiosResponse } from "axios";
 import { Project, Token } from "../types";
-
-function quit(exitCode = 2) {
-  console.log("\nExiting Ditto CLI...\n");
-  process.exitCode = exitCode;
-  process.exit();
-}
+import { quit } from "../utils/quit";
 
 function saveProject(file: string, name: string, id: string) {
-  // old functionality included "ditto_component_library" in the `projects`
-  // array, but we want to always treat the component library as a separate
-  // entity and use the new notation of a top-level `components` key
   if (id === "components") {
-    config.writeProjectConfigData(file, { components: true });
+    config.writeProjectConfigData(file, {
+      sources: { components: { enabled: true } },
+    });
     return;
   }
 
-  const projects = [...getSelectedProjects(), { name, id }];
-
-  config.writeProjectConfigData(file, { projects });
+  const projects = [...getSelectedProjects(file), { name, id }];
+  config.writeProjectConfigData(file, { sources: { projects } });
 }
 
 export const needsSource = () => {
@@ -44,12 +37,8 @@ async function askForAnotherToken() {
   await collectAndSaveToken(message);
 }
 
-async function listProjects(
-  token: Token,
-  projectsAlreadySelected: Project[],
-  componentsSelected: boolean
-) {
-  const spinner = ora("Fetching projects in your workspace...");
+async function listProjects(token: Token, projectsAlreadySelected: Project[]) {
+  const spinner = ora("Fetching sources in your workspace...");
   spinner.start();
 
   let response: AxiosResponse<{ id: string; name: string }[]>;
@@ -64,35 +53,37 @@ async function listProjects(
     throw e;
   }
 
+  const projectsAlreadySelectedSet = projectsAlreadySelected.reduce(
+    (set, project) => set.add(project.id.toString()),
+    new Set<string>()
+  );
+
+  const result = response.data.filter(
+    ({ id }) =>
+      // covers an edge case where v0 of the API includes the component library
+      // in the response from the `/project-names` endpoint
+      id !== "ditto_component_library" &&
+      !projectsAlreadySelectedSet.has(id.toString())
+  );
+
   spinner.stop();
-  return response.data.filter(({ id }: Project) => {
-    if (id === "ditto_component_library") {
-      return !componentsSelected;
-    } else {
-      return !projectsAlreadySelected.some((project) => project.id === id);
-    }
-  });
-}
 
-async function collectProject(token: Token, initialize: boolean) {
-  const path = process.cwd();
-  if (initialize) {
-    console.log(
-      `Looks like there are no Ditto projects selected for your current directory: ${output.info(
-        path
-      )}.`
-    );
-  }
+  return result;
+}
 
+async function collectSource(token: Token, includeComponents: boolean) {
   const projectsAlreadySelected = getSelectedProjects();
-  const usingComponents = getIsUsingComponents();
-  const projects = await listProjects(
-    token,
-    projectsAlreadySelected,
-    usingComponents
-  );
+  const componentSourceSelected = getIsUsingComponents();
+
+  let sources = await listProjects(token, projectsAlreadySelected);
+  if (includeComponents && !componentSourceSelected) {
+    sources = [
+      { id: "ditto_component_library", name: "Ditto Component Library" },
+      ...sources,
+    ];
+  }
 
-  if (!(projects && projects.length)) {
+  if (!sources?.length) {
     console.log("You're currently syncing all projects in your workspace.");
     console.log(
       output.warnText(
@@ -102,24 +93,22 @@ async function collectProject(token: Token, initialize: boolean) {
     return null;
   }
 
-  const nonInitPrompt = usingComponents
-    ? "Add a project"
-    : "Add a project or library";
-
   return promptForProject({
-    projects,
-    message: initialize
-      ? "Choose the project or library you'd like to sync text from"
-      : nonInitPrompt,
+    projects: sources,
+    message: "Choose the source you'd like to sync text from",
   });
 }
 
-export const collectAndSaveProject = async (initialize = false) => {
+export const collectAndSaveSource = async (
+  { components = false }: { initialize?: boolean; components?: boolean } = {
+    components: false,
+  }
+) => {
   try {
     const token = config.getToken(consts.CONFIG_FILE, consts.API_HOST);
-    const project = await collectProject(token, initialize);
+    const project = await collectSource(token, components);
     if (!project) {
-      quit(0);
+      quit("", 0);
       return;
     }
 
@@ -127,7 +116,7 @@ export const collectAndSaveProject = async (initialize = false) => {
       "\n" +
         `Thanks for adding ${output.info(
           project.name
-        )} to your selected projects.\n` +
+        )} to your selected sources.\n` +
         `We saved your updated configuration to: ${output.info(
           consts.PROJECT_CONFIG_FILE
         )}\n`
@@ -138,13 +127,13 @@ export const collectAndSaveProject = async (initialize = false) => {
     console.log(e);
     if (e.response && e.response.status === 404) {
       await askForAnotherToken();
-      await collectAndSaveProject();
+      await collectAndSaveSource({ components });
     } else {
-      quit();
+      quit("", 2);
     }
   }
 };
 
 export const _testing = { saveProject, needsSource };
 
-export default { needsSource, collectAndSaveProject };
+export default { needsSource, collectAndSaveSource };

package/lib/init/token.ts

@@ -8,6 +8,7 @@ import { create } from "../api";
 import consts from "../consts";
 import output from "../output";
 import config from "../config";
+import { quit } from "../utils/quit";
 
 export const needsToken = (configFile?: string, host = consts.API_HOST) => {
   if (config.getTokenFromEnv()) {
@@ -30,9 +31,9 @@ async function checkToken(token: string): Promise<any> {
   const axios = create(token);
   const endpoint = "/token-check";
 
-  const resOrError = await axios
-    .get(endpoint)
-    .catch((error: any) => {
+  let resOrError;
+  try {
+    resOrError = await axios.get(endpoint).catch((error: any) => {
       if (error.code === "ENOTFOUND") {
         return output.errorText(
           `Can't connect to API: ${output.url(error.hostname)}`
@@ -44,13 +45,19 @@ async function checkToken(token: string): Promise<any> {
         );
       }
       return output.warnText("We're having trouble reaching the Ditto API.");
-    })
-    .catch(() =>
-      output.errorText("Sorry! We're having trouble reaching the Ditto API.")
-    );
-  if (typeof resOrError === "string") return resOrError;
+    });
+  } catch (e: unknown) {
+    output.errorText(e as any);
+    output.errorText("Sorry! We're having trouble reaching the Ditto API.");
+  }
 
-  if (resOrError.status === 200) return true;
+  if (typeof resOrError === "string") {
+    return resOrError;
+  }
+
+  if (resOrError?.status === 200) {
+    return true;
+  }
 
   return output.errorText("This API key isn't valid. Please try another.");
 }
@@ -75,12 +82,6 @@ async function collectToken(message: string | null) {
   return response.token;
 }
 
-function quit(exitCode = 2) {
-  console.log("API key was not saved.");
-  process.exitCode = exitCode;
-  process.exit();
-}
-
 /**
  *
  * @param {string | null} message
@@ -99,7 +100,7 @@ export const collectAndSaveToken = async (message: string | null = null) => {
     config.saveToken(consts.CONFIG_FILE, consts.API_HOST, token);
     return token;
   } catch (error) {
-    quit();
+    quit("API token was not saved");
   }
 };