create-plasmic-app 0.0.33 → 0.0.37

package/src/strategies/common.ts

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

package/src/strategies/gatsby.ts

@@ -3,12 +3,18 @@ import path from "path";
 import * as readline from "readline";
 import {
   GATSBY_404,
-  GATSBY_DEFAULT_PAGE,
   GATSBY_PLUGIN_CONFIG,
+  GATSBY_SSR_CONFIG,
+  makeGatsbyDefaultPage,
+  makeGatsbyHostPage,
+  makeGatsbyPlasmicInit,
+  wrapAppRootForCodegen,
 } from "../templates/gatsby";
 import { spawnOrFail } from "../utils/cmd-utils";
-import { deleteGlob } from "../utils/file-utils";
+import { deleteGlob, overwriteIndex } from "../utils/file-utils";
+import { ensure } from "../utils/lang-utils";
 import { installUpgrade } from "../utils/npm-utils";
+import { installCodegenDeps, runCodegenSync } from "./common";
 import { CPAStrategy } from "./types";
 
 const gatsbyStrategy: CPAStrategy = {
@@ -17,59 +23,117 @@ 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 installResult = await installUpgrade("@plasmicapp/loader-gatsby", {
-      workingDir: projectPath,
-    });
-
-    if (!installResult) {
-      throw new Error("Failed to install the Plasmic dependency");
+  installDeps: async ({ projectPath, scheme }) => {
+    if (scheme === "loader") {
+      return await installUpgrade("@plasmicapp/loader-gatsby", {
+        workingDir: projectPath,
+      });
+    } else {
+      return await installCodegenDeps({ projectPath });
     }
+  },
+  overwriteConfig: async (args) => {
+    const {
+      projectId,
+      projectPath,
+      projectApiToken,
+      useTypescript,
+      scheme,
+    } = args;
 
-    // create-gatsby will create a default gatsby-config.js that we need to modify
-    const gatsbyConfigFile = path.join(projectPath, "gatsby-config.js");
-    const rl = readline.createInterface({
-      input: createReadStream(gatsbyConfigFile),
-      crlfDelay: Infinity,
-    });
-    let result = "";
-    for await (const line of rl) {
-      result += line + "\n";
-      // Prepend PlasmicLoader to list of plugins
-      if (line.includes("plugins:")) {
-        result += GATSBY_PLUGIN_CONFIG(projectId, projectApiToken);
+    if (scheme === "loader") {
+      // create-gatsby will create a default gatsby-config.js that we need to modify
+      const gatsbyConfigFile = path.join(projectPath, "gatsby-config.js");
+      const rl = readline.createInterface({
+        input: createReadStream(gatsbyConfigFile),
+        crlfDelay: Infinity,
+      });
+      let result = "";
+      for await (const line of rl) {
+        result += line + "\n";
+        // Prepend PlasmicLoader to list of plugins
+        if (line.includes("plugins:")) {
+          result += GATSBY_PLUGIN_CONFIG(
+            projectId,
+            ensure(projectApiToken),
+            useTypescript
+          );
+        }
       }
+      await fs.writeFile(gatsbyConfigFile, result);
     }
-    await fs.writeFile(gatsbyConfigFile, result);
   },
-  overwriteFiles: async (args) => {
+  generateFiles: async (args) => {
     // in gatsby we can delete all existing pages/components, since all pages are going
     // to be handled by templates/defaultPlasmicPage
-    const { projectPath } = args;
+    const {
+      projectId,
+      projectApiToken,
+      projectPath,
+      useTypescript,
+      scheme,
+    } = args;
+
+    const extension = useTypescript ? "ts" : "js";
 
     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);
+
+    // Add plasmic-host page
+    await fs.writeFile(
+      path.join(projectPath, `src/pages/plasmic-host.${extension}x`),
+      makeGatsbyHostPage({
+        useTypescript,
+        scheme,
+      })
+    );
 
     // Start with an empty gatsby-node.js
     await fs.writeFile(path.join(projectPath, "gatsby-node.js"), "");
 
-    const templatesFolder = path.join(projectPath, "src/templates");
-    const defaultPagePath = path.join(templatesFolder, "defaultPlasmicPage.js");
+    // Updates `gatsby-ssr` to include script tag for preamble
+    await fs.writeFile(
+      path.join(projectPath, "gatsby-ssr.js"),
+      GATSBY_SSR_CONFIG
+    );
+
+    if (scheme === "loader") {
+      await fs.writeFile(
+        path.join(projectPath, `src/plasmic-init.${extension}`),
+        makeGatsbyPlasmicInit(extension)
+      );
+
+      const templatesFolder = path.join(projectPath, "src/templates");
+      if (!existsSync(templatesFolder)) {
+        await fs.mkdir(templatesFolder);
+      }
+      const defaultPagePath = path.join(
+        templatesFolder,
+        `defaultPlasmicPage.${extension}x`
+      );
+      await fs.writeFile(defaultPagePath, makeGatsbyDefaultPage(extension));
+    } else {
+      await runCodegenSync({
+        projectId,
+        projectApiToken,
+        projectPath,
+      });
+
+      // Overwrite the index file
+      await overwriteIndex(projectPath, "gatsby", scheme);
+
+      // Overwrite the wrapper files to wrap PlasmicRootProvider
+      const wrapperContent = wrapAppRootForCodegen();
+      const browserFilePath = path.join(projectPath, "gatsby-browser.js");
+      await fs.writeFile(browserFilePath, wrapperContent);
 
-    if (!existsSync(templatesFolder)) {
-      await fs.mkdir(templatesFolder);
+      const ssrFilePath = path.join(projectPath, "gatsby-ssr.js");
+      await fs.writeFile(ssrFilePath, wrapperContent);
     }
-    await fs.writeFile(defaultPagePath, GATSBY_DEFAULT_PAGE);
   },
   build: async (args) => {
     const { npmRunCmd, projectPath } = args;

package/src/strategies/nextjs.ts

@@ -1,7 +1,16 @@
+import fs from "fs/promises";
 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,12 +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 {
@@ -20,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,12 +1,22 @@
-export const GATSBY_DEFAULT_PAGE = `
+import { CodeScheme } from "..";
+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) {
@@ -15,7 +25,17 @@ export const query = graphql\`
   }
 \`;
 
-const PlasmicGatsbyPage = ({ data, location }) => {
+${ifTs(
+  ts,
+  `interface PlasmicGatsbyPageProps {
+  data: {
+    plasmicOptions: InitOptions
+    plasmicComponents: ComponentRenderData
+  }
+}
+`
+)}
+const PlasmicGatsbyPage = ({ data }${ifTs(ts, ": PlasmicGatsbyPageProps")}) => {
   const {
     plasmicComponents,
     plasmicOptions,
@@ -24,7 +44,7 @@ const PlasmicGatsbyPage = ({ data, location }) => {
   const pageMetadata = pageMeta.pageMetadata;
   return (
     <PlasmicRootProvider
-      loader={initPlasmicLoader(plasmicOptions)}
+      loader={initPlasmicLoaderWithRegistrations(plasmicOptions)}
       prefetchedData={plasmicComponents}
     >
       <Helmet>
@@ -40,6 +60,7 @@ const PlasmicGatsbyPage = ({ data, location }) => {
 
 export default PlasmicGatsbyPage;
 `.trim();
+};
 
 export const GATSBY_404 = `
 const NotFound = () => {
@@ -50,7 +71,8 @@ export default NotFound;
 
 export const GATSBY_PLUGIN_CONFIG = (
   projectId: string,
-  projectApiToken: string
+  projectApiToken: string,
+  useTypescript: boolean
 ): string => `
 {
   resolve: "@plasmicapp/loader-gatsby",
@@ -61,7 +83,148 @@ 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 = (opts: {
+  useTypescript: boolean;
+  scheme: CodeScheme;
+}): string => {
+  const { useTypescript, scheme } = opts;
+  if (scheme === "loader") {
+    return `
+import * as React from "react"
+import {
+  PlasmicCanvasHost${ifTs(useTypescript, `, InitOptions`)}
+} from "@plasmicapp/loader-gatsby"
+import { graphql } from "gatsby"
+import { initPlasmicLoaderWithRegistrations } from "../plasmic-init"
+
+export const query = graphql\`
+  query {
+    plasmicOptions
+  }
+\`
+
+${ifTs(
+  useTypescript,
+  `interface HostProps {
+  data: {
+    plasmicOptions: InitOptions;
+  }
+}
+`
+)}
+export default function Host({ data }${ifTs(useTypescript, ": HostProps")}) {
+  const { plasmicOptions } = data
+  initPlasmicLoaderWithRegistrations(plasmicOptions)
+  return <PlasmicCanvasHost />
+}
+    `.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 = `
+/**
+ * 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();
+};
+
+export function wrapAppRootForCodegen() {
+  return `
+import React from "react";
+import { PlasmicRootProvider } from "@plasmicapp/react-web";
+
+export const wrapRootElement = ({ element }) => {
+  return (
+    <PlasmicRootProvider>
+      {element}
+    </PlasmicRootProvider>
+  );
+}
+  `;
+}