create-plasmic-app 0.0.63 → 0.0.64

package/src/index.ts

@@ -6,53 +6,58 @@ import inquirer, { DistinctQuestion } from "inquirer";
 import * as path from "upath";
 import yargs from "yargs";
 import * as cpa from "./lib";
-import { assert, ensure, ensureString } from "./utils/lang-utils";
+import { ensure } from "./utils/lang-utils";
 import { checkEngineStrict, updateNotify } from "./utils/npm-utils";
+import { PlatformOptions, PlatformType, SchemeType } from "./utils/types";
 
 if (process.env.CPA_DEBUG_CHDIR) {
   process.chdir(process.env.CPA_DEBUG_CHDIR);
 }
 
-export type CodeScheme = "codegen" | "loader";
-
 // Check for updates
 const createPlasmicAppVersion = updateNotify();
 
 // Specify command-line args
 const argv = yargs
-  .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")
@@ -83,7 +88,12 @@ async function maybePrompt<T>(
 
   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 as T; // assume it's the correct type
     }
@@ -94,7 +104,7 @@ async function maybePrompt<T>(
 }
 
 // Keeping these as globals to easily share with our `crash` function
-let projectName: string | undefined =
+const projectName: string | undefined =
   argv._.length > 0 ? argv._[0] + "" : undefined;
 let resolvedProjectPath: string;
 
@@ -105,21 +115,18 @@ async function run(): Promise<void> {
   /**
    * PROMPT USER
    */
-  // User-specified project path/directory
-  while (!cpa.checkValidName(projectName)) {
-    projectName = (
-      await inquirer.prompt({
-        name: "projectPath",
-        message: "What is your project named?",
-        default: "my-app",
-      })
-    ).projectPath.trim();
-  }
+  // User-specified project name
+  const projectName = await 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: boolean = await maybePrompt({
+  const jsOrTs = (await maybePrompt({
     name: "typescript",
     message: "What language do you want to use?",
     type: "list",
@@ -134,35 +141,35 @@ async function run(): Promise<void> {
       },
     ],
     default: true,
-  });
+  }))
+    ? "ts"
+    : "js";
 
   // Prompt for the platform
-  const platform = ensureString(
-    await maybePrompt<string>({
-      name: "platform",
-      message: "What React framework do you want to use?",
-      type: "list",
-      choices: () => [
-        {
-          name: "Next.js",
-          value: "nextjs",
-        },
-        {
-          name: "Gatsby",
-          value: "gatsby",
-        },
-        {
-          name: "Create React App",
-          value: "react",
-        },
-      ],
-      default: "nextjs",
-    })
-  );
+  const platform = await maybePrompt<PlatformType>({
+    name: "platform",
+    message: "What React framework do you want to use?",
+    type: "list",
+    choices: () => [
+      {
+        name: "Next.js",
+        value: "nextjs",
+      },
+      {
+        name: "Gatsby",
+        value: "gatsby",
+      },
+      {
+        name: "Create React App",
+        value: "react",
+      },
+    ],
+    default: "nextjs",
+  });
 
   // Scheme to use for Plasmic integration
   // - loader only available for gatsby/next.js
-  const scheme: CodeScheme =
+  const scheme: SchemeType =
     platform === "nextjs" || platform === "gatsby"
       ? await maybePrompt({
           name: "scheme",
@@ -184,6 +191,32 @@ async function run(): Promise<void> {
         })
       : "codegen";
 
+  // TODO: Support nextjs + codegen
+  const platformOptions: PlatformOptions = {};
+  if (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,
+      }),
+    };
+  }
+
   // Get the projectId
   console.log();
   let projectId: string | undefined;
@@ -219,10 +252,6 @@ What is the URL of your project?`,
 
   // RUN IT
   console.log();
-  assert(
-    platform === "nextjs" || platform === "gatsby" || platform === "react",
-    "platform must be one of ['nextjs', 'gatsby', 'react']"
-  );
 
   const template = argv["template"];
   const projectApiToken = argv["projectApiToken"];
@@ -235,8 +264,9 @@ What is the URL of your project?`,
     resolvedProjectPath,
     projectId,
     platform,
+    platformOptions,
     scheme,
-    useTypescript,
+    jsOrTs,
     projectApiToken,
     template,
   });

package/src/lib.ts

@@ -2,23 +2,34 @@ import { auth, getProjectApiToken, setMetadataEnv } from "@plasmicapp/cli";
 import chalk from "chalk";
 import * as path from "upath";
 import validateProjectName from "validate-npm-package-name";
-import { getCPAStrategy } from "./strategies";
 import { ensureTsconfig, overwriteReadme } from "./utils/file-utils";
 import { detectPackageManager } from "./utils/npm-utils";
-
-export type PlatformType = "nextjs" | "gatsby" | "react";
-export type SchemeType = "codegen" | "loader";
-
-export function toString(s: PlatformType): string {
-  return s === "nextjs" ? "Next.js" : s === "gatsby" ? "Gatsby" : "React";
+import { CPAStrategy } from "./utils/strategy";
+import {
+  JsOrTs,
+  PlatformOptions,
+  PlatformType,
+  SchemeType,
+} from "./utils/types";
+
+async function getCPAStrategy(platform: PlatformType): Promise<CPAStrategy> {
+  switch (platform) {
+    case "nextjs":
+      return (await import("./nextjs/nextjs")).nextjsStrategy;
+    case "gatsby":
+      return (await import("./gatsby/gatsby")).gatsbyStrategy;
+    case "react":
+      return (await import("./react/react")).reactStrategy;
+  }
 }
 
 export interface CreatePlasmicAppArgs {
   resolvedProjectPath: string;
   projectId: string;
   platform: PlatformType;
+  platformOptions: PlatformOptions;
   scheme: SchemeType;
-  useTypescript: boolean;
+  jsOrTs: JsOrTs;
   projectApiToken?: string;
   template?: string;
 }
@@ -28,8 +39,9 @@ export async function create(args: CreatePlasmicAppArgs): Promise<void> {
     resolvedProjectPath,
     projectId,
     platform,
+    platformOptions,
     scheme,
-    useTypescript,
+    jsOrTs,
     template,
   } = args;
   let { projectApiToken } = args;
@@ -68,19 +80,20 @@ export async function create(args: CreatePlasmicAppArgs): Promise<void> {
     throw new Error(`Unrecognized Plasmic scheme: ${scheme}`);
   }
 
-  const cpaStrategy = getCPAStrategy(platform);
+  const cpaStrategy = await getCPAStrategy(platform);
 
   // Create project using strategy for platform
   await 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") {
     await ensureTsconfig(resolvedProjectPath);
   }
 
@@ -97,7 +110,7 @@ export async function create(args: CreatePlasmicAppArgs): Promise<void> {
   const installResult = await cpaStrategy.installDeps({
     scheme,
     projectPath: resolvedProjectPath,
-    useTypescript,
+    jsOrTs,
   });
 
   if (!installResult) {
@@ -109,17 +122,19 @@ export async function create(args: CreatePlasmicAppArgs): Promise<void> {
     projectId,
     projectPath: resolvedProjectPath,
     projectApiToken,
-    useTypescript,
+    jsOrTs,
     scheme,
+    platformOptions,
   });
 
   // Generate files
   await cpaStrategy.generateFiles({
     projectPath: resolvedProjectPath,
-    useTypescript,
+    jsOrTs,
     scheme,
     projectId,
     projectApiToken,
+    platformOptions,
   });
 
   /**

package/src/nextjs/nextjs.ts

@@ -0,0 +1,180 @@
+import { promises as fs } from "fs";
+import path from "path";
+import { spawnOrFail } from "../utils/cmd-utils";
+import { installCodegenDeps, runCodegenSync } from "../utils/codegen";
+import { deleteGlob, overwriteIndex } from "../utils/file-utils";
+import { ensure } from "../utils/lang-utils";
+import { installUpgrade } from "../utils/npm-utils";
+import { CPAStrategy, GenerateFilesArgs } from "../utils/strategy";
+import { makeCatchallPage_app_loader } from "./templates/app-loader/catchall-page";
+import { makePlasmicInit_app_loader } from "./templates/app-loader/plasmic-init";
+import { makePlasmicInitClient_app_loader } from "./templates/app-loader/plasmic-init-client";
+import { makeCustomApp_pages_codegen } from "./templates/pages-codegen/app";
+import { makePlasmicHostPage_pages_codegen } from "./templates/pages-codegen/plasmic-host";
+import { makeCatchallPage_pages_loader } from "./templates/pages-loader/catchall-page";
+import { makePlasmicHostPage_app_loader } from "./templates/app-loader/plasmic-host";
+import { makePlasmicHostPage_pages_loader } from "./templates/pages-loader/plasmic-host";
+import { makePlasmicInit_pages_loader } from "./templates/pages-loader/plasmic-init";
+
+export const nextjsStrategy: CPAStrategy = {
+  create: async (args) => {
+    const { projectPath, template, jsOrTs, platformOptions } = args;
+    const typescriptArg = `--${jsOrTs}`;
+    const experimentalAppArg = platformOptions.nextjs?.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
+    await spawnOrFail(createCommand);
+  },
+  installDeps: async ({ scheme, projectPath }) => {
+    if (scheme === "loader") {
+      return await installUpgrade("@plasmicapp/loader-nextjs", {
+        workingDir: projectPath,
+      });
+    } else {
+      return await installCodegenDeps({ projectPath });
+    }
+  },
+  overwriteConfig: async (args) => {
+    const { projectPath, scheme, platformOptions } = args;
+    const nextjsConfigFile = path.join(projectPath, "next.config.js");
+    const appDirOption = platformOptions.nextjs?.appDir
+      ? `
+  experimental: {
+    appDir: true,
+  }`
+      : "";
+    if (scheme === "codegen") {
+      await fs.writeFile(
+        nextjsConfigFile,
+        `
+/** @type {import('next').NextConfig} */
+const nextConfig = {
+  eslint: {
+    ignoreDuringBuilds: true,
+  },
+  trailingSlash: true,${appDirOption}
+};
+
+module.exports = nextConfig;`
+      );
+    } else {
+      await fs.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) => {
+    if (args.platformOptions.nextjs?.appDir) {
+      return generateFilesAppDir(args);
+    } else {
+      return generateFilesPagesDir(args);
+    }
+  },
+  build: async (args) => {
+    const { npmRunCmd, projectPath } = args;
+    await spawnOrFail(`${npmRunCmd} build`, projectPath);
+  },
+};
+
+async function generateFilesAppDir(args: GenerateFilesArgs) {
+  const { projectPath, jsOrTs, projectId, projectApiToken } = args;
+
+  // Delete existing pages
+  deleteGlob(path.join(projectPath, "app", "page.*"));
+
+  // ./plasmic-init.ts
+  await fs.writeFile(
+    path.join(projectPath, `plasmic-init.${jsOrTs}`),
+    makePlasmicInit_app_loader(projectId, ensure(projectApiToken))
+  );
+
+  // ./plasmic-init-client.ts
+  await fs.writeFile(
+    path.join(projectPath, `plasmic-init-client.${jsOrTs}x`),
+    makePlasmicInitClient_app_loader(jsOrTs)
+  );
+
+  // ./app/plasmic-host/page.tsx
+  await fs.mkdir(path.join(projectPath, "app", "plasmic-host"));
+  await fs.writeFile(
+    path.join(projectPath, "app", "plasmic-host", `page.${jsOrTs}x`),
+    makePlasmicHostPage_app_loader()
+  );
+
+  // ./app/[[...catchall]]/page.tsx
+  await fs.mkdir(path.join(projectPath, "app", "[[...catchall]]"));
+  await fs.writeFile(
+    path.join(projectPath, "app", "[[...catchall]]", `page.${jsOrTs}x`),
+    makeCatchallPage_app_loader(jsOrTs)
+  );
+}
+
+async function generateFilesPagesDir(args: GenerateFilesArgs) {
+  const { projectPath, scheme, jsOrTs, projectId, projectApiToken } = args;
+
+  // Delete existing pages
+  deleteGlob(path.join(projectPath, "pages", "*.*"));
+
+  if (scheme === "loader") {
+    // ./plasmic-init.ts
+    await fs.writeFile(
+      path.join(projectPath, `plasmic-init.${jsOrTs}`),
+      makePlasmicInit_pages_loader(projectId, ensure(projectApiToken))
+    );
+
+    // ./pages/plasmic-host.tsx
+    await fs.writeFile(
+      path.join(projectPath, "pages", `plasmic-host.${jsOrTs}x`),
+      makePlasmicHostPage_pages_loader()
+    );
+
+    // ./pages/[[...catchall]].tsx
+    await fs.writeFile(
+      path.join(projectPath, "pages", `[[...catchall]].${jsOrTs}x`),
+      makeCatchallPage_pages_loader(jsOrTs)
+    );
+  } else {
+    // ./pages/_app.tsx
+    await fs.writeFile(
+      path.join(projectPath, "pages", `_app.${jsOrTs}x`),
+      makeCustomApp_pages_codegen(jsOrTs)
+    );
+
+    // ./pages/plasmic-host.tsx
+    await fs.writeFile(
+      path.join(projectPath, "pages", `plasmic-host.${jsOrTs}x`),
+      makePlasmicHostPage_pages_codegen()
+    );
+
+    // This should generate
+    // ./plasmic.json
+    // ./pages/index.tsx
+    // ./components/plasmic/**
+    await runCodegenSync({
+      projectId,
+      projectApiToken,
+      projectPath,
+    });
+
+    // This should overwrite
+    // ./pages/index.tsx
+    await overwriteIndex(projectPath, "nextjs", scheme);
+  }
+}

package/src/nextjs/templates/app-loader/catchall-page.ts

@@ -0,0 +1,71 @@
+import { ifTs } from "../../../utils/file-utils";
+import { JsOrTs } from "../../../utils/types";
+
+export function makeCatchallPage_app_loader(jsOrTs: JsOrTs): string {
+  return `import { PlasmicComponent } from "@plasmicapp/loader-nextjs";
+import { notFound } from "next/navigation";
+import { PLASMIC } from "plasmic-init";
+import { ClientPlasmicRootProvider } from "plasmic-init-client";
+
+// Use revalidate if you want incremental static regeneration
+export const revalidate = 60;
+
+export default async function PlasmicLoaderPage({
+  params,
+  searchParams,
+}${ifTs(
+    jsOrTs,
+    `: {
+  params?: { catchall: string[] | undefined };
+  searchParams?: Record<string, string | string[]>;
+}`
+  )}) {
+  const plasmicComponentData = await fetchPlasmicComponentData(params?.catchall);
+  if (!plasmicComponentData) {
+    notFound();
+  }
+
+  const { prefetchedData } = plasmicComponentData;
+  if (prefetchedData.entryCompMetas.length === 0) {
+    notFound();
+  }
+
+  const pageMeta = prefetchedData.entryCompMetas[0];
+  return (
+    <ClientPlasmicRootProvider
+      prefetchedData={prefetchedData}
+      pageParams={pageMeta.params}
+      pageQuery={searchParams}
+    >
+      <PlasmicComponent
+        component={pageMeta.displayName}
+      />
+    </ClientPlasmicRootProvider>
+  );
+}
+
+async function fetchPlasmicComponentData(catchall${ifTs(
+    jsOrTs,
+    ": string[] | undefined"
+  )}) {
+  const plasmicPath = "/" + (catchall ? catchall.join("/") : "");
+  const prefetchedData = await PLASMIC.maybeFetchComponentData(plasmicPath);
+  if (!prefetchedData) {
+    notFound();
+  }
+
+  return { prefetchedData };
+}
+
+export async function generateStaticParams() {
+  const pageModules = await PLASMIC.fetchPages();
+  return pageModules.map((mod) => {
+    const catchall =
+      mod.path === "/" ? undefined : mod.path.substring(1).split("/");
+    return {
+      catchall,
+    };
+  });
+}
+`;
+}

package/src/nextjs/templates/app-loader/plasmic-host.ts

@@ -0,0 +1,9 @@
+export function makePlasmicHostPage_app_loader(): string {
+  return `import { PlasmicCanvasHost } from "@plasmicapp/loader-nextjs";
+import "plasmic-init-client";
+
+export default function PlasmicHost() {
+  return <PlasmicCanvasHost />;
+}
+`;
+}

package/src/nextjs/templates/app-loader/plasmic-init-client.ts

@@ -0,0 +1,74 @@
+import { ifTs } from "../../../utils/file-utils";
+import { JsOrTs } from "../../../utils/types";
+
+export function makePlasmicInitClient_app_loader(jsOrTs: JsOrTs): string {
+  return `"use client";
+
+import { PlasmicRootProvider } from "@plasmicapp/loader-nextjs";
+import { PLASMIC } from "plasmic-init";
+
+// You can register any code components that you want to use here; see
+// https://docs.plasmic.app/learn/code-components-ref/
+// And configure your Plasmic project to use the host url pointing at
+// the /plasmic-host page of your nextjs app (for example,
+// http://localhost:3000/plasmic-host).  See
+// https://docs.plasmic.app/learn/app-hosting/#set-a-plasmic-project-to-use-your-app-host
+
+// PLASMIC.registerComponent(...);
+
+/**
+ * ClientPlasmicRootProvider is a Client Component that passes in the loader for you.
+ *
+ * Why? Props passed from Server to Client Components must be serializable.
+ * https://beta.nextjs.org/docs/rendering/server-and-client-components#passing-props-from-server-to-client-components-serialization
+ * However, PlasmicRootProvider requires a loader, but the loader is NOT serializable.
+ *
+ * In a Server Component like app/<your-path>/path.tsx, rendering the following would not work:
+ *
+ * \`\`\`tsx
+ * import { PLASMIC } from "plasmic-init";
+ * import { PlasmicRootProvider } from "plasmicapp/loader-nextjs";
+ * export default function MyPage() {
+ *   const prefetchedData = await PLASMIC.fetchComponentData("YourPage");
+ *   return (
+ *     <PlasmicRootProvider
+ *       loader={PLASMIC} // ERROR: loader is not serializable
+ *       prefetchedData={prefetchedData}
+ *     >
+ *       {yourContent()}
+ *     </PlasmicRootProvider>;
+ *   );
+ * }
+ * \`\`\`
+ *
+ * Therefore, we define ClientPlasmicRootProvider as a Client Component (this file is marked "use client").
+ * ClientPlasmicRootProvider wraps the PlasmicRootProvider and passes in the loader for you,
+ * while allowing your Server Component to pass in prefetched data and other serializable props:
+ *
+ * \`\`\`tsx
+ * import { PLASMIC } from "plasmic-init";
+ * import { ClientPlasmicRootProvider } from "plasmic-init-client"; // changed
+ * export default function MyPage() {
+ *   const prefetchedData = await PLASMIC.fetchComponentData("YourPage");
+ *   return (
+ *     <ClientPlasmicRootProvider // don't pass in loader
+ *       prefetchedData={prefetchedData}
+ *     >
+ *       {yourContent()}
+ *     </ClientPlasmicRootProvider>;
+ *   );
+ * }
+ * \`\`\`
+ */
+export function ClientPlasmicRootProvider(
+  props${ifTs(
+    jsOrTs,
+    ': Omit<React.ComponentProps<typeof PlasmicRootProvider>, "loader">'
+  )}
+) {
+  return (
+    <PlasmicRootProvider loader={PLASMIC} {...props}></PlasmicRootProvider>
+  );
+}
+`;
+}