@netless/fastboard-react 0.3.3 → 0.3.4-canary.0
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.
- package/dist/index.js +2 -0
- package/dist/index.js.map +1 -1
- package/dist/index.mjs +14 -38
- package/dist/index.mjs.map +1 -1
- package/package.json +5 -5
package/dist/index.js
CHANGED
package/dist/index.js.map
CHANGED
|
@@ -1 +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\";\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"]
|
|
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"],"names":[],"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","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"]}
|
package/dist/index.mjs
CHANGED
|
@@ -1,13 +1,10 @@
|
|
|
1
|
-
|
|
2
|
-
export * from
|
|
3
|
-
import {
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
import { RedoUndo as RedoUndoImpl } from "@netless/fastboard-ui";
|
|
1
|
+
import { createFastboard, replayFastboard } from '@netless/fastboard-core';
|
|
2
|
+
export * from '@netless/fastboard-core';
|
|
3
|
+
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';
|
|
4
|
+
export { apps } from '@netless/fastboard-ui';
|
|
5
|
+
import React, { useRef, useState, useEffect, useLayoutEffect } from 'react';
|
|
7
6
|
|
|
8
|
-
// src/
|
|
9
|
-
import React, { useEffect, useLayoutEffect, useRef, useState } from "react";
|
|
10
|
-
import { createFastboard, replayFastboard } from "@netless/fastboard-core";
|
|
7
|
+
// src/index.tsx
|
|
11
8
|
var useIsomorphicLayoutEffect = typeof document !== "undefined" ? useLayoutEffect : useEffect;
|
|
12
9
|
function useUpdateEffect(effect, deps) {
|
|
13
10
|
const isFirst = useRef(true);
|
|
@@ -86,24 +83,12 @@ function useReplayFastboard(config) {
|
|
|
86
83
|
}
|
|
87
84
|
|
|
88
85
|
// src/RedoUndo.tsx
|
|
89
|
-
var RedoUndo = /* @__PURE__ */ wrapReactComponent(
|
|
90
|
-
|
|
91
|
-
|
|
92
|
-
|
|
93
|
-
var
|
|
94
|
-
|
|
95
|
-
// src/PageControl.tsx
|
|
96
|
-
import { PageControl as PageControlImpl } from "@netless/fastboard-ui";
|
|
97
|
-
var PageControl = /* @__PURE__ */ wrapReactComponent(PageControlImpl, "PageControl");
|
|
98
|
-
|
|
99
|
-
// src/Toolbar.tsx
|
|
100
|
-
import { Toolbar as ToolbarImpl } from "@netless/fastboard-ui";
|
|
101
|
-
var Toolbar = /* @__PURE__ */ wrapReactComponent(ToolbarImpl, "Toolbar");
|
|
102
|
-
|
|
103
|
-
// src/Fastboard.tsx
|
|
104
|
-
import { Fastboard as FastboardImpl, ReplayFastboard as ReplayFastboardImpl } from "@netless/fastboard-ui";
|
|
105
|
-
var Fastboard = /* @__PURE__ */ wrapReactComponent(FastboardImpl, "Fastboard");
|
|
106
|
-
var ReplayFastboard = /* @__PURE__ */ wrapReactComponent(ReplayFastboardImpl, "ReplayFastboard");
|
|
86
|
+
var RedoUndo = /* @__PURE__ */ wrapReactComponent(RedoUndo$1, "RedoUndo");
|
|
87
|
+
var ZoomControl = /* @__PURE__ */ wrapReactComponent(ZoomControl$1, "ZoomControl");
|
|
88
|
+
var PageControl = /* @__PURE__ */ wrapReactComponent(PageControl$1, "PageControl");
|
|
89
|
+
var Toolbar = /* @__PURE__ */ wrapReactComponent(Toolbar$1, "Toolbar");
|
|
90
|
+
var Fastboard = /* @__PURE__ */ wrapReactComponent(Fastboard$1, "Fastboard");
|
|
91
|
+
var ReplayFastboard = /* @__PURE__ */ wrapReactComponent(ReplayFastboard$1, "ReplayFastboard");
|
|
107
92
|
|
|
108
93
|
// inline-sass-helper:inline-sass-style-helper.js
|
|
109
94
|
function injectStyle(text) {
|
|
@@ -120,15 +105,6 @@ var style_default = '@charset "UTF-8";.vjs-modal-dialog .vjs-modal-dialog-conten
|
|
|
120
105
|
|
|
121
106
|
// inline-sass-stub:./src/style.scss
|
|
122
107
|
injectStyle(style_default);
|
|
123
|
-
|
|
124
|
-
|
|
125
|
-
PageControl,
|
|
126
|
-
RedoUndo,
|
|
127
|
-
ReplayFastboard,
|
|
128
|
-
Toolbar,
|
|
129
|
-
ZoomControl,
|
|
130
|
-
apps,
|
|
131
|
-
useFastboard,
|
|
132
|
-
useReplayFastboard
|
|
133
|
-
};
|
|
108
|
+
|
|
109
|
+
export { Fastboard, PageControl, RedoUndo, ReplayFastboard, Toolbar, ZoomControl, useFastboard, useReplayFastboard };
|
|
134
110
|
//# sourceMappingURL=index.mjs.map
|
package/dist/index.mjs.map
CHANGED
|
@@ -1 +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\";\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"]
|
|
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"],"names":[],"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","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"]}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@netless/fastboard-react",
|
|
3
|
-
"version": "0.3.
|
|
3
|
+
"version": "0.3.4-canary.0",
|
|
4
4
|
"description": "React components of @netless/fastboard.",
|
|
5
5
|
"main": "dist/index.js",
|
|
6
6
|
"files": [
|
|
@@ -12,13 +12,13 @@
|
|
|
12
12
|
"react": "*"
|
|
13
13
|
},
|
|
14
14
|
"dependencies": {
|
|
15
|
-
"@netless/fastboard-core": "0.3.
|
|
16
|
-
"@netless/fastboard-ui": "0.3.
|
|
15
|
+
"@netless/fastboard-core": "0.3.4-canary.0",
|
|
16
|
+
"@netless/fastboard-ui": "0.3.4-canary.0"
|
|
17
17
|
},
|
|
18
18
|
"devDependencies": {
|
|
19
19
|
"@netless/esbuild-plugin-inline-sass": "0.1.0",
|
|
20
|
-
"@types/react": "^17.0.
|
|
21
|
-
"@types/react-dom": "^17.0.
|
|
20
|
+
"@types/react": "^17.0.45",
|
|
21
|
+
"@types/react-dom": "^17.0.17",
|
|
22
22
|
"react": "^17.0.2",
|
|
23
23
|
"react-dom": "^17.0.2"
|
|
24
24
|
},
|