create-plasmic-app 0.0.63 → 0.0.64

package/dist/{templates/gatsby.js → gatsby/template.js}

@@ -2,18 +2,16 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.wrapAppRootForCodegen = exports.makeGatsbyPlasmicInit = exports.GATSBY_SSR_CONFIG = exports.makeGatsbyHostPage = exports.GATSBY_PLUGIN_CONFIG = exports.GATSBY_404 = exports.makeGatsbyDefaultPage = void 0;
 const file_utils_1 = require("../utils/file-utils");
-const makeGatsbyDefaultPage = (format) => {
-    const ts = format === "ts";
-    return `
-import React from "react";
+function makeGatsbyDefaultPage(jsOrTs) {
+    return `import React from "react";
 import Helmet from "react-helmet";
 import {
   PlasmicComponent,
-  PlasmicRootProvider,${(0, file_utils_1.ifTs)(ts, `
+  PlasmicRootProvider,${(0, file_utils_1.ifTs)(jsOrTs, `
   InitOptions,
   ComponentRenderData,`)}
 } from "@plasmicapp/loader-gatsby";
-import { graphql${(0, file_utils_1.ifTs)(ts, ", PageProps")} } from "gatsby";
+import { graphql${(0, file_utils_1.ifTs)(jsOrTs, ", PageProps")} } from "gatsby";
 import { initPlasmicLoaderWithRegistrations } from "../plasmic-init";
 
 export const query = graphql\`
@@ -23,14 +21,14 @@ export const query = graphql\`
   }
 \`;
 
-${(0, file_utils_1.ifTs)(ts, `interface PlasmicGatsbyPageProps extends PageProps {
+${(0, file_utils_1.ifTs)(jsOrTs, `interface PlasmicGatsbyPageProps extends PageProps {
   data: {
     plasmicOptions: InitOptions
     plasmicComponents: ComponentRenderData
   }
 }
 `)}
-const PlasmicGatsbyPage = ({ data, location }${(0, file_utils_1.ifTs)(ts, ": PlasmicGatsbyPageProps")}) => {
+const PlasmicGatsbyPage = ({ data, location }${(0, file_utils_1.ifTs)(jsOrTs, ": PlasmicGatsbyPageProps")}) => {
   const {
     plasmicComponents,
     plasmicOptions,
@@ -57,17 +55,16 @@ const PlasmicGatsbyPage = ({ data, location }${(0, file_utils_1.ifTs)(ts, ": Pla
 };
 
 export default PlasmicGatsbyPage;
-`.trim();
-};
+`;
+}
 exports.makeGatsbyDefaultPage = makeGatsbyDefaultPage;
-exports.GATSBY_404 = `
-const NotFound = () => {
+exports.GATSBY_404 = `const NotFound = () => {
   return "Not Found";
 };
 export default NotFound;
-`.trim();
-const GATSBY_PLUGIN_CONFIG = (projectId, projectApiToken, useTypescript) => `
-{
+`;
+function GATSBY_PLUGIN_CONFIG(projectId, projectApiToken, jsOrTs) {
+    return `{
   resolve: "@plasmicapp/loader-gatsby",
   options: {
     projects: [
@@ -77,21 +74,21 @@ const GATSBY_PLUGIN_CONFIG = (projectId, projectApiToken, useTypescript) => `
       },
     ], // An array of project ids.
     preview: false,
-    defaultPlasmicPage: ${useTypescript ? "path" : "require"}.resolve("./src/templates/defaultPlasmicPage.${useTypescript ? "tsx" : "jsx"}"),
+    defaultPlasmicPage: ${jsOrTs === "ts" ? "path" : "require"}.resolve("./src/templates/defaultPlasmicPage.${jsOrTs}x"),
   },
 },
 {
   resolve: "gatsby-plugin-react-helmet",
 }
 `;
+}
 exports.GATSBY_PLUGIN_CONFIG = GATSBY_PLUGIN_CONFIG;
-const makeGatsbyHostPage = (opts) => {
-    const { useTypescript, scheme } = opts;
+function makeGatsbyHostPage(opts) {
+    const { jsOrTs, scheme } = opts;
     if (scheme === "loader") {
-        return `
-import * as React from "react"
+        return `import * as React from "react"
 import {
-  PlasmicCanvasHost${(0, file_utils_1.ifTs)(useTypescript, `, InitOptions`)}
+  PlasmicCanvasHost${(0, file_utils_1.ifTs)(jsOrTs, `, InitOptions`)}
 } from "@plasmicapp/loader-gatsby"
 import { graphql } from "gatsby"
 import { initPlasmicLoaderWithRegistrations } from "../plasmic-init"
@@ -102,22 +99,21 @@ export const query = graphql\`
   }
 \`
 
-${(0, file_utils_1.ifTs)(useTypescript, `interface HostProps {
+${(0, file_utils_1.ifTs)(jsOrTs, `interface HostProps {
   data: {
     plasmicOptions: InitOptions;
   }
 }
 `)}
-export default function Host({ data }${(0, file_utils_1.ifTs)(useTypescript, ": HostProps")}) {
+export default function Host({ data }${(0, file_utils_1.ifTs)(jsOrTs, ": HostProps")}) {
   const { plasmicOptions } = data
   initPlasmicLoaderWithRegistrations(plasmicOptions)
   return <PlasmicCanvasHost />
 }
-    `.trim();
+`;
     }
     else {
-        return `
-import * as React from "react"
+        return `import * as React from "react"
 import { PlasmicCanvasHost, registerComponent } from "@plasmicapp/host";
 
 // You can register any code components that you want to use here; see
@@ -134,12 +130,11 @@ export default function PlasmicHost() {
     <PlasmicCanvasHost />
   );
 }
-    `;
+`;
     }
-};
+}
 exports.makeGatsbyHostPage = makeGatsbyHostPage;
-exports.GATSBY_SSR_CONFIG = `
-/**
+exports.GATSBY_SSR_CONFIG = `/**
  * Implement Gatsby's SSR (Server Side Rendering) APIs in this file.
  *
  * See: https://www.gatsbyjs.com/docs/ssr-apis/
@@ -183,16 +178,14 @@ exports.onRenderBody = ({ pathname, setHeadComponents }) => {
     setHeadComponents(HeadComponents)
   }
 }
-`.trim();
-const makeGatsbyPlasmicInit = (format) => {
-    const ts = format === "ts";
-    return `
-import {
-  initPlasmicLoader,${(0, file_utils_1.ifTs)(ts, `
+`;
+function makeGatsbyPlasmicInit(jsOrTs) {
+    return `import {
+  initPlasmicLoader,${(0, file_utils_1.ifTs)(jsOrTs, `
   InitOptions,`)}
 } from "@plasmicapp/loader-gatsby";
 
-export function initPlasmicLoaderWithRegistrations(plasmicOptions${(0, file_utils_1.ifTs)(ts, ": InitOptions")}) {
+export function initPlasmicLoaderWithRegistrations(plasmicOptions${(0, file_utils_1.ifTs)(jsOrTs, ": InitOptions")}) {
   const PLASMIC = initPlasmicLoader(plasmicOptions);
 
   // You can register any code components that you want to use here; see
@@ -206,12 +199,11 @@ export function initPlasmicLoaderWithRegistrations(plasmicOptions${(0, file_util
 
   return PLASMIC;
 }
-`.trim();
-};
+`;
+}
 exports.makeGatsbyPlasmicInit = makeGatsbyPlasmicInit;
 function wrapAppRootForCodegen() {
-    return `
-import React from "react";
+    return `import React from "react";
 import { PlasmicRootProvider } from "@plasmicapp/react-web";
 import Helmet from "react-helmet";
 
@@ -222,6 +214,6 @@ export const wrapRootElement = ({ element }) => {
     </PlasmicRootProvider>
   );
 }
-  `;
+`;
 }
 exports.wrapAppRootForCodegen = wrapAppRootForCodegen;

package/dist/index.d.ts

@@ -1,2 +1,2 @@
 #!/usr/bin/env node
-export type CodeScheme = "codegen" | "loader";
+export {};

package/dist/index.js

@@ -52,39 +52,41 @@ if (process.env.CPA_DEBUG_CHDIR) {
 const createPlasmicAppVersion = (0, npm_utils_1.updateNotify)();
 // Specify command-line args
 const argv = yargs_1.default
-    .usage("Usage: $0 [options] <project-directory>")
-    .example([
-    ["$0 my-plasmic-app", "--- Create the project in `my-plasmic-app/`"],
-])
+    .command("$0 [projectName]", "Create a Plasmic app with Next.js, Gatsby, or Create React App", (yargs) => {
+    yargs
+        .usage("Usage: $0 [projectName] [options]")
+        .positional("projectName", {
+        describe: "Project and NPM package name",
+        string: true,
+    });
+})
     .option("platform", {
     describe: "Target platform",
     choices: ["", "nextjs", "gatsby", "react"],
-    default: "",
 })
     .option("scheme", {
     describe: "Plasmic integration scheme",
     choices: ["", "codegen", "loader"],
-    default: "",
 })
     .option("projectId", {
     describe: "Plasmic project ID",
     string: true,
-    default: "",
 })
     .option("projectApiToken", {
     describe: "Plasmic project API token (optional, to bypass standard auth)",
     string: true,
-    default: "",
 })
     .option("template", {
     describe: "Specify a template for the created project",
     string: true,
-    default: "",
 })
     .option("typescript", {
-    describe: "Use the default Typescript template",
+    describe: "Use Typescript?",
+    boolean: true,
+})
+    .option("appDir", {
+    describe: "(Next.js) Use app directory (experimental)?",
     boolean: true,
-    default: "",
 })
     .strict()
     .help("h")
@@ -109,7 +111,10 @@ function maybePrompt(question, checkCliAnswer = true) {
         const message = (0, lang_utils_1.ensure)(question.message);
         if (checkCliAnswer) {
             const cliAnswer = argv[name];
-            if (cliAnswer !== null && cliAnswer !== undefined && cliAnswer !== "") {
+            if (cliAnswer !== null &&
+                cliAnswer !== undefined &&
+                cliAnswer !== "" &&
+                (!question.validate || question.validate(cliAnswer))) {
                 console.log(`${message}: ${cliAnswer} (specified in CLI arg)`);
                 return cliAnswer; // assume it's the correct type
             }
@@ -119,7 +124,7 @@ function maybePrompt(question, checkCliAnswer = true) {
     });
 }
 // Keeping these as globals to easily share with our `crash` function
-let projectName = argv._.length > 0 ? argv._[0] + "" : undefined;
+const projectName = argv._.length > 0 ? argv._[0] + "" : undefined;
 let resolvedProjectPath;
 /**
  * Main function
@@ -129,18 +134,17 @@ function run() {
         /**
          * PROMPT USER
          */
-        // User-specified project path/directory
-        while (!cpa.checkValidName(projectName)) {
-            projectName = (yield inquirer_1.default.prompt({
-                name: "projectPath",
-                message: "What is your project named?",
-                default: "my-app",
-            })).projectPath.trim();
-        }
+        // User-specified project name
+        const projectName = yield maybePrompt({
+            name: "projectName",
+            message: "What is your project named?",
+            default: "my-app",
+            validate: cpa.checkValidName,
+        });
         // Absolute path to the new project
         resolvedProjectPath = path.resolve(projectName);
         // Prompt for Typescript
-        const useTypescript = yield maybePrompt({
+        const jsOrTs = (yield maybePrompt({
             name: "typescript",
             message: "What language do you want to use?",
             type: "list",
@@ -155,9 +159,11 @@ function run() {
                 },
             ],
             default: true,
-        });
+        }))
+            ? "ts"
+            : "js";
         // Prompt for the platform
-        const platform = (0, lang_utils_1.ensureString)(yield maybePrompt({
+        const platform = yield maybePrompt({
             name: "platform",
             message: "What React framework do you want to use?",
             type: "list",
@@ -176,7 +182,7 @@ function run() {
                 },
             ],
             default: "nextjs",
-        }));
+        });
         // Scheme to use for Plasmic integration
         // - loader only available for gatsby/next.js
         const scheme = platform === "nextjs" || platform === "gatsby"
@@ -199,6 +205,30 @@ function run() {
                 default: "loader",
             })
             : "codegen";
+        // TODO: Support nextjs + codegen
+        const platformOptions = {};
+        if (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,
+                }),
+            };
+        }
         // Get the projectId
         console.log();
         let projectId;
@@ -225,7 +255,6 @@ What is the URL of your project?`,
         }
         // RUN IT
         console.log();
-        (0, lang_utils_1.assert)(platform === "nextjs" || platform === "gatsby" || platform === "react", "platform must be one of ['nextjs', 'gatsby', 'react']");
         const template = argv["template"];
         const projectApiToken = argv["projectApiToken"];
         // Set the metadata environment variable to tag the future Segment codegen event
@@ -236,8 +265,9 @@ What is the URL of your project?`,
             resolvedProjectPath,
             projectId,
             platform,
+            platformOptions,
             scheme,
-            useTypescript,
+            jsOrTs,
             projectApiToken,
             template,
         });

package/dist/lib.d.ts

@@ -1,13 +1,12 @@
 import { setMetadataEnv } from "@plasmicapp/cli";
-export type PlatformType = "nextjs" | "gatsby" | "react";
-export type SchemeType = "codegen" | "loader";
-export declare function toString(s: PlatformType): string;
+import { JsOrTs, PlatformOptions, PlatformType, SchemeType } from "./utils/types";
 export interface CreatePlasmicAppArgs {
     resolvedProjectPath: string;
     projectId: string;
     platform: PlatformType;
+    platformOptions: PlatformOptions;
     scheme: SchemeType;
-    useTypescript: boolean;
+    jsOrTs: JsOrTs;
     projectApiToken?: string;
     template?: string;
 }

package/dist/lib.js

@@ -35,21 +35,28 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.setMetadata = exports.banner = exports.checkValidName = exports.create = exports.toString = void 0;
+exports.setMetadata = exports.banner = exports.checkValidName = exports.create = void 0;
 const cli_1 = require("@plasmicapp/cli");
 const chalk_1 = __importDefault(require("chalk"));
 const path = __importStar(require("upath"));
 const validate_npm_package_name_1 = __importDefault(require("validate-npm-package-name"));
-const strategies_1 = require("./strategies");
 const file_utils_1 = require("./utils/file-utils");
 const npm_utils_1 = require("./utils/npm-utils");
-function toString(s) {
-    return s === "nextjs" ? "Next.js" : s === "gatsby" ? "Gatsby" : "React";
+function getCPAStrategy(platform) {
+    return __awaiter(this, void 0, void 0, function* () {
+        switch (platform) {
+            case "nextjs":
+                return (yield Promise.resolve().then(() => __importStar(require("./nextjs/nextjs")))).nextjsStrategy;
+            case "gatsby":
+                return (yield Promise.resolve().then(() => __importStar(require("./gatsby/gatsby")))).gatsbyStrategy;
+            case "react":
+                return (yield Promise.resolve().then(() => __importStar(require("./react/react")))).reactStrategy;
+        }
+    });
 }
-exports.toString = toString;
 function create(args) {
     return __awaiter(this, void 0, void 0, function* () {
-        const { resolvedProjectPath, projectId, platform, scheme, useTypescript, template, } = args;
+        const { resolvedProjectPath, projectId, platform, platformOptions, scheme, jsOrTs, template, } = args;
         let { projectApiToken } = args;
         console.log("Let's get started! Here's what we'll do: ");
         console.log("1. Authenticate with Plasmic");
@@ -81,17 +88,18 @@ function create(args) {
         if (!["codegen", "loader"].includes(scheme)) {
             throw new Error(`Unrecognized Plasmic scheme: ${scheme}`);
         }
-        const cpaStrategy = (0, strategies_1.getCPAStrategy)(platform);
+        const cpaStrategy = yield getCPAStrategy(platform);
         // Create project using strategy for platform
         yield cpaStrategy.create({
             projectPath: resolvedProjectPath,
-            useTypescript,
+            jsOrTs,
             template,
+            platformOptions,
         });
         // Ensure that we have a empty tsconfig and @types packages.
         // Gatsby and Next.js by default support typescript handling internally
         // tsconfig so we don't have to ensure it.
-        if (useTypescript && platform === "react") {
+        if (jsOrTs === "ts" && platform === "react") {
             yield (0, file_utils_1.ensureTsconfig)(resolvedProjectPath);
         }
         // Make sure we have an api token for loader
@@ -106,7 +114,7 @@ function create(args) {
         const installResult = yield cpaStrategy.installDeps({
             scheme,
             projectPath: resolvedProjectPath,
-            useTypescript,
+            jsOrTs,
         });
         if (!installResult) {
             throw new Error("Failed to install the Plasmic dependency");
@@ -116,16 +124,18 @@ function create(args) {
             projectId,
             projectPath: resolvedProjectPath,
             projectApiToken,
-            useTypescript,
+            jsOrTs,
             scheme,
+            platformOptions,
         });
         // Generate files
         yield cpaStrategy.generateFiles({
             projectPath: resolvedProjectPath,
-            useTypescript,
+            jsOrTs,
             scheme,
             projectId,
             projectApiToken,
+            platformOptions,
         });
         /**
          * INSTRUCT USER ON NEXT STEPS

package/dist/nextjs/nextjs.d.ts

@@ -0,0 +1,2 @@
+import { CPAStrategy } from "../utils/strategy";
+export declare const nextjsStrategy: CPAStrategy;

package/dist/nextjs/nextjs.js

@@ -0,0 +1,155 @@
+"use strict";
+var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.nextjsStrategy = void 0;
+const fs_1 = require("fs");
+const path_1 = __importDefault(require("path"));
+const cmd_utils_1 = require("../utils/cmd-utils");
+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 catchall_page_1 = require("./templates/app-loader/catchall-page");
+const plasmic_init_1 = require("./templates/app-loader/plasmic-init");
+const plasmic_init_client_1 = require("./templates/app-loader/plasmic-init-client");
+const app_1 = require("./templates/pages-codegen/app");
+const plasmic_host_1 = require("./templates/pages-codegen/plasmic-host");
+const catchall_page_2 = require("./templates/pages-loader/catchall-page");
+const plasmic_host_2 = require("./templates/app-loader/plasmic-host");
+const plasmic_host_3 = require("./templates/pages-loader/plasmic-host");
+const plasmic_init_2 = require("./templates/pages-loader/plasmic-init");
+exports.nextjsStrategy = {
+    create: (args) => __awaiter(void 0, void 0, void 0, function* () {
+        var _a;
+        const { projectPath, template, jsOrTs, platformOptions } = args;
+        const typescriptArg = `--${jsOrTs}`;
+        const experimentalAppArg = ((_a = platformOptions.nextjs) === null || _a === void 0 ? void 0 : _a.appDir)
+            ? "--experimental-app"
+            : "--no-experimental-app";
+        const templateArg = template ? ` --template ${template}` : "";
+        const createCommand = `npx create-next-app@latest ${typescriptArg} ${experimentalAppArg} ${templateArg}` +
+            ` --eslint --no-src-dir  --import-alias "@/*" ${projectPath}`;
+        // Default Next.js starter already supports Typescript
+        // See where we `touch tsconfig.json` later on
+        yield (0, cmd_utils_1.spawnOrFail)(createCommand);
+    }),
+    installDeps: ({ scheme, projectPath }) => __awaiter(void 0, void 0, void 0, function* () {
+        if (scheme === "loader") {
+            return yield (0, npm_utils_1.installUpgrade)("@plasmicapp/loader-nextjs", {
+                workingDir: projectPath,
+            });
+        }
+        else {
+            return yield (0, codegen_1.installCodegenDeps)({ projectPath });
+        }
+    }),
+    overwriteConfig: (args) => __awaiter(void 0, void 0, void 0, function* () {
+        var _b;
+        const { projectPath, scheme, platformOptions } = args;
+        const nextjsConfigFile = path_1.default.join(projectPath, "next.config.js");
+        const appDirOption = ((_b = platformOptions.nextjs) === null || _b === void 0 ? void 0 : _b.appDir)
+            ? `
+  experimental: {
+    appDir: true,
+  }`
+            : "";
+        if (scheme === "codegen") {
+            yield fs_1.promises.writeFile(nextjsConfigFile, `
+/** @type {import('next').NextConfig} */
+const nextConfig = {
+  eslint: {
+    ignoreDuringBuilds: true,
+  },
+  trailingSlash: true,${appDirOption}
+};
+
+module.exports = nextConfig;`);
+        }
+        else {
+            yield fs_1.promises.writeFile(nextjsConfigFile, `
+/** @type {import('next').NextConfig} */
+const nextConfig = {
+  // Turn off React StrictMode for now, as react-aria (used by Plasmic)
+  // has some troubles with it. See
+  // https://github.com/adobe/react-spectrum/labels/strict%20mode
+  reactStrictMode: false,${appDirOption}
+};
+
+module.exports = nextConfig;`);
+        }
+    }),
+    generateFiles: (args) => {
+        var _a;
+        if ((_a = args.platformOptions.nextjs) === null || _a === void 0 ? void 0 : _a.appDir) {
+            return generateFilesAppDir(args);
+        }
+        else {
+            return generateFilesPagesDir(args);
+        }
+    },
+    build: (args) => __awaiter(void 0, void 0, void 0, function* () {
+        const { npmRunCmd, projectPath } = args;
+        yield (0, cmd_utils_1.spawnOrFail)(`${npmRunCmd} build`, projectPath);
+    }),
+};
+function generateFilesAppDir(args) {
+    return __awaiter(this, void 0, void 0, function* () {
+        const { projectPath, 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)));
+        // ./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_2.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));
+    });
+}
+function generateFilesPagesDir(args) {
+    return __awaiter(this, void 0, void 0, function* () {
+        const { projectPath, scheme, jsOrTs, projectId, projectApiToken } = args;
+        // Delete existing pages
+        (0, file_utils_1.deleteGlob)(path_1.default.join(projectPath, "pages", "*.*"));
+        if (scheme === "loader") {
+            // ./plasmic-init.ts
+            yield fs_1.promises.writeFile(path_1.default.join(projectPath, `plasmic-init.${jsOrTs}`), (0, plasmic_init_2.makePlasmicInit_pages_loader)(projectId, (0, lang_utils_1.ensure)(projectApiToken)));
+            // ./pages/plasmic-host.tsx
+            yield fs_1.promises.writeFile(path_1.default.join(projectPath, "pages", `plasmic-host.${jsOrTs}x`), (0, plasmic_host_3.makePlasmicHostPage_pages_loader)());
+            // ./pages/[[...catchall]].tsx
+            yield fs_1.promises.writeFile(path_1.default.join(projectPath, "pages", `[[...catchall]].${jsOrTs}x`), (0, catchall_page_2.makeCatchallPage_pages_loader)(jsOrTs));
+        }
+        else {
+            // ./pages/_app.tsx
+            yield fs_1.promises.writeFile(path_1.default.join(projectPath, "pages", `_app.${jsOrTs}x`), (0, app_1.makeCustomApp_pages_codegen)(jsOrTs));
+            // ./pages/plasmic-host.tsx
+            yield fs_1.promises.writeFile(path_1.default.join(projectPath, "pages", `plasmic-host.${jsOrTs}x`), (0, plasmic_host_1.makePlasmicHostPage_pages_codegen)());
+            // This should generate
+            // ./plasmic.json
+            // ./pages/index.tsx
+            // ./components/plasmic/**
+            yield (0, codegen_1.runCodegenSync)({
+                projectId,
+                projectApiToken,
+                projectPath,
+            });
+            // This should overwrite
+            // ./pages/index.tsx
+            yield (0, file_utils_1.overwriteIndex)(projectPath, "nextjs", scheme);
+        }
+    });
+}

package/dist/nextjs/templates/app-loader/catchall-page.d.ts

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