create-plasmic-app 0.0.133 → 0.0.134

package/cpa-out/nextjs-app-codegen-ts/components/plasmic/create_plasmic_app/PlasmicStyleTokensProvider.tsx

@@ -0,0 +1,19 @@
+/* eslint-disable */
+/* tslint:disable */
+// @ts-nocheck
+
+// This code is auto-generated by Plasmic; please do not edit!
+// Plasmic Project: 47tFXWjN2C4NyHFGGpaYQ3
+
+import { createUseStyleTokens } from "@plasmicapp/react-web";
+
+import { _useGlobalVariants } from "./plasmic"; // plasmic-import: 47tFXWjN2C4NyHFGGpaYQ3/projectModule
+
+import projectcss from "./plasmic.module.css"; // plasmic-import: 47tFXWjN2C4NyHFGGpaYQ3/projectcss
+
+const data = {
+  base: `${projectcss.plasmic_tokens}`,
+  varianted: []
+};
+
+export const _useStyleTokens = createUseStyleTokens(data, _useGlobalVariants);

package/cpa-out/nextjs-app-codegen-ts/components/plasmic/create_plasmic_app/icons/PlasmicIcon__CheckSvg.tsx

@@ -0,0 +1,44 @@
+/* eslint-disable */
+/* tslint:disable */
+// @ts-nocheck
+/* prettier-ignore-start */
+import React from "react";
+import { classNames } from "@plasmicapp/react-web";
+
+export type CheckSvgIconProps = React.ComponentProps<"svg"> & {
+  title?: string;
+};
+
+export function CheckSvgIcon(props: CheckSvgIconProps) {
+  const { className, style, title, ...restProps } = props;
+  return (
+    <svg
+      xmlns={"http://www.w3.org/2000/svg"}
+      fill={"none"}
+      viewBox={"0 0 24 24"}
+      height={"1em"}
+      width={"1em"}
+      style={{
+        fill: "currentcolor",
+
+        ...(style || {})
+      }}
+      className={classNames("plasmic-default__svg", className)}
+      {...restProps}
+    >
+      {title && <title>{title}</title>}
+
+      <path
+        fillRule={"evenodd"}
+        clipRule={"evenodd"}
+        d={
+          "M18.416 5.876a.75.75 0 01.208 1.04L11.42 17.721a1.75 1.75 0 01-2.871.06l-3.156-4.34a.75.75 0 111.214-.882l3.155 4.339a.25.25 0 00.41-.009l7.204-10.805a.75.75 0 011.04-.208z"
+        }
+        fill={"currentColor"}
+      ></path>
+    </svg>
+  );
+}
+
+export default CheckSvgIcon;
+/* prettier-ignore-end */

package/cpa-out/nextjs-app-codegen-ts/components/plasmic/create_plasmic_app/icons/PlasmicIcon__Icon.tsx

@@ -0,0 +1,41 @@
+/* eslint-disable */
+/* tslint:disable */
+// @ts-nocheck
+/* prettier-ignore-start */
+import React from "react";
+import { classNames } from "@plasmicapp/react-web";
+
+export type IconIconProps = React.ComponentProps<"svg"> & {
+  title?: string;
+};
+
+export function IconIcon(props: IconIconProps) {
+  const { className, style, title, ...restProps } = props;
+  return (
+    <svg
+      xmlns={"http://www.w3.org/2000/svg"}
+      stroke={"currentColor"}
+      fill={"currentColor"}
+      strokeWidth={"0"}
+      viewBox={"0 0 16 16"}
+      height={"1em"}
+      width={"1em"}
+      className={classNames("plasmic-default__svg", className)}
+      style={style}
+      {...restProps}
+    >
+      {title && <title>{title}</title>}
+
+      <path
+        fillRule={"evenodd"}
+        d={
+          "M1 8a.5.5 0 01.5-.5h11.793l-3.147-3.146a.5.5 0 01.708-.708l4 4a.5.5 0 010 .708l-4 4a.5.5 0 01-.708-.708L13.293 8.5H1.5A.5.5 0 011 8z"
+        }
+        stroke={"none"}
+      ></path>
+    </svg>
+  );
+}
+
+export default IconIcon;
+/* prettier-ignore-end */

package/cpa-out/nextjs-app-codegen-ts/components/plasmic/create_plasmic_app/plasmic.tsx

@@ -0,0 +1,14 @@
+/* eslint-disable */
+/* tslint:disable */
+// @ts-nocheck
+
+// This code is auto-generated by Plasmic; please do not edit!
+// Plasmic Project: 47tFXWjN2C4NyHFGGpaYQ3
+
+import { createUseGlobalVariants } from "@plasmicapp/react-web";
+
+import { useScreenVariants as useScreenVariantsscBjPxgdxdzbv } from "./PlasmicGlobalVariant__Screen"; // plasmic-import: SCBjPXGDXDZBV/globalVariant
+
+export const _useGlobalVariants = createUseGlobalVariants({
+  screen: useScreenVariantsscBjPxgdxdzbv
+});

package/cpa-out/nextjs-app-codegen-ts/package.json

@@ -0,0 +1,26 @@
+{
+  "name": "nextjs-app-codegen-ts",
+  "version": "0.1.0",
+  "private": true,
+  "scripts": {
+    "dev": "next dev",
+    "build": "next build",
+    "start": "next start",
+    "lint": "next lint"
+  },
+  "dependencies": {
+    "@plasmicapp/cli": "^0.1.359",
+    "@plasmicapp/react-web": "^0.2.422",
+    "next": "14.2.35",
+    "react": "^18",
+    "react-dom": "^18"
+  },
+  "devDependencies": {
+    "@types/node": "^20",
+    "@types/react": "^18",
+    "@types/react-dom": "^18",
+    "eslint": "^8",
+    "eslint-config-next": "14.2.35",
+    "typescript": "^5"
+  }
+}

package/cpa-out/nextjs-app-codegen-ts/plasmic.json

@@ -0,0 +1,148 @@
+{
+  "platform": "nextjs",
+  "code": {
+    "lang": "ts",
+    "scheme": "blackbox",
+    "reactRuntime": "classic"
+  },
+  "style": {
+    "scheme": "css-modules",
+    "defaultStyleCssFilePath": "plasmic/plasmic__default_style.module.css"
+  },
+  "images": {
+    "scheme": "public-files",
+    "publicDir": "../public",
+    "publicUrlPrefix": "/"
+  },
+  "tokens": {
+    "scheme": "theo",
+    "tokensFilePath": "plasmic-tokens.theo.json"
+  },
+  "srcDir": "components",
+  "defaultPlasmicDir": "./plasmic",
+  "projects": [
+    {
+      "projectId": "47tFXWjN2C4NyHFGGpaYQ3",
+      "projectApiToken": "7BRFratDxPLMGZHnd2grV5QP6mlHcZ1AK3BJSIeh7xzUlHgWh25XpgXvUaKAqHXFMXQQuzpADqboibF6nqNWQ",
+      "projectName": "create-plasmic-app",
+      "version": "latest",
+      "cssFilePath": "plasmic/create_plasmic_app/plasmic.module.css",
+      "components": [
+        {
+          "id": "6uuAAE1jiCew",
+          "name": "Homepage",
+          "type": "managed",
+          "projectId": "47tFXWjN2C4NyHFGGpaYQ3",
+          "renderModuleFilePath": "plasmic/create_plasmic_app/PlasmicHomepage.tsx",
+          "importSpec": {
+            "modulePath": "../app/page.tsx"
+          },
+          "cssFilePath": "plasmic/create_plasmic_app/PlasmicHomepage.module.css",
+          "scheme": "blackbox",
+          "componentType": "page",
+          "path": "/",
+          "rsc": {
+            "serverModulePath": "plasmic/create_plasmic_app/PlasmicHomepageServer.tsx",
+            "clientModulePath": "../app/page-client.tsx"
+          }
+        },
+        {
+          "id": "AO44A-w7hh",
+          "name": "DynamicPage",
+          "type": "managed",
+          "projectId": "47tFXWjN2C4NyHFGGpaYQ3",
+          "renderModuleFilePath": "plasmic/create_plasmic_app/PlasmicDynamicPage.tsx",
+          "importSpec": {
+            "modulePath": "../app/dynamic/[slug]/page.tsx"
+          },
+          "cssFilePath": "plasmic/create_plasmic_app/PlasmicDynamicPage.module.css",
+          "scheme": "blackbox",
+          "componentType": "page",
+          "path": "/dynamic/[slug]",
+          "rsc": {
+            "serverModulePath": "plasmic/create_plasmic_app/PlasmicDynamicPageServer.tsx",
+            "clientModulePath": "../app/dynamic/[slug]/page-client.tsx"
+          }
+        },
+        {
+          "id": "TQcvW_pSKi3",
+          "name": "Button",
+          "type": "managed",
+          "projectId": "47tFXWjN2C4NyHFGGpaYQ3",
+          "renderModuleFilePath": "plasmic/create_plasmic_app/PlasmicButton.tsx",
+          "importSpec": {
+            "modulePath": "Button.tsx"
+          },
+          "cssFilePath": "plasmic/create_plasmic_app/PlasmicButton.module.css",
+          "scheme": "blackbox",
+          "componentType": "component",
+          "plumeType": "button"
+        },
+        {
+          "id": "Q23H1_1M_P",
+          "name": "RandomDynamicPageButton",
+          "type": "managed",
+          "projectId": "47tFXWjN2C4NyHFGGpaYQ3",
+          "renderModuleFilePath": "plasmic/create_plasmic_app/PlasmicRandomDynamicPageButton.tsx",
+          "importSpec": {
+            "modulePath": "RandomDynamicPageButton.tsx"
+          },
+          "cssFilePath": "plasmic/create_plasmic_app/PlasmicRandomDynamicPageButton.module.css",
+          "scheme": "blackbox",
+          "componentType": "component"
+        }
+      ],
+      "icons": [
+        {
+          "id": "gj-_D7n31Ho",
+          "name": "CheckSvgIcon",
+          "moduleFilePath": "plasmic/create_plasmic_app/icons/PlasmicIcon__CheckSvg.tsx"
+        },
+        {
+          "id": "6PNxx3YMyDQ",
+          "name": "IconIcon",
+          "moduleFilePath": "plasmic/create_plasmic_app/icons/PlasmicIcon__Icon.tsx"
+        }
+      ],
+      "images": [],
+      "indirect": false,
+      "globalContextsFilePath": "",
+      "splitsProviderFilePath": "",
+      "styleTokensProviderFilePath": "plasmic/create_plasmic_app/PlasmicStyleTokensProvider.tsx",
+      "dataTokensFilePath": "",
+      "projectModuleFilePath": "plasmic/create_plasmic_app/plasmic.tsx",
+      "codeComponents": [
+        {
+          "id": "P6aGdYWZ2R",
+          "name": "PlasmicHead",
+          "displayName": "hostless-plasmic-head",
+          "componentImportPath": "@plasmicapp/react-web"
+        },
+        {
+          "id": "8G2A-uTjGa",
+          "name": "Fetcher",
+          "displayName": "plasmic-data-source-fetcher",
+          "componentImportPath": "@plasmicapp/react-web/lib/data-sources"
+        }
+      ],
+      "customFunctions": []
+    }
+  ],
+  "globalVariants": {
+    "variantGroups": [
+      {
+        "id": "SCBjPXGDXDZBV",
+        "name": "Screen",
+        "projectId": "47tFXWjN2C4NyHFGGpaYQ3",
+        "contextFilePath": "plasmic/create_plasmic_app/PlasmicGlobalVariant__Screen.tsx"
+      }
+    ]
+  },
+  "wrapPagesWithGlobalContexts": true,
+  "preserveJsImportExtensions": false,
+  "nextjsConfig": {
+    "pagesDir": "../app"
+  },
+  "cliVersion": "0.1.359",
+  "$schema": "https://unpkg.com/@plasmicapp/cli@0.1.359/dist/plasmic.schema.json"
+}

package/cpa-out/nextjs-app-codegen-ts/tsconfig.json

@@ -0,0 +1,26 @@
+{
+  "compilerOptions": {
+    "lib": ["dom", "dom.iterable", "esnext"],
+    "allowJs": true,
+    "skipLibCheck": true,
+    "strict": true,
+    "noEmit": true,
+    "esModuleInterop": true,
+    "module": "esnext",
+    "moduleResolution": "bundler",
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "jsx": "preserve",
+    "incremental": true,
+    "plugins": [
+      {
+        "name": "next"
+      }
+    ],
+    "paths": {
+      "@/*": ["./*"]
+    }
+  },
+  "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", ".next/types/**/*.ts"],
+  "exclude": ["node_modules"]
+}

package/dist/index.js

@@ -96,10 +96,6 @@ const argv = yargs_1.default
         !(argv2.platform === "nextjs" || argv2.platform === "gatsby")) {
         throw new Error(`Loader scheme may only be used with Next.js or Gatsby`);
     }
-    if (argv2.appDir &&
-        !(argv2.platform === "nextjs" && argv2.scheme === "loader")) {
-        throw new Error(`App dir may only be used with Next.js and loader scheme`);
-    }
     return true;
 }).argv;
 // Initialize Sentry
@@ -222,31 +218,38 @@ function run() {
                 default: "loader",
             })
             : "codegen";
-        // TODO: Support nextjs + codegen
         const platformOptions = {};
-        // Don't show app dir question until we have better support for app dir.
-        const showAppDirQuestion = false;
-        if (showAppDirQuestion && platform === "nextjs" && scheme === "loader") {
-            platformOptions.nextjs = {
-                appDir: yield maybePrompt({
-                    name: "appDir",
-                    message: "Do you want to use the app/ directory and React Server Components? (see https://beta.nextjs.org/docs/app-directory-roadmap)",
-                    type: "list",
-                    choices: () => [
-                        {
-                            name: "No, use pages/ directory",
-                            short: "No",
-                            value: false,
-                        },
-                        {
-                            name: "Yes, use app/ directory (experimental)",
-                            short: "Yes",
-                            value: true,
-                        },
-                    ],
-                    default: false,
-                }),
-            };
+        if (platform === "nextjs") {
+            // TODO: re-enable when app dir is released
+            const showAppDirQuestion = false;
+            if (showAppDirQuestion) {
+                platformOptions.nextjs = {
+                    appDir: yield maybePrompt({
+                        name: "appDir",
+                        message: "Do you want to use the app/ directory and React Server Components? (see https://nextjs.org/docs/app)",
+                        type: "list",
+                        choices: () => [
+                            {
+                                name: "Yes, use app/ directory",
+                                short: "Yes",
+                                value: true,
+                            },
+                            {
+                                name: "No, use pages/ directory",
+                                short: "No",
+                                value: false,
+                            },
+                        ],
+                        default: true,
+                    }),
+                };
+                // Respect appDir flag for e2e tests
+            }
+            else if (argv["appDir"] !== undefined) {
+                platformOptions.nextjs = {
+                    appDir: argv["appDir"],
+                };
+            }
         }
         // Get the projectId
         console.log();

package/dist/nextjs/nextjs.js

@@ -21,6 +21,7 @@ const codegen_1 = require("../utils/codegen");
 const file_utils_1 = require("../utils/file-utils");
 const lang_utils_1 = require("../utils/lang-utils");
 const npm_utils_1 = require("../utils/npm-utils");
+const layout_1 = require("./templates/app-codegen/layout");
 const catchall_page_1 = require("./templates/app-loader/catchall-page");
 const plasmic_host_1 = require("./templates/app-loader/plasmic-host");
 const plasmic_init_1 = require("./templates/app-loader/plasmic-init");
@@ -89,19 +90,44 @@ export default nextConfig;`);
 };
 function generateFilesAppDir(args) {
     return __awaiter(this, void 0, void 0, function* () {
-        const { projectPath, jsOrTs, projectId, projectApiToken } = args;
+        const { projectPath, scheme, jsOrTs, projectId, projectApiToken } = args;
         // Delete existing pages
         (0, file_utils_1.deleteGlob)(path_1.default.join(projectPath, "app", "page.*"));
-        // ./plasmic-init.ts
-        yield fs_1.promises.writeFile(path_1.default.join(projectPath, `plasmic-init.${jsOrTs}`), (0, plasmic_init_1.makePlasmicInit_app_loader)(projectId, (0, lang_utils_1.ensure)(projectApiToken, "Missing projectApiToken")));
-        // ./plasmic-init-client.ts
-        yield fs_1.promises.writeFile(path_1.default.join(projectPath, `plasmic-init-client.${jsOrTs}x`), (0, plasmic_init_client_1.makePlasmicInitClient_app_loader)(jsOrTs));
-        // ./app/plasmic-host/page.tsx
-        yield fs_1.promises.mkdir(path_1.default.join(projectPath, "app", "plasmic-host"));
-        yield fs_1.promises.writeFile(path_1.default.join(projectPath, "app", "plasmic-host", `page.${jsOrTs}x`), (0, plasmic_host_1.makePlasmicHostPage_app_loader)());
-        // ./app/[[...catchall]]/page.tsx
-        yield fs_1.promises.mkdir(path_1.default.join(projectPath, "app", "[[...catchall]]"));
-        yield fs_1.promises.writeFile(path_1.default.join(projectPath, "app", "[[...catchall]]", `page.${jsOrTs}x`), (0, catchall_page_1.makeCatchallPage_app_loader)(jsOrTs));
+        if (scheme === "loader") {
+            // ./plasmic-init.ts
+            yield fs_1.promises.writeFile(path_1.default.join(projectPath, `plasmic-init.${jsOrTs}`), (0, plasmic_init_1.makePlasmicInit_app_loader)(projectId, (0, lang_utils_1.ensure)(projectApiToken, "Missing projectApiToken")));
+            // ./plasmic-init-client.ts
+            yield fs_1.promises.writeFile(path_1.default.join(projectPath, `plasmic-init-client.${jsOrTs}x`), (0, plasmic_init_client_1.makePlasmicInitClient_app_loader)(jsOrTs));
+            // ./app/plasmic-host/page.tsx
+            yield fs_1.promises.mkdir(path_1.default.join(projectPath, "app", "plasmic-host"));
+            yield fs_1.promises.writeFile(path_1.default.join(projectPath, "app", "plasmic-host", `page.${jsOrTs}x`), (0, plasmic_host_1.makePlasmicHostPage_app_loader)());
+            // ./app/[[...catchall]]/page.tsx
+            yield fs_1.promises.mkdir(path_1.default.join(projectPath, "app", "[[...catchall]]"));
+            yield fs_1.promises.writeFile(path_1.default.join(projectPath, "app", "[[...catchall]]", `page.${jsOrTs}x`), (0, catchall_page_1.makeCatchallPage_app_loader)(jsOrTs));
+        }
+        else {
+            // ./app/layout.tsx
+            yield fs_1.promises.writeFile(path_1.default.join(projectPath, "app", `layout.${jsOrTs}x`), (0, layout_1.makeLayout_app_codegen)(jsOrTs));
+            // ./app/plasmic-host/page.tsx
+            yield fs_1.promises.mkdir(path_1.default.join(projectPath, "app", "plasmic-host"));
+            yield fs_1.promises.writeFile(path_1.default.join(projectPath, "app", "plasmic-host", `page.${jsOrTs}x`), (0, plasmic_host_2.makePlasmicHostPage_pages_codegen)() // plasmic-host page contents are the same as the pages router
+            );
+            // This should generate
+            // ./plasmic.json
+            // ./app/page.tsx
+            // ./components/plasmic/**
+            yield (0, codegen_1.runCodegenSync)({
+                projectId,
+                projectApiToken,
+                projectPath,
+            });
+            // Make an index (/) page if the project didn't have one.
+            const config = yield (0, file_utils_1.getPlasmicConfig)(projectPath, "nextjs", scheme);
+            const plasmicFiles = lodash_1.default.map(lodash_1.default.flatMap(config.projects, (p) => p.components), (c) => c.importSpec.modulePath);
+            if (!plasmicFiles.find((f) => f.includes("app/page."))) {
+                yield fs_1.promises.writeFile(path_1.default.join(projectPath, "app", `page.${jsOrTs}x`), (0, file_utils_1.generateWelcomePage)(config, "nextjs"));
+            }
+        }
     });
 }
 function generateFilesPagesDir(args) {

package/dist/nextjs/templates/app-codegen/layout.d.ts

@@ -0,0 +1,2 @@
+import { JsOrTs } from "../../../utils/types";
+export declare function makeLayout_app_codegen(jsOrTs: JsOrTs): string;

package/dist/nextjs/templates/app-codegen/layout.js

@@ -0,0 +1,27 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.makeLayout_app_codegen = void 0;
+const file_utils_1 = require("../../../utils/file-utils");
+function makeLayout_app_codegen(jsOrTs) {
+    return `import '@/app/globals.css'
+import { PlasmicRootProvider } from "@plasmicapp/react-web";
+import Link from "next/link";
+
+export default function RootLayout({
+  children,
+}${(0, file_utils_1.ifTs)(jsOrTs, `: Readonly<{
+  children: React.ReactNode;
+}>`)}) {
+  return (
+    <html lang="en">
+      <body>
+        <PlasmicRootProvider Link={Link}>
+          {children}
+        </PlasmicRootProvider>
+      </body>
+    </html>
+  );
+}
+`;
+}
+exports.makeLayout_app_codegen = makeLayout_app_codegen;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "create-plasmic-app",
-  "version": "0.0.133",
+  "version": "0.0.134",
   "description": "Create Plasmic-powered React apps",
   "main": "./dist/lib.js",
   "types": "./dist/lib.d.ts",
@@ -47,5 +47,5 @@
     "validate-npm-package-name": "^3.0.0",
     "yargs": "^16.2.0"
   },
-  "gitHead": "a18cd21936a28b372b3cbdd9f4a4c37b7d055eae"
+  "gitHead": "d429f0c262533e0bcc1e2a18675c4e6277580ac6"
 }

package/run-cpa.ts

@@ -30,6 +30,12 @@ async function run() {
         scheme,
         typescript,
       });
+      allArgSets.push({
+        platform: "nextjs",
+        appDir: true,
+        scheme,
+        typescript,
+      });
       if (scheme === "codegen") {
         if (typescript) {
           allArgSets.push({
@@ -46,22 +52,15 @@ async function run() {
         });
       }
     });
-
-    allArgSets.push({
-      platform: "nextjs",
-      appDir: true,
-      scheme: "loader", // TODO: support codegen with appDir
-      typescript,
-    });
   });
   const allArgSetNames = allArgSets.map(getProjectName).sort();
 
-  let yargsCommand = yargs.command(
+  const yargsCommand = yargs.command(
     "$0 [arg-sets..]",
     `Runs create-plasmic-app with predefined sets of args for you.
 
 Valid arg sets:\n\tall\n\t${allArgSetNames.join("\n\t")}`,
-    (yargs) => yargs
+    (yargs2) => yargs2
   );
 
   const cliArgSetNames = yargsCommand.strict().argv["arg-sets"] as

package/src/index.ts

@@ -75,15 +75,6 @@ const argv = yargs
       throw new Error(`Loader scheme may only be used with Next.js or Gatsby`);
     }
 
-    if (
-      argv2.appDir &&
-      !(argv2.platform === "nextjs" && argv2.scheme === "loader")
-    ) {
-      throw new Error(
-        `App dir may only be used with Next.js and loader scheme`
-      );
-    }
-
     return true;
   }).argv;
 
@@ -219,32 +210,38 @@ async function run(): Promise<void> {
         })
       : "codegen";
 
-  // TODO: Support nextjs + codegen
   const platformOptions: PlatformOptions = {};
-  // Don't show app dir question until we have better support for app dir.
-  const showAppDirQuestion = false;
-  if (showAppDirQuestion && platform === "nextjs" && scheme === "loader") {
-    platformOptions.nextjs = {
-      appDir: await maybePrompt({
-        name: "appDir",
-        message:
-          "Do you want to use the app/ directory and React Server Components? (see https://beta.nextjs.org/docs/app-directory-roadmap)",
-        type: "list",
-        choices: () => [
-          {
-            name: "No, use pages/ directory",
-            short: "No",
-            value: false,
-          },
-          {
-            name: "Yes, use app/ directory (experimental)",
-            short: "Yes",
-            value: true,
-          },
-        ],
-        default: false,
-      }),
-    };
+  if (platform === "nextjs") {
+    // TODO: re-enable when app dir is released
+    const showAppDirQuestion = false;
+    if (showAppDirQuestion) {
+      platformOptions.nextjs = {
+        appDir: await maybePrompt({
+          name: "appDir",
+          message:
+            "Do you want to use the app/ directory and React Server Components? (see https://nextjs.org/docs/app)",
+          type: "list",
+          choices: () => [
+            {
+              name: "Yes, use app/ directory",
+              short: "Yes",
+              value: true,
+            },
+            {
+              name: "No, use pages/ directory",
+              short: "No",
+              value: false,
+            },
+          ],
+          default: true,
+        }),
+      };
+      // Respect appDir flag for e2e tests
+    } else if (argv["appDir"] !== undefined) {
+      platformOptions.nextjs = {
+        appDir: argv["appDir"],
+      };
+    }
   }
 
   // Get the projectId