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

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

View File

@@ -2,7 +2,9 @@ import type { IncomingMessage, ServerResponse } from "node:http";
import { Api, type App } from "bknd";
import { type FrameworkBkndConfig, createFrameworkApp, nodeRequestToRequest } from "../index";
export type NextjsBkndConfig = FrameworkBkndConfig;
export type NextjsBkndConfig = FrameworkBkndConfig & {
cleanSearch?: string[];
};
type GetServerSidePropsContext = {
req: IncomingMessage;
@@ -32,10 +34,13 @@ export function withApi<T>(handler: (ctx: GetServerSidePropsContext & { api: Api
};
}
function getCleanRequest(req: Request) {
// clean search params from "route" attribute
function getCleanRequest(
req: Request,
{ cleanSearch = ["route"] }: Pick<NextjsBkndConfig, "cleanSearch">
) {
const url = new URL(req.url);
url.searchParams.delete("route");
cleanSearch?.forEach((k) => url.searchParams.delete(k));
return new Request(url.toString(), {
method: req.method,
headers: req.headers,
@@ -44,12 +49,12 @@ function getCleanRequest(req: Request) {
}
let app: App;
export function serve(config: NextjsBkndConfig = {}) {
export function serve({ cleanSearch, ...config }: NextjsBkndConfig = {}) {
return async (req: Request) => {
if (!app) {
app = await createFrameworkApp(config);
}
const request = getCleanRequest(req);
const request = getCleanRequest(req, { cleanSearch });
return app.fetch(request, process.env);
};
}

BIN
bun.lockb

Binary file not shown.

View File

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

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>

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.

View File

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

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": {}
}

View File

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

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>

After

Width:  |  Height:  |  Size: 1.5 KiB

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

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

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

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

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

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

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

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

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

View File

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

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

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

View File

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

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;

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"]
}

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

View File

@@ -1,6 +1,6 @@
{
"name": "@bknd/plasmic",
"version": "0.3.4-alpha1",
"version": "0.5.0",
"type": "module",
"sideEffects": false,
"scripts": {
@@ -28,24 +28,24 @@
"react": ">=18",
"react-dom": ">=18",
"@plasmicapp/host": ">=1.0.0",
"@plasmicapp/query": ">=0.1.0"
"@plasmicapp/loader-react": ">=1.0.0"
},
"tsup": {
"entry": [
"src/index.ts"
],
"minify": false,
"minify": true,
"clean": true,
"external": [
"react",
"react-dom",
"@plasmicapp/host",
"@plasmicapp/query",
"@plasmicapp/loader-react",
"swr"
],
"format": [
"esm",
"cjs"
"esm"
],
"platform": "browser",
"bundle": true,
@@ -56,7 +56,7 @@
},
"types": "dist/index.d.ts",
"module": "dist/index.js",
"main": "dist/index.cjs",
"main": "dist/index.js",
"files": [
"dist",
"README.md",

View File

@@ -1,9 +1,7 @@
import type { CodeComponentMeta } from "@plasmicapp/host";
import registerComponent, { type ComponentMeta } from "@plasmicapp/host/registerComponent";
import { type CodeComponentMeta, type ComponentMeta, registerComponent } from "@plasmicapp/host";
// biome-ignore lint/style/useImportType: <explanation>
import React from "react";
//import { PlasmicCanvasContext } from "@plasmicapp/loader-react";
import { useContext, useEffect, useRef, useState } from "react";
import { useEffect, useRef, useState } from "react";
type PlasmicImageProps = {
asset: {

View File

@@ -1,5 +1,4 @@
import type { CodeComponentMeta } from "@plasmicapp/host";
import registerComponent, { type ComponentMeta } from "@plasmicapp/host/registerComponent";
import { type CodeComponentMeta, type ComponentMeta, registerComponent } from "@plasmicapp/host";
// biome-ignore lint/style/useImportType: <explanation>
import React from "react";
import { useEffect, useRef, useState } from "react";

View File

@@ -1,6 +1,10 @@
import { DataProvider, usePlasmicCanvasContext } from "@plasmicapp/host";
import registerComponent, { type ComponentMeta } from "@plasmicapp/host/registerComponent";
import { usePlasmicQueryData } from "@plasmicapp/query";
import {
type ComponentMeta,
DataProvider,
registerComponent,
usePlasmicCanvasContext
} from "@plasmicapp/host";
import { usePlasmicQueryData } from "@plasmicapp/loader-react";
import { useApi, useEntityQuery } from "bknd/client";
import type { RepoQuery } from "bknd/data";
// biome-ignore lint/style/useImportType: <explanation>
@@ -109,7 +113,7 @@ export function BkndData({
limit: entityId ? undefined : limit,
offset: entityId ? undefined : offset,
where: _where,
sort: { by: sortBy, dir: sortDir },
sort: `${sortDir === "desc" ? "-" : ""}${sortBy}`,
with: withRefs,
join: joinRefs
};
@@ -124,7 +128,7 @@ export function BkndData({
let references: string[] = [];
if (entity && entity in entities) {
fields = Object.keys(entities[entity].fields!);
fields = Object.keys(entities[entity]?.fields ?? {});
if (relations) {
const rels = Object.values(relations).filter(
@@ -198,11 +202,11 @@ const ModeFetch = ({
return <LoadingComponent loading={loading} />;
}
if (hasError) {
if (hasError || !data) {
return <ErrorComponent error={error} />;
}
if (data.length === 0) {
if (data?.length === 0) {
return <EmptyComponent empty={empty} />;
}
@@ -248,6 +252,7 @@ export function registerBkndData(
export const BkndDataMeta: ComponentMeta<BkndDataProps> = {
name: "BKND Data",
importName: "BkndData",
section: "BKND",
importPath: "@bknd/plasmic",
providesData: true,
@@ -264,6 +269,7 @@ export const BkndDataMeta: ComponentMeta<BkndDataProps> = {
},
select: {
type: "choice",
multiSelect: true,
options: (props, ctx) => ctx?.fields ?? []
},
limit: {

View File

@@ -1,7 +1,10 @@
import { DataProvider, GlobalActionsProvider, usePlasmicCanvasContext } from "@plasmicapp/host";
import registerGlobalContext, {
type GlobalContextMeta
} from "@plasmicapp/host/registerGlobalContext";
import {
DataProvider,
GlobalActionsProvider,
type GlobalContextMeta,
registerGlobalContext,
usePlasmicCanvasContext
} from "@plasmicapp/host";
import type { AppConfig } from "bknd";
// @ts-ignore
import { ClientProvider, useApi, useAuth, useBaseUrl } from "bknd/client";
@@ -24,7 +27,6 @@ type BkndContextProps = {
const BkndContextContext = createContext<BkndGlobalContextProps>({} as any);
// @todo: it's an issue that we need auth, so we cannot make baseurl adjustable (maybe add an option to useAuth with a specific base url?)
export const BkndContext = ({
children,
baseUrl,
@@ -32,7 +34,7 @@ export const BkndContext = ({
}: React.PropsWithChildren<BkndContextProps>) => {
const auth = useAuth();
const baseurl = baseUrl ?? useBaseUrl();
const api = useApi({ host: baseurl });
const api = useApi(baseurl);
const [data, setData] = useState<BkndGlobalContextProps>({
baseUrl: baseurl,
@@ -49,10 +51,6 @@ export const BkndContext = ({
(async () => {
if (inEditor) {
const result = await api.system.readConfig();
/*const res = await fetch(`${baseurl}/api/system/config`);
const result = (await res.json()) as BkndGlobalContextProps["appConfig"];*/
console.log("appconfig", result);
setData((prev) => ({ ...prev, appConfig: result }));
}
})();
@@ -60,41 +58,15 @@ export const BkndContext = ({
const actions = useMemo(
() => ({
login: async (data: any) => {
console.log("login", data);
const result = await auth.login(data);
console.log("login:result", result);
if (result.res.ok && "user" in result.data) {
//result.data.
return result.data;
} else {
console.log("login failed", result);
}
return false;
},
register: async (data: any) => {
console.log("register", data);
const result = await auth.register(data);
console.log("register:result", result);
if (result.res.ok && "user" in result.data) {
//result.data.
return result.data;
}
return false;
},
logout: async () => {
await auth.logout();
console.log("logged out");
return true;
},
login: auth.login,
register: auth.register,
logout: auth.logout,
setToken: auth.setToken
}),
[baseUrl]
);
console.log("plasmic.bknd.context", { baseUrl });
console.log("plasmic.bknd.context", { baseurl });
return (
<GlobalActionsProvider contextName="BkndContext" actions={actions}>
<BkndContextContext.Provider value={data}>