update plasmic package to omit cjs, migrated example from nextjs to vite/wouter

examples/plasmic/src/App.tsx

@@ -0,0 +1,88 @@
+import { registerAll } from "@bknd/plasmic";
+import {
+   type ComponentRenderData,
+   PlasmicCanvasHost,
+   PlasmicComponent,
+   type PlasmicComponentLoader,
+   PlasmicRootProvider,
+   initPlasmicLoader
+} from "@plasmicapp/loader-react";
+import { Suspense, forwardRef, lazy, useEffect, useState } from "react";
+import { Route, Router, Switch } from "wouter";
+const Admin = lazy(() => import("./admin"));
+
+export const PLASMIC = initPlasmicLoader({
+   projects: [
+      {
+         id: import.meta.env.VITE_PLASMIC_ID as string,
+         token: import.meta.env.VITE_PLASMIC_TOKEN as string
+      }
+   ],
+   // Fetches the latest revisions, whether or not they were unpublished!
+   // Disable for production to ensure you render only published changes.
+   preview: true
+});
+
+registerAll(PLASMIC);
+
+export default function App() {
+   return (
+      <Router>
+         <Switch>
+            <Route path="/admin/*?">
+               <Suspense>
+                  <Admin />
+               </Suspense>
+            </Route>
+            <Route path="/host" component={PlasmicCanvasHost as any} />
+            <Route path="/*" component={() => <CatchAllPage PLASMIC={PLASMIC} />} />
+         </Switch>
+      </Router>
+   );
+}
+
+const CustomLink = forwardRef<any, any>((props, ref) => {
+   //console.log("rendering custom link", props);
+   //return null;
+   if ("data-replace" in props) {
+      return <a ref={ref} {...props} />;
+   }
+   //return <a ref={ref} {...props} />;
+   // @ts-ignore it's because of the link
+   return <Link ref={ref} {...props} />;
+});
+
+export function CatchAllPage({
+   PLASMIC,
+   prefix = ""
+}: { PLASMIC: PlasmicComponentLoader; prefix?: string }) {
+   const [loading, setLoading] = useState(true);
+   const [pageData, setPageData] = useState<ComponentRenderData | null>(null);
+
+   const pathname = location.pathname.replace(prefix, "");
+   const path = pathname.length === 0 ? "/" : pathname;
+   useEffect(() => {
+      async function load() {
+         const pageData = await PLASMIC.maybeFetchComponentData(path);
+         setPageData(pageData);
+         setLoading(false);
+      }
+      load().catch(console.error);
+   }, []);
+
+   if (loading) {
+      return <>Loading ...</>;
+   }
+   if (!pageData) {
+      return <>Not found</>;
+   }
+
+   const pageMeta = pageData.entryCompMetas[0];
+
+   // The page will already be cached from the `load` call above.
+   return (
+      <PlasmicRootProvider loader={PLASMIC} pageParams={pageMeta.params} Link={CustomLink}>
+         <PlasmicComponent component={path} />
+      </PlasmicRootProvider>
+   );
+}

examples/plasmic/src/admin.tsx

@@ -0,0 +1,8 @@
+/// <reference types="vite/client" />
+
+import { Admin } from "bknd/ui";
+import "bknd/dist/styles.css";
+
+export default function AdminPage() {
+   return <Admin config={{ basepath: "/admin" }} />;
+}

examples/plasmic/src/main.tsx

@@ -0,0 +1,12 @@
+import { ClientProvider } from "bknd/client";
+import { StrictMode } from "react";
+import { createRoot } from "react-dom/client";
+import App from "./App.tsx";
+
+createRoot(document.getElementById("root")!).render(
+   <StrictMode>
+      <ClientProvider>
+         <App />
+      </ClientProvider>
+   </StrictMode>
+);

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

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

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

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

@@ -1,22 +0,0 @@
-import { withApi } from "bknd/adapter/nextjs";
-// pages/admin/[[...admin]].tsx
-import type { InferGetServerSidePropsType as InferProps } from "next";
-import dynamic from "next/dynamic";
-import "bknd/dist/styles.css";
-
-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({ user }: InferProps<typeof getServerSideProps>) {
-   if (typeof document === "undefined") return null;
-   return <Admin withProvider={{ user }} config={{ basepath: "/admin" }} />;
-}

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

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

@@ -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 />;
-}

examples/plasmic/src/pages/test.tsx

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

examples/plasmic/src/plasmic-init.ts

@@ -1,17 +0,0 @@
-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/server.ts

@@ -0,0 +1,43 @@
+import { App } from "bknd";
+import { serve } from "bknd/adapter/vite";
+import { boolean, em, entity, text } from "bknd/data";
+import { secureRandomString } from "bknd/utils";
+
+export default serve({
+   initialConfig: {
+      data: em({
+         todos: entity("todos", {
+            title: text(),
+            done: boolean()
+         })
+      }).toJSON(),
+      auth: {
+         enabled: true,
+         jwt: {
+            secret: secureRandomString(64)
+         }
+      }
+   },
+   options: {
+      seed: async (ctx) => {
+         await ctx.em.mutator("todos" as any).insertMany([
+            { title: "Learn bknd", done: true },
+            { title: "Build something cool", done: false }
+         ]);
+      }
+   },
+   // here we can hook into the app lifecycle events ...
+   beforeBuild: async (app) => {
+      app.emgr.onEvent(
+         App.Events.AppFirstBoot,
+         async () => {
+            // ... to create an initial user
+            await app.module.auth.createUser({
+               email: "ds@bknd.io",
+               password: "12345678"
+            });
+         },
+         "sync"
+      );
+   }
+});

examples/plasmic/src/styles/globals.css

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