@easyv/biz-components 1.0.2 → 1.0.5

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 (7) hide show
  1. package/dist/components/easyv-monaco-editor/easyv-monaco-editor.es.js +6 -5
  2. package/dist/components/easyv-monaco-editor/easyv-monaco-editor.es.js.map +1 -1
  3. package/dist/components/easyv-monaco-editor/types.d.ts +2 -4
  4. package/dist/stats.html +1 -1
  5. package/dist/style.pkg.css +1 -1
  6. package/dist/tailwindcss.pkg.css +1 -1
  7. package/package.json +1 -1
package/dist/components/easyv-monaco-editor/easyv-monaco-editor.es.js CHANGED
@@ -3,6 +3,7 @@ import { forwardRef, useRef, useState, useImperativeHandle } from "react";
3
3
  import useLatest from "../../node_modules/.pnpm/ahooks@3.8.5_react@18.2.0/node_modules/ahooks/es/useLatest/index.es.js";
4
4
  import useMemoizedFn from "../../node_modules/.pnpm/ahooks@3.8.5_react@18.2.0/node_modules/ahooks/es/useMemoizedFn/index.es.js";
5
5
  import classNames from "../../node_modules/.pnpm/classnames@2.5.1/node_modules/classnames/index.es.js";
6
+ /* empty css */
6
7
  import { useInitialized } from "../../hooks/use-initialized.es.js";
7
8
  import { useWatchValue } from "../../hooks/use-watch-value/use-watch-value.es.js";
8
9
  function EasyvMonacoEditorCpn(props, ref) {
@@ -25,6 +26,7 @@ function EasyvMonacoEditorCpn(props, ref) {
25
26
  customTheme,
26
27
  onEditorMounted: propsOnEditorMounted,
27
28
  globalVarTypeName = "default",
29
+ isDomEnv = true,
28
30
  onError
29
31
  } = props;
30
32
  const editorRef = useRef(null);
@@ -60,7 +62,7 @@ function EasyvMonacoEditorCpn(props, ref) {
60
62
  checkJs: true,
61
63
  // 关键：启用 JS 校验
62
64
  noLib: false,
63
- lib: ["esnext", "dom"],
65
+ lib: isDomEnv ? ["esnext", "dom"] : ["esnext"],
64
66
  // dom 会带上浏览器里可使用的方法 如 console, window
65
67
  typeRoots: ["node_modules/@types"],
66
68
  ...initJSCompilerOptions
@@ -130,7 +132,6 @@ function EasyvMonacoEditorCpn(props, ref) {
130
132
  (_b = onBlurRef.current) == null ? void 0 : _b.call(onBlurRef, currentValue);
131
133
  }
132
134
  });
133
- addGlobalType();
134
135
  return () => {
135
136
  var _a2, _b;
136
137
  focusDisposable.dispose();
@@ -213,11 +214,11 @@ function EasyvMonacoEditorCpn(props, ref) {
213
214
  immediate: true
214
215
  }
215
216
  });
216
- return /* @__PURE__ */ jsxRuntimeExports.jsx(
217
+ return /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "biz-components-dom", style: { display: "contents" }, children: /* @__PURE__ */ jsxRuntimeExports.jsx(
217
218
  "div",
218
219
  {
219
220
  ref: editorRef,
220
- className: classNames("biz-min-h-[200px]", className),
221
+ className: classNames("easyv-monaco-editor", className),
221
222
  style: {
222
223
  border: "1px solid #393b4a",
223
224
  width: "100%",
@@ -225,7 +226,7 @@ function EasyvMonacoEditorCpn(props, ref) {
225
226
  ...style
226
227
  }
227
228
  }
228
- );
229
+ ) });
229
230
  }
230
231
  const EasyvMonacoEditor = forwardRef(EasyvMonacoEditorCpn);
231
232
  export {
package/dist/components/easyv-monaco-editor/easyv-monaco-editor.es.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"easyv-monaco-editor.es.js","sources":["../../../src/components/easyv-monaco-editor/easyv-monaco-editor.tsx"],"sourcesContent":["import React, { forwardRef, Ref, useImperativeHandle, useRef, useState } from 'react';\nimport { useLatest, 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, EasyvMonacoEditorRef } from './types';\n\nfunction EasyvMonacoEditorCpn(props: EasyvMonacoEditorProps, ref: Ref<EasyvMonacoEditorRef>) {\n const {\n className,\n style,\n languageMode,\n code,\n monacoEditorOptions,\n globalVarType = '',\n monaco,\n onChange: propsOnChange,\n onCodeMark: propsOnCodeMark,\n onFocus: propsOnFocus,\n onBlur: propsOnBlur,\n formatOnBlur,\n ignoreErrorCodes,\n initJSCompilerOptions,\n constructionOptions,\n customTheme,\n onEditorMounted: propsOnEditorMounted,\n globalVarTypeName = 'default',\n onError,\n } = props;\n const editorRef = useRef<HTMLDivElement | null>(null);\n const editorInstanceRef = useRef<monacoType.editor.IStandaloneCodeEditor>();\n const globalDataLibRef = useRef<monacoType.IDisposable>();\n const [isFocus, setIsFocus] = useState(false);\n\n const onChangeRef = useLatest(propsOnChange);\n const onCodeMarkRef = useLatest(propsOnCodeMark);\n const onFocusRef = useLatest(propsOnFocus);\n const onBlurRef = useLatest(propsOnBlur);\n const onEditorMountedRef = useLatest(propsOnEditorMounted);\n\n const formatFn = async () => {\n try {\n await editorInstanceRef.current?.getAction('editor.action.formatDocument')?.run();\n return editorInstanceRef.current?.getValue();\n } catch (error) {\n onError?.(error as Error);\n }\n };\n\n useImperativeHandle(ref, () => {\n return {\n editor: editorInstanceRef.current,\n format: formatFn,\n };\n });\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 onEditorMountedRef.current?.(editorInstanceRef.current);\n editorInstanceRef.current.onDidChangeModelContent(() => {\n const currentValue = editorInstanceRef.current!.getValue();\n // 更新状态\n onChangeRef.current?.(currentValue);\n });\n\n // 监听诊断变化\n monaco.editor.onDidChangeMarkers(() => {\n const markers = monaco.editor.getModelMarkers({});\n onCodeMarkRef.current?.(markers);\n });\n }\n // 添加聚焦焦事件监听\n const focusDisposable = editorInstanceRef.current!.onDidFocusEditorText(() => {\n setIsFocus(true);\n onFocusRef.current?.();\n });\n // 添加失焦事件监听\n const blurDisposable = editorInstanceRef.current!.onDidBlurEditorText(async () => {\n setIsFocus(false);\n if (formatOnBlur) {\n const currentValue = await formatFn();\n onBlurRef.current?.(currentValue || '');\n } else {\n const currentValue = editorInstanceRef.current!.getValue();\n onBlurRef.current?.(currentValue);\n }\n });\n addGlobalType();\n return () => {\n focusDisposable.dispose();\n blurDisposable.dispose();\n editorInstanceRef.current?.dispose();\n globalDataLibRef.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, isFocus },\n callback: () => {\n editorInstanceRef.current?.updateOptions({\n wordWrap: 'on',\n /** 让下面不显示空白区域 */\n scrollBeyondLastLine: false,\n tabSize: 2,\n ...monacoEditorOptions,\n scrollbar: {\n // 默认让聚焦时，内部滚动，失焦时不滚动\n handleMouseWheel: isFocus ? true : false,\n ...monacoEditorOptions?.scrollbar,\n },\n });\n },\n options: { immediate: true },\n });\n\n const addGlobalType = () => {\n if (languageMode !== 'javascript') {\n return;\n }\n globalDataLibRef.current = monaco.languages.typescript.javascriptDefaults.addExtraLib(\n globalVarType,\n `global-${globalVarTypeName}.d.ts`,\n );\n };\n useWatchValue({\n value: globalVarType,\n callback() {\n addGlobalType();\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\n ref={editorRef}\n className={classNames('biz-min-h-[200px]', className)}\n style={{\n border: '1px solid #393b4a',\n width: '100%',\n height: '100%',\n ...style,\n }}\n />\n );\n}\n\nexport const EasyvMonacoEditor = forwardRef(EasyvMonacoEditorCpn);\n"],"names":["_a","jsx"],"mappings":"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"}
1
+ {"version":3,"file":"easyv-monaco-editor.es.js","sources":["../../../src/components/easyv-monaco-editor/easyv-monaco-editor.tsx"],"sourcesContent":["import React, { forwardRef, Ref, useImperativeHandle, useRef, useState } from 'react';\nimport { useLatest, 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, EasyvMonacoEditorRef } from './types';\nimport './index.less';\n\nfunction EasyvMonacoEditorCpn(props: EasyvMonacoEditorProps, ref: Ref<EasyvMonacoEditorRef>) {\n const {\n className,\n style,\n languageMode,\n code,\n monacoEditorOptions,\n globalVarType = '',\n monaco,\n onChange: propsOnChange,\n onCodeMark: propsOnCodeMark,\n onFocus: propsOnFocus,\n onBlur: propsOnBlur,\n formatOnBlur,\n ignoreErrorCodes,\n initJSCompilerOptions,\n constructionOptions,\n customTheme,\n onEditorMounted: propsOnEditorMounted,\n globalVarTypeName = 'default',\n isDomEnv = true,\n onError,\n } = props;\n const editorRef = useRef<HTMLDivElement | null>(null);\n const editorInstanceRef = useRef<monacoType.editor.IStandaloneCodeEditor>();\n const globalDataLibRef = useRef<monacoType.IDisposable>();\n const [isFocus, setIsFocus] = useState(false);\n\n const onChangeRef = useLatest(propsOnChange);\n const onCodeMarkRef = useLatest(propsOnCodeMark);\n const onFocusRef = useLatest(propsOnFocus);\n const onBlurRef = useLatest(propsOnBlur);\n const onEditorMountedRef = useLatest(propsOnEditorMounted);\n\n const formatFn = async () => {\n try {\n await editorInstanceRef.current?.getAction('editor.action.formatDocument')?.run();\n return editorInstanceRef.current?.getValue();\n } catch (error) {\n onError?.(error as Error);\n }\n };\n\n useImperativeHandle(ref, () => {\n return {\n editor: editorInstanceRef.current,\n format: formatFn,\n };\n });\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: isDomEnv ? ['esnext', 'dom'] : ['esnext'], // 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 onEditorMountedRef.current?.(editorInstanceRef.current);\n editorInstanceRef.current.onDidChangeModelContent(() => {\n const currentValue = editorInstanceRef.current!.getValue();\n // 更新状态\n onChangeRef.current?.(currentValue);\n });\n\n // 监听诊断变化\n monaco.editor.onDidChangeMarkers(() => {\n const markers = monaco.editor.getModelMarkers({});\n onCodeMarkRef.current?.(markers);\n });\n }\n // 添加聚焦焦事件监听\n const focusDisposable = editorInstanceRef.current!.onDidFocusEditorText(() => {\n setIsFocus(true);\n onFocusRef.current?.();\n });\n // 添加失焦事件监听\n const blurDisposable = editorInstanceRef.current!.onDidBlurEditorText(async () => {\n setIsFocus(false);\n if (formatOnBlur) {\n const currentValue = await formatFn();\n onBlurRef.current?.(currentValue || '');\n } else {\n const currentValue = editorInstanceRef.current!.getValue();\n onBlurRef.current?.(currentValue);\n }\n });\n return () => {\n focusDisposable.dispose();\n blurDisposable.dispose();\n editorInstanceRef.current?.dispose();\n globalDataLibRef.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, isFocus },\n callback: () => {\n editorInstanceRef.current?.updateOptions({\n wordWrap: 'on',\n /** 让下面不显示空白区域 */\n scrollBeyondLastLine: false,\n tabSize: 2,\n ...monacoEditorOptions,\n scrollbar: {\n // 默认让聚焦时，内部滚动，失焦时不滚动\n handleMouseWheel: isFocus ? true : false,\n ...monacoEditorOptions?.scrollbar,\n },\n });\n },\n options: { immediate: true },\n });\n\n const addGlobalType = () => {\n if (languageMode !== 'javascript') {\n return;\n }\n globalDataLibRef.current = monaco.languages.typescript.javascriptDefaults.addExtraLib(\n globalVarType,\n `global-${globalVarTypeName}.d.ts`,\n );\n };\n useWatchValue({\n value: globalVarType,\n callback() {\n addGlobalType();\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 className='biz-components-dom' style={{ display: 'contents' }}>\n <div\n ref={editorRef}\n className={classNames('easyv-monaco-editor', className)}\n style={{\n border: '1px solid #393b4a',\n width: '100%',\n height: '100%',\n ...style,\n }}\n />\n </div>\n );\n}\n\nexport const EasyvMonacoEditor = forwardRef(EasyvMonacoEditorCpn);\n"],"names":["_a","jsx"],"mappings":"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"}
package/dist/components/easyv-monaco-editor/types.d.ts CHANGED
@@ -21,10 +21,6 @@ export interface EasyvMonacoEditorProps {
21
21
  age: number;
22
22
  }
23
23
  declare const users: User[];
24
- - 或者 declare const data: {
25
- name: string;
26
- age: number;
27
- };
28
24
  */
29
25
  globalVarType?: string;
30
26
  /** 类型文件的名称。 避免类型覆盖 */
@@ -85,6 +81,8 @@ export interface EasyvMonacoEditorProps {
85
81
  customTheme?: monacoType.editor.IStandaloneThemeData;
86
82
  onEditorMounted?: (editor: monacoType.editor.IStandaloneCodeEditor) => void;
87
83
  onError?: (error: Error) => void;
84
+ /** 是否浏览器环境。浏览器环境会 增加 dom 相关的类型 */
85
+ isDomEnv?: boolean;
88
86
  }
89
87
  export type MonacoEditorInstance = monacoType.editor.IStandaloneCodeEditor | undefined;
90
88
  export type EasyvMonacoEditorRef = {