@netless/fastboard-ui 0.3.4-canary.0 → 0.3.4

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@netless/fastboard-ui",
-  "version": "0.3.4-canary.0",
+  "version": "0.3.4",
   "description": "The front-end of @netless/fastboard-core.",
   "main": "dist/index.js",
   "svelte": "dist/index.svelte.mjs",
@@ -10,14 +10,14 @@
   ],
   "repository": "netless-io/fastboard",
   "peerDependencies": {
-    "@netless/fastboard-core": "0.3.4-canary.0"
+    "@netless/fastboard-core": "0.3.4"
   },
   "dependencies": {
     "tippy.js": "^6.3.7"
   },
   "devDependencies": {
     "@netless/esbuild-plugin-inline-sass": "0.1.0",
-    "@netless/fastboard-core": "0.3.4-canary.0"
+    "@netless/fastboard-core": "0.3.4"
   },
   "scripts": {
     "cleanup": "rimraf dist",

package/src/components/Fastboard/Fastboard.svelte

@@ -21,6 +21,7 @@
 
   let container: HTMLDivElement;
   let layout: "hidden" | "toolbar-only" | "visible" = "hidden";
+  let mounted = false;
 
   $: writable = app?.writable;
   $: boxState = app?.boxState;
@@ -39,13 +40,16 @@
   }
 
   $: try {
-    if (app && container) app.bindContainer(container);
+    if (app && container) {
+      app.bindContainer(container);
+      mounted = true;
+    }
   } catch (err) {
     console.error("[fastboard] An error occurred while binding container");
     console.error(err);
   }
 
-  $: if (app && theme) {
+  $: if (app && theme && mounted) {
     app.manager.setPrefersColorScheme(theme);
   }
 

package/src/components/Fastboard/ReplayFastboard.svelte

@@ -15,15 +15,19 @@
   const name = "fastboard";
 
   let container: HTMLDivElement;
+  let mounted = false;
 
   $: try {
-    if (player && container) player.bindContainer(container);
+    if (player && container) {
+      player.bindContainer(container);
+      mounted = true;
+    }
   } catch (err) {
     console.error("[fastboard] An error occurred while binding container");
     console.error(err);
   }
 
-  $: if (player && theme) {
+  $: if (player && theme && mounted) {
     player.manager.setPrefersColorScheme(theme);
   }
 

package/src/helpers/index.ts

@@ -0,0 +1,94 @@
+import type { FastboardApp, FastboardPlayer } from "@netless/fastboard-core";
+import type { FastboardProps, ReplayFastboardProps } from "../components/Fastboard";
+
+import { Fastboard, ReplayFastboard } from "../components/Fastboard";
+
+export interface UI {
+  /** render UI to div */
+  mount(div: Element, props?: Omit<FastboardProps, "app">): UI;
+  /** update UI (theme, language, etc.) */
+  update(props?: Omit<FastboardProps, "app">): void;
+  /** remove UI */
+  destroy(): void;
+}
+
+/**
+ * @example
+ * let ui = createUI(fastboardApp, document.getElementById("whiteboard"));
+ * ui.update({ theme: "dark" })
+ */
+export function createUI(app: FastboardApp, div?: Element): UI {
+  let fastboard: Fastboard | undefined;
+
+  const ui: UI = {
+    mount(div: Element, props?: Omit<FastboardProps, "app">) {
+      if (fastboard) {
+        fastboard.$destroy();
+      }
+      fastboard = new Fastboard({ target: div, props: { app, ...props } });
+      return ui;
+    },
+    update(props?: Omit<FastboardProps, "app">) {
+      if (fastboard) {
+        fastboard.$set(props);
+      }
+    },
+    destroy() {
+      if (fastboard) {
+        fastboard.$destroy();
+      }
+      fastboard = undefined;
+    },
+  };
+
+  if (div) {
+    ui.mount(div);
+  }
+
+  return ui;
+}
+
+export interface ReplayUI {
+  /** render UI to div */
+  mount(div: Element, props?: Omit<ReplayFastboardProps, "player">): ReplayUI;
+  /** update UI (theme, language, etc.) */
+  update(props?: Omit<ReplayFastboardProps, "player">): void;
+  /** remove UI */
+  destroy(): void;
+}
+
+/**
+ * @example
+ * let ui = createReplayUI(fastboardPlayer, document.getElementById("whiteboard"));
+ * ui.update({ theme: "dark" })
+ */
+export function createReplayUI(player: FastboardPlayer, div?: Element): ReplayUI {
+  let fastboard: ReplayFastboard | undefined;
+
+  const ui: ReplayUI = {
+    mount(div: Element, props?: Omit<ReplayFastboardProps, "player">) {
+      if (fastboard) {
+        fastboard.$destroy();
+      }
+      fastboard = new ReplayFastboard({ target: div, props: { player, ...props } });
+      return ui;
+    },
+    update(props?: Omit<ReplayFastboardProps, "player">) {
+      if (fastboard) {
+        fastboard.$set(props);
+      }
+    },
+    destroy() {
+      if (fastboard) {
+        fastboard.$destroy();
+      }
+      fastboard = undefined;
+    },
+  };
+
+  if (div) {
+    ui.mount(div);
+  }
+
+  return ui;
+}

package/src/index.ts

@@ -8,6 +8,7 @@ export { default as PlayerControl, type PlayerControlProps } from "./components/
 export { Fastboard, ReplayFastboard } from "./components/Fastboard";
 export type { FastboardProps, ReplayFastboardProps } from "./components/Fastboard";
 
+export * from "./helpers";
 export * from "./behaviors";
 
 import "./style.scss";