create-plasmic-app 0.0.36 → 0.0.39

package/dist/index.d.ts

@@ -1,2 +1,2 @@
 #!/usr/bin/env node
-export {};
+export declare type CodeScheme = "codegen" | "loader";

package/dist/lib.js

@@ -37,7 +37,6 @@ const chalk_1 = __importDefault(require("chalk"));
 const path = __importStar(require("upath"));
 const validate_npm_package_name_1 = __importDefault(require("validate-npm-package-name"));
 const strategies_1 = require("./strategies");
-const cmd_utils_1 = require("./utils/cmd-utils");
 const file_utils_1 = require("./utils/file-utils");
 const npm_utils_1 = require("./utils/npm-utils");
 function toString(s) {
@@ -91,60 +90,43 @@ function create(args) {
         if (useTypescript && platform !== "gatsby") {
             yield file_utils_1.ensureTsconfig(resolvedProjectPath);
         }
-        // Install dependency
-        banner("INSTALLING THE PLASMIC DEPENDENCY");
-        if (scheme === "codegen") {
-            const installResult = yield npm_utils_1.installUpgrade("@plasmicapp/cli", {
-                workingDir: resolvedProjectPath,
-            });
-            if (!installResult) {
-                throw new Error("Failed to install the Plasmic dependency");
-            }
-        }
-        // Trigger a sync
-        const pkgMgr = npm_utils_1.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") {
-                yield file_utils_1.writeDefaultNextjsConfig(resolvedProjectPath, projectId, false);
-            }
-            yield cmd_utils_1.spawnOrFail(`npx -p @plasmicapp/cli plasmic sync --yes -p ${project}`, resolvedProjectPath);
-        }
-        else if (scheme === "loader") {
-            if (!projectApiToken) {
-                projectApiToken = yield cli_1.getProjectApiToken(projectId);
-            }
+        // Make sure we have an api token for loader
+        if (scheme === "loader" && !projectApiToken) {
+            projectApiToken = yield cli_1.getProjectApiToken(projectId);
             if (!projectApiToken) {
                 throw new Error(`Failed to get projectApiToken for ${projectId}`);
             }
-            yield cpaStrategy.configLoader({
-                projectPath: resolvedProjectPath,
-                projectId,
-                projectApiToken,
-                useTypescript,
-            });
         }
-        if (scheme === "loader") {
-            yield 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
-            yield file_utils_1.overwriteIndex(resolvedProjectPath, platform, scheme);
-            // Overwrite the wrapper files to wrap PlasmicRootProvider
-            yield file_utils_1.wrapAppRoot(resolvedProjectPath, platform, scheme);
+        // Install dependency
+        banner("INSTALLING THE PLASMIC DEPENDENCY");
+        const installResult = yield cpaStrategy.installDeps({
+            scheme,
+            projectPath: resolvedProjectPath,
+        });
+        if (!installResult) {
+            throw new Error("Failed to install the Plasmic dependency");
         }
+        // Configure
+        yield cpaStrategy.overwriteConfig({
+            projectId,
+            projectPath: resolvedProjectPath,
+            projectApiToken,
+            useTypescript,
+            scheme,
+        });
+        // Generate files
+        yield cpaStrategy.generateFiles({
+            projectPath: resolvedProjectPath,
+            useTypescript,
+            scheme,
+            projectId,
+            projectApiToken,
+        });
         /**
          * INSTRUCT USER ON NEXT STEPS
          */
+        const pkgMgr = npm_utils_1.detectPackageManager(resolvedProjectPath);
+        const npmRunCmd = pkgMgr === "yarn" ? "yarn" : "npm run";
         const command = platform === "nextjs"
             ? `${npmRunCmd} dev`
             : platform === "gatsby"

package/dist/strategies/common.d.ts

@@ -0,0 +1,8 @@
+export declare function installCodegenDeps(opts: {
+    projectPath: string;
+}): Promise<boolean>;
+export declare function runCodegenSync(opts: {
+    projectId: string;
+    projectApiToken: string | undefined;
+    projectPath: string;
+}): Promise<void>;

package/dist/strategies/common.js

@@ -0,0 +1,34 @@
+"use strict";
+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) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.runCodegenSync = exports.installCodegenDeps = void 0;
+const lib_1 = require("../lib");
+const cmd_utils_1 = require("../utils/cmd-utils");
+const npm_utils_1 = require("../utils/npm-utils");
+function installCodegenDeps(opts) {
+    return __awaiter(this, void 0, void 0, function* () {
+        const { projectPath } = opts;
+        return ((yield npm_utils_1.installUpgrade("@plasmicapp/cli", { workingDir: projectPath })) &&
+            (yield npm_utils_1.installUpgrade("@plasmicapp/host", { workingDir: projectPath })));
+    });
+}
+exports.installCodegenDeps = installCodegenDeps;
+function runCodegenSync(opts) {
+    return __awaiter(this, void 0, void 0, function* () {
+        const { projectId, projectApiToken, projectPath } = opts;
+        lib_1.banner("SYNCING PLASMIC COMPONENTS");
+        const project = projectApiToken
+            ? `${projectId}:${projectApiToken}`
+            : projectId;
+        yield cmd_utils_1.spawnOrFail(`npx -p @plasmicapp/cli plasmic sync --yes -p ${project}`, projectPath);
+    });
+}
+exports.runCodegenSync = runCodegenSync;

package/dist/strategies/gatsby.js

@@ -44,7 +44,9 @@ 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");
+const lang_utils_1 = require("../utils/lang-utils");
 const npm_utils_1 = require("../utils/npm-utils");
+const common_1 = require("./common");
 const gatsbyStrategy = {
     create: (args) => __awaiter(void 0, void 0, void 0, function* () {
         const { projectPath, template } = args;
@@ -52,62 +54,88 @@ const gatsbyStrategy = {
         const templateArg = template ? ` ${template}` : "";
         yield cmd_utils_1.spawnOrFail(`${createCommand}${templateArg}`);
     }),
-    configLoader: (args) => __awaiter(void 0, void 0, void 0, function* () {
-        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");
+    installDeps: ({ projectPath, scheme }) => __awaiter(void 0, void 0, void 0, function* () {
+        if (scheme === "loader") {
+            return yield npm_utils_1.installUpgrade("@plasmicapp/loader-gatsby", {
+                workingDir: projectPath,
+            });
         }
-        // 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);
-                }
-            }
+        else {
+            return yield common_1.installCodegenDeps({ projectPath });
         }
-        catch (e_1_1) { e_1 = { error: e_1_1 }; }
-        finally {
+    }),
+    overwriteConfig: (args) => __awaiter(void 0, void 0, void 0, function* () {
+        var e_1, _a;
+        const { projectId, projectPath, projectApiToken, useTypescript, scheme, } = args;
+        if (scheme === "loader") {
+            // 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 {
-                if (rl_1_1 && !rl_1_1.done && (_a = rl_1.return)) yield _a.call(rl_1);
+                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, lang_utils_1.ensure(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; }
             }
-            finally { if (e_1) throw e_1.error; }
+            yield fs_1.promises.writeFile(gatsbyConfigFile, result);
         }
-        yield fs_1.promises.writeFile(gatsbyConfigFile, result);
     }),
-    overwriteFiles: (args) => __awaiter(void 0, void 0, void 0, function* () {
+    generateFiles: (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, useTypescript } = args;
+        const { projectId, projectApiToken, projectPath, useTypescript, scheme, } = 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.
         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));
+        yield fs_1.promises.writeFile(path_1.default.join(projectPath, `src/pages/plasmic-host.${extension}x`), gatsby_1.makeGatsbyHostPage({
+            useTypescript,
+            scheme,
+        }));
         // 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);
+        if (scheme === "loader") {
+            yield fs_1.promises.writeFile(path_1.default.join(projectPath, `src/plasmic-init.${extension}`), gatsby_1.makeGatsbyPlasmicInit(extension));
+            const templatesFolder = path_1.default.join(projectPath, "src/templates");
+            if (!fs_1.existsSync(templatesFolder)) {
+                yield fs_1.promises.mkdir(templatesFolder);
+            }
+            const defaultPagePath = path_1.default.join(templatesFolder, `defaultPlasmicPage.${extension}x`);
+            yield fs_1.promises.writeFile(defaultPagePath, gatsby_1.makeGatsbyDefaultPage(extension));
+        }
+        else {
+            yield common_1.runCodegenSync({
+                projectId,
+                projectApiToken,
+                projectPath,
+            });
+            // Overwrite the index file
+            yield file_utils_1.overwriteIndex(projectPath, "gatsby", scheme);
+            // Overwrite the wrapper files to wrap PlasmicRootProvider
+            const wrapperContent = gatsby_1.wrapAppRootForCodegen();
+            const browserFilePath = path_1.default.join(projectPath, "gatsby-browser.js");
+            yield fs_1.promises.writeFile(browserFilePath, wrapperContent);
+            const ssrFilePath = path_1.default.join(projectPath, "gatsby-ssr.js");
+            yield fs_1.promises.writeFile(ssrFilePath, wrapperContent);
         }
-        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

@@ -12,10 +12,14 @@ 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 nextjs_1 = require("../templates/nextjs");
 const cmd_utils_1 = require("../utils/cmd-utils");
 const file_utils_1 = require("../utils/file-utils");
+const lang_utils_1 = require("../utils/lang-utils");
 const npm_utils_1 = require("../utils/npm-utils");
+const common_1 = require("./common");
 const nextjsStrategy = {
     create: (args) => __awaiter(void 0, void 0, void 0, function* () {
         const { projectPath, template, useTypescript } = args;
@@ -25,25 +29,59 @@ const nextjsStrategy = {
         // 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, useTypescript } = args;
-        const installResult = yield npm_utils_1.installUpgrade("@plasmicapp/loader-nextjs", {
-            workingDir: projectPath,
-        });
-        if (!installResult) {
-            throw new Error("Failed to install the Plasmic dependency");
+    installDeps: ({ scheme, projectPath }) => __awaiter(void 0, void 0, void 0, function* () {
+        if (scheme === "loader") {
+            return yield npm_utils_1.installUpgrade("@plasmicapp/loader-nextjs", {
+                workingDir: projectPath,
+            });
+        }
+        else {
+            return yield common_1.installCodegenDeps({ projectPath });
+        }
+    }),
+    overwriteConfig: (args) => __awaiter(void 0, void 0, void 0, function* () {
+        const { projectPath, scheme } = args;
+        if (scheme === "codegen") {
+            const nextjsConfigFile = path_1.default.join(projectPath, "next.config.js");
+            yield fs_1.promises.writeFile(nextjsConfigFile, `
+module.exports = {
+  eslint: {
+    ignoreDuringBuilds: true,
+  },
+  trailingSlash: true,
+  // Your NextJS config.
+};
+    `);
         }
-        yield file_utils_1.writeDefaultNextjsConfig(projectPath, projectId, true, projectApiToken, useTypescript);
     }),
-    overwriteFiles: (args) => __awaiter(void 0, void 0, void 0, function* () {
+    generateFiles: (args) => __awaiter(void 0, void 0, void 0, function* () {
         // 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_1.default.join(projectPath, "pages");
-        file_utils_1.deleteGlob(path_1.default.join(pagesPath, `*.*`), [
-            "[[...catchall]]",
-            "plasmic-host",
-        ]);
+        file_utils_1.deleteGlob(path_1.default.join(pagesPath, `*.*`));
+        const hostPage = path_1.default.join(pagesPath, `plasmic-host.${useTypescript ? "tsx" : "jsx"}`);
+        yield fs_1.promises.writeFile(hostPage, nextjs_1.makeNextjsHostPage(scheme));
+        if (scheme === "loader") {
+            const initFile = path_1.default.join(projectPath, `plasmic-init.${useTypescript ? "ts" : "js"}`);
+            yield fs_1.promises.writeFile(initFile, nextjs_1.makeNextjsInitPage(projectId, lang_utils_1.ensure(projectApiToken)));
+            // Write catch-all page for loader
+            const loaderPage = path_1.default.join(pagesPath, `[[...catchall]].${useTypescript ? "tsx" : "jsx"}`);
+            yield fs_1.promises.writeFile(loaderPage, nextjs_1.makeNextjsCatchallPage(useTypescript ? "ts" : "js"));
+        }
+        else {
+            yield common_1.runCodegenSync({
+                projectId,
+                projectApiToken,
+                projectPath,
+            });
+            // Overwrite the index file
+            yield file_utils_1.overwriteIndex(projectPath, "nextjs", scheme);
+            // Overwrite the wrapper files to wrap PlasmicRootProvider
+            const appFilePath = path_1.default.join(projectPath, "pages", `_app.js`);
+            yield fs_1.promises.writeFile(appFilePath, nextjs_1.wrapAppRootForCodegen());
+        }
     }),
     build: (args) => __awaiter(void 0, void 0, void 0, function* () {
         const { npmRunCmd, projectPath } = args;

package/dist/strategies/react.js

@@ -10,7 +10,9 @@ var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, ge
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 const cmd_utils_1 = require("../utils/cmd-utils");
+const file_utils_1 = require("../utils/file-utils");
 const npm_utils_1 = require("../utils/npm-utils");
+const common_1 = require("./common");
 const reactStrategy = {
     create: (args) => __awaiter(void 0, void 0, void 0, function* () {
         const { projectPath, useTypescript } = args;
@@ -22,17 +24,32 @@ const reactStrategy = {
         const templateArg = template ? ` --template ${template}` : "";
         yield cmd_utils_1.spawnOrFail(`${createCommand}${templateArg}`);
     }),
-    configLoader: (args) => __awaiter(void 0, void 0, void 0, function* () {
-        // this is unreachable for now, but should we have it ??
-        const { projectPath } = args;
-        const installResult = yield npm_utils_1.installUpgrade("@plasmicapp/loader-react", {
-            workingDir: projectPath,
-        });
-        if (!installResult) {
-            throw new Error("Failed to install the Plasmic dependency");
+    installDeps: ({ projectPath, scheme }) => __awaiter(void 0, void 0, void 0, function* () {
+        if (scheme === "loader") {
+            return yield npm_utils_1.installUpgrade("@plasmicapp/loader-react", {
+                workingDir: projectPath,
+            });
         }
+        else {
+            return yield common_1.installCodegenDeps({ projectPath });
+        }
+    }),
+    overwriteConfig: (args) => __awaiter(void 0, void 0, void 0, function* () {
+        // No config to overwrite
     }),
-    overwriteFiles: () => __awaiter(void 0, void 0, void 0, function* () {
+    generateFiles: ({ scheme, projectApiToken, projectId, projectPath, }) => __awaiter(void 0, void 0, void 0, function* () {
+        if (scheme === "loader") {
+            // Nothing to do
+        }
+        else {
+            yield common_1.runCodegenSync({
+                projectId,
+                projectApiToken,
+                projectPath,
+            });
+            // Overwrite the index file
+            yield file_utils_1.overwriteIndex(projectPath, "react", scheme);
+        }
         return;
     }),
     build: (args) => __awaiter(void 0, void 0, void 0, function* () {

package/dist/strategies/types.d.ts

@@ -1,3 +1,4 @@
+import { CodeScheme } from "..";
 interface CreateArgs {
     projectPath: string;
     template?: string;
@@ -6,21 +7,30 @@ 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 {
     projectPath: string;
     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>;
 }
 export {};

package/dist/templates/gatsby.d.ts

@@ -1,6 +1,11 @@
+import { CodeScheme } from "..";
 export declare const makeGatsbyDefaultPage: (format: "ts" | "js") => string;
 export declare const GATSBY_404: 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 makeGatsbyHostPage: (opts: {
+    useTypescript: boolean;
+    scheme: CodeScheme;
+}) => string;
 export declare const GATSBY_SSR_CONFIG: string;
 export declare const makeGatsbyPlasmicInit: (format: "ts" | "js") => string;
+export declare function wrapAppRootForCodegen(): string;

package/dist/templates/gatsby.js

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.makeGatsbyPlasmicInit = exports.GATSBY_SSR_CONFIG = exports.makeGatsbyHostPage = exports.GATSBY_PLUGIN_CONFIG = exports.GATSBY_404 = exports.makeGatsbyDefaultPage = void 0;
+exports.wrapAppRootForCodegen = 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";
@@ -78,13 +78,13 @@ const GATSBY_PLUGIN_CONFIG = (projectId, projectApiToken, useTypescript) => `
 },
 `;
 exports.GATSBY_PLUGIN_CONFIG = GATSBY_PLUGIN_CONFIG;
-const makeGatsbyHostPage = (format) => {
-    const ts = format === "ts";
-    return `
+const makeGatsbyHostPage = (opts) => {
+    const { useTypescript, scheme } = opts;
+    if (scheme === "loader") {
+        return `
 import * as React from "react"
 import {
-  PlasmicCanvasHost,${file_utils_1.ifTs(ts, `
-  InitOptions,`)}
+  PlasmicCanvasHost${file_utils_1.ifTs(useTypescript, `, InitOptions`)}
 } from "@plasmicapp/loader-gatsby"
 import { graphql } from "gatsby"
 import { initPlasmicLoaderWithRegistrations } from "../plasmic-init"
@@ -95,18 +95,40 @@ export const query = graphql\`
   }
 \`
 
-${file_utils_1.ifTs(ts, `interface HostProps {
+${file_utils_1.ifTs(useTypescript, `interface HostProps {
   data: {
     plasmicOptions: InitOptions;
   }
 }
 `)}
-export default function Host({ data }${file_utils_1.ifTs(ts, ": HostProps")}) {
+export default function Host({ data }${file_utils_1.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 />
+  );
+}
+    `;
+    }
 };
 exports.makeGatsbyHostPage = makeGatsbyHostPage;
 exports.GATSBY_SSR_CONFIG = `
@@ -128,6 +150,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"
@@ -168,3 +211,18 @@ export function initPlasmicLoaderWithRegistrations(plasmicOptions${file_utils_1.
 `.trim();
 };
 exports.makeGatsbyPlasmicInit = makeGatsbyPlasmicInit;
+function wrapAppRootForCodegen() {
+    return `
+import React from "react";
+import { PlasmicRootProvider } from "@plasmicapp/react-web";
+
+export const wrapRootElement = ({ element }) => {
+  return (
+    <PlasmicRootProvider>
+      {element}
+    </PlasmicRootProvider>
+  );
+}
+  `;
+}
+exports.wrapAppRootForCodegen = wrapAppRootForCodegen;

package/dist/templates/nextjs.d.ts

@@ -1,3 +1,5 @@
+import { CodeScheme } from "..";
 export declare const makeNextjsInitPage: (projectId: string, projectApiToken: string) => string;
 export declare function makeNextjsCatchallPage(format: "ts" | "js"): string;
-export declare function makeNextjsHostPage(): string;
+export declare function makeNextjsHostPage(scheme: CodeScheme): string;
+export declare function wrapAppRootForCodegen(): string;