@plasmicapp/cli 0.1.311 → 0.1.314

package/dist/plasmic.schema.json

@@ -142,6 +142,35 @@
             ],
             "type": "object"
         },
+        "CustomFunctionConfig": {
+            "properties": {
+                "defaultExport": {
+                    "type": "boolean"
+                },
+                "id": {
+                    "type": "string"
+                },
+                "importPath": {
+                    "type": "string"
+                },
+                "name": {
+                    "type": "string"
+                },
+                "namespace": {
+                    "type": [
+                        "null",
+                        "string"
+                    ]
+                }
+            },
+            "required": [
+                "defaultExport",
+                "id",
+                "importPath",
+                "name"
+            ],
+            "type": "object"
+        },
         "GlobalVariantGroupConfig": {
             "properties": {
                 "contextFilePath": {
@@ -325,6 +354,12 @@
                     "description": "File location for the project-wide css styles. Relative to srcDir",
                     "type": "string"
                 },
+                "customFunctions": {
+                    "items": {
+                        "$ref": "#/definitions/CustomFunctionConfig"
+                    },
+                    "type": "array"
+                },
                 "globalContextsFilePath": {
                     "description": "File location for the project-wide global contexts. Relative to srcDir",
                     "type": "string"

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

@@ -1,7 +1,6 @@
 import { ImportDeclaration } from "@babel/types";
-import L from "lodash";
 import { Options } from "prettier";
-import { CodeComponentConfig, ComponentConfig, GlobalVariantGroupConfig, IconConfig, ImageConfig, PlasmicConfig, PlasmicContext, ProjectConfig } from "./config-utils";
+import { CodeComponentConfig, ComponentConfig, CustomFunctionConfig, GlobalVariantGroupConfig, IconConfig, ImageConfig, PlasmicConfig, PlasmicContext, ProjectConfig } from "./config-utils";
 export declare const formatAsLocal: (content: string, filePath: string, baseDir: string, defaultOpts?: Options) => string;
 export declare function ensureImportSpecifierWithAlias(decl: ImportDeclaration, imported: string, alias: string): void;
 export declare function ensureImportDefaultSpecifier(decl: ImportDeclaration, defaultExport: string): void;
@@ -22,20 +21,13 @@ export interface FixImportContext {
     config: PlasmicConfig;
     components: Record<string, ComponentConfig>;
     codeComponentMetas: Record<string, CodeComponentConfig>;
+    customFunctionMetas: Record<string, CustomFunctionConfig>;
     globalVariants: Record<string, GlobalVariantGroupConfig>;
     icons: Record<string, IconConfig>;
     images: Record<string, ImageConfig>;
     projects: Record<string, ProjectConfig>;
 }
-export declare const mkFixImportContext: (config: PlasmicConfig) => {
-    config: PlasmicConfig;
-    components: L.Dictionary<ComponentConfig>;
-    codeComponentMetas: L.Dictionary<CodeComponentConfig>;
-    globalVariants: L.Dictionary<GlobalVariantGroupConfig>;
-    icons: L.Dictionary<IconConfig>;
-    images: L.Dictionary<ImageConfig>;
-    projects: L.Dictionary<ProjectConfig>;
-};
+export declare const mkFixImportContext: (config: PlasmicConfig) => FixImportContext;
 /**
  * Assuming that all the files referenced in PlasmicConfig are correct, fixes import statements using PlasmicConfig
  * file locations as the source of truth.

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

@@ -108,6 +108,13 @@ export interface CodeComponentConfig {
         importPath: string;
     };
 }
+export interface CustomFunctionConfig {
+    id: string;
+    name: string;
+    namespace?: string | null;
+    importPath: string;
+    defaultExport: boolean;
+}
 export interface ProjectConfig {
     /** Project ID */
     projectId: string;
@@ -130,6 +137,7 @@ export interface ProjectConfig {
     globalContextsFilePath: string;
     jsBundleThemes?: JsBundleThemeConfig[];
     codeComponents?: CodeComponentConfig[];
+    customFunctions?: CustomFunctionConfig[];
     /** Metadata for each synced component in this project. */
     components: ComponentConfig[];
     /** Metadata for each synced icon in this project */

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@plasmicapp/cli",
-  "version": "0.1.311",
+  "version": "0.1.314",
   "description": "plasmic cli for syncing local code with Plasmic designs",
   "engines": {
     "node": ">=12"
@@ -78,5 +78,5 @@
     "wrap-ansi": "^7.0.0",
     "yargs": "^15.4.1"
   },
-  "gitHead": "dbe6519e32e754c106a17535505bd1ae7cff082d"
+  "gitHead": "6e966ef24adb9af472b56a5051faf2b8e6e04f12"
 }

package/src/__mocks__/api.ts

@@ -341,6 +341,7 @@ class PlasmicApi {
     const result = {
       components,
       codeComponentMetas: [],
+      customFunctionMetas: [],
       projectConfig: genProjectMetaBundle(projectId),
       globalVariants: [],
       usedTokens: genEmptyStyleTokensMap(),

package/src/actions/export.ts

@@ -10,11 +10,11 @@ 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";
@@ -200,6 +200,15 @@ export async function exportProjectsCli(opts: ExportArgs): Promise<void> {
               componentImportPath: comp.importPath,
               helper: comp.helper,
             })),
+            customFunctionMetas: (bundle.customFunctionMetas ?? []).map(
+              (meta) => ({
+                id: meta.id,
+                name: meta.name,
+                importPath: meta.importPath,
+                defaultExport: meta.defaultExport,
+                namespace: meta.namespace ?? null,
+              })
+            ),
             icons: bundle.iconAssets.map((icon) => ({
               id: icon.id,
               name: icon.name,

package/src/actions/sync.ts

@@ -22,25 +22,23 @@ import {
 } from "../utils/code-utils";
 import {
   CONFIG_FILE_NAME,
-  PlasmicContext,
   createProjectConfig,
+  CustomFunctionConfig,
   getOrAddProjectConfig,
   getOrAddProjectLock,
+  PlasmicContext,
   updateConfig,
 } from "../utils/config-utils";
 import { HandledError } from "../utils/error";
 import {
   assertAllPathsInRootDir,
   defaultResourcePath,
-  existsBuffered,
-  readFileText,
   renameFile,
   stripExtension,
   withBufferedFs,
   writeFileContent,
-  writeFileText,
 } from "../utils/file-utils";
-import { Metadata, generateMetadata, getContext } from "../utils/get-context";
+import { generateMetadata, getContext, Metadata } from "../utils/get-context";
 import { printFirstSyncInfo } from "../utils/help";
 import { ensure, tuple } from "../utils/lang-utils";
 import {
@@ -604,6 +602,11 @@ async function syncProject(
     indirect
   );
   syncCodeComponentsMeta(context, projectId, projectBundle.codeComponentMetas);
+  await syncCustomFunctionsMeta(
+    context,
+    projectId,
+    projectBundle.customFunctionMetas
+  );
   await upsertStyleTokens(
     context,
     projectBundle.usedTokens,
@@ -807,3 +810,18 @@ function syncCodeComponentsMeta(
       : {}),
   }));
 }
+
+function syncCustomFunctionsMeta(
+  context: PlasmicContext,
+  projectId: string,
+  customFunctionBundles: CustomFunctionConfig[]
+) {
+  const projectConfig = getOrAddProjectConfig(context, projectId);
+  projectConfig.customFunctions = customFunctionBundles.map((meta) => ({
+    defaultExport: meta.defaultExport,
+    id: meta.id,
+    importPath: meta.importPath,
+    name: meta.name,
+    namespace: meta.namespace ?? null,
+  }));
+}

package/src/api.ts

@@ -3,6 +3,7 @@ import socketio, { Socket } from "socket.io-client";
 import {
   AuthConfig,
   CodeConfig,
+  CustomFunctionConfig,
   DEFAULT_HOST,
   I18NConfig,
   ImagesConfig,
@@ -112,6 +113,7 @@ export interface ProjectMetaInfo {
 export interface ProjectBundle {
   components: ComponentBundle[];
   codeComponentMetas: CodeComponentMeta[];
+  customFunctionMetas: CustomFunctionConfig[];
   projectConfig: ProjectMetaBundle;
   globalVariants: GlobalVariantBundle[];
   usedTokens: StyleTokensMap;

package/src/utils/code-utils.ts

@@ -5,7 +5,7 @@ import traverse, { Node } from "@babel/traverse";
 import { ImportDeclaration } from "@babel/types";
 import L from "lodash";
 import * as Prettier from "prettier";
-import { Options, resolveConfig } from "prettier";
+import { Options } from "prettier";
 import * as ts from "typescript";
 import path from "upath";
 import { getGlobalContextsResourcePath } from "../actions/sync-global-contexts";
@@ -14,11 +14,13 @@ import {
   fixComponentImagesReferences,
 } from "../actions/sync-images";
 import { logger } from "../deps";
+import { GLOBAL_SETTINGS } from "../globals";
 import { HandledError } from "../utils/error";
 import {
   CodeComponentConfig,
   ComponentConfig,
   CONFIG_FILE_NAME,
+  CustomFunctionConfig,
   GlobalVariantGroupConfig,
   IconConfig,
   ImageConfig,
@@ -34,7 +36,6 @@ import {
   writeFileContent,
 } from "./file-utils";
 import { assert, flatMap } from "./lang-utils";
-import { GLOBAL_SETTINGS } from "../globals";
 
 export const formatAsLocal = (
   content: string,
@@ -169,15 +170,38 @@ type PlasmicImportType =
   | "codeComponent"
   | "codeComponentHelper"
   | "globalContext"
+  | "customFunction"
   | undefined;
 
+const validJsIdentifierChars = [
+  "\\u0621-\\u064A", // arabic
+  "\\u3400-\\u4DB5", // chinese
+  "\\u4E00-\\u9FCC", // chinese
+  "\\u0400-\\u04FF", // cyrillic
+  "\\u0370-\\u03ff", // greek
+  "\\u1f00-\\u1fff", // greek
+  "\\u0900-\\u097F", // hindi
+  "\\u3041-\\u3094", // japanese
+  "\\u30A1-\\u30FB", // japanese
+  "\\u0E00-\\u0E7F", // thai
+  "\\w",
+  "-_",
+];
+
 function tryParsePlasmicImportSpec(node: ImportDeclaration) {
   const c = node.trailingComments?.[0];
   if (!c) {
     return undefined;
   }
   const m = c.value.match(
-    /plasmic-import:\s+([\w-]+)(?:\/(component|css|render|globalVariant|projectcss|defaultcss|icon|picture|jsBundle|codeComponent|globalContext))?/
+    new RegExp(
+      [
+        "plasmic-import:\\s+([",
+        ...validJsIdentifierChars,
+        "\\.",
+        "]+)(?:\\/(component|css|render|globalVariant|projectcss|defaultcss|icon|picture|jsBundle|codeComponent|globalContext|customFunction))?",
+      ].join("")
+    )
   );
   if (m) {
     return { id: m[1], type: m[2] as PlasmicImportType } as PlasmicImportSpec;
@@ -384,6 +408,23 @@ export function replaceImports(
         true
       );
       stmt.source.value = realPath;
+    } else if (type === "customFunction") {
+      const meta = fixImportContext.customFunctionMetas[uuid];
+      if (!meta?.importPath) {
+        throw new HandledError(
+          `Encountered custom function "${uuid}" that was not registered with an importPath, so we don't know where to import this function from. Please see https://docs.plasmic.app/learn/code-components-ref/`
+        );
+      }
+      if (meta.importPath[0] === ".") {
+        // Relative path from the project root
+        const toPath = path.join(context.rootDir, meta.importPath);
+        assert(path.isAbsolute(toPath));
+        const realPath = makeImportPath(context, fromPath, toPath, true, true);
+        stmt.source.value = realPath;
+      } else {
+        // npm package
+        stmt.source.value = meta.importPath;
+      }
     }
   });
 
@@ -454,20 +495,26 @@ export interface FixImportContext {
   config: PlasmicConfig;
   components: Record<string, ComponentConfig>;
   codeComponentMetas: Record<string, CodeComponentConfig>;
+  customFunctionMetas: Record<string, CustomFunctionConfig>;
   globalVariants: Record<string, GlobalVariantGroupConfig>;
   icons: Record<string, IconConfig>;
   images: Record<string, ImageConfig>;
   projects: Record<string, ProjectConfig>;
 }
 
-export const mkFixImportContext = (config: PlasmicConfig) => {
+export const mkFixImportContext = (config: PlasmicConfig): FixImportContext => {
   const allComponents = flatMap(config.projects, (p) => p.components);
   const components = L.keyBy(allComponents, (c) => c.id);
   const allCodeComponents = flatMap(
     config.projects,
     (p) => p.codeComponents || []
   );
+  const allCustomFunctions = flatMap(
+    config.projects,
+    (p) => p.customFunctions ?? []
+  );
   const codeComponentMetas = L.keyBy(allCodeComponents, (c) => c.id);
+  const customFunctionMetas = L.keyBy(allCustomFunctions, (fn) => fn.id);
   const globalVariants = L.keyBy(
     config.globalVariants.variantGroups,
     (c) => c.id
@@ -485,6 +532,7 @@ export const mkFixImportContext = (config: PlasmicConfig) => {
     config,
     components,
     codeComponentMetas,
+    customFunctionMetas,
     globalVariants,
     icons,
     images,

package/src/utils/config-utils.ts

@@ -1,6 +1,6 @@
 import L from "lodash";
 import { DeepPartial } from "utility-types";
-import { PlasmicApi, ProjectIdAndToken } from "../api";
+import { PlasmicApi } from "../api";
 import { logger } from "../deps";
 import { HandledError } from "../utils/error";
 import { formatAsLocal } from "./code-utils";
@@ -152,6 +152,14 @@ export interface CodeComponentConfig {
   };
 }
 
+export interface CustomFunctionConfig {
+  id: string;
+  name: string;
+  namespace?: string | null;
+  importPath: string;
+  defaultExport: boolean;
+}
+
 export interface ProjectConfig {
   /** Project ID */
   projectId: string;
@@ -177,6 +185,7 @@ export interface ProjectConfig {
   // to the users nor appear to be missing in the documentation.
   jsBundleThemes?: JsBundleThemeConfig[];
   codeComponents?: CodeComponentConfig[];
+  customFunctions?: CustomFunctionConfig[];
 
   /** Metadata for each synced component in this project. */
   components: ComponentConfig[];