create-plasmic-app 0.0.36 → 0.0.39

package/src/strategies/nextjs.ts

@@ -1,7 +1,16 @@
+import { promises as fs } from "fs";
 import path from "path";
+import {
+  makeNextjsCatchallPage,
+  makeNextjsHostPage,
+  makeNextjsInitPage,
+  wrapAppRootForCodegen,
+} from "../templates/nextjs";
 import { spawnOrFail } from "../utils/cmd-utils";
-import { deleteGlob, writeDefaultNextjsConfig } 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 nextjsStrategy: CPAStrategy = {
@@ -16,35 +25,88 @@ const nextjsStrategy: CPAStrategy = {
     // See where we `touch tsconfig.json` later on
     await spawnOrFail(`${createCommand}${templateArg}`);
   },
-  configLoader: async (args) => {
-    const { projectId, projectPath, projectApiToken, useTypescript } = args;
-
-    const installResult = await installUpgrade("@plasmicapp/loader-nextjs", {
-      workingDir: projectPath,
-    });
-
-    if (!installResult) {
-      throw new Error("Failed to install the Plasmic dependency");
+  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 } = args;
 
-    await writeDefaultNextjsConfig(
-      projectPath,
-      projectId,
-      true,
-      projectApiToken,
-      useTypescript
-    );
+    if (scheme === "codegen") {
+      const nextjsConfigFile = path.join(projectPath, "next.config.js");
+      await fs.writeFile(
+        nextjsConfigFile,
+        `
+module.exports = {
+  eslint: {
+    ignoreDuringBuilds: true,
+  },
+  trailingSlash: true,
+  // Your NextJS config.
+};
+    `
+      );
+    }
   },
-  overwriteFiles: async (args) => {
+  generateFiles: async (args) => {
     // this is supposed to be called for loader case, so we are supposed to remove
     // all the files from pages/ since we have inserted a optional catch all
-    const { projectPath } = args;
+    const {
+      projectPath,
+      scheme,
+      useTypescript,
+      projectId,
+      projectApiToken,
+    } = args;
 
+    // Always start fresh
     const pagesPath = path.join(projectPath, "pages");
-    deleteGlob(path.join(pagesPath, `*.*`), [
-      "[[...catchall]]",
-      "plasmic-host",
-    ]);
+    deleteGlob(path.join(pagesPath, `*.*`));
+
+    const hostPage = path.join(
+      pagesPath,
+      `plasmic-host.${useTypescript ? "tsx" : "jsx"}`
+    );
+    await fs.writeFile(hostPage, makeNextjsHostPage(scheme));
+
+    if (scheme === "loader") {
+      const initFile = path.join(
+        projectPath,
+        `plasmic-init.${useTypescript ? "ts" : "js"}`
+      );
+      await fs.writeFile(
+        initFile,
+        makeNextjsInitPage(projectId, ensure(projectApiToken))
+      );
+
+      // Write catch-all page for loader
+      const loaderPage = path.join(
+        pagesPath,
+        `[[...catchall]].${useTypescript ? "tsx" : "jsx"}`
+      );
+      await fs.writeFile(
+        loaderPage,
+        makeNextjsCatchallPage(useTypescript ? "ts" : "js")
+      );
+    } else {
+      await runCodegenSync({
+        projectId,
+        projectApiToken,
+        projectPath,
+      });
+
+      // Overwrite the index file
+      await overwriteIndex(projectPath, "nextjs", scheme);
+
+      // Overwrite the wrapper files to wrap PlasmicRootProvider
+      const appFilePath = path.join(projectPath, "pages", `_app.js`);
+      await fs.writeFile(appFilePath, wrapAppRootForCodegen());
+    }
   },
   build: async (args) => {
     const { npmRunCmd, projectPath } = args;

package/src/strategies/react.ts

@@ -1,5 +1,7 @@
 import { spawnOrFail } from "../utils/cmd-utils";
+import { overwriteIndex } from "../utils/file-utils";
 import { installUpgrade } from "../utils/npm-utils";
+import { installCodegenDeps, runCodegenSync } from "./common";
 import { CPAStrategy } from "./types";
 
 const reactStrategy: CPAStrategy = {
@@ -15,19 +17,36 @@ const reactStrategy: CPAStrategy = {
     const templateArg = template ? ` --template ${template}` : "";
     await spawnOrFail(`${createCommand}${templateArg}`);
   },
-  configLoader: async (args) => {
-    // this is unreachable for now, but should we have it ??
-    const { projectPath } = args;
-
-    const installResult = await installUpgrade("@plasmicapp/loader-react", {
-      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-react", {
+        workingDir: projectPath,
+      });
+    } else {
+      return await installCodegenDeps({ projectPath });
     }
   },
-  overwriteFiles: async () => {
+  overwriteConfig: async (args) => {
+    // No config to overwrite
+  },
+  generateFiles: async ({
+    scheme,
+    projectApiToken,
+    projectId,
+    projectPath,
+  }) => {
+    if (scheme === "loader") {
+      // Nothing to do
+    } else {
+      await runCodegenSync({
+        projectId,
+        projectApiToken,
+        projectPath,
+      });
+
+      // Overwrite the index file
+      await overwriteIndex(projectPath, "react", scheme);
+    }
     return;
   },
   build: async (args) => {

package/src/strategies/types.ts

@@ -1,3 +1,5 @@
+import { CodeScheme } from "..";
+
 interface CreateArgs {
   projectPath: string;
   template?: string;
@@ -7,13 +9,17 @@ interface CreateArgs {
 interface ConfigArgs {
   projectId: string;
   projectPath: string;
-  projectApiToken: string;
   useTypescript: boolean;
+  scheme: CodeScheme;
+  projectApiToken: string | undefined;
 }
 
-interface OverwriteFilesArgs {
+interface GenerateFilesArgs {
   projectPath: string;
   useTypescript: boolean;
+  scheme: CodeScheme;
+  projectId: string;
+  projectApiToken: string | undefined;
 }
 
 interface BuildArgs {
@@ -21,9 +27,15 @@ interface BuildArgs {
   npmRunCmd: string;
 }
 
+interface InstallArgs {
+  scheme: CodeScheme;
+  projectPath: string;
+}
+
 export interface CPAStrategy {
   create: (args: CreateArgs) => Promise<void>;
-  configLoader: (args: ConfigArgs) => Promise<void>;
-  overwriteFiles: (args: OverwriteFilesArgs) => Promise<void>;
+  installDeps: (args: InstallArgs) => Promise<boolean>;
+  overwriteConfig: (args: ConfigArgs) => Promise<void>;
+  generateFiles: (args: GenerateFilesArgs) => Promise<void>;
   build: (args: BuildArgs) => Promise<void>;
 }

package/src/templates/gatsby.ts

@@ -1,3 +1,4 @@
+import { CodeScheme } from "..";
 import { ifTs } from "../utils/file-utils";
 
 export const makeGatsbyDefaultPage = (format: "ts" | "js"): string => {
@@ -89,16 +90,16 @@ export const GATSBY_PLUGIN_CONFIG = (
 },
 `;
 
-export const makeGatsbyHostPage = (format: "ts" | "js"): string => {
-  const ts = format === "ts";
-  return `
+export const makeGatsbyHostPage = (opts: {
+  useTypescript: boolean;
+  scheme: CodeScheme;
+}): string => {
+  const { useTypescript, scheme } = opts;
+  if (scheme === "loader") {
+    return `
 import * as React from "react"
 import {
-  PlasmicCanvasHost,${ifTs(
-    ts,
-    `
-  InitOptions,`
-  )}
+  PlasmicCanvasHost${ifTs(useTypescript, `, InitOptions`)}
 } from "@plasmicapp/loader-gatsby"
 import { graphql } from "gatsby"
 import { initPlasmicLoaderWithRegistrations } from "../plasmic-init"
@@ -110,7 +111,7 @@ export const query = graphql\`
 \`
 
 ${ifTs(
-  ts,
+  useTypescript,
   `interface HostProps {
   data: {
     plasmicOptions: InitOptions;
@@ -118,12 +119,33 @@ ${ifTs(
 }
 `
 )}
-export default function Host({ data }${ifTs(ts, ": HostProps")}) {
+export default function Host({ data }${ifTs(useTypescript, ": HostProps")}) {
   const { plasmicOptions } = data
   initPlasmicLoaderWithRegistrations(plasmicOptions)
   return <PlasmicCanvasHost />
 }
-`.trim();
+    `.trim();
+  } else {
+    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
+// 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 (
+    <PlasmicCanvasHost />
+  );
+}
+    `;
+  }
 };
 
 export const GATSBY_SSR_CONFIG = `
@@ -145,6 +167,27 @@ const HeadComponents = [
     key="plasmic-preamble"
     src="https://static1.plasmic.app/preamble.js"
   />,
+  <script
+    key="plasmic-hmr"
+    type="text/javascript"
+    dangerouslySetInnerHTML={{
+      __html: \`
+        if (typeof window !== "undefined" && /\\\\/plasmic-host\\\\/?$/.test(window.location.pathname)) {
+          const RealEventSource = window.EventSource;
+          window.EventSource = function(url, config) {
+            if (/[^a-zA-Z]hmr($|[^a-zA-Z])/.test(url)) {
+              console.warn("Plasmic: disabled EventSource request for", url);
+              return {
+                onerror() {}, onmessage() {}, onopen() {}, close() {}
+              };
+            } else {
+              return new RealEventSource(url, config);
+            }
+          }
+        }
+      \`,
+    }}
+  />
 ]
 
 const isProduction = process.env.NODE_ENV === "production"
@@ -191,3 +234,18 @@ export function initPlasmicLoaderWithRegistrations(plasmicOptions${ifTs(
 }
 `.trim();
 };
+
+export function wrapAppRootForCodegen() {
+  return `
+import React from "react";
+import { PlasmicRootProvider } from "@plasmicapp/react-web";
+
+export const wrapRootElement = ({ element }) => {
+  return (
+    <PlasmicRootProvider>
+      {element}
+    </PlasmicRootProvider>
+  );
+}
+  `;
+}

package/src/templates/nextjs.ts

@@ -1,3 +1,4 @@
+import { CodeScheme } from "..";
 import { ifTs } from "../utils/file-utils";
 
 export const makeNextjsInitPage = (
@@ -103,14 +104,19 @@ export const getStaticPaths${ifTs(ts, `: GetStaticPaths`)} = async () => {
   `.trim();
 }
 
-export function makeNextjsHostPage(): string {
-  return `
+export function makeNextjsHostPage(scheme: CodeScheme): string {
+  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
@@ -121,5 +127,49 @@ 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>
+  );
+}
+    `;
+  }
+}
+
+export 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
+  `;
 }

package/src/utils/file-utils.ts

@@ -4,11 +4,6 @@ import L from "lodash";
 import * as path from "upath";
 import { PlatformType } from "../lib";
 import { GATSBY_404 } from "../templates/gatsby";
-import {
-  makeNextjsCatchallPage,
-  makeNextjsHostPage,
-  makeNextjsInitPage,
-} from "../templates/nextjs";
 import { README } from "../templates/readme";
 import { WELCOME_PAGE } from "../templates/welcomePage";
 import { ensure, ensureString } from "./lang-utils";
@@ -45,67 +40,6 @@ export function stripExtension(
   return filename.substring(0, filename.lastIndexOf(ext));
 }
 
-/**
- * create-next-app doesn't create next.config.js,
- * so it's safe to just write the file
- * @param absPath
- * @param projectId
- * @returns
- */
-export async function writeDefaultNextjsConfig(
-  projectDir: string,
-  projectId: string,
-  loader: boolean,
-  projectApiToken?: string,
-  useTypescript?: boolean
-): Promise<void> {
-  const nextjsConfigFile = path.join(projectDir, "next.config.js");
-
-  if (!loader) {
-    await fs.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"}`
-    );
-    await fs.writeFile(
-      initFile,
-      makeNextjsInitPage(projectId, projectApiToken)
-    );
-
-    const pagesFolder = path.join(projectDir, "pages");
-    const loaderPage = path.join(
-      pagesFolder,
-      `[[...catchall]].${useTypescript ? "tsx" : "jsx"}`
-    );
-    await fs.writeFile(
-      loaderPage,
-      makeNextjsCatchallPage(useTypescript ? "ts" : "js")
-    );
-
-    const hostPage = path.join(
-      pagesFolder,
-      `plasmic-host.${useTypescript ? "tsx" : "jsx"}`
-    );
-
-    await fs.writeFile(hostPage, makeNextjsHostPage());
-  }
-}
-
 export async function writePlasmicLoaderJson(
   projectDir: string,
   projectId: string,
@@ -336,55 +270,6 @@ export async function ensureTsconfig(projectPath: string): Promise<void> {
   }
 }
 
-export async function wrapAppRoot(
-  projectPath: string,
-  platform: string,
-  scheme: string
-): Promise<void> {
-  // 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`);
-    await fs.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");
-    await fs.writeFile(browserFilePath, wrapperContent);
-
-    const ssrFilePath = path.join(projectPath, "gatsby-ssr.js");
-    await fs.writeFile(ssrFilePath, wrapperContent);
-  }
-}
-
 export function ifTs(ts: boolean, str: string) {
   return ts ? str : "";
 }