create-plasmic-app 0.0.63 → 0.0.64

package/src/nextjs/templates/app-loader/plasmic-init.ts

@@ -0,0 +1,22 @@
+export function makePlasmicInit_app_loader(
+  projectId: string,
+  projectApiToken: string
+): string {
+  return `import { initPlasmicLoader } from "@plasmicapp/loader-nextjs/react-server-conditional";
+
+export const PLASMIC = initPlasmicLoader({
+  projects: [
+    {
+      id: "${projectId}",
+      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,
+});
+`;
+}

package/src/nextjs/templates/pages-codegen/app.ts

@@ -0,0 +1,24 @@
+import { ifTs } from "../../../utils/file-utils";
+import { JsOrTs } from "../../../utils/types";
+
+export function makeCustomApp_pages_codegen(jsOrTs: JsOrTs): string {
+  return `import 'styles/globals.css'
+import { PlasmicRootProvider } from "@plasmicapp/react-web";${ifTs(
+    jsOrTs,
+    `
+import type { AppProps } from "next/app";`
+  )}
+import Head from "next/head";
+
+export default function MyApp({ Component, pageProps }${ifTs(
+    jsOrTs,
+    `: AppProps`
+  )}) {
+  return (
+    <PlasmicRootProvider Head={Head}>
+      <Component {...pageProps} />
+    </PlasmicRootProvider>
+  );
+}
+`;
+}

package/src/nextjs/templates/pages-codegen/plasmic-host.ts

@@ -0,0 +1,18 @@
+export function makePlasmicHostPage_pages_codegen(): string {
+  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 />;
+}
+`;
+}

package/src/nextjs/templates/pages-loader/catchall-page.ts

@@ -0,0 +1,81 @@
+import { ifTs } from "../../../utils/file-utils";
+import { JsOrTs } from "../../../utils/types";
+
+export function makeCatchallPage_pages_loader(jsOrTs: JsOrTs): string {
+  return `import * as React from "react";
+import {
+  PlasmicComponent,
+  extractPlasmicQueryData,
+  ComponentRenderData,
+  PlasmicRootProvider,
+} from "@plasmicapp/loader-nextjs";
+${ifTs(jsOrTs, `import type { GetStaticPaths, GetStaticProps } from "next";\n`)}
+import Error from "next/error";
+import { useRouter } from "next/router";
+import { PLASMIC } from "plasmic-init";
+
+export default function PlasmicLoaderPage(props${ifTs(
+    jsOrTs,
+    `: {
+  plasmicData?: ComponentRenderData;
+  queryCache?: Record<string, any>;
+}`
+  )}) {
+  const { plasmicData, queryCache } = props;
+  const router = useRouter();
+  if (!plasmicData || plasmicData.entryCompMetas.length === 0) {
+    return <Error statusCode={404} />;
+  }
+  const pageMeta = plasmicData.entryCompMetas[0];
+  return (
+    <PlasmicRootProvider
+      loader={PLASMIC}
+      prefetchedData={plasmicData}
+      prefetchedQueryData={queryCache}
+      pageParams={pageMeta.params}
+      pageQuery={router.query}
+    >
+      <PlasmicComponent component={pageMeta.displayName} />
+    </PlasmicRootProvider>
+  );
+}
+
+export const getStaticProps${ifTs(
+    jsOrTs,
+    `: 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) {
+    // non-Plasmic catch-all
+    return { props: {} };
+  }
+  const pageMeta = plasmicData.entryCompMetas[0];
+  // Cache the necessary data fetched for the page
+  const queryCache = await extractPlasmicQueryData(
+    <PlasmicRootProvider
+      loader={PLASMIC}
+      prefetchedData={plasmicData}
+      pageParams={pageMeta.params}
+    >
+      <PlasmicComponent component={pageMeta.displayName} />
+    </PlasmicRootProvider>
+  );
+  // Use revalidate if you want incremental static regeneration
+  return { props: { plasmicData, queryCache }, revalidate: 60 };
+}
+
+export const getStaticPaths${ifTs(jsOrTs, `: GetStaticPaths`)} = async () => {
+  const pageModules = await PLASMIC.fetchPages();
+  return {
+    paths: pageModules.map((mod) => ({
+      params: {
+        catchall: mod.path.substring(1).split("/"),
+      },
+    })),
+    fallback: "blocking",
+  };
+}
+`;
+}

package/src/nextjs/templates/pages-loader/plasmic-host.ts

@@ -0,0 +1,10 @@
+export function makePlasmicHostPage_pages_loader(): string {
+  return `import * as React from 'react';
+import { PlasmicCanvasHost } from '@plasmicapp/loader-nextjs';
+import { PLASMIC } from 'plasmic-init';
+
+export default function PlasmicHost() {
+  return PLASMIC && <PlasmicCanvasHost />;
+}
+`;
+}

package/src/nextjs/templates/pages-loader/plasmic-init.ts

@@ -0,0 +1,31 @@
+export function makePlasmicInit_pages_loader(
+  projectId: string,
+  projectApiToken: string
+): string {
+  return `import { initPlasmicLoader } from "@plasmicapp/loader-nextjs";
+
+export const PLASMIC = initPlasmicLoader({
+  projects: [
+    {
+      id: "${projectId}",
+      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(...);
+`;
+}

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

@@ -1,18 +1,18 @@
 import fs from "fs";
 import path from "path";
 import { spawnOrFail } from "../utils/cmd-utils";
+import { installCodegenDeps, runCodegenSync } from "../utils/codegen";
 import { overwriteIndex } from "../utils/file-utils";
 import { installUpgrade } from "../utils/npm-utils";
-import { installCodegenDeps, runCodegenSync } from "./common";
-import { CPAStrategy } from "./types";
+import { CPAStrategy } from "../utils/strategy";
 
-const reactStrategy: CPAStrategy = {
+export const reactStrategy: CPAStrategy = {
   create: async (args) => {
-    const { projectPath, useTypescript } = args;
+    const { projectPath, jsOrTs } = args;
     let { template } = args;
     const createCommand = `npx create-react-app@latest ${projectPath}`;
 
-    if (!template && useTypescript) {
+    if (!template && jsOrTs === "ts") {
       template = "typescript";
     }
 
@@ -36,7 +36,7 @@ const reactStrategy: CPAStrategy = {
     projectApiToken,
     projectId,
     projectPath,
-    useTypescript,
+    jsOrTs,
   }) => {
     if (scheme === "loader") {
       // Nothing to do
@@ -51,11 +51,11 @@ const reactStrategy: CPAStrategy = {
       await overwriteIndex(projectPath, "react", scheme);
     }
 
-    // Deactivate React.StrictMode from index.tsx
+    // Deactivate React.StrictMode from index.js or index.tsx
     const indexFileName = path.join(
       projectPath,
       "src",
-      `index.${useTypescript ? "tsx" : "js"}`
+      `index.${jsOrTs === "js" ? "js" : "tsx"}`
     );
     let indexFile = fs.readFileSync(indexFileName).toString();
     indexFile = indexFile.replace("<React.StrictMode>", "");
@@ -69,5 +69,3 @@ const reactStrategy: CPAStrategy = {
     await spawnOrFail(`${npmRunCmd} build`, projectPath);
   },
 };
-
-export default reactStrategy;

package/src/templates/readme.ts

@@ -1,8 +1,7 @@
-import { PlatformType, toString } from "../lib";
+import { PlatformType, platformTypeToString } from "../utils/types";
 
-export const README = (platform: PlatformType, buildCommand: string): string =>
-  `
-This is a ${toString(
+export function README(platform: PlatformType, buildCommand: string): string {
+  return `This is a ${platformTypeToString(
     platform
   )} project bootstrapped with [\`create-plasmic-app\`](https://www.npmjs.com/package/create-plasmic-app).
 
@@ -29,4 +28,5 @@ To learn more about Plasmic, take a look at the following resources:
 - [Plasmic Slack Community](https://www.plasmic.app/slack)
 
 You can check out [the Plasmic GitHub repository](https://github.com/plasmicapp/plasmic) - your feedback and contributions are welcome!
-  `.trim();
+`;
+}

package/src/templates/welcomePage.ts

@@ -1,5 +1,4 @@
-export const PLASMIC_LOGO = `
-function PlasmicLogo() {
+export const PLASMIC_LOGO = `function PlasmicLogo() {
   return (
     <svg
       width={40}
@@ -62,13 +61,12 @@ function PlasmicLogo() {
 }
 `;
 
-export const WELCOME_PAGE = (
+export function WELCOME_PAGE(
   hasPages: boolean,
   platform: string,
   pageSection: string
-): string =>
-  `
-import React from "react";
+): string {
+  return `import React from "react";
 ${hasPages && platform === "nextjs" ? `import Link from "next/link";` : ""}
 ${PLASMIC_LOGO}
 
@@ -98,4 +96,5 @@ function Index() {
 }
 
 export default Index;
-`.trim();
+`;
+}

package/src/utils/file-utils.ts

@@ -2,10 +2,10 @@ import { existsSync, promises as fs, unlinkSync } from "fs";
 import glob from "glob";
 import L from "lodash";
 import * as path from "upath";
-import { PlatformType } from "../lib";
-import { GATSBY_404 } from "../templates/gatsby";
+import { GATSBY_404 } from "../gatsby/template";
 import { README } from "../templates/readme";
 import { WELCOME_PAGE } from "../templates/welcomePage";
+import { JsOrTs, PlatformType } from "../utils/types";
 import { ensure, ensureString } from "./lang-utils";
 import { installUpgrade } from "./npm-utils";
 
@@ -270,6 +270,6 @@ export async function ensureTsconfig(projectPath: string): Promise<void> {
   }
 }
 
-export function ifTs(ts: boolean, str: string) {
-  return ts ? str : "";
+export function ifTs(ts: JsOrTs, str: string) {
+  return ts === "ts" ? str : "";
 }

package/src/utils/strategy.ts

@@ -0,0 +1,48 @@
+import { JsOrTs, PlatformOptions, SchemeType } from "./types";
+
+export interface CreateArgs {
+  projectPath: string;
+  template?: string;
+  jsOrTs: JsOrTs;
+  platformOptions: PlatformOptions;
+}
+
+export interface ConfigArgs {
+  projectId: string;
+  projectPath: string;
+  jsOrTs: JsOrTs;
+  scheme: SchemeType;
+  projectApiToken: string | undefined;
+  platformOptions: PlatformOptions;
+}
+
+export interface GenerateFilesArgs {
+  projectPath: string;
+  jsOrTs: JsOrTs;
+  scheme: SchemeType;
+  projectId: string;
+  projectApiToken: string | undefined;
+  platformOptions: PlatformOptions;
+}
+
+export interface BuildArgs {
+  projectPath: string;
+  npmRunCmd: string;
+}
+
+export interface InstallArgs {
+  scheme: SchemeType;
+  projectPath: string;
+  jsOrTs: JsOrTs;
+}
+
+// TODO: Remove this interface and use a single "create" entry point.
+// It forces us to make all strategies follow the same steps, even though each strategy has its own quirks.
+// For example, this results in platform-specific conditionals in the utils files which is hard to follow.
+export interface CPAStrategy {
+  create: (args: CreateArgs) => Promise<void>;
+  installDeps: (args: InstallArgs) => Promise<boolean>;
+  overwriteConfig: (args: ConfigArgs) => Promise<void>;
+  generateFiles: (args: GenerateFilesArgs) => Promise<void>;
+  build: (args: BuildArgs) => Promise<void>;
+}

package/src/utils/types.ts

@@ -0,0 +1,12 @@
+export type JsOrTs = "js" | "ts";
+export type PlatformType = "nextjs" | "gatsby" | "react";
+export type PlatformOptions = {
+  nextjs?: {
+    appDir: boolean;
+  };
+};
+export type SchemeType = "codegen" | "loader";
+
+export function platformTypeToString(s: PlatformType): string {
+  return s === "nextjs" ? "Next.js" : s === "gatsby" ? "Gatsby" : "React";
+}

package/dist/strategies/gatsby.d.ts

@@ -1,7 +0,0 @@
-import { CPAStrategy } from "./types";
-export declare const GATSBY_TEMPLATES: {
-    js: string;
-    ts: string;
-};
-declare const gatsbyStrategy: CPAStrategy;
-export default gatsbyStrategy;

package/dist/strategies/index.d.ts

@@ -1,2 +0,0 @@
-import { CPAStrategy } from "./types";
-export declare const getCPAStrategy: (platform: string, errorMsg?: string) => CPAStrategy;

package/dist/strategies/index.js

@@ -1,22 +0,0 @@
-"use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.getCPAStrategy = void 0;
-const gatsby_1 = __importDefault(require("./gatsby"));
-const nextjs_1 = __importDefault(require("./nextjs"));
-const react_1 = __importDefault(require("./react"));
-const strategies = {
-    nextjs: nextjs_1.default,
-    gatsby: gatsby_1.default,
-    react: react_1.default,
-};
-const getCPAStrategy = (platform, errorMsg) => {
-    if (!Object.keys(strategies).includes(platform)) {
-        const msg = errorMsg || `Unrecognized platform: ${platform}`;
-        throw new Error(msg);
-    }
-    return strategies[platform];
-};
-exports.getCPAStrategy = getCPAStrategy;

package/dist/strategies/nextjs.d.ts

@@ -1,3 +0,0 @@
-import { CPAStrategy } from "./types";
-declare const nextjsStrategy: CPAStrategy;
-export default nextjsStrategy;

package/dist/strategies/nextjs.js

@@ -1,104 +0,0 @@
-"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());
-    });
-};
-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;
-        const createCommand = `npx create-next-app@latest ${useTypescript ? "--ts" : "--js"} --eslint --no-src-dir --no-experimental-app --import-alias "@/*" ${projectPath}`;
-        const templateArg = template ? ` --template ${template}` : "";
-        // Default Next.js starter already supports Typescript
-        // See where we `touch tsconfig.json` later on
-        yield (0, cmd_utils_1.spawnOrFail)(`${createCommand}${templateArg}`);
-    }),
-    installDeps: ({ scheme, projectPath }) => __awaiter(void 0, void 0, void 0, function* () {
-        if (scheme === "loader") {
-            return yield (0, npm_utils_1.installUpgrade)("@plasmicapp/loader-nextjs", {
-                workingDir: projectPath,
-            });
-        }
-        else {
-            return yield (0, common_1.installCodegenDeps)({ projectPath });
-        }
-    }),
-    overwriteConfig: (args) => __awaiter(void 0, void 0, void 0, function* () {
-        const { projectPath, scheme } = args;
-        const nextjsConfigFile = path_1.default.join(projectPath, "next.config.js");
-        if (scheme === "codegen") {
-            yield fs_1.promises.writeFile(nextjsConfigFile, `
-module.exports = {
-  eslint: {
-    ignoreDuringBuilds: true,
-  },
-  trailingSlash: true,
-  // Your NextJS config.
-};
-    `);
-        }
-        else {
-            yield fs_1.promises.writeFile(nextjsConfigFile, `
-/** @type {import('next').NextConfig} */
-const nextConfig = {
-  // Turn off React StrictMode for now, as react-aria (used by Plasmic)
-  // has some troubles with it. See
-  // https://github.com/adobe/react-spectrum/labels/strict%20mode
-  reactStrictMode: false,
-}
-
-module.exports = nextConfig
-        `);
-        }
-    }),
-    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, scheme, useTypescript, projectId, projectApiToken, } = args;
-        // Always start fresh
-        const pagesPath = path_1.default.join(projectPath, "pages");
-        (0, 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, (0, 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, (0, nextjs_1.makeNextjsInitPage)(projectId, (0, 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, (0, nextjs_1.makeNextjsCatchallPage)(useTypescript ? "ts" : "js"));
-        }
-        else {
-            yield (0, common_1.runCodegenSync)({
-                projectId,
-                projectApiToken,
-                projectPath,
-            });
-            // Overwrite the index file
-            yield (0, 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, (0, nextjs_1.wrapAppRootForCodegen)());
-        }
-    }),
-    build: (args) => __awaiter(void 0, void 0, void 0, function* () {
-        const { npmRunCmd, projectPath } = args;
-        yield (0, cmd_utils_1.spawnOrFail)(`${npmRunCmd} build`, projectPath);
-    }),
-};
-exports.default = nextjsStrategy;

package/dist/strategies/react.d.ts

@@ -1,3 +0,0 @@
-import { CPAStrategy } from "./types";
-declare const reactStrategy: CPAStrategy;
-export default reactStrategy;

package/dist/templates/gatsby.d.ts

@@ -1,11 +0,0 @@
-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: (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/nextjs.d.ts

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