create-plasmic-app 0.0.133 → 0.0.135

package/src/nextjs/nextjs.ts

@@ -11,6 +11,7 @@ import {
 import { ensure } from "../utils/lang-utils";
 import { installUpgrade } from "../utils/npm-utils";
 import { CPAStrategy, GenerateFilesArgs } from "../utils/strategy";
+import { makeLayout_app_codegen } from "./templates/app-codegen/layout";
 import { makeCatchallPage_app_loader } from "./templates/app-loader/catchall-page";
 import { makePlasmicHostPage_app_loader } from "./templates/app-loader/plasmic-host";
 import { makePlasmicInit_app_loader } from "./templates/app-loader/plasmic-init";
@@ -81,39 +82,77 @@ export default nextConfig;`
 };
 
 async function generateFilesAppDir(args: GenerateFilesArgs) {
-  const { projectPath, jsOrTs, projectId, projectApiToken } = args;
+  const { projectPath, scheme, jsOrTs, projectId, projectApiToken } = args;
 
   // Delete existing pages
   deleteGlob(path.join(projectPath, "app", "page.*"));
 
-  // ./plasmic-init.ts
-  await fs.writeFile(
-    path.join(projectPath, `plasmic-init.${jsOrTs}`),
-    makePlasmicInit_app_loader(
+  if (scheme === "loader") {
+    // ./plasmic-init.ts
+    await fs.writeFile(
+      path.join(projectPath, `plasmic-init.${jsOrTs}`),
+      makePlasmicInit_app_loader(
+        projectId,
+        ensure(projectApiToken, "Missing projectApiToken")
+      )
+    );
+
+    // ./plasmic-init-client.ts
+    await fs.writeFile(
+      path.join(projectPath, `plasmic-init-client.${jsOrTs}x`),
+      makePlasmicInitClient_app_loader(jsOrTs)
+    );
+
+    // ./app/plasmic-host/page.tsx
+    await fs.mkdir(path.join(projectPath, "app", "plasmic-host"));
+    await fs.writeFile(
+      path.join(projectPath, "app", "plasmic-host", `page.${jsOrTs}x`),
+      makePlasmicHostPage_app_loader()
+    );
+
+    // ./app/[[...catchall]]/page.tsx
+    await fs.mkdir(path.join(projectPath, "app", "[[...catchall]]"));
+    await fs.writeFile(
+      path.join(projectPath, "app", "[[...catchall]]", `page.${jsOrTs}x`),
+      makeCatchallPage_app_loader(jsOrTs)
+    );
+  } else {
+    // ./app/layout.tsx
+    await fs.writeFile(
+      path.join(projectPath, "app", `layout.${jsOrTs}x`),
+      makeLayout_app_codegen(jsOrTs)
+    );
+
+    // ./app/plasmic-host/page.tsx
+    await fs.mkdir(path.join(projectPath, "app", "plasmic-host"));
+    await fs.writeFile(
+      path.join(projectPath, "app", "plasmic-host", `page.${jsOrTs}x`),
+      makePlasmicHostPage_pages_codegen() // plasmic-host page contents are the same as the pages router
+    );
+
+    // This should generate
+    // ./plasmic.json
+    // ./app/page.tsx
+    // ./components/plasmic/**
+    await runCodegenSync({
       projectId,
-      ensure(projectApiToken, "Missing projectApiToken")
-    )
-  );
-
-  // ./plasmic-init-client.ts
-  await fs.writeFile(
-    path.join(projectPath, `plasmic-init-client.${jsOrTs}x`),
-    makePlasmicInitClient_app_loader(jsOrTs)
-  );
-
-  // ./app/plasmic-host/page.tsx
-  await fs.mkdir(path.join(projectPath, "app", "plasmic-host"));
-  await fs.writeFile(
-    path.join(projectPath, "app", "plasmic-host", `page.${jsOrTs}x`),
-    makePlasmicHostPage_app_loader()
-  );
-
-  // ./app/[[...catchall]]/page.tsx
-  await fs.mkdir(path.join(projectPath, "app", "[[...catchall]]"));
-  await fs.writeFile(
-    path.join(projectPath, "app", "[[...catchall]]", `page.${jsOrTs}x`),
-    makeCatchallPage_app_loader(jsOrTs)
-  );
+      projectApiToken,
+      projectPath,
+    });
+
+    // Make an index (/) page if the project didn't have one.
+    const config = await getPlasmicConfig(projectPath, "nextjs", scheme);
+    const plasmicFiles = L.map(
+      L.flatMap(config.projects, (p) => p.components),
+      (c) => c.importSpec.modulePath
+    );
+    if (!plasmicFiles.find((f) => f.includes("app/page."))) {
+      await fs.writeFile(
+        path.join(projectPath, "app", `page.${jsOrTs}x`),
+        generateWelcomePage(config, "nextjs")
+      );
+    }
+  }
 }
 
 async function generateFilesPagesDir(args: GenerateFilesArgs) {

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

@@ -0,0 +1,28 @@
+import { ifTs } from "../../../utils/file-utils";
+import { JsOrTs } from "../../../utils/types";
+
+export function makeLayout_app_codegen(jsOrTs: JsOrTs): string {
+  return `import '@/app/globals.css'
+import { PlasmicRootProvider } from "@plasmicapp/react-web";
+import Link from "next/link";
+
+export default function RootLayout({
+  children,
+}${ifTs(
+    jsOrTs,
+    `: Readonly<{
+  children: React.ReactNode;
+}>`
+  )}) {
+  return (
+    <html lang="en">
+      <body>
+        <PlasmicRootProvider Link={Link}>
+          {children}
+        </PlasmicRootProvider>
+      </body>
+    </html>
+  );
+}
+`;
+}

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

@@ -2,71 +2,108 @@ import { ifTs } from "../../../utils/file-utils";
 import { JsOrTs } from "../../../utils/types";
 
 export function makeCatchallPage_app_loader(jsOrTs: JsOrTs): string {
-  return `import { PlasmicComponent } from "@plasmicapp/loader-nextjs";
-import { notFound } from "next/navigation";
-import { PLASMIC } from "@/plasmic-init";
+  return `import { PLASMIC } from "@/plasmic-init";
 import { ClientPlasmicRootProvider } from "@/plasmic-init-client";
+import { ${ifTs(
+    jsOrTs,
+    `ComponentRenderData,`
+  )}PlasmicComponent } from "@plasmicapp/loader-nextjs";${ifTs(
+    jsOrTs,
+    `
+import { Metadata, ResolvingMetadata } from "next";`
+  )}
+import { notFound } from "next/navigation";
 
 // Use revalidate if you want incremental static regeneration
 export const revalidate = 60;
+${ifTs(
+  jsOrTs,
+  `interface Params {
+      catchall: string[] | undefined;
+    }`
+)}
+export async function generateStaticParams()${ifTs(
+    jsOrTs,
+    ": Promise<Params[]>"
+  )} {
+  const pageModules = await PLASMIC.fetchPages();
+  return pageModules.map((mod) => {
+    const catchall =
+      mod.path === "/" ? undefined : mod.path.substring(1).split("/");
+    return {
+      catchall,
+    };
+  });
+}
+${ifTs(
+  jsOrTs,
+  `interface LoaderPageProps {
+      params: Promise<Params>;
+    }`
+)}
+export async function generateMetadata(
+  { params }${ifTs(jsOrTs, `: LoaderPageProps`)},
+  parent${ifTs(jsOrTs, `: ResolvingMetadata`)}
+)${ifTs(jsOrTs, `: Promise<Metadata>`)} {
+  const { componentData } = await getPlasmicData(params);
+
+  if (!componentData) {
+    return parent${ifTs(jsOrTs, ` as Promise<Metadata>`)};
+  }
+  const pageMeta = componentData.entryCompMetas[0];
+  const metadata = await PLASMIC.unstable__generateMetadata(componentData, {
+    params: pageMeta.params ?? {},
+    query: {},
+  });
+
+  return { ...(await parent), ...metadata };
+}
 
 export default async function PlasmicLoaderPage({
   params,
-  searchParams,
-}${ifTs(
-    jsOrTs,
-    `: {
-  params?: { catchall: string[] | undefined };
-  searchParams?: Record<string, string | string[]>;
-}`
-  )}) {
-  const plasmicComponentData = await fetchPlasmicComponentData(params?.catchall);
-  if (!plasmicComponentData) {
-    notFound();
-  }
+}${ifTs(jsOrTs, `: LoaderPageProps`)}) {
+  const { pagePath, componentData } = await getPlasmicData(params);
 
-  const { prefetchedData } = plasmicComponentData;
-  if (prefetchedData.entryCompMetas.length === 0) {
+  if (!componentData) {
     notFound();
   }
+  const pageMeta = componentData.entryCompMetas[0];
+  const prefetchedQueryData = await PLASMIC.unstable__getServerQueriesData(
+    componentData,
+    {
+      pagePath,
+      params: pageMeta.params,
+      query: {},
+    }
+  );
 
-  const pageMeta = prefetchedData.entryCompMetas[0];
   return (
     <ClientPlasmicRootProvider
-      prefetchedData={prefetchedData}
-      pageRoute={pageMeta.path}
+      prefetchedData={componentData}
+      prefetchedQueryData={prefetchedQueryData}
       pageParams={pageMeta.params}
-      pageQuery={searchParams}
+      pageRoute={pageMeta.path}
     >
-      <PlasmicComponent
-        component={pageMeta.displayName}
-      />
+      <PlasmicComponent component={pageMeta.displayName} />
     </ClientPlasmicRootProvider>
   );
 }
 
-async function fetchPlasmicComponentData(catchall${ifTs(
+async function getPlasmicData(
+  params${ifTs(jsOrTs, ": Promise<Params>")}
+)${ifTs(
     jsOrTs,
-    ": string[] | undefined"
-  )}) {
-  const plasmicPath = "/" + (catchall ? catchall.join("/") : "");
-  const prefetchedData = await PLASMIC.maybeFetchComponentData(plasmicPath);
-  if (!prefetchedData) {
-    notFound();
-  }
+    ": Promise<{ pagePath: string; componentData?: ComponentRenderData }>"
+  )} {
+  const catchall = (await params).catchall;
+  const pagePath = catchall ? \`/\${catchall.join("/")}\` : "/";
 
-  return { prefetchedData };
-}
+  const componentData = await PLASMIC.maybeFetchComponentData(pagePath);
 
-export async function generateStaticParams() {
-  const pageModules = await PLASMIC.fetchPages();
-  return pageModules.map((mod) => {
-    const catchall =
-      mod.path === "/" ? undefined : mod.path.substring(1).split("/");
-    return {
-      catchall,
-    };
-  });
+  if (!componentData || componentData.entryCompMetas.length === 0) {
+    return { pagePath };
+  }
+  return { pagePath, componentData };
 }
 `;
 }

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

@@ -20,7 +20,7 @@ import { PLASMIC } from "@/plasmic-init";
  * ClientPlasmicRootProvider is a Client Component that passes in the loader for you.
  *
  * Why? Props passed from Server to Client Components must be serializable.
- * https://beta.nextjs.org/docs/rendering/server-and-client-components#passing-props-from-server-to-client-components-serialization
+ * https://nextjs.org/docs/app/getting-started/server-and-client-components#passing-data-from-server-to-client-components
  * However, PlasmicRootProvider requires a loader, but the loader is NOT serializable.
  *
  * In a Server Component like app/<your-path>/path.tsx, rendering the following would not work:

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

@@ -3,6 +3,7 @@ export function makePlasmicInit_app_loader(
   projectApiToken: string
 ): string {
   return `import { initPlasmicLoader } from "@plasmicapp/loader-nextjs/react-server-conditional";
+import * as NextNavigation from "next/navigation";
 
 export const PLASMIC = initPlasmicLoader({
   projects: [
@@ -17,6 +18,9 @@ export const PLASMIC = initPlasmicLoader({
   // project, allowing you to see your designs without publishing.  Please
   // only use this for development, as this is significantly slower.
   preview: false,
+
+  // Needed for Next.js app router support.
+  nextNavigation: NextNavigation,
 });
 `;
 }

package/cpa-out/nextjs-app-loader-js/pages/[[...catchall]].jsx

@@ -1,68 +0,0 @@
-import * as React from "react";
-import {
-  PlasmicComponent,
-  extractPlasmicQueryData,
-  ComponentRenderData,
-  PlasmicRootProvider,
-} from "@plasmicapp/loader-nextjs";
-
-import Error from "next/error";
-import { useRouter } from "next/router";
-import { PLASMIC } from "@/plasmic-init";
-
-export default function PlasmicLoaderPage(props) {
-  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}
-      pageRoute={pageMeta.path}
-      pageParams={pageMeta.params}
-      pageQuery={router.query}
-    >
-      <PlasmicComponent component={pageMeta.displayName} />
-    </PlasmicRootProvider>
-  );
-}
-
-export const 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}
-      pageRoute={pageMeta.path}
-      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 = async () => {
-  const pageModules = await PLASMIC.fetchPages();
-  return {
-    paths: pageModules.map((mod) => ({
-      params: {
-        catchall: mod.path.substring(1).split("/"),
-      },
-    })),
-    fallback: "blocking",
-  };
-}

package/cpa-out/nextjs-app-loader-js/pages/api/hello.js

@@ -1,5 +0,0 @@
-// Next.js API route support: https://nextjs.org/docs/api-routes/introduction
-
-export default function handler(req, res) {
-  res.status(200).json({ name: "John Doe" });
-}

package/cpa-out/nextjs-app-loader-js/pages/plasmic-host.jsx

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

package/cpa-out/nextjs-app-loader-ts/pages/[[...catchall]].tsx

@@ -1,72 +0,0 @@
-import * as React from "react";
-import {
-  PlasmicComponent,
-  extractPlasmicQueryData,
-  ComponentRenderData,
-  PlasmicRootProvider,
-} from "@plasmicapp/loader-nextjs";
-import type { GetStaticPaths, GetStaticProps } from "next";
-
-import Error from "next/error";
-import { useRouter } from "next/router";
-import { PLASMIC } from "@/plasmic-init";
-
-export default function PlasmicLoaderPage(props: {
-  plasmicData?: ComponentRenderData;
-  queryCache?: Record<string, unknown>;
-}) {
-  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}
-      pageRoute={pageMeta.path}
-      pageParams={pageMeta.params}
-      pageQuery={router.query}
-    >
-      <PlasmicComponent component={pageMeta.displayName} />
-    </PlasmicRootProvider>
-  );
-}
-
-export const getStaticProps: 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}
-      pageRoute={pageMeta.path}
-      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: GetStaticPaths = async () => {
-  const pageModules = await PLASMIC.fetchPages();
-  return {
-    paths: pageModules.map((mod) => ({
-      params: {
-        catchall: mod.path.substring(1).split("/"),
-      },
-    })),
-    fallback: "blocking",
-  };
-}

package/cpa-out/nextjs-app-loader-ts/pages/api/hello.ts

@@ -1,13 +0,0 @@
-// Next.js API route support: https://nextjs.org/docs/api-routes/introduction
-import type { NextApiRequest, NextApiResponse } from "next";
-
-type Data = {
-  name: string;
-};
-
-export default function handler(
-  req: NextApiRequest,
-  res: NextApiResponse<Data>,
-) {
-  res.status(200).json({ name: "John Doe" });
-}

package/cpa-out/nextjs-app-loader-ts/pages/plasmic-host.tsx

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