upstream

.prettierignore

@@ -12,6 +12,7 @@ storybook-static/
 /packages/create-plasmic-app/cpa-out/
 /packages/react-web/lib/**
 /packages/**/api/
+/plasmicpkgs/**/api/
 /platform/loader-tests/data/**/*.json
 /platform/wab/deps/
 /platform/wab/public/static/

examples/nextjs-example/app/app/[[...catchall]]/page.tsx

@@ -74,7 +74,8 @@ async function fetchData(catchall: string[] | undefined) {
     notFound();
   }
 
-  // Prefetching query data is no longer required, because React Server Components does that for us now!
+  // Prefetching query data in data-fetching components in app router.
+  // TODO: Use server functions/queries instead.
   const prefetchedQueryData = undefined;
 
   return { prefetchedData, prefetchedQueryData };

package.json

@@ -107,6 +107,7 @@
     "plasmicpkgs/commerce-providers/*",
     "plasmicpkgs/fetch",
     "plasmicpkgs/framer-motion",
+    "plasmicpkgs/graphql",
     "plasmicpkgs/keen-slider",
     "plasmicpkgs/lottie-react",
     "plasmicpkgs/plasmic-basic-components",
@@ -144,6 +145,7 @@
     "plasmicpkgs/react-scroll-parallax",
     "plasmicpkgs/react-slick",
     "plasmicpkgs/react-twitter-widgets",
-    "plasmicpkgs/react-youtube"
+    "plasmicpkgs/react-youtube",
+    "plasmicpkgs-dev"
   ]
 }

plasmicpkgs-dev/.env.example

@@ -0,0 +1,2 @@
+NEXT_PUBLIC_PROJECT_ID=
+NEXT_PUBLIC_PROJECT_TOKEN=

plasmicpkgs-dev/.gitignore

@@ -0,0 +1,36 @@
+# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
+
+# dependencies
+/node_modules
+/.pnp
+.pnp.js
+
+# testing
+/coverage
+
+# next.js
+/.next/
+/out/
+
+# production
+/build
+
+# misc
+.DS_Store
+*.pem
+
+# debug
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+.pnpm-debug.log*
+
+# local env files
+.env*.local
+
+# vercel
+.vercel
+
+# typescript
+*.tsbuildinfo
+next-env.d.ts

plasmicpkgs-dev/README.md

@@ -0,0 +1,21 @@
+# plasmicpkgs-dev
+
+This is app host for testing `@plasmicpkgs/*` packages. This app host uses the `@plasmicapp/loader-nextjs` SDK with app router.
+
+Since `plasmicpkgs-dev` is in the same monorepo as `@plasmicpkgs/*`, it can easily link to their local code under development.
+
+## Setup
+
+Have a test Plasmic project ready.
+
+Create a `.env` file based on [`.env.example`](./.env.example) that stores the test project's ID and token. The app host will load this project's pages.
+
+Check that the package you want to test is registered in [plasmic-init-client.tsx](./plasmic-init-client.tsx). If not, add the dependency in [package.json](./package.json) and add the registration calls.
+
+To build all `@plasmicpkgs/*`, run `yarn lerna run build --scope="@plasmicpkgs/*"`.
+
+## Workflow
+
+1. In `plasmicpkgs-dev`, run `yarn dev`. This should start the app host at `http://localhost:3000`.
+2. Set `http://localhost:3000/plasmic-host` as the app host URL in Plasmic Studio.
+3. In `@plasmicpkgs/*`, after you make a change, run `yarn build`, then reload Plasmic Studio.

plasmicpkgs-dev/app/[[...catchall]]/page.tsx

@@ -0,0 +1,68 @@
+import { PLASMIC } from "@/plasmic-init";
+import { PlasmicClientRootProvider } from "@/plasmic-init-client";
+import { PlasmicComponent } from "@plasmicapp/loader-nextjs";
+import { notFound } from "next/navigation";
+
+export const revalidate = 60;
+
+interface Params {
+  /**
+   * Array of path segments (e.g. `["a", "b"]` for "/a/b", or `undefined` if path is empty (i.e. "/").
+   *
+   * Note we use `undefined` instead of an empty array `[]` because
+   * Next.js would convert the empty array to `undefined` (not sure why they do that).
+   */
+  catchall: string[] | undefined;
+}
+
+export async function generateStaticParams(): Promise<Params[]> {
+  const pageModules = await PLASMIC.fetchPages();
+  return pageModules.map((mod) => {
+    const catchall =
+      mod.path === "/" ? undefined : mod.path.substring(1).split("/");
+    return {
+      catchall,
+    };
+  });
+}
+
+export default async function PlasmicLoaderPage({
+  params,
+}: {
+  params: Promise<Params>;
+}) {
+  const { prefetchedData, prefetchedQueryData } = await fetchData(
+    (
+      await params
+    ).catchall
+  );
+  const pageMeta = prefetchedData.entryCompMetas[0];
+  return (
+    <PlasmicClientRootProvider
+      prefetchedData={prefetchedData}
+      prefetchedQueryData={prefetchedQueryData}
+      pageParams={pageMeta.params}
+    >
+      <PlasmicComponent component={pageMeta.displayName} />
+    </PlasmicClientRootProvider>
+  );
+}
+
+async function fetchData(catchall: string[] | undefined) {
+  const pagePath = catchall ? `/${catchall.join("/")}` : "/";
+  const prefetchedData = await PLASMIC.maybeFetchComponentData(pagePath);
+  if (!prefetchedData) {
+    notFound();
+  }
+
+  const prefetchedQueryData = await PLASMIC.unstable__getServerQueriesData(
+    prefetchedData,
+    {
+      pagePath,
+      params: prefetchedData.entryCompMetas[0].params,
+      query: {},
+    }
+  );
+
+  return { prefetchedData, prefetchedQueryData };
+}

plasmicpkgs-dev/app/layout.tsx

@@ -0,0 +1,11 @@
+export default function Layout({ children }: { children: React.ReactNode }) {
+  return (
+    <html lang="en">
+      <body>{children}</body>
+    </html>
+  );
+}
+
+export const metadata = {
+  title: "plasmicpkgs dev host",
+};

plasmicpkgs-dev/app/plasmic-host/page.tsx

@@ -0,0 +1,6 @@
+import "@/plasmic-init-client";
+import { PlasmicCanvasHost } from "@plasmicapp/loader-nextjs";
+
+export default function PlasmicHost() {
+  return <PlasmicCanvasHost />;
+}

plasmicpkgs-dev/next.config.js

@@ -0,0 +1,6 @@
+/** @type {import('next').NextConfig} */
+const nextConfig = {
+  reactStrictMode: true,
+};
+
+module.exports = nextConfig;

plasmicpkgs-dev/package.json

@@ -0,0 +1,25 @@
+{
+  "name": "plasmicpkgs-dev",
+  "version": "0.0.4",
+  "private": true,
+  "scripts": {
+    "dev": "next dev",
+    "dev-inspect": "NODE_OPTIONS='--inspect' next dev"
+  },
+  "dependencies": {
+    "@plasmicapp/loader-nextjs": "^1",
+    "@plasmicpkgs/commerce": "*",
+    "@plasmicpkgs/commerce-shopify": "*",
+    "@plasmicpkgs/fetch": "0.0.7",
+    "@plasmicpkgs/graphql": "0.0.1",
+    "@plasmicpkgs/plasmic-cms": "*",
+    "next": "^15",
+    "react": "^19",
+    "react-dom": "^19"
+  },
+  "devDependencies": {
+    "@types/node": "^22",
+    "@types/react": "^19",
+    "@types/react-dom": "^19"
+  }
+}

plasmicpkgs-dev/plasmic-init-client.tsx

@@ -0,0 +1,78 @@
+"use client";
+
+import { PLASMIC } from "@/plasmic-init";
+import { registerWithDevMeta } from "@/plasmic-register-dev-meta";
+import { PlasmicRootProvider } from "@plasmicapp/loader-nextjs";
+import { registerAll as registerCommerce } from "@plasmicpkgs/commerce";
+import { registerAll as registerShopify } from "@plasmicpkgs/commerce-shopify";
+import { registerFetch } from "@plasmicpkgs/fetch";
+import { registerGraphQL } from "@plasmicpkgs/graphql";
+import { registerAll as registerCms } from "@plasmicpkgs/plasmic-cms";
+import React from "react";
+
+function register() {
+  registerFetch(PLASMIC);
+  registerGraphQL(PLASMIC);
+  registerCms(PLASMIC);
+  registerCommerce(PLASMIC);
+  registerShopify(PLASMIC);
+}
+
+const useDevNames = true; // set true to avoid conflicting with production hostless names
+if (useDevNames) {
+  registerWithDevMeta(PLASMIC, register);
+} else {
+  register();
+}
+
+/**
+ * PlasmicClientRootProvider 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
+ * 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:
+ *
+ * ```tsx
+ * import { PLASMIC } from "@/plasmic-init";
+ * import { PlasmicRootProvider } from "plasmicapp/loader-nextjs";
+ * export default function MyPage() {
+ *   const prefetchedData = await PLASMIC.fetchComponentData("YourPage");
+ *   return (
+ *     <PlasmicRootProvider
+ *       loader={PLASMIC} // ERROR: loader is not serializable
+ *       prefetchedData={prefetchedData}
+ *     >
+ *       {yourContent()}
+ *     </PlasmicRootProvider>;
+ *   );
+ * }
+ * ```
+ *
+ * Therefore, we define PlasmicClientRootProvider as a Client Component (this file is marked "use client").
+ * PlasmicClientRootProvider wraps the PlasmicRootProvider and passes in the loader for you,
+ * while allowing your Server Component to pass in prefetched data and other serializable props:
+ *
+ * ```tsx
+ * import { PLASMIC } from "@/plasmic-init";
+ * import { PlasmicClientRootProvider } from "@/plasmic-init-client"; // changed
+ * export default function MyPage() {
+ *   const prefetchedData = await PLASMIC.fetchComponentData("YourPage");
+ *   return (
+ *     <PlasmicClientRootProvider // don't pass in loader
+ *       prefetchedData={prefetchedData}
+ *     >
+ *       {yourContent()}
+ *     </PlasmicClientRootProvider>;
+ *   );
+ * }
+ * ```
+ */
+export function PlasmicClientRootProvider(
+  props: Omit<React.ComponentProps<typeof PlasmicRootProvider>, "loader">
+) {
+  return (
+    <PlasmicRootProvider loader={PLASMIC} {...props}></PlasmicRootProvider>
+  );
+}

plasmicpkgs-dev/plasmic-init.ts

@@ -0,0 +1,25 @@
+import { initPlasmicLoader } from "@plasmicapp/loader-nextjs/react-server-conditional";
+import * as NextNavigation from "next/navigation";
+
+const projectId = process.env.NEXT_PUBLIC_PROJECT_ID;
+const projectToken = process.env.NEXT_PUBLIC_PROJECT_TOKEN;
+
+if (!projectId || !projectToken) {
+  throw new Error("Please set PROJECT_ID and PROJECT_TOKEN in .env");
+}
+
+export const PLASMIC = initPlasmicLoader({
+  nextNavigation: NextNavigation,
+  projects: [
+    {
+      id: projectId,
+      token: projectToken,
+    },
+  ],
+
+  // 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: true,
+});