create-plasmic-app 0.0.34 → 0.0.38

package/dist/templates/nextjs.js

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.makeNextjsHostPage = exports.makeNextjsCatchallPage = exports.makeNextjsInitPage = void 0;
+exports.wrapAppRootForCodegen = exports.makeNextjsHostPage = exports.makeNextjsCatchallPage = exports.makeNextjsInitPage = void 0;
 const file_utils_1 = require("../utils/file-utils");
 const makeNextjsInitPage = (projectId, projectApiToken) => `
 import { initPlasmicLoader } from "@plasmicapp/loader-nextjs";
@@ -86,20 +86,27 @@ export const getStaticPaths${file_utils_1.ifTs(ts, `: GetStaticPaths`)} = async
         catchall: mod.path.substring(1).split("/"),
       },
     })),
-    fallback: "blocking"
+
+    // Turn on "fallback: 'blocking'" if you would like new paths created
+    // in Plasmic to be automatically available
+    fallback: false,
   };
 }
   `.trim();
 }
 exports.makeNextjsCatchallPage = makeNextjsCatchallPage;
-function makeNextjsHostPage() {
-    return `
+function makeNextjsHostPage(scheme) {
+    const commonImports = `
 import * as React from 'react';
-import { PlasmicCanvasHost } from '@plasmicapp/loader-nextjs';
 import Script from 'next/script';
+  `.trim();
+    if (scheme === "loader") {
+        return `
+${commonImports}
+import { PlasmicCanvasHost } from '@plasmicapp/loader-nextjs';
 import { PLASMIC } from '../plasmic-init';
 
-export default function Host() {
+export default function PlasmicHost() {
   return PLASMIC && (
     <div>
       <Script
@@ -110,6 +117,51 @@ export default function Host() {
     </div>
   );
 }
-  `.trim();
+    `;
+    }
+    else {
+        return `
+${commonImports}
+import { PlasmicCanvasHost, registerComponent } from '@plasmicapp/host';
+
+// 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
+
+// registerComponent(...)
+
+export default function PlasmicHost() {
+  return (
+    <div>
+      <Script
+        src="https://static1.plasmic.app/preamble.js"
+        strategy="beforeInteractive"
+      />
+      <PlasmicCanvasHost />
+    </div>
+  );
+}
+    `;
+    }
 }
 exports.makeNextjsHostPage = makeNextjsHostPage;
+function wrapAppRootForCodegen() {
+    return `
+import '../styles/globals.css'
+import { PlasmicRootProvider } from "@plasmicapp/react-web";
+
+function MyApp({ Component, pageProps }) {
+  return (
+    <PlasmicRootProvider>
+      <Component {...pageProps} />
+    </PlasmicRootProvider>
+  );
+}
+
+export default MyApp
+  `;
+}
+exports.wrapAppRootForCodegen = wrapAppRootForCodegen;

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

@@ -6,14 +6,6 @@ import { PlatformType } from "../lib";
  */
 export declare function deleteGlob(searchPattern: string, skipPatterns?: string[]): void;
 export declare function stripExtension(filename: string, removeComposedPath?: boolean): string;
-/**
- * create-next-app doesn't create next.config.js,
- * so it's safe to just write the file
- * @param absPath
- * @param projectId
- * @returns
- */
-export declare function writeDefaultNextjsConfig(projectDir: string, projectId: string, loader: boolean, projectApiToken?: string, useTypescript?: boolean): Promise<void>;
 export declare function writePlasmicLoaderJson(projectDir: string, projectId: string, projectApiToken: string): Promise<void>;
 /**
  * - [nextjs|gatsby, loader, '/' page exists] - remove index file
@@ -32,5 +24,4 @@ export declare function overwriteIndex(projectPath: string, platform: string, sc
  */
 export declare function overwriteReadme(projectPath: string, platform: PlatformType, buildCommand: string): Promise<void>;
 export declare function ensureTsconfig(projectPath: string): Promise<void>;
-export declare function wrapAppRoot(projectPath: string, platform: string, scheme: string): Promise<void>;
 export declare function ifTs(ts: boolean, str: string): string;

package/dist/utils/file-utils.js

@@ -31,13 +31,12 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.ifTs = exports.wrapAppRoot = exports.ensureTsconfig = exports.overwriteReadme = exports.overwriteIndex = exports.writePlasmicLoaderJson = exports.writeDefaultNextjsConfig = exports.stripExtension = exports.deleteGlob = void 0;
+exports.ifTs = exports.ensureTsconfig = exports.overwriteReadme = exports.overwriteIndex = exports.writePlasmicLoaderJson = exports.stripExtension = exports.deleteGlob = void 0;
 const fs_1 = require("fs");
 const glob_1 = __importDefault(require("glob"));
 const lodash_1 = __importDefault(require("lodash"));
 const path = __importStar(require("upath"));
 const gatsby_1 = require("../templates/gatsby");
-const nextjs_1 = require("../templates/nextjs");
 const readme_1 = require("../templates/readme");
 const welcomePage_1 = require("../templates/welcomePage");
 const lang_utils_1 = require("./lang-utils");
@@ -64,40 +63,6 @@ function stripExtension(filename, removeComposedPath = false) {
     return filename.substring(0, filename.lastIndexOf(ext));
 }
 exports.stripExtension = stripExtension;
-/**
- * create-next-app doesn't create next.config.js,
- * so it's safe to just write the file
- * @param absPath
- * @param projectId
- * @returns
- */
-function writeDefaultNextjsConfig(projectDir, projectId, loader, projectApiToken, useTypescript) {
-    return __awaiter(this, void 0, void 0, function* () {
-        const nextjsConfigFile = path.join(projectDir, "next.config.js");
-        if (!loader) {
-            yield fs_1.promises.writeFile(nextjsConfigFile, `
-module.exports = {
-  eslint: {
-    ignoreDuringBuilds: true,
-  },
-  trailingSlash: true,
-  // Your NextJS config.
-};
-  `);
-            return;
-        }
-        if (loader && projectApiToken) {
-            const initFile = path.join(projectDir, `plasmic-init.${useTypescript ? "ts" : "js"}`);
-            yield fs_1.promises.writeFile(initFile, nextjs_1.makeNextjsInitPage(projectId, projectApiToken));
-            const pagesFolder = path.join(projectDir, "pages");
-            const loaderPage = path.join(pagesFolder, `[[...catchall]].${useTypescript ? "tsx" : "jsx"}`);
-            yield fs_1.promises.writeFile(loaderPage, nextjs_1.makeNextjsCatchallPage(useTypescript ? "ts" : "js"));
-            const hostPage = path.join(pagesFolder, `plasmic-host.${useTypescript ? "tsx" : "jsx"}`);
-            yield fs_1.promises.writeFile(hostPage, nextjs_1.makeNextjsHostPage());
-        }
-    });
-}
-exports.writeDefaultNextjsConfig = writeDefaultNextjsConfig;
 function writePlasmicLoaderJson(projectDir, projectId, projectApiToken) {
     return __awaiter(this, void 0, void 0, function* () {
         const plasmicLoaderJson = path.join(projectDir, "plasmic-loader.json");
@@ -283,49 +248,6 @@ function ensureTsconfig(projectPath) {
     });
 }
 exports.ensureTsconfig = ensureTsconfig;
-function wrapAppRoot(projectPath, platform, scheme) {
-    return __awaiter(this, void 0, void 0, function* () {
-        // with create-plasmic-app v2, isLoader=false
-        const isLoader = scheme === "loader";
-        const importPkg = isLoader ? `@plasmicapp/loader` : "@plasmicapp/react-web";
-        if (platform === "nextjs") {
-            const appFilePath = path.join(projectPath, "pages", `_app.js`);
-            yield fs_1.promises.writeFile(appFilePath, `
-import '../styles/globals.css'
-import { PlasmicRootProvider } from "${importPkg}"
-
-function MyApp({ Component, pageProps }) {
-  return (
-    <PlasmicRootProvider>
-      <Component {...pageProps} />
-    </PlasmicRootProvider>
-  )
-}
-
-export default MyApp
-    `.trim());
-        }
-        else if (platform === "gatsby") {
-            const wrapperContent = `
-import React from "react";
-import { PlasmicRootProvider } from "${importPkg}";
-
-export const wrapRootElement = ({ element }) => {
-  return (
-    <PlasmicRootProvider>
-      {element}
-    </PlasmicRootProvider>
-  );
-}
-    `.trim();
-            const browserFilePath = path.join(projectPath, "gatsby-browser.js");
-            yield fs_1.promises.writeFile(browserFilePath, wrapperContent);
-            const ssrFilePath = path.join(projectPath, "gatsby-ssr.js");
-            yield fs_1.promises.writeFile(ssrFilePath, wrapperContent);
-        }
-    });
-}
-exports.wrapAppRoot = wrapAppRoot;
 function ifTs(ts, str) {
     return ts ? str : "";
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "create-plasmic-app",
-  "version": "0.0.34",
+  "version": "0.0.38",
   "description": "Create Plasmic-powered React apps",
   "main": "./dist/lib.js",
   "types": "./dist/lib.d.ts",

package/src/index.ts

@@ -1,7 +1,6 @@
 #!/usr/bin/env node
 import { setMetadataEnv } from "@plasmicapp/cli";
 import * as Sentry from "@sentry/node";
-import chalk from "chalk";
 import * as fs from "fs";
 import inquirer, { DistinctQuestion } from "inquirer";
 import * as path from "upath";
@@ -14,6 +13,8 @@ if (process.env.CPA_DEBUG_CHDIR) {
   process.chdir(process.env.CPA_DEBUG_CHDIR);
 }
 
+export type CodeScheme = "codegen" | "loader";
+
 // Check for updates
 const createPlasmicAppVersion = updateNotify();
 
@@ -155,7 +156,7 @@ async function run(): Promise<void> {
 
   // Scheme to use for Plasmic integration
   // - loader only available for gatsby/next.js
-  const scheme: "codegen" | "loader" =
+  const scheme: CodeScheme =
     platform === "nextjs" || platform === "gatsby"
       ? await maybePrompt({
           name: "scheme",
@@ -179,16 +180,14 @@ async function run(): Promise<void> {
 
   // Get the projectId
   console.log();
-  console.log(chalk.green.bold("Go to this URL and **clone** the project:"));
-  console.log("https://studio.plasmic.app/starters/simple-light");
-  console.log();
-  console.log("  Note the project ID in the URL redirect");
-  console.log("  (e.g. https://studio.plasmic.app/projects/PROJECT_ID)");
   let projectId: string | undefined;
   while (!projectId) {
     const rawProjectId = await maybePrompt({
       name: "projectId",
-      message: "What is the project ID of your project?",
+      message: `What is the URL of your project?
+(If you don't have a project yet, create one by going to
+https://studio.plasmic.app/starters/simple-light):
+`,
     });
     projectId = rawProjectId
       .replace("https://studio.plasmic.app/projects/", "")

package/src/lib.ts

@@ -3,15 +3,8 @@ import chalk from "chalk";
 import * as path from "upath";
 import validateProjectName from "validate-npm-package-name";
 import { getCPAStrategy } from "./strategies";
-import { spawnOrFail } from "./utils/cmd-utils";
-import {
-  ensureTsconfig,
-  overwriteIndex,
-  overwriteReadme,
-  wrapAppRoot,
-  writeDefaultNextjsConfig,
-} from "./utils/file-utils";
-import { detectPackageManager, installUpgrade } from "./utils/npm-utils";
+import { ensureTsconfig, overwriteReadme } from "./utils/file-utils";
+import { detectPackageManager } from "./utils/npm-utils";
 
 export type PlatformType = "nextjs" | "gatsby" | "react";
 export type SchemeType = "codegen" | "loader";
@@ -91,71 +84,48 @@ export async function create(args: CreatePlasmicAppArgs): Promise<void> {
     await ensureTsconfig(resolvedProjectPath);
   }
 
-  // Install dependency
-  banner("INSTALLING THE PLASMIC DEPENDENCY");
-  if (scheme === "codegen") {
-    const installResult = await installUpgrade("@plasmicapp/cli", {
-      workingDir: resolvedProjectPath,
-    });
-    if (!installResult) {
-      throw new Error("Failed to install the Plasmic dependency");
-    }
-  }
-
-  // Trigger a sync
-  const pkgMgr = detectPackageManager(resolvedProjectPath);
-  const npmRunCmd = pkgMgr === "yarn" ? "yarn" : "npm run";
-
-  if (scheme === "codegen") {
-    banner("SYNCING PLASMIC COMPONENTS");
-
-    const project = projectApiToken
-      ? `${projectId}:${projectApiToken}`
-      : projectId;
-
-    if (platform === "nextjs") {
-      await writeDefaultNextjsConfig(resolvedProjectPath, projectId, false);
-    }
-
-    await spawnOrFail(
-      `npx -p @plasmicapp/cli plasmic sync --yes -p ${project}`,
-      resolvedProjectPath
-    );
-  } else if (scheme === "loader") {
-    if (!projectApiToken) {
-      projectApiToken = await getProjectApiToken(projectId);
-    }
+  // Make sure we have an api token for loader
+  if (scheme === "loader" && !projectApiToken) {
+    projectApiToken = await getProjectApiToken(projectId);
     if (!projectApiToken) {
       throw new Error(`Failed to get projectApiToken for ${projectId}`);
     }
-
-    await cpaStrategy.configLoader({
-      projectPath: resolvedProjectPath,
-      projectId,
-      projectApiToken,
-      useTypescript,
-    });
   }
 
-  if (scheme === "loader") {
-    await cpaStrategy.overwriteFiles({
-      projectPath: resolvedProjectPath,
-      useTypescript,
-    });
-  } else if (scheme === "codegen") {
-    // The loader files to be overwritten are handled by cpaStrategy
-    // but for codegen we still have to run it
-
-    // Overwrite the index file
-    await overwriteIndex(resolvedProjectPath, platform, scheme);
+  // Install dependency
+  banner("INSTALLING THE PLASMIC DEPENDENCY");
+  const installResult = await cpaStrategy.installDeps({
+    scheme,
+    projectPath: resolvedProjectPath,
+  });
 
-    // Overwrite the wrapper files to wrap PlasmicRootProvider
-    await wrapAppRoot(resolvedProjectPath, platform, scheme);
+  if (!installResult) {
+    throw new Error("Failed to install the Plasmic dependency");
   }
 
+  // Configure
+  await cpaStrategy.overwriteConfig({
+    projectId,
+    projectPath: resolvedProjectPath,
+    projectApiToken,
+    useTypescript,
+    scheme,
+  });
+
+  // Generate files
+  await cpaStrategy.generateFiles({
+    projectPath: resolvedProjectPath,
+    useTypescript,
+    scheme,
+    projectId,
+    projectApiToken,
+  });
+
   /**
    * INSTRUCT USER ON NEXT STEPS
    */
+  const pkgMgr = detectPackageManager(resolvedProjectPath);
+  const npmRunCmd = pkgMgr === "yarn" ? "yarn" : "npm run";
   const command =
     platform === "nextjs"
       ? `${npmRunCmd} dev`

package/src/strategies/common.ts

@@ -0,0 +1,30 @@
+import { banner } from "../lib";
+import { spawnOrFail } from "../utils/cmd-utils";
+import { installUpgrade } from "../utils/npm-utils";
+
+export async function installCodegenDeps(opts: { projectPath: string }) {
+  const { projectPath } = opts;
+  return (
+    (await installUpgrade("@plasmicapp/cli", { workingDir: projectPath })) &&
+    (await installUpgrade("@plasmicapp/host", { workingDir: projectPath }))
+  );
+}
+
+export async function runCodegenSync(opts: {
+  projectId: string;
+  projectApiToken: string | undefined;
+  projectPath: string;
+}) {
+  const { projectId, projectApiToken, projectPath } = opts;
+
+  banner("SYNCING PLASMIC COMPONENTS");
+
+  const project = projectApiToken
+    ? `${projectId}:${projectApiToken}`
+    : projectId;
+
+  await spawnOrFail(
+    `npx -p @plasmicapp/cli plasmic sync --yes -p ${project}`,
+    projectPath
+  );
+}

package/src/strategies/gatsby.ts

@@ -8,10 +8,13 @@ import {
   makeGatsbyDefaultPage,
   makeGatsbyHostPage,
   makeGatsbyPlasmicInit,
+  wrapAppRootForCodegen,
 } from "../templates/gatsby";
 import { spawnOrFail } from "../utils/cmd-utils";
-import { deleteGlob } from "../utils/file-utils";
+import { deleteGlob, overwriteIndex } from "../utils/file-utils";
+import { ensure } from "../utils/lang-utils";
 import { installUpgrade } from "../utils/npm-utils";
+import { installCodegenDeps, runCodegenSync } from "./common";
 import { CPAStrategy } from "./types";
 
 const gatsbyStrategy: CPAStrategy = {
@@ -22,41 +25,56 @@ const gatsbyStrategy: CPAStrategy = {
 
     await spawnOrFail(`${createCommand}${templateArg}`);
   },
-  configLoader: async (args) => {
-    const { projectId, projectPath, projectApiToken, useTypescript } = args;
-
-    const installResult = await installUpgrade("@plasmicapp/loader-gatsby", {
-      workingDir: projectPath,
-    });
-
-    if (!installResult) {
-      throw new Error("Failed to install the Plasmic dependency");
+  installDeps: async ({ projectPath, scheme }) => {
+    if (scheme === "loader") {
+      return await installUpgrade("@plasmicapp/loader-gatsby", {
+        workingDir: projectPath,
+      });
+    } else {
+      return await installCodegenDeps({ projectPath });
     }
+  },
+  overwriteConfig: async (args) => {
+    const {
+      projectId,
+      projectPath,
+      projectApiToken,
+      useTypescript,
+      scheme,
+    } = args;
 
-    // create-gatsby will create a default gatsby-config.js that we need to modify
-    const gatsbyConfigFile = path.join(projectPath, "gatsby-config.js");
-    const rl = readline.createInterface({
-      input: createReadStream(gatsbyConfigFile),
-      crlfDelay: Infinity,
-    });
-    let result = "";
-    for await (const line of rl) {
-      result += line + "\n";
-      // Prepend PlasmicLoader to list of plugins
-      if (line.includes("plugins:")) {
-        result += GATSBY_PLUGIN_CONFIG(
-          projectId,
-          projectApiToken,
-          useTypescript
-        );
+    if (scheme === "loader") {
+      // create-gatsby will create a default gatsby-config.js that we need to modify
+      const gatsbyConfigFile = path.join(projectPath, "gatsby-config.js");
+      const rl = readline.createInterface({
+        input: createReadStream(gatsbyConfigFile),
+        crlfDelay: Infinity,
+      });
+      let result = "";
+      for await (const line of rl) {
+        result += line + "\n";
+        // Prepend PlasmicLoader to list of plugins
+        if (line.includes("plugins:")) {
+          result += GATSBY_PLUGIN_CONFIG(
+            projectId,
+            ensure(projectApiToken),
+            useTypescript
+          );
+        }
       }
+      await fs.writeFile(gatsbyConfigFile, result);
     }
-    await fs.writeFile(gatsbyConfigFile, result);
   },
-  overwriteFiles: async (args) => {
+  generateFiles: async (args) => {
     // in gatsby we can delete all existing pages/components, since all pages are going
     // to be handled by templates/defaultPlasmicPage
-    const { projectPath, useTypescript } = args;
+    const {
+      projectId,
+      projectApiToken,
+      projectPath,
+      useTypescript,
+      scheme,
+    } = args;
 
     const extension = useTypescript ? "ts" : "js";
 
@@ -65,15 +83,13 @@ const gatsbyStrategy: CPAStrategy = {
     // Create a very basic 404 page - `gatsby build` fails without it.
     await fs.writeFile(path.join(projectPath, `src/pages/404.js`), GATSBY_404);
 
-    await fs.writeFile(
-      path.join(projectPath, `src/plasmic-init.${extension}`),
-      makeGatsbyPlasmicInit(extension)
-    );
-
     // Add plasmic-host page
     await fs.writeFile(
       path.join(projectPath, `src/pages/plasmic-host.${extension}x`),
-      makeGatsbyHostPage(extension)
+      makeGatsbyHostPage({
+        useTypescript,
+        scheme,
+      })
     );
 
     // Start with an empty gatsby-node.js
@@ -85,16 +101,39 @@ const gatsbyStrategy: CPAStrategy = {
       GATSBY_SSR_CONFIG
     );
 
-    const templatesFolder = path.join(projectPath, "src/templates");
-    const defaultPagePath = path.join(
-      templatesFolder,
-      `defaultPlasmicPage.${extension}x`
-    );
+    if (scheme === "loader") {
+      await fs.writeFile(
+        path.join(projectPath, `src/plasmic-init.${extension}`),
+        makeGatsbyPlasmicInit(extension)
+      );
+
+      const templatesFolder = path.join(projectPath, "src/templates");
+      if (!existsSync(templatesFolder)) {
+        await fs.mkdir(templatesFolder);
+      }
+      const defaultPagePath = path.join(
+        templatesFolder,
+        `defaultPlasmicPage.${extension}x`
+      );
+      await fs.writeFile(defaultPagePath, makeGatsbyDefaultPage(extension));
+    } else {
+      await runCodegenSync({
+        projectId,
+        projectApiToken,
+        projectPath,
+      });
+
+      // Overwrite the index file
+      await overwriteIndex(projectPath, "gatsby", scheme);
+
+      // Overwrite the wrapper files to wrap PlasmicRootProvider
+      const wrapperContent = wrapAppRootForCodegen();
+      const browserFilePath = path.join(projectPath, "gatsby-browser.js");
+      await fs.writeFile(browserFilePath, wrapperContent);
 
-    if (!existsSync(templatesFolder)) {
-      await fs.mkdir(templatesFolder);
+      const ssrFilePath = path.join(projectPath, "gatsby-ssr.js");
+      await fs.writeFile(ssrFilePath, wrapperContent);
     }
-    await fs.writeFile(defaultPagePath, makeGatsbyDefaultPage(extension));
   },
   build: async (args) => {
     const { npmRunCmd, projectPath } = args;