@plasmicapp/cli 0.1.162

package/src/utils/get-context.ts

@@ -0,0 +1,451 @@
+import * as Sentry from "@sentry/node";
+import L from "lodash";
+import * as querystring from "querystring";
+import path from "upath";
+import { initPlasmic } from "../actions/init";
+import { PlasmicApi } from "../api";
+import { logger } from "../deps";
+import { CommonArgs } from "../index";
+import { runNecessaryMigrations } from "../migrations/migrations";
+import { HandledError } from "../utils/error";
+import { getCurrentAuth } from "./auth-utils";
+import {
+  DEFAULT_HOST,
+  findConfigFile,
+  LOCK_FILE_NAME,
+  PlasmicConfig,
+  PlasmicContext,
+  PlasmicLock,
+  readConfig,
+} from "./config-utils";
+import {
+  buildBaseNameToFiles,
+  existsBuffered,
+  fileExists,
+  readFileText,
+} from "./file-utils";
+import { ensure } from "./lang-utils";
+import { getCliVersion } from "./npm-utils";
+import * as prompts from "./prompts";
+
+function createPlasmicLock(): PlasmicLock {
+  return {
+    projects: [],
+    cliVersion: getCliVersion(),
+  };
+}
+
+export function readLock(lockFile: string): PlasmicLock {
+  if (!existsBuffered(lockFile)) {
+    return createPlasmicLock();
+  }
+  try {
+    const result = JSON.parse(readFileText(lockFile!)) as PlasmicLock;
+    return {
+      ...result,
+    };
+  } catch (e) {
+    logger.error(
+      `Error encountered reading ${LOCK_FILE_NAME} at ${lockFile}: ${e}`
+    );
+    throw e;
+  }
+}
+
+function removeMissingFilesFromLock(
+  context: PlasmicContext,
+  config: PlasmicConfig,
+  lock: PlasmicLock
+) {
+  const knownProjects = Object.fromEntries(
+    config.projects.map((project) => [project.projectId, project])
+  );
+  const knownGlobalVariants = Object.fromEntries(
+    context.config.globalVariants.variantGroups.map((vg) => [vg.projectId, vg])
+  );
+  lock.projects = lock.projects
+    .filter((project) => knownProjects[project.projectId])
+    .map((project) => {
+      const knownComponents = Object.fromEntries(
+        knownProjects[project.projectId].components.map((component) => [
+          component.id,
+          component,
+        ])
+      );
+      const knownImages = Object.fromEntries(
+        knownProjects[project.projectId].images.map((image) => [
+          image.id,
+          image,
+        ])
+      );
+      const knownIcons = Object.fromEntries(
+        knownProjects[project.projectId].images.map((icons) => [
+          icons.id,
+          icons,
+        ])
+      );
+
+      project.fileLocks = project.fileLocks.filter((lock) => {
+        switch (lock.type) {
+          default:
+            return false;
+          case "projectCss":
+            return knownProjects[project.projectId].cssFilePath;
+          case "globalVariant":
+            return knownGlobalVariants[project.projectId];
+          case "cssRules":
+          case "renderModule":
+            return knownComponents[lock.assetId];
+          case "image":
+            return knownImages[lock.assetId];
+          case "icon":
+            return knownIcons[lock.assetId];
+        }
+      });
+
+      return project;
+    });
+}
+
+async function attemptToRestoreFilePath(
+  context: PlasmicContext,
+  expectedPath: string,
+  baseNameToFiles: Record<string, string[]>
+) {
+  // If the path is not set, always recreate.
+  if (expectedPath === "") {
+    return undefined;
+  }
+
+  if (fileExists(context, expectedPath)) {
+    return expectedPath;
+  }
+  const fileName = path.basename(expectedPath);
+  if (!baseNameToFiles[fileName]) {
+    const answer = await prompts.askChoice({
+      message: `File ${path.join(
+        context.absoluteSrcDir,
+        expectedPath
+      )} not found. Do you want to recreate it?`,
+      choices: ["Yes", "No"],
+      defaultAnswer: "Yes",
+      hidePrompt: context.cliArgs.yes,
+    });
+
+    if (answer === "No") {
+      throw new HandledError(
+        "Please add this file or update your plasmic.json by removing or changing this path and try again."
+      );
+    }
+    return undefined;
+  }
+
+  if (baseNameToFiles[fileName].length === 1) {
+    const newPath = path.relative(
+      context.absoluteSrcDir,
+      baseNameToFiles[fileName][0]
+    );
+    logger.info(`\tDetected file moved from ${expectedPath} to ${newPath}.`);
+    return newPath;
+  }
+
+  // Multiple files
+  const none = "None.";
+  const answer = await prompts.askChoice({
+    message: `Cannot find expected file at ${expectedPath}. Please select one of the following matches:`,
+    choices: [...baseNameToFiles[fileName], none],
+    defaultAnswer: none,
+    hidePrompt: context.cliArgs.yes,
+  });
+
+  if (answer === none) {
+    throw new HandledError(
+      "Please add this file or update your plasmic.json by removing or changing this path and try again."
+    );
+  }
+  return answer;
+}
+
+async function resolveMissingFilesInConfig(
+  context: PlasmicContext,
+  config: PlasmicConfig
+) {
+  const baseNameToFiles = buildBaseNameToFiles(context);
+
+  // Make sure all the files exist. Prompt the user / exit process if not.
+  async function filterFiles<T>(list: T[], pathProp: keyof T) {
+    const newList = [];
+    for (const item of list) {
+      const newPath = await attemptToRestoreFilePath(
+        context,
+        item[pathProp] as any,
+        baseNameToFiles
+      );
+      if (newPath) {
+        item[pathProp] = newPath as any;
+        newList.push(item);
+      }
+    }
+    return newList;
+  }
+
+  context.config.globalVariants.variantGroups = await filterFiles(
+    context.config.globalVariants.variantGroups,
+    "contextFilePath"
+  );
+
+  context.config.style.defaultStyleCssFilePath =
+    (await attemptToRestoreFilePath(
+      context,
+      context.config.style.defaultStyleCssFilePath,
+      baseNameToFiles
+    )) || "";
+
+  for (const project of config.projects) {
+    project.cssFilePath =
+      (await attemptToRestoreFilePath(
+        context,
+        project.cssFilePath,
+        baseNameToFiles
+      )) || "";
+
+    project.images = await filterFiles(project.images, "filePath");
+    project.icons = await filterFiles(project.icons, "moduleFilePath");
+    project.jsBundleThemes = await filterFiles(
+      project.jsBundleThemes || [],
+      "themeFilePath"
+    );
+
+    // For components, if they decide to recreate in any of the path (css, wrapper, or blackbox component)
+    // we'll delete existing files.
+
+    const newComponents = [];
+    for (const component of project.components) {
+      if (component.type === "mapped") {
+        // For components mapped to an external module, we skip restoring files on disk
+        newComponents.push(component);
+        continue;
+      }
+      const newModulePath = await attemptToRestoreFilePath(
+        context,
+        component.importSpec.modulePath,
+        baseNameToFiles
+      );
+      if (!newModulePath) {
+        continue;
+      }
+      const newRenderModulePath = await attemptToRestoreFilePath(
+        context,
+        component.renderModuleFilePath,
+        baseNameToFiles
+      );
+
+      if (!newRenderModulePath) {
+        continue;
+      }
+
+      const newCssPath = await attemptToRestoreFilePath(
+        context,
+        component.cssFilePath,
+        baseNameToFiles
+      );
+
+      if (!newCssPath) {
+        continue;
+      }
+
+      component.importSpec.modulePath = newModulePath;
+      component.renderModuleFilePath = newRenderModulePath;
+      component.cssFilePath = newCssPath;
+      newComponents.push(component);
+    }
+    project.components = newComponents;
+  }
+}
+
+export async function getContext(
+  args: CommonArgs,
+  { enableSkipAuth = false }: { enableSkipAuth?: boolean } = {}
+): Promise<PlasmicContext> {
+  if (!args.baseDir) args.baseDir = process.cwd();
+  const auth = enableSkipAuth
+    ? await getCurrentOrDefaultAuth(args)
+    : await getOrInitAuth(args);
+
+  /** Sentry */
+  if (auth.host.startsWith(DEFAULT_HOST)) {
+    // Production usage of cli
+    Sentry.init({
+      dsn:
+        "https://3ed4eb43d28646e381bf3c50cff24bd6@o328029.ingest.sentry.io/5285892",
+    });
+    Sentry.configureScope((scope) => {
+      if (auth.user) {
+        scope.setUser({ email: auth.user });
+      }
+      scope.setExtra("cliVersion", getCliVersion());
+      scope.setExtra("args", JSON.stringify(args));
+      scope.setExtra("host", auth.host);
+    });
+  }
+
+  /** PlasmicConfig **/
+  let configFile =
+    args.config || findConfigFile(args.baseDir, { traverseParents: true });
+
+  if (!configFile) {
+    await maybeRunPlasmicInit(args, "plasmic.json", enableSkipAuth);
+    configFile = findConfigFile(args.baseDir, { traverseParents: true });
+    if (!configFile) {
+      const err = new HandledError(
+        "No plasmic.json file found. Please run `plasmic init` first."
+      );
+      throw err;
+    }
+  }
+  const rootDir = path.dirname(configFile);
+  // plasmic.lock should be in the same directory as plasmic.json
+  const lockFile = path.join(rootDir, LOCK_FILE_NAME);
+
+  await runNecessaryMigrations(configFile, lockFile, args.baseDir, args.yes);
+  const config = readConfig(configFile, true);
+
+  /** PlasmicLock */
+  const lock = readLock(lockFile);
+
+  const context = {
+    config,
+    configFile,
+    lock,
+    lockFile,
+    rootDir,
+    absoluteSrcDir: path.isAbsolute(config.srcDir)
+      ? config.srcDir
+      : path.resolve(rootDir, config.srcDir),
+    auth,
+    api: new PlasmicApi(auth),
+    cliArgs: args,
+  };
+
+  await resolveMissingFilesInConfig(context, config);
+  removeMissingFilesFromLock(context, config, lock);
+
+  return context;
+}
+
+/**
+ * Use empty user/token to signify no auth (only returning to provide a default host).
+ */
+async function getCurrentOrDefaultAuth(args: CommonArgs) {
+  const auth = await getCurrentAuth(args.auth);
+  if (auth) {
+    return auth;
+  }
+
+  return {
+    host: DEFAULT_HOST,
+    user: "",
+    token: "",
+  };
+}
+
+async function getOrInitAuth(args: CommonArgs) {
+  const auth = await getCurrentAuth(args.auth);
+
+  if (auth) {
+    return auth;
+  }
+
+  if (await maybeRunPlasmicInit(args, ".plasmic.auth")) {
+    return ensure(await getCurrentAuth());
+  }
+
+  // Could not find the authentication credentials and the user
+  // declined to run plasmic init.
+  throw new HandledError("Could not authenticate.");
+}
+
+async function maybeRunPlasmicInit(
+  args: CommonArgs,
+  missingFile: string,
+  enableSkipAuth?: boolean
+): Promise<boolean> {
+  if (!process.env.QUIET) {
+    logger.info(`No ${missingFile} file found. Initializing plasmic...`);
+  }
+
+  await initPlasmic({
+    host: DEFAULT_HOST,
+    platform: "",
+    codeLang: "",
+    codeScheme: "",
+    styleScheme: "",
+    imagesScheme: "",
+    srcDir: "",
+    plasmicDir: "",
+    imagesPublicDir: "",
+    imagesPublicUrlPrefix: "",
+    enableSkipAuth,
+    ...args,
+  });
+  return true;
+}
+
+/**
+ * Table of where this metadata will be set
+ *
+ * Source             | via       |
+ * -------------------------------------------------------------------------
+ * cli                | defaults  | source=cli    scheme=codegen command=sync|watch
+ * loader             | defaults  | source=loader scheme=loader  command=sync|watch
+ * create-plasmic-app | env       | source=create-plasmic-app
+ * plasmic-action     | env       | source=plasmic-action
+ */
+export interface Metadata {
+  platform?: string; // from plasmic.json
+  source?: "cli" | "loader" | "create-plasmic-app" | "plasmic-action";
+  scheme?: "codegen" | "loader";
+  command?: "sync" | "watch";
+}
+
+/**
+ * Create a metadata bundle
+ * This will be used to tag Segment events (e.g. for codegen)
+ * Merges in:
+ * 1. defaults
+ * 2. PLASMIC_METADATA environment variable settings
+ * 3. arguments from the command-line
+ * to create a single Metadata object for Segment
+ * @param defaults
+ * @param fromArgs
+ */
+export function generateMetadata(
+  defaults: Metadata,
+  fromArgs?: string
+): Metadata {
+  const fromEnv = process.env.PLASMIC_METADATA;
+  const metadataFromEnv = !fromEnv ? {} : { ...querystring.decode(fromEnv) };
+  const metadataFromArgs = !fromArgs ? {} : { ...querystring.decode(fromArgs) };
+  // Priority: 1. args 2. env 3. defaults
+  const metadata = L.assign({ ...defaults }, metadataFromEnv, metadataFromArgs);
+
+  return metadata;
+}
+
+/**
+ * This is meant to be called from consumers of the CLI to set
+ * metadata into the PLASMIC_METADATA environment variable
+ * @param metadata
+ */
+export function setMetadataEnv(metadata: Metadata): void {
+  const fromEnv = process.env.PLASMIC_METADATA
+    ? querystring.decode(process.env.PLASMIC_METADATA)
+    : {};
+  const env = { ...fromEnv };
+  L.toPairs(metadata).forEach(([k, v]) => {
+    if (!env[k]) {
+      env[k] = v;
+    }
+  });
+  process.env.PLASMIC_METADATA = querystring.encode(env);
+}

package/src/utils/help.ts

@@ -0,0 +1,75 @@
+import chalk from "chalk";
+import L from "lodash";
+import wrapAnsi from "wrap-ansi";
+import { logger } from "../deps";
+import { PlasmicContext } from "./config-utils";
+import { ensure } from "./lang-utils";
+
+function wrap(str: string) {
+  return wrapAnsi(str, 60);
+}
+
+export function printFirstSyncInfo(context: PlasmicContext) {
+  const config = context.config;
+  if (config.code.scheme === "blackbox" && config.projects.length > 0) {
+    const project = ensure(L.last(config.projects));
+    logger.info(
+      `\nYour Plasmic project "${project.projectName}" has now been synced to disk.`
+    );
+    const exampleComponent = project.components[0];
+    if (exampleComponent) {
+      logger.info(
+        `
+
+${chalk.bold("Using Plasmic Components")}
+${chalk.bold("------------------------")}
+
+${wrap(
+  `For each component, Plasmic generates two React components in two files.  For example, for component ${chalk.bold(
+    exampleComponent.name
+  )}, there are:`
+)}
+
+* A ${chalk.bold("blackbox")} component at ${chalk.bold.underline(
+          exampleComponent.renderModuleFilePath
+        )}
+${wrap(
+  `This is a blackbox, purely-presentational library component that you can use to render your designs.  This file is owned by Plasmic, and you should not edit it -- it will be overwritten when the component design is updated. This component should only be used by the "wrapper" component (below).`
+)}
+
+* A ${chalk.bold("wrapper")} component at ${chalk.bold.underline(
+          exampleComponent.importSpec.modulePath
+        )}
+${wrap(
+  `This component is owned and edited by you to instantiate the Plasmic${exampleComponent.name} component with desired variants, states, event handlers, and data.  You have complete control over this file, and this is the actual component that should be used by the rest of the codebase.`
+)}
+
+Learn more at https://www.plasmic.app/learn/codegen-guide/
+`
+      );
+    }
+
+    const exampleIcon = project.icons[0];
+    if (exampleIcon) {
+      logger.info(
+        `
+${chalk.bold("Using Icons")}
+${chalk.bold("-----------")}
+
+${wrap(
+  `For each SVG icon, Plasmic also generates a React component. The component takes in all the usual props that you can pass to an svg element, and defaults to width/height of 1em.`
+)}
+
+For example, for the ${chalk.bold(
+          exampleIcon.name
+        )} icon at ${chalk.bold.underline(exampleIcon.moduleFilePath)},
+instantiate it like:
+
+    ${chalk.green(`<${exampleIcon.name} color="red" />`)}
+
+Learn more at https://www.plasmic.app/learn/other-assets/#icons
+`
+      );
+    }
+  }
+}

package/src/utils/lang-utils.ts

@@ -0,0 +1,52 @@
+import L from "lodash";
+
+type StringGen = string | (() => string);
+
+export function flatMap<T, U>(arr: T[], f: (x: T) => U[]) {
+  const r: U[] = [];
+  for (const x of arr) {
+    r.push(...f(x));
+  }
+  return r;
+}
+
+export function ensure<T>(x: T | null | undefined, msg: StringGen = ""): T {
+  if (x === null || x === undefined) {
+    debugger;
+    msg = (L.isString(msg) ? msg : msg()) || "";
+    throw new Error(
+      `Value must not be undefined or null${msg ? `- ${msg}` : ""}`
+    );
+  } else {
+    return x;
+  }
+}
+
+export function ensureString(x: any) {
+  if (L.isString(x)) {
+    return x;
+  } else {
+    throw new Error(`Expected ${x} to be a string`);
+  }
+}
+
+export class AssertionError extends Error {
+  constructor(msg = "Assertion failed") {
+    super(msg);
+  }
+}
+
+export function assert<T>(
+  cond: T,
+  msg: StringGen = "Assertion failed"
+): asserts cond {
+  if (!cond) {
+    // We always generate an non empty message so that it doesn't get swallowed
+    // by the async library.
+    msg = (L.isString(msg) ? msg : msg()) || "Assertion failed";
+    debugger;
+    throw new AssertionError(msg);
+  }
+}
+
+export const tuple = <T extends any[]>(...args: T): T => args;