@netless/fastboard-react 1.0.0-canary.8 → 1.0.0-canary.9

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (6) hide show
  1. package/dist/index.js +40 -11
  2. package/dist/index.js.map +1 -1
  3. package/dist/index.mjs +32 -8
  4. package/dist/index.mjs.map +1 -1
  5. package/package.json +8 -8
  6. package/src/hooks.tsx +36 -4
package/dist/index.js CHANGED
@@ -6,6 +6,11 @@ var windowManager = require('@netless/window-manager');
6
6
  var NetlessAppSlide = require('@netless/app-slide');
7
7
  var React = require('react');
8
8
 
9
+ function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
10
+
11
+ var NetlessAppSlide__default = /*#__PURE__*/_interopDefault(NetlessAppSlide);
12
+ var React__default = /*#__PURE__*/_interopDefault(React);
13
+
9
14
  // inline-sass-helper:inline-sass-style-helper.js
10
15
  function injectStyle(text) {
11
16
  if (typeof document !== "undefined") {
@@ -22,12 +27,12 @@ var style_default = '.netless-window-manager-playground{width:100%;height:100%;p
22
27
  // inline-sass-stub:./src/style.scss
23
28
  injectStyle(style_default);
24
29
  function registerSlide() {
25
- if (windowManager.WindowManager.registered.has(NetlessAppSlide.kind))
30
+ if (windowManager.WindowManager.registered.has(NetlessAppSlide__default.default.kind))
26
31
  return;
27
32
  windowManager.WindowManager.register({
28
- kind: NetlessAppSlide.kind,
33
+ kind: NetlessAppSlide__default.default.kind,
29
34
  appOptions: { debug: false },
30
- src: NetlessAppSlide,
35
+ src: NetlessAppSlide__default.default,
31
36
  addHooks: NetlessAppSlide.addHooks
32
37
  });
33
38
  }
@@ -62,6 +67,33 @@ function useUpdateEffect(effect, deps) {
62
67
  return effect();
63
68
  }, deps);
64
69
  }
70
+ function useEffectOnce(effect) {
71
+ const effectFn = React.useRef(effect);
72
+ const destroyFn = React.useRef();
73
+ const effectCalled = React.useRef(false);
74
+ const rendered = React.useRef(false);
75
+ const [, refresh] = React.useState(0);
76
+ if (effectCalled.current) {
77
+ rendered.current = true;
78
+ }
79
+ React.useEffect(() => {
80
+ if (!effectCalled.current) {
81
+ destroyFn.current = effectFn.current();
82
+ effectCalled.current = true;
83
+ }
84
+ refresh(1);
85
+ return () => {
86
+ if (rendered.current === false) {
87
+ console.warn(
88
+ "It seems you're under React.StrictMode, which could lead to unintended behavior. It is recommended to turn it off."
89
+ );
90
+ return;
91
+ }
92
+ if (destroyFn.current)
93
+ destroyFn.current();
94
+ };
95
+ }, []);
96
+ }
65
97
  function wrapReactComponent(SvelteComponent, name) {
66
98
  function ReactComponent(props) {
67
99
  const [container, setContainer] = React.useState(null);
@@ -81,10 +113,7 @@ function wrapReactComponent(SvelteComponent, name) {
81
113
  component.current.$set(props);
82
114
  }
83
115
  }, [props]);
84
- return /* @__PURE__ */ React.createElement("div", {
85
- className: "fastboard-react-div",
86
- ref: setContainer
87
- });
116
+ return /* @__PURE__ */ React__default.default.createElement("div", { className: "fastboard-react-div", ref: setContainer });
88
117
  }
89
118
  ReactComponent.displayName = name;
90
119
  return ReactComponent;
@@ -92,7 +121,7 @@ function wrapReactComponent(SvelteComponent, name) {
92
121
  function useFastboard(config) {
93
122
  const unmountRef = React.useRef(false);
94
123
  const [fastboard, setFastboard] = React.useState(null);
95
- React.useEffect(() => {
124
+ useEffectOnce(() => {
96
125
  let fastboard2 = null;
97
126
  createFastboard(config()).then((app) => {
98
127
  if (!unmountRef.current) {
@@ -105,13 +134,13 @@ function useFastboard(config) {
105
134
  unmountRef.current = true;
106
135
  fastboard2 && fastboard2.destroy();
107
136
  };
108
- }, []);
137
+ });
109
138
  return fastboard;
110
139
  }
111
140
  function useReplayFastboard(config) {
112
141
  const unmountRef = React.useRef(false);
113
142
  const [fastboard, setFastboard] = React.useState(null);
114
- React.useEffect(() => {
143
+ useEffectOnce(() => {
115
144
  let fastboard2 = null;
116
145
  replayFastboard(config()).then((app) => {
117
146
  if (!unmountRef.current) {
@@ -124,7 +153,7 @@ function useReplayFastboard(config) {
124
153
  unmountRef.current = true;
125
154
  fastboard2 && fastboard2.destroy();
126
155
  };
127
- }, []);
156
+ });
128
157
  return fastboard;
129
158
  }
130
159
 
package/dist/index.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"sources":["../src/index.tsx","../src/components/RedoUndo.tsx","../src/create.ts","../src/behaviors/netless-app.ts","../src/replay.ts","../src/hooks.tsx","../src/components/ZoomControl.tsx","../src/components/PageControl.tsx","../src/components/Toolbar.tsx","../src/components/Fastboard.tsx"],"names":["fastboard"],"mappings":"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","sourcesContent":["import \"./style.scss\";\n\nexport * from \"@netless/fastboard-core\";\nexport { stockedApps } 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 \"./components/RedoUndo\";\nexport * from \"./components/ZoomControl\";\nexport * from \"./components/PageControl\";\nexport * from \"./components/Toolbar\";\nexport * from \"./components/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\";\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 extends Record<string, any> = any>(\n options: FastboardOptions\n): Promise<FastboardApp<TEventData>> {\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 type { FastboardPlayer, 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 extends Record<string, any> = any>(\n options: FastboardReplayOptions\n): Promise<FastboardPlayer<TEventData>> {\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 extends Record<string, any> = any>(\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"]}
1
+ {"version":3,"sources":["../src/index.tsx","../src/components/RedoUndo.tsx","../src/create.ts","../src/behaviors/netless-app.ts","../src/replay.ts","../src/hooks.tsx","../src/components/ZoomControl.tsx","../src/components/PageControl.tsx","../src/components/Toolbar.tsx","../src/components/Fastboard.tsx"],"names":["fastboard"],"mappings":"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","sourcesContent":["import \"./style.scss\";\n\nexport * from \"@netless/fastboard-core\";\nexport { stockedApps } 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 \"./components/RedoUndo\";\nexport * from \"./components/ZoomControl\";\nexport * from \"./components/PageControl\";\nexport * from \"./components/Toolbar\";\nexport * from \"./components/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\";\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 extends Record<string, any> = any>(\n options: FastboardOptions\n): Promise<FastboardApp<TEventData>> {\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 type { FastboardPlayer, 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 extends Record<string, any> = any>(\n options: FastboardReplayOptions\n): Promise<FastboardPlayer<TEventData>> {\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\n// https://dev.to/ag-grid/react-18-avoiding-use-effect-getting-called-twice-4i9e\nexport function useEffectOnce(effect: EffectCallback) {\n const effectFn = useRef(effect);\n const destroyFn = useRef<void | (() => void)>();\n const effectCalled = useRef(false);\n const rendered = useRef(false);\n const [, refresh] = useState(0);\n\n if (effectCalled.current) {\n rendered.current = true;\n }\n\n useEffect(() => {\n if (!effectCalled.current) {\n destroyFn.current = effectFn.current();\n effectCalled.current = true;\n }\n\n refresh(1);\n\n return () => {\n if (rendered.current === false) {\n console.warn(\n \"It seems you're under React.StrictMode, which could lead to unintended behavior. It is recommended to turn it off.\"\n );\n return;\n }\n if (destroyFn.current) destroyFn.current();\n };\n }, []);\n}\n\nexport function wrapReactComponent<Props extends Record<string, any> = any>(\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 useEffectOnce(() => {\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 useEffectOnce(() => {\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 CHANGED
@@ -63,6 +63,33 @@ function useUpdateEffect(effect, deps) {
63
63
  return effect();
64
64
  }, deps);
65
65
  }
66
+ function useEffectOnce(effect) {
67
+ const effectFn = useRef(effect);
68
+ const destroyFn = useRef();
69
+ const effectCalled = useRef(false);
70
+ const rendered = useRef(false);
71
+ const [, refresh] = useState(0);
72
+ if (effectCalled.current) {
73
+ rendered.current = true;
74
+ }
75
+ useEffect(() => {
76
+ if (!effectCalled.current) {
77
+ destroyFn.current = effectFn.current();
78
+ effectCalled.current = true;
79
+ }
80
+ refresh(1);
81
+ return () => {
82
+ if (rendered.current === false) {
83
+ console.warn(
84
+ "It seems you're under React.StrictMode, which could lead to unintended behavior. It is recommended to turn it off."
85
+ );
86
+ return;
87
+ }
88
+ if (destroyFn.current)
89
+ destroyFn.current();
90
+ };
91
+ }, []);
92
+ }
66
93
  function wrapReactComponent(SvelteComponent, name) {
67
94
  function ReactComponent(props) {
68
95
  const [container, setContainer] = useState(null);
@@ -82,10 +109,7 @@ function wrapReactComponent(SvelteComponent, name) {
82
109
  component.current.$set(props);
83
110
  }
84
111
  }, [props]);
85
- return /* @__PURE__ */ React.createElement("div", {
86
- className: "fastboard-react-div",
87
- ref: setContainer
88
- });
112
+ return /* @__PURE__ */ React.createElement("div", { className: "fastboard-react-div", ref: setContainer });
89
113
  }
90
114
  ReactComponent.displayName = name;
91
115
  return ReactComponent;
@@ -93,7 +117,7 @@ function wrapReactComponent(SvelteComponent, name) {
93
117
  function useFastboard(config) {
94
118
  const unmountRef = useRef(false);
95
119
  const [fastboard, setFastboard] = useState(null);
96
- useEffect(() => {
120
+ useEffectOnce(() => {
97
121
  let fastboard2 = null;
98
122
  createFastboard(config()).then((app) => {
99
123
  if (!unmountRef.current) {
@@ -106,13 +130,13 @@ function useFastboard(config) {
106
130
  unmountRef.current = true;
107
131
  fastboard2 && fastboard2.destroy();
108
132
  };
109
- }, []);
133
+ });
110
134
  return fastboard;
111
135
  }
112
136
  function useReplayFastboard(config) {
113
137
  const unmountRef = useRef(false);
114
138
  const [fastboard, setFastboard] = useState(null);
115
- useEffect(() => {
139
+ useEffectOnce(() => {
116
140
  let fastboard2 = null;
117
141
  replayFastboard(config()).then((app) => {
118
142
  if (!unmountRef.current) {
@@ -125,7 +149,7 @@ function useReplayFastboard(config) {
125
149
  unmountRef.current = true;
126
150
  fastboard2 && fastboard2.destroy();
127
151
  };
128
- }, []);
152
+ });
129
153
  return fastboard;
130
154
  }
131
155
 
package/dist/index.mjs.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"sources":["../src/index.tsx","../src/components/RedoUndo.tsx","../src/create.ts","../src/behaviors/netless-app.ts","../src/replay.ts","../src/hooks.tsx","../src/components/ZoomControl.tsx","../src/components/PageControl.tsx","../src/components/Toolbar.tsx","../src/components/Fastboard.tsx"],"names":["fastboard"],"mappings":"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","sourcesContent":["import \"./style.scss\";\n\nexport * from \"@netless/fastboard-core\";\nexport { stockedApps } 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 \"./components/RedoUndo\";\nexport * from \"./components/ZoomControl\";\nexport * from \"./components/PageControl\";\nexport * from \"./components/Toolbar\";\nexport * from \"./components/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\";\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 extends Record<string, any> = any>(\n options: FastboardOptions\n): Promise<FastboardApp<TEventData>> {\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 type { FastboardPlayer, 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 extends Record<string, any> = any>(\n options: FastboardReplayOptions\n): Promise<FastboardPlayer<TEventData>> {\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 extends Record<string, any> = any>(\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"]}
1
+ {"version":3,"sources":["../src/index.tsx","../src/components/RedoUndo.tsx","../src/create.ts","../src/behaviors/netless-app.ts","../src/replay.ts","../src/hooks.tsx","../src/components/ZoomControl.tsx","../src/components/PageControl.tsx","../src/components/Toolbar.tsx","../src/components/Fastboard.tsx"],"names":["fastboard"],"mappings":"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","sourcesContent":["import \"./style.scss\";\n\nexport * from \"@netless/fastboard-core\";\nexport { stockedApps } 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 \"./components/RedoUndo\";\nexport * from \"./components/ZoomControl\";\nexport * from \"./components/PageControl\";\nexport * from \"./components/Toolbar\";\nexport * from \"./components/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\";\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 extends Record<string, any> = any>(\n options: FastboardOptions\n): Promise<FastboardApp<TEventData>> {\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 type { FastboardPlayer, 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 extends Record<string, any> = any>(\n options: FastboardReplayOptions\n): Promise<FastboardPlayer<TEventData>> {\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\n// https://dev.to/ag-grid/react-18-avoiding-use-effect-getting-called-twice-4i9e\nexport function useEffectOnce(effect: EffectCallback) {\n const effectFn = useRef(effect);\n const destroyFn = useRef<void | (() => void)>();\n const effectCalled = useRef(false);\n const rendered = useRef(false);\n const [, refresh] = useState(0);\n\n if (effectCalled.current) {\n rendered.current = true;\n }\n\n useEffect(() => {\n if (!effectCalled.current) {\n destroyFn.current = effectFn.current();\n effectCalled.current = true;\n }\n\n refresh(1);\n\n return () => {\n if (rendered.current === false) {\n console.warn(\n \"It seems you're under React.StrictMode, which could lead to unintended behavior. It is recommended to turn it off.\"\n );\n return;\n }\n if (destroyFn.current) destroyFn.current();\n };\n }, []);\n}\n\nexport function wrapReactComponent<Props extends Record<string, any> = any>(\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 useEffectOnce(() => {\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 useEffectOnce(() => {\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 CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@netless/fastboard-react",
3
- "version": "1.0.0-canary.8",
3
+ "version": "1.0.0-canary.9",
4
4
  "description": "React components of @netless/fastboard.",
5
5
  "main": "dist/index.js",
6
6
  "files": [
@@ -14,16 +14,16 @@
14
14
  "white-web-sdk": ">=2.16.0"
15
15
  },
16
16
  "dependencies": {
17
- "@netless/app-slide": "^0.3.0-canary.13",
18
- "@netless/fastboard-core": "1.0.0-canary.8",
19
- "@netless/fastboard-ui": "1.0.0-canary.8"
17
+ "@netless/app-slide": "^0.3.0-canary.17",
18
+ "@netless/fastboard-core": "1.0.0-canary.9",
19
+ "@netless/fastboard-ui": "1.0.0-canary.9"
20
20
  },
21
21
  "devDependencies": {
22
- "@netless/esbuild-plugin-inline-sass": "0.1.0",
23
- "@types/react": "^18.0.25",
24
- "@types/react-dom": "^18.0.8",
22
+ "@types/react": "^18.2.12",
23
+ "@types/react-dom": "^18.2.5",
25
24
  "react": "^18.2.0",
26
- "react-dom": "^18.2.0"
25
+ "react-dom": "^18.2.0",
26
+ "@netless/esbuild-plugin-inline-sass": "0.1.0"
27
27
  },
28
28
  "scripts": {
29
29
  "cleanup": "rimraf dist",
package/src/hooks.tsx CHANGED
@@ -27,6 +27,38 @@ export function useUpdateEffect(effect: EffectCallback, deps?: DependencyList) {
27
27
  }, deps);
28
28
  }
29
29
 
30
+ // https://dev.to/ag-grid/react-18-avoiding-use-effect-getting-called-twice-4i9e
31
+ export function useEffectOnce(effect: EffectCallback) {
32
+ const effectFn = useRef(effect);
33
+ const destroyFn = useRef<void | (() => void)>();
34
+ const effectCalled = useRef(false);
35
+ const rendered = useRef(false);
36
+ const [, refresh] = useState(0);
37
+
38
+ if (effectCalled.current) {
39
+ rendered.current = true;
40
+ }
41
+
42
+ useEffect(() => {
43
+ if (!effectCalled.current) {
44
+ destroyFn.current = effectFn.current();
45
+ effectCalled.current = true;
46
+ }
47
+
48
+ refresh(1);
49
+
50
+ return () => {
51
+ if (rendered.current === false) {
52
+ console.warn(
53
+ "It seems you're under React.StrictMode, which could lead to unintended behavior. It is recommended to turn it off."
54
+ );
55
+ return;
56
+ }
57
+ if (destroyFn.current) destroyFn.current();
58
+ };
59
+ }, []);
60
+ }
61
+
30
62
  export function wrapReactComponent<Props extends Record<string, any> = any>(
31
63
  SvelteComponent: typeof SvelteComponentType,
32
64
  name: string
@@ -65,7 +97,7 @@ export function useFastboard(config: () => FastboardOptions): FastboardApp | nul
65
97
  const unmountRef = useRef(false);
66
98
  const [fastboard, setFastboard] = useState<FastboardApp | null>(null);
67
99
 
68
- useEffect(() => {
100
+ useEffectOnce(() => {
69
101
  let fastboard: FastboardApp | null = null;
70
102
 
71
103
  createFastboard(config()).then(app => {
@@ -80,7 +112,7 @@ export function useFastboard(config: () => FastboardOptions): FastboardApp | nul
80
112
  unmountRef.current = true;
81
113
  fastboard && fastboard.destroy();
82
114
  };
83
- }, []);
115
+ });
84
116
 
85
117
  return fastboard;
86
118
  }
@@ -89,7 +121,7 @@ export function useReplayFastboard(config: () => FastboardReplayOptions): Fastbo
89
121
  const unmountRef = useRef(false);
90
122
  const [fastboard, setFastboard] = useState<FastboardPlayer | null>(null);
91
123
 
92
- useEffect(() => {
124
+ useEffectOnce(() => {
93
125
  let fastboard: FastboardPlayer | null = null;
94
126
 
95
127
  replayFastboard(config()).then(app => {
@@ -104,7 +136,7 @@ export function useReplayFastboard(config: () => FastboardReplayOptions): Fastbo
104
136
  unmountRef.current = true;
105
137
  fastboard && fastboard.destroy();
106
138
  };
107
- }, []);
139
+ });
108
140
 
109
141
  return fastboard;
110
142
  }