From 7b71c4d3f88a28b5bdd1444e7a6625db4027e360 Mon Sep 17 00:00:00 2001 From: 1360151219 <1360151219@qq.com> Date: Wed, 25 Oct 2023 00:02:34 +0800 Subject: [PATCH] =?UTF-8?q?feat:=20=E5=BC=95=E5=85=A5react=E3=80=81react-d?= =?UTF-8?q?om=20types?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../demo/src/components/Editor/demo/Multiple.tsx | 2 +- packages/demo/src/components/Editor/props.mdx | 11 ++++------- packages/design-props/components/editor.ts | 5 +++++ packages/design-props/index.ts | 1 + .../components/MonacoEditor/MultipleEditor.tsx | 7 ++++--- .../MonacoEditor/components/Preview/index.html | 3 ++- .../MonacoEditor/plugins/initPlugin.ts | 16 ++++++++++------ packages/design/tsconfig.json | 2 +- 8 files changed, 28 insertions(+), 19 deletions(-) create mode 100644 packages/design-props/components/editor.ts diff --git a/packages/demo/src/components/Editor/demo/Multiple.tsx b/packages/demo/src/components/Editor/demo/Multiple.tsx index 7d0efd6..a9323a6 100644 --- 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 ( <> - + ); }; diff --git a/packages/demo/src/components/Editor/props.mdx b/packages/demo/src/components/Editor/props.mdx index ca0a4dc..5484e84 100644 --- 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 列表 - - +import Table from '../table.tsx' + export const params = [] + ## API 列表 +
\ No newline at end of file diff --git a/packages/design-props/components/editor.ts b/packages/design-props/components/editor.ts new file mode 100644 index 0000000..afbe222 --- /dev/null +++ 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 index bf694d6..541fb72 100644 --- 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 index e9f8914..9c4ae1a 100644 --- 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 = ({ style }) => { const [tabsValue, setTabsValue] = useLocalStorage('tabs', { defaultValue: items, }); return ( -
+
{ diff --git a/packages/design/components/MonacoEditor/components/Preview/index.html b/packages/design/components/MonacoEditor/components/Preview/index.html index cf0d287..d2b5e66 100644 --- 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, '
' diff --git a/packages/design/components/MonacoEditor/plugins/initPlugin.ts b/packages/design/components/MonacoEditor/plugins/initPlugin.ts index bc094fd..e42edff 100644 --- 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 index 43e9f42..769d5af 100644 --- a/packages/design/tsconfig.json +++ b/packages/design/tsconfig.json @@ -4,6 +4,6 @@ "exclude": ["lib", ".*"], "compilerOptions": { "baseUrl": ".", - "outDir": "lib", + "outDir": "lib" } }