feat: 引入react、react-dom types

Pivot-Studio · Oct 24, 2023 · 7b71c4d · 7b71c4d
1 parent a0eaa0c
commit 7b71c4d
Show file tree

Hide file tree

Showing 8 changed files with 28 additions and 19 deletions.
diff --git a/packages/demo/src/components/Editor/demo/Multiple.tsx b/packages/demo/src/components/Editor/demo/Multiple.tsx
@@ -4,7 +4,7 @@ import React, { useState } from 'react';
 const App: React.FC = () => {
   return (
     <>
-      <MultipleEditor />
+      <MultipleEditor style={{ marginTop: 24 }} />
     </>
   );
 };

diff --git a/packages/demo/src/components/Editor/props.mdx b/packages/demo/src/components/Editor/props.mdx
@@ -1,7 +1,4 @@
-import Table from '../table.tsx';
-
-export const params = [];
-
-## API 列表
-
-<Table name="input" params={params} />
+import Table from '../table.tsx'
+export const params = []
+## API 列表
+<Table name='editor' params={params}/>

diff --git a/packages/design-props/components/editor.ts b/packages/design-props/components/editor.ts
@@ -0,0 +1,5 @@
+import React from 'react';
+import { PivotDesignProps } from './';
+export interface MultipleEditorProps extends PivotDesignProps {
+
+}
diff --git a/packages/design-props/index.ts b/packages/design-props/index.ts
@@ -8,3 +8,4 @@ export * from './components/popover';
 export * from './components/modal';
 export * from './components/transition';
 export * from './components/tabs';
+export * from './components/editor';
diff --git a/packages/design/components/MonacoEditor/MultipleEditor.tsx b/packages/design/components/MonacoEditor/MultipleEditor.tsx
@@ -1,10 +1,11 @@
 import { EditorProps } from '@monaco-editor/react';
-import { useRef, useState } from 'react';
+import { FC, useRef, useState } from 'react';
 import { CodeType, Module } from './types';
 import { testCode } from './code';
 import Tabs from '../Tabs';
 import MonacoEditor from './Editor';
 import { useLocalStorage } from '../hooks';
+import { MultipleEditorProps } from 'pivot-design-props';
 
 const FILENAME1 = 'index.tsx';
 const FILENAME2 = 'index.scss';
@@ -39,13 +40,13 @@ const items: Module[] = [
 // todo: 1. 编译文件的独立性。现在修改css实际走的是tsx的编译
 // 2.引入scss
 // 3.代码优化；
-const MultipleEditor = () => {
+const MultipleEditor: FC<MultipleEditorProps> = ({ style }) => {
   const [tabsValue, setTabsValue] = useLocalStorage<Module[]>('tabs', {
     defaultValue: items,
   });
 
   return (
-    <div style={{ width: '100%', padding: 12 }}>
+    <div style={{ width: '100%', padding: 12, ...style }}>
       <Tabs
         items={tabsValue}
         renderCommonContent={(item) => {

diff --git a/packages/design/components/MonacoEditor/components/Preview/index.html b/packages/design/components/MonacoEditor/components/Preview/index.html
@@ -38,9 +38,10 @@
         const compileScript = document.createElement('script');
         compileScript.id = CompileScriptId;
         compileScript.type = 'module';
-        compileScript.innerHTML = `try{${code}}catch(err){console.log(err)}`;
+        compileScript.innerHTML = `${code}`;
         document.body.appendChild(compileScript);
 
+        // code runner exhibition
         document.getElementById('__CODE_RUN__').innerHTML = runcode.replace(
           /[\n]/g,
           '<br />'

diff --git a/packages/design/components/MonacoEditor/plugins/initPlugin.ts b/packages/design/components/MonacoEditor/plugins/initPlugin.ts
@@ -1,24 +1,28 @@
 import { Monaco } from '@monaco-editor/react';
 import REACT_TYPES from '!!raw-loader!/node_modules/@types/react/index.d.ts';
+import REACT_DOM_TYPES from '!!raw-loader!/node_modules/@types/react-dom/client.d.ts';
 const InitPlugin = (monaco: Monaco) => {
   // 添加ts编译设置
   monaco.languages.typescript.typescriptDefaults.setCompilerOptions({
     target: monaco.languages.typescript.ScriptTarget.Latest,
-    allowNonTsExtensions: true,
-    moduleResolution: monaco.languages.typescript.ModuleResolutionKind.NodeJs,
-    module: monaco.languages.typescript.ModuleKind.ES2015,
+    moduleResolution: monaco.languages.typescript.ModuleResolutionKind.NodeJs, // 模块解析策略 nodejs
+    module: monaco.languages.typescript.ModuleKind.ES2015, // 代码生成格式
     noEmit: true,
-    esModuleInterop: true,
+    esModuleInterop: true, // 通过为所有导入创建命名空间对象，实现CommonJS和ES模块之间的互操作性
     jsx: monaco.languages.typescript.JsxEmit.React,
     reactNamespace: 'React',
     allowJs: true,
-    typeRoots: ['node_modules/@types'],
+    typeRoots: ['node_modules/@types'], // 声明类型依赖目录
   });
 
   /** 添加额外的依赖包，lib是源代码，第二个参数是自己为其设置的文件路径*/
   monaco.languages.typescript.typescriptDefaults.addExtraLib(
     REACT_TYPES,
-    'file:///node_modules/@react/types/index.d.ts'
+    'file:///node_modules/@types/react/index.d.ts'
+  );
+  monaco.languages.typescript.typescriptDefaults.addExtraLib(
+    REACT_DOM_TYPES,
+    'file:///node_modules/@types/react-dom/client.d.ts'
   );
 };
 

diff --git a/packages/design/tsconfig.json b/packages/design/tsconfig.json
@@ -4,6 +4,6 @@
   "exclude": ["lib", ".*"],
   "compilerOptions": {
     "baseUrl": ".",
-    "outDir": "lib",
+    "outDir": "lib"
   }
 }