@plasmicapp/cli 0.1.348 → 0.1.350

package/dist/plasmic.schema.json

@@ -394,6 +394,10 @@
                     },
                     "type": "array"
                 },
+                "dataTokensFilePath": {
+                    "description": "File location for the project-wide data tokens provider. Relative to srcDir",
+                    "type": "string"
+                },
                 "globalContextsFilePath": {
                     "description": "File location for the project-wide global contexts. Relative to srcDir",
                     "type": "string"
@@ -458,6 +462,7 @@
             "required": [
                 "components",
                 "cssFilePath",
+                "dataTokensFilePath",
                 "globalContextsFilePath",
                 "icons",
                 "images",

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

@@ -148,6 +148,8 @@ export interface ProjectConfig {
     splitsProviderFilePath: string;
     /** File location for the project-wide style tokens provider. Relative to srcDir */
     styleTokensProviderFilePath: string;
+    /** File location for the project-wide data tokens provider. Relative to srcDir */
+    dataTokensFilePath: string;
     /** File location for the project-wide plasmic.ts file. Relative to srcDir */
     projectModuleFilePath: string;
     jsBundleThemes?: JsBundleThemeConfig[];
@@ -266,7 +268,7 @@ export interface GlobalVariantGroupConfig {
     contextFilePath: string;
 }
 export interface FileLock {
-    type: "renderModule" | "cssRules" | "icon" | "image" | "projectCss" | "globalVariant" | "globalContexts" | "splitsProvider" | "styleTokensProvider" | "projectModule";
+    type: "renderModule" | "cssRules" | "icon" | "image" | "projectCss" | "globalVariant" | "globalContexts" | "splitsProvider" | "styleTokensProvider" | "dataTokens" | "projectModule";
     checksum: string;
     assetId: string;
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@plasmicapp/cli",
-  "version": "0.1.348",
+  "version": "0.1.350",
   "description": "plasmic cli for syncing local code with Plasmic designs",
   "engines": {
     "node": ">=12"
@@ -82,5 +82,5 @@
     "wrap-ansi": "^7.0.0",
     "yargs": "^15.4.1"
   },
-  "gitHead": "dff908ba603a5e5385e126fa431de2e96e497960"
+  "gitHead": "1e8a75eb4e5dcf4aa0c74b830234d5a0c3e2eabf"
 }

package/src/__mocks__/api.ts

@@ -181,7 +181,7 @@ function genEmptyStyleTokensMap() {
     props: [],
     global: {
       meta: {
-        source: "plasmic.app" as "plasmic.app",
+        source: "plasmic.app" as const,
       },
     },
   };
@@ -269,7 +269,7 @@ class PlasmicApi {
     });
 
     // Get dependencies
-    if (!!recursive) {
+    if (recursive) {
       const deps = [...getDeps(results.projects)];
       results.dependencies.push(...deps);
     }
@@ -356,6 +356,7 @@ class PlasmicApi {
         globalContextsChecksum: "",
         splitsProviderChecksum: "",
         styleTokensProviderChecksum: "",
+        dataTokensChecksum: "",
         projectModuleChecksum: "",
       } as ChecksumBundle,
       usedNpmPackages: [],
@@ -365,25 +366,25 @@ class PlasmicApi {
   }
 
   async uploadBundle(
-    projectId: string,
-    bundleName: string,
-    bundleJs: string,
-    css: string[],
-    metaJson: string
+    _projectId: string,
+    _bundleName: string,
+    _bundleJs: string,
+    _css: string[],
+    _metaJson: string
   ): Promise<StyleTokensMap> {
     throw new Error("Unimplemented");
   }
 
   async projectStyleTokens(
-    projectId: string,
-    branchName: string
+    _projectId: string,
+    _branchName: string
   ): Promise<StyleTokensMap> {
     throw new Error("Unimplemented");
   }
 
   async projectIcons(
-    projectId: string,
-    branchName: string
+    _projectId: string,
+    _branchName: string
   ): Promise<ProjectIconsResponse> {
     throw new Error("Unimplemented");
   }

package/src/actions/export.ts

@@ -18,6 +18,7 @@ import {
 } from "../utils/config-utils";
 import { getContext, getCurrentOrDefaultAuth } from "../utils/get-context";
 import { tuple } from "../utils/lang-utils";
+import { DEFAULT_DATA_TOKENS_NAME } from "./sync-data-tokens";
 import { DEFAULT_GLOBAL_CONTEXTS_NAME } from "./sync-global-contexts";
 import { ensureImageAssetContents } from "./sync-images";
 import { DEFAULT_PROJECT_MODULE_NAME } from "./sync-project-module";
@@ -212,6 +213,9 @@ export async function exportProjectsCli(opts: ExportArgs): Promise<void> {
               .styleTokensProviderBundle
               ? `${projectName}/${DEFAULT_STYLE_TOKENS_PROVIDER_NAME}.${extx}`
               : "",
+            dataTokensFilePath: bundle.projectConfig.dataTokensBundle
+              ? `${projectName}/${DEFAULT_DATA_TOKENS_NAME}.${opts.codeLang}`
+              : "",
             projectModuleFilePath: bundle.projectConfig.projectModuleBundle
               ? `${projectName}/${DEFAULT_PROJECT_MODULE_NAME}.${extx}`
               : "",

package/src/actions/sync-data-tokens.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-data-tokens";
+export const DEFAULT_DATA_TOKENS_NAME = MODULE_NAME;
+
+export async function syncDataTokens(
+  context: PlasmicContext,
+  projectMeta: ProjectMetaBundle,
+  projectConfig: ProjectConfig,
+  projectLock: ProjectLock,
+  checksums: ChecksumBundle,
+  baseDir: string
+) {
+  const resourcePath = getDataTokensResourcePath(context, projectConfig);
+  if (checksums.dataTokensChecksum && projectMeta.dataTokensBundle) {
+    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.dataTokensBundle.module = await formatScript(
+        tsxToJsx(projectMeta.dataTokensBundle.module),
+        baseDir
+      );
+    }
+    writeFileContent(
+      context,
+      resourcePath,
+      projectMeta.dataTokensBundle.module,
+      { force: true }
+    );
+    projectConfig.dataTokensFilePath = resourcePath;
+    const fl = projectLock.fileLocks.find(
+      (lock) =>
+        lock.assetId === projectConfig.projectId && lock.type === "dataTokens"
+    );
+    if (fl) {
+      fl.checksum = checksums.dataTokensChecksum || "";
+    } else {
+      projectLock.fileLocks.push({
+        assetId: projectConfig.projectId,
+        checksum: checksums.dataTokensChecksum || "",
+        type: "dataTokens",
+      });
+    }
+  } else if (!checksums.dataTokensChecksum && !projectMeta.dataTokensBundle) {
+    // Only try to delete if there was a previously configured path
+    if (projectConfig.dataTokensFilePath) {
+      if (fileExists(context, projectConfig.dataTokensFilePath)) {
+        deleteFile(context, projectConfig.dataTokensFilePath);
+      }
+      projectConfig.dataTokensFilePath = "";
+    }
+    L.remove(
+      projectLock.fileLocks,
+      (fl) => fl.assetId === projectConfig.projectId && fl.type === "dataTokens"
+    );
+  }
+}
+
+export function getDataTokensResourcePath(
+  context: PlasmicContext,
+  projectConfig: ProjectConfig
+) {
+  if (projectConfig.dataTokensFilePath) {
+    return projectConfig.dataTokensFilePath;
+  }
+  return defaultResourcePath(
+    context,
+    projectConfig.projectName,
+    `${MODULE_NAME}.${context.config.code.lang}`
+  );
+}

package/src/actions/sync.ts

@@ -52,6 +52,7 @@ import { checkVersionResolution } from "../utils/resolve-utils";
 import * as semver from "../utils/semver";
 import { confirmWithUser } from "../utils/user-utils";
 import { syncProjectComponents } from "./sync-components";
+import { syncDataTokens } from "./sync-data-tokens";
 import { syncGlobalContexts } from "./sync-global-contexts";
 import { syncGlobalVariants } from "./sync-global-variants";
 import { syncProjectIconAssets } from "./sync-icons";
@@ -796,6 +797,15 @@ async function syncProjectConfig(
     baseDir
   );
 
+  await syncDataTokens(
+    context,
+    projectBundle,
+    projectConfig,
+    projectLock,
+    checksums,
+    baseDir
+  );
+
   // Write out components
   await syncProjectComponents(
     context,

package/src/api.ts

@@ -71,6 +71,11 @@ export interface StyleTokensProviderBundle {
   module: string;
 }
 
+export interface DataTokensBundle {
+  id: string;
+  module: string;
+}
+
 export interface ProjectModuleBundle {
   id: string;
   module: string;
@@ -90,6 +95,7 @@ export interface ProjectMetaBundle {
   globalContextBundle?: GlobalContextBundle;
   splitsProviderBundle?: SplitsProviderBundle;
   styleTokensProviderBundle?: StyleTokensProviderBundle;
+  dataTokensBundle?: DataTokensBundle;
   projectModuleBundle?: ProjectModuleBundle;
   // A list of files that are exported from the project and *can* be used by the user
   reactWebExportedFiles?: Array<{
@@ -204,6 +210,8 @@ export interface ChecksumBundle {
   splitsProviderChecksum: string;
   // Checksum of project style tokens provider
   styleTokensProviderChecksum: string;
+  // Checksum of project data tokens provider
+  dataTokensChecksum: string;
   // Checksum of project plasmic.ts
   projectModuleChecksum: string;
 }

package/src/test-common/fixtures.ts

@@ -153,6 +153,7 @@ export const project1Config: ProjectConfig = {
   globalContextsFilePath: "",
   splitsProviderFilePath: "",
   styleTokensProviderFilePath: "",
+  dataTokensFilePath: "",
   projectModuleFilePath: "",
 };
 

package/src/utils/checksum.ts

@@ -36,6 +36,9 @@ function getFilesByFileLockAssetId(
     styleTokensProvider: {
       [projectConfig.projectId]: projectConfig.styleTokensProviderFilePath,
     },
+    dataTokens: {
+      [projectConfig.projectId]: projectConfig.dataTokensFilePath,
+    },
     projectModule: {
       [projectConfig.projectId]: projectConfig.projectModuleFilePath,
     },
@@ -53,7 +56,7 @@ export function getChecksums(
   );
 
   const projectLock = context.lock.projects.find(
-    (projectLock) => projectLock.projectId === projectId
+    (lock) => lock.projectId === projectId
   );
 
   if (!projectConfig || !projectLock || opts.allFiles) {
@@ -67,6 +70,7 @@ export function getChecksums(
       globalContextsChecksum: "",
       splitsProviderChecksum: "",
       styleTokensProviderChecksum: "",
+      dataTokensChecksum: "",
       projectModuleChecksum: "",
     };
   }
@@ -210,6 +214,18 @@ export function getChecksums(
       ? splitsProviderChecksums[0].checksum
       : "";
 
+  const dataTokensChecksums = fileLocks
+    .filter(
+      (fileLock) =>
+        fileLock.type === "dataTokens" && fileLock.assetId === projectId
+    )
+    .filter((fileLock) =>
+      checkFile(fileLocations.dataTokens[fileLock.assetId])
+    );
+  assert(dataTokensChecksums.length < 2);
+  const dataTokensChecksum =
+    dataTokensChecksums.length > 0 ? dataTokensChecksums[0].checksum : "";
+
   return {
     imageChecksums,
     iconChecksums,
@@ -220,6 +236,7 @@ export function getChecksums(
     globalContextsChecksum,
     splitsProviderChecksum,
     styleTokensProviderChecksum,
+    dataTokensChecksum,
     projectModuleChecksum,
   };
 }

package/src/utils/code-utils.ts

@@ -8,6 +8,7 @@ import type { Options } from "prettier";
 import * as Prettier from "prettier";
 import * as ts from "typescript";
 import path from "upath";
+import { getDataTokensResourcePath } from "../actions/sync-data-tokens";
 import { getGlobalContextsResourcePath } from "../actions/sync-global-contexts";
 import {
   fixComponentCssReferences,
@@ -180,6 +181,7 @@ type PlasmicImportType =
   | "customFunction"
   | "splitsProvider"
   | "styleTokensProvider"
+  | "dataTokens"
   | "projectModule"
   | "rscClient"
   | "rscServer"
@@ -212,7 +214,7 @@ function tryParsePlasmicImportSpec(node: ImportDeclaration) {
         "plasmic-import:\\s+([",
         ...validJsIdentifierChars,
         "\\.",
-        "]+)(?:\\/(component|css|render|globalVariant|projectcss|defaultcss|icon|picture|jsBundle|codeComponent|globalContext|customFunction|splitsProvider|styleTokensProvider|projectModule|rscClient|rscServer))?",
+        "]+)(?:\\/(component|css|render|globalVariant|projectcss|defaultcss|icon|picture|jsBundle|codeComponent|globalContext|customFunction|splitsProvider|styleTokensProvider|dataTokens|projectModule|rscClient|rscServer))?",
       ].join("")
     )
   );
@@ -448,6 +450,17 @@ export async function replaceImports(
         projectConfig.styleTokensProviderFilePath
       );
       stmt.source.value = realPath;
+    } else if (type === "dataTokens") {
+      const projectConfig = fixImportContext.projects[uuid];
+      if (!projectConfig) {
+        throwMissingReference(context, "project", uuid, fromPath);
+      }
+      const realPath = makeImportPath(
+        context,
+        fromPath,
+        projectConfig.dataTokensFilePath
+      );
+      stmt.source.value = realPath;
     } else if (type === "projectModule") {
       const projectConfig = fixImportContext.projects[uuid];
       if (!projectConfig) {
@@ -718,6 +731,21 @@ export async function fixAllImportStatements(
     lastError = err;
   }
 
+  try {
+    await fixImportStatements(
+      context,
+      fixImportContext,
+      baseDir,
+      "dataTokensFilePath",
+      getDataTokensResourcePath
+    );
+  } catch (err) {
+    logger.error(
+      `Error encountered while fixing imports for data tokens: ${err}`
+    );
+    lastError = err;
+  }
+
   if (lastError) {
     throw lastError;
   }

package/src/utils/config-utils.ts

@@ -196,6 +196,8 @@ export interface ProjectConfig {
   splitsProviderFilePath: string;
   /** File location for the project-wide style tokens provider. Relative to srcDir */
   styleTokensProviderFilePath: string;
+  /** File location for the project-wide data tokens provider. Relative to srcDir */
+  dataTokensFilePath: string;
   /** File location for the project-wide plasmic.ts file. Relative to srcDir */
   projectModuleFilePath: string;
 
@@ -242,6 +244,7 @@ export function createProjectConfig(base: {
     globalContextsFilePath: "",
     splitsProviderFilePath: "",
     styleTokensProviderFilePath: "",
+    dataTokensFilePath: "",
     projectModuleFilePath: "",
   };
 }
@@ -372,6 +375,7 @@ export interface FileLock {
     | "globalContexts"
     | "splitsProvider"
     | "styleTokensProvider"
+    | "dataTokens"
     | "projectModule";
   // The checksum value for the file
   checksum: string;
@@ -628,6 +632,7 @@ export function getOrAddProjectConfig(
           globalContextsFilePath: "",
           splitsProviderFilePath: "",
           styleTokensProviderFilePath: "",
+          dataTokensFilePath: "",
           projectModuleFilePath: "",
         };
     context.config.projects.push(project);

package/tsconfig.json

@@ -63,7 +63,14 @@
     "skipLibCheck": true,
 
     /* Advanced Options */
-    "forceConsistentCasingInFileNames": true /* Disallow inconsistently-cased references to the same file. */
+    "forceConsistentCasingInFileNames": true /* Disallow inconsistently-cased references to the same file. */,
+
+    "paths": {
+      // This package depends on inquirer@7, but we just installed inquirer@12 as a transitive dep.
+      // inquirere@12 which ships with .d.ts files, which tsc automatically finds and uses.
+      // This tells tsc to use @types/inquirer instead.
+      "inquirer": ["../../node_modules/@types/inquirer"]
+    }
   },
   "include": ["src"]
 }