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

packages/plasmic/package.json

@@ -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",

packages/plasmic/src/components/Image.tsx

@@ -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: {

packages/plasmic/src/components/LazyRender.tsx

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

packages/plasmic/src/components/data/BkndData.tsx

@@ -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: {

packages/plasmic/src/contexts/BkndContext.tsx

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