@plasmicapp/cli 0.1.186 → 0.1.188

package/src/actions/sync.ts

@@ -243,6 +243,7 @@ export async function sync(
     const [projectId, projectApiToken] = projectIdToken.split(":");
     return {
       projectId,
+      branchName: projectConfigMap[projectId]?.projectBranchName ?? "main",
       versionRange:
         versionRange || projectConfigMap[projectId]?.version || "latest",
       componentIdOrNames: undefined, // Get all components!
@@ -255,6 +256,7 @@ export async function sync(
     ? projectWithVersion
     : context.config.projects.map((p) => ({
         projectId: p.projectId,
+        branchName: p.projectBranchName ?? "main",
         versionRange: p.version,
         componentIdOrNames: undefined, // Get all components!
         projectApiToken: p.projectApiToken,
@@ -341,6 +343,7 @@ export async function sync(
         opts,
         projectIdsAndTokens,
         projectMeta.projectId,
+        projectMeta.branchName,
         projectMeta.componentIds,
         projectMeta.version,
         projectMeta.dependencies,
@@ -557,6 +560,7 @@ async function syncProject(
   opts: SyncArgs,
   projectIdsAndTokens: ProjectIdAndToken[],
   projectId: string,
+  branchName: string,
   componentIds: string[],
   projectVersion: string,
   dependencies: { [projectId: string]: string },
@@ -591,26 +595,30 @@ async function syncProject(
   );
 
   // Server-side code-gen
-  const projectBundle = await context.api.projectComponents(projectId, {
-    platform: context.config.platform,
-    newCompScheme: newComponentScheme,
-    existingCompScheme,
-    componentIdOrNames: componentIds,
-    version: projectVersion,
-    imageOpts: context.config.images,
-    stylesOpts: context.config.style,
-    checksums: existingChecksums,
-    codeOpts: context.config.code,
-    metadata: generateMetadata(
-      {
-        ...metadataDefaults,
-        platform: context.config.platform,
-      },
-      opts.metadata
-    ),
-    indirect,
-    wrapPagesWithGlobalContexts: context.config.wrapPagesWithGlobalContexts,
-  });
+  const projectBundle = await context.api.projectComponents(
+    projectId,
+    branchName,
+    {
+      platform: context.config.platform,
+      newCompScheme: newComponentScheme,
+      existingCompScheme,
+      componentIdOrNames: componentIds,
+      version: projectVersion,
+      imageOpts: context.config.images,
+      stylesOpts: context.config.style,
+      checksums: existingChecksums,
+      codeOpts: context.config.code,
+      metadata: generateMetadata(
+        {
+          ...metadataDefaults,
+          platform: context.config.platform,
+        },
+        opts.metadata
+      ),
+      indirect,
+      wrapPagesWithGlobalContexts: context.config.wrapPagesWithGlobalContexts,
+    }
+  );
 
   // Convert from TSX => JSX
   if (context.config.code.lang === "js") {
@@ -653,6 +661,7 @@ async function syncProject(
     projectBundle.projectConfig,
     projectBundle.globalVariants,
     projectBundle.checksums,
+    branchName,
     opts.baseDir
   );
 
@@ -660,6 +669,7 @@ async function syncProject(
     context,
     projectBundle.projectConfig,
     projectApiToken,
+    branchName,
     projectVersion,
     dependencies,
     projectBundle.components,
@@ -672,10 +682,15 @@ async function syncProject(
     indirect
   );
   syncCodeComponentsMeta(context, projectId, projectBundle.codeComponentMetas);
-  await upsertStyleTokens(context, projectBundle.usedTokens);
+  await upsertStyleTokens(
+    context,
+    projectBundle.usedTokens,
+    projectBundle.projectConfig.projectId
+  );
   await syncProjectIconAssets(
     context,
     projectId,
+    branchName,
     projectVersion,
     projectBundle.iconAssets,
     projectBundle.checksums,
@@ -684,6 +699,7 @@ async function syncProject(
   await syncProjectImageAssets(
     context,
     projectId,
+    branchName,
     projectVersion,
     projectBundle.imageAssets,
     projectBundle.checksums
@@ -716,6 +732,7 @@ async function syncProjectConfig(
   context: PlasmicContext,
   projectBundle: ProjectMetaBundle,
   projectApiToken: string,
+  branchName: string,
   version: string,
   dependencies: { [projectId: string]: string },
   componentBundles: ComponentBundle[],
@@ -756,7 +773,11 @@ async function syncProjectConfig(
   }
 
   // plasmic.lock
-  const projectLock = getOrAddProjectLock(context, projectConfig.projectId);
+  const projectLock = getOrAddProjectLock(
+    context,
+    projectConfig.projectId,
+    branchName
+  );
   projectLock.version = version;
   projectLock.dependencies = dependencies;
   projectLock.lang = context.config.code.lang;

package/src/api.ts

@@ -1,6 +1,6 @@
 import { ProjectSyncMetadataModel } from "@plasmicapp/code-merger";
 import axios, { AxiosError } from "axios";
-import socketio from "socket.io-client";
+import socketio, { Socket } from "socket.io-client";
 import {
   AuthConfig,
   CodeConfig,
@@ -75,6 +75,7 @@ export interface ImageBundle {
 
 export interface ProjectVersionMeta {
   projectId: string;
+  branchName: string;
   projectApiToken: string;
   version: string;
   projectName: string;
@@ -201,6 +202,7 @@ export class PlasmicApi {
   async resolveSync(
     projects: {
       projectId: string;
+      branchName: string;
       versionRange?: string;
       componentIdOrNames: readonly string[] | undefined;
       projectApiToken?: string;
@@ -243,9 +245,10 @@ export class PlasmicApi {
 
   /**
    * Code-gen endpoint.
-   * This will fetch components at an exact specified version.
+   * This will fetch components from a given branch at an exact specified version.
    * If you don't know what version should be used, call `resolveSync` first.
    * @param projectId
+   * @param branchName
    * @param cliVersion
    * @param reactWebVersion
    * @param newCompScheme
@@ -255,6 +258,7 @@ export class PlasmicApi {
    */
   async projectComponents(
     projectId: string,
+    branchName: string,
     opts: {
       platform: string;
       newCompScheme: "blackbox" | "direct";
@@ -272,7 +276,7 @@ export class PlasmicApi {
     }
   ): Promise<ProjectBundle> {
     const result = await this.post(
-      `${this.codegenHost}/api/v1/projects/${projectId}/code/components`,
+      `${this.codegenHost}/api/v1/projects/${projectId}/code/components?branchName=${branchName}`,
       {
         ...opts,
       }
@@ -289,14 +293,24 @@ export class PlasmicApi {
 
   async genLocalizationStrings(
     projects: readonly string[],
-    format: "po" | "json" | "lingui"
+    format: "po" | "json" | "lingui",
+    projectIdsAndTokens: ProjectIdAndToken[]
   ) {
     const result = await this.get(
       `${
         this.codegenHost
       }/api/v1/localization/gen-texts?format=${format}&preview=true&${projects
         .map((p) => `projectId=${p}`)
-        .join("&")}`
+        .join("&")}`,
+      undefined,
+      {
+        "x-plasmic-api-project-tokens": projectIdsAndTokens
+          .map(
+            ({ projectId, projectApiToken }) =>
+              `${projectId}:${projectApiToken}`
+          )
+          .join(","),
+      }
     );
     return result.data as string;
   }
@@ -335,10 +349,11 @@ export class PlasmicApi {
 
   async projectStyleTokens(
     projectId: string,
+    branchName: string,
     versionRange?: string
   ): Promise<StyleTokensMap> {
     const result = await this.post(
-      `${this.codegenHost}/api/v1/projects/${projectId}/code/tokens`,
+      `${this.codegenHost}/api/v1/projects/${projectId}/code/tokens?branchName=${branchName}`,
       { versionRange }
     );
     return result.data as StyleTokensMap;
@@ -346,11 +361,12 @@ export class PlasmicApi {
 
   async projectIcons(
     projectId: string,
+    branchName: string,
     versionRange?: string,
     iconIds?: string[]
   ): Promise<ProjectIconsResponse> {
     const result = await this.post(
-      `${this.codegenHost}/api/v1/projects/${projectId}/code/icons`,
+      `${this.codegenHost}/api/v1/projects/${projectId}/code/icons?branchName=${branchName}`,
       { versionRange, iconIds }
     );
     return result.data as ProjectIconsResponse;
@@ -358,19 +374,20 @@ export class PlasmicApi {
 
   async projectSyncMetadata(
     projectId: string,
+    branchName: string,
     revision: number,
     rethrowAppError: boolean
   ): Promise<ProjectSyncMetadataModel> {
     const result = await this.post(
-      `${this.codegenHost}/api/v1/projects/${projectId}/code/project-sync-metadata`,
+      `${this.codegenHost}/api/v1/projects/${projectId}/code/project-sync-metadata?branchName=${branchName}`,
       { revision },
       rethrowAppError
     );
     return ProjectSyncMetadataModel.fromJson(result.data);
   }
 
-  connectSocket(): SocketIOClient.Socket {
-    const socket = socketio.connect(this.studioHost, {
+  connectSocket(): Socket {
+    const socket = socketio(this.studioHost, {
       path: `/api/v1/socket`,
       transportOptions: {
         polling: {
@@ -408,10 +425,10 @@ export class PlasmicApi {
     }
   }
 
-  private async get(url: string, rethrowAppError?: boolean) {
+  private async get(url: string, rethrowAppError?: boolean, extraHeaders?: {}) {
     try {
       return await axios.get(url, {
-        headers: this.makeHeaders(),
+        headers: { ...this.makeHeaders(), ...(extraHeaders ?? {}) },
       });
     } catch (e) {
       const error = e as AxiosError;

package/src/index.ts

@@ -261,6 +261,12 @@ yargs
           type: "boolean",
           describe: "Overwrite the output file.",
           default: false,
+        })
+        .option("project-tokens", {
+          type: "array",
+          default: [],
+          describe:
+            "(Optional) List of project API tokens to be used for auth, in the format PROJECT_ID:PROJECT_API_TOKEN (the pairs should be separated by comma)",
         }),
     (argv) => handleError(localizationStrings(argv))
   )

package/src/test-common/fixtures.ts

@@ -43,6 +43,7 @@ export function standardTestSetup(includeDep = true) {
   // Setup server-side mock data
   const project1: MockProject = {
     projectId: "projectId1",
+    branchName: "main",
     projectApiToken: "abc",
     version: "1.2.3",
     projectName: "project1",
@@ -64,6 +65,7 @@ export function standardTestSetup(includeDep = true) {
   };
   const dependency: MockProject = {
     projectId: "dependencyId1",
+    branchName: "main",
     projectApiToken: "def",
     version: "2.3.4",
     projectName: "dependency1",
@@ -128,6 +130,7 @@ export function expectProject1Components() {
 export const project1Config: ProjectConfig = {
   projectId: "projectId1",
   projectName: "Project 1",
+  projectBranchName: "main",
   version: "latest",
   cssFilePath: "plasmic/PP__demo.css",
   components: [

package/src/utils/auth-utils.ts

@@ -38,7 +38,7 @@ export function authByPolling(
   host: string,
   initToken: string
 ): CancellablePromise<AuthData> {
-  const socket = socketio.connect(host, {
+  const socket = socketio(host, {
     path: `/api/v1/init-token`,
     transportOptions: {
       polling: {
@@ -50,7 +50,7 @@ export function authByPolling(
   });
 
   const promise = new Promise<AuthData>((resolve, reject) => {
-    socket.on("connect", (reason: string) => {
+    socket.on("connect", () => {
       logger.info("Waiting for token...");
     });
 
@@ -219,7 +219,7 @@ export async function getCurrentAuth(authPath?: string) {
     await api.getCurrentUser();
     return auth;
   } catch (e) {
-    if (e.response?.status === 401) {
+    if ((e as any).response?.status === 401) {
       logger.error(`The current credentials expired or are not valid.`);
       return undefined;
     }

package/src/utils/config-utils.ts

@@ -155,6 +155,8 @@ export interface ProjectConfig {
   projectApiToken?: string;
   /** Project name synced down from Studio */
   projectName: string;
+  /** Project branch to be synced */
+  projectBranchName?: string;
   /**
    * A version range for syncing this project. Can be:
    * * "latest" - always syncs down whatever has been saved in the project.
@@ -317,6 +319,7 @@ export interface FileLock {
 
 export interface ProjectLock {
   projectId: string;
+  branchName: string;
   // The exact version that was last synced
   version: string;
   dependencies: {
@@ -550,6 +553,7 @@ export function getOrAddProjectConfig(
 export function getOrAddProjectLock(
   context: PlasmicContext,
   projectId: string,
+  branchName: string,
   base?: ProjectLock // if one doesn't exist, start with this
 ): ProjectLock {
   let project = context.lock.projects.find((p) => p.projectId === projectId);
@@ -558,6 +562,7 @@ export function getOrAddProjectLock(
       ? L.cloneDeep(base)
       : {
           projectId,
+          branchName,
           version: "",
           dependencies: {},
           lang: context.config.code.lang,