create-plasmic-app 0.0.30 → 0.0.34

package/dist/lib.js

@@ -85,8 +85,10 @@ function create(args) {
             useTypescript,
             template,
         });
-        // Ensure that
-        if (useTypescript) {
+        // Ensure that we have a empty tsconfig and @types packages
+        // Gatsby by default supports typescript handling internally
+        // tsconfig so we don't have to ensure it
+        if (useTypescript && platform !== "gatsby") {
             yield file_utils_1.ensureTsconfig(resolvedProjectPath);
         }
         // Install dependency
@@ -127,7 +129,10 @@ function create(args) {
             });
         }
         if (scheme === "loader") {
-            yield cpaStrategy.overwriteFiles({ projectPath: resolvedProjectPath });
+            yield cpaStrategy.overwriteFiles({
+                projectPath: resolvedProjectPath,
+                useTypescript,
+            });
         }
         else if (scheme === "codegen") {
             // The loader files to be overwritten are handled by cpaStrategy

package/dist/strategies/gatsby.js

@@ -1,4 +1,23 @@
 "use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
 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) {
@@ -8,12 +27,20 @@ var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, ge
         step((generator = generator.apply(thisArg, _arguments || [])).next());
     });
 };
+var __asyncValues = (this && this.__asyncValues) || function (o) {
+    if (!Symbol.asyncIterator) throw new TypeError("Symbol.asyncIterator is not defined.");
+    var m = o[Symbol.asyncIterator], i;
+    return m ? m.call(o) : (o = typeof __values === "function" ? __values(o) : o[Symbol.iterator](), i = {}, verb("next"), verb("throw"), verb("return"), i[Symbol.asyncIterator] = function () { return this; }, i);
+    function verb(n) { i[n] = o[n] && function (v) { return new Promise(function (resolve, reject) { v = o[n](v), settle(resolve, reject, v.done, v.value); }); }; }
+    function settle(resolve, reject, d, v) { Promise.resolve(v).then(function(v) { resolve({ value: v, done: d }); }, reject); }
+};
 var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 const fs_1 = require("fs");
 const path_1 = __importDefault(require("path"));
+const readline = __importStar(require("readline"));
 const gatsby_1 = require("../templates/gatsby");
 const cmd_utils_1 = require("../utils/cmd-utils");
 const file_utils_1 = require("../utils/file-utils");
@@ -23,29 +50,64 @@ const gatsbyStrategy = {
         const { projectPath, template } = args;
         const createCommand = `npx -p gatsby gatsby new ${projectPath}`;
         const templateArg = template ? ` ${template}` : "";
-        // Default Gatsby starter already supports Typescript
-        // See where we `touch tsconfig.json` later on
         yield cmd_utils_1.spawnOrFail(`${createCommand}${templateArg}`);
     }),
     configLoader: (args) => __awaiter(void 0, void 0, void 0, function* () {
-        const { projectId, projectPath, projectApiToken } = args;
+        var e_1, _a;
+        const { projectId, projectPath, projectApiToken, useTypescript } = args;
         const installResult = yield npm_utils_1.installUpgrade("@plasmicapp/loader-gatsby", {
             workingDir: projectPath,
         });
         if (!installResult) {
             throw new Error("Failed to install the Plasmic dependency");
         }
-        yield file_utils_1.modifyDefaultGatsbyConfig(projectPath, projectId, projectApiToken);
+        // create-gatsby will create a default gatsby-config.js that we need to modify
+        const gatsbyConfigFile = path_1.default.join(projectPath, "gatsby-config.js");
+        const rl = readline.createInterface({
+            input: fs_1.createReadStream(gatsbyConfigFile),
+            crlfDelay: Infinity,
+        });
+        let result = "";
+        try {
+            for (var rl_1 = __asyncValues(rl), rl_1_1; rl_1_1 = yield rl_1.next(), !rl_1_1.done;) {
+                const line = rl_1_1.value;
+                result += line + "\n";
+                // Prepend PlasmicLoader to list of plugins
+                if (line.includes("plugins:")) {
+                    result += gatsby_1.GATSBY_PLUGIN_CONFIG(projectId, projectApiToken, useTypescript);
+                }
+            }
+        }
+        catch (e_1_1) { e_1 = { error: e_1_1 }; }
+        finally {
+            try {
+                if (rl_1_1 && !rl_1_1.done && (_a = rl_1.return)) yield _a.call(rl_1);
+            }
+            finally { if (e_1) throw e_1.error; }
+        }
+        yield fs_1.promises.writeFile(gatsbyConfigFile, result);
     }),
     overwriteFiles: (args) => __awaiter(void 0, void 0, void 0, function* () {
         // in gatsby we can delete all existing pages/components, since all pages are going
         // to be handled by templates/defaultPlasmicPage
-        const { projectPath } = args;
-        file_utils_1.deleteGlob(path_1.default.join(projectPath, "src/@(pages|components)/*.*"));
+        const { projectPath, useTypescript } = args;
+        const extension = useTypescript ? "ts" : "js";
+        file_utils_1.deleteGlob(path_1.default.join(projectPath, "src/@(pages|components|templates)/*.*"));
         // Create a very basic 404 page - `gatsby build` fails without it.
-        // We've deleted the components that the default 404 page depended
-        // on, so
-        yield fs_1.promises.writeFile(path_1.default.join(projectPath, "src/pages/404.js"), gatsby_1.GATSBY_404);
+        yield fs_1.promises.writeFile(path_1.default.join(projectPath, `src/pages/404.js`), gatsby_1.GATSBY_404);
+        yield fs_1.promises.writeFile(path_1.default.join(projectPath, `src/plasmic-init.${extension}`), gatsby_1.makeGatsbyPlasmicInit(extension));
+        // Add plasmic-host page
+        yield fs_1.promises.writeFile(path_1.default.join(projectPath, `src/pages/plasmic-host.${extension}x`), gatsby_1.makeGatsbyHostPage(extension));
+        // Start with an empty gatsby-node.js
+        yield fs_1.promises.writeFile(path_1.default.join(projectPath, "gatsby-node.js"), "");
+        // Updates `gatsby-ssr` to include script tag for preamble
+        yield fs_1.promises.writeFile(path_1.default.join(projectPath, "gatsby-ssr.js"), gatsby_1.GATSBY_SSR_CONFIG);
+        const templatesFolder = path_1.default.join(projectPath, "src/templates");
+        const defaultPagePath = path_1.default.join(templatesFolder, `defaultPlasmicPage.${extension}x`);
+        if (!fs_1.existsSync(templatesFolder)) {
+            yield fs_1.promises.mkdir(templatesFolder);
+        }
+        yield fs_1.promises.writeFile(defaultPagePath, gatsby_1.makeGatsbyDefaultPage(extension));
     }),
     build: (args) => __awaiter(void 0, void 0, void 0, function* () {
         const { npmRunCmd, projectPath } = args;

package/dist/strategies/nextjs.js

@@ -40,7 +40,10 @@ const nextjsStrategy = {
         // all the files from pages/ since we have inserted a optional catch all
         const { projectPath } = args;
         const pagesPath = path_1.default.join(projectPath, "pages");
-        file_utils_1.deleteGlob(path_1.default.join(pagesPath, `*.*`), ["[[...plasmicLoaderPage]]"]);
+        file_utils_1.deleteGlob(path_1.default.join(pagesPath, `*.*`), [
+            "[[...catchall]]",
+            "plasmic-host",
+        ]);
     }),
     build: (args) => __awaiter(void 0, void 0, void 0, function* () {
         const { npmRunCmd, projectPath } = args;

package/dist/strategies/types.d.ts

@@ -11,6 +11,7 @@ interface ConfigArgs {
 }
 interface OverwriteFilesArgs {
     projectPath: string;
+    useTypescript: boolean;
 }
 interface BuildArgs {
     projectPath: string;

package/dist/templates/gatsby.d.ts

@@ -1,3 +1,6 @@
-export declare const GATSBY_DEFAULT_PAGE: string;
+export declare const makeGatsbyDefaultPage: (format: "ts" | "js") => string;
 export declare const GATSBY_404: string;
-export declare const GATSBY_PLUGIN_CONFIG: (projectId: string, projectApiToken: string) => string;
+export declare const GATSBY_PLUGIN_CONFIG: (projectId: string, projectApiToken: string, useTypescript: boolean) => string;
+export declare const makeGatsbyHostPage: (format: "ts" | "js") => string;
+export declare const GATSBY_SSR_CONFIG: string;
+export declare const makeGatsbyPlasmicInit: (format: "ts" | "js") => string;

package/dist/templates/gatsby.js

@@ -1,14 +1,20 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.GATSBY_PLUGIN_CONFIG = exports.GATSBY_404 = exports.GATSBY_DEFAULT_PAGE = void 0;
-exports.GATSBY_DEFAULT_PAGE = `
+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";
+import Helmet from "react-helmet";
 import {
-  initPlasmicLoader,
   PlasmicComponent,
-  PlasmicRootProvider,
+  PlasmicRootProvider,${file_utils_1.ifTs(ts, `
+  InitOptions,
+  ComponentRenderData,`)}
 } from "@plasmicapp/loader-gatsby";
 import { graphql } from "gatsby";
+import { initPlasmicLoaderWithRegistrations } from "../plasmic-init";
 
 export const query = graphql\`
   query ($path: String) {
@@ -17,33 +23,47 @@ export const query = graphql\`
   }
 \`;
 
-const removeTrailingSlash = path =>
-  path === "/" ? "/" : path.replace(/\\/+$/, "");
-
-const PlasmicGatsbyPage = ({ data, location }) => {
+${file_utils_1.ifTs(ts, `interface PlasmicGatsbyPageProps {
+  data: {
+    plasmicOptions: InitOptions
+    plasmicComponents: ComponentRenderData
+  }
+}
+`)}
+const PlasmicGatsbyPage = ({ data }${file_utils_1.ifTs(ts, ": PlasmicGatsbyPageProps")}) => {
   const {
     plasmicComponents,
     plasmicOptions,
   } = data;
+  const pageMeta = plasmicComponents.entryCompMetas[0];
+  const pageMetadata = pageMeta.pageMetadata;
   return (
     <PlasmicRootProvider
-      loader={initPlasmicLoader(plasmicOptions)}
+      loader={initPlasmicLoaderWithRegistrations(plasmicOptions)}
       prefetchedData={plasmicComponents}
     >
-      <PlasmicComponent component={removeTrailingSlash(location.pathname)} />
+      <Helmet>
+        {pageMetadata.title && <title>{pageMetadata.title}</title>}
+        {pageMetadata.title && <meta property="og:title" content={pageMetadata.title} /> }
+        {pageMetadata.description && <meta property="og:description" content={pageMetadata.description} />}
+        {pageMetadata.openGraphImageUrl && <meta property="og:image" content={pageMetadata.openGraphImageUrl} />}
+      </Helmet>
+      <PlasmicComponent component={pageMeta.name} />
     </PlasmicRootProvider>
   );
 };
 
 export default PlasmicGatsbyPage;
 `.trim();
+};
+exports.makeGatsbyDefaultPage = makeGatsbyDefaultPage;
 exports.GATSBY_404 = `
 const NotFound = () => {
   return "Not Found";
 };
 export default NotFound;
 `.trim();
-const GATSBY_PLUGIN_CONFIG = (projectId, projectApiToken) => `
+const GATSBY_PLUGIN_CONFIG = (projectId, projectApiToken, useTypescript) => `
 {
   resolve: "@plasmicapp/loader-gatsby",
   options: {
@@ -53,8 +73,98 @@ const GATSBY_PLUGIN_CONFIG = (projectId, projectApiToken) => `
         token: "${projectApiToken}",
       },
     ], // An array of project ids.
-    defaultPlasmicPage: require.resolve("./src/templates/defaultPlasmicPage.js"),
+    defaultPlasmicPage: require.resolve("./src/templates/defaultPlasmicPage.${useTypescript ? "tsx" : "jsx"}"),
   },
 },
 `;
 exports.GATSBY_PLUGIN_CONFIG = GATSBY_PLUGIN_CONFIG;
+const makeGatsbyHostPage = (format) => {
+    const ts = format === "ts";
+    return `
+import * as React from "react"
+import {
+  PlasmicCanvasHost,${file_utils_1.ifTs(ts, `
+  InitOptions,`)}
+} from "@plasmicapp/loader-gatsby"
+import { graphql } from "gatsby"
+import { initPlasmicLoaderWithRegistrations } from "../plasmic-init"
+
+export const query = graphql\`
+  query {
+    plasmicOptions
+  }
+\`
+
+${file_utils_1.ifTs(ts, `interface HostProps {
+  data: {
+    plasmicOptions: InitOptions;
+  }
+}
+`)}
+export default function Host({ data }${file_utils_1.ifTs(ts, ": HostProps")}) {
+  const { plasmicOptions } = data
+  initPlasmicLoaderWithRegistrations(plasmicOptions)
+  return <PlasmicCanvasHost />
+}
+`.trim();
+};
+exports.makeGatsbyHostPage = makeGatsbyHostPage;
+exports.GATSBY_SSR_CONFIG = `
+/**
+ * Implement Gatsby's SSR (Server Side Rendering) APIs in this file.
+ *
+ * See: https://www.gatsbyjs.com/docs/ssr-apis/
+ */
+
+const React = require("react")
+
+/**
+ * Add preamble to allow functional code components in studio.
+ *
+ * See: https://docs.plasmic.app/learn/functional-code-components/
+ */
+const HeadComponents = [
+  <script
+    key="plasmic-preamble"
+    src="https://static1.plasmic.app/preamble.js"
+  />,
+]
+
+const isProduction = process.env.NODE_ENV === "production"
+
+exports.onRenderBody = ({ pathname, setHeadComponents }) => {
+  /**
+   * We add the preamble tag script to all pages during development mode
+   * because during development all pages are dynamically rendered based
+   * on \`/\` route, during production we add it only in \`/plasmic-host/\`
+   */
+  if (!isProduction || pathname === "/plasmic-host/") {
+    setHeadComponents(HeadComponents)
+  }
+}
+`.trim();
+const makeGatsbyPlasmicInit = (format) => {
+    const ts = format === "ts";
+    return `
+import {
+  initPlasmicLoader,${file_utils_1.ifTs(ts, `
+  InitOptions,`)}
+} from "@plasmicapp/loader-gatsby";
+
+export function initPlasmicLoaderWithRegistrations(plasmicOptions${file_utils_1.ifTs(ts, ": InitOptions")}) {
+  const PLASMIC = initPlasmicLoader(plasmicOptions);
+
+  // 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:8000/plasmic-host).  See
+  // https://docs.plasmic.app/learn/app-hosting/#set-a-plasmic-project-to-use-your-app-host
+
+  // PLASMIC.registerComponent(...);
+
+  return PLASMIC;
+}
+`.trim();
+};
+exports.makeGatsbyPlasmicInit = makeGatsbyPlasmicInit;

package/dist/templates/nextjs.d.ts

@@ -1,3 +1,3 @@
-export declare const NEXTJS_INIT: (projectId: string, projectApiToken: string) => string;
-export declare const NEXTJS_DEFAULT_PAGE_TS: string;
-export declare const NEXTJS_DEFAULT_PAGE_JS: string;
+export declare const makeNextjsInitPage: (projectId: string, projectApiToken: string) => string;
+export declare function makeNextjsCatchallPage(format: "ts" | "js"): string;
+export declare function makeNextjsHostPage(): string;

package/dist/templates/nextjs.js

@@ -1,7 +1,8 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.NEXTJS_DEFAULT_PAGE_JS = exports.NEXTJS_DEFAULT_PAGE_TS = exports.NEXTJS_INIT = void 0;
-const NEXTJS_INIT = (projectId, projectApiToken) => `
+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";
 
 export const PLASMIC = initPlasmicLoader({
@@ -11,23 +12,40 @@ export const PLASMIC = initPlasmicLoader({
       token: "${projectApiToken}",
     },
   ],
+
+  // By default Plasmic will use the last published version of your project.
+  // For development, you can set preview to true, which will use the unpublished
+  // project, allowing you to see your designs without publishing.  Please
+  // only use this for development, as this is significantly slower.
+  preview: false,
 });
+
+// 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(...);
 `.trim();
-exports.NEXTJS_INIT = NEXTJS_INIT;
-exports.NEXTJS_DEFAULT_PAGE_TS = `
+exports.makeNextjsInitPage = makeNextjsInitPage;
+function makeNextjsCatchallPage(format) {
+    const ts = format === "ts";
+    return `
 import * as React from "react";
 import { PlasmicComponent } from "@plasmicapp/loader-nextjs";
-import { GetStaticPaths, GetStaticProps } from "next";
+${file_utils_1.ifTs(ts, `import { GetStaticPaths, GetStaticProps } from "next";\n`)}
 import {
   ComponentRenderData,
   PlasmicRootProvider,
 } from "@plasmicapp/loader-react";
 import Error from "next/error";
-import { PLASMIC } from "../init";
+import { PLASMIC } from "../plasmic-init";
 
-export default function PlasmicLoaderPage(props: {
-  plasmicData?: ComponentRenderData
-}) {
+export default function PlasmicLoaderPage(props${file_utils_1.ifTs(ts, `: {
+  plasmicData?: ComponentRenderData;
+}`)}) {
   const { plasmicData } = props;
   if (!plasmicData || plasmicData.entryCompMetas.length === 0) {
     return <Error statusCode={404} />;
@@ -42,13 +60,16 @@ export default function PlasmicLoaderPage(props: {
   );
 }
 
-export const getStaticProps: GetStaticProps = async (context) => {
-  const { plasmicLoaderPage } = context.params ?? {};
-  const plasmicPath = typeof plasmicLoaderPage === 'string' ? plasmicLoaderPage : Array.isArray(plasmicLoaderPage) ? \`/\${plasmicLoaderPage.join('/')}\` : '/';
+export const getStaticProps${file_utils_1.ifTs(ts, `: GetStaticProps`)} = async (context) => {
+  const { catchall } = context.params ?? {};
+  const plasmicPath = typeof catchall === 'string' ? catchall : Array.isArray(catchall) ? \`/\${catchall.join('/')}\` : '/';
   const plasmicData = await PLASMIC.maybeFetchComponentData(plasmicPath);
   if (plasmicData) {
     return {
       props: { plasmicData },
+
+      // Use revalidate if you want incremental static regeneration
+      revalidate: 60
     };
   }
   return {
@@ -57,64 +78,38 @@ export const getStaticProps: GetStaticProps = async (context) => {
   };
 }
 
-export const getStaticPaths: GetStaticPaths = async () => {
+export const getStaticPaths${file_utils_1.ifTs(ts, `: GetStaticPaths`)} = async () => {
   const pageModules = await PLASMIC.fetchPages();
   return {
     paths: pageModules.map((mod) => ({
       params: {
-        plasmicLoaderPage: mod.path.substring(1).split("/"),
+        catchall: mod.path.substring(1).split("/"),
       },
     })),
-    fallback: false,
+    fallback: "blocking"
   };
 }
-`.trim();
-exports.NEXTJS_DEFAULT_PAGE_JS = `
-import * as React from "react";
-import { initPlasmicLoader, PlasmicComponent } from "@plasmicapp/loader-nextjs";
-import { PlasmicRootProvider } from "@plasmicapp/loader-react";
-import Error from "next/error";
-import { PLASMIC } from "../init";
-
-export default function PlasmicLoaderPage(props) {
-  const { plasmicData } = props;
-  if (!plasmicData || plasmicData.entryCompMetas.length === 0) {
-    return <Error statusCode={404} />;
-  }
-  return (
-    <PlasmicRootProvider
-      loader={PLASMIC}
-      prefetchedData={plasmicData}
-    >
-      <PlasmicComponent component={plasmicData.entryCompMetas[0].name} />
-    </PlasmicRootProvider>
-  );
+  `.trim();
 }
+exports.makeNextjsCatchallPage = makeNextjsCatchallPage;
+function makeNextjsHostPage() {
+    return `
+import * as React from 'react';
+import { PlasmicCanvasHost } from '@plasmicapp/loader-nextjs';
+import Script from 'next/script';
+import { PLASMIC } from '../plasmic-init';
 
-export const getStaticProps = async (context) => {
-  const { plasmicLoaderPage } = context.params ?? {};
-  const plasmicPath = typeof plasmicLoaderPage === 'string' ? plasmicLoaderPage : Array.isArray(plasmicLoaderPage) ? \`/\${plasmicLoaderPage.join('/')}\` : '/';
-  const plasmicData = await PLASMIC.maybeFetchComponentData(plasmicPath);
-  if (plasmicData) {
-    return {
-      props: { plasmicData },
-    };
-  }
-  return {
-    // non-Plasmic catch-all
-    props: {},
-  };
+export default function Host() {
+  return PLASMIC && (
+    <div>
+      <Script
+        src="https://static1.plasmic.app/preamble.js"
+        strategy="beforeInteractive"
+      />
+      <PlasmicCanvasHost />
+    </div>
+  );
 }
-
-export const getStaticPaths = async () => {
-  const pageModules = await PLASMIC.fetchPages();
-  return {
-    paths: pageModules.map((mod) => ({
-      params: {
-        plasmicLoaderPage: mod.path.substring(1).split("/"),
-      },
-    })),
-    fallback: false,
-  };
+  `.trim();
 }
-`.trim();
+exports.makeNextjsHostPage = makeNextjsHostPage;

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

@@ -15,13 +15,6 @@ export declare function stripExtension(filename: string, removeComposedPath?: bo
  */
 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>;
-/**
- * create-gatsby will create a default gatsby-config.js that we need to modify
- * @param absPath
- * @param projectId
- * @returns
- */
-export declare function modifyDefaultGatsbyConfig(projectDir: string, projectId: string, projectApiToken: string): Promise<void>;
 /**
  * - [nextjs|gatsby, loader, '/' page exists] - remove index file
  * - [nextjs|gatsby, loader, '/' Page DNE] - replace index file with Welcome page
@@ -40,3 +33,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

@@ -27,22 +27,14 @@ var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, ge
         step((generator = generator.apply(thisArg, _arguments || [])).next());
     });
 };
-var __asyncValues = (this && this.__asyncValues) || function (o) {
-    if (!Symbol.asyncIterator) throw new TypeError("Symbol.asyncIterator is not defined.");
-    var m = o[Symbol.asyncIterator], i;
-    return m ? m.call(o) : (o = typeof __values === "function" ? __values(o) : o[Symbol.iterator](), i = {}, verb("next"), verb("throw"), verb("return"), i[Symbol.asyncIterator] = function () { return this; }, i);
-    function verb(n) { i[n] = o[n] && function (v) { return new Promise(function (resolve, reject) { v = o[n](v), settle(resolve, reject, v.done, v.value); }); }; }
-    function settle(resolve, reject, d, v) { Promise.resolve(v).then(function(v) { resolve({ value: v, done: d }); }, reject); }
-};
 var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.wrapAppRoot = exports.ensureTsconfig = exports.overwriteReadme = exports.overwriteIndex = exports.modifyDefaultGatsbyConfig = exports.writePlasmicLoaderJson = exports.writeDefaultNextjsConfig = exports.stripExtension = exports.deleteGlob = void 0;
+exports.ifTs = exports.wrapAppRoot = exports.ensureTsconfig = exports.overwriteReadme = exports.overwriteIndex = exports.writePlasmicLoaderJson = exports.writeDefaultNextjsConfig = exports.stripExtension = exports.deleteGlob = void 0;
 const fs_1 = require("fs");
 const glob_1 = __importDefault(require("glob"));
 const lodash_1 = __importDefault(require("lodash"));
-const readline = __importStar(require("readline"));
 const path = __importStar(require("upath"));
 const gatsby_1 = require("../templates/gatsby");
 const nextjs_1 = require("../templates/nextjs");
@@ -95,11 +87,13 @@ module.exports = {
             return;
         }
         if (loader && projectApiToken) {
-            const initFile = path.join(projectDir, "init.js");
-            yield fs_1.promises.writeFile(initFile, nextjs_1.NEXTJS_INIT(projectId, 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, `[[...plasmicLoaderPage]].${useTypescript ? "tsx" : "jsx"}`);
-            yield fs_1.promises.writeFile(loaderPage, useTypescript ? nextjs_1.NEXTJS_DEFAULT_PAGE_TS : nextjs_1.NEXTJS_DEFAULT_PAGE_JS);
+            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());
         }
     });
 }
@@ -119,46 +113,6 @@ function writePlasmicLoaderJson(projectDir, projectId, projectApiToken) {
     });
 }
 exports.writePlasmicLoaderJson = writePlasmicLoaderJson;
-/**
- * create-gatsby will create a default gatsby-config.js that we need to modify
- * @param absPath
- * @param projectId
- * @returns
- */
-function modifyDefaultGatsbyConfig(projectDir, projectId, projectApiToken) {
-    var e_1, _a;
-    return __awaiter(this, void 0, void 0, function* () {
-        const gatsbyConfigFile = path.join(projectDir, "gatsby-config.js");
-        const rl = readline.createInterface({
-            input: fs_1.createReadStream(gatsbyConfigFile),
-            crlfDelay: Infinity,
-        });
-        let result = "";
-        try {
-            for (var rl_1 = __asyncValues(rl), rl_1_1; rl_1_1 = yield rl_1.next(), !rl_1_1.done;) {
-                const line = rl_1_1.value;
-                result += line + "\n";
-                // Prepend PlasmicLoader to list of plugins
-                if (line.includes("plugins:")) {
-                    result += gatsby_1.GATSBY_PLUGIN_CONFIG(projectId, projectApiToken);
-                }
-            }
-        }
-        catch (e_1_1) { e_1 = { error: e_1_1 }; }
-        finally {
-            try {
-                if (rl_1_1 && !rl_1_1.done && (_a = rl_1.return)) yield _a.call(rl_1);
-            }
-            finally { if (e_1) throw e_1.error; }
-        }
-        yield fs_1.promises.writeFile(gatsbyConfigFile, result);
-        const templatesFolder = path.join(projectDir, "src/templates");
-        const defaultPagePath = path.join(templatesFolder, "defaultPlasmicPage.js");
-        yield fs_1.promises.mkdir(templatesFolder);
-        yield fs_1.promises.writeFile(defaultPagePath, gatsby_1.GATSBY_DEFAULT_PAGE);
-    });
-}
-exports.modifyDefaultGatsbyConfig = modifyDefaultGatsbyConfig;
 /**
  * - [nextjs|gatsby, loader, '/' page exists] - remove index file
  * - [nextjs|gatsby, loader, '/' Page DNE] - replace index file with Welcome page
@@ -372,3 +326,7 @@ export const wrapRootElement = ({ element }) => {
     });
 }
 exports.wrapAppRoot = wrapAppRoot;
+function ifTs(ts, str) {
+    return ts ? str : "";
+}
+exports.ifTs = ifTs;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "create-plasmic-app",
-  "version": "0.0.30",
+  "version": "0.0.34",
   "description": "Create Plasmic-powered React apps",
   "main": "./dist/lib.js",
   "types": "./dist/lib.d.ts",
@@ -40,7 +40,7 @@
     "typescript": "^4.2.3"
   },
   "dependencies": {
-    "@plasmicapp/cli": "^0.1.161",
+    "@plasmicapp/cli": "^0.1.166",
     "@sentry/node": "^6.2.2",
     "chalk": "^4.1.0",
     "execa": "^5.0.0",

package/src/lib.ts

@@ -84,8 +84,10 @@ export async function create(args: CreatePlasmicAppArgs): Promise<void> {
     template,
   });
 
-  // Ensure that
-  if (useTypescript) {
+  // Ensure that we have a empty tsconfig and @types packages
+  // Gatsby by default supports typescript handling internally
+  // tsconfig so we don't have to ensure it
+  if (useTypescript && platform !== "gatsby") {
     await ensureTsconfig(resolvedProjectPath);
   }
 
@@ -136,7 +138,10 @@ export async function create(args: CreatePlasmicAppArgs): Promise<void> {
   }
 
   if (scheme === "loader") {
-    await cpaStrategy.overwriteFiles({ projectPath: resolvedProjectPath });
+    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

package/src/strategies/gatsby.ts

@@ -1,8 +1,16 @@
-import { promises as fs } from "fs";
+import { createReadStream, existsSync, promises as fs } from "fs";
 import path from "path";
-import { GATSBY_404 } from "../templates/gatsby";
+import * as readline from "readline";
+import {
+  GATSBY_404,
+  GATSBY_PLUGIN_CONFIG,
+  GATSBY_SSR_CONFIG,
+  makeGatsbyDefaultPage,
+  makeGatsbyHostPage,
+  makeGatsbyPlasmicInit,
+} from "../templates/gatsby";
 import { spawnOrFail } from "../utils/cmd-utils";
-import { deleteGlob, modifyDefaultGatsbyConfig } from "../utils/file-utils";
+import { deleteGlob } from "../utils/file-utils";
 import { installUpgrade } from "../utils/npm-utils";
 import { CPAStrategy } from "./types";
 
@@ -12,12 +20,10 @@ const gatsbyStrategy: CPAStrategy = {
     const createCommand = `npx -p gatsby gatsby new ${projectPath}`;
     const templateArg = template ? ` ${template}` : "";
 
-    // Default Gatsby starter already supports Typescript
-    // See where we `touch tsconfig.json` later on
     await spawnOrFail(`${createCommand}${templateArg}`);
   },
   configLoader: async (args) => {
-    const { projectId, projectPath, projectApiToken } = args;
+    const { projectId, projectPath, projectApiToken, useTypescript } = args;
 
     const installResult = await installUpgrade("@plasmicapp/loader-gatsby", {
       workingDir: projectPath,
@@ -27,19 +33,68 @@ const gatsbyStrategy: CPAStrategy = {
       throw new Error("Failed to install the Plasmic dependency");
     }
 
-    await modifyDefaultGatsbyConfig(projectPath, projectId, projectApiToken);
+    // 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
+        );
+      }
+    }
+    await fs.writeFile(gatsbyConfigFile, result);
   },
   overwriteFiles: async (args) => {
     // in gatsby we can delete all existing pages/components, since all pages are going
     // to be handled by templates/defaultPlasmicPage
-    const { projectPath } = args;
+    const { projectPath, useTypescript } = args;
+
+    const extension = useTypescript ? "ts" : "js";
 
-    deleteGlob(path.join(projectPath, "src/@(pages|components)/*.*"));
+    deleteGlob(path.join(projectPath, "src/@(pages|components|templates)/*.*"));
 
     // Create a very basic 404 page - `gatsby build` fails without it.
-    // We've deleted the components that the default 404 page depended
-    // on, so
-    await fs.writeFile(path.join(projectPath, "src/pages/404.js"), GATSBY_404);
+    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)
+    );
+
+    // Start with an empty gatsby-node.js
+    await fs.writeFile(path.join(projectPath, "gatsby-node.js"), "");
+
+    // Updates `gatsby-ssr` to include script tag for preamble
+    await fs.writeFile(
+      path.join(projectPath, "gatsby-ssr.js"),
+      GATSBY_SSR_CONFIG
+    );
+
+    const templatesFolder = path.join(projectPath, "src/templates");
+    const defaultPagePath = path.join(
+      templatesFolder,
+      `defaultPlasmicPage.${extension}x`
+    );
+
+    if (!existsSync(templatesFolder)) {
+      await fs.mkdir(templatesFolder);
+    }
+    await fs.writeFile(defaultPagePath, makeGatsbyDefaultPage(extension));
   },
   build: async (args) => {
     const { npmRunCmd, projectPath } = args;

package/src/strategies/nextjs.ts

@@ -41,7 +41,10 @@ const nextjsStrategy: CPAStrategy = {
     const { projectPath } = args;
 
     const pagesPath = path.join(projectPath, "pages");
-    deleteGlob(path.join(pagesPath, `*.*`), ["[[...plasmicLoaderPage]]"]);
+    deleteGlob(path.join(pagesPath, `*.*`), [
+      "[[...catchall]]",
+      "plasmic-host",
+    ]);
   },
   build: async (args) => {
     const { npmRunCmd, projectPath } = args;

package/src/strategies/types.ts

@@ -13,6 +13,7 @@ interface ConfigArgs {
 
 interface OverwriteFilesArgs {
   projectPath: string;
+  useTypescript: boolean;
 }
 
 interface BuildArgs {

package/src/templates/gatsby.ts

@@ -1,11 +1,21 @@
-export const GATSBY_DEFAULT_PAGE = `
+import { ifTs } from "../utils/file-utils";
+
+export const makeGatsbyDefaultPage = (format: "ts" | "js"): string => {
+  const ts = format === "ts";
+  return `
 import React from "react";
+import Helmet from "react-helmet";
 import {
-  initPlasmicLoader,
   PlasmicComponent,
-  PlasmicRootProvider,
+  PlasmicRootProvider,${ifTs(
+    ts,
+    `
+  InitOptions,
+  ComponentRenderData,`
+  )}
 } from "@plasmicapp/loader-gatsby";
 import { graphql } from "gatsby";
+import { initPlasmicLoaderWithRegistrations } from "../plasmic-init";
 
 export const query = graphql\`
   query ($path: String) {
@@ -14,26 +24,42 @@ export const query = graphql\`
   }
 \`;
 
-const removeTrailingSlash = path =>
-  path === "/" ? "/" : path.replace(/\\/+$/, "");
-
-const PlasmicGatsbyPage = ({ data, location }) => {
+${ifTs(
+  ts,
+  `interface PlasmicGatsbyPageProps {
+  data: {
+    plasmicOptions: InitOptions
+    plasmicComponents: ComponentRenderData
+  }
+}
+`
+)}
+const PlasmicGatsbyPage = ({ data }${ifTs(ts, ": PlasmicGatsbyPageProps")}) => {
   const {
     plasmicComponents,
     plasmicOptions,
   } = data;
+  const pageMeta = plasmicComponents.entryCompMetas[0];
+  const pageMetadata = pageMeta.pageMetadata;
   return (
     <PlasmicRootProvider
-      loader={initPlasmicLoader(plasmicOptions)}
+      loader={initPlasmicLoaderWithRegistrations(plasmicOptions)}
       prefetchedData={plasmicComponents}
     >
-      <PlasmicComponent component={removeTrailingSlash(location.pathname)} />
+      <Helmet>
+        {pageMetadata.title && <title>{pageMetadata.title}</title>}
+        {pageMetadata.title && <meta property="og:title" content={pageMetadata.title} /> }
+        {pageMetadata.description && <meta property="og:description" content={pageMetadata.description} />}
+        {pageMetadata.openGraphImageUrl && <meta property="og:image" content={pageMetadata.openGraphImageUrl} />}
+      </Helmet>
+      <PlasmicComponent component={pageMeta.name} />
     </PlasmicRootProvider>
   );
 };
 
 export default PlasmicGatsbyPage;
 `.trim();
+};
 
 export const GATSBY_404 = `
 const NotFound = () => {
@@ -44,7 +70,8 @@ export default NotFound;
 
 export const GATSBY_PLUGIN_CONFIG = (
   projectId: string,
-  projectApiToken: string
+  projectApiToken: string,
+  useTypescript: boolean
 ): string => `
 {
   resolve: "@plasmicapp/loader-gatsby",
@@ -55,7 +82,112 @@ export const GATSBY_PLUGIN_CONFIG = (
         token: "${projectApiToken}",
       },
     ], // An array of project ids.
-    defaultPlasmicPage: require.resolve("./src/templates/defaultPlasmicPage.js"),
+    defaultPlasmicPage: require.resolve("./src/templates/defaultPlasmicPage.${
+      useTypescript ? "tsx" : "jsx"
+    }"),
   },
 },
 `;
+
+export const makeGatsbyHostPage = (format: "ts" | "js"): string => {
+  const ts = format === "ts";
+  return `
+import * as React from "react"
+import {
+  PlasmicCanvasHost,${ifTs(
+    ts,
+    `
+  InitOptions,`
+  )}
+} from "@plasmicapp/loader-gatsby"
+import { graphql } from "gatsby"
+import { initPlasmicLoaderWithRegistrations } from "../plasmic-init"
+
+export const query = graphql\`
+  query {
+    plasmicOptions
+  }
+\`
+
+${ifTs(
+  ts,
+  `interface HostProps {
+  data: {
+    plasmicOptions: InitOptions;
+  }
+}
+`
+)}
+export default function Host({ data }${ifTs(ts, ": HostProps")}) {
+  const { plasmicOptions } = data
+  initPlasmicLoaderWithRegistrations(plasmicOptions)
+  return <PlasmicCanvasHost />
+}
+`.trim();
+};
+
+export const GATSBY_SSR_CONFIG = `
+/**
+ * Implement Gatsby's SSR (Server Side Rendering) APIs in this file.
+ *
+ * See: https://www.gatsbyjs.com/docs/ssr-apis/
+ */
+
+const React = require("react")
+
+/**
+ * Add preamble to allow functional code components in studio.
+ *
+ * See: https://docs.plasmic.app/learn/functional-code-components/
+ */
+const HeadComponents = [
+  <script
+    key="plasmic-preamble"
+    src="https://static1.plasmic.app/preamble.js"
+  />,
+]
+
+const isProduction = process.env.NODE_ENV === "production"
+
+exports.onRenderBody = ({ pathname, setHeadComponents }) => {
+  /**
+   * We add the preamble tag script to all pages during development mode
+   * because during development all pages are dynamically rendered based
+   * on \`/\` route, during production we add it only in \`/plasmic-host/\`
+   */
+  if (!isProduction || pathname === "/plasmic-host/") {
+    setHeadComponents(HeadComponents)
+  }
+}
+`.trim();
+
+export const makeGatsbyPlasmicInit = (format: "ts" | "js"): string => {
+  const ts = format === "ts";
+  return `
+import {
+  initPlasmicLoader,${ifTs(
+    ts,
+    `
+  InitOptions,`
+  )}
+} from "@plasmicapp/loader-gatsby";
+
+export function initPlasmicLoaderWithRegistrations(plasmicOptions${ifTs(
+    ts,
+    ": InitOptions"
+  )}) {
+  const PLASMIC = initPlasmicLoader(plasmicOptions);
+
+  // 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:8000/plasmic-host).  See
+  // https://docs.plasmic.app/learn/app-hosting/#set-a-plasmic-project-to-use-your-app-host
+
+  // PLASMIC.registerComponent(...);
+
+  return PLASMIC;
+}
+`.trim();
+};

package/src/templates/nextjs.ts

@@ -1,4 +1,6 @@
-export const NEXTJS_INIT = (
+import { ifTs } from "../utils/file-utils";
+
+export const makeNextjsInitPage = (
   projectId: string,
   projectApiToken: string
 ): string =>
@@ -12,23 +14,43 @@ export const PLASMIC = initPlasmicLoader({
       token: "${projectApiToken}",
     },
   ],
+
+  // By default Plasmic will use the last published version of your project.
+  // For development, you can set preview to true, which will use the unpublished
+  // project, allowing you to see your designs without publishing.  Please
+  // only use this for development, as this is significantly slower.
+  preview: false,
 });
+
+// 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(...);
 `.trim();
 
-export const NEXTJS_DEFAULT_PAGE_TS = `
+export function makeNextjsCatchallPage(format: "ts" | "js"): string {
+  const ts = format === "ts";
+  return `
 import * as React from "react";
 import { PlasmicComponent } from "@plasmicapp/loader-nextjs";
-import { GetStaticPaths, GetStaticProps } from "next";
+${ifTs(ts, `import { GetStaticPaths, GetStaticProps } from "next";\n`)}
 import {
   ComponentRenderData,
   PlasmicRootProvider,
 } from "@plasmicapp/loader-react";
 import Error from "next/error";
-import { PLASMIC } from "../init";
+import { PLASMIC } from "../plasmic-init";
 
-export default function PlasmicLoaderPage(props: {
-  plasmicData?: ComponentRenderData
-}) {
+export default function PlasmicLoaderPage(props${ifTs(
+    ts,
+    `: {
+  plasmicData?: ComponentRenderData;
+}`
+  )}) {
   const { plasmicData } = props;
   if (!plasmicData || plasmicData.entryCompMetas.length === 0) {
     return <Error statusCode={404} />;
@@ -43,13 +65,19 @@ export default function PlasmicLoaderPage(props: {
   );
 }
 
-export const getStaticProps: GetStaticProps = async (context) => {
-  const { plasmicLoaderPage } = context.params ?? {};
-  const plasmicPath = typeof plasmicLoaderPage === 'string' ? plasmicLoaderPage : Array.isArray(plasmicLoaderPage) ? \`/\${plasmicLoaderPage.join('/')}\` : '/';
+export const getStaticProps${ifTs(
+    ts,
+    `: GetStaticProps`
+  )} = async (context) => {
+  const { catchall } = context.params ?? {};
+  const plasmicPath = typeof catchall === 'string' ? catchall : Array.isArray(catchall) ? \`/\${catchall.join('/')}\` : '/';
   const plasmicData = await PLASMIC.maybeFetchComponentData(plasmicPath);
   if (plasmicData) {
     return {
       props: { plasmicData },
+
+      // Use revalidate if you want incremental static regeneration
+      revalidate: 60
     };
   }
   return {
@@ -58,65 +86,37 @@ export const getStaticProps: GetStaticProps = async (context) => {
   };
 }
 
-export const getStaticPaths: GetStaticPaths = async () => {
+export const getStaticPaths${ifTs(ts, `: GetStaticPaths`)} = async () => {
   const pageModules = await PLASMIC.fetchPages();
   return {
     paths: pageModules.map((mod) => ({
       params: {
-        plasmicLoaderPage: mod.path.substring(1).split("/"),
+        catchall: mod.path.substring(1).split("/"),
       },
     })),
-    fallback: false,
+    fallback: "blocking"
   };
 }
-`.trim();
+  `.trim();
+}
 
-export const NEXTJS_DEFAULT_PAGE_JS = `
-import * as React from "react";
-import { initPlasmicLoader, PlasmicComponent } from "@plasmicapp/loader-nextjs";
-import { PlasmicRootProvider } from "@plasmicapp/loader-react";
-import Error from "next/error";
-import { PLASMIC } from "../init";
+export function makeNextjsHostPage(): string {
+  return `
+import * as React from 'react';
+import { PlasmicCanvasHost } from '@plasmicapp/loader-nextjs';
+import Script from 'next/script';
+import { PLASMIC } from '../plasmic-init';
 
-export default function PlasmicLoaderPage(props) {
-  const { plasmicData } = props;
-  if (!plasmicData || plasmicData.entryCompMetas.length === 0) {
-    return <Error statusCode={404} />;
-  }
-  return (
-    <PlasmicRootProvider
-      loader={PLASMIC}
-      prefetchedData={plasmicData}
-    >
-      <PlasmicComponent component={plasmicData.entryCompMetas[0].name} />
-    </PlasmicRootProvider>
+export default function Host() {
+  return PLASMIC && (
+    <div>
+      <Script
+        src="https://static1.plasmic.app/preamble.js"
+        strategy="beforeInteractive"
+      />
+      <PlasmicCanvasHost />
+    </div>
   );
 }
-
-export const getStaticProps = async (context) => {
-  const { plasmicLoaderPage } = context.params ?? {};
-  const plasmicPath = typeof plasmicLoaderPage === 'string' ? plasmicLoaderPage : Array.isArray(plasmicLoaderPage) ? \`/\${plasmicLoaderPage.join('/')}\` : '/';
-  const plasmicData = await PLASMIC.maybeFetchComponentData(plasmicPath);
-  if (plasmicData) {
-    return {
-      props: { plasmicData },
-    };
-  }
-  return {
-    // non-Plasmic catch-all
-    props: {},
-  };
+  `.trim();
 }
-
-export const getStaticPaths = async () => {
-  const pageModules = await PLASMIC.fetchPages();
-  return {
-    paths: pageModules.map((mod) => ({
-      params: {
-        plasmicLoaderPage: mod.path.substring(1).split("/"),
-      },
-    })),
-    fallback: false,
-  };
-}
-`.trim();

package/src/utils/file-utils.ts

@@ -1,18 +1,13 @@
-import { createReadStream, existsSync, promises as fs, unlinkSync } from "fs";
+import { existsSync, promises as fs, unlinkSync } from "fs";
 import glob from "glob";
 import L from "lodash";
-import * as readline from "readline";
 import * as path from "upath";
 import { PlatformType } from "../lib";
+import { GATSBY_404 } from "../templates/gatsby";
 import {
-  GATSBY_404,
-  GATSBY_DEFAULT_PAGE,
-  GATSBY_PLUGIN_CONFIG,
-} from "../templates/gatsby";
-import {
-  NEXTJS_DEFAULT_PAGE_JS,
-  NEXTJS_DEFAULT_PAGE_TS,
-  NEXTJS_INIT,
+  makeNextjsCatchallPage,
+  makeNextjsHostPage,
+  makeNextjsInitPage,
 } from "../templates/nextjs";
 import { README } from "../templates/readme";
 import { WELCOME_PAGE } from "../templates/welcomePage";
@@ -83,19 +78,31 @@ module.exports = {
   }
 
   if (loader && projectApiToken) {
-    const initFile = path.join(projectDir, "init.js");
-    await fs.writeFile(initFile, NEXTJS_INIT(projectId, 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,
-      `[[...plasmicLoaderPage]].${useTypescript ? "tsx" : "jsx"}`
+      `[[...catchall]].${useTypescript ? "tsx" : "jsx"}`
     );
-
     await fs.writeFile(
       loaderPage,
-      useTypescript ? NEXTJS_DEFAULT_PAGE_TS : NEXTJS_DEFAULT_PAGE_JS
+      makeNextjsCatchallPage(useTypescript ? "ts" : "js")
     );
+
+    const hostPage = path.join(
+      pagesFolder,
+      `plasmic-host.${useTypescript ? "tsx" : "jsx"}`
+    );
+
+    await fs.writeFile(hostPage, makeNextjsHostPage());
   }
 }
 
@@ -116,39 +123,6 @@ export async function writePlasmicLoaderJson(
   await fs.writeFile(plasmicLoaderJson, JSON.stringify(content));
 }
 
-/**
- * create-gatsby will create a default gatsby-config.js that we need to modify
- * @param absPath
- * @param projectId
- * @returns
- */
-export async function modifyDefaultGatsbyConfig(
-  projectDir: string,
-  projectId: string,
-  projectApiToken: string
-): Promise<void> {
-  const gatsbyConfigFile = path.join(projectDir, "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);
-    }
-  }
-  await fs.writeFile(gatsbyConfigFile, result);
-
-  const templatesFolder = path.join(projectDir, "src/templates");
-  const defaultPagePath = path.join(templatesFolder, "defaultPlasmicPage.js");
-
-  await fs.mkdir(templatesFolder);
-  await fs.writeFile(defaultPagePath, GATSBY_DEFAULT_PAGE);
-}
-
 /**
  * - [nextjs|gatsby, loader, '/' page exists] - remove index file
  * - [nextjs|gatsby, loader, '/' Page DNE] - replace index file with Welcome page
@@ -410,3 +384,7 @@ export const wrapRootElement = ({ element }) => {
     await fs.writeFile(ssrFilePath, wrapperContent);
   }
 }
+
+export function ifTs(ts: boolean, str: string) {
+  return ts ? str : "";
+}