@plasmicapp/cli 0.1.334 → 0.1.336

package/dist/plasmic.schema.json

@@ -112,6 +112,21 @@
                     "description": "The file path for the blackbox render module, relative to srcDir.",
                     "type": "string"
                 },
+                "rsc": {
+                    "properties": {
+                        "clientModulePath": {
+                            "type": "string"
+                        },
+                        "serverModulePath": {
+                            "type": "string"
+                        }
+                    },
+                    "required": [
+                        "clientModulePath",
+                        "serverModulePath"
+                    ],
+                    "type": "object"
+                },
                 "scheme": {
                     "description": "Code generation scheme used for this component",
                     "enum": [

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

@@ -36,3 +36,4 @@ export declare function fixAllImportStatements(context: PlasmicContext, baseDir:
 export declare const tsxToJsx: (code: string) => string;
 export declare function maybeConvertTsxToJsx(fileName: string, content: string, baseDir: string): string[];
 export declare const formatScript: (code: string, baseDir: string) => string;
+export declare function fixRscModulesImports(context: PlasmicContext, baseDir: string, fixImportContext: FixImportContext, compConfig: ComponentConfig): Promise<void>;

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

@@ -206,6 +206,10 @@ export interface ComponentConfig {
     path?: string;
     /** Plume type if component is a Plume component */
     plumeType?: string;
+    rsc?: {
+        serverModulePath: string;
+        clientModulePath: string;
+    };
 }
 export interface IconConfig {
     /** ID of icon */

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

@@ -0,0 +1,3 @@
+import { ComponentBundle } from "../api";
+import { ComponentConfig, PlasmicContext, ProjectConfig } from "./config-utils";
+export declare function syncRscFiles(context: PlasmicContext, project: ProjectConfig, bundle: ComponentBundle, compConfig: ComponentConfig): Promise<void>;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@plasmicapp/cli",
-  "version": "0.1.334",
+  "version": "0.1.336",
   "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": "01695647a4ffb7abc8d31004535f7db6cc29f3be"
+  "gitHead": "e390ac2d296d887f8ed34f29fd85f21a315c35da"
 }

package/src/actions/sync-components.ts

@@ -5,10 +5,10 @@ import { logger } from "../deps";
 import { ComponentUpdateSummary, formatAsLocal } from "../utils/code-utils";
 import {
   CONFIG_FILE_NAME,
-  isPageAwarePlatform,
   PlasmicContext,
   ProjectConfig,
   ProjectLock,
+  isPageAwarePlatform,
 } from "../utils/config-utils";
 import {
   defaultPagePath,
@@ -21,6 +21,7 @@ import {
   writeFileContent,
 } from "../utils/file-utils";
 import { assert, ensure } from "../utils/lang-utils";
+import { syncRscFiles } from "../utils/rsc-config";
 import { confirmWithUser } from "../utils/user-utils";
 
 export async function syncProjectComponents(
@@ -304,5 +305,7 @@ export async function syncProjectComponents(
       );
     }
     summary.set(id, { skeletonModuleModified });
+
+    await syncRscFiles(context, project, bundle, compConfig);
   }
 }

package/src/actions/sync.ts

@@ -22,11 +22,11 @@ import {
 } from "../utils/code-utils";
 import {
   CONFIG_FILE_NAME,
-  createProjectConfig,
   CustomFunctionConfig,
+  PlasmicContext,
+  createProjectConfig,
   getOrAddProjectConfig,
   getOrAddProjectLock,
-  PlasmicContext,
   updateConfig,
 } from "../utils/config-utils";
 import { HandledError } from "../utils/error";
@@ -38,7 +38,7 @@ import {
   withBufferedFs,
   writeFileContent,
 } from "../utils/file-utils";
-import { generateMetadata, getContext, Metadata } from "../utils/get-context";
+import { Metadata, generateMetadata, getContext } from "../utils/get-context";
 import { printFirstSyncInfo } from "../utils/help";
 import { ensure, tuple } from "../utils/lang-utils";
 import {

package/src/api.ts

@@ -1,5 +1,5 @@
 import axios, { AxiosError } from "axios";
-import socketio, { Socket } from "socket.io-client";
+import socketio from "socket.io-client";
 import {
   AuthConfig,
   CodeConfig,
@@ -33,6 +33,19 @@ export interface ComponentBundle {
   isPage: boolean;
   path?: string;
   plumeType?: string;
+  rscMetadata?: {
+    // When we generate code for RSC, we generate two additional files per page, those files are used to increment the user experience,
+    // it's added one managed server file which is responsible for performing the server actions and one skeleton file which allows the
+    // user to add client side logic to the page (the `renderModule` will contain a server component for entry point allowing the user to
+    // perform additional server operations).
+    pageWrappers: Record<
+      "client" | "server",
+      {
+        module: string;
+        fileName: string;
+      }
+    >;
+  };
 }
 
 export interface GlobalVariantBundle {
@@ -440,7 +453,7 @@ export class PlasmicApi {
     return result.data as ProjectIconsResponse;
   }
 
-  connectSocket(): Socket {
+  connectSocket(): ReturnType<typeof socketio> {
     const socket = socketio(this.studioHost, {
       path: `/api/v1/socket`,
       transportOptions: {

package/src/utils/code-utils.ts

@@ -18,9 +18,9 @@ import { logger } from "../deps";
 import { GLOBAL_SETTINGS } from "../globals";
 import { HandledError } from "../utils/error";
 import {
+  CONFIG_FILE_NAME,
   CodeComponentConfig,
   ComponentConfig,
-  CONFIG_FILE_NAME,
   CustomFunctionConfig,
   GlobalVariantGroupConfig,
   IconConfig,
@@ -173,6 +173,8 @@ type PlasmicImportType =
   | "globalContext"
   | "customFunction"
   | "splitsProvider"
+  | "rscClient"
+  | "rscServer"
   | undefined;
 
 const validJsIdentifierChars = [
@@ -201,7 +203,7 @@ function tryParsePlasmicImportSpec(node: ImportDeclaration) {
         "plasmic-import:\\s+([",
         ...validJsIdentifierChars,
         "\\.",
-        "]+)(?:\\/(component|css|render|globalVariant|projectcss|defaultcss|icon|picture|jsBundle|codeComponent|globalContext|customFunction|splitsProvider))?",
+        "]+)(?:\\/(component|css|render|globalVariant|projectcss|defaultcss|icon|picture|jsBundle|codeComponent|globalContext|customFunction|splitsProvider|rscClient|rscServer))?",
       ].join("")
     )
   );
@@ -439,6 +441,46 @@ export function replaceImports(
         true
       );
       stmt.source.value = realPath;
+    } else if (type === "rscClient") {
+      const compConfig = fixImportContext.components[uuid];
+      if (!compConfig) {
+        throwMissingReference(context, "component", uuid, fromPath);
+      }
+      const clientModulePath = compConfig.rsc?.clientModulePath;
+      if (!clientModulePath) {
+        throw new HandledError(
+          `Encountered Plasmic component "${uuid}" that is missing a rscClientModulePath.`
+        );
+      }
+
+      stmt.source.value = makeImportPath(
+        context,
+        fromPath,
+        clientModulePath,
+        true
+      );
+    } else if (type === "rscServer") {
+      const compConfig = fixImportContext.components[uuid];
+      if (!compConfig) {
+        throwMissingReference(context, "component", uuid, fromPath);
+      }
+      const serverModulePath = compConfig.rsc?.serverModulePath;
+      if (!serverModulePath) {
+        throw new HandledError(
+          `Encountered Plasmic component "${uuid}" that is missing a rscServerModulePath.`
+        );
+      }
+
+      logger.info(
+        `Fixing "rscServer" with "${serverModulePath}" and from "${fromPath}"`
+      );
+
+      stmt.source.value = makeImportPath(
+        context,
+        fromPath,
+        serverModulePath,
+        true
+      );
     }
   });
 
@@ -569,6 +611,17 @@ export async function fixAllImportStatements(
   let lastError: any = undefined;
   for (const project of config.projects) {
     for (const compConfig of project.components) {
+      try {
+        await fixRscModulesImports(
+          context,
+          baseDir,
+          fixImportContext,
+          compConfig
+        );
+      } catch (err) {
+        lastError = err;
+      }
+
       const compSummary = summary?.get(compConfig.id);
       if (summary && !compSummary) {
         continue;
@@ -876,3 +929,43 @@ async function fixSplitsProviderImportStatements(
     }
   }
 }
+
+export async function fixRscModulesImports(
+  context: PlasmicContext,
+  baseDir: string,
+  fixImportContext: FixImportContext,
+  compConfig: ComponentConfig
+) {
+  const errors: any[] = [];
+
+  for (const modulePath of [
+    compConfig.rsc?.clientModulePath,
+    compConfig.rsc?.serverModulePath,
+  ]) {
+    if (!modulePath) {
+      continue;
+    }
+
+    logger.info(`Fixing rsc import statements... ${modulePath}`);
+
+    try {
+      await fixFileImportStatements(
+        context,
+        modulePath,
+        fixImportContext,
+        false,
+        baseDir
+      );
+    } catch (err) {
+      logger.error(
+        `Error encountered while fixing imports for rsc modules ${compConfig.name}: ${err}`
+      );
+
+      errors.push(err);
+    }
+  }
+
+  if (errors.length) {
+    throw errors[0];
+  }
+}

package/src/utils/config-utils.ts

@@ -288,6 +288,11 @@ export interface ComponentConfig {
 
   /** Plume type if component is a Plume component */
   plumeType?: string;
+
+  rsc?: {
+    serverModulePath: string;
+    clientModulePath: string;
+  };
 }
 
 export interface IconConfig {

package/src/utils/file-utils.ts

@@ -264,20 +264,31 @@ export function findFile(
     traverseParents?: boolean;
   }
 ): string | undefined {
-  const files = fs.readdirSync(dir);
-  const found = files.find((f) => pred(f));
-  if (found) {
-    return path.join(dir, found);
-  }
-  if (!opts.traverseParents) {
-    return undefined;
-  }
-  const parent = path.dirname(dir);
-  if (parent === dir) {
-    // We've hit the root dir already
-    return undefined;
+  try {
+    const files = fs.readdirSync(dir);
+    const found = files.find((f) => pred(f));
+    if (found) {
+      return path.join(dir, found);
+    }
+    if (!opts.traverseParents) {
+      return undefined;
+    }
+    const parent = path.dirname(dir);
+    if (parent === dir) {
+      // We've hit the root dir already
+      return undefined;
+    }
+    return findFile(path.dirname(dir), pred, opts);
+  } catch (err) {
+    if (err instanceof Error && "code" in err && err.code === "EACCES") {
+      // If the user is lacking file system permissions,
+      // show the error and assume the file is missing.
+      logger.warn(err);
+      return undefined;
+    } else {
+      throw err;
+    }
   }
-  return findFile(path.dirname(dir), pred, opts);
 }
 
 type BundleKeyPair = {

package/src/utils/rsc-config.ts

@@ -0,0 +1,51 @@
+import { ComponentBundle } from "../api";
+import { ComponentConfig, PlasmicContext, ProjectConfig } from "./config-utils";
+import { defaultResourcePath, writeFileContent } from "./file-utils";
+
+export async function syncRscFiles(
+  context: PlasmicContext,
+  project: ProjectConfig,
+  bundle: ComponentBundle,
+  compConfig: ComponentConfig
+) {
+  const rscMetadata = bundle.rscMetadata;
+  if (rscMetadata) {
+    if (!compConfig.rsc) {
+      compConfig.rsc = {
+        serverModulePath: "",
+        clientModulePath: "",
+      };
+    }
+
+    const serverModuleFilePath = defaultResourcePath(
+      context,
+      project,
+      rscMetadata.pageWrappers.server.fileName
+    );
+    compConfig.rsc.serverModulePath = serverModuleFilePath;
+
+    await writeFileContent(
+      context,
+      serverModuleFilePath,
+      rscMetadata.pageWrappers.server.module,
+      {
+        force: true,
+      }
+    );
+
+    const clientModuleFilePath = compConfig.importSpec.modulePath.replace(
+      /\.tsx$/,
+      "-client.tsx"
+    );
+    compConfig.rsc.clientModulePath = clientModuleFilePath;
+
+    await writeFileContent(
+      context,
+      clientModuleFilePath,
+      rscMetadata.pageWrappers.client.module,
+      {
+        force: false,
+      }
+    );
+  }
+}