@plasmicapp/cli 0.1.231 → 0.1.233

package/dist/__tests__/file-utils.spec.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/__tests__/file-utils.spec.js

@@ -0,0 +1,57 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const file_utils_1 = require("../utils/file-utils");
+describe("defaultPagePath", () => {
+    it("does nothing for react", () => {
+        expect(file_utils_1.defaultPagePath({ config: { platform: "react" } }, "/index.tsx")).toBe("/index.tsx");
+        expect(file_utils_1.defaultPagePath({ config: { platform: "react" } }, "/nested/index.tsx")).toBe("/nested/index.tsx");
+    });
+    it("handles gatsby pagesDir", () => {
+        expect(file_utils_1.defaultPagePath({
+            config: {
+                platform: "gatsby",
+                gatsbyConfig: { pagesDir: "../pages" },
+            },
+        }, "/index.tsx")).toBe("../pages/index.tsx");
+        expect(file_utils_1.defaultPagePath({
+            config: {
+                platform: "gatsby",
+                gatsbyConfig: { pagesDir: "../pages" },
+            },
+        }, "/nested/index.tsx")).toBe("../pages/nested/index.tsx");
+    });
+    it("handles nextjs pagesDir", () => {
+        expect(file_utils_1.defaultPagePath({
+            config: {
+                platform: "nextjs",
+                nextjsConfig: { pagesDir: "../pages" },
+            },
+        }, "/index.jsx")).toBe("../pages/index.jsx");
+        expect(file_utils_1.defaultPagePath({
+            config: {
+                platform: "nextjs",
+                nextjsConfig: { pagesDir: "../pages" },
+            },
+        }, "/index.tsx")).toBe("../pages/index.tsx");
+        expect(file_utils_1.defaultPagePath({
+            config: {
+                platform: "nextjs",
+                nextjsConfig: { pagesDir: "../pages" },
+            },
+        }, "/nested/index.tsx")).toBe("../pages/nested/index.tsx");
+    });
+    it("handles nextjs pagesDir using app/ directory ", () => {
+        expect(file_utils_1.defaultPagePath({
+            config: { platform: "nextjs", nextjsConfig: { pagesDir: "../app" } },
+        }, "/index.jsx")).toBe("../app/page.jsx");
+        expect(file_utils_1.defaultPagePath({
+            config: { platform: "nextjs", nextjsConfig: { pagesDir: "../app" } },
+        }, "/index.tsx")).toBe("../app/page.tsx");
+        expect(file_utils_1.defaultPagePath({
+            config: { platform: "nextjs", nextjsConfig: { pagesDir: "../app" } },
+        }, "/nested/index.tsx")).toBe("../app/nested/page.tsx");
+        expect(file_utils_1.defaultPagePath({
+            config: { platform: "nextjs", nextjsConfig: { pagesDir: "../app" } },
+        }, "/not-index.tsx")).toBe("../app/not-index/page.tsx");
+    });
+});

package/dist/actions/init.js

@@ -81,14 +81,22 @@ function deriveInitAnswers(opts) {
                 ? "nextjs"
                 : envdetect_1.detectGatsby()
                     ? "gatsby"
-                    : "react";
-        const isCra = envdetect_1.detectCreateReactApp();
+                    : envdetect_1.detectCreateReactApp()
+                        ? "react"
+                        : "";
+        const isCra = platform === "react";
         const isNext = platform === "nextjs";
+        const isNextAppDir = isNext && envdetect_1.detectNextJsAppDir();
         const isGatsby = platform === "gatsby";
         const isGeneric = !isCra && !isNext && !isGatsby;
         const isTypescript = envdetect_1.detectTypescript();
         if (isNext) {
-            deps_1.logger.info("Detected Next.js...");
+            if (isNextAppDir) {
+                deps_1.logger.info("Detected Next.js with app/ directory (experimental)...");
+            }
+            else {
+                deps_1.logger.info("Detected Next.js...");
+            }
         }
         else if (isGatsby) {
             deps_1.logger.info("Detected Gatsby...");
@@ -98,7 +106,7 @@ function deriveInitAnswers(opts) {
         }
         // Platform-specific defaults that take precedent
         const deriver = isNext
-            ? getNextDefaults(plasmicRootDir)
+            ? getNextDefaults(plasmicRootDir, isNextAppDir)
             : isGatsby
                 ? getGatsbyDefaults(plasmicRootDir)
                 : isCra
@@ -276,12 +284,12 @@ function deriveInitAnswers(opts) {
         return answers;
     });
 }
-function getNextDefaults(plasmicRootDir) {
+function getNextDefaults(plasmicRootDir, appDir) {
     var _a;
     const projectRootDir = (_a = npm_utils_1.findPackageJsonDir(plasmicRootDir)) !== null && _a !== void 0 ? _a : plasmicRootDir;
     return {
         srcDir: upath_1.default.relative(plasmicRootDir, upath_1.default.join(projectRootDir, "components")),
-        pagesDir: (srcDir) => upath_1.default.relative(upath_1.default.join(plasmicRootDir, srcDir), upath_1.default.join(projectRootDir, "pages")),
+        pagesDir: (srcDir) => upath_1.default.relative(upath_1.default.join(plasmicRootDir, srcDir), upath_1.default.join(projectRootDir, appDir ? "app" : "pages")),
         styleScheme: "css-modules",
         imagesScheme: "public-files",
         imagesPublicDir: (srcDir) => upath_1.default.relative(upath_1.default.join(plasmicRootDir, srcDir), upath_1.default.join(projectRootDir, "public")),

package/dist/actions/sync.js

@@ -330,7 +330,7 @@ function fixFileExtension(context) {
     });
 }
 function syncProject(context, opts, projectIdsAndTokens, projectId, branchName, componentIds, projectVersion, dependencies, summary, indirect, externalNpmPackages, externalCssImports, metadataDefaults) {
-    var _a;
+    var _a, _b, _c;
     return __awaiter(this, void 0, void 0, function* () {
         const existingProject = context.config.projects.find((p) => p.projectId === projectId);
         const existingCompScheme = ((existingProject === null || existingProject === void 0 ? void 0 : existingProject.components) || []).map((c) => [c.id, c.scheme]);
@@ -339,6 +339,14 @@ function syncProject(context, opts, projectIdsAndTokens, projectId, branchName,
         // Server-side code-gen
         const projectBundle = yield context.api.projectComponents(projectId, branchName, {
             platform: context.config.platform,
+            platformOptions: context.config.platform === "nextjs"
+                ? {
+                    nextjs: {
+                        appDir: ((_c = (_b = context.config.nextjsConfig) === null || _b === void 0 ? void 0 : _b.pagesDir) === null || _c === void 0 ? void 0 : _c.endsWith("app")) ||
+                            false,
+                    },
+                }
+                : {},
             componentIdOrNames: componentIds,
             version: projectVersion,
             imageOpts: context.config.images,

package/dist/api.d.ts

@@ -178,6 +178,11 @@ export declare class PlasmicApi {
      */
     projectComponents(projectId: string, branchName: string, opts: {
         platform: string;
+        platformOptions: {
+            nextjs?: {
+                appDir: boolean;
+            };
+        };
         componentIdOrNames: readonly string[] | undefined;
         version: string;
         imageOpts: ImagesConfig;

package/dist/utils/envdetect.d.ts

@@ -1,4 +1,5 @@
 export declare function detectTypescript(): string | null;
 export declare function detectNextJs(): boolean;
+export declare function detectNextJsAppDir(): any;
 export declare function detectGatsby(): string | null;
 export declare function detectCreateReactApp(): boolean;

package/dist/utils/envdetect.js

@@ -3,7 +3,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.detectCreateReactApp = exports.detectGatsby = exports.detectNextJs = exports.detectTypescript = void 0;
+exports.detectCreateReactApp = exports.detectGatsby = exports.detectNextJsAppDir = exports.detectNextJs = exports.detectTypescript = void 0;
 const findup_sync_1 = __importDefault(require("findup-sync"));
 const npm_utils_1 = require("./npm-utils");
 function detectTypescript() {
@@ -26,6 +26,15 @@ function detectNextJs() {
     }
 }
 exports.detectNextJs = detectNextJs;
+function detectNextJsAppDir() {
+    var _a, _b;
+    const nextConfigPath = findup_sync_1.default("next.config.js");
+    if (!nextConfigPath) {
+        return false;
+    }
+    return ((_b = (_a = require(nextConfigPath)) === null || _a === void 0 ? void 0 : _a.experimental) === null || _b === void 0 ? void 0 : _b.appDir) || false;
+}
+exports.detectNextJsAppDir = detectNextJsAppDir;
 function detectGatsby() {
     return findup_sync_1.default("gatsby-config.js") || findup_sync_1.default("gatsby-config.ts");
 }

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

@@ -1,6 +1,6 @@
 /// <reference types="node" />
 import { ProjectMetaBundle } from "../api";
-import { PlasmicContext, ProjectConfig } from "./config-utils";
+import { PlasmicConfig, PlasmicContext, ProjectConfig } from "./config-utils";
 export declare function stripExtension(filename: string, removeComposedPath?: boolean): string;
 export declare function writeFileContentRaw(filePath: string, content: string | Buffer, opts?: {
     force?: boolean;
@@ -8,7 +8,9 @@ export declare function writeFileContentRaw(filePath: string, content: string |
 }): Promise<void>;
 export declare function defaultResourcePath(context: PlasmicContext, project: ProjectConfig | ProjectMetaBundle | string, ...subpaths: string[]): string;
 export declare function defaultPublicResourcePath(context: PlasmicContext, project: ProjectConfig, ...subpaths: string[]): string;
-export declare function defaultPagePath(context: PlasmicContext, fileName: string): string;
+export declare function defaultPagePath(context: {
+    config: Pick<PlasmicConfig, "platform" | "gatsbyConfig" | "nextjsConfig">;
+}, fileName: string): string;
 /**
  * Returns true iff paths `a` and `b` resolve to the same page URI. For
  * example:

package/dist/utils/file-utils.js

@@ -57,15 +57,32 @@ function defaultPublicResourcePath(context, project, ...subpaths) {
     return upath_1.default.join(context.config.images.publicDir, "plasmic", lodash_1.default.snakeCase(project.projectName), ...subpaths);
 }
 exports.defaultPublicResourcePath = defaultPublicResourcePath;
+const INDEX_EXT_REGEXP = /\/index\.(jsx|tsx)$/;
+const EXT_REGEXP = /\.(jsx|tsx)$/;
 function defaultPagePath(context, fileName) {
-    var _a, _b;
+    var _a, _b, _c, _d;
     if (context.config.platform === "nextjs") {
-        return upath_1.default.join(((_a = context.config.nextjsConfig) === null || _a === void 0 ? void 0 : _a.pagesDir) || "", fileName);
+        if ((_b = (_a = context.config.nextjsConfig) === null || _a === void 0 ? void 0 : _a.pagesDir) === null || _b === void 0 ? void 0 : _b.endsWith("app")) {
+            const matchesIndex = fileName.match(INDEX_EXT_REGEXP);
+            if (matchesIndex) {
+                // convert "/foo/index.tsx" to "/foo/page.tsx"
+                return upath_1.default.join(context.config.nextjsConfig.pagesDir, fileName.replace(INDEX_EXT_REGEXP, "/page.$1"));
+            }
+            else {
+                // convert "/foo/bar.tsx" to "/foo/bar/page.tsx"
+                return upath_1.default.join(context.config.nextjsConfig.pagesDir, fileName.replace(EXT_REGEXP, "/page.$1"));
+            }
+        }
+        else {
+            return upath_1.default.join(((_c = context.config.nextjsConfig) === null || _c === void 0 ? void 0 : _c.pagesDir) || "", fileName);
+        }
+    }
+    else if (context.config.platform === "gatsby") {
+        return upath_1.default.join(((_d = context.config.gatsbyConfig) === null || _d === void 0 ? void 0 : _d.pagesDir) || "", fileName);
     }
-    if (context.config.platform === "gatsby") {
-        return upath_1.default.join(((_b = context.config.gatsbyConfig) === null || _b === void 0 ? void 0 : _b.pagesDir) || "", fileName);
+    else {
+        return fileName;
     }
-    return fileName;
 }
 exports.defaultPagePath = defaultPagePath;
 /**

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@plasmicapp/cli",
-  "version": "0.1.231",
+  "version": "0.1.233",
   "description": "plasmic cli for syncing local code with Plasmic designs",
   "engines": {
     "node": ">=12"
@@ -20,7 +20,7 @@
   },
   "devDependencies": {
     "@babel/preset-typescript": "^7.12.1",
-    "@plasmicapp/react-web": "0.2.174",
+    "@plasmicapp/react-web": "0.2.175",
     "@types/findup-sync": "^2.0.2",
     "@types/glob": "^7.1.3",
     "@types/inquirer": "^6.5.0",
@@ -77,5 +77,5 @@
     "wrap-ansi": "^7.0.0",
     "yargs": "^15.4.1"
   },
-  "gitHead": "b9fab3909c26303a416efc88ed6b869220d3e287"
+  "gitHead": "411aa3e27a221f2a3a88578bc108905e424b4a8c"
 }

package/src/__tests__/file-utils.spec.ts

@@ -0,0 +1,105 @@
+import { defaultPagePath } from "../utils/file-utils";
+
+describe("defaultPagePath", () => {
+  it("does nothing for react", () => {
+    expect(
+      defaultPagePath({ config: { platform: "react" } }, "/index.tsx")
+    ).toBe("/index.tsx");
+    expect(
+      defaultPagePath({ config: { platform: "react" } }, "/nested/index.tsx")
+    ).toBe("/nested/index.tsx");
+  });
+  it("handles gatsby pagesDir", () => {
+    expect(
+      defaultPagePath(
+        {
+          config: {
+            platform: "gatsby",
+            gatsbyConfig: { pagesDir: "../pages" },
+          },
+        },
+        "/index.tsx"
+      )
+    ).toBe("../pages/index.tsx");
+    expect(
+      defaultPagePath(
+        {
+          config: {
+            platform: "gatsby",
+            gatsbyConfig: { pagesDir: "../pages" },
+          },
+        },
+        "/nested/index.tsx"
+      )
+    ).toBe("../pages/nested/index.tsx");
+  });
+  it("handles nextjs pagesDir", () => {
+    expect(
+      defaultPagePath(
+        {
+          config: {
+            platform: "nextjs",
+            nextjsConfig: { pagesDir: "../pages" },
+          },
+        },
+        "/index.jsx"
+      )
+    ).toBe("../pages/index.jsx");
+    expect(
+      defaultPagePath(
+        {
+          config: {
+            platform: "nextjs",
+            nextjsConfig: { pagesDir: "../pages" },
+          },
+        },
+        "/index.tsx"
+      )
+    ).toBe("../pages/index.tsx");
+    expect(
+      defaultPagePath(
+        {
+          config: {
+            platform: "nextjs",
+            nextjsConfig: { pagesDir: "../pages" },
+          },
+        },
+        "/nested/index.tsx"
+      )
+    ).toBe("../pages/nested/index.tsx");
+  });
+  it("handles nextjs pagesDir using app/ directory ", () => {
+    expect(
+      defaultPagePath(
+        {
+          config: { platform: "nextjs", nextjsConfig: { pagesDir: "../app" } },
+        },
+        "/index.jsx"
+      )
+    ).toBe("../app/page.jsx");
+    expect(
+      defaultPagePath(
+        {
+          config: { platform: "nextjs", nextjsConfig: { pagesDir: "../app" } },
+        },
+        "/index.tsx"
+      )
+    ).toBe("../app/page.tsx");
+    expect(
+      defaultPagePath(
+        {
+          config: { platform: "nextjs", nextjsConfig: { pagesDir: "../app" } },
+        },
+        "/nested/index.tsx"
+      )
+    ).toBe("../app/nested/page.tsx");
+    expect(
+      defaultPagePath(
+        {
+          config: { platform: "nextjs", nextjsConfig: { pagesDir: "../app" } },
+        },
+        "/not-index.tsx"
+      )
+    ).toBe("../app/not-index/page.tsx");
+  });
+});

package/src/actions/init.ts

@@ -19,6 +19,7 @@ import {
   detectCreateReactApp,
   detectGatsby,
   detectNextJs,
+  detectNextJsAppDir,
   detectTypescript,
 } from "../utils/envdetect";
 import { existsBuffered } from "../utils/file-utils";
@@ -163,15 +164,22 @@ async function deriveInitAnswers(
     ? "nextjs"
     : detectGatsby()
     ? "gatsby"
-    : "react";
-  const isCra = detectCreateReactApp();
+    : detectCreateReactApp()
+    ? "react"
+    : "";
+  const isCra = platform === "react";
   const isNext = platform === "nextjs";
+  const isNextAppDir = isNext && detectNextJsAppDir();
   const isGatsby = platform === "gatsby";
   const isGeneric = !isCra && !isNext && !isGatsby;
   const isTypescript = detectTypescript();
 
   if (isNext) {
-    logger.info("Detected Next.js...");
+    if (isNextAppDir) {
+      logger.info("Detected Next.js with app/ directory (experimental)...");
+    } else {
+      logger.info("Detected Next.js...");
+    }
   } else if (isGatsby) {
     logger.info("Detected Gatsby...");
   } else if (isCra) {
@@ -180,7 +188,7 @@ async function deriveInitAnswers(
 
   // Platform-specific defaults that take precedent
   const deriver = isNext
-    ? getNextDefaults(plasmicRootDir)
+    ? getNextDefaults(plasmicRootDir, isNextAppDir)
     : isGatsby
     ? getGatsbyDefaults(plasmicRootDir)
     : isCra
@@ -407,7 +415,10 @@ async function deriveInitAnswers(
   return answers as InitArgs;
 }
 
-function getNextDefaults(plasmicRootDir: string): DefaultDeriver {
+function getNextDefaults(
+  plasmicRootDir: string,
+  appDir: boolean
+): DefaultDeriver {
   const projectRootDir = findPackageJsonDir(plasmicRootDir) ?? plasmicRootDir;
   return {
     srcDir: path.relative(
@@ -417,7 +428,7 @@ function getNextDefaults(plasmicRootDir: string): DefaultDeriver {
     pagesDir: (srcDir: string) =>
       path.relative(
         path.join(plasmicRootDir, srcDir),
-        path.join(projectRootDir, "pages")
+        path.join(projectRootDir, appDir ? "app" : "pages")
       ),
     styleScheme: "css-modules",
     imagesScheme: "public-files",

package/src/actions/sync.ts

@@ -555,6 +555,16 @@ async function syncProject(
     branchName,
     {
       platform: context.config.platform,
+      platformOptions:
+        context.config.platform === "nextjs"
+          ? {
+              nextjs: {
+                appDir:
+                  context.config.nextjsConfig?.pagesDir?.endsWith("app") ||
+                  false,
+              },
+            }
+          : {},
       componentIdOrNames: componentIds,
       version: projectVersion,
       imageOpts: context.config.images,

package/src/api.ts

@@ -261,6 +261,11 @@ export class PlasmicApi {
     branchName: string,
     opts: {
       platform: string;
+      platformOptions: {
+        nextjs?: {
+          appDir: boolean;
+        };
+      };
       componentIdOrNames: readonly string[] | undefined;
       version: string;
       imageOpts: ImagesConfig;

package/src/utils/envdetect.ts

@@ -25,6 +25,15 @@ export function detectNextJs() {
   }
 }
 
+export function detectNextJsAppDir() {
+  const nextConfigPath = findupSync("next.config.js");
+  if (!nextConfigPath) {
+    return false;
+  }
+
+  return require(nextConfigPath)?.experimental?.appDir || false;
+}
+
 export function detectGatsby() {
   return findupSync("gatsby-config.js") || findupSync("gatsby-config.ts");
 }

package/src/utils/file-utils.ts

@@ -9,6 +9,7 @@ import { isLocalModulePath } from "./code-utils";
 import {
   ComponentConfig,
   CONFIG_FILE_NAME,
+  PlasmicConfig,
   PlasmicContext,
   ProjectConfig,
 } from "./config-utils";
@@ -77,14 +78,39 @@ export function defaultPublicResourcePath(
   );
 }
 
-export function defaultPagePath(context: PlasmicContext, fileName: string) {
+const INDEX_EXT_REGEXP = /\/index\.(jsx|tsx)$/;
+const EXT_REGEXP = /\.(jsx|tsx)$/;
+
+export function defaultPagePath(
+  context: {
+    config: Pick<PlasmicConfig, "platform" | "gatsbyConfig" | "nextjsConfig">;
+  },
+  fileName: string
+) {
   if (context.config.platform === "nextjs") {
-    return path.join(context.config.nextjsConfig?.pagesDir || "", fileName);
-  }
-  if (context.config.platform === "gatsby") {
+    if (context.config.nextjsConfig?.pagesDir?.endsWith("app")) {
+      const matchesIndex = fileName.match(INDEX_EXT_REGEXP);
+      if (matchesIndex) {
+        // convert "/foo/index.tsx" to "/foo/page.tsx"
+        return path.join(
+          context.config.nextjsConfig.pagesDir,
+          fileName.replace(INDEX_EXT_REGEXP, "/page.$1")
+        );
+      } else {
+        // convert "/foo/bar.tsx" to "/foo/bar/page.tsx"
+        return path.join(
+          context.config.nextjsConfig.pagesDir,
+          fileName.replace(EXT_REGEXP, "/page.$1")
+        );
+      }
+    } else {
+      return path.join(context.config.nextjsConfig?.pagesDir || "", fileName);
+    }
+  } else if (context.config.platform === "gatsby") {
     return path.join(context.config.gatsbyConfig?.pagesDir || "", fileName);
+  } else {
+    return fileName;
   }
-  return fileName;
 }
 
 /**