@easyv/biz-components 0.0.52-beta.4 → 0.0.53
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/README.md +2 -2
- package/dist/_virtual/index.es2.js +2 -2
- package/dist/_virtual/index.es3.js +2 -2
- package/dist/_virtual/index.es4.js +2 -2
- package/dist/components/easyv-monaco-editor/easyv-monaco-editor.es.js +70 -50
- package/dist/components/easyv-monaco-editor/easyv-monaco-editor.es.js.map +1 -1
- package/dist/components/easyv-monaco-editor/index.d.ts +1 -0
- package/dist/components/easyv-monaco-editor/types.d.ts +22 -1
- package/dist/hooks/use-initialized.d.ts +4 -2
- package/dist/hooks/use-initialized.es.js +4 -5
- package/dist/hooks/use-initialized.es.js.map +1 -1
- package/dist/node_modules/.pnpm/classnames@2.3.2/node_modules/classnames/index.es.js +1 -1
- package/dist/node_modules/.pnpm/co-web-worker@1.0.1/node_modules/co-web-worker/index.es.js +1 -1
- package/dist/node_modules/.pnpm/prop-types@15.8.1/node_modules/prop-types/index.es.js +1 -1
- package/dist/stats.html +1 -1
- package/package.json +2 -2
- package/dist/components/easyv-monaco-editor/monaco-setup.d.ts +0 -0
- package/dist/node_modules/.pnpm/ahooks@3.8.5_react@18.2.0/node_modules/ahooks/es/useLatest/index.es.js +0 -10
- package/dist/node_modules/.pnpm/ahooks@3.8.5_react@18.2.0/node_modules/ahooks/es/useLatest/index.es.js.map +0 -1
- package/dist/node_modules/.pnpm/ahooks@3.8.5_react@18.2.0/node_modules/ahooks/es/useMount/index.es.js +0 -17
- package/dist/node_modules/.pnpm/ahooks@3.8.5_react@18.2.0/node_modules/ahooks/es/useMount/index.es.js.map +0 -1
- package/dist/node_modules/.pnpm/ahooks@3.8.5_react@18.2.0/node_modules/ahooks/es/useUnmount/index.es.js +0 -21
- package/dist/node_modules/.pnpm/ahooks@3.8.5_react@18.2.0/node_modules/ahooks/es/useUnmount/index.es.js.map +0 -1
- /package/dist/{style.css → style.pkg.css} +0 -0
- /package/dist/{index.css → tailwindcss.pkg.css} +0 -0
package/README.md
CHANGED
|
@@ -17,8 +17,8 @@ import { Button } from 'easyv-biz-components'
|
|
|
17
17
|
**_在你项目的入口文件引入下面两个样式_**
|
|
18
18
|
|
|
19
19
|
```
|
|
20
|
-
import '@easyv/biz-components/dist/
|
|
21
|
-
import '@easyv/biz-components/dist/style.css';
|
|
20
|
+
import '@easyv/biz-components/dist/tailwindcss.pkg.css';
|
|
21
|
+
import '@easyv/biz-components/dist/style.pkg.css';
|
|
22
22
|
```
|
|
23
23
|
|
|
24
24
|
## 按需加载
|
|
@@ -1,12 +1,10 @@
|
|
|
1
1
|
import { j as jsxRuntimeExports } from "../../node_modules/.pnpm/react@18.2.0/node_modules/react/jsx-runtime.es.js";
|
|
2
|
-
import { useRef
|
|
2
|
+
import { useRef } from "react";
|
|
3
3
|
import useMemoizedFn from "../../node_modules/.pnpm/ahooks@3.8.5_react@18.2.0/node_modules/ahooks/es/useMemoizedFn/index.es.js";
|
|
4
|
-
import useMount from "../../node_modules/.pnpm/ahooks@3.8.5_react@18.2.0/node_modules/ahooks/es/useMount/index.es.js";
|
|
5
|
-
import useUnmount from "../../node_modules/.pnpm/ahooks@3.8.5_react@18.2.0/node_modules/ahooks/es/useUnmount/index.es.js";
|
|
6
4
|
import classNames from "../../node_modules/.pnpm/classnames@2.5.1/node_modules/classnames/index.es.js";
|
|
5
|
+
import { useInitialized } from "../../hooks/use-initialized.es.js";
|
|
7
6
|
import { useWatchValue } from "../../hooks/use-watch-value/use-watch-value.es.js";
|
|
8
7
|
function EasyvMonacoEditor(props) {
|
|
9
|
-
var _a;
|
|
10
8
|
const {
|
|
11
9
|
className,
|
|
12
10
|
style,
|
|
@@ -15,7 +13,13 @@ function EasyvMonacoEditor(props) {
|
|
|
15
13
|
monacoEditorOptions,
|
|
16
14
|
globalVarType = "",
|
|
17
15
|
monacoSpace,
|
|
18
|
-
onChange
|
|
16
|
+
onChange,
|
|
17
|
+
onCodeMark,
|
|
18
|
+
onBlur,
|
|
19
|
+
ignoreErrorCodes,
|
|
20
|
+
initJSCompilerOptions,
|
|
21
|
+
constructionOptions,
|
|
22
|
+
customTheme
|
|
19
23
|
} = props;
|
|
20
24
|
const editorRef = useRef(null);
|
|
21
25
|
const editorInstanceRef = useRef();
|
|
@@ -30,18 +34,19 @@ function EasyvMonacoEditor(props) {
|
|
|
30
34
|
noLib: false,
|
|
31
35
|
lib: ["esnext", "dom"],
|
|
32
36
|
// dom 会带上浏览器里可使用的方法 如 console, window
|
|
33
|
-
typeRoots: ["node_modules/@types"]
|
|
37
|
+
typeRoots: ["node_modules/@types"],
|
|
38
|
+
...initJSCompilerOptions
|
|
34
39
|
});
|
|
35
40
|
monacoSpace.languages.typescript.javascriptDefaults.setDiagnosticsOptions({
|
|
36
41
|
noSemanticValidation: false,
|
|
37
42
|
// 启用语义校验
|
|
38
43
|
noSyntaxValidation: false,
|
|
39
44
|
// 启用语法校验
|
|
40
|
-
diagnosticCodesToIgnore: []
|
|
45
|
+
diagnosticCodesToIgnore: ignoreErrorCodes ?? []
|
|
41
46
|
// 忽略特定错误
|
|
42
47
|
});
|
|
43
48
|
if (editorRef.current) {
|
|
44
|
-
|
|
49
|
+
editorInstanceRef.current = monacoSpace.editor.create(editorRef.current, {
|
|
45
50
|
value: code,
|
|
46
51
|
language: languageMode,
|
|
47
52
|
theme: "vs-dark",
|
|
@@ -52,72 +57,75 @@ function EasyvMonacoEditor(props) {
|
|
|
52
57
|
// 启用智能提示的关键设置
|
|
53
58
|
suggest: {
|
|
54
59
|
showKeywords: true,
|
|
60
|
+
// 关键字建议
|
|
55
61
|
showSnippets: true
|
|
62
|
+
// 代码片段建议
|
|
56
63
|
},
|
|
57
64
|
quickSuggestions: true,
|
|
65
|
+
// 在输入时自动显示建议列表
|
|
58
66
|
suggestOnTriggerCharacters: true,
|
|
67
|
+
// 当输入触发字符(如点号.)时自动显示建议
|
|
59
68
|
hover: { enabled: true },
|
|
60
69
|
// 必须启用 hover
|
|
61
|
-
renderValidationDecorations: "on"
|
|
70
|
+
renderValidationDecorations: "on",
|
|
62
71
|
// 确保错误渲染开启
|
|
72
|
+
...constructionOptions
|
|
63
73
|
});
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
"%c 🐱 cat ==== on did change model content:",
|
|
70
|
-
"color: orange; font-size: 16px;",
|
|
71
|
-
currentValue
|
|
72
|
-
);
|
|
74
|
+
if (!editorInstanceRef.current) {
|
|
75
|
+
return;
|
|
76
|
+
}
|
|
77
|
+
editorInstanceRef.current.onDidChangeModelContent(() => {
|
|
78
|
+
const currentValue = editorInstanceRef.current.getValue();
|
|
73
79
|
onChange == null ? void 0 : onChange(currentValue);
|
|
74
80
|
});
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
console.log("当前错误 ==== :", markers);
|
|
79
|
-
});
|
|
80
|
-
console.log("disposable: ====", disposable);
|
|
81
|
-
monacoSpace.editor.onDidChangeMarkers(() => {
|
|
82
|
-
const markers = monacoSpace.editor.getModelMarkers({});
|
|
83
|
-
markers.forEach((m) => {
|
|
84
|
-
console.log("🔍 Marker:", m.message, m.severity);
|
|
81
|
+
monacoSpace.editor.onDidChangeMarkers(() => {
|
|
82
|
+
const markers = monacoSpace.editor.getModelMarkers({});
|
|
83
|
+
onCodeMark == null ? void 0 : onCodeMark(markers);
|
|
85
84
|
});
|
|
85
|
+
}
|
|
86
|
+
const disposable = editorInstanceRef.current.onDidBlurEditorText(() => {
|
|
87
|
+
const currentValue = editorInstanceRef.current.getValue();
|
|
88
|
+
onBlur == null ? void 0 : onBlur(currentValue);
|
|
86
89
|
});
|
|
90
|
+
return () => {
|
|
91
|
+
var _a;
|
|
92
|
+
disposable.dispose();
|
|
93
|
+
(_a = editorInstanceRef.current) == null ? void 0 : _a.dispose();
|
|
94
|
+
};
|
|
87
95
|
});
|
|
88
|
-
|
|
89
|
-
|
|
90
|
-
|
|
91
|
-
(
|
|
92
|
-
|
|
93
|
-
|
|
94
|
-
|
|
95
|
-
|
|
96
|
-
|
|
97
|
-
editorInstanceRef.current.setValue(code);
|
|
96
|
+
useInitialized(initFn);
|
|
97
|
+
useWatchValue({
|
|
98
|
+
value: code,
|
|
99
|
+
callback: () => {
|
|
100
|
+
if (editorInstanceRef.current) {
|
|
101
|
+
const currentValue = editorInstanceRef.current.getValue();
|
|
102
|
+
if (currentValue !== code) {
|
|
103
|
+
editorInstanceRef.current.setValue(code);
|
|
104
|
+
}
|
|
98
105
|
}
|
|
99
106
|
}
|
|
100
|
-
}
|
|
107
|
+
});
|
|
101
108
|
useWatchValue({
|
|
102
109
|
value: languageMode,
|
|
103
110
|
callback(newLanguage) {
|
|
104
|
-
var
|
|
105
|
-
const
|
|
106
|
-
if (!
|
|
111
|
+
var _a;
|
|
112
|
+
const model = (_a = editorInstanceRef.current) == null ? void 0 : _a.getModel();
|
|
113
|
+
if (!model) {
|
|
107
114
|
return;
|
|
108
115
|
}
|
|
109
|
-
monacoSpace.editor.setModelLanguage(
|
|
116
|
+
monacoSpace.editor.setModelLanguage(model, newLanguage);
|
|
110
117
|
}
|
|
111
118
|
});
|
|
112
119
|
useWatchValue({
|
|
113
120
|
value: monacoEditorOptions,
|
|
114
121
|
callback: () => {
|
|
115
|
-
var
|
|
122
|
+
var _a;
|
|
116
123
|
if (!monacoEditorOptions) {
|
|
117
124
|
return;
|
|
118
125
|
}
|
|
119
|
-
(
|
|
120
|
-
}
|
|
126
|
+
(_a = editorInstanceRef.current) == null ? void 0 : _a.updateOptions(monacoEditorOptions);
|
|
127
|
+
},
|
|
128
|
+
options: { immediate: true }
|
|
121
129
|
});
|
|
122
130
|
useWatchValue({
|
|
123
131
|
value: globalVarType,
|
|
@@ -129,12 +137,24 @@ function EasyvMonacoEditor(props) {
|
|
|
129
137
|
globalVarType,
|
|
130
138
|
"global-data.d.ts"
|
|
131
139
|
);
|
|
140
|
+
},
|
|
141
|
+
options: {
|
|
142
|
+
immediate: true
|
|
132
143
|
}
|
|
133
144
|
});
|
|
134
|
-
|
|
135
|
-
|
|
136
|
-
|
|
137
|
-
|
|
145
|
+
useWatchValue({
|
|
146
|
+
value: customTheme,
|
|
147
|
+
callback() {
|
|
148
|
+
if (!customTheme) {
|
|
149
|
+
return;
|
|
150
|
+
}
|
|
151
|
+
const themeName = "customTheme";
|
|
152
|
+
monacoSpace.editor.defineTheme(themeName, customTheme);
|
|
153
|
+
monacoSpace.editor.setTheme(themeName);
|
|
154
|
+
},
|
|
155
|
+
options: {
|
|
156
|
+
immediate: true
|
|
157
|
+
}
|
|
138
158
|
});
|
|
139
159
|
return /* @__PURE__ */ jsxRuntimeExports.jsx("div", { ref: editorRef, className: classNames("biz-min-h-[200px]", className), style });
|
|
140
160
|
}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"easyv-monaco-editor.es.js","sources":["../../../src/components/easyv-monaco-editor/easyv-monaco-editor.tsx"],"sourcesContent":["import React, {
|
|
1
|
+
{"version":3,"file":"easyv-monaco-editor.es.js","sources":["../../../src/components/easyv-monaco-editor/easyv-monaco-editor.tsx"],"sourcesContent":["import React, { useRef } from 'react';\nimport { useMemoizedFn } from 'ahooks';\nimport classNames from 'classnames';\nimport type * as monaco from 'monaco-editor/esm/vs/editor/editor.api';\nimport { useInitialized, useWatchValue } from '@/hooks';\nimport { EasyvMonacoEditorProps } from './types';\n\nexport function EasyvMonacoEditor(props: EasyvMonacoEditorProps) {\n const {\n className,\n style,\n languageMode,\n code,\n monacoEditorOptions,\n globalVarType = '',\n monacoSpace,\n onChange,\n onCodeMark,\n onBlur,\n ignoreErrorCodes,\n initJSCompilerOptions,\n constructionOptions,\n customTheme,\n } = props;\n const editorRef = useRef<HTMLDivElement | null>(null);\n const editorInstanceRef = useRef<monaco.editor.IStandaloneCodeEditor>();\n const globalDataLibRef = useRef<monaco.IDisposable>();\n\n const initFn = useMemoizedFn(() => {\n // 配置 JavaScript 语言服务\n monacoSpace.languages.typescript.javascriptDefaults.setCompilerOptions({\n target: monacoSpace.languages.typescript.ScriptTarget.ESNext,\n allowNonTsExtensions: true,\n allowJs: true,\n checkJs: true, // 关键：启用 JS 校验\n noLib: false,\n lib: ['esnext', 'dom'], // dom 会带上浏览器里可使用的方法 如 console, window\n typeRoots: ['node_modules/@types'],\n ...initJSCompilerOptions,\n });\n\n monacoSpace.languages.typescript.javascriptDefaults.setDiagnosticsOptions({\n noSemanticValidation: false, // 启用语义校验\n noSyntaxValidation: false, // 启用语法校验\n diagnosticCodesToIgnore: ignoreErrorCodes ?? [], // 忽略特定错误\n });\n\n if (editorRef.current) {\n editorInstanceRef.current = monacoSpace.editor.create(editorRef.current, {\n value: code,\n language: languageMode,\n theme: 'vs-dark',\n automaticLayout: true,\n minimap: {\n enabled: false,\n },\n // 启用智能提示的关键设置\n suggest: {\n showKeywords: true, // 关键字建议\n showSnippets: true, // 代码片段建议\n },\n quickSuggestions: true, // 在输入时自动显示建议列表\n suggestOnTriggerCharacters: true, // 当输入触发字符(如点号.)时自动显示建议\n hover: { enabled: true }, // 必须启用 hover\n renderValidationDecorations: 'on', // 确保错误渲染开启\n ...constructionOptions,\n });\n if (!editorInstanceRef.current) {\n return;\n }\n editorInstanceRef.current.onDidChangeModelContent(() => {\n const currentValue = editorInstanceRef.current!.getValue();\n // 更新状态\n onChange?.(currentValue);\n });\n\n // 监听诊断变化\n monacoSpace.editor.onDidChangeMarkers(() => {\n const markers = monacoSpace.editor.getModelMarkers({});\n onCodeMark?.(markers);\n });\n }\n // 添加失焦事件监听\n const disposable = editorInstanceRef.current!.onDidBlurEditorText(() => {\n const currentValue = editorInstanceRef.current!.getValue();\n onBlur?.(currentValue);\n });\n return () => {\n disposable.dispose();\n editorInstanceRef.current?.dispose();\n };\n });\n\n useInitialized(initFn);\n\n useWatchValue({\n value: code,\n callback: () => {\n if (editorInstanceRef.current) {\n // 获取当前编辑器的值\n const currentValue = editorInstanceRef.current.getValue();\n // 如果状态中的value和编辑器的当前值不同，则更新编辑器\n if (currentValue !== code) {\n editorInstanceRef.current.setValue(code);\n }\n }\n },\n });\n\n useWatchValue({\n value: languageMode,\n callback(newLanguage) {\n const model = editorInstanceRef.current?.getModel();\n if (!model) {\n return;\n }\n monacoSpace.editor.setModelLanguage(model, newLanguage);\n },\n });\n\n useWatchValue({\n value: monacoEditorOptions,\n callback: () => {\n if (!monacoEditorOptions) {\n return;\n }\n editorInstanceRef.current?.updateOptions(monacoEditorOptions);\n },\n options: { immediate: true },\n });\n\n useWatchValue({\n value: globalVarType,\n callback() {\n if (globalDataLibRef.current) {\n globalDataLibRef.current.dispose();\n }\n globalDataLibRef.current = monacoSpace.languages.typescript.javascriptDefaults.addExtraLib(\n globalVarType,\n 'global-data.d.ts',\n );\n },\n options: {\n immediate: true,\n },\n });\n\n useWatchValue({\n value: customTheme,\n callback() {\n if (!customTheme) {\n return;\n }\n const themeName = 'customTheme';\n monacoSpace.editor.defineTheme(themeName, customTheme);\n monacoSpace.editor.setTheme(themeName);\n },\n options: {\n immediate: true,\n },\n });\n\n return (\n <div ref={editorRef} className={classNames('biz-min-h-[200px]', className)} style={style} />\n );\n}\n"],"names":["jsx"],"mappings":"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"}
|
|
@@ -13,7 +13,6 @@ export interface EasyvMonacoEditorProps {
|
|
|
13
13
|
- renderWhitespace: 空白字符显示
|
|
14
14
|
- tabSize: 制表符大小
|
|
15
15
|
*/
|
|
16
|
-
monacoEditorOptions?: monaco.editor.IEditorOptions & monaco.editor.IGlobalEditorOptions;
|
|
17
16
|
code: string;
|
|
18
17
|
onChange?: (v: string) => void;
|
|
19
18
|
/** 定义 monaco-editor 的类型文件。如：
|
|
@@ -32,6 +31,7 @@ export interface EasyvMonacoEditorProps {
|
|
|
32
31
|
* 传入你从 monaco-editor 导入的 monaco。
|
|
33
32
|
* - vite 项目中的 按需导入可以参见如下方式， webpack 项目注意 worker 的导入方式和处理方式：
|
|
34
33
|
* ```ts
|
|
34
|
+
* // vite 项目
|
|
35
35
|
import type * as monaco from 'monaco-editor/esm/vs/editor/editor.api';
|
|
36
36
|
import 'monaco-editor/esm/vs/editor/editor.all.js';
|
|
37
37
|
import 'monaco-editor/esm/vs/language/json/monaco.contribution';
|
|
@@ -55,6 +55,27 @@ export interface EasyvMonacoEditorProps {
|
|
|
55
55
|
},
|
|
56
56
|
};
|
|
57
57
|
```
|
|
58
|
+
- webpack 项目中，推荐使用 monaco-editor-webpack-plugin
|
|
59
|
+
```ts
|
|
60
|
+
const MonacoWebpackPlugin = require('monaco-editor-webpack-plugin');
|
|
61
|
+
|
|
62
|
+
plugins: [
|
|
63
|
+
new MonacoWebpackPlugin({
|
|
64
|
+
languages: ['json', 'javascript', 'typescript'],
|
|
65
|
+
}),
|
|
66
|
+
],
|
|
67
|
+
```
|
|
58
68
|
*/
|
|
59
69
|
monacoSpace: typeof monaco;
|
|
70
|
+
/** monaco 对代码检查时的错误或者警告等等。 */
|
|
71
|
+
onCodeMark?: (errors: monaco.editor.IMarker[]) => void;
|
|
72
|
+
onBlur?: (code: string) => void;
|
|
73
|
+
/** 校验时，要忽略的错误码。 只在初始化生效 */
|
|
74
|
+
ignoreErrorCodes?: number[];
|
|
75
|
+
/** 初始化时，对 ts/js 语言的编译选项，具体选项可查看类型 */
|
|
76
|
+
initJSCompilerOptions?: monaco.languages.typescript.CompilerOptions;
|
|
77
|
+
/** 新建 monaco-editor 时，传入的配置选项，具体选项可查看类型, 大部分的配置 可以通过传递 monacoEditorOptions 来更新 */
|
|
78
|
+
constructionOptions?: Parameters<typeof monaco.editor.create>[1];
|
|
79
|
+
monacoEditorOptions?: monaco.editor.IEditorOptions & monaco.editor.IGlobalEditorOptions;
|
|
80
|
+
customTheme?: monaco.editor.IStandaloneThemeData;
|
|
60
81
|
}
|
|
@@ -1,5 +1,7 @@
|
|
|
1
|
+
type FunctionType = () => void;
|
|
1
2
|
/** 传入的函数只会初始化运行一次
|
|
2
|
-
* @param fn
|
|
3
|
+
* @param fn 初始化函数， fn 返回的如果是一个函数，会在卸载时运行。
|
|
3
4
|
* @returns initialized 是否初始化，boolean 值是一个 react state，会触发重新渲染
|
|
4
5
|
*/
|
|
5
|
-
export declare function useInitialized(fn: () => void
|
|
6
|
+
export declare function useInitialized(fn: () => void | FunctionType): boolean;
|
|
7
|
+
export {};
|
|
@@ -1,19 +1,18 @@
|
|
|
1
1
|
import { useState, useRef, useEffect } from "react";
|
|
2
|
-
function useInitialized(fn
|
|
2
|
+
function useInitialized(fn) {
|
|
3
3
|
const [initialized, setInitialized] = useState(false);
|
|
4
4
|
const initializedRef = useRef(false);
|
|
5
5
|
const updateFnRef = useRef(fn);
|
|
6
|
-
const cleanFnRef = useRef(
|
|
6
|
+
const cleanFnRef = useRef();
|
|
7
7
|
updateFnRef.current = fn;
|
|
8
|
-
cleanFnRef.current = cleanFn;
|
|
9
8
|
useEffect(() => {
|
|
10
9
|
if (!initializedRef.current) {
|
|
11
|
-
updateFnRef.current();
|
|
10
|
+
cleanFnRef.current = updateFnRef.current();
|
|
12
11
|
setInitialized(true);
|
|
13
12
|
initializedRef.current = true;
|
|
14
13
|
}
|
|
15
14
|
return () => {
|
|
16
|
-
if (cleanFnRef.current) {
|
|
15
|
+
if (typeof cleanFnRef.current === "function") {
|
|
17
16
|
cleanFnRef.current();
|
|
18
17
|
}
|
|
19
18
|
};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"use-initialized.es.js","sources":["../../src/hooks/use-initialized.ts"],"sourcesContent":["import { useEffect, useRef, useState } from 'react';\n\n/** 传入的函数只会初始化运行一次\n * @param fn
|
|
1
|
+
{"version":3,"file":"use-initialized.es.js","sources":["../../src/hooks/use-initialized.ts"],"sourcesContent":["import { useEffect, useRef, useState } from 'react';\n\ntype FunctionType = () => void;\n/** 传入的函数只会初始化运行一次\n * @param fn 初始化函数， fn 返回的如果是一个函数，会在卸载时运行。\n * @returns initialized 是否初始化，boolean 值是一个 react state，会触发重新渲染\n */\nexport function useInitialized(fn: () => void | FunctionType) {\n const [initialized, setInitialized] = useState(false);\n const initializedRef = useRef(false);\n const updateFnRef = useRef(fn);\n const cleanFnRef = useRef<FunctionType | void>();\n updateFnRef.current = fn;\n\n useEffect(() => {\n if (!initializedRef.current) {\n cleanFnRef.current = updateFnRef.current();\n setInitialized(true);\n initializedRef.current = true;\n }\n return () => {\n if (typeof cleanFnRef.current === 'function') {\n cleanFnRef.current();\n }\n };\n }, []);\n\n return initialized;\n}\n"],"names":[],"mappings":";AAOO,SAAS,eAAe,IAA+B;AAC5D,QAAM,CAAC,aAAa,cAAc,IAAI,SAAS,KAAK;AAC9C,QAAA,iBAAiB,OAAO,KAAK;AAC7B,QAAA,cAAc,OAAO,EAAE;AAC7B,QAAM,aAAa,OAA4B;AAC/C,cAAY,UAAU;AAEtB,YAAU,MAAM;AACV,QAAA,CAAC,eAAe,SAAS;AAChB,iBAAA,UAAU,YAAY,QAAQ;AACzC,qBAAe,IAAI;AACnB,qBAAe,UAAU;AAAA,IAAA;AAE3B,WAAO,MAAM;AACP,UAAA,OAAO,WAAW,YAAY,YAAY;AAC5C,mBAAW,QAAQ;AAAA,MAAA;AAAA,IAEvB;AAAA,EACF,GAAG,EAAE;AAEE,SAAA;AACT;"}
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import { getDefaultExportFromCjs } from "../../../../../_virtual/_commonjsHelpers.es.js";
|
|
2
|
-
import { __module as classnames$1 } from "../../../../../_virtual/index.
|
|
2
|
+
import { __module as classnames$1 } from "../../../../../_virtual/index.es3.js";
|
|
3
3
|
/*!
|
|
4
4
|
Copyright (c) 2018 Jed Watson.
|
|
5
5
|
Licensed under the MIT License (MIT), see
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import { getDefaultExportFromCjs } from "../../../../../_virtual/_commonjsHelpers.es.js";
|
|
2
|
-
import { __module as coWebWorker } from "../../../../../_virtual/index.
|
|
2
|
+
import { __module as coWebWorker } from "../../../../../_virtual/index.es4.js";
|
|
3
3
|
class CrossOriginWorker extends Worker {
|
|
4
4
|
constructor(scriptUrl) {
|
|
5
5
|
const b = new Blob([`importScripts('${new URL(scriptUrl).toString()}')`], { type: "application/javascript" });
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import { getDefaultExportFromCjs } from "../../../../../_virtual/_commonjsHelpers.es.js";
|
|
2
|
-
import { __module as propTypes } from "../../../../../_virtual/index.
|
|
2
|
+
import { __module as propTypes } from "../../../../../_virtual/index.es2.js";
|
|
3
3
|
import { __require as requireReactIs } from "../../../react-is@16.13.1/node_modules/react-is/index.es.js";
|
|
4
4
|
import { __require as requireFactoryWithTypeCheckers } from "./factoryWithTypeCheckers.es.js";
|
|
5
5
|
import { __require as requireFactoryWithThrowingShims } from "./factoryWithThrowingShims.es.js";
|