@plasmicapp/cli 0.1.187 → 0.1.188

package/dist/__mocks__/api.d.ts

@@ -1,5 +1,6 @@
 export interface MockProject {
     projectId: string;
+    branchName: string;
     projectApiToken: string;
     version: string;
     projectName: string;
@@ -12,5 +13,6 @@ export interface MockComponent {
     id: string;
     name: string;
     projectId?: string;
+    branchName?: string;
     version?: string;
 }

package/dist/__mocks__/api.js

@@ -59,14 +59,16 @@ function mockProjectToProjectVersionMeta(mock, componentIdOrNames) {
  */
 function addMockProject(proj) {
     const projectId = proj.projectId;
+    const branchName = proj.branchName;
     const version = proj.version;
     // Populate projectId and version into each component
     // will be useful when reading / writing components to files
     proj.components = proj.components.map((c) => {
         return Object.assign(Object.assign({}, c), { projectId,
+            branchName,
             version });
     });
-    const existing = getMockProject(projectId, version);
+    const existing = getMockProject(projectId, branchName, version);
     if (!existing) {
         PROJECTS.push(proj);
     }
@@ -96,18 +98,21 @@ function stringToMockComponent(data) {
 function mockComponentToString(component) {
     return "// " + JSON.stringify(component);
 }
-function getMockProject(projectId, version) {
-    return PROJECTS.find((m) => m.projectId === projectId && m.version === version);
+function getMockProject(projectId, branchName, version) {
+    return PROJECTS.find((m) => m.projectId === projectId &&
+        m.branchName === branchName &&
+        m.version === version);
 }
 /**
  * Only fetch top-level components that match the projectId (optionally also componentIdOrNames + version)
  * Does not crawl the dependency tree
  * @param projectId
+ * @param branchName
  * @param componentIdOrNames
  * @param versionRange
  */
-function getMockComponents(projectId, version, componentIdOrNames) {
-    const project = getMockProject(projectId, version);
+function getMockComponents(projectId, branchName, version, componentIdOrNames) {
+    const project = getMockProject(projectId, branchName, version);
     return !project
         ? []
         : project.components.filter((c) => !componentIdOrNames ||
@@ -156,7 +161,7 @@ function* getDeps(projects) {
     while (queue.length > 0) {
         const curr = lang_utils_1.ensure(queue.shift());
         for (const [projectId, version] of lodash_1.default.toPairs(curr.dependencies)) {
-            const mockProject = lang_utils_1.ensure(getMockProject(projectId, version));
+            const mockProject = lang_utils_1.ensure(getMockProject(projectId, "main", version));
             const projectMeta = mockProjectToProjectVersionMeta(mockProject);
             yield projectMeta;
             queue.push(projectMeta);
@@ -194,7 +199,7 @@ class PlasmicApi {
                 const availableVersions = availableProjects.map((p) => p.version);
                 const version = semver.maxSatisfying(availableVersions, proj.versionRange);
                 if (version) {
-                    const mockProject = lang_utils_1.ensure(getMockProject(proj.projectId, version));
+                    const mockProject = lang_utils_1.ensure(getMockProject(proj.projectId, proj.branchName, version));
                     const projectMeta = mockProjectToProjectVersionMeta(mockProject, proj.componentIdOrNames);
                     results.projects.push(projectMeta);
                 }
@@ -212,7 +217,7 @@ class PlasmicApi {
             return true;
         });
     }
-    projectComponents(projectId, opts) {
+    projectComponents(projectId, branchName, opts) {
         return __awaiter(this, void 0, void 0, function* () {
             const { componentIdOrNames, version } = opts;
             if (PROJECTS.length <= 0) {
@@ -229,7 +234,7 @@ class PlasmicApi {
             if (!deps.every((dep) => this.lastProjectIdsAndTokens.find((p) => p.projectId === dep.projectId))) {
                 throw new Error("No user+token and project API tokens don't match on a dependency");
             }
-            const mockComponents = getMockComponents(projectId, version, componentIdOrNames);
+            const mockComponents = getMockComponents(projectId, branchName, version, componentIdOrNames);
             if (mockComponents.length <= 0) {
                 throw new Error(`Code gen failed: no components match the parameters ${JSON.stringify({ projectId, version, componentIdOrNames }, undefined, 2)}`);
             }
@@ -262,12 +267,12 @@ class PlasmicApi {
             throw new Error("Unimplemented");
         });
     }
-    projectStyleTokens(projectId) {
+    projectStyleTokens(projectId, branchName) {
         return __awaiter(this, void 0, void 0, function* () {
             throw new Error("Unimplemented");
         });
     }
-    projectIcons(projectId) {
+    projectIcons(projectId, branchName) {
         return __awaiter(this, void 0, void 0, function* () {
             throw new Error("Unimplemented");
         });

package/dist/__tests__/project-api-token-spec.js

@@ -96,7 +96,7 @@ describe("Project API tokens", () => {
         // We sync project1 which got updated, but the dependency is still same version.
         fixtures_1.opts.force = false;
         removeAuth();
-        fixtures_1.mockApi.getMockProject("projectId1", "1.2.3").version = "1.2.4";
+        fixtures_1.mockApi.getMockProject("projectId1", "main", "1.2.3").version = "1.2.4";
         yield expect(sync_1.sync(fixtures_1.opts)).resolves.toBeUndefined();
     }));
     test("should prompt for auth if you have only irrelevant tokens", () => __awaiter(void 0, void 0, void 0, function* () {
@@ -134,7 +134,7 @@ describe("Project API tokens", () => {
         // We sync project1 which got updated, but the dependency is still same version.
         fixtures_1.opts.force = false;
         removeAuth();
-        fixtures_1.mockApi.getMockProject("projectId1", "1.2.3").version = "1.2.4";
+        fixtures_1.mockApi.getMockProject("projectId1", "main", "1.2.3").version = "1.2.4";
         yield expect(sync_1.sync(fixtures_1.opts)).resolves.toBeUndefined();
     }));
     test("should fail in loader mode if not available", () => __awaiter(void 0, void 0, void 0, function* () {

package/dist/__tests__/versioned-sync-spec.js

@@ -45,7 +45,7 @@ describe("versioned-sync", () => {
         fixtures_1.opts.projects = ["projectId1"];
         yield expect(sync_1.sync(fixtures_1.opts)).resolves.toBeUndefined();
         // Change component name server-side
-        const mockProject = fixtures_1.mockApi.getMockProject("projectId1", "1.2.3");
+        const mockProject = fixtures_1.mockApi.getMockProject("projectId1", "main", "1.2.3");
         const buttonData = mockProject.components.find((c) => c.id === "buttonId");
         buttonData.name = "NewButton";
         mockProject.version = "2.0.0";
@@ -64,7 +64,7 @@ describe("versioned-sync", () => {
         fixtures_1.opts.projects = ["projectId1"];
         yield expect(sync_1.sync(fixtures_1.opts)).resolves.toBeUndefined();
         // Change component version server-side
-        const mockProject = fixtures_1.mockApi.getMockProject("projectId1", "1.2.3");
+        const mockProject = fixtures_1.mockApi.getMockProject("projectId1", "main", "1.2.3");
         mockProject.version = "1.3.4";
         fixtures_1.mockApi.addMockProject(mockProject);
         // Try syncing again and see if things show up
@@ -79,7 +79,7 @@ describe("versioned-sync", () => {
         fixtures_1.opts.nonRecursive = true;
         yield expect(sync_1.sync(fixtures_1.opts)).resolves.toBeUndefined();
         // Change component version server-side
-        const mockProject = fixtures_1.mockApi.getMockProject("projectId1", "1.2.3");
+        const mockProject = fixtures_1.mockApi.getMockProject("projectId1", "main", "1.2.3");
         mockProject.version = "2.0.0";
         fixtures_1.mockApi.addMockProject(mockProject);
         // Read in updated plasmic.json post-sync
@@ -104,7 +104,7 @@ describe("versioned-sync", () => {
         fixtures_1.opts.nonRecursive = true;
         yield expect(sync_1.sync(fixtures_1.opts)).resolves.toBeUndefined();
         // Change component version server-side
-        const mockProject = fixtures_1.mockApi.getMockProject("projectId1", "1.2.3");
+        const mockProject = fixtures_1.mockApi.getMockProject("projectId1", "main", "1.2.3");
         mockProject.version = "1.10.1";
         fixtures_1.mockApi.addMockProject(mockProject);
         // Update plasmic.json to use semver

package/dist/actions/project-token.js

@@ -27,7 +27,7 @@ exports.getProjectApiToken = (projectId, host) => __awaiter(void 0, void 0, void
     if (auth) {
         const api = new api_1.PlasmicApi(auth);
         const versionResolution = yield api.resolveSync([
-            { projectId, componentIdOrNames: undefined },
+            { projectId, branchName: "main", componentIdOrNames: undefined },
         ]);
         return (_a = versionResolution.projects[0]) === null || _a === void 0 ? void 0 : _a.projectApiToken;
     }

package/dist/actions/sync-components.js

@@ -34,7 +34,7 @@ const updateDirectSkeleton = (newFileContent, editedFileContent, context, compCo
     });
     const mergedFiles = yield code_merger_1.mergeFiles(componentByUuid, compConfig.projectId, code_merger_1.makeCachedProjectSyncDataProvider((projectId, revision) => __awaiter(void 0, void 0, void 0, function* () {
         try {
-            return yield context.api.projectSyncMetadata(projectId, revision, true);
+            return yield context.api.projectSyncMetadata(projectId, "main", revision, true);
         }
         catch (e) {
             if (e instanceof api_1.AppServerError &&

package/dist/actions/sync-global-variants.d.ts

@@ -1,3 +1,3 @@
 import { ChecksumBundle, GlobalVariantBundle, ProjectMetaBundle } from "../api";
 import { PlasmicContext } from "../utils/config-utils";
-export declare function syncGlobalVariants(context: PlasmicContext, projectMeta: ProjectMetaBundle, bundles: GlobalVariantBundle[], checksums: ChecksumBundle, baseDir: string): Promise<void>;
+export declare function syncGlobalVariants(context: PlasmicContext, projectMeta: ProjectMetaBundle, bundles: GlobalVariantBundle[], checksums: ChecksumBundle, branchName: string, baseDir: string): Promise<void>;

package/dist/actions/sync-global-variants.js

@@ -20,10 +20,10 @@ const code_utils_1 = require("../utils/code-utils");
 const config_utils_1 = require("../utils/config-utils");
 const file_utils_1 = require("../utils/file-utils");
 const lang_utils_1 = require("../utils/lang-utils");
-function syncGlobalVariants(context, projectMeta, bundles, checksums, baseDir) {
+function syncGlobalVariants(context, projectMeta, bundles, checksums, branchName, baseDir) {
     return __awaiter(this, void 0, void 0, function* () {
         const projectId = projectMeta.projectId;
-        const projectLock = config_utils_1.getOrAddProjectLock(context, projectId);
+        const projectLock = config_utils_1.getOrAddProjectLock(context, projectId, branchName);
         const existingVariantConfigs = lodash_1.default.keyBy(context.config.globalVariants.variantGroups.filter((group) => group.projectId === projectId), (c) => c.id);
         const globalVariantFileLocks = lodash_1.default.keyBy(projectLock.fileLocks.filter((fileLock) => fileLock.type === "globalVariant"), (fl) => fl.assetId);
         const id2VariantChecksum = new Map(checksums.globalVariantChecksums);

package/dist/actions/sync-icons.d.ts

@@ -4,4 +4,4 @@ import { PlasmicContext } from "../utils/config-utils";
 export interface SyncIconsArgs extends CommonArgs {
     projects: readonly string[];
 }
-export declare function syncProjectIconAssets(context: PlasmicContext, projectId: string, version: string, iconBundles: IconBundle[], checksums: ChecksumBundle, baseDir: string): Promise<void>;
+export declare function syncProjectIconAssets(context: PlasmicContext, projectId: string, branchName: string, version: string, iconBundles: IconBundle[], checksums: ChecksumBundle, baseDir: string): Promise<void>;

package/dist/actions/sync-icons.js

@@ -20,13 +20,13 @@ const code_utils_1 = require("../utils/code-utils");
 const config_utils_1 = require("../utils/config-utils");
 const file_utils_1 = require("../utils/file-utils");
 const lang_utils_1 = require("../utils/lang-utils");
-function syncProjectIconAssets(context, projectId, version, iconBundles, checksums, baseDir) {
+function syncProjectIconAssets(context, projectId, branchName, version, iconBundles, checksums, baseDir) {
     return __awaiter(this, void 0, void 0, function* () {
         const project = config_utils_1.getOrAddProjectConfig(context, projectId);
         if (!project.icons) {
             project.icons = [];
         }
-        const projectLock = config_utils_1.getOrAddProjectLock(context, projectId);
+        const projectLock = config_utils_1.getOrAddProjectLock(context, projectId, branchName);
         const knownIconConfigs = lodash_1.default.keyBy(project.icons, (i) => i.id);
         const iconFileLocks = lodash_1.default.keyBy(projectLock.fileLocks.filter((fileLock) => fileLock.type === "icon"), (fl) => fl.assetId);
         const id2IconChecksum = new Map(checksums.iconChecksums);

package/dist/actions/sync-images.d.ts

@@ -1,6 +1,6 @@
 import { ChecksumBundle, ImageBundle } from "../api";
 import { FixImportContext } from "../utils/code-utils";
 import { PlasmicContext } from "../utils/config-utils";
-export declare function syncProjectImageAssets(context: PlasmicContext, projectId: string, version: string, imageBundles: ImageBundle[], checksums: ChecksumBundle): Promise<void>;
+export declare function syncProjectImageAssets(context: PlasmicContext, projectId: string, branchName: string, version: string, imageBundles: ImageBundle[], checksums: ChecksumBundle): Promise<void>;
 export declare function fixComponentCssReferences(context: PlasmicContext, fixImportContext: FixImportContext, cssFilePath: string): Promise<void>;
 export declare function fixComponentImagesReferences(context: PlasmicContext, fixImportContext: FixImportContext, renderModuleFilePath: string): Promise<boolean>;

package/dist/actions/sync-images.js

@@ -19,10 +19,10 @@ const deps_1 = require("../deps");
 const config_utils_1 = require("../utils/config-utils");
 const file_utils_1 = require("../utils/file-utils");
 const lang_utils_1 = require("../utils/lang-utils");
-function syncProjectImageAssets(context, projectId, version, imageBundles, checksums) {
+function syncProjectImageAssets(context, projectId, branchName, version, imageBundles, checksums) {
     return __awaiter(this, void 0, void 0, function* () {
         const project = config_utils_1.getOrAddProjectConfig(context, projectId);
-        const projectLock = config_utils_1.getOrAddProjectLock(context, projectId);
+        const projectLock = config_utils_1.getOrAddProjectLock(context, projectId, branchName);
         const knownImageConfigs = lodash_1.default.keyBy(project.images, (i) => i.id);
         const imageBundleIds = lodash_1.default.keyBy(imageBundles, (i) => i.id);
         const imageFileLocks = lodash_1.default.keyBy(projectLock.fileLocks.filter((fileLock) => fileLock.type === "image"), (fl) => fl.assetId);

package/dist/actions/sync.js

@@ -150,12 +150,13 @@ function sync(opts, metadataDefaults) {
         // Resolve what will be synced
         const projectConfigMap = lodash_1.default.keyBy(context.config.projects, (p) => p.projectId);
         const projectWithVersion = opts.projects.map((p) => {
-            var _a;
+            var _a, _b, _c;
             const [projectIdToken, versionRange] = p.split("@");
             const [projectId, projectApiToken] = projectIdToken.split(":");
             return {
                 projectId,
-                versionRange: versionRange || ((_a = projectConfigMap[projectId]) === null || _a === void 0 ? void 0 : _a.version) || "latest",
+                branchName: (_b = (_a = projectConfigMap[projectId]) === null || _a === void 0 ? void 0 : _a.projectBranchName) !== null && _b !== void 0 ? _b : "main",
+                versionRange: versionRange || ((_c = projectConfigMap[projectId]) === null || _c === void 0 ? void 0 : _c.version) || "latest",
                 componentIdOrNames: undefined,
                 projectApiToken: projectApiToken || projectIdToToken.get(projectId),
                 indirect: false,
@@ -163,13 +164,17 @@ function sync(opts, metadataDefaults) {
         });
         const projectSyncParams = projectWithVersion.length
             ? projectWithVersion
-            : context.config.projects.map((p) => ({
-                projectId: p.projectId,
-                versionRange: p.version,
-                componentIdOrNames: undefined,
-                projectApiToken: p.projectApiToken,
-                indirect: !!p.indirect,
-            }));
+            : context.config.projects.map((p) => {
+                var _a;
+                return ({
+                    projectId: p.projectId,
+                    branchName: (_a = p.projectBranchName) !== null && _a !== void 0 ? _a : "main",
+                    versionRange: p.version,
+                    componentIdOrNames: undefined,
+                    projectApiToken: p.projectApiToken,
+                    indirect: !!p.indirect,
+                });
+            });
         // Short-circuit if nothing to sync
         if (projectSyncParams.length === 0) {
             throw new error_1.HandledError("Don't know which projects to sync. Please specify via --projects");
@@ -224,7 +229,7 @@ function sync(opts, metadataDefaults) {
             // Sync in sequence (no parallelism)
             // going in reverse to get leaves of the dependency tree first
             for (const projectMeta of projectsToSync) {
-                yield syncProject(context, opts, projectIdsAndTokens, projectMeta.projectId, projectMeta.componentIds, projectMeta.version, projectMeta.dependencies, summary, pendingMerge, projectMeta.indirect, externalNpmPackages, externalCssImports, metadataDefaults);
+                yield syncProject(context, opts, projectIdsAndTokens, projectMeta.projectId, projectMeta.branchName, projectMeta.componentIds, projectMeta.version, projectMeta.dependencies, summary, pendingMerge, projectMeta.indirect, externalNpmPackages, externalCssImports, metadataDefaults);
             }
             // Materialize scheme into each component config.
             context.config.projects.forEach((p) => p.components.forEach((c) => {
@@ -339,7 +344,7 @@ function fixFileExtension(context) {
         });
     });
 }
-function syncProject(context, opts, projectIdsAndTokens, projectId, componentIds, projectVersion, dependencies, summary, pendingMerge, indirect, externalNpmPackages, externalCssImports, metadataDefaults) {
+function syncProject(context, opts, projectIdsAndTokens, projectId, branchName, componentIds, projectVersion, dependencies, summary, pendingMerge, indirect, externalNpmPackages, externalCssImports, metadataDefaults) {
     var _a;
     return __awaiter(this, void 0, void 0, function* () {
         const newComponentScheme = opts.newComponentScheme || context.config.code.scheme;
@@ -348,7 +353,7 @@ function syncProject(context, opts, projectIdsAndTokens, projectId, componentIds
         const projectApiToken = lang_utils_1.ensure((_a = projectIdsAndTokens.find((p) => p.projectId === projectId)) === null || _a === void 0 ? void 0 : _a.projectApiToken, `Could not find the API token for project ${projectId} in list: ${JSON.stringify(projectIdsAndTokens)}`);
         const existingChecksums = checksum_1.getChecksums(context, opts, projectId, componentIds);
         // Server-side code-gen
-        const projectBundle = yield context.api.projectComponents(projectId, {
+        const projectBundle = yield context.api.projectComponents(projectId, branchName, {
             platform: context.config.platform,
             newCompScheme: newComponentScheme,
             existingCompScheme,
@@ -378,12 +383,12 @@ function syncProject(context, opts, projectIdsAndTokens, projectId, componentIds
                 [theme.themeFileName, theme.themeModule] = code_utils_1.maybeConvertTsxToJsx(theme.themeFileName, theme.themeModule, opts.baseDir);
             });
         }
-        yield sync_global_variants_1.syncGlobalVariants(context, projectBundle.projectConfig, projectBundle.globalVariants, projectBundle.checksums, opts.baseDir);
-        yield syncProjectConfig(context, projectBundle.projectConfig, projectApiToken, projectVersion, dependencies, projectBundle.components, opts.forceOverwrite, !!opts.appendJsxOnMissingBase, summary, pendingMerge, projectBundle.checksums, opts.baseDir, indirect);
+        yield sync_global_variants_1.syncGlobalVariants(context, projectBundle.projectConfig, projectBundle.globalVariants, projectBundle.checksums, branchName, opts.baseDir);
+        yield syncProjectConfig(context, projectBundle.projectConfig, projectApiToken, branchName, projectVersion, dependencies, projectBundle.components, opts.forceOverwrite, !!opts.appendJsxOnMissingBase, summary, pendingMerge, projectBundle.checksums, opts.baseDir, indirect);
         syncCodeComponentsMeta(context, projectId, projectBundle.codeComponentMetas);
         yield sync_styles_1.upsertStyleTokens(context, projectBundle.usedTokens, projectBundle.projectConfig.projectId);
-        yield sync_icons_1.syncProjectIconAssets(context, projectId, projectVersion, projectBundle.iconAssets, projectBundle.checksums, opts.baseDir);
-        yield sync_images_1.syncProjectImageAssets(context, projectId, projectVersion, projectBundle.imageAssets, projectBundle.checksums);
+        yield sync_icons_1.syncProjectIconAssets(context, projectId, branchName, projectVersion, projectBundle.iconAssets, projectBundle.checksums, opts.baseDir);
+        yield sync_images_1.syncProjectImageAssets(context, projectId, branchName, projectVersion, projectBundle.imageAssets, projectBundle.checksums);
         (projectBundle.usedNpmPackages || []).forEach((pkg) => externalNpmPackages.add(pkg));
         (projectBundle.externalCssImports || []).forEach((css) => externalCssImports.add(css));
     });
@@ -398,7 +403,7 @@ function syncStyleConfig(context, response) {
         });
     });
 }
-function syncProjectConfig(context, projectBundle, projectApiToken, version, dependencies, componentBundles, forceOverwrite, appendJsxOnMissingBase, summary, pendingMerge, checksums, baseDir, indirect) {
+function syncProjectConfig(context, projectBundle, projectApiToken, branchName, version, dependencies, componentBundles, forceOverwrite, appendJsxOnMissingBase, summary, pendingMerge, checksums, baseDir, indirect) {
     return __awaiter(this, void 0, void 0, function* () {
         const defaultCssFilePath = file_utils_1.defaultResourcePath(context, projectBundle.projectName, projectBundle.cssFileName);
         const isNew = !context.config.projects.find((p) => p.projectId === projectBundle.projectId);
@@ -416,7 +421,7 @@ function syncProjectConfig(context, projectBundle, projectApiToken, version, dep
             projectConfig.cssFilePath = defaultCssFilePath;
         }
         // plasmic.lock
-        const projectLock = config_utils_1.getOrAddProjectLock(context, projectConfig.projectId);
+        const projectLock = config_utils_1.getOrAddProjectLock(context, projectConfig.projectId, branchName);
         projectLock.version = version;
         projectLock.dependencies = dependencies;
         projectLock.lang = context.config.code.lang;

package/dist/api.d.ts

@@ -1,5 +1,5 @@
-/// <reference types="socket.io-client" />
 import { ProjectSyncMetadataModel } from "@plasmicapp/code-merger";
+import { Socket } from "socket.io-client";
 import { AuthConfig, CodeConfig, ImagesConfig, StyleConfig } from "./utils/config-utils";
 import { Metadata } from "./utils/get-context";
 export declare class AppServerError extends Error {
@@ -56,6 +56,7 @@ export interface ImageBundle {
 }
 export interface ProjectVersionMeta {
     projectId: string;
+    branchName: string;
     projectApiToken: string;
     version: string;
     projectName: string;
@@ -155,6 +156,7 @@ export declare class PlasmicApi {
      */
     resolveSync(projects: {
         projectId: string;
+        branchName: string;
         versionRange?: string;
         componentIdOrNames: readonly string[] | undefined;
         projectApiToken?: string;
@@ -164,9 +166,10 @@ export declare class PlasmicApi {
     latestCodegenVersion(): Promise<string>;
     /**
      * 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
@@ -174,7 +177,7 @@ export declare class PlasmicApi {
      * @param componentIdOrNames
      * @param version
      */
-    projectComponents(projectId: string, opts: {
+    projectComponents(projectId: string, branchName: string, opts: {
         platform: string;
         newCompScheme: "blackbox" | "direct";
         existingCompScheme: Array<[string, "blackbox" | "direct"]>;
@@ -191,10 +194,10 @@ export declare class PlasmicApi {
     projectMeta(projectId: string): Promise<ProjectMetaInfo>;
     genLocalizationStrings(projects: readonly string[], format: "po" | "json" | "lingui", projectIdsAndTokens: ProjectIdAndToken[]): Promise<string>;
     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>;
-    projectStyleTokens(projectId: string, versionRange?: string): Promise<StyleTokensMap>;
-    projectIcons(projectId: string, versionRange?: string, iconIds?: string[]): Promise<ProjectIconsResponse>;
-    projectSyncMetadata(projectId: string, revision: number, rethrowAppError: boolean): Promise<ProjectSyncMetadataModel>;
-    connectSocket(): SocketIOClient.Socket;
+    projectStyleTokens(projectId: string, branchName: string, versionRange?: string): Promise<StyleTokensMap>;
+    projectIcons(projectId: string, branchName: string, versionRange?: string, iconIds?: string[]): Promise<ProjectIconsResponse>;
+    projectSyncMetadata(projectId: string, branchName: string, revision: number, rethrowAppError: boolean): Promise<ProjectSyncMetadataModel>;
+    connectSocket(): Socket;
     private post;
     private get;
     private makeErrorMessage;

package/dist/api.js

@@ -77,9 +77,10 @@ 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
@@ -87,9 +88,9 @@ class PlasmicApi {
      * @param componentIdOrNames
      * @param version
      */
-    projectComponents(projectId, opts) {
+    projectComponents(projectId, branchName, opts) {
         return __awaiter(this, void 0, void 0, function* () {
-            const result = yield this.post(`${this.codegenHost}/api/v1/projects/${projectId}/code/components`, Object.assign({}, opts));
+            const result = yield this.post(`${this.codegenHost}/api/v1/projects/${projectId}/code/components?branchName=${branchName}`, Object.assign({}, opts));
             return result.data;
         });
     }
@@ -129,26 +130,26 @@ class PlasmicApi {
             return result.data;
         });
     }
-    projectStyleTokens(projectId, versionRange) {
+    projectStyleTokens(projectId, branchName, versionRange) {
         return __awaiter(this, void 0, void 0, function* () {
-            const result = yield this.post(`${this.codegenHost}/api/v1/projects/${projectId}/code/tokens`, { versionRange });
+            const result = yield this.post(`${this.codegenHost}/api/v1/projects/${projectId}/code/tokens?branchName=${branchName}`, { versionRange });
             return result.data;
         });
     }
-    projectIcons(projectId, versionRange, iconIds) {
+    projectIcons(projectId, branchName, versionRange, iconIds) {
         return __awaiter(this, void 0, void 0, function* () {
-            const result = yield this.post(`${this.codegenHost}/api/v1/projects/${projectId}/code/icons`, { versionRange, iconIds });
+            const result = yield this.post(`${this.codegenHost}/api/v1/projects/${projectId}/code/icons?branchName=${branchName}`, { versionRange, iconIds });
             return result.data;
         });
     }
-    projectSyncMetadata(projectId, revision, rethrowAppError) {
+    projectSyncMetadata(projectId, branchName, revision, rethrowAppError) {
         return __awaiter(this, void 0, void 0, function* () {
-            const result = yield this.post(`${this.codegenHost}/api/v1/projects/${projectId}/code/project-sync-metadata`, { revision }, rethrowAppError);
+            const result = yield this.post(`${this.codegenHost}/api/v1/projects/${projectId}/code/project-sync-metadata?branchName=${branchName}`, { revision }, rethrowAppError);
             return code_merger_1.ProjectSyncMetadataModel.fromJson(result.data);
         });
     }
     connectSocket() {
-        const socket = socket_io_client_1.default.connect(this.studioHost, {
+        const socket = socket_io_client_1.default(this.studioHost, {
             path: `/api/v1/socket`,
             transportOptions: {
                 polling: {

package/dist/plasmic.schema.json

@@ -314,6 +314,10 @@
                     "description": "Project API token. Grants read-only sync access to just this specific project and its dependencies.",
                     "type": "string"
                 },
+                "projectBranchName": {
+                    "description": "Project branch to be synced",
+                    "type": "string"
+                },
                 "projectId": {
                     "description": "Project ID",
                     "type": "string"

package/dist/test-common/fixtures.js

@@ -40,6 +40,7 @@ function standardTestSetup(includeDep = true) {
     // Setup server-side mock data
     const project1 = {
         projectId: "projectId1",
+        branchName: "main",
         projectApiToken: "abc",
         version: "1.2.3",
         projectName: "project1",
@@ -61,6 +62,7 @@ function standardTestSetup(includeDep = true) {
     };
     const dependency = {
         projectId: "dependencyId1",
+        branchName: "main",
         projectApiToken: "def",
         version: "2.3.4",
         projectName: "dependency1",
@@ -119,6 +121,7 @@ exports.expectProject1Components = expectProject1Components;
 exports.project1Config = {
     projectId: "projectId1",
     projectName: "Project 1",
+    projectBranchName: "main",
     version: "latest",
     cssFilePath: "plasmic/PP__demo.css",
     components: [

package/dist/utils/auth-utils.js

@@ -26,7 +26,7 @@ const error_1 = require("../utils/error");
 const config_utils_1 = require("./config-utils");
 const file_utils_1 = require("./file-utils");
 function authByPolling(host, initToken) {
-    const socket = socket_io_client_1.default.connect(host, {
+    const socket = socket_io_client_1.default(host, {
         path: `/api/v1/init-token`,
         transportOptions: {
             polling: {
@@ -37,7 +37,7 @@ function authByPolling(host, initToken) {
         },
     });
     const promise = new Promise((resolve, reject) => {
-        socket.on("connect", (reason) => {
+        socket.on("connect", () => {
             deps_1.logger.info("Waiting for token...");
         });
         socket.on("token", (data) => {

package/dist/utils/config-utils.d.ts

@@ -112,6 +112,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.
@@ -224,6 +226,7 @@ export interface FileLock {
 }
 export interface ProjectLock {
     projectId: string;
+    branchName: string;
     version: string;
     dependencies: {
         [projectId: string]: string;
@@ -279,5 +282,5 @@ export declare function writeConfig(configFile: string, config: PlasmicConfig, b
 export declare function writeLock(lockFile: string, lock: PlasmicLock, baseDir: string): Promise<void>;
 export declare function updateConfig(context: PlasmicContext, newConfig: PlasmicConfig, baseDir: string): Promise<void>;
 export declare function getOrAddProjectConfig(context: PlasmicContext, projectId: string, base?: ProjectConfig): ProjectConfig;
-export declare function getOrAddProjectLock(context: PlasmicContext, projectId: string, base?: ProjectLock): ProjectLock;
+export declare function getOrAddProjectLock(context: PlasmicContext, projectId: string, branchName: string, base?: ProjectLock): ProjectLock;
 export declare function isPageAwarePlatform(platform: string): boolean;

package/dist/utils/config-utils.js

@@ -159,7 +159,7 @@ function getOrAddProjectConfig(context, projectId, base // if one doesn't exist,
     return project;
 }
 exports.getOrAddProjectConfig = getOrAddProjectConfig;
-function getOrAddProjectLock(context, projectId, base // if one doesn't exist, start with this
+function getOrAddProjectLock(context, projectId, branchName, base // if one doesn't exist, start with this
 ) {
     let project = context.lock.projects.find((p) => p.projectId === projectId);
     if (!project) {
@@ -167,6 +167,7 @@ function getOrAddProjectLock(context, projectId, base // if one doesn't exist, s
             ? lodash_1.default.cloneDeep(base)
             : {
                 projectId,
+                branchName,
                 version: "",
                 dependencies: {},
                 lang: context.config.code.lang,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@plasmicapp/cli",
-  "version": "0.1.187",
+  "version": "0.1.188",
   "description": "plasmic cli for syncing local code with Plasmic designs",
   "engines": {
     "node": ">=12"
@@ -53,7 +53,6 @@
     "@babel/traverse": "^7.12.1",
     "@plasmicapp/code-merger": "^0.0.33",
     "@sentry/node": "^5.19.2",
-    "@types/socket.io-client": "^1.4.34",
     "axios": "^0.21.1",
     "chalk": "^4.1.0",
     "fast-glob": "^3.2.4",
@@ -69,7 +68,7 @@
     "path": "^0.12.7",
     "prettier": "^2.0.5",
     "semver": "^7.3.2",
-    "socket.io-client": "^3.0.3",
+    "socket.io-client": "^4.1.2",
     "typescript": "^3.9.6",
     "upath": "^1.2.0",
     "update-notifier": "^4.1.0",

package/src/__mocks__/api.ts

@@ -26,6 +26,7 @@ const api: any = jest.genMockFromModule("../api");
 const PROJECTS: MockProject[] = [];
 export interface MockProject {
   projectId: string;
+  branchName: string;
   projectApiToken: string;
   version: string;
   projectName: string;
@@ -38,6 +39,7 @@ export interface MockComponent {
   id: string;
   name: string;
   projectId?: string;
+  branchName?: string;
   version?: string;
 }
 
@@ -72,6 +74,7 @@ function mockProjectToProjectVersionMeta(
  */
 function addMockProject(proj: MockProject) {
   const projectId = proj.projectId;
+  const branchName = proj.branchName;
   const version = proj.version;
   // Populate projectId and version into each component
   // will be useful when reading / writing components to files
@@ -79,11 +82,12 @@ function addMockProject(proj: MockProject) {
     return {
       ...c,
       projectId,
+      branchName,
       version,
     };
   });
 
-  const existing = getMockProject(projectId, version);
+  const existing = getMockProject(projectId, branchName, version);
   if (!existing) {
     PROJECTS.push(proj);
   } else {
@@ -117,10 +121,14 @@ function mockComponentToString(component: MockComponent): string {
 
 function getMockProject(
   projectId: string,
+  branchName: string,
   version: string
 ): MockProject | undefined {
   return PROJECTS.find(
-    (m) => m.projectId === projectId && m.version === version
+    (m) =>
+      m.projectId === projectId &&
+      m.branchName === branchName &&
+      m.version === version
   );
 }
 
@@ -128,15 +136,17 @@ function getMockProject(
  * Only fetch top-level components that match the projectId (optionally also componentIdOrNames + version)
  * Does not crawl the dependency tree
  * @param projectId
+ * @param branchName
  * @param componentIdOrNames
  * @param versionRange
  */
 function getMockComponents(
   projectId: string,
+  branchName: string,
   version: string,
   componentIdOrNames: readonly string[] | undefined
 ): MockComponent[] {
-  const project = getMockProject(projectId, version);
+  const project = getMockProject(projectId, branchName, version);
   return !project
     ? []
     : project.components.filter(
@@ -193,7 +203,7 @@ function* getDeps(projects: ProjectVersionMeta[]) {
   while (queue.length > 0) {
     const curr = ensure(queue.shift());
     for (const [projectId, version] of L.toPairs(curr.dependencies)) {
-      const mockProject = ensure(getMockProject(projectId, version));
+      const mockProject = ensure(getMockProject(projectId, "main", version));
       const projectMeta = mockProjectToProjectVersionMeta(mockProject);
       yield projectMeta;
       queue.push(projectMeta);
@@ -215,6 +225,7 @@ class PlasmicApi {
   async resolveSync(
     projects: {
       projectId: string;
+      branchName: string;
       versionRange: string;
       componentIdOrNames: readonly string[] | undefined;
       projectApiToken?: string;
@@ -248,7 +259,9 @@ class PlasmicApi {
         proj.versionRange
       );
       if (version) {
-        const mockProject = ensure(getMockProject(proj.projectId, version));
+        const mockProject = ensure(
+          getMockProject(proj.projectId, proj.branchName, version)
+        );
         const projectMeta = mockProjectToProjectVersionMeta(
           mockProject,
           proj.componentIdOrNames
@@ -272,6 +285,7 @@ class PlasmicApi {
 
   async projectComponents(
     projectId: string,
+    branchName: string,
     opts: {
       platform: string;
       newCompScheme: "blackbox" | "direct";
@@ -310,6 +324,7 @@ class PlasmicApi {
     }
     const mockComponents = getMockComponents(
       projectId,
+      branchName,
       version,
       componentIdOrNames
     );
@@ -357,11 +372,17 @@ class PlasmicApi {
     throw new Error("Unimplemented");
   }
 
-  async projectStyleTokens(projectId: string): Promise<StyleTokensMap> {
+  async projectStyleTokens(
+    projectId: string,
+    branchName: string
+  ): Promise<StyleTokensMap> {
     throw new Error("Unimplemented");
   }
 
-  async projectIcons(projectId: string): Promise<ProjectIconsResponse> {
+  async projectIcons(
+    projectId: string,
+    branchName: string
+  ): Promise<ProjectIconsResponse> {
     throw new Error("Unimplemented");
   }
 

package/src/__tests__/project-api-token-spec.ts

@@ -145,7 +145,7 @@ describe("Project API tokens", () => {
     // We sync project1 which got updated, but the dependency is still same version.
     opts.force = false;
     removeAuth();
-    mockApi.getMockProject("projectId1", "1.2.3").version = "1.2.4";
+    mockApi.getMockProject("projectId1", "main", "1.2.3").version = "1.2.4";
     await expect(sync(opts)).resolves.toBeUndefined();
   });
 
@@ -196,7 +196,7 @@ describe("Project API tokens", () => {
     // We sync project1 which got updated, but the dependency is still same version.
     opts.force = false;
     removeAuth();
-    mockApi.getMockProject("projectId1", "1.2.3").version = "1.2.4";
+    mockApi.getMockProject("projectId1", "main", "1.2.3").version = "1.2.4";
     await expect(sync(opts)).resolves.toBeUndefined();
   });
 

package/src/__tests__/versioned-sync-spec.ts

@@ -54,7 +54,7 @@ describe("versioned-sync", () => {
     opts.projects = ["projectId1"];
     await expect(sync(opts)).resolves.toBeUndefined();
     // Change component name server-side
-    const mockProject = mockApi.getMockProject("projectId1", "1.2.3");
+    const mockProject = mockApi.getMockProject("projectId1", "main", "1.2.3");
     const buttonData = mockProject.components.find(
       (c: MockComponent) => c.id === "buttonId"
     );
@@ -79,7 +79,7 @@ describe("versioned-sync", () => {
     opts.projects = ["projectId1"];
     await expect(sync(opts)).resolves.toBeUndefined();
     // Change component version server-side
-    const mockProject = mockApi.getMockProject("projectId1", "1.2.3");
+    const mockProject = mockApi.getMockProject("projectId1", "main", "1.2.3");
     mockProject.version = "1.3.4";
     mockApi.addMockProject(mockProject);
     // Try syncing again and see if things show up
@@ -97,7 +97,7 @@ describe("versioned-sync", () => {
     opts.nonRecursive = true;
     await expect(sync(opts)).resolves.toBeUndefined();
     // Change component version server-side
-    const mockProject = mockApi.getMockProject("projectId1", "1.2.3");
+    const mockProject = mockApi.getMockProject("projectId1", "main", "1.2.3");
     mockProject.version = "2.0.0";
     mockApi.addMockProject(mockProject);
     // Read in updated plasmic.json post-sync
@@ -125,7 +125,7 @@ describe("versioned-sync", () => {
     opts.nonRecursive = true;
     await expect(sync(opts)).resolves.toBeUndefined();
     // Change component version server-side
-    const mockProject = mockApi.getMockProject("projectId1", "1.2.3");
+    const mockProject = mockApi.getMockProject("projectId1", "main", "1.2.3");
     mockProject.version = "1.10.1";
     mockApi.addMockProject(mockProject);
     // Update plasmic.json to use semver

package/src/actions/project-token.ts

@@ -18,7 +18,7 @@ export const getProjectApiToken = async (projectId: string, host?: string) => {
   if (auth) {
     const api = new PlasmicApi(auth);
     const versionResolution = await api.resolveSync([
-      { projectId, componentIdOrNames: undefined },
+      { projectId, branchName: "main", componentIdOrNames: undefined },
     ]);
     return versionResolution.projects[0]?.projectApiToken;
   }

package/src/actions/sync-components.ts

@@ -64,7 +64,12 @@ const updateDirectSkeleton = async (
     compConfig.projectId,
     makeCachedProjectSyncDataProvider(async (projectId, revision) => {
       try {
-        return await context.api.projectSyncMetadata(projectId, revision, true);
+        return await context.api.projectSyncMetadata(
+          projectId,
+          "main",
+          revision,
+          true
+        );
       } catch (e) {
         if (
           e instanceof AppServerError &&

package/src/actions/sync-global-variants.ts

@@ -18,10 +18,11 @@ export async function syncGlobalVariants(
   projectMeta: ProjectMetaBundle,
   bundles: GlobalVariantBundle[],
   checksums: ChecksumBundle,
-  baseDir: string,
+  branchName: string,
+  baseDir: string
 ) {
   const projectId = projectMeta.projectId;
-  const projectLock = getOrAddProjectLock(context, projectId);
+  const projectLock = getOrAddProjectLock(context, projectId, branchName);
   const existingVariantConfigs = L.keyBy(
     context.config.globalVariants.variantGroups.filter(
       (group) => group.projectId === projectId
@@ -100,7 +101,11 @@ export async function syncGlobalVariants(
     await writeFileContent(
       context,
       variantConfig.contextFilePath,
-      formatAsLocal(bundle.contextModule, variantConfig.contextFilePath, baseDir),
+      formatAsLocal(
+        bundle.contextModule,
+        variantConfig.contextFilePath,
+        baseDir
+      ),
       { force: !isNew }
     );
   }

package/src/actions/sync-icons.ts

@@ -25,17 +25,18 @@ export interface SyncIconsArgs extends CommonArgs {
 export async function syncProjectIconAssets(
   context: PlasmicContext,
   projectId: string,
+  branchName: string,
   version: string,
   iconBundles: IconBundle[],
   checksums: ChecksumBundle,
-  baseDir: string,
+  baseDir: string
 ) {
   const project = getOrAddProjectConfig(context, projectId);
   if (!project.icons) {
     project.icons = [];
   }
 
-  const projectLock = getOrAddProjectLock(context, projectId);
+  const projectLock = getOrAddProjectLock(context, projectId, branchName);
   const knownIconConfigs = L.keyBy(project.icons, (i) => i.id);
   const iconFileLocks = L.keyBy(
     projectLock.fileLocks.filter((fileLock) => fileLock.type === "icon"),

package/src/actions/sync-images.ts

@@ -22,12 +22,13 @@ import { ensure } from "../utils/lang-utils";
 export async function syncProjectImageAssets(
   context: PlasmicContext,
   projectId: string,
+  branchName: string,
   version: string,
   imageBundles: ImageBundle[],
   checksums: ChecksumBundle
 ) {
   const project = getOrAddProjectConfig(context, projectId);
-  const projectLock = getOrAddProjectLock(context, projectId);
+  const projectLock = getOrAddProjectLock(context, projectId, branchName);
   const knownImageConfigs = L.keyBy(project.images, (i) => i.id);
   const imageBundleIds = L.keyBy(imageBundles, (i) => i.id);
   const imageFileLocks = L.keyBy(

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,
@@ -680,6 +690,7 @@ async function syncProject(
   await syncProjectIconAssets(
     context,
     projectId,
+    branchName,
     projectVersion,
     projectBundle.iconAssets,
     projectBundle.checksums,
@@ -688,6 +699,7 @@ async function syncProject(
   await syncProjectImageAssets(
     context,
     projectId,
+    branchName,
     projectVersion,
     projectBundle.imageAssets,
     projectBundle.checksums
@@ -720,6 +732,7 @@ async function syncProjectConfig(
   context: PlasmicContext,
   projectBundle: ProjectMetaBundle,
   projectApiToken: string,
+  branchName: string,
   version: string,
   dependencies: { [projectId: string]: string },
   componentBundles: ComponentBundle[],
@@ -760,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,
       }
@@ -345,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;
@@ -356,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;
@@ -368,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: {

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,