create-plasmic-app 0.0.92 → 0.0.94

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

@@ -0,0 +1,68 @@
+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

@@ -0,0 +1,5 @@
+// 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

@@ -0,0 +1,7 @@
+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

@@ -0,0 +1,72 @@
+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

@@ -0,0 +1,13 @@
+// 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

@@ -0,0 +1,7 @@
+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-pages-codegen-js/components/Button.jsx

@@ -8,6 +8,4 @@ function Button_(props, ref) {
 
 const Button = React.forwardRef(Button_);
 
-export default Object.assign(Button, {
-  __plumeType: "button"
-});
+export default Object.assign(Button, { __plumeType: "button" });