create-plasmic-app 0.0.33 → 0.0.37

package/src/templates/nextjs.ts

@@ -1,3 +1,6 @@
+import { CodeScheme } from "..";
+import { ifTs } from "../utils/file-utils";
+
 export const makeNextjsInitPage = (
   projectId: string,
   projectApiToken: string
@@ -30,10 +33,6 @@ export const PLASMIC = initPlasmicLoader({
 // PLASMIC.registerComponent(...);
 `.trim();
 
-function ifTs(ts: boolean, str: string) {
-  return ts ? str : "";
-}
-
 export function makeNextjsCatchallPage(format: "ts" | "js"): string {
   const ts = format === "ts";
   return `
@@ -96,20 +95,28 @@ export const getStaticPaths${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();
 }
 
-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
@@ -120,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,51 +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 : "";
 }