updated plasmic package to work with new hooks + added example

examples/plasmic/.gitignore

@@ -0,0 +1 @@
+.next

examples/plasmic/next-env.d.ts

@@ -0,0 +1,5 @@
+/// <reference types="next" />
+/// <reference types="next/image-types/global" />
+
+// NOTE: This file should not be edited
+// see https://nextjs.org/docs/pages/building-your-application/configuring/typescript for more information.

examples/plasmic/next.config.ts

@@ -0,0 +1,8 @@
+import type { NextConfig } from "next";
+
+const nextConfig: NextConfig = {
+  /* config options here */
+  reactStrictMode: true,
+};
+
+export default nextConfig;

examples/plasmic/package.json

@@ -0,0 +1,26 @@
+{
+  "name": "plasmic-nextjs",
+  "version": "0.1.0",
+  "private": true,
+  "scripts": {
+    "dev": "next dev",
+    "build": "next build",
+    "start": "next start",
+    "lint": "next lint"
+  },
+  "dependencies": {
+    "@plasmicapp/loader-nextjs": "^1.0.409",
+    "bknd": "workspace:*",
+    "@bknd/plasmic": "workspace:*",
+    "next": "15.0.4",
+    "react": "^18.3.1",
+    "react-dom": "^18.3.1"
+  },
+  "devDependencies": {
+    "typescript": "^5",
+    "@types/node": "^20",
+    "@types/react": "^19",
+    "@types/react-dom": "^19",
+    "postcss": "^8"
+  }
+}

examples/plasmic/postcss.config.mjs

@@ -0,0 +1,8 @@
+/** @type {import('postcss-load-config').Config} */
+const config = {
+  plugins: {
+    tailwindcss: {},
+  },
+};
+
+export default config;

examples/plasmic/src/pages/[[...catchall]].tsx

@@ -0,0 +1,78 @@
+import { PLASMIC } from "@/plasmic-init";
+import {
+   type ComponentRenderData,
+   PlasmicComponent,
+   PlasmicRootProvider,
+   extractPlasmicQueryData
+} from "@plasmicapp/loader-nextjs";
+import type { GetServerSideProps } from "next";
+// biome-ignore lint/suspicious/noShadowRestrictedNames: <explanation>
+import Error from "next/error";
+import { useRouter } from "next/router";
+import * as React from "react";
+
+export const getServerSideProps: GetServerSideProps = async (context) => {
+   const { catchall } = context.params ?? {};
+
+   // Convert the catchall param into a path string
+   const plasmicPath =
+      typeof catchall === "string"
+         ? catchall
+         : Array.isArray(catchall)
+           ? `/${catchall.join("/")}`
+           : "/";
+   const plasmicData = await PLASMIC.maybeFetchComponentData(plasmicPath);
+   if (!plasmicData) {
+      // This is some non-Plasmic catch-all page
+      return {
+         props: {}
+      };
+   }
+
+   // This is a path that Plasmic knows about.
+   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}
+      >
+         {/* @ts-ignore */}
+         <PlasmicComponent component={pageMeta.displayName} />
+      </PlasmicRootProvider>
+   );
+
+   // Pass the data in as props.
+   return {
+      props: { plasmicData, queryCache }
+   };
+};
+
+export default function CatchallPage(props: {
+   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 (
+      // Pass in the data fetched in getStaticProps as prefetchedData
+      <PlasmicRootProvider
+         loader={PLASMIC}
+         prefetchedData={plasmicData}
+         prefetchedQueryData={queryCache}
+         pageRoute={pageMeta.path}
+         pageParams={pageMeta.params}
+         pageQuery={router.query}
+      >
+         {/* @ts-ignore */}
+         <PlasmicComponent component={pageMeta.displayName} />
+      </PlasmicRootProvider>
+   );
+}

examples/plasmic/src/pages/_app.tsx

@@ -0,0 +1,11 @@
+import "@/styles/globals.css";
+import { ClientProvider } from "bknd/client";
+import type { AppProps } from "next/app";
+
+export default function App({ Component, pageProps }: AppProps) {
+   return (
+      <ClientProvider baseUrl="http://localhost:3000">
+         <Component {...pageProps} />
+      </ClientProvider>
+   );
+}

examples/plasmic/src/pages/_document.tsx

@@ -0,0 +1,13 @@
+import { Html, Head, Main, NextScript } from "next/document";
+
+export default function Document() {
+  return (
+    <Html lang="en">
+      <Head />
+      <body className="antialiased">
+        <Main />
+        <NextScript />
+      </body>
+    </Html>
+  );
+}

examples/plasmic/src/pages/admin/[[...admin]].tsx

@@ -0,0 +1,25 @@
+// pages/admin/[[...admin]].tsx
+import { withApi } from "bknd/adapter/nextjs";
+import dynamic from "next/dynamic";
+import "bknd/dist/styles.css";
+
+/*export const config = {
+   runtime: "experimental-edge"
+}*/
+
+const Admin = dynamic(() => import("bknd/ui").then((mod) => mod.Admin), {
+   ssr: false,
+});
+
+export const getServerSideProps = withApi(async (context) => {
+   return {
+      props: {
+         user: context.api.getUser(),
+      },
+   };
+});
+
+export default function AdminPage() {
+   if (typeof document === "undefined") return null;
+   return <Admin withProvider config={{ basepath: "/admin" }} />;
+}

examples/plasmic/src/pages/api/[...route].ts

@@ -0,0 +1,16 @@
+import { serve } from "bknd/adapter/nextjs";
+
+export const config = {
+   runtime: "edge",
+   unstable_allowDynamic: ["**/*.js"]
+};
+
+export default serve({
+   connection: {
+      type: "libsql",
+      config: {
+         url: process.env.DB_URL!,
+         authToken: process.env.DB_TOKEN!
+      }
+   }
+});

examples/plasmic/src/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 />;
+}

examples/plasmic/src/pages/test.tsx

@@ -0,0 +1,6 @@
+import { useApi } from "bknd/client";
+
+export default function Test() {
+   const api = useApi(undefined);
+   return <div>{api.baseUrl}</div>;
+}

examples/plasmic/src/plasmic-init.ts

@@ -0,0 +1,17 @@
+import { initPlasmicLoader } from "@plasmicapp/loader-nextjs";
+import { loader } from "@bknd/plasmic";
+
+export const PLASMIC = initPlasmicLoader({
+   projects: [
+      {
+         id: process.env.PLASMIC_ID!,
+         token: process.env.PLASMIC_TOKEN!,
+      }
+   ],
+   preview: true, //process.env.NODE_ENV === "development",
+})
+
+loader(PLASMIC);
+/*
+PLASMIC.registerComponent(BkndData, BkndDataMeta);
+PLASMIC.registerGlobalContext(BkndContext, BkndContextMeta as any);*/

examples/plasmic/src/styles/globals.css

@@ -0,0 +1,3 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;

examples/plasmic/tailwind.config.ts

@@ -0,0 +1,18 @@
+import type { Config } from "tailwindcss";
+
+export default {
+  content: [
+    "./src/pages/**/*.{js,ts,jsx,tsx,mdx}",
+    "./src/components/**/*.{js,ts,jsx,tsx,mdx}",
+    "./src/app/**/*.{js,ts,jsx,tsx,mdx}",
+  ],
+  theme: {
+    extend: {
+      colors: {
+        background: "var(--background)",
+        foreground: "var(--foreground)",
+      },
+    },
+  },
+  plugins: [],
+} satisfies Config;

examples/plasmic/tsconfig.json

@@ -0,0 +1,23 @@
+{
+  "compilerOptions": {
+    "target": "ES2017",
+    "lib": ["dom", "dom.iterable", "esnext"],
+    "allowJs": true,
+    "skipLibCheck": true,
+    "strict": true,
+    "noEmit": true,
+    "esModuleInterop": true,
+    "module": "esnext",
+    "moduleResolution": "bundler",
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "jsx": "preserve",
+    "incremental": true,
+    "noImplicitAny": false,
+    "paths": {
+      "@/*": ["./src/*"]
+    }
+  },
+  "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx"],
+  "exclude": ["node_modules"]
+}