feat: editor support inject extra libs d.ts

x-orpheus · Apr 23, 2024 · c277fd7 · c277fd7
1 parent b613265
commit c277fd7
Show file tree

Hide file tree

Showing 5 changed files with 117 additions and 36 deletions.
diff --git a/README.md b/README.md
@@ -145,6 +145,9 @@ export default SingleIDE;
 #### 搜索文本
 快捷键：shift + command/ctrl + f
 
+#### 类型提示声明
+MultiEditor 新增属性 extraLibs 配置额外的类型提示配置
+
 ### 组件参数及方法
 
 查看此[文档](https://x-orpheus.github.io/react-monaco-editor-lite/public/docs/index.html)
diff --git a/demo/app.tsx b/demo/app.tsx
@@ -198,6 +198,7 @@ const App = () => {
       </select>
       {Object.keys(files).length > 0 && (
         <div style={{ width: '800px', height: '300px' }}>
+          { 
           <Editor
             title="tango project"
             defaultTheme="GithubLightDefault"
@@ -244,7 +245,12 @@ const App = () => {
               fontSize: 14,
               automaticLayout: true,
             }}
+            extraLibs={[{
+                url: "https://d2.music.126.net/dmusic/obj/w5zCg8OAw6HDjzjDgMK_/35246957834/7d53/3b7a/7ef0/30ab2174d344733b71039d56dceb2109.ts?download=reactnative.d.ts",
+                path: "music:/node_modules/@types/react-native/index.d.ts"
+              }]}
           />
+}
         </div>
       )}
       {/* <iframe src="http://localhost:8081/index.html" ref={sandboxRef} /> */}

diff --git a/public/editorfiles/src/index.jsx b/public/editorfiles/src/index.jsx
@@ -1,5 +1,6 @@
 import React from 'react';
+import { Text } from 'react-native';
 
-const App = () => (<div>13</div>);
+const App = () => (<div><Text />13</div>);
 
 export default App;
diff --git a/src/multi/Editor.tsx b/src/multi/Editor.tsx
@@ -19,7 +19,7 @@ import {
   filterNull,
 } from '@utils';
 import { THEMES } from '@utils/consts';
-import { configTheme } from '@utils/initEditor';
+import { configTheme, addExtraLibs } from '@utils/initEditor';
 import Setting from '@components/Setting';
 import {
   useDragLine,
@@ -83,6 +83,10 @@ export interface MultiEditorIProps {
   defaultFiles?: filelist;
   options: monacoType.editor.IStandaloneEditorConstructionOptions;
   title?: string;
+  extraLibs?: Array<{
+    url: string;
+    path: string;
+  }>;
 }
 
 export interface MultiRefType {
@@ -93,7 +97,7 @@ export interface MultiRefType {
   refresh: (files: filelist, path?: string) => void;
 }
 
-export const MultiEditorComp = React.forwardRef<
+const MultiPrivateEditorComp = React.forwardRef<
   MultiRefType,
   MultiEditorIProps
 >(
@@ -118,6 +122,7 @@ export const MultiEditorComp = React.forwardRef<
       },
       options,
       title,
+      extraLibs
     },
     ref
   ) => {
@@ -866,6 +871,70 @@ export const MultiEditorComp = React.forwardRef<
   }
 );
 
+export const MultiEditorComp = React.forwardRef<
+  MultiRefType,
+  MultiEditorIProps
+>(
+  (
+    {
+      defaultPath,
+      defaultTheme = 'OneDarkPro',
+      onPathChange,
+      onValueChange,
+      onRenameFile,
+      defaultFiles = {},
+      onFileChange,
+      onFileSave,
+      ideConfig = {
+        disableFileOps: {},
+        disableFolderOps: {},
+        disableEslint: false,
+        disableSetting: false,
+        disablePrettier: false,
+        saveWhenBlur: false,
+        disableSearch: false
+      },
+      options,
+      title,
+      extraLibs
+    },
+    ref
+  ) => {
+
+    const [showEditor, setShowEditor]= useState<Boolean>(false);
+
+    useEffect(() => {
+      if (extraLibs === undefined || extraLibs.length === 0) {
+        setShowEditor(true);
+      } else {
+        addExtraLibs(extraLibs)
+        .then(() => {
+          setShowEditor(true);
+        })
+        .catch((error) => {
+          setShowEditor(true);
+        });
+      }
+    }, [showEditor, extraLibs]);
+
+    return (showEditor ? 
+    <MultiPrivateEditorComp  
+      defaultPath={defaultPath}
+      defaultTheme={defaultTheme}
+      onPathChange={onPathChange}
+      onValueChange={onValueChange}
+      onRenameFile={onRenameFile}
+      defaultFiles={defaultFiles}
+      onFileChange={onFileChange}
+      onFileSave={onFileSave}
+      ideConfig={ideConfig}
+      options={options}
+      title={title}
+      extraLibs={extraLibs} 
+      ref={ref}/> : <div>加载中...</div>);
+  }
+);
+
 export default MultiEditorComp;
 
 MultiEditorComp.displayName = 'MultiEditorComp';
diff --git a/src/utils/initEditor.ts b/src/utils/initEditor.ts
@@ -3,6 +3,7 @@ import { Registry } from 'monaco-textmate';
 import { wireTmGrammars } from 'monaco-editor-textmate';
 declare type monacoType = typeof import('monaco-editor');
 import { ASSETSPATH } from './consts';
+
 // import config from './eslintconfig';
 declare global {
   interface Window {
@@ -83,41 +84,38 @@ export async function configTheme(name: string) {
   window.monaco.editor.setTheme(name);
 }
 
-async function addExtraLib() {
-  let res = await (await fetch(`${ASSETSPATH}@types/react/index.d.ts`)).text();
-  window.monaco.languages.typescript.javascriptDefaults.setCompilerOptions({
-    allowJs: true,
-    allowNonTsExtensions: true,
-    allowSyntheticDefaultImports: true, // for use of import React from 'react' ranther than import * as React from 'react'
+let isAddDefaultsLibs = false;
+export async function addExtraLibs(extraLibs: Array<{ url: string; path: string; }>) {
+  if (!isAddDefaultsLibs) {
+    extraLibs = [{
+      url: `${ASSETSPATH}@types/react/index.d.ts`,
+      path: 'music:/node_modules/@types/react/index.d.ts'
+    }, {
+      url: `${ASSETSPATH}@types/react/global.d.ts`,
+      path: 'music:/node_modules/%40types/react/global.d.ts'
+    }, {
+      url: `${ASSETSPATH}@types/react-dom/index.d.ts`,
+      path: 'music:/node_modules/@types/react-dom/index.d.ts'
+    }].concat(extraLibs);
+    isAddDefaultsLibs = true;
+  }
+
+  const requests = extraLibs.map(async (lib) => {
+    let res = await (await fetch(lib.url)).text();
+    window.monaco.languages.typescript.javascriptDefaults.addExtraLib(
+      res,
+      lib.path
+    );
+    window.monaco.languages.typescript.typescriptDefaults.addExtraLib(
+      res,
+      lib.path
+    );
+    window.monaco.languages.typescript.typescriptDefaults.setEagerModelSync(true);
   });
-  window.monaco.languages.typescript.javascriptDefaults.addExtraLib(
-    res,
-    'music:/node_modules/@types/react/index.d.ts'
-  );
-  window.monaco.languages.typescript.typescriptDefaults.addExtraLib(
-    res,
-    'music:/node_modules/@types/react/index.d.ts'
-  );
-  res = await (await fetch(`${ASSETSPATH}@types/react/global.d.ts`)).text();
-  window.monaco.languages.typescript.javascriptDefaults.addExtraLib(
-    res,
-    'music:/node_modules/%40types/react/global.d.ts'
-  );
-  window.monaco.languages.typescript.typescriptDefaults.addExtraLib(
-    res,
-    'music:/node_modules/%40types/react/global.d.ts'
-  );
-  res = await (await fetch(`${ASSETSPATH}@types/react-dom/index.d.ts`)).text();
-  window.monaco.languages.typescript.javascriptDefaults.addExtraLib(
-    res,
-    'music:/node_modules/@types/react-dom/index.d.ts'
-  );
-  window.monaco.languages.typescript.typescriptDefaults.addExtraLib(
-    res,
-    'music:/node_modules/@types/react-dom/index.d.ts'
-  );
+  await Promise.all(requests);
 }
 
+
 function configMonaco() {
   const init = async () => {
     window.monaco.languages.typescript.javascriptDefaults.setEagerModelSync(
@@ -126,7 +124,11 @@ function configMonaco() {
     // 加载textmate语义解析webassembly文件
     await loadWASM(`${ASSETSPATH}onigasm.wasm`);
 
-    addExtraLib();
+    window.monaco.languages.typescript.javascriptDefaults.setCompilerOptions({
+      allowJs: true,
+      allowNonTsExtensions: true,
+      allowSyntheticDefaultImports: true, // for use of import React from 'react' ranther than import * as React from 'react'
+    });
   };
   init();