@netless/fastboard-react 0.1.1 → 0.2.0

package/package.json

@@ -1,11 +1,8 @@
 {
   "name": "@netless/fastboard-react",
-  "version": "0.1.1",
+  "version": "0.2.0",
   "description": "A UI kit built on top of @netless/fastboard.",
   "main": "dist/index.js",
-  "module": "dist/index.mjs",
-  "types": "src/index.ts",
-  "sideEffects": false,
   "files": [
     "src",
     "dist"
@@ -13,30 +10,38 @@
   "dependencies": {
     "@tippyjs/react": "^4.2.6",
     "clsx": "^1.1.1",
-    "framer-motion": "^5.6.0",
-    "i18next": "^21.6.6",
+    "framer-motion": "^6.2.1",
+    "i18next": "^21.6.7",
     "rc-slider": "^9.7.5"
   },
   "peerDependencies": {
-    "@netless/fastboard": "*",
+    "@netless/fastboard-core": "*",
     "@netless/window-manager": ">=0.4.0",
     "react": "*",
     "react-dom": "*",
     "white-web-sdk": ">=2.16.0"
   },
   "devDependencies": {
-    "@netless/app-slide": "^0.0.55",
-    "@netless/fastboard": "0.1.1",
-    "@netless/window-manager": "^0.4.0-canary.17",
+    "@netless/app-slide": "^0.0.56",
+    "@netless/fastboard-core": "0.2.0",
+    "@netless/window-manager": "^0.4.0-canary.24",
     "@types/react": "^17.0.38",
     "@types/react-dom": "^17.0.11",
     "sass": "^1.49.0",
     "tippy.js": "^6.3.7",
     "tsup": "^5.11.11",
-    "white-web-sdk": "^2.16.0"
+    "white-web-sdk": "^2.16.1"
+  },
+  "publishConfig": {
+    "main": "dist/index.js",
+    "module": "dist/index.mjs",
+    "types": "src/index.ts"
   },
   "scripts": {
     "build": "tsup",
-    "cleanup": "rimraf dist"
-  }
+    "cleanup": "rimraf dist",
+    "check": "tsc --noEmit"
+  },
+  "module": "dist/index.mjs",
+  "types": "src/index.ts"
 }

package/src/components/Fastboard.tsx

@@ -1,4 +1,4 @@
-import type { FastboardApp } from "@netless/fastboard";
+import type { FastboardApp } from "@netless/fastboard-core";
 import type { ForwardedRef } from "react";
 import type { Language, Theme } from "../typings";
 
@@ -21,20 +21,19 @@ export interface FastboardProps {
 export type DivProps = React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>;
 export type WithForwardedRef<T = HTMLDivElement> = { forwardedRef: ForwardedRef<T> };
 
-export const Fastboard = forwardRef<HTMLDivElement, FastboardProps & DivProps>(function Fastboard(
-  { app, theme, layout, language, ...restProps },
-  ref
-) {
-  if (!app) {
-    return <div className="fastboard-root" ref={ref} {...restProps} />;
-  }
+export const Fastboard = /* @__PURE__ */ forwardRef<HTMLDivElement, FastboardProps & DivProps>(
+  function Fastboard({ app, theme, layout, language, ...restProps }, ref) {
+    if (!app) {
+      return <div className="fastboard-root" ref={ref} {...restProps} />;
+    }
 
-  return (
-    <FastboardAppContext.Provider value={app}>
-      <FastboardInternal forwardedRef={ref} {...{ theme, layout, language }} {...restProps} />
-    </FastboardAppContext.Provider>
-  );
-});
+    return (
+      <FastboardAppContext.Provider value={app}>
+        <FastboardInternal forwardedRef={ref} {...{ theme, layout, language }} {...restProps} />
+      </FastboardAppContext.Provider>
+    );
+  }
+);
 
 function FastboardInternal({
   forwardedRef,

package/src/components/hooks.ts

@@ -1,4 +1,4 @@
-import type { FastboardApp, FastboardReadable } from "@netless/fastboard";
+import type { FastboardApp, FastboardReadable } from "@netless/fastboard-core";
 import type { Theme } from "../typings";
 
 import { BuiltinApps } from "@netless/window-manager";

package/src/index.ts

@@ -8,3 +8,4 @@ export * from "./components/PageControl";
 export * from "./components/Toolbar";
 export * from "./components/PlayerControl";
 export * from "./components/Fastboard";
+export * from "./vanilla";

package/src/vanilla/index.tsx

@@ -0,0 +1,18 @@
+import type { FastboardApp } from "@netless/fastboard-core";
+import type { DivProps, FastboardProps } from "../components/Fastboard";
+
+import React from "react";
+import ReactDOM from "react-dom";
+import { Fastboard } from "../components/Fastboard";
+
+/**
+ * Mount fastboard app to some dom, returns the disposer, which will unmount the app.
+ * @example
+ * let app = await createFastboard({ ...config })
+ * let disposer = mount(app, document.getElementById("whiteboard"))
+ * disposer()
+ */
+export function mount(app: FastboardApp, dom: HTMLElement, props: Omit<FastboardProps & DivProps, "ref">) {
+  ReactDOM.render(<Fastboard app={app} {...props} />, dom);
+  return () => ReactDOM.unmountComponentAtNode(dom);
+}