create-plasmic-app 0.0.143 → 0.0.145

package/cpa-out/gatsby-codegen-js/package.json

@@ -14,8 +14,8 @@
     "clean": "gatsby clean"
   },
   "dependencies": {
-    "@plasmicapp/cli": "^0.1.359",
-    "@plasmicapp/react-web": "^0.2.425",
+    "@plasmicapp/cli": "^0.1.361",
+    "@plasmicapp/react-web": "^1.0.6",
     "gatsby": "^5.14.6",
     "gatsby-plugin-react-helmet": "^6.16.0",
     "react": "^18.2.0",

package/cpa-out/gatsby-codegen-js/plasmic.json

@@ -135,6 +135,6 @@
   "gatsbyConfig": {
     "pagesDir": "../pages"
   },
-  "cliVersion": "0.1.359",
-  "$schema": "https://unpkg.com/@plasmicapp/cli@0.1.359/dist/plasmic.schema.json"
+  "cliVersion": "0.1.361",
+  "$schema": "https://unpkg.com/@plasmicapp/cli@0.1.361/dist/plasmic.schema.json"
 }

package/cpa-out/gatsby-codegen-js/src/components/plasmic/create_plasmic_app/PlasmicButton.jsx

@@ -137,6 +137,7 @@ function PlasmicButton__RenderFunc(props) {
       className={classNames(
         projectcss.all,
         projectcss.button,
+        projectcss.button__47tFX,
         projectcss.root_reset,
         projectcss.plasmic_default_styles,
         projectcss.plasmic_mixins,

package/cpa-out/gatsby-codegen-js/src/components/plasmic/create_plasmic_app/PlasmicDynamicPage.jsx

@@ -111,6 +111,7 @@ function PlasmicDynamicPage__RenderFunc(props) {
               className={classNames(
                 projectcss.all,
                 projectcss.h1,
+                projectcss.h1__47tFX,
                 projectcss.__wab_text,
                 sty.h1
               )}

package/cpa-out/gatsby-codegen-js/src/components/plasmic/create_plasmic_app/PlasmicHomepage.jsx

@@ -114,6 +114,7 @@ function PlasmicHomepage__RenderFunc(props) {
               className={classNames(
                 projectcss.all,
                 projectcss.h1,
+                projectcss.h1__47tFX,
                 projectcss.__wab_text,
                 sty.h1
               )}
@@ -137,7 +138,9 @@ function PlasmicHomepage__RenderFunc(props) {
                     }
                   </React.Fragment>
                   <span
-                    className={"plasmic_default__all plasmic_default__span"}
+                    className={
+                      "plasmic_default__all plasmic_default__span plasmic_default__span__47tFX"
+                    }
                     style={{ fontWeight: 700 }}
                   >
                     {"Therefore, please avoid changing this project."}
@@ -151,7 +154,9 @@ function PlasmicHomepage__RenderFunc(props) {
                     }
                   </React.Fragment>
                   <span
-                    className={"plasmic_default__all plasmic_default__span"}
+                    className={
+                      "plasmic_default__all plasmic_default__span plasmic_default__span__47tFX"
+                    }
                     style={{ fontWeight: 700 }}
                   >
                     {"Code"}

package/cpa-out/gatsby-codegen-ts/package.json

@@ -15,8 +15,8 @@
     "typecheck": "tsc --noEmit"
   },
   "dependencies": {
-    "@plasmicapp/cli": "^0.1.359",
-    "@plasmicapp/react-web": "^0.2.425",
+    "@plasmicapp/cli": "^0.1.361",
+    "@plasmicapp/react-web": "^1.0.6",
     "gatsby": "^5.14.6",
     "gatsby-plugin-react-helmet": "^6.16.0",
     "react": "^18.2.0",

package/cpa-out/gatsby-codegen-ts/plasmic.json

@@ -135,6 +135,6 @@
   "gatsbyConfig": {
     "pagesDir": "../pages"
   },
-  "cliVersion": "0.1.359",
-  "$schema": "https://unpkg.com/@plasmicapp/cli@0.1.359/dist/plasmic.schema.json"
+  "cliVersion": "0.1.361",
+  "$schema": "https://unpkg.com/@plasmicapp/cli@0.1.361/dist/plasmic.schema.json"
 }

package/cpa-out/gatsby-codegen-ts/src/components/plasmic/create_plasmic_app/PlasmicButton.tsx

@@ -275,6 +275,7 @@ function PlasmicButton__RenderFunc(props: {
       className={classNames(
         projectcss.all,
         projectcss.button,
+        projectcss.button__47tFX,
         projectcss.root_reset,
         projectcss.plasmic_default_styles,
         projectcss.plasmic_mixins,

package/cpa-out/gatsby-codegen-ts/src/components/plasmic/create_plasmic_app/PlasmicDynamicPage.tsx

@@ -193,6 +193,7 @@ function PlasmicDynamicPage__RenderFunc(props: {
               className={classNames(
                 projectcss.all,
                 projectcss.h1,
+                projectcss.h1__47tFX,
                 projectcss.__wab_text,
                 sty.h1
               )}

package/cpa-out/gatsby-codegen-ts/src/components/plasmic/create_plasmic_app/PlasmicHomepage.tsx

@@ -197,6 +197,7 @@ function PlasmicHomepage__RenderFunc(props: {
               className={classNames(
                 projectcss.all,
                 projectcss.h1,
+                projectcss.h1__47tFX,
                 projectcss.__wab_text,
                 sty.h1
               )}
@@ -220,7 +221,9 @@ function PlasmicHomepage__RenderFunc(props: {
                     }
                   </React.Fragment>
                   <span
-                    className={"plasmic_default__all plasmic_default__span"}
+                    className={
+                      "plasmic_default__all plasmic_default__span plasmic_default__span__47tFX"
+                    }
                     style={{ fontWeight: 700 }}
                   >
                     {"Therefore, please avoid changing this project."}
@@ -234,7 +237,9 @@ function PlasmicHomepage__RenderFunc(props: {
                     }
                   </React.Fragment>
                   <span
-                    className={"plasmic_default__all plasmic_default__span"}
+                    className={
+                      "plasmic_default__all plasmic_default__span plasmic_default__span__47tFX"
+                    }
                     style={{ fontWeight: 700 }}
                   >
                     {"Code"}

package/cpa-out/gatsby-loader-js/gatsby-config.js

@@ -1,25 +1,29 @@
-/**
- * @type {import('gatsby').GatsbyConfig}
- */
-module.exports = {
+const path = require("path");
+
+/** @type {import("gatsby").GatsbyConfig} */
+const config = {
   siteMetadata: {
     siteUrl: `https://www.yourdomain.tld`,
   },
-  plugins: [{
-  resolve: "@plasmicapp/loader-gatsby",
-  options: {
-    projects: [
-      {
-        id: "47tFXWjN2C4NyHFGGpaYQ3",
-        token: "7BRFratDxPLMGZHnd2grV5QP6mlHcZ1AK3BJSIeh7xzUlHgWh25XpgXvUaKAqHXFMXQQuzpADqboibF6nqNWQ",
+  graphqlTypegen: true,
+  plugins: [
+    {
+      resolve: "@plasmicapp/loader-gatsby",
+      options: {
+        projects: [
+          {
+            id: "47tFXWjN2C4NyHFGGpaYQ3",
+            token: "7BRFratDxPLMGZHnd2grV5QP6mlHcZ1AK3BJSIeh7xzUlHgWh25XpgXvUaKAqHXFMXQQuzpADqboibF6nqNWQ",
+          },
+        ], // An array of project ids.
+        preview: false,
+        defaultPlasmicPage: path.resolve("./src/templates/defaultPlasmicPage.jsx"),
       },
-    ], // An array of project ids.
-    preview: false,
-    defaultPlasmicPage: require.resolve("./src/templates/defaultPlasmicPage.jsx"),
-  },
-},
-{
-  resolve: "gatsby-plugin-react-helmet",
-}
-]
-}
+    },
+    {
+      resolve: "gatsby-plugin-react-helmet",
+    },
+  ],
+};
+
+module.exports = config;

package/cpa-out/gatsby-loader-js/gatsby-node.js

@@ -0,0 +1,58 @@
+/**
+ * Implement Gatsby's Node APIs in this file.
+ *
+ * See: https://www.gatsbyjs.com/docs/node-apis/
+ *
+ * `onCreatePage` runs `extractPlasmicQueryData` at build time so that the
+ * SSG'd HTML for each Plasmic page contains its actual rendered content,
+ * rather than the `<Suspense fallback>` ("Loading...") of unresolved data
+ * queries.
+ */
+const React = require("react");
+const {
+  extractPlasmicQueryData,
+  PlasmicComponent,
+  PlasmicRootProvider,
+} = require("@plasmicapp/loader-gatsby");
+const gatsbyConfig = require("./gatsby-config");
+const { initPlasmicLoaderWithRegistrations } = require("./src/plasmic-init");
+
+const plasmicLoaderOptions = gatsbyConfig.plugins.find(
+  (p) => p && p.resolve === "@plasmicapp/loader-gatsby"
+).options;
+const PLASMIC = initPlasmicLoaderWithRegistrations(plasmicLoaderOptions);
+
+exports.onCreatePage = async ({ page, actions }) => {
+  if (page.component !== plasmicLoaderOptions.defaultPlasmicPage) {
+    return;
+  }
+  if (page.context?.queryCache) {
+    return;
+  }
+
+  const componentData = await PLASMIC.maybeFetchComponentData(page.path);
+  if (!componentData) {
+    return;
+  }
+  const meta = componentData.entryCompMetas[0];
+
+  const queryCache = await extractPlasmicQueryData(
+    React.createElement(
+      PlasmicRootProvider,
+      {
+        loader: PLASMIC,
+        prefetchedData: componentData,
+        pageRoute: meta.path,
+        pageParams: meta.params,
+        pageQuery: {},
+      },
+      React.createElement(PlasmicComponent, { component: meta.displayName })
+    )
+  );
+
+  actions.deletePage(page);
+  actions.createPage({
+    ...page,
+    context: { ...page.context, queryCache },
+  });
+};

package/cpa-out/gatsby-loader-js/package.json

@@ -14,7 +14,7 @@
     "clean": "gatsby clean"
   },
   "dependencies": {
-    "@plasmicapp/loader-gatsby": "^1.0.418",
+    "@plasmicapp/loader-gatsby": "^2.0.3",
     "gatsby": "^5.14.6",
     "gatsby-plugin-react-helmet": "^6.16.0",
     "react": "^18.2.0",

package/cpa-out/gatsby-loader-js/src/plasmic-init.js

@@ -1,8 +1,6 @@
-import {
-  initPlasmicLoader,
-} from "@plasmicapp/loader-gatsby";
+const { initPlasmicLoader } = require("@plasmicapp/loader-gatsby");
 
-export function initPlasmicLoaderWithRegistrations(plasmicOptions) {
+function initPlasmicLoaderWithRegistrations(plasmicOptions) {
   const PLASMIC = initPlasmicLoader(plasmicOptions);
 
   // You can register any code components that you want to use here; see
@@ -16,3 +14,5 @@ export function initPlasmicLoaderWithRegistrations(plasmicOptions) {
 
   return PLASMIC;
 }
+
+module.exports = { initPlasmicLoaderWithRegistrations };

package/cpa-out/gatsby-loader-js/src/templates/defaultPlasmicPage.jsx

@@ -15,7 +15,7 @@ export const query = graphql`
 `;
 
 
-const PlasmicGatsbyPage = ({ data, location }) => {
+const PlasmicGatsbyPage = ({ data, location, pageContext }) => {
   const {
     plasmicComponents,
     plasmicOptions,
@@ -26,6 +26,7 @@ const PlasmicGatsbyPage = ({ data, location }) => {
     <PlasmicRootProvider
       loader={initPlasmicLoaderWithRegistrations(plasmicOptions)}
       prefetchedData={plasmicComponents}
+      prefetchedQueryData={pageContext.queryCache}
       pageRoute={pageMeta.path}
       pageParams={pageMeta.params}
       pageQuery={Object.fromEntries(new URLSearchParams(location.search))}

package/cpa-out/gatsby-loader-ts/gatsby-config.ts

@@ -1,31 +1,29 @@
 import path from "path";
-import type { GatsbyConfig } from "gatsby"
+import type { GatsbyConfig } from "gatsby";
 
 const config: GatsbyConfig = {
   siteMetadata: {
     siteUrl: `https://www.yourdomain.tld`,
   },
-  // More easily incorporate content into your pages through automatic TypeScript type generation and better GraphQL IntelliSense.
-  // If you use VSCode you can also use the GraphQL plugin
-  // Learn more at: https://gatsby.dev/graphql-typegen
   graphqlTypegen: true,
-  plugins: [{
-  resolve: "@plasmicapp/loader-gatsby",
-  options: {
-    projects: [
-      {
-        id: "47tFXWjN2C4NyHFGGpaYQ3",
-        token: "7BRFratDxPLMGZHnd2grV5QP6mlHcZ1AK3BJSIeh7xzUlHgWh25XpgXvUaKAqHXFMXQQuzpADqboibF6nqNWQ",
+  plugins: [
+    {
+      resolve: "@plasmicapp/loader-gatsby",
+      options: {
+        projects: [
+          {
+            id: "47tFXWjN2C4NyHFGGpaYQ3",
+            token: "7BRFratDxPLMGZHnd2grV5QP6mlHcZ1AK3BJSIeh7xzUlHgWh25XpgXvUaKAqHXFMXQQuzpADqboibF6nqNWQ",
+          },
+        ], // An array of project ids.
+        preview: false,
+        defaultPlasmicPage: path.resolve("./src/templates/defaultPlasmicPage.tsx"),
       },
-    ], // An array of project ids.
-    preview: false,
-    defaultPlasmicPage: path.resolve("./src/templates/defaultPlasmicPage.tsx"),
-  },
-},
-{
-  resolve: "gatsby-plugin-react-helmet",
-}
-]
-}
+    },
+    {
+      resolve: "gatsby-plugin-react-helmet",
+    },
+  ],
+};
 
-export default config
+export default config;

package/cpa-out/gatsby-loader-ts/gatsby-node.ts

@@ -0,0 +1,61 @@
+/**
+ * Implement Gatsby's Node APIs in this file.
+ *
+ * See: https://www.gatsbyjs.com/docs/node-apis/
+ *
+ * `onCreatePage` runs `extractPlasmicQueryData` at build time so that the
+ * SSG'd HTML for each Plasmic page contains its actual rendered content,
+ * rather than the `<Suspense fallback>` ("Loading...") of unresolved data
+ * queries.
+ */
+import type { CreatePageArgs } from "gatsby";
+import * as React from "react";
+import {
+  extractPlasmicQueryData,
+  PlasmicComponent,
+  PlasmicRootProvider,
+} from "@plasmicapp/loader-gatsby";
+import type { GatsbyPluginOptions } from "@plasmicapp/loader-gatsby";
+import gatsbyConfig from "./gatsby-config";
+import { initPlasmicLoaderWithRegistrations } from "./src/plasmic-init";
+import type { PlasmicGatsbyPageProps } from "./src/templates/defaultPlasmicPage";
+
+const plasmicLoaderOptions = gatsbyConfig.plugins.find(
+  (p) => p && p.resolve === "@plasmicapp/loader-gatsby"
+)!.options as GatsbyPluginOptions;
+const PLASMIC = initPlasmicLoaderWithRegistrations(plasmicLoaderOptions);
+
+export const onCreatePage = async ({ page, actions }: CreatePageArgs<PlasmicGatsbyPageProps["pageContext"]>) => {
+  if (page.component !== plasmicLoaderOptions.defaultPlasmicPage) {
+    return;
+  }
+  if (page.context?.queryCache) {
+    return;
+  }
+
+  const componentData = await PLASMIC.maybeFetchComponentData(page.path);
+  if (!componentData) {
+    return;
+  }
+  const meta = componentData.entryCompMetas[0];
+
+  const queryCache = await extractPlasmicQueryData(
+    React.createElement(
+      PlasmicRootProvider,
+      {
+        loader: PLASMIC,
+        prefetchedData: componentData,
+        pageRoute: meta.path,
+        pageParams: meta.params,
+        pageQuery: {},
+      },
+      React.createElement(PlasmicComponent, { component: meta.displayName })
+    )
+  );
+
+  actions.deletePage(page);
+  actions.createPage({
+    ...page,
+    context: { ...page.context, queryCache },
+  });
+};

package/cpa-out/gatsby-loader-ts/package.json

@@ -15,7 +15,7 @@
     "typecheck": "tsc --noEmit"
   },
   "dependencies": {
-    "@plasmicapp/loader-gatsby": "^1.0.418",
+    "@plasmicapp/loader-gatsby": "^2.0.3",
     "gatsby": "^5.14.6",
     "gatsby-plugin-react-helmet": "^6.16.0",
     "react": "^18.2.0",

package/cpa-out/gatsby-loader-ts/src/templates/defaultPlasmicPage.tsx

@@ -16,14 +16,17 @@ export const query = graphql`
   }
 `;
 
-interface PlasmicGatsbyPageProps extends PageProps {
+export interface PlasmicGatsbyPageProps extends PageProps {
   data: {
     plasmicOptions: InitOptions
     plasmicComponents: ComponentRenderData
   }
+  pageContext: {
+    queryCache?: Record<string, any>
+  }
 }
 
-const PlasmicGatsbyPage = ({ data, location }: PlasmicGatsbyPageProps) => {
+const PlasmicGatsbyPage = ({ data, location, pageContext }: PlasmicGatsbyPageProps) => {
   const {
     plasmicComponents,
     plasmicOptions,
@@ -34,6 +37,7 @@ const PlasmicGatsbyPage = ({ data, location }: PlasmicGatsbyPageProps) => {
     <PlasmicRootProvider
       loader={initPlasmicLoaderWithRegistrations(plasmicOptions)}
       prefetchedData={plasmicComponents}
+      prefetchedQueryData={pageContext.queryCache}
       pageRoute={pageMeta.path}
       pageParams={pageMeta.params}
       pageQuery={Object.fromEntries(new URLSearchParams(location.search))}

package/cpa-out/nextjs-app-codegen-js/app/dynamic/[slug]/page.jsx

@@ -7,6 +7,13 @@ import {
   makeAppRouterPageCtx,
   generateDynamicMetadata
 } from "../../../components/plasmic/create_plasmic_app/PlasmicDynamicPageServer";
+// Uncomment and populate to statically pre-render this route at build time.
+// Each entry should be an object whose keys match the dynamic segments in the route path.
+// See https://nextjs.org/docs/app/api-reference/functions/generate-static-params
+//
+// export async function generateStaticParams() {
+//   return [];
+// }
 
 export async function generateMetadata({ params, searchParams }, parent) {
   const ctx = await makeAppRouterPageCtx({ params, searchParams });
@@ -31,11 +38,12 @@ async function DynamicPage({ params, searchParams }) {
   // variant context providers. These wrappers may be moved to
   // Next.js Custom App component
   // (https://nextjs.org/docs/advanced-features/custom-app).
+  const ctx = await makeAppRouterPageCtx({ params, searchParams });
   return (
     <PageParamsProvider__
-      route="/dynamic/[slug]"
-      params={await params}
-      query={await searchParams}
+      route={ctx.pageRoute}
+      params={ctx.params}
+      query={ctx.query}
     >
       <PlasmicDynamicPageServer />
     </PageParamsProvider__>

package/cpa-out/nextjs-app-codegen-js/app/layout.jsx

@@ -1,6 +1,5 @@
 import '@/app/globals.css'
-import { PlasmicRootProvider } from "@plasmicapp/react-web";
-import Link from "next/link";
+import { ClientPlasmicRootProvider } from "@/plasmic-init-client";
 
 export default function RootLayout({
   children,
@@ -8,9 +7,9 @@ export default function RootLayout({
   return (
     <html lang="en">
       <body>
-        <PlasmicRootProvider Link={Link}>
+        <ClientPlasmicRootProvider>
           {children}
-        </PlasmicRootProvider>
+        </ClientPlasmicRootProvider>
       </body>
     </html>
   );

package/cpa-out/nextjs-app-codegen-js/app/page.jsx

@@ -31,11 +31,12 @@ async function Homepage({ params, searchParams }) {
   // variant context providers. These wrappers may be moved to
   // Next.js Custom App component
   // (https://nextjs.org/docs/advanced-features/custom-app).
+  const ctx = await makeAppRouterPageCtx({ params, searchParams });
   return (
     <PageParamsProvider__
-      route="/"
-      params={await params}
-      query={await searchParams}
+      route={ctx.pageRoute}
+      params={ctx.params}
+      query={ctx.query}
     >
       <PlasmicHomepageServer />
     </PageParamsProvider__>

package/cpa-out/nextjs-app-codegen-js/components/plasmic/create_plasmic_app/PlasmicButton.jsx

@@ -147,6 +147,7 @@ function PlasmicButton__RenderFunc(props) {
       className={classNames(
         projectcss.all,
         projectcss.button,
+        projectcss.button__47tFX,
         projectcss.root_reset,
         projectcss.plasmic_default_styles,
         projectcss.plasmic_mixins,

package/cpa-out/nextjs-app-codegen-js/components/plasmic/create_plasmic_app/PlasmicDynamicPage.jsx

@@ -116,6 +116,7 @@ function PlasmicDynamicPage__RenderFunc(props) {
               className={classNames(
                 projectcss.all,
                 projectcss.h1,
+                projectcss.h1__47tFX,
                 projectcss.__wab_text,
                 sty.h1
               )}

package/cpa-out/nextjs-app-codegen-js/components/plasmic/create_plasmic_app/PlasmicDynamicPageServer.jsx

@@ -46,7 +46,7 @@ export async function makeAppRouterPageCtx({ params, searchParams }) {
     pageRoute,
     pagePath,
     params: pageParams,
-    query: (await searchParams) ?? {}
+    query: {}
   };
   return ctx;
 }

package/cpa-out/nextjs-app-codegen-js/components/plasmic/create_plasmic_app/PlasmicHomepage.jsx

@@ -119,6 +119,7 @@ function PlasmicHomepage__RenderFunc(props) {
               className={classNames(
                 projectcss.all,
                 projectcss.h1,
+                projectcss.h1__47tFX,
                 projectcss.__wab_text,
                 sty.h1
               )}
@@ -142,7 +143,9 @@ function PlasmicHomepage__RenderFunc(props) {
                     }
                   </React.Fragment>
                   <span
-                    className={"plasmic_default__all plasmic_default__span"}
+                    className={
+                      "plasmic_default__all plasmic_default__span plasmic_default__span__47tFX"
+                    }
                     style={{ fontWeight: 700 }}
                   >
                     {"Therefore, please avoid changing this project."}
@@ -156,7 +159,9 @@ function PlasmicHomepage__RenderFunc(props) {
                     }
                   </React.Fragment>
                   <span
-                    className={"plasmic_default__all plasmic_default__span"}
+                    className={
+                      "plasmic_default__all plasmic_default__span plasmic_default__span__47tFX"
+                    }
                     style={{ fontWeight: 700 }}
                   >
                     {"Code"}

package/cpa-out/nextjs-app-codegen-js/components/plasmic/create_plasmic_app/PlasmicHomepageServer.jsx

@@ -46,7 +46,7 @@ export async function makeAppRouterPageCtx({ params, searchParams }) {
     pageRoute,
     pagePath,
     params: pageParams,
-    query: (await searchParams) ?? {}
+    query: {}
   };
   return ctx;
 }

package/cpa-out/nextjs-app-codegen-js/package.json

@@ -9,8 +9,8 @@
     "lint": "next lint"
   },
   "dependencies": {
-    "@plasmicapp/cli": "^0.1.359",
-    "@plasmicapp/react-web": "^0.2.425",
+    "@plasmicapp/cli": "^0.1.361",
+    "@plasmicapp/react-web": "^1.0.6",
     "next": "14.2.35",
     "react": "^18",
     "react-dom": "^18"

package/cpa-out/nextjs-app-codegen-js/plasmic-init-client.jsx

@@ -1,6 +1,5 @@
 "use client";
 
-import * as React from "react";
 import { PlasmicRootProvider } from "@plasmicapp/react-web";
 import Link from "next/link";
 

package/cpa-out/nextjs-app-codegen-js/plasmic.json

@@ -143,6 +143,6 @@
   "nextjsConfig": {
     "pagesDir": "../app"
   },
-  "cliVersion": "0.1.359",
-  "$schema": "https://unpkg.com/@plasmicapp/cli@0.1.359/dist/plasmic.schema.json"
+  "cliVersion": "0.1.361",
+  "$schema": "https://unpkg.com/@plasmicapp/cli@0.1.361/dist/plasmic.schema.json"
 }

package/cpa-out/nextjs-app-codegen-ts/app/dynamic/[slug]/page.tsx

@@ -9,9 +9,16 @@ import {
   generateDynamicMetadata,
   DynamicPageServerSkeletonProps
 } from "../../../components/plasmic/create_plasmic_app/PlasmicDynamicPageServer";
-
 import type { Metadata, ResolvingMetadata } from "next";
 
+// Uncomment and populate to statically pre-render this route at build time.
+// Each entry should be an object whose keys match the dynamic segments in the route path.
+// See https://nextjs.org/docs/app/api-reference/functions/generate-static-params
+//
+// export async function generateStaticParams() {
+//   return [];
+// }
+
 export async function generateMetadata(
   { params, searchParams }: DynamicPageServerSkeletonProps,
   parent: ResolvingMetadata
@@ -43,11 +50,12 @@ async function DynamicPage({
   // Next.js Custom App component
   // (https://nextjs.org/docs/advanced-features/custom-app).
 
+  const ctx = await makeAppRouterPageCtx({ params, searchParams });
   return (
     <PageParamsProvider__
-      route="/dynamic/[slug]"
-      params={await params}
-      query={await searchParams}
+      route={ctx.pageRoute}
+      params={ctx.params}
+      query={ctx.query}
     >
       <PlasmicDynamicPageServer />
     </PageParamsProvider__>