create-plasmic-app 0.0.63 → 0.0.64

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "create-plasmic-app",
-  "version": "0.0.63",
+  "version": "0.0.64",
   "description": "Create Plasmic-powered React apps",
   "main": "./dist/lib.js",
   "types": "./dist/lib.d.ts",
@@ -16,6 +16,7 @@
     "test": "jest --colors",
     "test:debug": "node --inspect-brk node_modules/.bin/jest --runInBand --watch",
     "build": "eslint 'src/**' && tsc",
+    "run-cpa": "yarn build && ts-node run-cpa.ts",
     "create-plasmic-app": "ts-node src/index.ts",
     "prepare": "if-env PREPARE_NO_BUILD=true || yarn build"
   },
@@ -36,7 +37,7 @@
     "jest": "^26.6.3",
     "jest-circus": "^26.6.3",
     "ts-jest": "^26.5.3",
-    "ts-node": "^9.1.1",
+    "ts-node": "^10.9.1",
     "typescript": "^4.2.3"
   },
   "dependencies": {
@@ -54,5 +55,5 @@
     "validate-npm-package-name": "^3.0.0",
     "yargs": "^16.2.0"
   },
-  "gitHead": "c3c19ae2a2444610bc745c84e140354dfb991d61"
+  "gitHead": "56c15e54ed33294aaef992171bbb1b3ab1aa6c3a"
 }

package/run-cpa.ts

@@ -0,0 +1,151 @@
+import * as fs from "fs";
+import * as inquirer from "inquirer";
+import * as path from "path";
+import yargs from "yargs";
+import { spawnOrFail } from "./src/utils/cmd-utils";
+import { PlatformType, SchemeType } from "./src/utils/types";
+
+// https://studio.plasmic.app/projects/47tFXWjN2C4NyHFGGpaYQ3
+const projectId = "47tFXWjN2C4NyHFGGpaYQ3";
+
+interface ArgSet {
+  platform: PlatformType;
+  appDir?: boolean;
+  scheme: SchemeType;
+  typescript: boolean;
+}
+
+async function run() {
+  const allArgSets: ArgSet[] = [];
+  [false, true].forEach((typescript) => {
+    (["loader", "codegen"] as const).forEach((scheme) => {
+      allArgSets.push({
+        platform: "nextjs",
+        appDir: false,
+        scheme,
+        typescript,
+      });
+      allArgSets.push({
+        platform: "gatsby",
+        scheme,
+        typescript,
+      });
+      allArgSets.push({
+        platform: "react",
+        scheme,
+        typescript,
+      });
+    });
+
+    allArgSets.push({
+      platform: "nextjs",
+      appDir: true,
+      scheme: "loader", // TODO: support codegen with appDir
+      typescript,
+    });
+  });
+  const allArgSetNames = allArgSets.map(getProjectName).sort();
+
+  let yargsCommand = yargs.command(
+    "$0 [arg-sets..]",
+    `Runs create-plasmic-app with predefined sets of args for you.
+
+Valid arg sets:\n\tall\n\t${allArgSetNames.join("\n\t")}`,
+    (yargs) => yargs
+  );
+
+  const cliArgSetNames = yargsCommand.strict().argv["arg-sets"] as
+    | string[]
+    | undefined;
+
+  // If arg sets were not passed in via CLI args, prompt for them.
+  const selectedArgSetNames =
+    cliArgSetNames && cliArgSetNames.length > 0
+      ? cliArgSetNames
+      : ((
+          await inquirer.prompt({
+            name: "arg-sets",
+            type: "checkbox",
+            message: "Select arg sets:",
+            choices: allArgSetNames,
+            pageSize: allArgSetNames.length,
+            validate: (input) => {
+              if (input.length === 0) {
+                return "Please select at least 1 arg set.";
+              }
+              return true;
+            },
+          })
+        )["arg-sets"] as string[]);
+
+  let selectedArgSets: ArgSet[];
+  if (selectedArgSetNames.includes("all")) {
+    selectedArgSets = allArgSets;
+  } else {
+    const allArgSetMap = new Map(
+      allArgSets.map((argSet) => [getProjectName(argSet), argSet])
+    );
+    selectedArgSets = selectedArgSetNames.map((name) => {
+      const argSet = allArgSetMap.get(name);
+      if (argSet) {
+        return argSet;
+      } else {
+        console.error(`Invalid arg set: ${name}`);
+        process.exit(1);
+      }
+    });
+  }
+
+  // we use /tmp to avoid plasmic CLI thinking we are in a TypeScript project all the time
+  // if everything succeeds, we move it back to this directory
+  const tmpOutDir = "/tmp/cpa-out";
+  const finalOutDir = path.resolve("cpa-out");
+
+  // delete existing projects
+  fs.rmSync(tmpOutDir, { recursive: true, force: true });
+
+  // run create-plasmic-app and build
+  for (const argSet of selectedArgSets) {
+    const projectName = getProjectName(argSet);
+
+    const options = [
+      `--platform=${argSet.platform}`,
+      `--appDir=${argSet.appDir}`,
+      `--scheme=${argSet.scheme}`,
+      `--typescript=${argSet.typescript}`,
+      `--projectId=${projectId}`,
+    ].join(" ");
+
+    const cpa = path.resolve("dist/index.js");
+    // this probably only works on *nix systems, sorry :(
+    const cmd = `mkdir -p ${tmpOutDir} && cd ${tmpOutDir} && node ${cpa} ${projectName} ${options} && cd ${projectName} && yarn build`;
+    await spawnOrFail(cmd);
+
+    const tmpProjectDir = path.join(tmpOutDir, projectName);
+    const finalProjectDir = path.join(finalOutDir, projectName);
+
+    // delete any git repos
+    fs.rmSync(path.join(tmpProjectDir, ".git"), {
+      recursive: true,
+      force: true,
+    });
+
+    // move back to create-plasmic-app directory
+    fs.rmSync(finalProjectDir, { recursive: true, force: true });
+    fs.renameSync(tmpProjectDir, finalProjectDir);
+  }
+}
+run().catch((e) => {
+  console.error(e);
+  process.exit(1);
+});
+
+function getProjectName(argSet: ArgSet) {
+  const projectNameInputs = [
+    argSet.platform,
+    argSet.appDir === undefined ? undefined : argSet.appDir ? "app" : "pages",
+    argSet.scheme,
+    argSet.typescript ? "ts" : "js",
+  ];
+  return projectNameInputs.filter((input) => !!input).join("-");
+}

package/src/{strategies → gatsby}/gatsby.ts

@@ -1,6 +1,12 @@
 import { createReadStream, existsSync, promises as fs } from "fs";
 import path from "path";
 import * as readline from "readline";
+import { spawnOrFail } from "../utils/cmd-utils";
+import { installCodegenDeps, runCodegenSync } from "../utils/codegen";
+import { deleteGlob, ifTs, overwriteIndex } from "../utils/file-utils";
+import { ensure } from "../utils/lang-utils";
+import { installUpgrade } from "../utils/npm-utils";
+import { CPAStrategy } from "../utils/strategy";
 import {
   GATSBY_404,
   GATSBY_PLUGIN_CONFIG,
@@ -9,40 +15,34 @@ import {
   makeGatsbyHostPage,
   makeGatsbyPlasmicInit,
   wrapAppRootForCodegen,
-} from "../templates/gatsby";
-import { spawnOrFail } from "../utils/cmd-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";
+} from "./template";
 
 export const GATSBY_TEMPLATES = {
   js: `https://github.com/gatsbyjs/gatsby-starter-minimal.git`,
   ts: `https://github.com/gatsbyjs/gatsby-starter-minimal-ts.git`,
 };
 
-const gatsbyStrategy: CPAStrategy = {
+export const gatsbyStrategy: CPAStrategy = {
   create: async (args) => {
-    const { projectPath, template, useTypescript } = args;
+    const { projectPath, template, jsOrTs } = args;
     if (template) {
       console.log(
         `Warning: Ignoring template '${template}' (argument is not supported by Gatsby).`
       );
     }
-    const gatsbyTemplate = GATSBY_TEMPLATES[useTypescript ? "ts" : "js"];
+    const gatsbyTemplate = GATSBY_TEMPLATES[jsOrTs];
     const createCommand = `git clone ${gatsbyTemplate} ${projectPath} --recursive --depth 1 --quiet`;
     await spawnOrFail(`${createCommand}`);
     // Remove .git and LICENSE so that we don't generate linked outputs
     await spawnOrFail(`rm -rf ${projectPath}/.git`);
     await spawnOrFail(`rm -rf ${projectPath}/LICENSE`);
   },
-  installDeps: async ({ projectPath, scheme, useTypescript }) => {
+  installDeps: async ({ projectPath, scheme, jsOrTs }) => {
     const installedHelmet = await installUpgrade("react-helmet", {
       workingDir: projectPath,
     });
     const installedHelmetTypes =
-      !useTypescript ||
+      jsOrTs === "js" ||
       (await installUpgrade("@types/react-helmet", {
         workingDir: projectPath,
         dev: true,
@@ -66,15 +66,7 @@ const gatsbyStrategy: CPAStrategy = {
     }
   },
   overwriteConfig: async (args) => {
-    const {
-      projectId,
-      projectPath,
-      projectApiToken,
-      useTypescript,
-      scheme,
-    } = args;
-    const extension = useTypescript ? "ts" : "js";
-
+    const { projectId, projectPath, projectApiToken, jsOrTs, scheme } = args;
     const packageName = path.basename(projectPath);
 
     // Update package.json: adding name and description, removing license and author
@@ -94,7 +86,7 @@ const gatsbyStrategy: CPAStrategy = {
       // create-gatsby will create a default gatsby-config that we need to modify
       const gatsbyConfigFile = path.join(
         projectPath,
-        `gatsby-config.${extension}`
+        `gatsby-config.${jsOrTs}`
       );
       const rl = readline.createInterface({
         input: createReadStream(gatsbyConfigFile),
@@ -102,11 +94,11 @@ const gatsbyStrategy: CPAStrategy = {
       });
       // Typescript doesn't accept require.resolve
       // https://www.gatsbyjs.com/docs/how-to/custom-configuration/typescript/#requireresolve
-      let result = useTypescript ? `import path from "path";\n` : "";
+      let result = ifTs(jsOrTs, `import path from "path";\n`);
       const pluginConfig = GATSBY_PLUGIN_CONFIG(
         projectId,
         ensure(projectApiToken),
-        useTypescript
+        jsOrTs
       );
       for await (const line of rl) {
         if (line.includes("plugins: []")) {
@@ -123,46 +115,38 @@ const gatsbyStrategy: CPAStrategy = {
   generateFiles: async (args) => {
     // in gatsby we can delete all existing pages/components, since all pages are going
     // to be handled by templates/defaultPlasmicPage
-    const {
-      projectId,
-      projectApiToken,
-      projectPath,
-      useTypescript,
-      scheme,
-    } = args;
-
-    const extension = useTypescript ? "ts" : "js";
+    const { projectId, projectApiToken, projectPath, jsOrTs, scheme } = args;
 
     deleteGlob(path.join(projectPath, "src/@(pages|components|templates)/*.*"));
 
     // Create a very basic 404 page - `gatsby build` fails without it.
     await fs.writeFile(
-      path.join(projectPath, `src/pages/404.${extension}`),
+      path.join(projectPath, `src/pages/404.${jsOrTs}`),
       GATSBY_404
     );
 
     // Add plasmic-host page
     await fs.writeFile(
-      path.join(projectPath, `src/pages/plasmic-host.${extension}x`),
+      path.join(projectPath, `src/pages/plasmic-host.${jsOrTs}x`),
       makeGatsbyHostPage({
-        useTypescript,
+        jsOrTs,
         scheme,
       })
     );
 
     // Start with an empty gatsby-node
-    await fs.writeFile(path.join(projectPath, `gatsby-node.${extension}`), "");
+    await fs.writeFile(path.join(projectPath, `gatsby-node.${jsOrTs}`), "");
 
     // Updates `gatsby-ssr` to include script tag for preamble
     await fs.writeFile(
-      path.join(projectPath, `gatsby-ssr.${extension}x`),
+      path.join(projectPath, `gatsby-ssr.${jsOrTs}x`),
       GATSBY_SSR_CONFIG
     );
 
     if (scheme === "loader") {
       await fs.writeFile(
-        path.join(projectPath, `src/plasmic-init.${extension}`),
-        makeGatsbyPlasmicInit(extension)
+        path.join(projectPath, `src/plasmic-init.${jsOrTs}`),
+        makeGatsbyPlasmicInit(jsOrTs)
       );
 
       const templatesFolder = path.join(projectPath, "src/templates");
@@ -171,9 +155,9 @@ const gatsbyStrategy: CPAStrategy = {
       }
       const defaultPagePath = path.join(
         templatesFolder,
-        `defaultPlasmicPage.${extension}x`
+        `defaultPlasmicPage.${jsOrTs}x`
       );
-      await fs.writeFile(defaultPagePath, makeGatsbyDefaultPage(extension));
+      await fs.writeFile(defaultPagePath, makeGatsbyDefaultPage(jsOrTs));
     } else {
       await runCodegenSync({
         projectId,
@@ -188,11 +172,11 @@ const gatsbyStrategy: CPAStrategy = {
       const wrapperContent = wrapAppRootForCodegen();
       const browserFilePath = path.join(
         projectPath,
-        `gatsby-browser.${extension}x`
+        `gatsby-browser.${jsOrTs}x`
       );
       await fs.writeFile(browserFilePath, wrapperContent);
 
-      const ssrFilePath = path.join(projectPath, `gatsby-ssr.${extension}x`);
+      const ssrFilePath = path.join(projectPath, `gatsby-ssr.${jsOrTs}x`);
       await fs.writeFile(ssrFilePath, wrapperContent);
     }
   },
@@ -205,5 +189,3 @@ const gatsbyStrategy: CPAStrategy = {
     await spawnOrFail(`${npmRunCmd} build`, projectPath);
   },
 };
-
-export default gatsbyStrategy;

package/src/{templates/gatsby.ts → gatsby/template.ts}

@@ -1,21 +1,19 @@
-import { CodeScheme } from "..";
 import { ifTs } from "../utils/file-utils";
+import { JsOrTs, SchemeType } from "../utils/types";
 
-export const makeGatsbyDefaultPage = (format: "ts" | "js"): string => {
-  const ts = format === "ts";
-  return `
-import React from "react";
+export function makeGatsbyDefaultPage(jsOrTs: JsOrTs): string {
+  return `import React from "react";
 import Helmet from "react-helmet";
 import {
   PlasmicComponent,
   PlasmicRootProvider,${ifTs(
-    ts,
+    jsOrTs,
     `
   InitOptions,
   ComponentRenderData,`
   )}
 } from "@plasmicapp/loader-gatsby";
-import { graphql${ifTs(ts, ", PageProps")} } from "gatsby";
+import { graphql${ifTs(jsOrTs, ", PageProps")} } from "gatsby";
 import { initPlasmicLoaderWithRegistrations } from "../plasmic-init";
 
 export const query = graphql\`
@@ -26,7 +24,7 @@ export const query = graphql\`
 \`;
 
 ${ifTs(
-  ts,
+  jsOrTs,
   `interface PlasmicGatsbyPageProps extends PageProps {
   data: {
     plasmicOptions: InitOptions
@@ -36,7 +34,7 @@ ${ifTs(
 `
 )}
 const PlasmicGatsbyPage = ({ data, location }${ifTs(
-    ts,
+    jsOrTs,
     ": PlasmicGatsbyPageProps"
   )}) => {
   const {
@@ -65,22 +63,21 @@ const PlasmicGatsbyPage = ({ data, location }${ifTs(
 };
 
 export default PlasmicGatsbyPage;
-`.trim();
-};
+`;
+}
 
-export const GATSBY_404 = `
-const NotFound = () => {
+export const GATSBY_404 = `const NotFound = () => {
   return "Not Found";
 };
 export default NotFound;
-`.trim();
+`;
 
-export const GATSBY_PLUGIN_CONFIG = (
+export function GATSBY_PLUGIN_CONFIG(
   projectId: string,
   projectApiToken: string,
-  useTypescript: boolean
-): string => `
-{
+  jsOrTs: JsOrTs
+): string {
+  return `{
   resolve: "@plasmicapp/loader-gatsby",
   options: {
     projects: [
@@ -91,27 +88,25 @@ export const GATSBY_PLUGIN_CONFIG = (
     ], // An array of project ids.
     preview: false,
     defaultPlasmicPage: ${
-      useTypescript ? "path" : "require"
-    }.resolve("./src/templates/defaultPlasmicPage.${
-  useTypescript ? "tsx" : "jsx"
-}"),
+      jsOrTs === "ts" ? "path" : "require"
+    }.resolve("./src/templates/defaultPlasmicPage.${jsOrTs}x"),
   },
 },
 {
   resolve: "gatsby-plugin-react-helmet",
 }
 `;
+}
 
-export const makeGatsbyHostPage = (opts: {
-  useTypescript: boolean;
-  scheme: CodeScheme;
-}): string => {
-  const { useTypescript, scheme } = opts;
+export function makeGatsbyHostPage(opts: {
+  jsOrTs: JsOrTs;
+  scheme: SchemeType;
+}): string {
+  const { jsOrTs, scheme } = opts;
   if (scheme === "loader") {
-    return `
-import * as React from "react"
+    return `import * as React from "react"
 import {
-  PlasmicCanvasHost${ifTs(useTypescript, `, InitOptions`)}
+  PlasmicCanvasHost${ifTs(jsOrTs, `, InitOptions`)}
 } from "@plasmicapp/loader-gatsby"
 import { graphql } from "gatsby"
 import { initPlasmicLoaderWithRegistrations } from "../plasmic-init"
@@ -123,7 +118,7 @@ export const query = graphql\`
 \`
 
 ${ifTs(
-  useTypescript,
+  jsOrTs,
   `interface HostProps {
   data: {
     plasmicOptions: InitOptions;
@@ -131,15 +126,14 @@ ${ifTs(
 }
 `
 )}
-export default function Host({ data }${ifTs(useTypescript, ": HostProps")}) {
+export default function Host({ data }${ifTs(jsOrTs, ": HostProps")}) {
   const { plasmicOptions } = data
   initPlasmicLoaderWithRegistrations(plasmicOptions)
   return <PlasmicCanvasHost />
 }
-    `.trim();
+`;
   } else {
-    return `
-import * as React from "react"
+    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
@@ -156,12 +150,11 @@ export default function PlasmicHost() {
     <PlasmicCanvasHost />
   );
 }
-    `;
+`;
   }
-};
+}
 
-export const GATSBY_SSR_CONFIG = `
-/**
+export const GATSBY_SSR_CONFIG = `/**
  * Implement Gatsby's SSR (Server Side Rendering) APIs in this file.
  *
  * See: https://www.gatsbyjs.com/docs/ssr-apis/
@@ -205,21 +198,19 @@ exports.onRenderBody = ({ pathname, setHeadComponents }) => {
     setHeadComponents(HeadComponents)
   }
 }
-`.trim();
+`;
 
-export const makeGatsbyPlasmicInit = (format: "ts" | "js"): string => {
-  const ts = format === "ts";
-  return `
-import {
+export function makeGatsbyPlasmicInit(jsOrTs: JsOrTs): string {
+  return `import {
   initPlasmicLoader,${ifTs(
-    ts,
+    jsOrTs,
     `
   InitOptions,`
   )}
 } from "@plasmicapp/loader-gatsby";
 
 export function initPlasmicLoaderWithRegistrations(plasmicOptions${ifTs(
-    ts,
+    jsOrTs,
     ": InitOptions"
   )}) {
   const PLASMIC = initPlasmicLoader(plasmicOptions);
@@ -235,12 +226,11 @@ export function initPlasmicLoaderWithRegistrations(plasmicOptions${ifTs(
 
   return PLASMIC;
 }
-`.trim();
-};
+`;
+}
 
 export function wrapAppRootForCodegen(): string {
-  return `
-import React from "react";
+  return `import React from "react";
 import { PlasmicRootProvider } from "@plasmicapp/react-web";
 import Helmet from "react-helmet";
 
@@ -251,5 +241,5 @@ export const wrapRootElement = ({ element }) => {
     </PlasmicRootProvider>
   );
 }
-  `;
+`;
 }