@plasmicapp/cli 0.1.340 → 0.1.342

package/dist/plasmic.schema.json

@@ -434,6 +434,10 @@
                     "description": "Project ID",
                     "type": "string"
                 },
+                "projectModuleFilePath": {
+                    "description": "File location for the project-wide plasmic.ts file. Relative to srcDir",
+                    "type": "string"
+                },
                 "projectName": {
                     "description": "Project name synced down from Studio",
                     "type": "string"
@@ -442,6 +446,10 @@
                     "description": "File location for the project-wide splits provider. Relative to srcDir",
                     "type": "string"
                 },
+                "styleTokensProviderFilePath": {
+                    "description": "File location for the project-wide style tokens provider. Relative to srcDir",
+                    "type": "string"
+                },
                 "version": {
                     "description": "A version range for syncing this project. Can be:\n* \"latest\" - always syncs down whatever has been saved in the project.\n* \">0\" - always syncs down the latest published version of the project.\n* any other semver string you'd like",
                     "type": "string"
@@ -455,8 +463,10 @@
                 "images",
                 "indirect",
                 "projectId",
+                "projectModuleFilePath",
                 "projectName",
                 "splitsProviderFilePath",
+                "styleTokensProviderFilePath",
                 "version"
             ],
             "type": "object"

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

@@ -144,6 +144,10 @@ export interface ProjectConfig {
     globalContextsFilePath: string;
     /** File location for the project-wide splits provider. Relative to srcDir */
     splitsProviderFilePath: string;
+    /** File location for the project-wide style tokens provider. Relative to srcDir */
+    styleTokensProviderFilePath: string;
+    /** File location for the project-wide plasmic.ts file. Relative to srcDir */
+    projectModuleFilePath: string;
     jsBundleThemes?: JsBundleThemeConfig[];
     codeComponents?: CodeComponentConfig[];
     customFunctions?: CustomFunctionConfig[];
@@ -260,7 +264,7 @@ export interface GlobalVariantGroupConfig {
     contextFilePath: string;
 }
 export interface FileLock {
-    type: "renderModule" | "cssRules" | "icon" | "image" | "projectCss" | "globalVariant" | "globalContexts" | "splitsProvider";
+    type: "renderModule" | "cssRules" | "icon" | "image" | "projectCss" | "globalVariant" | "globalContexts" | "splitsProvider" | "styleTokensProvider" | "projectModule";
     checksum: string;
     assetId: string;
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@plasmicapp/cli",
-  "version": "0.1.340",
+  "version": "0.1.342",
   "description": "plasmic cli for syncing local code with Plasmic designs",
   "engines": {
     "node": ">=12"
@@ -83,5 +83,5 @@
     "wrap-ansi": "^7.0.0",
     "yargs": "^15.4.1"
   },
-  "gitHead": "bad3fc74b8f3d964ec7e08f06bd8b1e5bfe18494"
+  "gitHead": "354b30e84489d6a01d96855a04c844aa4fa80f3a"
 }

package/src/__mocks__/api.ts

@@ -193,7 +193,6 @@ function genProjectMetaBundle(projectId: string): ProjectMetaBundle {
     projectName: projectId,
     cssFileName: genFilename(projectId, "css"),
     cssRules: `theClass {color: green;}`,
-    jsBundleThemes: [],
   };
 }
 
@@ -356,6 +355,8 @@ class PlasmicApi {
         projectCssChecksum: "",
         globalContextsChecksum: "",
         splitsProviderChecksum: "",
+        styleTokensProviderChecksum: "",
+        projectModuleChecksum: "",
       } as ChecksumBundle,
       usedNpmPackages: [],
       externalCssImports: [],

package/src/actions/export.ts

@@ -10,17 +10,19 @@ import {
 } from "../utils/code-utils";
 import {
   CodeConfig,
-  findConfigFile,
   I18NConfig,
   ImagesConfig,
   PlasmicConfig,
   StyleConfig,
+  findConfigFile,
 } from "../utils/config-utils";
 import { getContext, getCurrentOrDefaultAuth } from "../utils/get-context";
 import { tuple } from "../utils/lang-utils";
 import { DEFAULT_GLOBAL_CONTEXTS_NAME } from "./sync-global-contexts";
 import { ensureImageAssetContents } from "./sync-images";
+import { DEFAULT_PROJECT_MODULE_NAME } from "./sync-project-module";
 import { DEFAULT_SPLITS_PROVIDER_NAME } from "./sync-splits-provider";
+import { DEFAULT_STYLE_TOKENS_PROVIDER_NAME } from "./sync-style-tokens-provider";
 
 export interface ExportArgs extends CommonArgs {
   projects: readonly string[];
@@ -138,6 +140,20 @@ export async function exportProjectsCli(opts: ExportArgs): Promise<void> {
       );
     }
 
+    if (bundle.projectConfig.styleTokensProviderBundle) {
+      writeFile(
+        `${DEFAULT_STYLE_TOKENS_PROVIDER_NAME}.${extx}`,
+        bundle.projectConfig.styleTokensProviderBundle.module
+      );
+    }
+
+    if (bundle.projectConfig.projectModuleBundle) {
+      writeFile(
+        `${DEFAULT_PROJECT_MODULE_NAME}.${extx}`,
+        bundle.projectConfig.projectModuleBundle.module
+      );
+    }
+
     if (bundle.projectConfig.reactWebExportedFiles) {
       for (const file of bundle.projectConfig.reactWebExportedFiles) {
         writeFile(file.fileName, file.content);
@@ -196,6 +212,13 @@ export async function exportProjectsCli(opts: ExportArgs): Promise<void> {
             splitsProviderFilePath: bundle.projectConfig.splitsProviderBundle
               ? `${projectName}/${DEFAULT_SPLITS_PROVIDER_NAME}.${extx}`
               : "",
+            styleTokensProviderFilePath: bundle.projectConfig
+              .styleTokensProviderBundle
+              ? `${projectName}/${DEFAULT_STYLE_TOKENS_PROVIDER_NAME}.${extx}`
+              : "",
+            projectModuleFilePath: bundle.projectConfig.projectModuleBundle
+              ? `${projectName}/${DEFAULT_PROJECT_MODULE_NAME}.${extx}`
+              : "",
             components: bundle.components.map((comp) => ({
               id: comp.id,
               name: comp.componentName,
@@ -351,6 +374,22 @@ async function exportProjects(api: PlasmicApi, opts: ExportOpts) {
         );
         proj.projectConfig.splitsProviderBundle.module = res[1];
       }
+      if (proj.projectConfig.styleTokensProviderBundle) {
+        const res = maybeConvertTsxToJsx(
+          `${DEFAULT_STYLE_TOKENS_PROVIDER_NAME}.tsx`,
+          proj.projectConfig.styleTokensProviderBundle.module,
+          "."
+        );
+        proj.projectConfig.styleTokensProviderBundle.module = res[1];
+      }
+      if (proj.projectConfig.projectModuleBundle) {
+        const res = maybeConvertTsxToJsx(
+          `${DEFAULT_PROJECT_MODULE_NAME}.tsx`,
+          proj.projectConfig.projectModuleBundle.module,
+          "."
+        );
+        proj.projectConfig.projectModuleBundle.module = res[1];
+      }
     }
   }
 

package/src/actions/sync-project-module.ts

@@ -0,0 +1,88 @@
+import L from "lodash";
+import { ChecksumBundle, ProjectMetaBundle } from "../api";
+import { logger } from "../deps";
+import { formatScript, tsxToJsx } from "../utils/code-utils";
+import {
+  PlasmicContext,
+  ProjectConfig,
+  ProjectLock,
+} from "../utils/config-utils";
+import {
+  defaultResourcePath,
+  deleteFile,
+  fileExists,
+  writeFileContent,
+} from "../utils/file-utils";
+
+const MODULE_NAME = "plasmic";
+export const DEFAULT_PROJECT_MODULE_NAME = MODULE_NAME;
+
+export async function syncProjectModule(
+  context: PlasmicContext,
+  projectMeta: ProjectMetaBundle,
+  projectConfig: ProjectConfig,
+  projectLock: ProjectLock,
+  checksums: ChecksumBundle,
+  baseDir: string
+) {
+  const resourcePath = getProjectModuleResourcePath(context, projectConfig);
+  if (checksums.projectModuleChecksum && projectMeta.projectModuleBundle) {
+    if (context.cliArgs.quiet !== true) {
+      logger.info(
+        `Syncing module: ${MODULE_NAME}@${projectLock.version}\t['${projectConfig.projectName}' ${projectConfig.projectId} ${projectConfig.version}]`
+      );
+    }
+    if (context.config.code.lang === "js") {
+      projectMeta.projectModuleBundle.module = formatScript(
+        tsxToJsx(projectMeta.projectModuleBundle.module),
+        baseDir
+      );
+    }
+    writeFileContent(
+      context,
+      resourcePath,
+      projectMeta.projectModuleBundle.module,
+      { force: true }
+    );
+    projectConfig.projectModuleFilePath = resourcePath;
+    const fl = projectLock.fileLocks.find(
+      (fl) =>
+        fl.assetId === projectConfig.projectId && fl.type === "projectModule"
+    );
+    if (fl) {
+      fl.checksum = checksums.projectModuleChecksum || "";
+    } else {
+      projectLock.fileLocks.push({
+        assetId: projectConfig.projectId,
+        checksum: checksums.projectModuleChecksum || "",
+        type: "projectModule",
+      });
+    }
+  } else if (
+    !checksums.projectModuleChecksum &&
+    !projectMeta.projectModuleBundle
+  ) {
+    if (fileExists(context, resourcePath)) {
+      deleteFile(context, resourcePath);
+    }
+    projectConfig.projectModuleFilePath = "";
+    L.remove(
+      projectLock.fileLocks,
+      (fl) =>
+        fl.assetId === projectConfig.projectId && fl.type === "projectModule"
+    );
+  }
+}
+
+export function getProjectModuleResourcePath(
+  context: PlasmicContext,
+  projectConfig: ProjectConfig
+) {
+  return projectConfig.projectModuleFilePath !== ""
+    ? projectConfig.projectModuleFilePath
+    : defaultResourcePath(
+        context,
+        projectConfig.projectName,
+        `${MODULE_NAME}.${context.config.code.lang === "ts" ? "tsx" : "jsx"}`
+      );
+}

package/src/actions/sync-style-tokens-provider.ts

@@ -0,0 +1,96 @@
+import L from "lodash";
+import { ChecksumBundle, ProjectMetaBundle } from "../api";
+import { logger } from "../deps";
+import { formatScript, tsxToJsx } from "../utils/code-utils";
+import {
+  PlasmicContext,
+  ProjectConfig,
+  ProjectLock,
+} from "../utils/config-utils";
+import {
+  defaultResourcePath,
+  deleteFile,
+  fileExists,
+  writeFileContent,
+} from "../utils/file-utils";
+
+const MODULE_NAME = "PlasmicStyleTokensProvider";
+export const DEFAULT_STYLE_TOKENS_PROVIDER_NAME = MODULE_NAME;
+
+export async function syncStyleTokensProvider(
+  context: PlasmicContext,
+  projectMeta: ProjectMetaBundle,
+  projectConfig: ProjectConfig,
+  projectLock: ProjectLock,
+  checksums: ChecksumBundle,
+  baseDir: string
+) {
+  const resourcePath = getStyleTokensProviderResourcePath(
+    context,
+    projectConfig
+  );
+  if (
+    checksums.styleTokensProviderChecksum &&
+    projectMeta.styleTokensProviderBundle
+  ) {
+    if (context.cliArgs.quiet !== true) {
+      logger.info(
+        `Syncing module: ${MODULE_NAME}@${projectLock.version}\t['${projectConfig.projectName}' ${projectConfig.projectId} ${projectConfig.version}]`
+      );
+    }
+    if (context.config.code.lang === "js") {
+      projectMeta.styleTokensProviderBundle.module = formatScript(
+        tsxToJsx(projectMeta.styleTokensProviderBundle.module),
+        baseDir
+      );
+    }
+    writeFileContent(
+      context,
+      resourcePath,
+      projectMeta.styleTokensProviderBundle.module,
+      { force: true }
+    );
+    projectConfig.styleTokensProviderFilePath = resourcePath;
+    const fl = projectLock.fileLocks.find(
+      (fl) =>
+        fl.assetId === projectConfig.projectId &&
+        fl.type === "styleTokensProvider"
+    );
+    if (fl) {
+      fl.checksum = checksums.styleTokensProviderChecksum || "";
+    } else {
+      projectLock.fileLocks.push({
+        assetId: projectConfig.projectId,
+        checksum: checksums.styleTokensProviderChecksum || "",
+        type: "styleTokensProvider",
+      });
+    }
+  } else if (
+    !checksums.styleTokensProviderChecksum &&
+    !projectMeta.styleTokensProviderBundle
+  ) {
+    if (fileExists(context, resourcePath)) {
+      deleteFile(context, resourcePath);
+    }
+    projectConfig.styleTokensProviderFilePath = "";
+    L.remove(
+      projectLock.fileLocks,
+      (fl) =>
+        fl.assetId === projectConfig.projectId &&
+        fl.type === "styleTokensProvider"
+    );
+  }
+}
+
+export function getStyleTokensProviderResourcePath(
+  context: PlasmicContext,
+  projectConfig: ProjectConfig
+) {
+  return projectConfig.styleTokensProviderFilePath !== ""
+    ? projectConfig.styleTokensProviderFilePath
+    : defaultResourcePath(
+        context,
+        projectConfig.projectName,
+        `${MODULE_NAME}.${context.config.code.lang === "ts" ? "tsx" : "jsx"}`
+      );
+}

package/src/actions/sync.ts

@@ -56,7 +56,9 @@ import { syncGlobalContexts } from "./sync-global-contexts";
 import { syncGlobalVariants } from "./sync-global-variants";
 import { syncProjectIconAssets } from "./sync-icons";
 import { syncProjectImageAssets } from "./sync-images";
+import { syncProjectModule } from "./sync-project-module";
 import { syncSplitsProvider } from "./sync-splits-provider";
+import { syncStyleTokensProvider } from "./sync-style-tokens-provider";
 import { upsertStyleTokens } from "./sync-styles";
 
 export interface SyncArgs extends CommonArgs {
@@ -605,13 +607,6 @@ async function syncProject(
         opts.baseDir
       );
     });
-    (projectBundle.projectConfig.jsBundleThemes || []).forEach((theme) => {
-      [theme.themeFileName, theme.themeModule] = maybeConvertTsxToJsx(
-        theme.themeFileName,
-        theme.themeModule,
-        opts.baseDir
-      );
-    });
   }
   await syncGlobalVariants(
     context,
@@ -766,37 +761,7 @@ async function syncProjectConfig(
     checksum: checksums.projectCssChecksum,
   });
 
-  /*
-  for (const theme of projectBundle.jsBundleThemes) {
-    if (!projectConfig.jsBundleThemes) {
-      projectConfig.jsBundleThemes = [];
-    }
-    let themeConfig = projectConfig.jsBundleThemes.find(
-      (c) => c.bundleName === theme.bundleName
-    );
-    if (!themeConfig) {
-      const themeFilePath = defaultResourcePath(
-        context,
-        projectConfig,
-        theme.themeFileName
-      );
-      themeConfig = { themeFilePath, bundleName: theme.bundleName };
-      projectConfig.jsBundleThemes.push(themeConfig);
-    }
-    const formatted = formatAsLocal(
-      theme.themeModule,
-      themeConfig.themeFilePath
-    );
-    await writeFileContent(context, themeConfig.themeFilePath, formatted, {
-      force: true,
-    });
-  }
-  */
-
-  if (
-    projectConfig.jsBundleThemes &&
-    projectConfig.jsBundleThemes.length === 0
-  ) {
+  if (projectConfig.jsBundleThemes?.length === 0) {
     delete projectConfig.jsBundleThemes;
   }
 
@@ -818,6 +783,24 @@ async function syncProjectConfig(
     baseDir
   );
 
+  await syncProjectModule(
+    context,
+    projectBundle,
+    projectConfig,
+    projectLock,
+    checksums,
+    baseDir
+  );
+
+  await syncStyleTokensProvider(
+    context,
+    projectBundle,
+    projectConfig,
+    projectLock,
+    checksums,
+    baseDir
+  );
+
   // Write out components
   await syncProjectComponents(
     context,

package/src/api.ts

@@ -65,6 +65,16 @@ export interface SplitsProviderBundle {
   module: string;
 }
 
+export interface StyleTokensProviderBundle {
+  id: string;
+  module: string;
+}
+
+export interface ProjectModuleBundle {
+  id: string;
+  module: string;
+}
+
 export interface JsBundleTheme {
   themeFileName: string;
   themeModule: string;
@@ -76,9 +86,10 @@ export interface ProjectMetaBundle {
   projectName: string;
   cssFileName: string;
   cssRules: string;
-  jsBundleThemes?: JsBundleTheme[];
   globalContextBundle?: GlobalContextBundle;
   splitsProviderBundle?: SplitsProviderBundle;
+  styleTokensProviderBundle?: StyleTokensProviderBundle;
+  projectModuleBundle?: ProjectModuleBundle;
   // A list of files that are exported from the project and *can* be used by the user
   reactWebExportedFiles?: Array<{
     fileName: string;
@@ -190,6 +201,10 @@ export interface ChecksumBundle {
   globalContextsChecksum: string;
   // Checksum of project splits provider
   splitsProviderChecksum: string;
+  // Checksum of project style tokens provider
+  styleTokensProviderChecksum: string;
+  // Checksum of project plasmic.ts
+  projectModuleChecksum: string;
 }
 
 export interface CodeComponentMeta {

package/src/migrations/migrations.ts

@@ -40,7 +40,6 @@ import { migrateInit } from "./0.1.27-migrateInit";
 import { tsToTsx } from "./0.1.28-tsToTsx";
 import { ensureProjectIcons } from "./0.1.31-ensureProjectIcons";
 import { ensureVersion } from "./0.1.42-ensureVersion";
-import { ensureJsBundleThemes } from "./0.1.57-ensureJsBundleThemes";
 import { ensureImageFiles } from "./0.1.64-imageFiles";
 import { ensureComponentType } from "./0.1.95-componentType";
 export interface MigrateContext {
@@ -61,7 +60,6 @@ export const MIGRATIONS: Record<string, MigrateConfigFunc> = {
   "0.1.28": tsToTsx,
   "0.1.31": ensureProjectIcons,
   "0.1.42": ensureVersion,
-  "0.1.57": ensureJsBundleThemes,
   "0.1.64": ensureImageFiles,
   "0.1.95": ensureComponentType,
   "0.1.146": ensureReactRuntime,

package/src/test-common/fixtures.ts

@@ -1,9 +1,9 @@
 /// <reference types="@types/jest" />
 import L from "lodash";
+import { MockProject } from "../__mocks__/api";
 import { SyncArgs } from "../actions/sync";
 import { PlasmicConfig, ProjectConfig } from "../utils/config-utils";
 import { TempRepo } from "../utils/test-utils";
-import { MockProject } from "../__mocks__/api";
 
 jest.mock("../api");
 
@@ -148,10 +148,11 @@ export const project1Config: ProjectConfig = {
   ],
   icons: [],
   images: [],
-  jsBundleThemes: [],
   indirect: false,
   globalContextsFilePath: "",
   splitsProviderFilePath: "",
+  styleTokensProviderFilePath: "",
+  projectModuleFilePath: "",
 };
 
 export function expectProject1PlasmicJson(optional?: {

package/src/utils/checksum.ts

@@ -33,6 +33,12 @@ function getFilesByFileLockAssetId(
     splitsProvider: {
       [projectConfig.projectId]: projectConfig.splitsProviderFilePath,
     },
+    styleTokensProvider: {
+      [projectConfig.projectId]: projectConfig.styleTokensProviderFilePath,
+    },
+    projectModule: {
+      [projectConfig.projectId]: projectConfig.projectModuleFilePath,
+    },
   } as const;
 }
 
@@ -60,6 +66,8 @@ export function getChecksums(
       projectCssChecksum: "",
       globalContextsChecksum: "",
       splitsProviderChecksum: "",
+      styleTokensProviderChecksum: "",
+      projectModuleChecksum: "",
     };
   }
 
@@ -161,6 +169,33 @@ export function getChecksums(
       ? globalContextsChecksums[0].checksum
       : "";
 
+  const styleTokensProviderChecksums = fileLocks
+    .filter(
+      (fileLock) =>
+        fileLock.type === "styleTokensProvider" &&
+        fileLock.assetId === projectId
+    )
+    .filter((fileLock) =>
+      checkFile(fileLocations.styleTokensProvider[fileLock.assetId])
+    );
+  assert(styleTokensProviderChecksums.length < 2);
+  const styleTokensProviderChecksum =
+    styleTokensProviderChecksums.length > 0
+      ? styleTokensProviderChecksums[0].checksum
+      : "";
+
+  const projectModuleChecksums = fileLocks
+    .filter(
+      (fileLock) =>
+        fileLock.type === "projectModule" && fileLock.assetId === projectId
+    )
+    .filter((fileLock) =>
+      checkFile(fileLocations.projectModule[fileLock.assetId])
+    );
+  assert(projectModuleChecksums.length < 2);
+  const projectModuleChecksum =
+    projectModuleChecksums.length > 0 ? projectModuleChecksums[0].checksum : "";
+
   const splitsProviderChecksums = fileLocks
     .filter(
       (fileLock) =>
@@ -184,5 +219,7 @@ export function getChecksums(
     projectCssChecksum,
     globalContextsChecksum,
     splitsProviderChecksum,
+    styleTokensProviderChecksum,
+    projectModuleChecksum,
   };
 }