@netless/fastboard-react 1.0.0-canary.2 → 1.0.0-canary.3

package/dist/index.d.ts

@@ -1,5 +1,4 @@
-import * as _netless_fastboard_core from '@netless/fastboard-core';
-import { FastboardOptions, FastboardReplayOptions, FastboardApp, FastboardPlayer } from '@netless/fastboard-core';
+import { FastboardOptions, FastboardApp, FastboardReplayOptions, FastboardPlayer } from '@netless/fastboard-core';
 export * from '@netless/fastboard-core';
 import { RedoUndoProps, ZoomControlProps, PageControlProps, ToolbarProps, FastboardProps, ReplayFastboardProps } from '@netless/fastboard-ui';
 export { AppInToolbar, AppsInToolbar, FastboardProps, FastboardUIConfig, GenericIcon, Language, PageControlProps, RedoUndoProps, ReplayFastboardProps, Theme, ToolbarProps, ZoomControlProps, apps } from '@netless/fastboard-ui';
@@ -32,7 +31,7 @@ declare const ReplayFastboard: react.FunctionComponent<ReplayFastboardProps>;
  *   },
  * })
  */
-declare function createFastboard<TEventData = any>(options: FastboardOptions): Promise<_netless_fastboard_core.FastboardApp<TEventData>>;
+declare function createFastboard<TEventData = any>(options: FastboardOptions): Promise<FastboardApp<TEventData>>;
 
 /**
  * Create a FastboardPlayer instance.
@@ -50,7 +49,7 @@ declare function createFastboard<TEventData = any>(options: FastboardOptions): P
  *   },
  * })
  */
-declare function replayFastboard<TEventData = any>(options: FastboardReplayOptions): Promise<_netless_fastboard_core.FastboardPlayer<TEventData>>;
+declare function replayFastboard<TEventData = any>(options: FastboardReplayOptions): Promise<FastboardPlayer<TEventData>>;
 
 declare function useFastboard(config: () => FastboardOptions): FastboardApp | null;
 declare function useReplayFastboard(config: () => FastboardReplayOptions): FastboardPlayer | null;

package/dist/index.js

@@ -4,14 +4,14 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 var fastboardCore = require('@netless/fastboard-core');
 var fastboardUi = require('@netless/fastboard-ui');
-var React = require('react');
 var windowManager = require('@netless/window-manager');
 var NetlessAppSlide = require('@netless/app-slide');
+var React = require('react');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
-var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 var NetlessAppSlide__default = /*#__PURE__*/_interopDefaultLegacy(NetlessAppSlide);
+var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 
 // inline-sass-helper:inline-sass-style-helper.js
 function injectStyle(text) {
@@ -28,6 +28,47 @@ var style_default = '.netless-window-manager-playground{width:100%;height:100%;p
 
 // inline-sass-stub:./src/style.scss
 injectStyle(style_default);
+function registerSlide() {
+  if (windowManager.WindowManager.registered.has(NetlessAppSlide__default["default"].kind))
+    return;
+  windowManager.WindowManager.register({
+    kind: NetlessAppSlide__default["default"].kind,
+    appOptions: { debug: false },
+    src: NetlessAppSlide__default["default"],
+    addHooks: NetlessAppSlide.addHooks
+  });
+}
+var DefaultApps = {};
+function registerDefaultApps() {
+  Object.keys(DefaultApps).forEach((kind) => {
+    if (windowManager.WindowManager.registered.has(kind))
+      return;
+    windowManager.WindowManager.register({ kind, ...DefaultApps[kind] });
+  });
+}
+var injected = false;
+function ensureNetlessUA() {
+  if (typeof window !== "undefined" && !injected) {
+    injected = true;
+    let str = window.__netlessUA || "";
+    str += ` ${fastboardCore.name}/${fastboardCore.version} `;
+    window.__netlessUA = str;
+  }
+}
+
+// src/create.ts
+async function createFastboard(options) {
+  ensureNetlessUA();
+  registerSlide();
+  registerDefaultApps();
+  return fastboardCore.createFastboardCore(options);
+}
+async function replayFastboard(options) {
+  ensureNetlessUA();
+  registerSlide();
+  registerDefaultApps();
+  return fastboardCore.replayFastboardCore(options);
+}
 var useIsomorphicLayoutEffect = typeof document !== "undefined" ? React.useLayoutEffect : React.useEffect;
 function useUpdateEffect(effect, deps) {
   const isFirst = React.useRef(true);
@@ -39,7 +80,7 @@ function useUpdateEffect(effect, deps) {
     return effect();
   }, deps);
 }
-function wrapReactComponent(SvelteComponent, name) {
+function wrapReactComponent(SvelteComponent, name2) {
   function ReactComponent(props) {
     const [container, setContainer] = React.useState(null);
     const component = React.useRef(null);
@@ -63,7 +104,7 @@ function wrapReactComponent(SvelteComponent, name) {
       ref: setContainer
     });
   }
-  ReactComponent.displayName = name;
+  ReactComponent.displayName = name2;
   return ReactComponent;
 }
 function useFastboard(config) {
@@ -71,7 +112,7 @@ function useFastboard(config) {
   const [fastboard, setFastboard] = React.useState(null);
   React.useEffect(() => {
     let fastboard2 = null;
-    fastboardCore.createFastboardCore(config()).then((app) => {
+    createFastboard(config()).then((app) => {
       if (!unmountRef.current) {
         setFastboard(fastboard2 = app);
       } else {
@@ -90,7 +131,7 @@ function useReplayFastboard(config) {
   const [fastboard, setFastboard] = React.useState(null);
   React.useEffect(() => {
     let fastboard2 = null;
-    fastboardCore.replayFastboardCore(config()).then((app) => {
+    replayFastboard(config()).then((app) => {
       if (!unmountRef.current) {
         setFastboard(fastboard2 = app);
       } else {
@@ -121,34 +162,6 @@ var ReplayFastboard = /* @__PURE__ */ wrapReactComponent(
   fastboardUi.ReplayFastboard,
   "ReplayFastboard"
 );
-function registerSlide() {
-  if (windowManager.WindowManager.registered.has(NetlessAppSlide__default["default"].kind))
-    return;
-  windowManager.WindowManager.register({
-    kind: NetlessAppSlide__default["default"].kind,
-    appOptions: { debug: false },
-    src: NetlessAppSlide__default["default"],
-    addHooks: NetlessAppSlide.addHooks
-  });
-}
-var DefaultApps = {};
-function registerDefaultApps() {
-  Object.keys(DefaultApps).forEach((kind) => {
-    if (windowManager.WindowManager.registered.has(kind))
-      return;
-    windowManager.WindowManager.register({ kind, ...DefaultApps[kind] });
-  });
-}
-async function createFastboard(options) {
-  registerSlide();
-  registerDefaultApps();
-  return fastboardCore.createFastboardCore(options);
-}
-async function replayFastboard(options) {
-  registerSlide();
-  registerDefaultApps();
-  return fastboardCore.replayFastboardCore(options);
-}
 
 Object.defineProperty(exports, 'apps', {
   enumerable: true,

package/dist/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/index.tsx","../src/RedoUndo.tsx","../src/hooks.tsx","../src/ZoomControl.tsx","../src/PageControl.tsx","../src/Toolbar.tsx","../src/Fastboard.tsx","../src/behaviors/netless-app.ts","../src/create.ts","../src/replay.ts"],"names":["fastboard","createFastboardCore","replayFastboardCore"],"mappings":"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","sourcesContent":["import \"./style.scss\";\n\nexport * from \"@netless/fastboard-core\";\nexport { apps } from \"@netless/fastboard-ui\";\nexport type {\n  Theme,\n  Language,\n  GenericIcon,\n  AppInToolbar,\n  AppsInToolbar,\n  FastboardUIConfig,\n} from \"@netless/fastboard-ui\";\nexport * from \"./RedoUndo\";\nexport * from \"./ZoomControl\";\nexport * from \"./PageControl\";\nexport * from \"./Toolbar\";\nexport * from \"./Fastboard\";\nexport * from \"./behaviors\";\nexport * from \"./create\";\nexport * from \"./replay\";\nexport { useFastboard, useReplayFastboard } from \"./hooks\";\n\n// Caution about Export Namespace (Star)\n// esbuild can not handle nested `export *`, i.e. given two files:\n//\n// foo: export * from './bar'\n// bar: export * from 'baz' (external: baz)\n//\n// the result of bundling foo will be broken.\n// `export * from external-module` works and only works at the entry points.\n// ref: https://github.com/evanw/esbuild/issues/1737\n","import type { RedoUndoProps } from \"@netless/fastboard-ui\";\n\nimport { RedoUndo as RedoUndoImpl } from \"@netless/fastboard-ui\";\nimport { wrapReactComponent } from \"./hooks\";\n\nexport type { RedoUndoProps };\n\nexport const RedoUndo = /* @__PURE__ */ wrapReactComponent<RedoUndoProps>(RedoUndoImpl, \"RedoUndo\");\n","/* eslint-disable react-hooks/exhaustive-deps */\nimport type {\n  FastboardApp,\n  FastboardOptions,\n  FastboardPlayer,\n  FastboardReplayOptions,\n} from \"@netless/fastboard-core\";\nimport type { DependencyList, EffectCallback, FunctionComponent } from \"react\";\nimport type { SvelteComponent as SvelteComponentType } from \"svelte\";\n\nimport { createFastboardCore, replayFastboardCore } from \"@netless/fastboard-core\";\nimport React, { useEffect, useLayoutEffect, useRef, useState } from \"react\";\n\nexport const useIsomorphicLayoutEffect = typeof document !== \"undefined\" ? useLayoutEffect : useEffect;\n\nexport function useUpdateEffect(effect: EffectCallback, deps?: DependencyList) {\n  const isFirst = useRef(true);\n\n  useIsomorphicLayoutEffect(() => {\n    if (isFirst.current) {\n      isFirst.current = false;\n      return;\n    }\n\n    return effect();\n  }, deps);\n}\n\nexport function wrapReactComponent<Props>(\n  SvelteComponent: typeof SvelteComponentType,\n  name: string\n): FunctionComponent<Props> {\n  function ReactComponent(props: Props) {\n    const [container, setContainer] = useState<HTMLDivElement | null>(null);\n    const component = useRef<SvelteComponentType | null>(null);\n\n    useIsomorphicLayoutEffect(() => {\n      if (container) {\n        component.current = new SvelteComponent({ target: container, props });\n\n        return () => {\n          if (component.current) {\n            component.current.$destroy();\n          }\n        };\n      }\n    }, [container]);\n\n    useUpdateEffect(() => {\n      if (component.current) {\n        component.current.$set(props);\n      }\n    }, [props]);\n\n    return <div className=\"fastboard-react-div\" ref={setContainer} />;\n  }\n\n  ReactComponent.displayName = name;\n\n  return ReactComponent;\n}\n\nexport function useFastboard(config: () => FastboardOptions): FastboardApp | null {\n  const unmountRef = useRef(false);\n  const [fastboard, setFastboard] = useState<FastboardApp | null>(null);\n\n  useEffect(() => {\n    let fastboard: FastboardApp | null = null;\n\n    createFastboardCore(config()).then(app => {\n      if (!unmountRef.current) {\n        setFastboard((fastboard = app));\n      } else {\n        app.destroy();\n      }\n    });\n\n    return () => {\n      unmountRef.current = true;\n      fastboard && fastboard.destroy();\n    };\n  }, []);\n\n  return fastboard;\n}\n\nexport function useReplayFastboard(config: () => FastboardReplayOptions): FastboardPlayer | null {\n  const unmountRef = useRef(false);\n  const [fastboard, setFastboard] = useState<FastboardPlayer | null>(null);\n\n  useEffect(() => {\n    let fastboard: FastboardPlayer | null = null;\n\n    replayFastboardCore(config()).then(app => {\n      if (!unmountRef.current) {\n        setFastboard((fastboard = app));\n      } else {\n        app.destroy();\n      }\n    });\n\n    return () => {\n      unmountRef.current = true;\n      fastboard && fastboard.destroy();\n    };\n  }, []);\n\n  return fastboard;\n}\n","import type { ZoomControlProps } from \"@netless/fastboard-ui\";\n\nimport { ZoomControl as ZoomControlImpl } from \"@netless/fastboard-ui\";\nimport { wrapReactComponent } from \"./hooks\";\n\nexport type { ZoomControlProps };\n\nexport const ZoomControl = /* @__PURE__ */ wrapReactComponent<ZoomControlProps>(\n  ZoomControlImpl,\n  \"ZoomControl\"\n);\n","import type { PageControlProps } from \"@netless/fastboard-ui\";\n\nimport { PageControl as PageControlImpl } from \"@netless/fastboard-ui\";\nimport { wrapReactComponent } from \"./hooks\";\n\nexport type { PageControlProps };\n\nexport const PageControl = /* @__PURE__ */ wrapReactComponent<PageControlProps>(\n  PageControlImpl,\n  \"PageControl\"\n);\n","import type { ToolbarProps } from \"@netless/fastboard-ui\";\n\nimport { Toolbar as ToolbarImpl } from \"@netless/fastboard-ui\";\nimport { wrapReactComponent } from \"./hooks\";\n\nexport type { ToolbarProps };\n\nexport const Toolbar = /* @__PURE__ */ wrapReactComponent<ToolbarProps>(ToolbarImpl, \"Toolbar\");\n","import type { FastboardProps, ReplayFastboardProps } from \"@netless/fastboard-ui\";\n\nimport { Fastboard as FastboardImpl, ReplayFastboard as ReplayFastboardImpl } from \"@netless/fastboard-ui\";\nimport { wrapReactComponent } from \"./hooks\";\n\nexport type { FastboardProps, ReplayFastboardProps };\n\nexport const Fastboard = /* @__PURE__ */ wrapReactComponent<FastboardProps>(FastboardImpl, \"Fastboard\");\nexport const ReplayFastboard = /* @__PURE__ */ wrapReactComponent<ReplayFastboardProps>(\n  ReplayFastboardImpl,\n  \"ReplayFastboard\"\n);\n","import type {\n  AppOptions as NetlessAppSlideAppOptions,\n  Attributes as NetlessAppSlideAttributes,\n  SlideState,\n  SlideViewerOptions,\n} from \"@netless/app-slide\";\nimport type { RegisterParams } from \"@netless/window-manager\";\n\nimport { WindowManager } from \"@netless/window-manager\";\n\nimport NetlessAppSlide, { addHooks, previewSlide, Slide, SlideViewer } from \"@netless/app-slide\";\n\nexport { Slide, SlideViewer, previewSlide };\nexport type { NetlessAppSlideAttributes, SlideState, SlideViewerOptions };\n\nexport function registerSlide() {\n  if (WindowManager.registered.has(NetlessAppSlide.kind)) return;\n  WindowManager.register({\n    kind: NetlessAppSlide.kind,\n    appOptions: { debug: false } as NetlessAppSlideAppOptions,\n    src: NetlessAppSlide,\n    addHooks,\n  });\n}\n\nconst DefaultApps: {\n  [kind: string]: Omit<RegisterParams, \"kind\">;\n} = {};\n\nexport function registerDefaultApps() {\n  Object.keys(DefaultApps).forEach(kind => {\n    if (WindowManager.registered.has(kind)) return;\n    WindowManager.register({ kind, ...DefaultApps[kind] });\n  });\n}\n","import type { FastboardOptions } from \"@netless/fastboard-core\";\n\nimport { createFastboardCore } from \"@netless/fastboard-core\";\nimport { registerDefaultApps, registerSlide } from \"./behaviors/netless-app\";\n\n/**\n * Create a FastboardApp instance.\n * @example\n * let app = await createFastboard({\n *   sdkConfig: {\n *     appIdentifier: import.meta.env.VITE_APPID,\n *     region: 'cn-hz',\n *   },\n *   joinRoom: {\n *     uid: unique_id,\n *     uuid: import.meta.env.VITE_ROOM_UUID,\n *     roomToken: import.meta.env.VITE_ROOM_TOKEN,\n *   },\n * })\n */\nexport async function createFastboard<TEventData = any>(options: FastboardOptions) {\n  registerSlide();\n  registerDefaultApps();\n  return createFastboardCore<TEventData>(options);\n}\n","import type { FastboardReplayOptions } from \"@netless/fastboard-core\";\n\nimport { replayFastboardCore } from \"@netless/fastboard-core\";\nimport { registerDefaultApps, registerSlide } from \"./behaviors/netless-app\";\n\n/**\n * Create a FastboardPlayer instance.\n * @example\n * let player = await replayFastboard({\n *   sdkConfig: {\n *     appIdentifier: import.meta.env.VITE_APPID,\n *     region: 'cn-hz',\n *   },\n *   replayRoom: {\n *     room: \"room uuid\",\n *     roomToken: \"NETLESSROOM_...\",\n *     beginTimestamp: 1646619090394,\n *     duration: 70448,\n *   },\n * })\n */\nexport async function replayFastboard<TEventData = any>(options: FastboardReplayOptions) {\n  registerSlide();\n  registerDefaultApps();\n  return replayFastboardCore<TEventData>(options);\n}\n"]}
+{"version":3,"sources":["../src/index.tsx","../src/RedoUndo.tsx","../src/create.ts","../src/behaviors/netless-app.ts","../src/behaviors/netless-ua.ts","../src/replay.ts","../src/hooks.tsx","../src/ZoomControl.tsx","../src/PageControl.tsx","../src/Toolbar.tsx","../src/Fastboard.tsx"],"names":["name","fastboard"],"mappings":"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","sourcesContent":["import \"./style.scss\";\n\nexport * from \"@netless/fastboard-core\";\nexport { apps } from \"@netless/fastboard-ui\";\nexport type {\n  Theme,\n  Language,\n  GenericIcon,\n  AppInToolbar,\n  AppsInToolbar,\n  FastboardUIConfig,\n} from \"@netless/fastboard-ui\";\nexport * from \"./RedoUndo\";\nexport * from \"./ZoomControl\";\nexport * from \"./PageControl\";\nexport * from \"./Toolbar\";\nexport * from \"./Fastboard\";\nexport * from \"./behaviors\";\nexport * from \"./create\";\nexport * from \"./replay\";\nexport { useFastboard, useReplayFastboard } from \"./hooks\";\n\n// Caution about Export Namespace (Star)\n// esbuild can not handle nested `export *`, i.e. given two files:\n//\n// foo: export * from './bar'\n// bar: export * from 'baz' (external: baz)\n//\n// the result of bundling foo will be broken.\n// `export * from external-module` works and only works at the entry points.\n// ref: https://github.com/evanw/esbuild/issues/1737\n","import type { RedoUndoProps } from \"@netless/fastboard-ui\";\n\nimport { RedoUndo as RedoUndoImpl } from \"@netless/fastboard-ui\";\nimport { wrapReactComponent } from \"./hooks\";\n\nexport type { RedoUndoProps };\n\nexport const RedoUndo = /* @__PURE__ */ wrapReactComponent<RedoUndoProps>(RedoUndoImpl, \"RedoUndo\");\n","import type { FastboardApp, FastboardOptions } from \"@netless/fastboard-core\";\n\nimport { createFastboardCore } from \"@netless/fastboard-core\";\nimport { registerDefaultApps, registerSlide } from \"./behaviors/netless-app\";\nimport { ensureNetlessUA } from \"./behaviors/netless-ua\";\n\n/**\n * Create a FastboardApp instance.\n * @example\n * let app = await createFastboard({\n *   sdkConfig: {\n *     appIdentifier: import.meta.env.VITE_APPID,\n *     region: 'cn-hz',\n *   },\n *   joinRoom: {\n *     uid: unique_id,\n *     uuid: import.meta.env.VITE_ROOM_UUID,\n *     roomToken: import.meta.env.VITE_ROOM_TOKEN,\n *   },\n * })\n */\nexport async function createFastboard<TEventData = any>(\n  options: FastboardOptions\n): Promise<FastboardApp<TEventData>> {\n  ensureNetlessUA();\n  registerSlide();\n  registerDefaultApps();\n  return createFastboardCore<TEventData>(options);\n}\n","import type {\n  AppOptions as NetlessAppSlideAppOptions,\n  Attributes as NetlessAppSlideAttributes,\n  SlideState,\n  SlideViewerOptions,\n} from \"@netless/app-slide\";\nimport type { RegisterParams } from \"@netless/window-manager\";\n\nimport { WindowManager } from \"@netless/window-manager\";\n\nimport NetlessAppSlide, { addHooks, previewSlide, Slide, SlideViewer } from \"@netless/app-slide\";\n\nexport { Slide, SlideViewer, previewSlide };\nexport type { NetlessAppSlideAttributes, SlideState, SlideViewerOptions };\n\nexport function registerSlide() {\n  if (WindowManager.registered.has(NetlessAppSlide.kind)) return;\n  WindowManager.register({\n    kind: NetlessAppSlide.kind,\n    appOptions: { debug: false } as NetlessAppSlideAppOptions,\n    src: NetlessAppSlide,\n    addHooks,\n  });\n}\n\nconst DefaultApps: {\n  [kind: string]: Omit<RegisterParams, \"kind\">;\n} = {};\n\nexport function registerDefaultApps() {\n  Object.keys(DefaultApps).forEach(kind => {\n    if (WindowManager.registered.has(kind)) return;\n    WindowManager.register({ kind, ...DefaultApps[kind] });\n  });\n}\n","import { name, version } from \"@netless/fastboard-core\";\n\ninterface InjectTarget {\n  __netlessUA?: string;\n}\n\nlet injected = false;\nexport function ensureNetlessUA() {\n  if (typeof window !== \"undefined\" && !injected) {\n    injected = true;\n    let str = (window as InjectTarget).__netlessUA || \"\";\n    str += ` ${name}/${version} `;\n    (window as InjectTarget).__netlessUA = str;\n  }\n}\n","import type { FastboardPlayer, FastboardReplayOptions } from \"@netless/fastboard-core\";\n\nimport { replayFastboardCore } from \"@netless/fastboard-core\";\nimport { registerDefaultApps, registerSlide } from \"./behaviors/netless-app\";\nimport { ensureNetlessUA } from \"./behaviors/netless-ua\";\n\n/**\n * Create a FastboardPlayer instance.\n * @example\n * let player = await replayFastboard({\n *   sdkConfig: {\n *     appIdentifier: import.meta.env.VITE_APPID,\n *     region: 'cn-hz',\n *   },\n *   replayRoom: {\n *     room: \"room uuid\",\n *     roomToken: \"NETLESSROOM_...\",\n *     beginTimestamp: 1646619090394,\n *     duration: 70448,\n *   },\n * })\n */\nexport async function replayFastboard<TEventData = any>(\n  options: FastboardReplayOptions\n): Promise<FastboardPlayer<TEventData>> {\n  ensureNetlessUA();\n  registerSlide();\n  registerDefaultApps();\n  return replayFastboardCore<TEventData>(options);\n}\n","/* eslint-disable react-hooks/exhaustive-deps */\nimport type {\n  FastboardApp,\n  FastboardOptions,\n  FastboardPlayer,\n  FastboardReplayOptions,\n} from \"@netless/fastboard-core\";\nimport type { DependencyList, EffectCallback, FunctionComponent } from \"react\";\nimport type { SvelteComponent as SvelteComponentType } from \"svelte\";\n\nimport { createFastboard } from \"./create\";\nimport { replayFastboard } from \"./replay\";\nimport React, { useEffect, useLayoutEffect, useRef, useState } from \"react\";\n\nexport const useIsomorphicLayoutEffect = typeof document !== \"undefined\" ? useLayoutEffect : useEffect;\n\nexport function useUpdateEffect(effect: EffectCallback, deps?: DependencyList) {\n  const isFirst = useRef(true);\n\n  useIsomorphicLayoutEffect(() => {\n    if (isFirst.current) {\n      isFirst.current = false;\n      return;\n    }\n\n    return effect();\n  }, deps);\n}\n\nexport function wrapReactComponent<Props>(\n  SvelteComponent: typeof SvelteComponentType,\n  name: string\n): FunctionComponent<Props> {\n  function ReactComponent(props: Props) {\n    const [container, setContainer] = useState<HTMLDivElement | null>(null);\n    const component = useRef<SvelteComponentType | null>(null);\n\n    useIsomorphicLayoutEffect(() => {\n      if (container) {\n        component.current = new SvelteComponent({ target: container, props });\n\n        return () => {\n          if (component.current) {\n            component.current.$destroy();\n          }\n        };\n      }\n    }, [container]);\n\n    useUpdateEffect(() => {\n      if (component.current) {\n        component.current.$set(props);\n      }\n    }, [props]);\n\n    return <div className=\"fastboard-react-div\" ref={setContainer} />;\n  }\n\n  ReactComponent.displayName = name;\n\n  return ReactComponent;\n}\n\nexport function useFastboard(config: () => FastboardOptions): FastboardApp | null {\n  const unmountRef = useRef(false);\n  const [fastboard, setFastboard] = useState<FastboardApp | null>(null);\n\n  useEffect(() => {\n    let fastboard: FastboardApp | null = null;\n\n    createFastboard(config()).then(app => {\n      if (!unmountRef.current) {\n        setFastboard((fastboard = app));\n      } else {\n        app.destroy();\n      }\n    });\n\n    return () => {\n      unmountRef.current = true;\n      fastboard && fastboard.destroy();\n    };\n  }, []);\n\n  return fastboard;\n}\n\nexport function useReplayFastboard(config: () => FastboardReplayOptions): FastboardPlayer | null {\n  const unmountRef = useRef(false);\n  const [fastboard, setFastboard] = useState<FastboardPlayer | null>(null);\n\n  useEffect(() => {\n    let fastboard: FastboardPlayer | null = null;\n\n    replayFastboard(config()).then(app => {\n      if (!unmountRef.current) {\n        setFastboard((fastboard = app));\n      } else {\n        app.destroy();\n      }\n    });\n\n    return () => {\n      unmountRef.current = true;\n      fastboard && fastboard.destroy();\n    };\n  }, []);\n\n  return fastboard;\n}\n","import type { ZoomControlProps } from \"@netless/fastboard-ui\";\n\nimport { ZoomControl as ZoomControlImpl } from \"@netless/fastboard-ui\";\nimport { wrapReactComponent } from \"./hooks\";\n\nexport type { ZoomControlProps };\n\nexport const ZoomControl = /* @__PURE__ */ wrapReactComponent<ZoomControlProps>(\n  ZoomControlImpl,\n  \"ZoomControl\"\n);\n","import type { PageControlProps } from \"@netless/fastboard-ui\";\n\nimport { PageControl as PageControlImpl } from \"@netless/fastboard-ui\";\nimport { wrapReactComponent } from \"./hooks\";\n\nexport type { PageControlProps };\n\nexport const PageControl = /* @__PURE__ */ wrapReactComponent<PageControlProps>(\n  PageControlImpl,\n  \"PageControl\"\n);\n","import type { ToolbarProps } from \"@netless/fastboard-ui\";\n\nimport { Toolbar as ToolbarImpl } from \"@netless/fastboard-ui\";\nimport { wrapReactComponent } from \"./hooks\";\n\nexport type { ToolbarProps };\n\nexport const Toolbar = /* @__PURE__ */ wrapReactComponent<ToolbarProps>(ToolbarImpl, \"Toolbar\");\n","import type { FastboardProps, ReplayFastboardProps } from \"@netless/fastboard-ui\";\n\nimport { Fastboard as FastboardImpl, ReplayFastboard as ReplayFastboardImpl } from \"@netless/fastboard-ui\";\nimport { wrapReactComponent } from \"./hooks\";\n\nexport type { FastboardProps, ReplayFastboardProps };\n\nexport const Fastboard = /* @__PURE__ */ wrapReactComponent<FastboardProps>(FastboardImpl, \"Fastboard\");\nexport const ReplayFastboard = /* @__PURE__ */ wrapReactComponent<ReplayFastboardProps>(\n  ReplayFastboardImpl,\n  \"ReplayFastboard\"\n);\n"]}

package/dist/index.mjs

@@ -1,11 +1,11 @@
-import { createFastboardCore, replayFastboardCore } from '@netless/fastboard-core';
+import { createFastboardCore, replayFastboardCore, name, version } from '@netless/fastboard-core';
 export * from '@netless/fastboard-core';
 import { RedoUndo as RedoUndo$1, ZoomControl as ZoomControl$1, PageControl as PageControl$1, Toolbar as Toolbar$1, Fastboard as Fastboard$1, ReplayFastboard as ReplayFastboard$1 } from '@netless/fastboard-ui';
 export { apps } from '@netless/fastboard-ui';
-import React, { useRef, useState, useEffect, useLayoutEffect } from 'react';
 import { WindowManager } from '@netless/window-manager';
 import NetlessAppSlide, { addHooks } from '@netless/app-slide';
 export { Slide, SlideViewer, previewSlide } from '@netless/app-slide';
+import React, { useRef, useState, useEffect, useLayoutEffect } from 'react';
 
 // inline-sass-helper:inline-sass-style-helper.js
 function injectStyle(text) {
@@ -22,6 +22,47 @@ var style_default = '.netless-window-manager-playground{width:100%;height:100%;p
 
 // inline-sass-stub:./src/style.scss
 injectStyle(style_default);
+function registerSlide() {
+  if (WindowManager.registered.has(NetlessAppSlide.kind))
+    return;
+  WindowManager.register({
+    kind: NetlessAppSlide.kind,
+    appOptions: { debug: false },
+    src: NetlessAppSlide,
+    addHooks
+  });
+}
+var DefaultApps = {};
+function registerDefaultApps() {
+  Object.keys(DefaultApps).forEach((kind) => {
+    if (WindowManager.registered.has(kind))
+      return;
+    WindowManager.register({ kind, ...DefaultApps[kind] });
+  });
+}
+var injected = false;
+function ensureNetlessUA() {
+  if (typeof window !== "undefined" && !injected) {
+    injected = true;
+    let str = window.__netlessUA || "";
+    str += ` ${name}/${version} `;
+    window.__netlessUA = str;
+  }
+}
+
+// src/create.ts
+async function createFastboard(options) {
+  ensureNetlessUA();
+  registerSlide();
+  registerDefaultApps();
+  return createFastboardCore(options);
+}
+async function replayFastboard(options) {
+  ensureNetlessUA();
+  registerSlide();
+  registerDefaultApps();
+  return replayFastboardCore(options);
+}
 var useIsomorphicLayoutEffect = typeof document !== "undefined" ? useLayoutEffect : useEffect;
 function useUpdateEffect(effect, deps) {
   const isFirst = useRef(true);
@@ -33,7 +74,7 @@ function useUpdateEffect(effect, deps) {
     return effect();
   }, deps);
 }
-function wrapReactComponent(SvelteComponent, name) {
+function wrapReactComponent(SvelteComponent, name2) {
   function ReactComponent(props) {
     const [container, setContainer] = useState(null);
     const component = useRef(null);
@@ -57,7 +98,7 @@ function wrapReactComponent(SvelteComponent, name) {
       ref: setContainer
     });
   }
-  ReactComponent.displayName = name;
+  ReactComponent.displayName = name2;
   return ReactComponent;
 }
 function useFastboard(config) {
@@ -65,7 +106,7 @@ function useFastboard(config) {
   const [fastboard, setFastboard] = useState(null);
   useEffect(() => {
     let fastboard2 = null;
-    createFastboardCore(config()).then((app) => {
+    createFastboard(config()).then((app) => {
       if (!unmountRef.current) {
         setFastboard(fastboard2 = app);
       } else {
@@ -84,7 +125,7 @@ function useReplayFastboard(config) {
   const [fastboard, setFastboard] = useState(null);
   useEffect(() => {
     let fastboard2 = null;
-    replayFastboardCore(config()).then((app) => {
+    replayFastboard(config()).then((app) => {
       if (!unmountRef.current) {
         setFastboard(fastboard2 = app);
       } else {
@@ -115,34 +156,6 @@ var ReplayFastboard = /* @__PURE__ */ wrapReactComponent(
   ReplayFastboard$1,
   "ReplayFastboard"
 );
-function registerSlide() {
-  if (WindowManager.registered.has(NetlessAppSlide.kind))
-    return;
-  WindowManager.register({
-    kind: NetlessAppSlide.kind,
-    appOptions: { debug: false },
-    src: NetlessAppSlide,
-    addHooks
-  });
-}
-var DefaultApps = {};
-function registerDefaultApps() {
-  Object.keys(DefaultApps).forEach((kind) => {
-    if (WindowManager.registered.has(kind))
-      return;
-    WindowManager.register({ kind, ...DefaultApps[kind] });
-  });
-}
-async function createFastboard(options) {
-  registerSlide();
-  registerDefaultApps();
-  return createFastboardCore(options);
-}
-async function replayFastboard(options) {
-  registerSlide();
-  registerDefaultApps();
-  return replayFastboardCore(options);
-}
 
 export { Fastboard, PageControl, RedoUndo, ReplayFastboard, Toolbar, ZoomControl, createFastboard, replayFastboard, useFastboard, useReplayFastboard };
 //# sourceMappingURL=index.mjs.map

package/dist/index.mjs.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/index.tsx","../src/RedoUndo.tsx","../src/hooks.tsx","../src/ZoomControl.tsx","../src/PageControl.tsx","../src/Toolbar.tsx","../src/Fastboard.tsx","../src/behaviors/netless-app.ts","../src/create.ts","../src/replay.ts"],"names":["fastboard","createFastboardCore","replayFastboardCore"],"mappings":"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","sourcesContent":["import \"./style.scss\";\n\nexport * from \"@netless/fastboard-core\";\nexport { apps } from \"@netless/fastboard-ui\";\nexport type {\n  Theme,\n  Language,\n  GenericIcon,\n  AppInToolbar,\n  AppsInToolbar,\n  FastboardUIConfig,\n} from \"@netless/fastboard-ui\";\nexport * from \"./RedoUndo\";\nexport * from \"./ZoomControl\";\nexport * from \"./PageControl\";\nexport * from \"./Toolbar\";\nexport * from \"./Fastboard\";\nexport * from \"./behaviors\";\nexport * from \"./create\";\nexport * from \"./replay\";\nexport { useFastboard, useReplayFastboard } from \"./hooks\";\n\n// Caution about Export Namespace (Star)\n// esbuild can not handle nested `export *`, i.e. given two files:\n//\n// foo: export * from './bar'\n// bar: export * from 'baz' (external: baz)\n//\n// the result of bundling foo will be broken.\n// `export * from external-module` works and only works at the entry points.\n// ref: https://github.com/evanw/esbuild/issues/1737\n","import type { RedoUndoProps } from \"@netless/fastboard-ui\";\n\nimport { RedoUndo as RedoUndoImpl } from \"@netless/fastboard-ui\";\nimport { wrapReactComponent } from \"./hooks\";\n\nexport type { RedoUndoProps };\n\nexport const RedoUndo = /* @__PURE__ */ wrapReactComponent<RedoUndoProps>(RedoUndoImpl, \"RedoUndo\");\n","/* eslint-disable react-hooks/exhaustive-deps */\nimport type {\n  FastboardApp,\n  FastboardOptions,\n  FastboardPlayer,\n  FastboardReplayOptions,\n} from \"@netless/fastboard-core\";\nimport type { DependencyList, EffectCallback, FunctionComponent } from \"react\";\nimport type { SvelteComponent as SvelteComponentType } from \"svelte\";\n\nimport { createFastboardCore, replayFastboardCore } from \"@netless/fastboard-core\";\nimport React, { useEffect, useLayoutEffect, useRef, useState } from \"react\";\n\nexport const useIsomorphicLayoutEffect = typeof document !== \"undefined\" ? useLayoutEffect : useEffect;\n\nexport function useUpdateEffect(effect: EffectCallback, deps?: DependencyList) {\n  const isFirst = useRef(true);\n\n  useIsomorphicLayoutEffect(() => {\n    if (isFirst.current) {\n      isFirst.current = false;\n      return;\n    }\n\n    return effect();\n  }, deps);\n}\n\nexport function wrapReactComponent<Props>(\n  SvelteComponent: typeof SvelteComponentType,\n  name: string\n): FunctionComponent<Props> {\n  function ReactComponent(props: Props) {\n    const [container, setContainer] = useState<HTMLDivElement | null>(null);\n    const component = useRef<SvelteComponentType | null>(null);\n\n    useIsomorphicLayoutEffect(() => {\n      if (container) {\n        component.current = new SvelteComponent({ target: container, props });\n\n        return () => {\n          if (component.current) {\n            component.current.$destroy();\n          }\n        };\n      }\n    }, [container]);\n\n    useUpdateEffect(() => {\n      if (component.current) {\n        component.current.$set(props);\n      }\n    }, [props]);\n\n    return <div className=\"fastboard-react-div\" ref={setContainer} />;\n  }\n\n  ReactComponent.displayName = name;\n\n  return ReactComponent;\n}\n\nexport function useFastboard(config: () => FastboardOptions): FastboardApp | null {\n  const unmountRef = useRef(false);\n  const [fastboard, setFastboard] = useState<FastboardApp | null>(null);\n\n  useEffect(() => {\n    let fastboard: FastboardApp | null = null;\n\n    createFastboardCore(config()).then(app => {\n      if (!unmountRef.current) {\n        setFastboard((fastboard = app));\n      } else {\n        app.destroy();\n      }\n    });\n\n    return () => {\n      unmountRef.current = true;\n      fastboard && fastboard.destroy();\n    };\n  }, []);\n\n  return fastboard;\n}\n\nexport function useReplayFastboard(config: () => FastboardReplayOptions): FastboardPlayer | null {\n  const unmountRef = useRef(false);\n  const [fastboard, setFastboard] = useState<FastboardPlayer | null>(null);\n\n  useEffect(() => {\n    let fastboard: FastboardPlayer | null = null;\n\n    replayFastboardCore(config()).then(app => {\n      if (!unmountRef.current) {\n        setFastboard((fastboard = app));\n      } else {\n        app.destroy();\n      }\n    });\n\n    return () => {\n      unmountRef.current = true;\n      fastboard && fastboard.destroy();\n    };\n  }, []);\n\n  return fastboard;\n}\n","import type { ZoomControlProps } from \"@netless/fastboard-ui\";\n\nimport { ZoomControl as ZoomControlImpl } from \"@netless/fastboard-ui\";\nimport { wrapReactComponent } from \"./hooks\";\n\nexport type { ZoomControlProps };\n\nexport const ZoomControl = /* @__PURE__ */ wrapReactComponent<ZoomControlProps>(\n  ZoomControlImpl,\n  \"ZoomControl\"\n);\n","import type { PageControlProps } from \"@netless/fastboard-ui\";\n\nimport { PageControl as PageControlImpl } from \"@netless/fastboard-ui\";\nimport { wrapReactComponent } from \"./hooks\";\n\nexport type { PageControlProps };\n\nexport const PageControl = /* @__PURE__ */ wrapReactComponent<PageControlProps>(\n  PageControlImpl,\n  \"PageControl\"\n);\n","import type { ToolbarProps } from \"@netless/fastboard-ui\";\n\nimport { Toolbar as ToolbarImpl } from \"@netless/fastboard-ui\";\nimport { wrapReactComponent } from \"./hooks\";\n\nexport type { ToolbarProps };\n\nexport const Toolbar = /* @__PURE__ */ wrapReactComponent<ToolbarProps>(ToolbarImpl, \"Toolbar\");\n","import type { FastboardProps, ReplayFastboardProps } from \"@netless/fastboard-ui\";\n\nimport { Fastboard as FastboardImpl, ReplayFastboard as ReplayFastboardImpl } from \"@netless/fastboard-ui\";\nimport { wrapReactComponent } from \"./hooks\";\n\nexport type { FastboardProps, ReplayFastboardProps };\n\nexport const Fastboard = /* @__PURE__ */ wrapReactComponent<FastboardProps>(FastboardImpl, \"Fastboard\");\nexport const ReplayFastboard = /* @__PURE__ */ wrapReactComponent<ReplayFastboardProps>(\n  ReplayFastboardImpl,\n  \"ReplayFastboard\"\n);\n","import type {\n  AppOptions as NetlessAppSlideAppOptions,\n  Attributes as NetlessAppSlideAttributes,\n  SlideState,\n  SlideViewerOptions,\n} from \"@netless/app-slide\";\nimport type { RegisterParams } from \"@netless/window-manager\";\n\nimport { WindowManager } from \"@netless/window-manager\";\n\nimport NetlessAppSlide, { addHooks, previewSlide, Slide, SlideViewer } from \"@netless/app-slide\";\n\nexport { Slide, SlideViewer, previewSlide };\nexport type { NetlessAppSlideAttributes, SlideState, SlideViewerOptions };\n\nexport function registerSlide() {\n  if (WindowManager.registered.has(NetlessAppSlide.kind)) return;\n  WindowManager.register({\n    kind: NetlessAppSlide.kind,\n    appOptions: { debug: false } as NetlessAppSlideAppOptions,\n    src: NetlessAppSlide,\n    addHooks,\n  });\n}\n\nconst DefaultApps: {\n  [kind: string]: Omit<RegisterParams, \"kind\">;\n} = {};\n\nexport function registerDefaultApps() {\n  Object.keys(DefaultApps).forEach(kind => {\n    if (WindowManager.registered.has(kind)) return;\n    WindowManager.register({ kind, ...DefaultApps[kind] });\n  });\n}\n","import type { FastboardOptions } from \"@netless/fastboard-core\";\n\nimport { createFastboardCore } from \"@netless/fastboard-core\";\nimport { registerDefaultApps, registerSlide } from \"./behaviors/netless-app\";\n\n/**\n * Create a FastboardApp instance.\n * @example\n * let app = await createFastboard({\n *   sdkConfig: {\n *     appIdentifier: import.meta.env.VITE_APPID,\n *     region: 'cn-hz',\n *   },\n *   joinRoom: {\n *     uid: unique_id,\n *     uuid: import.meta.env.VITE_ROOM_UUID,\n *     roomToken: import.meta.env.VITE_ROOM_TOKEN,\n *   },\n * })\n */\nexport async function createFastboard<TEventData = any>(options: FastboardOptions) {\n  registerSlide();\n  registerDefaultApps();\n  return createFastboardCore<TEventData>(options);\n}\n","import type { FastboardReplayOptions } from \"@netless/fastboard-core\";\n\nimport { replayFastboardCore } from \"@netless/fastboard-core\";\nimport { registerDefaultApps, registerSlide } from \"./behaviors/netless-app\";\n\n/**\n * Create a FastboardPlayer instance.\n * @example\n * let player = await replayFastboard({\n *   sdkConfig: {\n *     appIdentifier: import.meta.env.VITE_APPID,\n *     region: 'cn-hz',\n *   },\n *   replayRoom: {\n *     room: \"room uuid\",\n *     roomToken: \"NETLESSROOM_...\",\n *     beginTimestamp: 1646619090394,\n *     duration: 70448,\n *   },\n * })\n */\nexport async function replayFastboard<TEventData = any>(options: FastboardReplayOptions) {\n  registerSlide();\n  registerDefaultApps();\n  return replayFastboardCore<TEventData>(options);\n}\n"]}
+{"version":3,"sources":["../src/index.tsx","../src/RedoUndo.tsx","../src/create.ts","../src/behaviors/netless-app.ts","../src/behaviors/netless-ua.ts","../src/replay.ts","../src/hooks.tsx","../src/ZoomControl.tsx","../src/PageControl.tsx","../src/Toolbar.tsx","../src/Fastboard.tsx"],"names":["name","fastboard"],"mappings":"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","sourcesContent":["import \"./style.scss\";\n\nexport * from \"@netless/fastboard-core\";\nexport { apps } from \"@netless/fastboard-ui\";\nexport type {\n  Theme,\n  Language,\n  GenericIcon,\n  AppInToolbar,\n  AppsInToolbar,\n  FastboardUIConfig,\n} from \"@netless/fastboard-ui\";\nexport * from \"./RedoUndo\";\nexport * from \"./ZoomControl\";\nexport * from \"./PageControl\";\nexport * from \"./Toolbar\";\nexport * from \"./Fastboard\";\nexport * from \"./behaviors\";\nexport * from \"./create\";\nexport * from \"./replay\";\nexport { useFastboard, useReplayFastboard } from \"./hooks\";\n\n// Caution about Export Namespace (Star)\n// esbuild can not handle nested `export *`, i.e. given two files:\n//\n// foo: export * from './bar'\n// bar: export * from 'baz' (external: baz)\n//\n// the result of bundling foo will be broken.\n// `export * from external-module` works and only works at the entry points.\n// ref: https://github.com/evanw/esbuild/issues/1737\n","import type { RedoUndoProps } from \"@netless/fastboard-ui\";\n\nimport { RedoUndo as RedoUndoImpl } from \"@netless/fastboard-ui\";\nimport { wrapReactComponent } from \"./hooks\";\n\nexport type { RedoUndoProps };\n\nexport const RedoUndo = /* @__PURE__ */ wrapReactComponent<RedoUndoProps>(RedoUndoImpl, \"RedoUndo\");\n","import type { FastboardApp, FastboardOptions } from \"@netless/fastboard-core\";\n\nimport { createFastboardCore } from \"@netless/fastboard-core\";\nimport { registerDefaultApps, registerSlide } from \"./behaviors/netless-app\";\nimport { ensureNetlessUA } from \"./behaviors/netless-ua\";\n\n/**\n * Create a FastboardApp instance.\n * @example\n * let app = await createFastboard({\n *   sdkConfig: {\n *     appIdentifier: import.meta.env.VITE_APPID,\n *     region: 'cn-hz',\n *   },\n *   joinRoom: {\n *     uid: unique_id,\n *     uuid: import.meta.env.VITE_ROOM_UUID,\n *     roomToken: import.meta.env.VITE_ROOM_TOKEN,\n *   },\n * })\n */\nexport async function createFastboard<TEventData = any>(\n  options: FastboardOptions\n): Promise<FastboardApp<TEventData>> {\n  ensureNetlessUA();\n  registerSlide();\n  registerDefaultApps();\n  return createFastboardCore<TEventData>(options);\n}\n","import type {\n  AppOptions as NetlessAppSlideAppOptions,\n  Attributes as NetlessAppSlideAttributes,\n  SlideState,\n  SlideViewerOptions,\n} from \"@netless/app-slide\";\nimport type { RegisterParams } from \"@netless/window-manager\";\n\nimport { WindowManager } from \"@netless/window-manager\";\n\nimport NetlessAppSlide, { addHooks, previewSlide, Slide, SlideViewer } from \"@netless/app-slide\";\n\nexport { Slide, SlideViewer, previewSlide };\nexport type { NetlessAppSlideAttributes, SlideState, SlideViewerOptions };\n\nexport function registerSlide() {\n  if (WindowManager.registered.has(NetlessAppSlide.kind)) return;\n  WindowManager.register({\n    kind: NetlessAppSlide.kind,\n    appOptions: { debug: false } as NetlessAppSlideAppOptions,\n    src: NetlessAppSlide,\n    addHooks,\n  });\n}\n\nconst DefaultApps: {\n  [kind: string]: Omit<RegisterParams, \"kind\">;\n} = {};\n\nexport function registerDefaultApps() {\n  Object.keys(DefaultApps).forEach(kind => {\n    if (WindowManager.registered.has(kind)) return;\n    WindowManager.register({ kind, ...DefaultApps[kind] });\n  });\n}\n","import { name, version } from \"@netless/fastboard-core\";\n\ninterface InjectTarget {\n  __netlessUA?: string;\n}\n\nlet injected = false;\nexport function ensureNetlessUA() {\n  if (typeof window !== \"undefined\" && !injected) {\n    injected = true;\n    let str = (window as InjectTarget).__netlessUA || \"\";\n    str += ` ${name}/${version} `;\n    (window as InjectTarget).__netlessUA = str;\n  }\n}\n","import type { FastboardPlayer, FastboardReplayOptions } from \"@netless/fastboard-core\";\n\nimport { replayFastboardCore } from \"@netless/fastboard-core\";\nimport { registerDefaultApps, registerSlide } from \"./behaviors/netless-app\";\nimport { ensureNetlessUA } from \"./behaviors/netless-ua\";\n\n/**\n * Create a FastboardPlayer instance.\n * @example\n * let player = await replayFastboard({\n *   sdkConfig: {\n *     appIdentifier: import.meta.env.VITE_APPID,\n *     region: 'cn-hz',\n *   },\n *   replayRoom: {\n *     room: \"room uuid\",\n *     roomToken: \"NETLESSROOM_...\",\n *     beginTimestamp: 1646619090394,\n *     duration: 70448,\n *   },\n * })\n */\nexport async function replayFastboard<TEventData = any>(\n  options: FastboardReplayOptions\n): Promise<FastboardPlayer<TEventData>> {\n  ensureNetlessUA();\n  registerSlide();\n  registerDefaultApps();\n  return replayFastboardCore<TEventData>(options);\n}\n","/* eslint-disable react-hooks/exhaustive-deps */\nimport type {\n  FastboardApp,\n  FastboardOptions,\n  FastboardPlayer,\n  FastboardReplayOptions,\n} from \"@netless/fastboard-core\";\nimport type { DependencyList, EffectCallback, FunctionComponent } from \"react\";\nimport type { SvelteComponent as SvelteComponentType } from \"svelte\";\n\nimport { createFastboard } from \"./create\";\nimport { replayFastboard } from \"./replay\";\nimport React, { useEffect, useLayoutEffect, useRef, useState } from \"react\";\n\nexport const useIsomorphicLayoutEffect = typeof document !== \"undefined\" ? useLayoutEffect : useEffect;\n\nexport function useUpdateEffect(effect: EffectCallback, deps?: DependencyList) {\n  const isFirst = useRef(true);\n\n  useIsomorphicLayoutEffect(() => {\n    if (isFirst.current) {\n      isFirst.current = false;\n      return;\n    }\n\n    return effect();\n  }, deps);\n}\n\nexport function wrapReactComponent<Props>(\n  SvelteComponent: typeof SvelteComponentType,\n  name: string\n): FunctionComponent<Props> {\n  function ReactComponent(props: Props) {\n    const [container, setContainer] = useState<HTMLDivElement | null>(null);\n    const component = useRef<SvelteComponentType | null>(null);\n\n    useIsomorphicLayoutEffect(() => {\n      if (container) {\n        component.current = new SvelteComponent({ target: container, props });\n\n        return () => {\n          if (component.current) {\n            component.current.$destroy();\n          }\n        };\n      }\n    }, [container]);\n\n    useUpdateEffect(() => {\n      if (component.current) {\n        component.current.$set(props);\n      }\n    }, [props]);\n\n    return <div className=\"fastboard-react-div\" ref={setContainer} />;\n  }\n\n  ReactComponent.displayName = name;\n\n  return ReactComponent;\n}\n\nexport function useFastboard(config: () => FastboardOptions): FastboardApp | null {\n  const unmountRef = useRef(false);\n  const [fastboard, setFastboard] = useState<FastboardApp | null>(null);\n\n  useEffect(() => {\n    let fastboard: FastboardApp | null = null;\n\n    createFastboard(config()).then(app => {\n      if (!unmountRef.current) {\n        setFastboard((fastboard = app));\n      } else {\n        app.destroy();\n      }\n    });\n\n    return () => {\n      unmountRef.current = true;\n      fastboard && fastboard.destroy();\n    };\n  }, []);\n\n  return fastboard;\n}\n\nexport function useReplayFastboard(config: () => FastboardReplayOptions): FastboardPlayer | null {\n  const unmountRef = useRef(false);\n  const [fastboard, setFastboard] = useState<FastboardPlayer | null>(null);\n\n  useEffect(() => {\n    let fastboard: FastboardPlayer | null = null;\n\n    replayFastboard(config()).then(app => {\n      if (!unmountRef.current) {\n        setFastboard((fastboard = app));\n      } else {\n        app.destroy();\n      }\n    });\n\n    return () => {\n      unmountRef.current = true;\n      fastboard && fastboard.destroy();\n    };\n  }, []);\n\n  return fastboard;\n}\n","import type { ZoomControlProps } from \"@netless/fastboard-ui\";\n\nimport { ZoomControl as ZoomControlImpl } from \"@netless/fastboard-ui\";\nimport { wrapReactComponent } from \"./hooks\";\n\nexport type { ZoomControlProps };\n\nexport const ZoomControl = /* @__PURE__ */ wrapReactComponent<ZoomControlProps>(\n  ZoomControlImpl,\n  \"ZoomControl\"\n);\n","import type { PageControlProps } from \"@netless/fastboard-ui\";\n\nimport { PageControl as PageControlImpl } from \"@netless/fastboard-ui\";\nimport { wrapReactComponent } from \"./hooks\";\n\nexport type { PageControlProps };\n\nexport const PageControl = /* @__PURE__ */ wrapReactComponent<PageControlProps>(\n  PageControlImpl,\n  \"PageControl\"\n);\n","import type { ToolbarProps } from \"@netless/fastboard-ui\";\n\nimport { Toolbar as ToolbarImpl } from \"@netless/fastboard-ui\";\nimport { wrapReactComponent } from \"./hooks\";\n\nexport type { ToolbarProps };\n\nexport const Toolbar = /* @__PURE__ */ wrapReactComponent<ToolbarProps>(ToolbarImpl, \"Toolbar\");\n","import type { FastboardProps, ReplayFastboardProps } from \"@netless/fastboard-ui\";\n\nimport { Fastboard as FastboardImpl, ReplayFastboard as ReplayFastboardImpl } from \"@netless/fastboard-ui\";\nimport { wrapReactComponent } from \"./hooks\";\n\nexport type { FastboardProps, ReplayFastboardProps };\n\nexport const Fastboard = /* @__PURE__ */ wrapReactComponent<FastboardProps>(FastboardImpl, \"Fastboard\");\nexport const ReplayFastboard = /* @__PURE__ */ wrapReactComponent<ReplayFastboardProps>(\n  ReplayFastboardImpl,\n  \"ReplayFastboard\"\n);\n"]}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@netless/fastboard-react",
-  "version": "1.0.0-canary.2",
+  "version": "1.0.0-canary.3",
   "description": "React components of @netless/fastboard.",
   "main": "dist/index.js",
   "files": [
@@ -15,17 +15,15 @@
   },
   "dependencies": {
     "@netless/app-slide": "0.3.0-canary.7",
-    "@netless/fastboard-core": "1.0.0-canary.2",
-    "@netless/fastboard-ui": "1.0.0-canary.2",
-    "@netless/synced-store": "^2.0.6"
+    "@netless/fastboard-core": "1.0.0-canary.3",
+    "@netless/fastboard-ui": "1.0.0-canary.3"
   },
   "devDependencies": {
     "@netless/esbuild-plugin-inline-sass": "0.1.0",
     "@types/react": "^18.0.17",
     "@types/react-dom": "^18.0.6",
     "react": "^18.2.0",
-    "react-dom": "^18.2.0",
-    "white-web-sdk": "^2.16.33"
+    "react-dom": "^18.2.0"
   },
   "scripts": {
     "cleanup": "rimraf dist",

package/src/create.ts

@@ -1,7 +1,8 @@
-import type { FastboardOptions } from "@netless/fastboard-core";
+import type { FastboardApp, FastboardOptions } from "@netless/fastboard-core";
 
 import { createFastboardCore } from "@netless/fastboard-core";
 import { registerDefaultApps, registerSlide } from "./behaviors/netless-app";
+import { ensureNetlessUA } from "./behaviors/netless-ua";
 
 /**
  * Create a FastboardApp instance.
@@ -18,7 +19,10 @@ import { registerDefaultApps, registerSlide } from "./behaviors/netless-app";
  *   },
  * })
  */
-export async function createFastboard<TEventData = any>(options: FastboardOptions) {
+export async function createFastboard<TEventData = any>(
+  options: FastboardOptions
+): Promise<FastboardApp<TEventData>> {
+  ensureNetlessUA();
   registerSlide();
   registerDefaultApps();
   return createFastboardCore<TEventData>(options);

package/src/hooks.tsx

@@ -8,7 +8,8 @@ import type {
 import type { DependencyList, EffectCallback, FunctionComponent } from "react";
 import type { SvelteComponent as SvelteComponentType } from "svelte";
 
-import { createFastboardCore, replayFastboardCore } from "@netless/fastboard-core";
+import { createFastboard } from "./create";
+import { replayFastboard } from "./replay";
 import React, { useEffect, useLayoutEffect, useRef, useState } from "react";
 
 export const useIsomorphicLayoutEffect = typeof document !== "undefined" ? useLayoutEffect : useEffect;
@@ -67,7 +68,7 @@ export function useFastboard(config: () => FastboardOptions): FastboardApp | nul
   useEffect(() => {
     let fastboard: FastboardApp | null = null;
 
-    createFastboardCore(config()).then(app => {
+    createFastboard(config()).then(app => {
       if (!unmountRef.current) {
         setFastboard((fastboard = app));
       } else {
@@ -91,7 +92,7 @@ export function useReplayFastboard(config: () => FastboardReplayOptions): Fastbo
   useEffect(() => {
     let fastboard: FastboardPlayer | null = null;
 
-    replayFastboardCore(config()).then(app => {
+    replayFastboard(config()).then(app => {
       if (!unmountRef.current) {
         setFastboard((fastboard = app));
       } else {

package/src/replay.ts

@@ -1,7 +1,8 @@
-import type { FastboardReplayOptions } from "@netless/fastboard-core";
+import type { FastboardPlayer, FastboardReplayOptions } from "@netless/fastboard-core";
 
 import { replayFastboardCore } from "@netless/fastboard-core";
 import { registerDefaultApps, registerSlide } from "./behaviors/netless-app";
+import { ensureNetlessUA } from "./behaviors/netless-ua";
 
 /**
  * Create a FastboardPlayer instance.
@@ -19,7 +20,10 @@ import { registerDefaultApps, registerSlide } from "./behaviors/netless-app";
  *   },
  * })
  */
-export async function replayFastboard<TEventData = any>(options: FastboardReplayOptions) {
+export async function replayFastboard<TEventData = any>(
+  options: FastboardReplayOptions
+): Promise<FastboardPlayer<TEventData>> {
+  ensureNetlessUA();
   registerSlide();
   registerDefaultApps();
   return replayFastboardCore<TEventData>(options);