@netless/fastboard-react 0.3.2-canary.4 → 0.3.2

package/dist/index.d.ts

@@ -1,3 +1,4 @@
+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';
@@ -14,4 +15,7 @@ declare const Toolbar: react.FunctionComponent<ToolbarProps>;
 declare const Fastboard: react.FunctionComponent<FastboardProps>;
 declare const ReplayFastboard: react.FunctionComponent<ReplayFastboardProps>;
 
-export { Fastboard, PageControl, RedoUndo, ReplayFastboard, Toolbar, ZoomControl };
+declare function useFastboard(config: () => FastboardOptions): FastboardApp | null;
+declare function useReplayFastboard(config: () => FastboardReplayOptions): FastboardPlayer | null;
+
+export { Fastboard, PageControl, RedoUndo, ReplayFastboard, Toolbar, ZoomControl, useFastboard, useReplayFastboard };

package/dist/index.js

@@ -29,7 +29,9 @@ __export(src_exports, {
   ReplayFastboard: () => ReplayFastboard,
   Toolbar: () => Toolbar,
   ZoomControl: () => ZoomControl,
-  apps: () => import_fastboard_ui6.apps
+  apps: () => import_fastboard_ui6.apps,
+  useFastboard: () => useFastboard,
+  useReplayFastboard: () => useReplayFastboard
 });
 module.exports = __toCommonJS(src_exports);
 __reExport(src_exports, require("@netless/fastboard-core"), module.exports);
@@ -40,6 +42,7 @@ var import_fastboard_ui = require("@netless/fastboard-ui");
 
 // src/hooks.tsx
 var import_react = __toESM(require("react"));
+var import_fastboard_core = require("@netless/fastboard-core");
 var useIsomorphicLayoutEffect = typeof document !== "undefined" ? import_react.useLayoutEffect : import_react.useEffect;
 function useUpdateEffect(effect, deps) {
   const isFirst = (0, import_react.useRef)(true);
@@ -78,6 +81,44 @@ function wrapReactComponent(SvelteComponent, name) {
   ReactComponent.displayName = name;
   return ReactComponent;
 }
+function useFastboard(config) {
+  const unmountRef = (0, import_react.useRef)(false);
+  const [fastboard, setFastboard] = (0, import_react.useState)(null);
+  (0, import_react.useEffect)(() => {
+    let fastboard2 = null;
+    (0, import_fastboard_core.createFastboard)(config()).then((app) => {
+      if (!unmountRef.current) {
+        setFastboard(fastboard2 = app);
+      } else {
+        app.destroy();
+      }
+    });
+    return () => {
+      unmountRef.current = true;
+      fastboard2 && fastboard2.destroy();
+    };
+  }, []);
+  return fastboard;
+}
+function useReplayFastboard(config) {
+  const unmountRef = (0, import_react.useRef)(false);
+  const [fastboard, setFastboard] = (0, import_react.useState)(null);
+  (0, import_react.useEffect)(() => {
+    let fastboard2 = null;
+    (0, import_fastboard_core.replayFastboard)(config()).then((app) => {
+      if (!unmountRef.current) {
+        setFastboard(fastboard2 = app);
+      } else {
+        app.destroy();
+      }
+    });
+    return () => {
+      unmountRef.current = true;
+      fastboard2 && fastboard2.destroy();
+    };
+  }, []);
+  return fastboard;
+}
 
 // src/RedoUndo.tsx
 var RedoUndo = /* @__PURE__ */ wrapReactComponent(import_fastboard_ui.RedoUndo, "RedoUndo");

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"],"sourcesContent":["export * 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\";\n\nimport \"./style.scss\";\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 { SvelteComponent as SvelteComponentType } from \"svelte\";\nimport type { DependencyList, EffectCallback, FunctionComponent } from \"react\";\n\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","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"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,wBAAc,oCAAd;AACA,2BAAqB;;;ACCrB,0BAAyC;;;ACCzC,mBAAoE;AAE7D,IAAM,4BAA4B,OAAO,aAAa,cAAc,+BAAkB;AAEtF,yBAAyB,QAAwB,MAAuB;AAC7E,QAAM,UAAU,yBAAO,IAAI;AAE3B,4BAA0B,MAAM;AAC9B,QAAI,QAAQ,SAAS;AACnB,cAAQ,UAAU;AAClB;AAAA,IACF;AAEA,WAAO,OAAO;AAAA,EAChB,GAAG,IAAI;AACT;AAEO,4BACL,iBACA,MAC0B;AAC1B,0BAAwB,OAAc;AACpC,UAAM,CAAC,WAAW,gBAAgB,2BAAgC,IAAI;AACtE,UAAM,YAAY,yBAAmC,IAAI;AAEzD,8BAA0B,MAAM;AAC9B,UAAI,WAAW;AACb,kBAAU,UAAU,IAAI,gBAAgB,EAAE,QAAQ,WAAW,MAAM,CAAC;AAEpE,eAAO,MAAM;AACX,cAAI,UAAU,SAAS;AACrB,sBAAU,QAAQ,SAAS;AAAA,UAC7B;AAAA,QACF;AAAA,MACF;AAAA,IACF,GAAG,CAAC,SAAS,CAAC;AAEd,oBAAgB,MAAM;AACpB,UAAI,UAAU,SAAS;AACrB,kBAAU,QAAQ,KAAK,KAAK;AAAA,MAC9B;AAAA,IACF,GAAG,CAAC,KAAK,CAAC;AAEV,WAAO,mDAAC;AAAA,MAAI,WAAU;AAAA,MAAsB,KAAK;AAAA,KAAc;AAAA,EACjE;AAEA,iBAAe,cAAc;AAE7B,SAAO;AACT;;;AD7CO,IAAM,WAA2B,mCAAkC,8BAAc,UAAU;;;AELlG,2BAA+C;AAKxC,IAAM,cAA8B,mCACzC,kCACA,aACF;;;ACRA,2BAA+C;AAKxC,IAAM,cAA8B,mCACzC,kCACA,aACF;;;ACRA,2BAAuC;AAKhC,IAAM,UAA0B,mCAAiC,8BAAa,SAAS;;;ACL9F,2BAAmF;AAK5E,IAAM,YAA4B,mCAAmC,gCAAe,WAAW;AAC/F,IAAM,kBAAkC,mCAC7C,sCACA,iBACF;","names":[]}
+{"version":3,"sources":["../src/index.tsx","../src/RedoUndo.tsx","../src/hooks.tsx","../src/ZoomControl.tsx","../src/PageControl.tsx","../src/Toolbar.tsx","../src/Fastboard.tsx"],"sourcesContent":["export * 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 { useFastboard, useReplayFastboard } from \"./hooks\";\n\nimport \"./style.scss\";\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 { SvelteComponent as SvelteComponentType } from \"svelte\";\nimport type { DependencyList, EffectCallback, FunctionComponent } from \"react\";\nimport type {\n  FastboardApp,\n  FastboardOptions,\n  FastboardPlayer,\n  FastboardReplayOptions,\n} from \"@netless/fastboard-core\";\n\nimport React, { useEffect, useLayoutEffect, useRef, useState } from \"react\";\nimport { createFastboard, replayFastboard } from \"@netless/fastboard-core\";\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    // eslint-disable-next-line react-hooks/exhaustive-deps\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    // eslint-disable-next-line react-hooks/exhaustive-deps\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"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,wBAAc,oCAAd;AACA,2BAAqB;;;ACCrB,0BAAyC;;;ACOzC,mBAAoE;AACpE,4BAAiD;AAE1C,IAAM,4BAA4B,OAAO,aAAa,cAAc,+BAAkB;AAEtF,yBAAyB,QAAwB,MAAuB;AAC7E,QAAM,UAAU,yBAAO,IAAI;AAE3B,4BAA0B,MAAM;AAC9B,QAAI,QAAQ,SAAS;AACnB,cAAQ,UAAU;AAClB;AAAA,IACF;AAEA,WAAO,OAAO;AAAA,EAChB,GAAG,IAAI;AACT;AAEO,4BACL,iBACA,MAC0B;AAC1B,0BAAwB,OAAc;AACpC,UAAM,CAAC,WAAW,gBAAgB,2BAAgC,IAAI;AACtE,UAAM,YAAY,yBAAmC,IAAI;AAEzD,8BAA0B,MAAM;AAC9B,UAAI,WAAW;AACb,kBAAU,UAAU,IAAI,gBAAgB,EAAE,QAAQ,WAAW,MAAM,CAAC;AAEpE,eAAO,MAAM;AACX,cAAI,UAAU,SAAS;AACrB,sBAAU,QAAQ,SAAS;AAAA,UAC7B;AAAA,QACF;AAAA,MACF;AAAA,IACF,GAAG,CAAC,SAAS,CAAC;AAEd,oBAAgB,MAAM;AACpB,UAAI,UAAU,SAAS;AACrB,kBAAU,QAAQ,KAAK,KAAK;AAAA,MAC9B;AAAA,IACF,GAAG,CAAC,KAAK,CAAC;AAEV,WAAO,mDAAC;AAAA,MAAI,WAAU;AAAA,MAAsB,KAAK;AAAA,KAAc;AAAA,EACjE;AAEA,iBAAe,cAAc;AAE7B,SAAO;AACT;AAEO,sBAAsB,QAAqD;AAChF,QAAM,aAAa,yBAAO,KAAK;AAC/B,QAAM,CAAC,WAAW,gBAAgB,2BAA8B,IAAI;AAEpE,8BAAU,MAAM;AACd,QAAI,aAAiC;AAErC,+CAAgB,OAAO,CAAC,EAAE,KAAK,SAAO;AACpC,UAAI,CAAC,WAAW,SAAS;AACvB,qBAAc,aAAY,GAAI;AAAA,MAChC,OAAO;AACL,YAAI,QAAQ;AAAA,MACd;AAAA,IACF,CAAC;AAED,WAAO,MAAM;AACX,iBAAW,UAAU;AACrB,oBAAa,WAAU,QAAQ;AAAA,IACjC;AAAA,EAEF,GAAG,CAAC,CAAC;AAEL,SAAO;AACT;AAEO,4BAA4B,QAA8D;AAC/F,QAAM,aAAa,yBAAO,KAAK;AAC/B,QAAM,CAAC,WAAW,gBAAgB,2BAAiC,IAAI;AAEvE,8BAAU,MAAM;AACd,QAAI,aAAoC;AAExC,+CAAgB,OAAO,CAAC,EAAE,KAAK,SAAO;AACpC,UAAI,CAAC,WAAW,SAAS;AACvB,qBAAc,aAAY,GAAI;AAAA,MAChC,OAAO;AACL,YAAI,QAAQ;AAAA,MACd;AAAA,IACF,CAAC;AAED,WAAO,MAAM;AACX,iBAAW,UAAU;AACrB,oBAAa,WAAU,QAAQ;AAAA,IACjC;AAAA,EAEF,GAAG,CAAC,CAAC;AAEL,SAAO;AACT;;;ADtGO,IAAM,WAA2B,mCAAkC,8BAAc,UAAU;;;AELlG,2BAA+C;AAKxC,IAAM,cAA8B,mCACzC,kCACA,aACF;;;ACRA,2BAA+C;AAKxC,IAAM,cAA8B,mCACzC,kCACA,aACF;;;ACRA,2BAAuC;AAKhC,IAAM,UAA0B,mCAAiC,8BAAa,SAAS;;;ACL9F,2BAAmF;AAK5E,IAAM,YAA4B,mCAAmC,gCAAe,WAAW;AAC/F,IAAM,kBAAkC,mCAC7C,sCACA,iBACF;","names":[]}

package/dist/index.mjs

@@ -7,6 +7,7 @@ import { RedoUndo as RedoUndoImpl } from "@netless/fastboard-ui";
 
 // src/hooks.tsx
 import React, { useEffect, useLayoutEffect, useRef, useState } from "react";
+import { createFastboard, replayFastboard } from "@netless/fastboard-core";
 var useIsomorphicLayoutEffect = typeof document !== "undefined" ? useLayoutEffect : useEffect;
 function useUpdateEffect(effect, deps) {
   const isFirst = useRef(true);
@@ -45,6 +46,44 @@ function wrapReactComponent(SvelteComponent, name) {
   ReactComponent.displayName = name;
   return ReactComponent;
 }
+function useFastboard(config) {
+  const unmountRef = useRef(false);
+  const [fastboard, setFastboard] = useState(null);
+  useEffect(() => {
+    let fastboard2 = null;
+    createFastboard(config()).then((app) => {
+      if (!unmountRef.current) {
+        setFastboard(fastboard2 = app);
+      } else {
+        app.destroy();
+      }
+    });
+    return () => {
+      unmountRef.current = true;
+      fastboard2 && fastboard2.destroy();
+    };
+  }, []);
+  return fastboard;
+}
+function useReplayFastboard(config) {
+  const unmountRef = useRef(false);
+  const [fastboard, setFastboard] = useState(null);
+  useEffect(() => {
+    let fastboard2 = null;
+    replayFastboard(config()).then((app) => {
+      if (!unmountRef.current) {
+        setFastboard(fastboard2 = app);
+      } else {
+        app.destroy();
+      }
+    });
+    return () => {
+      unmountRef.current = true;
+      fastboard2 && fastboard2.destroy();
+    };
+  }, []);
+  return fastboard;
+}
 
 // src/RedoUndo.tsx
 var RedoUndo = /* @__PURE__ */ wrapReactComponent(RedoUndoImpl, "RedoUndo");
@@ -88,6 +127,8 @@ export {
   ReplayFastboard,
   Toolbar,
   ZoomControl,
-  apps
+  apps,
+  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"],"sourcesContent":["export * 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\";\n\nimport \"./style.scss\";\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 { SvelteComponent as SvelteComponentType } from \"svelte\";\nimport type { DependencyList, EffectCallback, FunctionComponent } from \"react\";\n\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","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"],"mappings":";AAAA;AACA;;;ACCA;;;ACCA;AAEO,IAAM,4BAA4B,OAAO,aAAa,cAAc,kBAAkB;AAEtF,yBAAyB,QAAwB,MAAuB;AAC7E,QAAM,UAAU,OAAO,IAAI;AAE3B,4BAA0B,MAAM;AAC9B,QAAI,QAAQ,SAAS;AACnB,cAAQ,UAAU;AAClB;AAAA,IACF;AAEA,WAAO,OAAO;AAAA,EAChB,GAAG,IAAI;AACT;AAEO,4BACL,iBACA,MAC0B;AAC1B,0BAAwB,OAAc;AACpC,UAAM,CAAC,WAAW,gBAAgB,SAAgC,IAAI;AACtE,UAAM,YAAY,OAAmC,IAAI;AAEzD,8BAA0B,MAAM;AAC9B,UAAI,WAAW;AACb,kBAAU,UAAU,IAAI,gBAAgB,EAAE,QAAQ,WAAW,MAAM,CAAC;AAEpE,eAAO,MAAM;AACX,cAAI,UAAU,SAAS;AACrB,sBAAU,QAAQ,SAAS;AAAA,UAC7B;AAAA,QACF;AAAA,MACF;AAAA,IACF,GAAG,CAAC,SAAS,CAAC;AAEd,oBAAgB,MAAM;AACpB,UAAI,UAAU,SAAS;AACrB,kBAAU,QAAQ,KAAK,KAAK;AAAA,MAC9B;AAAA,IACF,GAAG,CAAC,KAAK,CAAC;AAEV,WAAO,oCAAC;AAAA,MAAI,WAAU;AAAA,MAAsB,KAAK;AAAA,KAAc;AAAA,EACjE;AAEA,iBAAe,cAAc;AAE7B,SAAO;AACT;;;AD7CO,IAAM,WAA2B,mCAAkC,cAAc,UAAU;;;AELlG;AAKO,IAAM,cAA8B,mCACzC,iBACA,aACF;;;ACRA;AAKO,IAAM,cAA8B,mCACzC,iBACA,aACF;;;ACRA;AAKO,IAAM,UAA0B,mCAAiC,aAAa,SAAS;;;ACL9F;AAKO,IAAM,YAA4B,mCAAmC,eAAe,WAAW;AAC/F,IAAM,kBAAkC,mCAC7C,qBACA,iBACF;","names":[]}
+{"version":3,"sources":["../src/index.tsx","../src/RedoUndo.tsx","../src/hooks.tsx","../src/ZoomControl.tsx","../src/PageControl.tsx","../src/Toolbar.tsx","../src/Fastboard.tsx"],"sourcesContent":["export * 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 { useFastboard, useReplayFastboard } from \"./hooks\";\n\nimport \"./style.scss\";\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 { SvelteComponent as SvelteComponentType } from \"svelte\";\nimport type { DependencyList, EffectCallback, FunctionComponent } from \"react\";\nimport type {\n  FastboardApp,\n  FastboardOptions,\n  FastboardPlayer,\n  FastboardReplayOptions,\n} from \"@netless/fastboard-core\";\n\nimport React, { useEffect, useLayoutEffect, useRef, useState } from \"react\";\nimport { createFastboard, replayFastboard } from \"@netless/fastboard-core\";\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    // eslint-disable-next-line react-hooks/exhaustive-deps\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    // eslint-disable-next-line react-hooks/exhaustive-deps\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"],"mappings":";AAAA;AACA;;;ACCA;;;ACOA;AACA;AAEO,IAAM,4BAA4B,OAAO,aAAa,cAAc,kBAAkB;AAEtF,yBAAyB,QAAwB,MAAuB;AAC7E,QAAM,UAAU,OAAO,IAAI;AAE3B,4BAA0B,MAAM;AAC9B,QAAI,QAAQ,SAAS;AACnB,cAAQ,UAAU;AAClB;AAAA,IACF;AAEA,WAAO,OAAO;AAAA,EAChB,GAAG,IAAI;AACT;AAEO,4BACL,iBACA,MAC0B;AAC1B,0BAAwB,OAAc;AACpC,UAAM,CAAC,WAAW,gBAAgB,SAAgC,IAAI;AACtE,UAAM,YAAY,OAAmC,IAAI;AAEzD,8BAA0B,MAAM;AAC9B,UAAI,WAAW;AACb,kBAAU,UAAU,IAAI,gBAAgB,EAAE,QAAQ,WAAW,MAAM,CAAC;AAEpE,eAAO,MAAM;AACX,cAAI,UAAU,SAAS;AACrB,sBAAU,QAAQ,SAAS;AAAA,UAC7B;AAAA,QACF;AAAA,MACF;AAAA,IACF,GAAG,CAAC,SAAS,CAAC;AAEd,oBAAgB,MAAM;AACpB,UAAI,UAAU,SAAS;AACrB,kBAAU,QAAQ,KAAK,KAAK;AAAA,MAC9B;AAAA,IACF,GAAG,CAAC,KAAK,CAAC;AAEV,WAAO,oCAAC;AAAA,MAAI,WAAU;AAAA,MAAsB,KAAK;AAAA,KAAc;AAAA,EACjE;AAEA,iBAAe,cAAc;AAE7B,SAAO;AACT;AAEO,sBAAsB,QAAqD;AAChF,QAAM,aAAa,OAAO,KAAK;AAC/B,QAAM,CAAC,WAAW,gBAAgB,SAA8B,IAAI;AAEpE,YAAU,MAAM;AACd,QAAI,aAAiC;AAErC,oBAAgB,OAAO,CAAC,EAAE,KAAK,SAAO;AACpC,UAAI,CAAC,WAAW,SAAS;AACvB,qBAAc,aAAY,GAAI;AAAA,MAChC,OAAO;AACL,YAAI,QAAQ;AAAA,MACd;AAAA,IACF,CAAC;AAED,WAAO,MAAM;AACX,iBAAW,UAAU;AACrB,oBAAa,WAAU,QAAQ;AAAA,IACjC;AAAA,EAEF,GAAG,CAAC,CAAC;AAEL,SAAO;AACT;AAEO,4BAA4B,QAA8D;AAC/F,QAAM,aAAa,OAAO,KAAK;AAC/B,QAAM,CAAC,WAAW,gBAAgB,SAAiC,IAAI;AAEvE,YAAU,MAAM;AACd,QAAI,aAAoC;AAExC,oBAAgB,OAAO,CAAC,EAAE,KAAK,SAAO;AACpC,UAAI,CAAC,WAAW,SAAS;AACvB,qBAAc,aAAY,GAAI;AAAA,MAChC,OAAO;AACL,YAAI,QAAQ;AAAA,MACd;AAAA,IACF,CAAC;AAED,WAAO,MAAM;AACX,iBAAW,UAAU;AACrB,oBAAa,WAAU,QAAQ;AAAA,IACjC;AAAA,EAEF,GAAG,CAAC,CAAC;AAEL,SAAO;AACT;;;ADtGO,IAAM,WAA2B,mCAAkC,cAAc,UAAU;;;AELlG;AAKO,IAAM,cAA8B,mCACzC,iBACA,aACF;;;ACRA;AAKO,IAAM,cAA8B,mCACzC,iBACA,aACF;;;ACRA;AAKO,IAAM,UAA0B,mCAAiC,aAAa,SAAS;;;ACL9F;AAKO,IAAM,YAA4B,mCAAmC,eAAe,WAAW;AAC/F,IAAM,kBAAkC,mCAC7C,qBACA,iBACF;","names":[]}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@netless/fastboard-react",
-  "version": "0.3.2-canary.4",
+  "version": "0.3.2",
   "description": "React components of @netless/fastboard.",
   "main": "dist/index.js",
   "files": [
@@ -12,8 +12,8 @@
     "react": "*"
   },
   "dependencies": {
-    "@netless/fastboard-core": "0.3.2-canary.4",
-    "@netless/fastboard-ui": "0.3.2-canary.4"
+    "@netless/fastboard-core": "0.3.2",
+    "@netless/fastboard-ui": "0.3.2"
   },
   "devDependencies": {
     "@netless/esbuild-plugin-inline-sass": "0.1.0",

package/src/hooks.tsx

@@ -1,7 +1,14 @@
 import type { SvelteComponent as SvelteComponentType } from "svelte";
 import type { DependencyList, EffectCallback, FunctionComponent } from "react";
+import type {
+  FastboardApp,
+  FastboardOptions,
+  FastboardPlayer,
+  FastboardReplayOptions,
+} from "@netless/fastboard-core";
 
 import React, { useEffect, useLayoutEffect, useRef, useState } from "react";
+import { createFastboard, replayFastboard } from "@netless/fastboard-core";
 
 export const useIsomorphicLayoutEffect = typeof document !== "undefined" ? useLayoutEffect : useEffect;
 
@@ -51,3 +58,53 @@ export function wrapReactComponent<Props>(
 
   return ReactComponent;
 }
+
+export function useFastboard(config: () => FastboardOptions): FastboardApp | null {
+  const unmountRef = useRef(false);
+  const [fastboard, setFastboard] = useState<FastboardApp | null>(null);
+
+  useEffect(() => {
+    let fastboard: FastboardApp | null = null;
+
+    createFastboard(config()).then(app => {
+      if (!unmountRef.current) {
+        setFastboard((fastboard = app));
+      } else {
+        app.destroy();
+      }
+    });
+
+    return () => {
+      unmountRef.current = true;
+      fastboard && fastboard.destroy();
+    };
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+
+  return fastboard;
+}
+
+export function useReplayFastboard(config: () => FastboardReplayOptions): FastboardPlayer | null {
+  const unmountRef = useRef(false);
+  const [fastboard, setFastboard] = useState<FastboardPlayer | null>(null);
+
+  useEffect(() => {
+    let fastboard: FastboardPlayer | null = null;
+
+    replayFastboard(config()).then(app => {
+      if (!unmountRef.current) {
+        setFastboard((fastboard = app));
+      } else {
+        app.destroy();
+      }
+    });
+
+    return () => {
+      unmountRef.current = true;
+      fastboard && fastboard.destroy();
+    };
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+
+  return fastboard;
+}

package/src/index.tsx

@@ -13,6 +13,7 @@ export * from "./ZoomControl";
 export * from "./PageControl";
 export * from "./Toolbar";
 export * from "./Fastboard";
+export { useFastboard, useReplayFastboard } from "./hooks";
 
 import "./style.scss";