@dittowords/cli 2.8.0 → 3.2.0-alpha

package/lib/replace.ts

@@ -0,0 +1,106 @@
+import fs from "fs-extra";
+import { parse } from "@babel/parser";
+import traverse from "@babel/traverse";
+import * as t from "@babel/types";
+import { transformFromAst } from "@babel/core";
+
+async function replaceJSXTextInFile(
+  filePath: string,
+  replacement: { searchString: string; replaceWith: string }
+) {
+  const code = await fs.readFile(filePath, "utf-8");
+  const ast = parse(code, {
+    sourceType: "module",
+    plugins: ["jsx", "typescript"],
+  });
+
+  traverse(ast, {
+    JSXText(path) {
+      const { searchString, replaceWith } = replacement;
+
+      const regex = new RegExp(searchString, "gi");
+      if (regex.test(path.node.value)) {
+        const splitValues = splitByCaseInsensitive(
+          path.node.value,
+          searchString
+        );
+        const nodes: (t.JSXElement | t.JSXText)[] = [];
+
+        splitValues.forEach((splitValue) => {
+          if (splitValue.toLowerCase() === searchString.toLowerCase()) {
+            const identifier = t.jsxIdentifier("DittoComponent");
+            const componentId = t.jsxAttribute(
+              t.jsxIdentifier("componentId"),
+              t.stringLiteral(replaceWith)
+            );
+            const o = t.jsxOpeningElement(identifier, [componentId], true);
+            const jsxElement = t.jsxElement(o, undefined, [], true);
+            nodes.push(jsxElement);
+          } else {
+            nodes.push(t.jsxText(splitValue));
+          }
+        });
+
+        path.replaceWithMultiple(nodes);
+      }
+    },
+  });
+
+  // transfromFromAst types are wrong?
+  /* @ts-ignore */
+  const { code: transformedCode } = transformFromAst(ast, code, {
+    // Don't let this codebase's Babel config affect the code we're transforming.
+    configFile: false,
+  });
+  fs.writeFile(filePath, transformedCode);
+}
+
+function splitByCaseInsensitive(str: string, delimiter: string) {
+  return str.split(new RegExp(`(${delimiter})`, "gi")).filter((s) => s !== "");
+}
+
+function replace(options: string[]) {
+  let filePath: string;
+  let searchString: string;
+  let replaceWith: string;
+
+  try {
+    const parsedOptions = parseOptions(options);
+    filePath = parsedOptions.filePath;
+    searchString = parsedOptions.searchString;
+    replaceWith = parsedOptions.replaceWith;
+  } catch (e) {
+    console.error(e);
+    console.error(
+      "Usage for replace: ditto-cli replace <file path> <search string> <replace with>"
+    );
+    return;
+  }
+
+  replaceJSXTextInFile(filePath, { searchString, replaceWith });
+}
+
+function parseOptions(options: string[]): {
+  filePath: string;
+  searchString: string;
+  replaceWith: string;
+} {
+  if (options.length !== 3) {
+    throw new Error(
+      "The options array must contain <file path> <search string> <replace with>."
+    );
+  }
+
+  const filePath = options[0];
+  // Check if the file path exists and points to a regular file (not a directory or other file system object).
+  const isFilePathValid =
+    fs.existsSync(filePath) && fs.lstatSync(filePath).isFile();
+
+  if (!isFilePathValid) {
+    throw new Error(`${filePath} is not a valid file path.`);
+  }
+
+  return { filePath, searchString: options[1], replaceWith: options[2] };
+}
+
+export { replace, parseOptions, replaceJSXTextInFile };

package/lib/types.ts

@@ -5,13 +5,31 @@ export interface Project {
   fileName?: string;
 }
 
+export type Source = Project;
+
+interface ComponentFolder {
+  id: string;
+  name: string;
+}
+
 export interface ConfigYAML {
-  components?: boolean;
-  projects?: Project[];
-  format?: string;
+  sources?: {
+    components?: {
+      enabled?: boolean;
+      folders?: ComponentFolder[];
+    };
+    projects?: Project[];
+  };
+  format?: "flat" | "structured" | "android-xml" | "ios-strings";
   status?: string;
   variants?: boolean;
   richText?: boolean;
+
+  // these are legacy fields - if they exist, we should output
+  // a deprecation error, and suggest that they nest them under
+  // a top-level `sources` property
+  components?: boolean;
+  projects?: Project[];
 }
 
 export interface SourceInformation {
@@ -22,6 +40,7 @@ export interface SourceInformation {
   format: string | undefined;
   status: string | undefined;
   richText: boolean | undefined;
+  componentFolders: ComponentFolder[] | null;
 }
 
 export type Token = string | undefined;

package/lib/utils/cleanFileName.ts

@@ -0,0 +1,6 @@
+export function cleanFileName(fileName: string): string {
+  return fileName
+    .replace(/\s{1,}/g, "-")
+    .replace(/[^a-zA-Z0-9-_.]/g, "")
+    .toLowerCase();
+}

package/lib/utils/generateJsDriver.ts

@@ -0,0 +1,68 @@
+import fs from "fs";
+import path from "path";
+import consts from "../consts";
+import output from "../output";
+import { Source } from "../types";
+import { cleanFileName } from "./cleanFileName";
+
+// compatability with legacy method of specifying project ids
+// that is still used by the default format
+const stringifySourceId = (projectId: string) =>
+  projectId === "ditto_component_library" ? projectId : `project_${projectId}`;
+
+/**
+ * Generates an index.js file that can be consumed
+ * by an SDK - this is a big DX improvement because
+ * it provides a single entry point to get all data
+ * (including variants) instead of having to import
+ * each generated file individually.
+ *
+ * The generated file will have a unified format
+ * independent of the CLI configuration used to fetch
+ * data from Ditto.
+ */
+
+// TODO: support ESM
+export function generateJsDriver(sources: Source[]) {
+  const fileNames = fs
+    .readdirSync(consts.TEXT_DIR)
+    .filter((fileName) => /\.json$/.test(fileName));
+
+  const sourceIdsByName: Record<string, string> = sources.reduce(
+    (agg, source) => {
+      if (source.fileName) {
+        return { ...agg, [cleanFileName(source.fileName)]: source.id };
+      }
+
+      return agg;
+    },
+    {}
+  );
+
+  const data = fileNames.reduce(
+    (obj: Record<string, Record<string, string>>, fileName) => {
+      const [sourceId, rest] = fileName.split("__");
+      const [variantApiId] = rest.split(".");
+
+      const projectId = sourceIdsByName[sourceId];
+      const projectIdStr = stringifySourceId(projectId);
+
+      if (!obj[projectIdStr]) {
+        obj[projectIdStr] = {};
+      }
+
+      obj[projectIdStr][variantApiId] = `require('./${fileName}')`;
+      return obj;
+    },
+    {}
+  );
+
+  let dataString = `module.exports = ${JSON.stringify(data, null, 2)}`
+    // remove quotes around require statements
+    .replace(/"require\((.*)\)"/g, "require($1)");
+
+  const filePath = path.resolve(consts.TEXT_DIR, "index.js");
+  fs.writeFileSync(filePath, dataString, { encoding: "utf8" });
+
+  return `Generated .js SDK driver at ${output.info(filePath)}`;
+}

package/lib/utils/getSelectedProjects.ts

@@ -3,6 +3,7 @@ import yaml, { YAMLException } from "js-yaml";
 
 import { PROJECT_CONFIG_FILE } from "../consts";
 import { ConfigYAML, Project } from "../types";
+import Config, { DEFAULT_CONFIG_JSON } from "../config";
 
 function jsonIsConfigYAML(json: unknown): json is ConfigYAML {
   return typeof json === "object";
@@ -28,28 +29,8 @@ function yamlToJson(_yaml: string): ConfigYAML | null {
  * Returns an array containing all valid projects ({ id, name })
  * currently contained in the project config file.
  */
-export const getSelectedProjects = (
-  configFile = PROJECT_CONFIG_FILE
-): Project[] => {
-  if (!fs.existsSync(configFile)) return [];
+export const getSelectedProjects = (configFile = PROJECT_CONFIG_FILE) =>
+  Config.parseSourceInformation(configFile).validProjects;
 
-  const contentYaml = fs.readFileSync(configFile, "utf8");
-  const contentJson = yamlToJson(contentYaml);
-
-  if (!(contentJson && contentJson.projects)) {
-    return [];
-  }
-
-  return contentJson.projects.filter(({ name, id }) => name && id);
-};
-
-export const getIsUsingComponents = (
-  configFile = PROJECT_CONFIG_FILE
-): boolean => {
-  if (!fs.existsSync(configFile)) return false;
-
-  const contentYaml = fs.readFileSync(configFile, "utf8");
-  const contentJson = yamlToJson(contentYaml);
-
-  return !!contentJson && !!contentJson.components;
-};
+export const getIsUsingComponents = (configFile = PROJECT_CONFIG_FILE) =>
+  Config.parseSourceInformation(configFile).shouldFetchComponentLibrary;

package/lib/utils/projectsToText.ts

@@ -1,6 +1,16 @@
 import output from "../output";
 import { Project } from "../types";
 
+export const getSourceUrl = (sourceId: string) => {
+  let base = "https://app.dittowords.com";
+
+  if (sourceId === "ditto_component_library") {
+    return `${base}/components`;
+  }
+
+  return `${base}/doc/${sourceId}`;
+};
+
 const projectsToText = (projects: Project[]) => {
   return (
     (projects || []).reduce(
@@ -10,7 +20,7 @@ const projectsToText = (projects: Project[]) => {
           "- " +
           output.info(name) +
           " " +
-          output.subtle("https://app.dittowords.com/doc/" + id)),
+          output.subtle(getSourceUrl(id))),
       ""
     ) + "\n"
   );

package/lib/utils/promptForProject.ts

@@ -2,12 +2,11 @@ const { AutoComplete } = require("enquirer");
 
 import output from "../output";
 import { Project } from "../types";
+import { getSourceUrl } from "./projectsToText";
 
 function formatProjectChoice(project: Project) {
   return (
-    project.name +
-    " " +
-    output.subtle(project.url || `https://app.dittowords.com/doc/${project.id}`)
+    project.name + " " + output.subtle(project.url || getSourceUrl(project.id))
   );
 }
 

package/lib/utils/quit.ts

@@ -0,0 +1,5 @@
+export function quit(message: string, exitCode = 2) {
+  console.log(`\n${message}\n`);
+  process.exitCode = exitCode;
+  process.exit();
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dittowords/cli",
-  "version": "2.8.0",
+  "version": "3.2.0-alpha",
   "description": "Command Line Interface for Ditto (dittowords.com).",
   "main": "bin/index.js",
   "scripts": {
@@ -33,7 +33,6 @@
     "ditto-cli": "bin/ditto.js"
   },
   "devDependencies": {
-    "@babel/core": "^7.11.4",
     "@babel/preset-env": "^7.20.2",
     "@babel/preset-typescript": "^7.18.6",
     "@tsconfig/node16": "^1.0.3",
@@ -53,12 +52,20 @@
     "typescript": "^4.7.4"
   },
   "dependencies": {
+    "@babel/core": "^7.11.4",
+    "@babel/parser": "^7.21.4",
+    "@babel/traverse": "^7.21.4",
+    "@babel/types": "^7.21.4",
+    "@types/babel-traverse": "^6.25.7",
+    "@types/fs-extra": "^11.0.1",
     "axios": "^0.27.2",
     "boxen": "^5.1.2",
     "chalk": "^4.1.0",
     "commander": "^6.1.0",
     "enquirer": "^2.3.6",
     "faker": "^5.1.0",
+    "fs-extra": "^11.1.1",
+    "glob": "^9.3.4",
     "js-yaml": "^4.1.0",
     "ora": "^5.0.0",
     "v8-compile-cache": "^2.1.1"

package/tsconfig.json

@@ -6,7 +6,8 @@
     "allowSyntheticDefaultImports": true,
     "resolveJsonModule": true,
     "strictNullChecks": true,
-    "sourceMap": true
+    "sourceMap": true,
+    "strict": true
   },
   "include": ["lib/ditto.ts"]
 }