create-plasmic-app 0.0.63 → 0.0.65

package/dist/templates/nextjs.js

@@ -1,162 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.wrapAppRootForCodegen = 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({
-  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(...);
-`.trim();
-exports.makeNextjsInitPage = makeNextjsInitPage;
-function makeNextjsCatchallPage(format) {
-    const ts = format === "ts";
-    return `
-import * as React from "react";
-import {
-  PlasmicComponent,
-  extractPlasmicQueryData,
-  ComponentRenderData,
-  PlasmicRootProvider,
-} from "@plasmicapp/loader-nextjs";
-${(0, file_utils_1.ifTs)(ts, `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${(0, file_utils_1.ifTs)(ts, `: {
-  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${(0, 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) {
-    // 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${(0, file_utils_1.ifTs)(ts, `: GetStaticPaths`)} = async () => {
-  const pageModules = await PLASMIC.fetchPages();
-  return {
-    paths: pageModules.map((mod) => ({
-      params: {
-        catchall: mod.path.substring(1).split("/"),
-      },
-    })),
-    fallback: "blocking",
-  };
-}
-  `.trim();
-}
-exports.makeNextjsCatchallPage = makeNextjsCatchallPage;
-function makeNextjsHostPage(scheme) {
-    const commonImports = `
-import * as React from 'react';
-import Script from 'next/script';
-  `.trim();
-    if (scheme === "loader") {
-        return `
-${commonImports}
-import { PlasmicCanvasHost } from '@plasmicapp/loader-nextjs';
-import { PLASMIC } from '../plasmic-init';
-
-export default function PlasmicHost() {
-  return PLASMIC && <PlasmicCanvasHost />;
-}
-    `;
-    }
-    else {
-        return `
-${commonImports}
-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.makeNextjsHostPage = makeNextjsHostPage;
-function wrapAppRootForCodegen() {
-    return `
-import '../styles/globals.css'
-import { PlasmicRootProvider } from "@plasmicapp/react-web";
-import Head from "next/head";
-
-function MyApp({ Component, pageProps }) {
-  return (
-    <PlasmicRootProvider Head={Head}>
-      <Component {...pageProps} />
-    </PlasmicRootProvider>
-  );
-}
-
-export default MyApp
-  `;
-}
-exports.wrapAppRootForCodegen = wrapAppRootForCodegen;

package/src/strategies/index.ts

@@ -1,21 +0,0 @@
-import gatsbyStrategy from "./gatsby";
-import nextjsStrategy from "./nextjs";
-import reactStrategy from "./react";
-import { CPAStrategy } from "./types";
-
-const strategies: Record<string, CPAStrategy> = {
-  nextjs: nextjsStrategy,
-  gatsby: gatsbyStrategy,
-  react: reactStrategy,
-};
-
-export const getCPAStrategy = (
-  platform: string,
-  errorMsg?: string
-): CPAStrategy => {
-  if (!Object.keys(strategies).includes(platform)) {
-    const msg = errorMsg || `Unrecognized platform: ${platform}`;
-    throw new Error(msg);
-  }
-  return strategies[platform];
-};

package/src/strategies/nextjs.ts

@@ -1,131 +0,0 @@
-import { promises as fs } from "fs";
-import path from "path";
-import {
-  makeNextjsCatchallPage,
-  makeNextjsHostPage,
-  makeNextjsInitPage,
-  wrapAppRootForCodegen,
-} from "../templates/nextjs";
-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";
-
-const nextjsStrategy: CPAStrategy = {
-  create: async (args) => {
-    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
-    await spawnOrFail(`${createCommand}${templateArg}`);
-  },
-  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;
-    const nextjsConfigFile = path.join(projectPath, "next.config.js");
-    if (scheme === "codegen") {
-      await fs.writeFile(
-        nextjsConfigFile,
-        `
-module.exports = {
-  eslint: {
-    ignoreDuringBuilds: true,
-  },
-  trailingSlash: true,
-  // Your NextJS config.
-};
-    `
-      );
-    } else {
-      await fs.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: 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,
-      scheme,
-      useTypescript,
-      projectId,
-      projectApiToken,
-    } = args;
-
-    // Always start fresh
-    const pagesPath = path.join(projectPath, "pages");
-    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;
-    await spawnOrFail(`${npmRunCmd} build`, projectPath);
-  },
-};
-
-export default nextjsStrategy;

package/src/strategies/types.ts

@@ -1,42 +0,0 @@
-import { CodeScheme } from "..";
-
-interface CreateArgs {
-  projectPath: string;
-  template?: string;
-  useTypescript: boolean;
-}
-
-interface ConfigArgs {
-  projectId: string;
-  projectPath: string;
-  useTypescript: boolean;
-  scheme: CodeScheme;
-  projectApiToken: string | undefined;
-}
-
-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;
-  useTypescript: boolean;
-}
-
-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/templates/nextjs.ts

@@ -1,170 +0,0 @@
-import { CodeScheme } from "..";
-import { ifTs } from "../utils/file-utils";
-
-export const makeNextjsInitPage = (
-  projectId: string,
-  projectApiToken: string
-): string =>
-  `
-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(...);
-`.trim();
-
-export function makeNextjsCatchallPage(format: "ts" | "js"): string {
-  const ts = format === "ts";
-  return `
-import * as React from "react";
-import {
-  PlasmicComponent,
-  extractPlasmicQueryData,
-  ComponentRenderData,
-  PlasmicRootProvider,
-} from "@plasmicapp/loader-nextjs";
-${ifTs(ts, `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(
-    ts,
-    `: {
-  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(
-    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) {
-    // 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(ts, `: GetStaticPaths`)} = async () => {
-  const pageModules = await PLASMIC.fetchPages();
-  return {
-    paths: pageModules.map((mod) => ({
-      params: {
-        catchall: mod.path.substring(1).split("/"),
-      },
-    })),
-    fallback: "blocking",
-  };
-}
-  `.trim();
-}
-
-export function makeNextjsHostPage(scheme: CodeScheme): string {
-  const commonImports = `
-import * as React from 'react';
-import Script from 'next/script';
-  `.trim();
-
-  if (scheme === "loader") {
-    return `
-${commonImports}
-import { PlasmicCanvasHost } from '@plasmicapp/loader-nextjs';
-import { PLASMIC } from '../plasmic-init';
-
-export default function PlasmicHost() {
-  return PLASMIC && <PlasmicCanvasHost />;
-}
-    `;
-  } else {
-    return `
-${commonImports}
-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 function wrapAppRootForCodegen(): string {
-  return `
-import '../styles/globals.css'
-import { PlasmicRootProvider } from "@plasmicapp/react-web";
-import Head from "next/head";
-
-function MyApp({ Component, pageProps }) {
-  return (
-    <PlasmicRootProvider Head={Head}>
-      <Component {...pageProps} />
-    </PlasmicRootProvider>
-  );
-}
-
-export default MyApp
-  `;
-}