@plasmicapp/cli 0.1.341 → 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.341",
+  "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": "fcc97c73f5bb7a9eddf27528e2769d33a8c4f069"
+  "gitHead": "354b30e84489d6a01d96855a04c844aa4fa80f3a"
 }

package/src/__mocks__/api.ts

@@ -355,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 {
@@ -781,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;
@@ -78,6 +88,8 @@ export interface ProjectMetaBundle {
   cssRules: string;
   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;
@@ -189,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/test-common/fixtures.ts

@@ -151,6 +151,8 @@ export const project1Config: ProjectConfig = {
   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,
   };
 }

package/src/utils/code-utils.ts

@@ -13,7 +13,9 @@ import {
   fixComponentCssReferences,
   fixComponentImagesReferences,
 } from "../actions/sync-images";
+import { getProjectModuleResourcePath } from "../actions/sync-project-module";
 import { getSplitsProviderResourcePath } from "../actions/sync-splits-provider";
+import { getStyleTokensProviderResourcePath } from "../actions/sync-style-tokens-provider";
 import { logger } from "../deps";
 import { GLOBAL_SETTINGS } from "../globals";
 import { HandledError } from "../utils/error";
@@ -173,6 +175,8 @@ type PlasmicImportType =
   | "globalContext"
   | "customFunction"
   | "splitsProvider"
+  | "styleTokensProvider"
+  | "projectModule"
   | "rscClient"
   | "rscServer"
   | undefined;
@@ -203,7 +207,7 @@ function tryParsePlasmicImportSpec(node: ImportDeclaration) {
         "plasmic-import:\\s+([",
         ...validJsIdentifierChars,
         "\\.",
-        "]+)(?:\\/(component|css|render|globalVariant|projectcss|defaultcss|icon|picture|jsBundle|codeComponent|globalContext|customFunction|splitsProvider|rscClient|rscServer))?",
+        "]+)(?:\\/(component|css|render|globalVariant|projectcss|defaultcss|icon|picture|jsBundle|codeComponent|globalContext|customFunction|splitsProvider|styleTokensProvider|projectModule|rscClient|rscServer))?",
       ].join("")
     )
   );
@@ -441,6 +445,30 @@ export function replaceImports(
         true
       );
       stmt.source.value = realPath;
+    } else if (type === "styleTokensProvider") {
+      const projectConfig = fixImportContext.projects[uuid];
+      if (!projectConfig) {
+        throwMissingReference(context, "project", uuid, fromPath);
+      }
+      const realPath = makeImportPath(
+        context,
+        fromPath,
+        projectConfig.styleTokensProviderFilePath,
+        true
+      );
+      stmt.source.value = realPath;
+    } else if (type === "projectModule") {
+      const projectConfig = fixImportContext.projects[uuid];
+      if (!projectConfig) {
+        throwMissingReference(context, "project", uuid, fromPath);
+      }
+      const realPath = makeImportPath(
+        context,
+        fromPath,
+        projectConfig.projectModuleFilePath,
+        true
+      );
+      stmt.source.value = realPath;
     } else if (type === "rscClient") {
       const compConfig = fixImportContext.components[uuid];
       if (!compConfig) {
@@ -668,7 +696,13 @@ export async function fixAllImportStatements(
   }
 
   try {
-    fixSplitsProviderImportStatements(context, fixImportContext, baseDir);
+    fixImportStatements(
+      context,
+      fixImportContext,
+      baseDir,
+      "splitsProviderFilePath",
+      getSplitsProviderResourcePath
+    );
   } catch (err) {
     logger.error(
       `Error encountered while fixing imports for splits provider: ${err}`
@@ -676,6 +710,36 @@ export async function fixAllImportStatements(
     lastError = err;
   }
 
+  try {
+    fixImportStatements(
+      context,
+      fixImportContext,
+      baseDir,
+      "projectModuleFilePath",
+      getProjectModuleResourcePath
+    );
+  } catch (err) {
+    logger.error(
+      `Error encountered while fixing imports for project module bundle: ${err}`
+    );
+    lastError = err;
+  }
+
+  try {
+    fixImportStatements(
+      context,
+      fixImportContext,
+      baseDir,
+      "styleTokensProviderFilePath",
+      getStyleTokensProviderResourcePath
+    );
+  } catch (err) {
+    logger.error(
+      `Error encountered while fixing imports for style tokens provider: ${err}`
+    );
+    lastError = err;
+  }
+
   if (lastError) {
     throw lastError;
   }
@@ -901,14 +965,17 @@ async function fixGlobalContextImportStatements(
   }
 }
 
-async function fixSplitsProviderImportStatements(
+async function fixImportStatements(
   context: PlasmicContext,
   fixImportContext: FixImportContext,
-  baseDir: string
+  baseDir: string,
+  configKey: keyof ProjectConfig,
+  getResourcePath: (context: PlasmicContext, project: ProjectConfig) => string
 ) {
   for (const project of context.config.projects) {
-    if (!project.splitsProviderFilePath) continue;
-    const resourcePath = getSplitsProviderResourcePath(context, project);
+    if (!project[configKey]) continue;
+
+    const resourcePath = getResourcePath(context, project);
 
     let prevContent: string;
     try {

package/src/utils/config-utils.ts

@@ -191,6 +191,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;
 
   // Code-component-related fields can be treated as optional not to be shown
   // to the users nor appear to be missing in the documentation.
@@ -234,6 +238,8 @@ export function createProjectConfig(base: {
     indirect: base.indirect,
     globalContextsFilePath: "",
     splitsProviderFilePath: "",
+    styleTokensProviderFilePath: "",
+    projectModuleFilePath: "",
   };
 }
 
@@ -361,7 +367,9 @@ export interface FileLock {
     | "projectCss"
     | "globalVariant"
     | "globalContexts"
-    | "splitsProvider";
+    | "splitsProvider"
+    | "styleTokensProvider"
+    | "projectModule";
   // The checksum value for the file
   checksum: string;
   // The component id, or the image asset id
@@ -611,6 +619,8 @@ export function getOrAddProjectConfig(
           indirect: false,
           globalContextsFilePath: "",
           splitsProviderFilePath: "",
+          styleTokensProviderFilePath: "",
+          projectModuleFilePath: "",
         };
     context.config.projects.push(project);
   }