@netless/fastboard 0.0.4 → 0.0.5

package/dist/svelte.cjs.js

@@ -0,0 +1,2 @@
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});exports[Symbol.toStringTag]="Module";var a=require("svelte/store"),n=require("./index.cjs.js");require("@netless/window-manager");require("white-web-sdk");require("i18next");require("react");require("react-dom");require("clsx");require("@tippyjs/react");require("rc-slider");function o(t,i){return a.readable(null,s=>{let e=null;n.createWhiteboardApp(i).then(r=>{s(e=r)});const u=t.subscribe(r=>{r&&e&&e.bindElement(r)});return()=>{u(),e&&e.dispose()}})}exports.useFastboard=o;
+//# sourceMappingURL=svelte.cjs.js.map

package/dist/svelte.cjs.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"svelte.cjs.js","sources":["../src/svelte.ts"],"sourcesContent":["import { readable, type Readable } from \"svelte/store\";\nimport { createWhiteboardApp } from \"./index\";\n\nimport type { WhiteboardApp, WhiteboardAppConfig } from \"./WhiteboardApp\";\n\nexport type FastBoardConfig = WhiteboardAppConfig;\n\n/**\n * @example\n * ```svelte\n * <script>\n *   let ref = writable(null)\n *   let app = useFastboard(ref, { sdkConfig, joinRoom })\n *   if (app) {\n *     app.insertDocs({...})\n *   }\n * </script>\n * <div style=\"width: 100%; height: 100%\" bind:this={$ref} />\n * ```\n */\nexport function useFastboard(\n  ref: Readable<HTMLElement | null>,\n  config: FastBoardConfig\n): Readable<WhiteboardApp | null> {\n  return readable<WhiteboardApp | null>(null, set => {\n    let app_: WhiteboardApp | null = null;\n\n    createWhiteboardApp(config).then(app => {\n      set((app_ = app));\n    });\n\n    const dispose = ref.subscribe(div => {\n      if (div && app_) {\n        app_.bindElement(div);\n      }\n    });\n\n    return () => {\n      dispose();\n      if (app_) {\n        app_.dispose();\n      }\n    };\n  });\n}\n"],"names":["readable"],"mappings":"kWAqBE,EACA,EACgC,OACzBA,YAA+B,KAAM,GAAO,IAC7C,GAA6B,2BAEb,GAAQ,KAAK,GAAO,GACjC,EAAO,UAGR,GAAU,EAAI,UAAU,GAAO,CAC/B,GAAO,KACJ,YAAY,WAId,IAAM,KAEP,KACG"}

package/dist/svelte.es.js

@@ -0,0 +1,31 @@
+import { readable } from "svelte/store";
+import { createWhiteboardApp } from "./index.es.js";
+import "@netless/window-manager";
+import "white-web-sdk";
+import "i18next";
+import "react";
+import "react-dom";
+import "clsx";
+import "@tippyjs/react";
+import "rc-slider";
+function useFastboard(ref, config) {
+  return readable(null, (set) => {
+    let app_ = null;
+    createWhiteboardApp(config).then((app) => {
+      set(app_ = app);
+    });
+    const dispose = ref.subscribe((div) => {
+      if (div && app_) {
+        app_.bindElement(div);
+      }
+    });
+    return () => {
+      dispose();
+      if (app_) {
+        app_.dispose();
+      }
+    };
+  });
+}
+export { useFastboard };
+//# sourceMappingURL=svelte.es.js.map

package/dist/svelte.es.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"svelte.es.js","sources":["../src/svelte.ts"],"sourcesContent":["import { readable, type Readable } from \"svelte/store\";\nimport { createWhiteboardApp } from \"./index\";\n\nimport type { WhiteboardApp, WhiteboardAppConfig } from \"./WhiteboardApp\";\n\nexport type FastBoardConfig = WhiteboardAppConfig;\n\n/**\n * @example\n * ```svelte\n * <script>\n *   let ref = writable(null)\n *   let app = useFastboard(ref, { sdkConfig, joinRoom })\n *   if (app) {\n *     app.insertDocs({...})\n *   }\n * </script>\n * <div style=\"width: 100%; height: 100%\" bind:this={$ref} />\n * ```\n */\nexport function useFastboard(\n  ref: Readable<HTMLElement | null>,\n  config: FastBoardConfig\n): Readable<WhiteboardApp | null> {\n  return readable<WhiteboardApp | null>(null, set => {\n    let app_: WhiteboardApp | null = null;\n\n    createWhiteboardApp(config).then(app => {\n      set((app_ = app));\n    });\n\n    const dispose = ref.subscribe(div => {\n      if (div && app_) {\n        app_.bindElement(div);\n      }\n    });\n\n    return () => {\n      dispose();\n      if (app_) {\n        app_.dispose();\n      }\n    };\n  });\n}\n"],"names":[],"mappings":";;;;;;;;;;sBAqBE,KACA,QACgC;SACzB,SAA+B,MAAM,SAAO;QAC7C,OAA6B;wBAEb,QAAQ,KAAK,SAAO;UACjC,OAAO;AAAA;UAGR,UAAU,IAAI,UAAU,SAAO;UAC/B,OAAO,MAAM;aACV,YAAY;AAAA;AAAA;WAId,MAAM;;UAEP,MAAM;aACH;AAAA;AAAA;AAAA;AAAA;;"}

package/dist/vue.cjs.js

@@ -0,0 +1,2 @@
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});exports[Symbol.toStringTag]="Module";var t=require("vue-demi"),s=require("./index.cjs.js");require("@netless/window-manager");require("white-web-sdk");require("i18next");require("react");require("react-dom");require("clsx");require("@tippyjs/react");require("rc-slider");function n(u){var e;const r=t.unref(u);return(e=r==null?void 0:r.$el)!=null?e:r}function o(u){return t.getCurrentScope()?(t.onScopeDispose(u),!0):!1}function l(u,r){const e=t.shallowRef(null),i=t.computed(()=>n(u));return s.createWhiteboardApp(r).then(a=>{e.value=a}),t.watchEffect(()=>{i.value&&e.value&&e.value.bindElement(i.value)}),o(()=>{e.value&&e.value.dispose()}),e}exports.unrefElement=n;exports.useFastboard=l;
+//# sourceMappingURL=vue.cjs.js.map

package/dist/vue.cjs.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"vue.cjs.js","sources":["../src/vue.ts"],"sourcesContent":["import type { ComponentPublicInstance, Ref } from \"vue-demi\";\nimport {\n  computed,\n  getCurrentScope,\n  onScopeDispose,\n  shallowRef,\n  unref,\n  watchEffect,\n} from \"vue-demi\";\nimport { createWhiteboardApp } from \"./index\";\n\nimport type { WhiteboardApp, WhiteboardAppConfig } from \"./WhiteboardApp\";\n\nexport type FastBoardConfig = WhiteboardAppConfig;\n\nexport type MaybeRef<T> = T | Ref<T>;\nexport type VueInstance = ComponentPublicInstance;\nexport type MaybeElementRef = MaybeRef<\n  HTMLElement | SVGElement | VueInstance | undefined | null\n>;\n\n/**\n * Get the dom element of a ref of element or Vue component instance\n */\nexport function unrefElement(elRef: MaybeElementRef) {\n  const plain = unref(elRef);\n  return (plain as VueInstance)?.$el ?? plain;\n}\n\nfunction tryOnScopeDispose(fn: () => void) {\n  if (getCurrentScope()) {\n    onScopeDispose(fn);\n    return true;\n  }\n  return false;\n}\n\n/**\n * @example\n * ```vue\n * <script setup>\n * const el = ref(null)\n * const app = useFastboard(el, { sdkConfig, joinRoom })\n * if (app.value) {\n *   app.value.insertDocs({...})\n * }\n * </script>\n * <template>\n *   <div style=\"width: 100%; height: 100%\" ref=\"el\"></div>\n * </template>\n * ```\n */\nexport function useFastboard(el: MaybeElementRef, config: FastBoardConfig) {\n  const app = shallowRef<WhiteboardApp | null>(null);\n  const target = computed(() => unrefElement(el));\n\n  createWhiteboardApp(config).then(app_ => {\n    app.value = app_;\n  });\n\n  watchEffect(() => {\n    if (target.value && app.value) {\n      app.value.bindElement(target.value);\n    }\n  });\n\n  tryOnScopeDispose(() => {\n    if (app.value) {\n      app.value.dispose();\n    }\n  });\n\n  return app;\n}\n"],"names":["unref","getCurrentScope","shallowRef","computed"],"mappings":"8VAwB6B,EAAwB,YAC7C,GAAQA,QAAM,SACZ,oBAAuB,MAAvB,OAA8B,EAGxC,WAA2B,EAAgB,OACrCC,uCACa,GACR,IAEF,cAkBoB,EAAqB,EAAyB,MACnE,GAAMC,aAAiC,MACvC,EAASC,WAAS,IAAM,EAAa,iCAEvB,GAAQ,KAAK,GAAQ,GACnC,MAAQ,kBAGF,IAAM,CACZ,EAAO,OAAS,EAAI,SAClB,MAAM,YAAY,EAAO,WAIf,IAAM,CAClB,EAAI,SACF,MAAM,YAIP"}

package/dist/vue.es.js

@@ -0,0 +1,42 @@
+import { unref, shallowRef, computed, watchEffect, getCurrentScope, onScopeDispose } from "vue-demi";
+import { createWhiteboardApp } from "./index.es.js";
+import "@netless/window-manager";
+import "white-web-sdk";
+import "i18next";
+import "react";
+import "react-dom";
+import "clsx";
+import "@tippyjs/react";
+import "rc-slider";
+function unrefElement(elRef) {
+  var _a;
+  const plain = unref(elRef);
+  return (_a = plain == null ? void 0 : plain.$el) != null ? _a : plain;
+}
+function tryOnScopeDispose(fn) {
+  if (getCurrentScope()) {
+    onScopeDispose(fn);
+    return true;
+  }
+  return false;
+}
+function useFastboard(el, config) {
+  const app = shallowRef(null);
+  const target = computed(() => unrefElement(el));
+  createWhiteboardApp(config).then((app_) => {
+    app.value = app_;
+  });
+  watchEffect(() => {
+    if (target.value && app.value) {
+      app.value.bindElement(target.value);
+    }
+  });
+  tryOnScopeDispose(() => {
+    if (app.value) {
+      app.value.dispose();
+    }
+  });
+  return app;
+}
+export { unrefElement, useFastboard };
+//# sourceMappingURL=vue.es.js.map

package/dist/vue.es.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"vue.es.js","sources":["../src/vue.ts"],"sourcesContent":["import type { ComponentPublicInstance, Ref } from \"vue-demi\";\nimport {\n  computed,\n  getCurrentScope,\n  onScopeDispose,\n  shallowRef,\n  unref,\n  watchEffect,\n} from \"vue-demi\";\nimport { createWhiteboardApp } from \"./index\";\n\nimport type { WhiteboardApp, WhiteboardAppConfig } from \"./WhiteboardApp\";\n\nexport type FastBoardConfig = WhiteboardAppConfig;\n\nexport type MaybeRef<T> = T | Ref<T>;\nexport type VueInstance = ComponentPublicInstance;\nexport type MaybeElementRef = MaybeRef<\n  HTMLElement | SVGElement | VueInstance | undefined | null\n>;\n\n/**\n * Get the dom element of a ref of element or Vue component instance\n */\nexport function unrefElement(elRef: MaybeElementRef) {\n  const plain = unref(elRef);\n  return (plain as VueInstance)?.$el ?? plain;\n}\n\nfunction tryOnScopeDispose(fn: () => void) {\n  if (getCurrentScope()) {\n    onScopeDispose(fn);\n    return true;\n  }\n  return false;\n}\n\n/**\n * @example\n * ```vue\n * <script setup>\n * const el = ref(null)\n * const app = useFastboard(el, { sdkConfig, joinRoom })\n * if (app.value) {\n *   app.value.insertDocs({...})\n * }\n * </script>\n * <template>\n *   <div style=\"width: 100%; height: 100%\" ref=\"el\"></div>\n * </template>\n * ```\n */\nexport function useFastboard(el: MaybeElementRef, config: FastBoardConfig) {\n  const app = shallowRef<WhiteboardApp | null>(null);\n  const target = computed(() => unrefElement(el));\n\n  createWhiteboardApp(config).then(app_ => {\n    app.value = app_;\n  });\n\n  watchEffect(() => {\n    if (target.value && app.value) {\n      app.value.bindElement(target.value);\n    }\n  });\n\n  tryOnScopeDispose(() => {\n    if (app.value) {\n      app.value.dispose();\n    }\n  });\n\n  return app;\n}\n"],"names":[],"mappings":";;;;;;;;;;sBAwB6B,OAAwB;;QAC7C,QAAQ,MAAM;SACZ,qCAAuB,QAAvB,YAA8B;AAAA;AAGxC,2BAA2B,IAAgB;MACrC,mBAAmB;mBACN;WACR;AAAA;SAEF;AAAA;sBAkBoB,IAAqB,QAAyB;QACnE,MAAM,WAAiC;QACvC,SAAS,SAAS,MAAM,aAAa;sBAEvB,QAAQ,KAAK,UAAQ;QACnC,QAAQ;AAAA;cAGF,MAAM;QACZ,OAAO,SAAS,IAAI,OAAO;UACzB,MAAM,YAAY,OAAO;AAAA;AAAA;oBAIf,MAAM;QAClB,IAAI,OAAO;UACT,MAAM;AAAA;AAAA;SAIP;AAAA;;"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@netless/fastboard",
-  "version": "0.0.4",
+  "version": "0.0.5",
   "description": "An open sourced sdk based on white-web-sdk.",
   "main": "./dist/index.cjs.js",
   "module": "./dist/index.es.js",
@@ -14,6 +14,14 @@
       "default": "./dist/index.es.js",
       "types": "./src/index.ts"
     },
+    "./vue": {
+      "node": {
+        "import": "./dist/vue.es.js",
+        "require": "./dist/vue.cjs.js"
+      },
+      "default": "./dist/vue.es.js",
+      "types": "./src/vue.ts"
+    },
     "./package.json": "./package.json"
   },
   "files": [
@@ -37,8 +45,11 @@
     "@netless/app-monaco": "*",
     "@netless/app-slide": "*",
     "@netless/window-manager": "*",
+    "@vue/composition-api": "*",
     "react": "*",
     "react-dom": "*",
+    "svelte": "*",
+    "vue": "*",
     "white-web-sdk": "*"
   },
   "peerDependenciesMeta": {
@@ -53,6 +64,15 @@
     },
     "@netless/app-geogebra": {
       "optional": true
+    },
+    "@vue/composition-api": {
+      "optional": true
+    },
+    "svelte": {
+      "optional": true
+    },
+    "vue": {
+      "optional": true
     }
   },
   "dependencies": {
@@ -60,7 +80,8 @@
     "clsx": "^1.1.1",
     "i18next": "^21.6.5",
     "rc-slider": "^9.7.5",
-    "tippy.js": "^6.3.7"
+    "tippy.js": "^6.3.7",
+    "vue-demi": "^0.12.1"
   },
   "readme": "# @netless/fastboard\n\nA whiteboard starter, based on [white-web-sdk](https://www.npmjs.com/package/white-web-sdk), [@netless/window-manager](https://www.npmjs.com/package/@netless/window-manager)\nand [netless-app](https://github.com/netless-io/netless-app).\n\n## 目录\n\n- [安装](#install)\n- [使用](#usage)\n- [进阶](./docs/advanced.md)\n- [开发](#开发)\n\n<h2 id=\"install\">安装</h2>\n\n```bash\nnpm add @netless/fastboard @netless/window-manager white-web-sdk react react-dom\n```\n\n<h2 id=\"usage\">使用</h2>\n\n<h3 id=\"mount-whiteboard\">挂载白板</h3>\n\n> 原生 `javascript`\n\n```js\nimport { createWhiteboardApp } from \"@netless/fastboard\";\n\nlet whiteboard = await createWhiteboardApp({\n  target: document.getElementById(\"whiteboard\"),\n  // [1]\n  sdkConfig: {\n    appIdentifier: \"whiteboard-appid\",\n  },\n  // [2]\n  joinRoom: {\n    uid: \"unique_id_for_each_client\",\n    uuid: \"room-uuid\",\n    roomToken: \"NETLESSROOM_...\",\n  },\n  // [3]\n  managerConfig: {\n    cursor: true,\n  },\n});\n```\n\n> 使用 `React`\n\n```typescript\nimport { useFastboard, FastBoardConfig } from \"@netless/fastboard\";\nimport ReactDOM from \"react-dom\";\n\nconst config: FastBoardConfig = {\n  sdkConfig: {\n    appIdentifier: \"whiteboard-appid\",\n  },\n  joinRoom: {\n    uid: \"unique_id_for_each_client\",\n    uuid: \"room-uuid\",\n    roomToken: \"NETLESSROOM_...\",\n  },\n};\n\nfunction App() {\n  const [app, ref] = useFastboard(config);\n  return <div ref={ref} />;\n}\nReactDOM.render(<App />, document.getElementById(\"root\"));\n```\n\n[1] 关于 SDK 更多配置请看 [构造 WhiteWebSDK](https://developer.netless.link/javascript-zh/home/construct-white-web-sdk)\n\n[2] 加入房间更多配置请看 [构造 Room 与 Player 对象](https://developer.netless.link/javascript-zh/home/construct-room-and-player)\n\n[3] 配置 `WindowManager` 请看 [WindowManager](https://github.com/netless-io/window-manager#mount)\n\n### 使用 APPS\n\n**注意:** 需要先安装对应的 APP\n\n```bash\nnpm add @netless/app-slide\n```\n\n```typescript\n// 插入动态 PPTX 至白板\nconst appId = await whiteboard.insertDocs({\n  fileType: \"pptx\",\n  params: {\n    scenePath: `/ppt/${uuid}`, // [1]\n    title: \"a.pptx\",\n    taskId: \"1234567...\", // [2]\n    url: \"https://convertcdn.netless.link/dynamicConvert\", // [3]\n  },\n});\n\n// 插入 PDF/静态 PPT 至白板\nconst appId = await whiteboard.insertDocs({\n  fileType: \"pdf\", // or ppt\n  options: {\n    scenePath: `/pdf${uuid}`,\n    title: \"a.pdf\", // 可选\n    scenes: [], // SceneDefinition[] 静态/动态 Scene 数据\n  },\n});\n\n// 插入音频/视频至白板\nconst appId = await whiteboard.manager.addApp({\n  kind: \"MediaPlayer\",\n  options: {\n    title: \"test.mp3\", // 可选\n  },\n  attributes: {\n    src: \"xxxx\", // 音视频 url\n  },\n});\n```\n\n更多 `app` 请看 [netless-app](#https://github.com/netless-io/netless-app)\n\n## Develop\n\n```bash\npnpm i\n# upgrade dependencies\npnpm up -Li\n# build and see bundle size\npnpm build\nopen node_modules/.visualizer/stats.html\n```\n\n## License\n\nMIT @ [netless](https://github.com/netless-io)\n"
 }

package/src/WhiteboardApp.ts

@@ -10,11 +10,33 @@ export type { WhiteboardAppConfig, InsertDocsParams };
 export class WhiteboardApp {
   private readonly _instance: Instance;
 
+  private _target: HTMLElement | null = null;
+  public get target(): HTMLElement | null {
+    return this._target;
+  }
+
   constructor(readonly config: WhiteboardAppConfig) {
     this._instance = new Instance(config);
   }
 
+  get room() {
+    return this._instance.room;
+  }
+
+  get manager() {
+    return this._instance.manager;
+  }
+
+  get sdk() {
+    return this._instance.sdk;
+  }
+
+  get i18n() {
+    return this._instance.i18n;
+  }
+
   public bindElement(target?: HTMLElement | null) {
+    this._target = target || null;
     this._instance.target = target || null;
   }
 
@@ -22,6 +44,18 @@ export class WhiteboardApp {
     return this._instance.insertDocs(params);
   }
 
+  public insertCodeEditor() {
+    return this._instance.insertCodeEditor();
+  }
+
+  public insertGeoGebra() {
+    return this._instance.insertGeoGebra();
+  }
+
+  public insertCountdown() {
+    return this._instance.insertCountdown();
+  }
+
   public changeLanguage(language: Language) {
     return this._instance.changeLanguage(language);
   }

package/src/index.ts

@@ -10,6 +10,10 @@ export { PageControl, type PageControlProps } from "./components/PageControl";
 export { RedoUndo, type RedoUndoProps } from "./components/RedoUndo";
 export { Toolbar, type ToolbarProps } from "./components/Toolbar";
 export { ZoomControl, type ZoomControlProps } from "./components/ZoomControl";
+export {
+  PlayerControl,
+  type PlayerControlProps,
+} from "./components/PlayerControl";
 export * from "./WhiteboardApp";
 export * from "./hooks";
 

package/src/svelte.ts

@@ -0,0 +1,45 @@
+import { readable, type Readable } from "svelte/store";
+import { createWhiteboardApp } from "./index";
+
+import type { WhiteboardApp, WhiteboardAppConfig } from "./WhiteboardApp";
+
+export type FastBoardConfig = WhiteboardAppConfig;
+
+/**
+ * @example
+ * ```svelte
+ * <script>
+ *   let ref = writable(null)
+ *   let app = useFastboard(ref, { sdkConfig, joinRoom })
+ *   if (app) {
+ *     app.insertDocs({...})
+ *   }
+ * </script>
+ * <div style="width: 100%; height: 100%" bind:this={$ref} />
+ * ```
+ */
+export function useFastboard(
+  ref: Readable<HTMLElement | null>,
+  config: FastBoardConfig
+): Readable<WhiteboardApp | null> {
+  return readable<WhiteboardApp | null>(null, set => {
+    let app_: WhiteboardApp | null = null;
+
+    createWhiteboardApp(config).then(app => {
+      set((app_ = app));
+    });
+
+    const dispose = ref.subscribe(div => {
+      if (div && app_) {
+        app_.bindElement(div);
+      }
+    });
+
+    return () => {
+      dispose();
+      if (app_) {
+        app_.dispose();
+      }
+    };
+  });
+}

package/src/vue.ts

@@ -0,0 +1,74 @@
+import type { ComponentPublicInstance, Ref } from "vue-demi";
+import {
+  computed,
+  getCurrentScope,
+  onScopeDispose,
+  shallowRef,
+  unref,
+  watchEffect,
+} from "vue-demi";
+import { createWhiteboardApp } from "./index";
+
+import type { WhiteboardApp, WhiteboardAppConfig } from "./WhiteboardApp";
+
+export type FastBoardConfig = WhiteboardAppConfig;
+
+export type MaybeRef<T> = T | Ref<T>;
+export type VueInstance = ComponentPublicInstance;
+export type MaybeElementRef = MaybeRef<
+  HTMLElement | SVGElement | VueInstance | undefined | null
+>;
+
+/**
+ * Get the dom element of a ref of element or Vue component instance
+ */
+export function unrefElement(elRef: MaybeElementRef) {
+  const plain = unref(elRef);
+  return (plain as VueInstance)?.$el ?? plain;
+}
+
+function tryOnScopeDispose(fn: () => void) {
+  if (getCurrentScope()) {
+    onScopeDispose(fn);
+    return true;
+  }
+  return false;
+}
+
+/**
+ * @example
+ * ```vue
+ * <script setup>
+ * const el = ref(null)
+ * const app = useFastboard(el, { sdkConfig, joinRoom })
+ * if (app.value) {
+ *   app.value.insertDocs({...})
+ * }
+ * </script>
+ * <template>
+ *   <div style="width: 100%; height: 100%" ref="el"></div>
+ * </template>
+ * ```
+ */
+export function useFastboard(el: MaybeElementRef, config: FastBoardConfig) {
+  const app = shallowRef<WhiteboardApp | null>(null);
+  const target = computed(() => unrefElement(el));
+
+  createWhiteboardApp(config).then(app_ => {
+    app.value = app_;
+  });
+
+  watchEffect(() => {
+    if (target.value && app.value) {
+      app.value.bindElement(target.value);
+    }
+  });
+
+  tryOnScopeDispose(() => {
+    if (app.value) {
+      app.value.dispose();
+    }
+  });
+
+  return app;
+}