shishantbiswas/bknd
1
0
Fork 0
mirror of https://github.com/shishantbiswas/bknd.git synced 2026-03-16 04:27:21 +00:00
Code Issues Packages Projects Releases Wiki Activity

updated plasmic package to work with new hooks + added example

Browse Source
This commit is contained in:
dswbx
2024-12-18 08:41:11 +01:00
parent 1631bbb754
commit c4138ef823
34 changed files with 491 additions and 334 deletions
Download Patch File Download Diff File Expand all files Collapse all files

78
examples/plasmic/src/pages/[[...catchall]].tsx Normal file
View File

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

11
examples/plasmic/src/pages/_app.tsx Normal file
View File

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

13
examples/plasmic/src/pages/_document.tsx Normal file
View File

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

25
examples/plasmic/src/pages/admin/[[...admin]].tsx Normal file
View File

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

16
examples/plasmic/src/pages/api/[...route].ts Normal file
View File

@@ -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!
}
}
});

7
examples/plasmic/src/pages/plasmic-host.tsx Normal file
View File

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

6
examples/plasmic/src/pages/test.tsx Normal file
View File

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

17
examples/plasmic/src/plasmic-init.ts Normal file
View File

@@ -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);*/

3
examples/plasmic/src/styles/globals.css Normal file
View File

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