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

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

Browse Source
This commit is contained in:
dswbx
2025-01-15 14:50:10 +01:00
parent 7b0a41b297
commit f47d0b1761
30 changed files with 247 additions and 311 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
examples/plasmic/.gitignore vendored
View File

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

13
examples/plasmic/index.html Normal file
View File

@@ -0,0 +1,13 @@
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<link rel="icon" type="image/svg+xml" href="/vite.svg" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Vite + React + TS</title>
</head>
<body>
<div id="root"></div>
<script type="module" src="/src/main.tsx"></script>
</body>
</html>

5
examples/plasmic/next-env.d.ts vendored
View File

@@ -1,5 +0,0 @@
/// <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.

8
examples/plasmic/next.config.ts
View File

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

27
examples/plasmic/package.json
View File

@@ -1,26 +1,17 @@
{
"name": "plasmic-nextjs",
"version": "0.1.0",
"name": "plasmic-wouter",
"private": true,
"version": "0.0.0",
"type": "module",
"scripts": {
"dev": "next dev",
"build": "next build",
"start": "next start",
"lint": "next lint"
"dev": "vite",
"build": "vite build",
"preview": "vite preview"
},
"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"
"@plasmicapp/loader-react": "^1.0.373",
"bknd": "workspace:*"
},
"devDependencies": {
"typescript": "^5",
"@types/node": "^20",
"@types/react": "^19",
"@types/react-dom": "^19",
"postcss": "^8"
}
"devDependencies": {}
}

8
examples/plasmic/postcss.config.mjs
View File

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

1
examples/plasmic/public/vite.svg Normal file
View File

@@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--logos" width="31.88" height="32" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 257"><defs><linearGradient id="IconifyId1813088fe1fbc01fb466" x1="-.828%" x2="57.636%" y1="7.652%" y2="78.411%"><stop offset="0%" stop-color="#41D1FF"></stop><stop offset="100%" stop-color="#BD34FE"></stop></linearGradient><linearGradient id="IconifyId1813088fe1fbc01fb467" x1="43.376%" x2="50.316%" y1="2.242%" y2="89.03%"><stop offset="0%" stop-color="#FFEA83"></stop><stop offset="8.333%" stop-color="#FFDD35"></stop><stop offset="100%" stop-color="#FFA800"></stop></linearGradient></defs><path fill="url(#IconifyId1813088fe1fbc01fb466)" d="M255.153 37.938L134.897 252.976c-2.483 4.44-8.862 4.466-11.382.048L.875 37.958c-2.746-4.814 1.371-10.646 6.827-9.67l120.385 21.517a6.537 6.537 0 0 0 2.322-.004l117.867-21.483c5.438-.991 9.574 4.796 6.877 9.62Z"></path><path fill="url(#IconifyId1813088fe1fbc01fb467)" d="M185.432.063L96.44 17.501a3.268 3.268 0 0 0-2.634 3.014l-5.474 92.456a3.268 3.268 0 0 0 3.997 3.378l24.777-5.718c2.318-.535 4.413 1.507 3.936 3.838l-7.361 36.047c-.495 2.426 1.782 4.5 4.151 3.78l15.304-4.649c2.372-.72 4.652 1.36 4.15 3.788l-11.698 56.621c-.732 3.542 3.979 5.473 5.943 2.437l1.313-2.028l72.516-144.72c1.215-2.423-.88-5.186-3.54-4.672l-25.505 4.922c-2.396.462-4.435-1.77-3.759-4.114l16.646-57.705c.677-2.35-1.37-4.583-3.769-4.113Z"></path></svg>
Side by Side

After

Width:  |  Height:  |  Size: 1.5 KiB

88
examples/plasmic/src/App.tsx Normal file
View File

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

8
examples/plasmic/src/admin.tsx Normal file
View File

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

12
examples/plasmic/src/main.tsx Normal file
View File

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

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

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

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

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

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

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

22
examples/plasmic/src/pages/admin/[[...admin]].tsx
View File

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

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

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

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

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

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

@@ -1,6 +0,0 @@
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
View File

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

43
examples/plasmic/src/server.ts Normal file
View File

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

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

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

18
examples/plasmic/tailwind.config.ts
View File

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

28
examples/plasmic/tsconfig.json
View File

@@ -1,23 +1,21 @@
{
"compilerOptions": {
"target": "ES2017",
"lib": ["dom", "dom.iterable", "esnext"],
"allowJs": true,
"target": "ES2022",
"lib": ["ES2020", "DOM", "DOM.Iterable"],
"module": "ESNext",
"skipLibCheck": true,
"strict": true,
"noEmit": true,
"esModuleInterop": true,
"module": "esnext",
"moduleResolution": "bundler",
"resolveJsonModule": true,
"allowImportingTsExtensions": true,
"isolatedModules": true,
"jsx": "preserve",
"incremental": true,
"moduleDetection": "force",
"noEmit": true,
"jsx": "react-jsx",
"strict": true,
"noUnusedLocals": true,
"noImplicitAny": false,
"paths": {
"@/*": ["./src/*"]
}
"noUnusedParameters": true,
"noFallthroughCasesInSwitch": true,
"noUncheckedSideEffectImports": true
},
"include": ["next-env.d.ts", "**/*.ts", "**/*.tsx"],
"exclude": ["node_modules"]
"include": ["src", "vite.config.ts"]
}

15
examples/plasmic/vite.config.ts Normal file
View File

@@ -0,0 +1,15 @@
import { devServer } from "bknd/adapter/vite";
import react from "@vitejs/plugin-react";
import { defineConfig } from "vite";
import tsconfigPaths from "vite-tsconfig-paths";
// https://vitejs.dev/config/
export default defineConfig({
plugins: [
react(),
tsconfigPaths(),
devServer({
entry: "./src/server.ts"
}) as any
]
});