@plasmicapp/cli 0.1.162

package/src/actions/upload-bundle.ts

@@ -0,0 +1,38 @@
+import pako from "pako";
+import { CommonArgs } from "..";
+import { readFileText } from "../utils/file-utils";
+import { getContext } from "../utils/get-context";
+
+export interface UploadBundleArgs extends CommonArgs {
+  project: string;
+  bundleName: string;
+  bundleJsFile: string;
+  cssFiles: readonly string[];
+  metaJsonFile: string;
+  genModulePath?: string;
+  genCssPaths: string[];
+  pkgVersion?: string;
+  extraPropMetaJsonFile?: string;
+  themeProviderWrapper?: string;
+  themeModuleFile?: string;
+}
+
+export async function uploadJsBundle(opts: UploadBundleArgs) {
+  const context = await getContext(opts);
+  const api = context.api;
+  await api.uploadBundle(
+    opts.project,
+    opts.bundleName,
+    pako.deflate(readFileText(opts.bundleJsFile), { to: "string" }),
+    opts.cssFiles.map((f) => pako.deflate(readFileText(f), { to: "string" })),
+    pako.deflate(readFileText(opts.metaJsonFile), { to: "string" }),
+    opts.genModulePath,
+    opts.genCssPaths,
+    opts.pkgVersion,
+    opts.extraPropMetaJsonFile
+      ? readFileText(opts.extraPropMetaJsonFile)
+      : undefined,
+    opts.themeProviderWrapper,
+    opts.themeModuleFile ? readFileText(opts.themeModuleFile) : undefined
+  );
+}

package/src/actions/watch.ts

@@ -0,0 +1,95 @@
+import L from "lodash";
+import moment from "moment";
+import { CommonArgs } from "..";
+import { logger } from "../deps";
+import { HandledError } from "../utils/error";
+import { getContext, Metadata } from "../utils/get-context";
+import * as semver from "../utils/semver";
+import { sync } from "./sync";
+
+export interface WatchArgs extends CommonArgs {
+  projects: readonly string[];
+  forceOverwrite: boolean;
+  newComponentScheme?: "blackbox" | "direct";
+  appendJsxOnMissingBase?: boolean;
+  yes?: boolean;
+  force?: boolean;
+  nonRecursive?: boolean;
+  skipUpgradeCheck?: boolean;
+  metadata?: string;
+}
+export async function watchProjects(
+  opts: WatchArgs,
+  metadataDefaults?: Metadata,
+  onProjectUpdate?: () => void
+): Promise<void> {
+  // Perform a sync before watch.
+  const syncOpts = {
+    ...opts,
+    quiet: true,
+  };
+  const syncMetadata: Metadata = {
+    ...metadataDefaults,
+    command: "watch", // force this to be set
+  };
+  await sync(syncOpts, syncMetadata);
+
+  const context = await getContext(opts);
+  const config = context.config;
+  const socket = context.api.connectSocket();
+  const projectIds = L.uniq(
+    opts.projects.length > 0
+      ? opts.projects
+      : config.projects.map((c) => c.projectId)
+  );
+
+  // Filter out projects that are not latest
+  const latestProjects = projectIds.filter((projectId) => {
+    const projectConfig = config.projects.find(
+      (p) => p.projectId === projectId
+    );
+    return !projectConfig || semver.isLatest(projectConfig.version);
+  });
+
+  if (projectIds.length !== latestProjects.length) {
+    const filteredProjects = L.difference(projectIds, latestProjects);
+    logger.warn(
+      `Warning: watch only works for projects with version="latest". Ignoring ${filteredProjects}`
+    );
+  }
+
+  if (latestProjects.length === 0) {
+    throw new HandledError(
+      "Don't know which projects to sync; please specify via --projects"
+    );
+  }
+
+  const promise = new Promise<void>((resolve, reject) => {
+    socket.on("initServerInfo", () => {
+      // upon connection, subscribe to changes for argument projects
+      socket.emit("subscribe", {
+        namespace: "projects",
+        projectIds: latestProjects,
+      });
+    });
+    socket.on("error", (data: any) => {
+      reject(new HandledError(data));
+    });
+    socket.on("update", async (data: any) => {
+      // Just run syncProjects() for now when any project has been updated
+      // Note on the 'updated to revision' part: this is parsed by the
+      // loader package to know that we finished updating the components.
+      await sync(syncOpts, syncMetadata);
+      logger.info(
+        `[${moment().format("HH:mm:ss")}] Project ${
+          data.projectId
+        } updated to revision ${data.revisionNum}`
+      );
+
+      onProjectUpdate?.();
+    });
+  });
+
+  logger.info(`Watching projects ${latestProjects} ...`);
+  return promise;
+}

package/src/api.ts

@@ -0,0 +1,407 @@
+import { ProjectSyncMetadataModel } from "@plasmicapp/code-merger";
+import axios, { AxiosError } from "axios";
+import socketio from "socket.io-client";
+import {
+  AuthConfig,
+  CodeConfig,
+  DEFAULT_HOST,
+  ImagesConfig,
+  StyleConfig,
+} from "./utils/config-utils";
+import { HandledError } from "./utils/error";
+import { Metadata } from "./utils/get-context";
+
+export class AppServerError extends Error {
+  constructor(message: string) {
+    super(message);
+  }
+}
+
+export interface ComponentBundle {
+  renderModule: string;
+  skeletonModule: string;
+  cssRules: string;
+  renderModuleFileName: string;
+  skeletonModuleFileName: string;
+  cssFileName: string;
+  componentName: string;
+  id: string;
+  scheme: string;
+  nameInIdToUuid: Array<[string, string]>;
+  isPage: boolean;
+  plumeType?: string;
+}
+
+export interface GlobalVariantBundle {
+  id: string;
+  name: string;
+  contextModule: string;
+  contextFileName: string;
+}
+
+export interface JsBundleTheme {
+  themeFileName: string;
+  themeModule: string;
+  bundleName: string;
+}
+
+export interface ProjectMetaBundle {
+  projectId: string;
+  projectName: string;
+  cssFileName: string;
+  cssRules: string;
+  jsBundleThemes?: JsBundleTheme[];
+}
+
+export interface IconBundle {
+  id: string;
+  name: string;
+  module: string;
+  fileName: string;
+}
+
+export interface ImageBundle {
+  id: string;
+  name: string;
+  blob: string;
+  fileName: string;
+}
+
+export interface ProjectVersionMeta {
+  projectId: string;
+  projectApiToken: string;
+  version: string;
+  projectName: string;
+  componentIds: string[];
+  dependencies: {
+    [projectId: string]: string;
+  };
+}
+
+export interface VersionResolution {
+  projects: ProjectVersionMeta[];
+  dependencies: ProjectVersionMeta[];
+  conflicts: ProjectVersionMeta[];
+}
+
+export interface RequiredPackages {
+  "@plasmicapp/loader": string;
+  "@plasmicapp/cli": string;
+  "@plasmicapp/react-web": string;
+  "@plasmicapp/react-web-runtime": string;
+}
+
+export interface ProjectBundle {
+  components: ComponentBundle[];
+  codeComponentMetas: CodeComponentMeta[];
+  projectConfig: ProjectMetaBundle;
+  globalVariants: GlobalVariantBundle[];
+  usedTokens: StyleTokensMap;
+  iconAssets: IconBundle[];
+  imageAssets: ImageBundle[];
+  checksums: ChecksumBundle;
+}
+
+export type ProjectMeta = Omit<ProjectBundle, "projectConfig">;
+
+export interface StyleConfigResponse {
+  defaultStyleCssFileName: string;
+  defaultStyleCssRules: string;
+}
+
+export interface StyleTokensMap {
+  props: {
+    name: string;
+    type: string;
+    value: string | number;
+    meta: {
+      projectId: string;
+      id: string;
+    };
+  }[];
+  global: {
+    meta: {
+      source: "plasmic.app";
+    };
+  };
+}
+
+export interface ChecksumBundle {
+  // List of checksums as [ComponentBundle.id, checksum]
+  renderModuleChecksums: Array<[string, string]>;
+  // List of checksums as [ComponentBundle.id, checksum]
+  cssRulesChecksums: Array<[string, string]>;
+  // List of checksums as [imageBundle.id, checksum]
+  imageChecksums: Array<[string, string]>;
+  // List of checksums as [IconBundle.id, checksum]
+  iconChecksums: Array<[string, string]>;
+  // List of checksums as [GlobalVariant.id, checksum]
+  globalVariantChecksums: Array<[string, string]>;
+  // Checksum of projectCss file
+  projectCssChecksum: string;
+}
+
+export interface CodeComponentMeta {
+  id: string; // component uuid
+  name: string;
+  importPath: string;
+}
+
+export interface ProjectIconsResponse {
+  version: string;
+  icons: IconBundle[];
+}
+
+export interface ProjectIdAndToken {
+  projectId: string;
+  projectApiToken?: string;
+}
+
+export class PlasmicApi {
+  constructor(private auth: AuthConfig) {}
+
+  async genStyleConfig(styleOpts?: StyleConfig): Promise<StyleConfigResponse> {
+    const result = await this.post(
+      `${this.codegenHost}/api/v1/code/style-config`,
+      styleOpts
+    );
+    return result.data as StyleConfigResponse;
+  }
+
+  /**
+   * Sync resolution - Given a fuzzy idea of what the user wants,
+   * (i.e. a versionRange and component names),
+   * ask the server for the exact references for a later call to `projectComponents`
+   * - For components specified in the parameters - the server will return the latest version that satisfies the versionRange
+   * - Any conflicting versions will be returned in `conflicts`, and should cause the client's sync to abort
+   * @param projects
+   * @param recursive
+   */
+  async resolveSync(
+    projects: {
+      projectId: string;
+      versionRange?: string;
+      componentIdOrNames: readonly string[] | undefined;
+      projectApiToken?: string;
+    }[],
+    recursive?: boolean
+  ): Promise<VersionResolution> {
+    const resp: any = await this.post(
+      `${this.codegenHost}/api/v1/code/resolve-sync`,
+      {
+        projects,
+        recursive,
+      }
+    );
+    const versionResolution = resp.data as VersionResolution;
+    return { ...versionResolution };
+  }
+
+  async getCurrentUser() {
+    return await axios.get(`${this.studioHost}/api/v1/auth/self`, {
+      headers: this.makeHeaders(),
+    });
+  }
+
+  async requiredPackages(): Promise<RequiredPackages> {
+    const resp = await this.post(
+      `${this.codegenHost}/api/v1/code/required-packages`
+    );
+    return { ...resp.data } as RequiredPackages;
+  }
+
+  /**
+   * Code-gen endpoint.
+   * This will fetch components at an exact specified version.
+   * If you don't know what version should be used, call `resolveSync` first.
+   * @param projectId
+   * @param cliVersion
+   * @param reactWebVersion
+   * @param newCompScheme
+   * @param existingCompScheme
+   * @param componentIdOrNames
+   * @param version
+   */
+  async projectComponents(
+    projectId: string,
+    opts: {
+      platform: string;
+      newCompScheme: "blackbox" | "direct";
+      // The list of existing components as [componentUuid, codeScheme]
+      existingCompScheme: Array<[string, "blackbox" | "direct"]>;
+      componentIdOrNames: readonly string[] | undefined;
+      version: string;
+      imageOpts: ImagesConfig;
+      stylesOpts: StyleConfig;
+      codeOpts: CodeConfig;
+      checksums: ChecksumBundle;
+      metadata?: Metadata;
+    }
+  ): Promise<ProjectBundle> {
+    const result = await this.post(
+      `${this.codegenHost}/api/v1/projects/${projectId}/code/components`,
+      {
+        ...opts,
+      }
+    );
+    return result.data as ProjectBundle;
+  }
+
+  async uploadBundle(
+    projectId: string,
+    bundleName: string,
+    bundleJs: string,
+    css: string[],
+    metaJson: string,
+    genModulePath: string | undefined,
+    genCssPaths: string[],
+    pkgVersion: string | undefined,
+    extraPropMetaJson: string | undefined,
+    themeProviderWrapper: string | undefined,
+    themeModule: string | undefined
+  ): Promise<StyleTokensMap> {
+    const result = await this.post(
+      `${this.codegenHost}/api/v1/projects/${projectId}/jsbundle/upload`,
+      {
+        projectId,
+        bundleName,
+        bundleJs,
+        css,
+        metaJson,
+        genModulePath,
+        genCssPaths,
+        pkgVersion,
+        extraPropMetaJson,
+        themeProviderWrapper,
+        themeModule,
+      }
+    );
+    return result.data as StyleTokensMap;
+  }
+
+  async projectStyleTokens(
+    projectId: string,
+    versionRange?: string
+  ): Promise<StyleTokensMap> {
+    const result = await this.post(
+      `${this.codegenHost}/api/v1/projects/${projectId}/code/tokens`,
+      { versionRange }
+    );
+    return result.data as StyleTokensMap;
+  }
+
+  async projectIcons(
+    projectId: string,
+    versionRange?: string,
+    iconIds?: string[]
+  ): Promise<ProjectIconsResponse> {
+    const result = await this.post(
+      `${this.codegenHost}/api/v1/projects/${projectId}/code/icons`,
+      { versionRange, iconIds }
+    );
+    return result.data as ProjectIconsResponse;
+  }
+
+  async projectSyncMetadata(
+    projectId: string,
+    revision: number,
+    rethrowAppError: boolean
+  ): Promise<ProjectSyncMetadataModel> {
+    const result = await this.post(
+      `${this.codegenHost}/api/v1/projects/${projectId}/code/project-sync-metadata`,
+      { revision },
+      rethrowAppError
+    );
+    return ProjectSyncMetadataModel.fromJson(result.data);
+  }
+
+  connectSocket(): SocketIOClient.Socket {
+    const socket = socketio.connect(this.studioHost, {
+      path: `/api/v1/socket`,
+      transportOptions: {
+        polling: {
+          extraHeaders: this.makeHeaders(),
+        },
+      },
+    });
+    return socket;
+  }
+
+  // If rethrowAppError is true, we will throw an exception with the error
+  // message
+  private async post(url: string, data?: any, rethrowAppError?: boolean) {
+    try {
+      return await axios.post(
+        url,
+        { projectIdsAndTokens: this.projectIdsAndTokens, ...data },
+        {
+          headers: this.makeHeaders(),
+        }
+      );
+    } catch (e) {
+      const error = e as AxiosError;
+      const errorMsg = this.makeErrorMessage(error);
+
+      if (rethrowAppError) {
+        throw new AppServerError(errorMsg);
+      }
+
+      if (!errorMsg) {
+        throw e;
+      }
+
+      throw new HandledError(errorMsg);
+    }
+  }
+
+  private makeErrorMessage(error: AxiosError) {
+    const response = error.response;
+    if (!response) {
+      return undefined;
+    }
+    if (response.status === 403) {
+      return `Incorrect Plasmic credentials; please check your .plasmic.auth file or your project API tokens.`;
+    }
+    if (response.data?.error?.message) {
+      return response.data.error.message;
+    } else if (response.data) {
+      return `Error: request failed with status code ${response.status}. The response is
+  ${response.data}`;
+    } else {
+      return undefined;
+    }
+  }
+
+  private makeHeaders() {
+    const headers: Record<string, string> = {
+      "x-plasmic-api-user": this.auth.user,
+      "x-plasmic-api-token": this.auth.token,
+    };
+
+    if (this.auth.basicAuthUser && this.auth.basicAuthPassword) {
+      const authString = Buffer.from(
+        `${this.auth.basicAuthUser}:${this.auth.basicAuthPassword}`
+      ).toString("base64");
+      headers["Authorization"] = `Basic ${authString}`;
+    }
+
+    return headers;
+  }
+
+  private projectIdsAndTokens?: ProjectIdAndToken[];
+  attachProjectIdsAndTokens(idsAndTokens: ProjectIdAndToken[]) {
+    this.projectIdsAndTokens = idsAndTokens;
+  }
+
+  private get studioHost() {
+    return this.auth.host;
+  }
+
+  private get codegenHost() {
+    if (!this.auth.host || this.auth.host === DEFAULT_HOST) {
+      return "https://codegen.plasmic.app";
+    } else {
+      return this.auth.host;
+    }
+  }
+}

package/src/deps.ts

@@ -0,0 +1,18 @@
+import winston from "winston";
+
+export const logger = winston.createLogger({
+  level: "info",
+  format: winston.format.json(),
+  defaultMeta: {},
+  transports: [
+    new winston.transports.Console({
+      format: winston.format.printf(
+        (info) => `${info.message}`
+        //info => `${moment().format("HH:mm:ss")}:${info.level}\t${info.message}`
+      ),
+      stderrLevels: ["error"],
+    }),
+    //new winston.transports.File({ filename: "error.log", level: "error" }),
+    //new winston.transports.File({ filename: "combined.log", level: "info" }),
+  ],
+});