@plasmicapp/cli 0.1.352 → 0.1.354

package/src/utils/code-utils.ts

@@ -44,7 +44,6 @@ import { assert, flatMap } from "./lang-utils";
 export async function formatAsLocal(
   content: string,
   filePath: string,
-  baseDir: string,
   defaultOpts?: Options
 ): Promise<string> {
   if (GLOBAL_SETTINGS.skipFormatting) {
@@ -56,7 +55,7 @@ export async function formatAsLocal(
   // createPlasmicElementProxy.  So we're going to stop for now until we find
   // a better solution, like maybe letting user specify a prettier config
   // file in plasmic.json
-  // const opts = resolveConfig.sync(baseDir) || defaultOpts;
+  // const opts = resolveConfig.sync() || defaultOpts;
   const opts: Options = {
     trailingComma: "none",
     ...defaultOpts,
@@ -73,7 +72,6 @@ export async function formatAsLocal(
 
 async function nodeToFormattedCode(
   n: Node,
-  baseDir: string,
   unformatted?: boolean,
   commentsToRemove?: Set<string>
 ): Promise<string> {
@@ -84,7 +82,7 @@ async function nodeToFormattedCode(
   }).code;
   return unformatted
     ? c
-    : await formatAsLocal(c, "/tmp/x.tsx", baseDir, {
+    : await formatAsLocal(c, "/tmp/x.tsx", {
         arrowParens: "avoid",
       });
 }
@@ -174,7 +172,6 @@ type PlasmicImportType =
   | "defaultcss"
   | "icon"
   | "picture"
-  | "jsBundle"
   | "codeComponent"
   | "codeComponentHelper"
   | "globalContext"
@@ -214,7 +211,7 @@ function tryParsePlasmicImportSpec(node: ImportDeclaration) {
         "plasmic-import:\\s+([",
         ...validJsIdentifierChars,
         "\\.",
-        "]+)(?:\\/(component|css|render|globalVariant|projectcss|defaultcss|icon|picture|jsBundle|codeComponent|globalContext|customFunction|splitsProvider|styleTokensProvider|dataTokens|projectModule|rscClient|rscServer))?",
+        "]+)(?:\\/(component|css|render|globalVariant|projectcss|defaultcss|icon|picture|codeComponent|globalContext|customFunction|splitsProvider|styleTokensProvider|dataTokens|projectModule|rscClient|rscServer))?",
       ].join("")
     )
   );
@@ -243,7 +240,6 @@ export async function replaceImports(
   fromPath: string,
   fixImportContext: FixImportContext,
   removeImportDirective: boolean,
-  baseDir: string,
   changed = false
 ): Promise<string> {
   [code, changed] = filterUnformattedMarker(code, changed);
@@ -509,7 +505,7 @@ export async function replaceImports(
     return code;
   }
 
-  return nodeToFormattedCode(file, baseDir, !changed, commentsToRemove);
+  return nodeToFormattedCode(file, !changed, commentsToRemove);
 }
 
 function throwMissingReference(
@@ -631,7 +627,6 @@ export const mkFixImportContext = (config: PlasmicConfig): FixImportContext => {
  */
 export async function fixAllImportStatements(
   context: PlasmicContext,
-  baseDir: string,
   summary?: Map<string, ComponentUpdateSummary>
 ) {
   logger.info("Fixing import statements...");
@@ -641,12 +636,7 @@ export async function fixAllImportStatements(
   for (const project of config.projects) {
     for (const compConfig of project.components) {
       try {
-        await fixRscModulesImports(
-          context,
-          baseDir,
-          fixImportContext,
-          compConfig
-        );
+        await fixRscModulesImports(context, fixImportContext, compConfig);
       } catch (err) {
         lastError = err;
       }
@@ -664,8 +654,7 @@ export async function fixAllImportStatements(
             context,
             compConfig,
             fixImportContext,
-            fixSkeletonModule,
-            baseDir
+            fixSkeletonModule
           );
         } catch (err) {
           logger.error(
@@ -678,7 +667,7 @@ export async function fixAllImportStatements(
   }
 
   try {
-    await fixGlobalContextImportStatements(context, fixImportContext, baseDir);
+    await fixGlobalContextImportStatements(context, fixImportContext);
   } catch (err) {
     logger.error(
       `Error encountered while fixing imports for global contexts: ${err}`
@@ -690,7 +679,6 @@ export async function fixAllImportStatements(
     await fixImportStatements(
       context,
       fixImportContext,
-      baseDir,
       "splitsProviderFilePath",
       getSplitsProviderResourcePath
     );
@@ -705,7 +693,6 @@ export async function fixAllImportStatements(
     await fixImportStatements(
       context,
       fixImportContext,
-      baseDir,
       "projectModuleFilePath",
       getProjectModuleResourcePath
     );
@@ -720,7 +707,6 @@ export async function fixAllImportStatements(
     await fixImportStatements(
       context,
       fixImportContext,
-      baseDir,
       "styleTokensProviderFilePath",
       getStyleTokensProviderResourcePath
     );
@@ -735,7 +721,6 @@ export async function fixAllImportStatements(
     await fixImportStatements(
       context,
       fixImportContext,
-      baseDir,
       "dataTokensFilePath",
       getDataTokensResourcePath
     );
@@ -755,8 +740,7 @@ async function fixComponentImportStatements(
   context: PlasmicContext,
   compConfig: ComponentConfig,
   fixImportContext: FixImportContext,
-  fixSkeletonModule: boolean,
-  baseDir: string
+  fixSkeletonModule: boolean
 ) {
   // If ComponentConfig.importPath is still a local file, we best-effort also fix up the import statements there.
   if (
@@ -768,8 +752,7 @@ async function fixComponentImportStatements(
       context,
       compConfig.importSpec.modulePath,
       fixImportContext,
-      true,
-      baseDir
+      true
     );
   }
 
@@ -796,7 +779,6 @@ async function fixComponentImportStatements(
     compConfig.renderModuleFilePath,
     fixImportContext,
     false,
-    baseDir,
     renderModuleChanged
   );
 }
@@ -806,7 +788,6 @@ async function fixFileImportStatements(
   srcDirFilePath: string,
   fixImportContext: FixImportContext,
   removeImportDirective: boolean,
-  baseDir: string,
   fileHasChanged = false
 ) {
   const filePath = makeFilePath(context, srcDirFilePath);
@@ -825,7 +806,6 @@ async function fixFileImportStatements(
     srcDirFilePath,
     fixImportContext,
     removeImportDirective,
-    baseDir,
     fileHasChanged
   );
   if (prevContent !== newContent) {
@@ -887,21 +867,17 @@ export const tsxToJsx = (code: string) => {
 
 export async function maybeConvertTsxToJsx(
   fileName: string,
-  content: string,
-  baseDir: string
+  content: string
 ): Promise<[string, string]> {
   if (fileName.endsWith("tsx")) {
     const jsFileName = stripExtension(fileName) + ".jsx";
-    const jsContent = await formatScript(tsxToJsx(content), baseDir);
+    const jsContent = await formatScript(tsxToJsx(content));
     return [jsFileName, jsContent];
   }
   return [fileName, content];
 }
 
-export async function formatScript(
-  code: string,
-  baseDir: string
-): Promise<string> {
+export async function formatScript(code: string): Promise<string> {
   const file = parser.parse(code, {
     strictMode: true,
     sourceType: "module",
@@ -923,12 +899,12 @@ export async function formatScript(
     },
   });
 
-  const withmarkers = await nodeToFormattedCode(file, baseDir, true);
+  const withmarkers = await nodeToFormattedCode(file, true);
   const withNewLines = withmarkers.replace(
     new RegExp(`"${newLineMarker}"`, "g"),
     "\n"
   );
-  return await formatAsLocal(withNewLines, "/tmp/x.tsx", baseDir, {
+  return await formatAsLocal(withNewLines, "/tmp/x.tsx", {
     printWidth: 80,
     tabWidth: 2,
     useTabs: false,
@@ -937,8 +913,7 @@ export async function formatScript(
 
 async function fixGlobalContextImportStatements(
   context: PlasmicContext,
-  fixImportContext: FixImportContext,
-  baseDir: string
+  fixImportContext: FixImportContext
 ) {
   for (const project of context.config.projects) {
     if (!project.globalContextsFilePath) {
@@ -964,7 +939,6 @@ async function fixGlobalContextImportStatements(
       resourcePath,
       fixImportContext,
       false,
-      baseDir,
       true
     );
 
@@ -979,7 +953,6 @@ async function fixGlobalContextImportStatements(
 async function fixImportStatements(
   context: PlasmicContext,
   fixImportContext: FixImportContext,
-  baseDir: string,
   configKey: keyof ProjectConfig,
   getResourcePath: (ctx: PlasmicContext, project: ProjectConfig) => string
 ) {
@@ -1008,7 +981,6 @@ async function fixImportStatements(
       resourcePath,
       fixImportContext,
       false,
-      baseDir,
       true
     );
 
@@ -1022,7 +994,6 @@ async function fixImportStatements(
 
 export async function fixRscModulesImports(
   context: PlasmicContext,
-  baseDir: string,
   fixImportContext: FixImportContext,
   compConfig: ComponentConfig
 ) {
@@ -1041,8 +1012,7 @@ export async function fixRscModulesImports(
         context,
         modulePath,
         fixImportContext,
-        false,
-        baseDir
+        false
       );
     } catch (err) {
       logger.error(

package/src/utils/config-utils.ts

@@ -148,11 +148,6 @@ export interface ImagesConfig {
   publicUrlPrefix?: string;
 }
 
-export interface JsBundleThemeConfig {
-  themeFilePath: string;
-  bundleName: string;
-}
-
 export interface CodeComponentConfig {
   id: string;
   name: string;
@@ -203,7 +198,6 @@ export interface ProjectConfig {
 
   // Code-component-related fields can be treated as optional not to be shown
   // to the users nor appear to be missing in the documentation.
-  jsBundleThemes?: JsBundleThemeConfig[];
   codeComponents?: CodeComponentConfig[];
   customFunctions?: CustomFunctionConfig[];
 
@@ -555,11 +549,7 @@ export function readConfig(
   }
 }
 
-export async function writeConfig(
-  configFile: string,
-  config: PlasmicConfig,
-  baseDir: string
-) {
+export async function writeConfig(configFile: string, config: PlasmicConfig) {
   await writeFileContentRaw(
     configFile,
     await formatAsLocal(
@@ -571,8 +561,7 @@ export async function writeConfig(
         undefined,
         2
       ),
-      configFile,
-      baseDir
+      configFile
     ),
     {
       force: true,
@@ -580,18 +569,10 @@ export async function writeConfig(
   );
 }
 
-export async function writeLock(
-  lockFile: string,
-  lock: PlasmicLock,
-  baseDir: string
-) {
+export async function writeLock(lockFile: string, lock: PlasmicLock) {
   await writeFileContentRaw(
     lockFile,
-    await formatAsLocal(
-      JSON.stringify(lock, undefined, 2),
-      "/tmp/x.json",
-      baseDir
-    ),
+    await formatAsLocal(JSON.stringify(lock, undefined, 2), "/tmp/x.json"),
     {
       force: true,
     }
@@ -600,15 +581,14 @@ export async function writeLock(
 
 export async function updateConfig(
   context: PlasmicContext,
-  newConfig: PlasmicConfig,
-  baseDir: string
+  newConfig: PlasmicConfig
 ) {
   // plasmic.json
-  await writeConfig(context.configFile, newConfig, baseDir);
+  await writeConfig(context.configFile, newConfig);
   context.config = newConfig;
 
   // plasmic.lock
-  await writeLock(context.lockFile, context.lock, baseDir);
+  await writeLock(context.lockFile, context.lock);
 }
 
 export function getOrAddProjectConfig(

package/src/utils/envdetect.ts

@@ -1,4 +1,5 @@
 import findupSync from "findup-sync";
+import semver from "semver";
 import { getParsedPackageJson } from "./npm-utils";
 
 export function detectTypescript() {
@@ -7,9 +8,13 @@ export function detectTypescript() {
 
 export function detectNextJs() {
   if (
-    findupSync("next.config.js") ||
-    findupSync(".next") ||
-    findupSync("next-env.d.ts")
+    findupSync([
+      "next.config.js",
+      "next.config.ts",
+      "next.config.mjs",
+      ".next/",
+      "next-env.d.ts",
+    ])
   ) {
     return true;
   }
@@ -26,12 +31,44 @@ export function detectNextJs() {
 }
 
 export function detectNextJsAppDir() {
+  if (!detectNextJs()) {
+    return false;
+  }
+
   const nextConfigPath = findupSync("next.config.js");
-  if (!nextConfigPath) {
+  // Legacy Next.js (<13.4): explicit opt-in
+  if (nextConfigPath && require(nextConfigPath)?.experimental?.appDir) {
+    return true;
+  }
+
+  if (!findupSync("app")) {
+    return false;
+  }
+
+  if (!findupSync("pages")) {
+    return true;
+  }
+
+  // Both app/ and pages/ exist - need to check Next.js version
+  try {
+    const packageJson = getParsedPackageJson();
+    const nextVersion: string | undefined = packageJson.dependencies?.next;
+    if (nextVersion) {
+      if (nextVersion === "latest") {
+        return true;
+      }
+      const coercedVersion = semver.coerce(nextVersion);
+      // For Next.js >= 13.4, app dir is the default
+      if (coercedVersion && semver.gte(coercedVersion, "13.4.0")) {
+        return true;
+      }
+    }
+  } catch {
+    // Can't read package.json - can't determine if App Router is enabled
     return false;
   }
 
-  return require(nextConfigPath)?.experimental?.appDir || false;
+  return false;
 }
 
 export function detectGatsby() {

package/src/utils/rsc-config.ts

@@ -1,4 +1,5 @@
 import { ComponentBundle } from "../api";
+import { maybeConvertTsxToJsx } from "./code-utils";
 import { ComponentConfig, PlasmicContext, ProjectConfig } from "./config-utils";
 import { defaultResourcePath, writeFileContent } from "./file-utils";
 
@@ -20,33 +21,49 @@ export async function syncRscFiles(
       };
     }
 
-    const serverModuleFilePath = defaultResourcePath(
+    let serverModuleFilePath = defaultResourcePath(
       context,
       project,
       rscMetadata.pageWrappers.server.fileName
     );
+    let serverModuleContent = rscMetadata.pageWrappers.server.module;
+
+    if (context.config.code.lang === "js") {
+      const [convertedFileName, convertedContent] = await maybeConvertTsxToJsx(
+        serverModuleFilePath,
+        serverModuleContent
+      );
+      serverModuleFilePath = convertedFileName;
+      serverModuleContent = convertedContent;
+    }
     compConfig.rsc.serverModulePath = serverModuleFilePath;
 
-    await writeFileContent(
-      context,
-      serverModuleFilePath,
-      rscMetadata.pageWrappers.server.module,
-      {
-        force: true,
-      }
-    );
+    await writeFileContent(context, serverModuleFilePath, serverModuleContent, {
+      force: true,
+    });
 
-    const clientModuleFilePath = compConfig.importSpec.modulePath.replace(
-      /\.tsx$/,
+    let clientModuleFilePath = compConfig.importSpec.modulePath.replace(
+      /\.(tsx|jsx)$/,
       "-client.tsx"
     );
+    let clientModuleContent = rscMetadata.pageWrappers.client.module;
+
+    if (context.config.code.lang === "js") {
+      const [convertedFileName, convertedContent] = await maybeConvertTsxToJsx(
+        clientModuleFilePath,
+        clientModuleContent
+      );
+      clientModuleFilePath = convertedFileName;
+      clientModuleContent = convertedContent;
+    }
+
     compConfig.rsc.clientModulePath = clientModuleFilePath;
 
     if (opts.shouldRegenerate) {
       await writeFileContent(
         context,
         clientModuleFilePath,
-        rscMetadata.pageWrappers.client.module,
+        clientModuleContent,
         {
           force: false,
         }

package/dist/actions/upload-bundle.d.ts

@@ -1,15 +0,0 @@
-import { CommonArgs } from "..";
-export interface UploadBundleArgs extends CommonArgs {
-    project: string;
-    bundleName: string;
-    bundleJsFile: string;
-    cssFiles: readonly string[];
-    metaJsonFile: string;
-    genModulePath?: string;
-    genCssPaths: string[];
-    pkgVersion?: string;
-    extraPropMetaJsonFile?: string;
-    themeProviderWrapper?: string;
-    themeModuleFile?: string;
-}
-export declare function uploadJsBundle(opts: UploadBundleArgs): Promise<void>;

package/src/actions/upload-bundle.ts

@@ -1,38 +0,0 @@
-import pako from "pako";
-import { CommonArgs } from "..";
-import { readFileText } from "../utils/file-utils";
-import { getContext } from "../utils/get-context";
-
-export interface UploadBundleArgs extends CommonArgs {
-  project: string;
-  bundleName: string;
-  bundleJsFile: string;
-  cssFiles: readonly string[];
-  metaJsonFile: string;
-  genModulePath?: string;
-  genCssPaths: string[];
-  pkgVersion?: string;
-  extraPropMetaJsonFile?: string;
-  themeProviderWrapper?: string;
-  themeModuleFile?: string;
-}
-
-export async function uploadJsBundle(opts: UploadBundleArgs) {
-  const context = await getContext(opts);
-  const api = context.api;
-  await api.uploadBundle(
-    opts.project,
-    opts.bundleName,
-    pako.deflate(readFileText(opts.bundleJsFile), { to: "string" }),
-    opts.cssFiles.map((f) => pako.deflate(readFileText(f), { to: "string" })),
-    pako.deflate(readFileText(opts.metaJsonFile), { to: "string" }),
-    opts.genModulePath,
-    opts.genCssPaths,
-    opts.pkgVersion,
-    opts.extraPropMetaJsonFile
-      ? readFileText(opts.extraPropMetaJsonFile)
-      : undefined,
-    opts.themeProviderWrapper,
-    opts.themeModuleFile ? readFileText(opts.themeModuleFile) : undefined
-  );
-}