@plasmicapp/cli 0.1.335 → 0.1.337

package/dist/plasmic.schema.json

@@ -112,6 +112,24 @@
                     "description": "The file path for the blackbox render module, relative to srcDir.",
                     "type": "string"
                 },
+                "rsc": {
+                    "description": "RSC metadata for this component. The structure of the config changes when this is set:\nrenderModuleFilePath points to the client blackbox render module.\nimportSpec points to the server skeleton file.",
+                    "properties": {
+                        "clientModulePath": {
+                            "description": "The client skeleton file",
+                            "type": "string"
+                        },
+                        "serverModulePath": {
+                            "description": "The server blackbox render module",
+                            "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,17 @@ export interface ComponentConfig {
     path?: string;
     /** Plume type if component is a Plume component */
     plumeType?: string;
+    /**
+     * RSC metadata for this component. The structure of the config changes when this is set:
+     * renderModuleFilePath points to the client blackbox render module.
+     * importSpec points to the server skeleton file.
+     */
+    rsc?: {
+        /** The server blackbox render module  */
+        serverModulePath: string;
+        /** The client skeleton file */
+        clientModulePath: string;
+    };
 }
 export interface IconConfig {
     /** ID of icon */

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

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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@plasmicapp/cli",
-  "version": "0.1.335",
+  "version": "0.1.337",
   "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": "eae6a42f2cfbb2d03d1a66cfbf8fbee5595ae25c"
+  "gitHead": "5dbcf9cb4a1be8f4060acbb9e3bdf698e99af7c6"
 }

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(
@@ -231,6 +232,26 @@ export async function syncProjectComponents(
         }
         renameFile(context, compConfig.importSpec.modulePath, skeletonPath);
         compConfig.importSpec.modulePath = skeletonPath;
+        if (
+          compConfig.rsc?.clientModulePath &&
+          fileExists(context, compConfig.rsc.clientModulePath)
+        ) {
+          const clientModulePath = skeletonPath.replace(
+            /\.tsx$/,
+            "-client.tsx"
+          );
+          if (context.cliArgs.quiet !== true) {
+            logger.info(
+              `Renaming page file: ${compConfig.rsc.clientModulePath} -> ${clientModulePath}\t['${project.projectName}' ${project.projectId}/${id} ${project.version}]`
+            );
+          }
+          renameFile(
+            context,
+            compConfig.rsc.clientModulePath,
+            clientModulePath
+          );
+          compConfig.rsc.clientModulePath = clientModulePath;
+        }
       }
 
       compConfig.plumeType = plumeType;
@@ -304,5 +325,9 @@ export async function syncProjectComponents(
       );
     }
     summary.set(id, { skeletonModuleModified });
+
+    await syncRscFiles(context, project, bundle, compConfig, {
+      shouldRegenerate,
+    });
   }
 }

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,41 @@ 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;
+    }
+
+    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,18 @@ export interface ComponentConfig {
 
   /** Plume type if component is a Plume component */
   plumeType?: string;
+
+  /**
+   * RSC metadata for this component. The structure of the config changes when this is set:
+   * renderModuleFilePath points to the client blackbox render module.
+   * importSpec points to the server skeleton file.
+   */
+  rsc?: {
+    /** The server blackbox render module  */
+    serverModulePath: string;
+    /** The client skeleton file */
+    clientModulePath: string;
+  };
 }
 
 export interface IconConfig {

package/src/utils/file-utils.ts

@@ -463,11 +463,18 @@ export function readFileText(path: string): string {
         case "create":
           return ensureString(action.content);
         case "rename":
-          return readFileText(action.newPath);
+          // eslint-disable-next-line no-restricted-properties
+          return fs.readFileSync(path, "utf8");
         case "delete":
           throw new HandledError("File does not exists");
       }
     }
+    // If we are buffering files and the file has been renamed, only the old file path
+    // exists in disk, so we need to read the content from the old file path.
+    const renamedFilePath = renamedFiles.get(path);
+    if (renamedFilePath) {
+      return readFileText(renamedFilePath);
+    }
   }
 
   // eslint-disable-next-line no-restricted-properties
@@ -503,7 +510,6 @@ export function renameFileBuffered(oldPath: string, newPath: string) {
     if (renamedFile !== undefined) {
       oldPath = renamedFile;
     }
-
     buffer.set(oldPath, { type: "rename", newPath });
     renamedFiles.set(newPath, oldPath);
   } else {

package/src/utils/rsc-config.ts

@@ -0,0 +1,56 @@
+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,
+  opts: {
+    shouldRegenerate: boolean;
+  }
+) {
+  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;
+
+    if (opts.shouldRegenerate) {
+      await writeFileContent(
+        context,
+        clientModuleFilePath,
+        rscMetadata.pageWrappers.client.module,
+        {
+          force: false,
+        }
+      );
+    }
+  }
+}