@easyv/biz-components 0.0.53 → 0.0.54
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/components/easyv-monaco-editor/easyv-monaco-editor.es.js +11 -11
- package/dist/components/easyv-monaco-editor/easyv-monaco-editor.es.js.map +1 -1
- package/dist/components/easyv-monaco-editor/types.d.ts +2 -2
- package/dist/hooks/use-watch-value/use-watch-value.es.js +1 -1
- package/dist/hooks/use-watch-value/use-watch-value.es.js.map +1 -1
- package/dist/stats.html +1 -1
- package/package.json +1 -1
|
@@ -12,7 +12,7 @@ function EasyvMonacoEditor(props) {
|
|
|
12
12
|
code,
|
|
13
13
|
monacoEditorOptions,
|
|
14
14
|
globalVarType = "",
|
|
15
|
-
|
|
15
|
+
monaco,
|
|
16
16
|
onChange,
|
|
17
17
|
onCodeMark,
|
|
18
18
|
onBlur,
|
|
@@ -25,8 +25,8 @@ function EasyvMonacoEditor(props) {
|
|
|
25
25
|
const editorInstanceRef = useRef();
|
|
26
26
|
const globalDataLibRef = useRef();
|
|
27
27
|
const initFn = useMemoizedFn(() => {
|
|
28
|
-
|
|
29
|
-
target:
|
|
28
|
+
monaco.languages.typescript.javascriptDefaults.setCompilerOptions({
|
|
29
|
+
target: monaco.languages.typescript.ScriptTarget.ESNext,
|
|
30
30
|
allowNonTsExtensions: true,
|
|
31
31
|
allowJs: true,
|
|
32
32
|
checkJs: true,
|
|
@@ -37,7 +37,7 @@ function EasyvMonacoEditor(props) {
|
|
|
37
37
|
typeRoots: ["node_modules/@types"],
|
|
38
38
|
...initJSCompilerOptions
|
|
39
39
|
});
|
|
40
|
-
|
|
40
|
+
monaco.languages.typescript.javascriptDefaults.setDiagnosticsOptions({
|
|
41
41
|
noSemanticValidation: false,
|
|
42
42
|
// 启用语义校验
|
|
43
43
|
noSyntaxValidation: false,
|
|
@@ -46,7 +46,7 @@ function EasyvMonacoEditor(props) {
|
|
|
46
46
|
// 忽略特定错误
|
|
47
47
|
});
|
|
48
48
|
if (editorRef.current) {
|
|
49
|
-
editorInstanceRef.current =
|
|
49
|
+
editorInstanceRef.current = monaco.editor.create(editorRef.current, {
|
|
50
50
|
value: code,
|
|
51
51
|
language: languageMode,
|
|
52
52
|
theme: "vs-dark",
|
|
@@ -78,8 +78,8 @@ function EasyvMonacoEditor(props) {
|
|
|
78
78
|
const currentValue = editorInstanceRef.current.getValue();
|
|
79
79
|
onChange == null ? void 0 : onChange(currentValue);
|
|
80
80
|
});
|
|
81
|
-
|
|
82
|
-
const markers =
|
|
81
|
+
monaco.editor.onDidChangeMarkers(() => {
|
|
82
|
+
const markers = monaco.editor.getModelMarkers({});
|
|
83
83
|
onCodeMark == null ? void 0 : onCodeMark(markers);
|
|
84
84
|
});
|
|
85
85
|
}
|
|
@@ -113,7 +113,7 @@ function EasyvMonacoEditor(props) {
|
|
|
113
113
|
if (!model) {
|
|
114
114
|
return;
|
|
115
115
|
}
|
|
116
|
-
|
|
116
|
+
monaco.editor.setModelLanguage(model, newLanguage);
|
|
117
117
|
}
|
|
118
118
|
});
|
|
119
119
|
useWatchValue({
|
|
@@ -133,7 +133,7 @@ function EasyvMonacoEditor(props) {
|
|
|
133
133
|
if (globalDataLibRef.current) {
|
|
134
134
|
globalDataLibRef.current.dispose();
|
|
135
135
|
}
|
|
136
|
-
globalDataLibRef.current =
|
|
136
|
+
globalDataLibRef.current = monaco.languages.typescript.javascriptDefaults.addExtraLib(
|
|
137
137
|
globalVarType,
|
|
138
138
|
"global-data.d.ts"
|
|
139
139
|
);
|
|
@@ -149,8 +149,8 @@ function EasyvMonacoEditor(props) {
|
|
|
149
149
|
return;
|
|
150
150
|
}
|
|
151
151
|
const themeName = "customTheme";
|
|
152
|
-
|
|
153
|
-
|
|
152
|
+
monaco.editor.defineTheme(themeName, customTheme);
|
|
153
|
+
monaco.editor.setTheme(themeName);
|
|
154
154
|
},
|
|
155
155
|
options: {
|
|
156
156
|
immediate: true
|
|
@@ -1 +1 @@
|
|
|
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
|
|
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 monacoType 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 monaco,\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<monacoType.editor.IStandaloneCodeEditor>();\n const globalDataLibRef = useRef<monacoType.IDisposable>();\n\n const initFn = useMemoizedFn(() => {\n // 配置 JavaScript 语言服务\n monaco.languages.typescript.javascriptDefaults.setCompilerOptions({\n target: monaco.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 monaco.languages.typescript.javascriptDefaults.setDiagnosticsOptions({\n noSemanticValidation: false, // 启用语义校验\n noSyntaxValidation: false, // 启用语法校验\n diagnosticCodesToIgnore: ignoreErrorCodes ?? [], // 忽略特定错误\n });\n\n if (editorRef.current) {\n editorInstanceRef.current = monaco.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 monaco.editor.onDidChangeMarkers(() => {\n const markers = monaco.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 monaco.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 = monaco.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 monaco.editor.defineTheme(themeName, customTheme);\n monaco.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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"}
|
|
@@ -2,7 +2,7 @@ import type * as monaco from 'monaco-editor/esm/vs/editor/editor.api';
|
|
|
2
2
|
export interface EasyvMonacoEditorProps {
|
|
3
3
|
className?: string;
|
|
4
4
|
style?: React.CSSProperties;
|
|
5
|
-
languageMode: 'javascript' | 'json';
|
|
5
|
+
languageMode: 'javascript' | 'json' | 'sql';
|
|
6
6
|
/** 编辑器配置项
|
|
7
7
|
- theme: 主题名称 ('vs', 'vs-dark', 'hc-black' 或自定义主题)
|
|
8
8
|
- fontSize: 字体大小
|
|
@@ -66,7 +66,7 @@ export interface EasyvMonacoEditorProps {
|
|
|
66
66
|
],
|
|
67
67
|
```
|
|
68
68
|
*/
|
|
69
|
-
|
|
69
|
+
monaco: typeof monaco;
|
|
70
70
|
/** monaco 对代码检查时的错误或者警告等等。 */
|
|
71
71
|
onCodeMark?: (errors: monaco.editor.IMarker[]) => void;
|
|
72
72
|
onBlur?: (code: string) => void;
|
|
@@ -5,7 +5,7 @@ function useWatchValue(params) {
|
|
|
5
5
|
const { value, callback, options } = params;
|
|
6
6
|
const ref = useRef(initValue);
|
|
7
7
|
const initialRef = useRef(false);
|
|
8
|
-
const { equalFn = isEqual, immediate } = options || {};
|
|
8
|
+
const { equalFn = isEqual, immediate = true } = options || {};
|
|
9
9
|
const fnObj = useRef({
|
|
10
10
|
callback,
|
|
11
11
|
equalFn,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"use-watch-value.es.js","sources":["../../../src/hooks/use-watch-value/use-watch-value.ts"],"sourcesContent":["import { useEffect, useRef } from 'react';\nimport { isEqual } from 'lodash-es';\n\ntype BaseValueType = string | number | boolean | object | Array<unknown> | null | undefined;\n\nconst initValue = Symbol('initValue');\n\ninterface Params<T> {\n value: T;\n callback: (newValue: T, oldValue?: T) => void | Promise<void> | (() => void);\n options?: {\n equalFn?: (value1: T, value2: T) => boolean;\n immediate?: boolean;\n };\n}\n/**监听值变化，\n * 值变化时调用 callback\n * 判断值是否变化默认使用 lodash 的 isEqual\n * @param params { value: T; callback: (newValue: T, oldValue?: T) => void | Promise<void>; options?: { equalFn: (value1: T, value2: T) => boolean; immediate?: boolean; } }\n */\nexport function useWatchValue<T extends BaseValueType>(params: Params<T>) {\n const { value, callback, options } = params;\n const ref = useRef<T | typeof initValue>(initValue);\n const initialRef = useRef(false);\n\n const { equalFn = isEqual, immediate } = options || {};\n\n const fnObj = useRef({\n callback,\n equalFn,\n immediate,\n });\n fnObj.current = {\n callback,\n equalFn,\n immediate,\n };\n\n useEffect(() => {\n const {\n callback: callbackInner,\n equalFn: equalFnInner,\n immediate: immediateInner,\n } = fnObj.current;\n if (immediateInner && !initialRef.current) {\n callbackInner(value, value);\n initialRef.current = true;\n }\n\n if (ref.current === initValue) {\n ref.current = value;\n } else if (equalFnInner(value, ref.current) === false) {\n callbackInner(value, ref.current as T);\n ref.current = value;\n }\n }, [value]);\n}\n"],"names":[],"mappings":";;AAKA,MAAM,YAAY,OAAO,WAAW;AAe7B,SAAS,cAAuC,QAAmB;AACxE,QAAM,EAAE,OAAO,UAAU,QAAY,IAAA;AAC/B,QAAA,MAAM,OAA6B,SAAS;AAC5C,QAAA,aAAa,OAAO,KAAK;AAE/B,QAAM,EAAE,UAAU,SAAS,
|
|
1
|
+
{"version":3,"file":"use-watch-value.es.js","sources":["../../../src/hooks/use-watch-value/use-watch-value.ts"],"sourcesContent":["import { useEffect, useRef } from 'react';\nimport { isEqual } from 'lodash-es';\n\ntype BaseValueType = string | number | boolean | object | Array<unknown> | null | undefined;\n\nconst initValue = Symbol('initValue');\n\ninterface Params<T> {\n value: T;\n callback: (newValue: T, oldValue?: T) => void | Promise<void> | (() => void);\n options?: {\n equalFn?: (value1: T, value2: T) => boolean;\n immediate?: boolean;\n };\n}\n/**监听值变化，\n * 值变化时调用 callback\n * 判断值是否变化默认使用 lodash 的 isEqual\n * @param params { value: T; callback: (newValue: T, oldValue?: T) => void | Promise<void>; options?: { equalFn: (value1: T, value2: T) => boolean; immediate?: boolean; } }\n */\nexport function useWatchValue<T extends BaseValueType>(params: Params<T>) {\n const { value, callback, options } = params;\n const ref = useRef<T | typeof initValue>(initValue);\n const initialRef = useRef(false);\n\n const { equalFn = isEqual, immediate = true } = options || {};\n\n const fnObj = useRef({\n callback,\n equalFn,\n immediate,\n });\n fnObj.current = {\n callback,\n equalFn,\n immediate,\n };\n\n useEffect(() => {\n const {\n callback: callbackInner,\n equalFn: equalFnInner,\n immediate: immediateInner,\n } = fnObj.current;\n if (immediateInner && !initialRef.current) {\n callbackInner(value, value);\n initialRef.current = true;\n }\n\n if (ref.current === initValue) {\n ref.current = value;\n } else if (equalFnInner(value, ref.current) === false) {\n callbackInner(value, ref.current as T);\n ref.current = value;\n }\n }, [value]);\n}\n"],"names":[],"mappings":";;AAKA,MAAM,YAAY,OAAO,WAAW;AAe7B,SAAS,cAAuC,QAAmB;AACxE,QAAM,EAAE,OAAO,UAAU,QAAY,IAAA;AAC/B,QAAA,MAAM,OAA6B,SAAS;AAC5C,QAAA,aAAa,OAAO,KAAK;AAE/B,QAAM,EAAE,UAAU,SAAS,YAAY,KAAK,IAAI,WAAW,CAAC;AAE5D,QAAM,QAAQ,OAAO;AAAA,IACnB;AAAA,IACA;AAAA,IACA;AAAA,EAAA,CACD;AACD,QAAM,UAAU;AAAA,IACd;AAAA,IACA;AAAA,IACA;AAAA,EACF;AAEA,YAAU,MAAM;AACR,UAAA;AAAA,MACJ,UAAU;AAAA,MACV,SAAS;AAAA,MACT,WAAW;AAAA,QACT,MAAM;AACN,QAAA,kBAAkB,CAAC,WAAW,SAAS;AACzC,oBAAc,OAAO,KAAK;AAC1B,iBAAW,UAAU;AAAA,IAAA;AAGnB,QAAA,IAAI,YAAY,WAAW;AAC7B,UAAI,UAAU;AAAA,IAAA,WACL,aAAa,OAAO,IAAI,OAAO,MAAM,OAAO;AACvC,oBAAA,OAAO,IAAI,OAAY;AACrC,UAAI,UAAU;AAAA,IAAA;AAAA,EAChB,GACC,CAAC,KAAK,CAAC;AACZ;"}
|