@netless/fastboard 0.0.1 → 0.0.5

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

package/src/helpers/index.ts

@@ -1,18 +0,0 @@
-export function applyStyles(css: string) {
-  const el = document.createElement("style");
-  el.appendChild(document.createTextNode(css));
-  document.head.appendChild(el);
-  return el;
-}
-
-export function clamp(value: number, min: number, max: number) {
-  return Math.min(Math.max(value, min), max);
-}
-
-export function capitalize(str: string) {
-  return str[0].toUpperCase() + str.slice(1);
-}
-
-export function isEqualArray<T>(a: T[], b: T[]) {
-  return a.length === b.length && a.every((e, i) => e === b[i]);
-}