From 6c5da987d50e89cf876bcb2d58d973a240485391 Mon Sep 17 00:00:00 2001 From: 1360151219 Date: Fri, 29 Sep 2023 23:52:18 +0800 Subject: [PATCH 01/23] =?UTF-8?q?feat:=20=E5=88=9D=E5=A7=8B=E5=8C=96Monaco?= =?UTF-8?q?=20Editor?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .vscode/settings.json | 2 +- packages/demo/src/utils/path.ts | 4 -- packages/design/.prettierrc | 2 +- .../components/MonacoEditor/code/index.ts | 2 + .../components/MonacoEditor/code/useEvent.ts | 59 +++++++++++++++++++ .../MonacoEditor/code/usePrevious.ts | 45 ++++++++++++++ .../MonacoEditor/context/context.tsx | 20 +++++++ .../MonacoEditor/context/reducer.ts | 11 ++++ .../design/components/MonacoEditor/index.tsx | 38 +++++++++++- .../MonacoEditor/plugins/initPlugin.ts | 27 +++++++++ .../design/components/MonacoEditor/types.ts | 13 ++++ packages/design/package.json | 5 +- packages/design/tsconfig.json | 2 +- pnpm-lock.yaml | 33 +++++++++++ 14 files changed, 252 insertions(+), 11 deletions(-) create mode 100644 packages/design/components/MonacoEditor/code/index.ts create mode 100644 packages/design/components/MonacoEditor/code/useEvent.ts create mode 100644 packages/design/components/MonacoEditor/code/usePrevious.ts create mode 100644 packages/design/components/MonacoEditor/context/context.tsx create mode 100644 packages/design/components/MonacoEditor/context/reducer.ts create mode 100644 packages/design/components/MonacoEditor/plugins/initPlugin.ts create mode 100644 packages/design/components/MonacoEditor/types.ts diff --git a/.vscode/settings.json b/.vscode/settings.json index b89a916..8d2eafa 100644 --- a/.vscode/settings.json +++ b/.vscode/settings.json @@ -6,7 +6,7 @@ "editor.formatOnSaveMode": "file", "files.eol": "\n", "[typescriptreact]": { - "editor.defaultFormatter": "dbaeumer.vscode-eslint" + "editor.defaultFormatter": "rvest.vs-code-prettier-eslint" }, "[scss]": { "editor.defaultFormatter": "esbenp.prettier-vscode" diff --git a/packages/demo/src/utils/path.ts b/packages/demo/src/utils/path.ts index 41ee887..a039e0d 100644 --- a/packages/demo/src/utils/path.ts +++ b/packages/demo/src/utils/path.ts @@ -11,10 +11,6 @@ export const ComponentPath = [ path: 'card', title: 'Card 卡片', }, - { - path: 'button', - title: 'Card 卡片', - }, { path: 'draggable', title: 'Draggable 拖拽列表', diff --git a/packages/design/.prettierrc b/packages/design/.prettierrc index f65aabc..40b6472 100644 --- a/packages/design/.prettierrc +++ b/packages/design/.prettierrc @@ -1,4 +1,4 @@ { "singleQuote": true, - "printWidth": 120 + "printWidth": 80 } \ No newline at end of file diff --git a/packages/design/components/MonacoEditor/code/index.ts b/packages/design/components/MonacoEditor/code/index.ts new file mode 100644 index 0000000..0ed3f5a --- /dev/null +++ b/packages/design/components/MonacoEditor/code/index.ts @@ -0,0 +1,2 @@ +export { default as useEventCode } from './useEvent'; +export { default as usePreviousCode } from './usePrevious'; diff --git a/packages/design/components/MonacoEditor/code/useEvent.ts b/packages/design/components/MonacoEditor/code/useEvent.ts new file mode 100644 index 0000000..b803f84 --- /dev/null +++ b/packages/design/components/MonacoEditor/code/useEvent.ts @@ -0,0 +1,59 @@ +export default `import { + useEffect, + useCallback, + useLayoutEffect, + useRef, + useState +} from "react"; +import "./index.scss"; +function getRandomColor() { + const colors = ["green", "blue", "purple", "red", "pink"]; + return colors[Math.floor(Math.random() * colors.length)]; +} +function useEvent(handler) { + // todo + const handlerRef = useRef(handler); + useEffect(() => { + handlerRef.current = handler; + }); + return useCallback(() => { + const fn = handlerRef.current; + fn(); + }, []); +} +export default function App() { + const [color, setColor] = useState(getRandomColor()); + const ButtonRef = useRef(null); + const handleClick = () => { + function getNewColor() { + const newColor = getRandomColor(); + if (color === newColor) { + getNewColor(); + } else { + setColor(newColor); + } + } + getNewColor(); + console.log("===", color); + }; + // todo + const handleEventClick = useEvent(handleClick); + useEffect(() => { + ButtonRef.current.addEventListener("click", handleEventClick); + }, []); + return ( +
+

useEvent

+ +
+
+

+

Current: {color}
+
+
+
+ ); +} +`; diff --git a/packages/design/components/MonacoEditor/code/usePrevious.ts b/packages/design/components/MonacoEditor/code/usePrevious.ts new file mode 100644 index 0000000..95908e4 --- /dev/null +++ b/packages/design/components/MonacoEditor/code/usePrevious.ts @@ -0,0 +1,45 @@ +export default `import { useEffect, useRef, useState } from "react"; +import "./index.scss"; +function getRandomColor() { + const colors = ["green", "blue", "purple", "red", "pink"]; + return colors[Math.floor(Math.random() * colors.length)]; +} +function usePrevious(color: string) { + // todo +} +export default function App() { + const [color, setColor] = useState(getRandomColor()); + const previousColor = usePrevious(color); + + const handleClick = () => { + function getNewColor() { + const newColor = getRandomColor(); + if (color === newColor) { + getNewColor(); + } else { + setColor(newColor); + } + } + getNewColor(); + }; + + return ( +
+

usePrevious

+ +
+
+

+

Previous: {previousColor}
+
+
+

+

Current: {color}
+
+
+
+ ); +} +`; diff --git a/packages/design/components/MonacoEditor/context/context.tsx b/packages/design/components/MonacoEditor/context/context.tsx new file mode 100644 index 0000000..d27accd --- /dev/null +++ b/packages/design/components/MonacoEditor/context/context.tsx @@ -0,0 +1,20 @@ +import { FC, PropsWithChildren, createContext, useContext, useReducer } from 'react'; +import { reducer } from './reducer'; + +export interface MonacoEditorContextDescriptor {} + +export const defaultMonacoEditorValue: MonacoEditorContextDescriptor = {}; + +const Context = createContext(defaultMonacoEditorValue); + +export const EditorContextProvider: FC> = ({ children, ...props }) => { + const [state, dispatch] = useReducer(reducer, { + ...defaultMonacoEditorValue, + ...props, + }); + return {children}; +}; + +export const useEditorContext = () => { + return useContext(Context); +}; diff --git a/packages/design/components/MonacoEditor/context/reducer.ts b/packages/design/components/MonacoEditor/context/reducer.ts new file mode 100644 index 0000000..a5da407 --- /dev/null +++ b/packages/design/components/MonacoEditor/context/reducer.ts @@ -0,0 +1,11 @@ +import { MonacoEditorContextDescriptor } from './context'; + +export function reducer(state: MonacoEditorContextDescriptor, action): MonacoEditorContextDescriptor { + switch (action.type) { + case '': { + return { ...state }; + } + default: + return { ...state }; + } +} diff --git a/packages/design/components/MonacoEditor/index.tsx b/packages/design/components/MonacoEditor/index.tsx index be031f8..1a47e03 100644 --- a/packages/design/components/MonacoEditor/index.tsx +++ b/packages/design/components/MonacoEditor/index.tsx @@ -1,5 +1,39 @@ -const MonacoEditor = () => { - return
123
; +import Editor, { EditorProps, OnMount } from '@monaco-editor/react'; +import { useRef } from 'react'; +import { CodeType } from './types'; +import { useEventCode } from './code'; +import InitPlugin from './plugins/initPlugin'; +interface MocacoEditorProps extends EditorProps {} + +export const enum ThemeType { + 'Visual Studio' = 'vs', + 'Visual Studio Dark' = 'vs-dark', + 'High Contrast' = 'hc-light', + 'High Contrast Dark' = 'hc-black', +} + +const MonacoEditor = ({ height = 600, defaultLanguage, defaultValue }: MocacoEditorProps) => { + const EditorRef = useRef['0']>(); + const MonacoRef = useRef['1']>(); + const handleEditorDidMount: OnMount = (editor, monaco) => { + console.log('did mount', editor); + EditorRef.current = editor; + MonacoRef.current = monaco; + InitPlugin(monaco); + }; + + return ( + + ); }; export default MonacoEditor; diff --git a/packages/design/components/MonacoEditor/plugins/initPlugin.ts b/packages/design/components/MonacoEditor/plugins/initPlugin.ts new file mode 100644 index 0000000..4ccc27d --- /dev/null +++ b/packages/design/components/MonacoEditor/plugins/initPlugin.ts @@ -0,0 +1,27 @@ +import { Monaco } from '@monaco-editor/react'; + +const lib = `const test = { + testA: 1, + testB: 2, +}`; + +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, + noEmit: true, + esModuleInterop: true, + jsx: monaco.languages.typescript.JsxEmit.React, + reactNamespace: 'React', + allowJs: true, + typeRoots: ['node_modules/@types'], + }); + + /** 添加额外的依赖包，lib是源代码，第二个参数是自己为其设置的文件路径*/ + monaco.languages.typescript.typescriptDefaults.addExtraLib(lib, 'file:///node_modules/@react/types/index.d.ts'); +}; + +export default InitPlugin; diff --git a/packages/design/components/MonacoEditor/types.ts b/packages/design/components/MonacoEditor/types.ts new file mode 100644 index 0000000..00e03f5 --- /dev/null +++ b/packages/design/components/MonacoEditor/types.ts @@ -0,0 +1,13 @@ +export enum CodeType { + cpp = 'cpp', + nodejs = 'nodejs', + go = 'go', + python3 = 'python3', + python2 = 'python2', + java = 'java', + php = 'php', + rust = 'rust', + c = 'c', + dotnet = 'dotnet', + ts = 'typescript', +} diff --git a/packages/design/package.json b/packages/design/package.json index 4ff0fe2..81a45c0 100644 --- a/packages/design/package.json +++ b/packages/design/package.json @@ -14,11 +14,12 @@ "@types/react": "^18.0.21", "@types/react-dom": "^18.0.9", "classnames": "^2.3.2", - "pivot-design-props": "workspace:*", - "pivot-design-icon": "workspace:*" + "pivot-design-icon": "workspace:*", + "pivot-design-props": "workspace:*" }, "dependencies": { "@ant-design/icons": "^5.0.1", + "@monaco-editor/react": "^4.5.2", "prop-types": "^15.8.1", "react": "^18.2.0", "react-dom": "^18.2.0", diff --git a/packages/design/tsconfig.json b/packages/design/tsconfig.json index 93c0f1f..769d5af 100644 --- a/packages/design/tsconfig.json +++ b/packages/design/tsconfig.json @@ -1,7 +1,7 @@ { "extends": "../../tsconfig.json", "include": ["."], - "exclude": ["lib",".*"], + "exclude": ["lib", ".*"], "compilerOptions": { "baseUrl": ".", "outDir": "lib" diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index c890241..8d00de9 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -151,6 +151,9 @@ importers: '@ant-design/icons': specifier: ^5.0.1 version: 5.0.1(react-dom@18.2.0)(react@18.2.0) + '@monaco-editor/react': + specifier: ^4.5.2 + version: 4.5.2(monaco-editor@0.43.0)(react-dom@18.2.0)(react@18.2.0) prop-types: specifier: ^15.8.1 version: registry.npmmirror.com/prop-types@15.8.1 @@ -3010,6 +3013,28 @@ packages: - supports-color dev: false + /@monaco-editor/loader@1.3.3(monaco-editor@0.43.0): + resolution: {integrity: sha512-6KKF4CTzcJiS8BJwtxtfyYt9shBiEv32ateQ9T4UVogwn4HM/uPo9iJd2Dmbkpz8CM6Y0PDUpjnZzCwC+eYo2Q==} + peerDependencies: + monaco-editor: '>= 0.21.0 < 1' + dependencies: + monaco-editor: 0.43.0 + state-local: 1.0.7 + dev: false + + /@monaco-editor/react@4.5.2(monaco-editor@0.43.0)(react-dom@18.2.0)(react@18.2.0): + resolution: {integrity: sha512-emcWu6vg1OpXPiYll4aPOaXe8bwYB4UaaNTwtArFLgMoNGBzRZb2Xn0Bra2HMIFM7QLgs7fCGunHO5LkfT2LBA==} + peerDependencies: + monaco-editor: '>= 0.25.0 < 1' + react: ^16.8.0 || ^17.0.0 || ^18.0.0 + react-dom: ^16.8.0 || ^17.0.0 || ^18.0.0 + dependencies: + '@monaco-editor/loader': 1.3.3(monaco-editor@0.43.0) + monaco-editor: 0.43.0 + react: 18.2.0 + react-dom: 18.2.0(react@18.2.0) + dev: false + /@nodelib/fs.scandir@2.1.5: resolution: {integrity: sha512-vq24Bq3ym5HEQm2NKCr3yXDwjc7vTsEThRDnkp2DK9p1uqLR+DHurm/NOTo0KG7HYHU7eppKZj3MyqYuMBf62g==} engines: {node: '>= 8'} @@ -6673,6 +6698,10 @@ packages: resolution: {integrity: sha512-bzfL1YUZsP41gmu/qjrEk0Q6i2ix/cVeAhbCbqH9u3zYutS1cLg00qhrD0M2MVdCcx4Sc0UpP2eBWo9rotpq6g==} dev: true + /monaco-editor@0.43.0: + resolution: {integrity: sha512-cnoqwQi/9fml2Szamv1XbSJieGJ1Dc8tENVMD26Kcfl7xGQWp7OBKMjlwKVGYFJ3/AXJjSOGvcqK7Ry/j9BM1Q==} + dev: false + /mri@1.2.0: resolution: {integrity: sha512-tzzskb3bG8LvYGFF/mDTpq3jpI6Q9wc3LEmBaghu+DdCssd1FakN7Bc0hVNmEyGq1bq3RgfkCb3cmQLpNPOroA==} engines: {node: '>=4'} @@ -7760,6 +7789,10 @@ packages: readable-stream: 3.6.0 dev: true + /state-local@1.0.7: + resolution: {integrity: sha512-HTEHMNieakEnoe33shBYcZ7NX83ACUjCu8c40iOGEZsngj9zRnkqS9j1pqQPXwobB0ZcVTk27REb7COQ0UR59w==} + dev: false + /statuses@1.5.0: resolution: {integrity: sha512-OpZ3zP+jT1PI7I8nemJX4AKmAX070ZkYPVWV/AaKTJl+tXCTGyVdC1a4SL8RUQYEwk/f34ZX8UTykN68FwrqAA==} engines: {node: '>= 0.6'} From d0f56def52a76c4cb830f2683e6851d5fcd54f26 Mon Sep 17 00:00:00 2001 From: 1360151219 Date: Sun, 1 Oct 2023 11:06:28 +0800 Subject: [PATCH 02/23] =?UTF-8?q?feat:=20jsx=E7=BC=96=E8=AF=91?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- packages/demo/package.json | 1 + .../demo/src/components/Editor/.catalog.ts | 2 +- packages/demo/src/components/Editor/index.mdx | 2 +- .../demo/src/components/_CodeBlock/index.scss | 3 - packages/demo/webpack.config.js | 7 + packages/design/babel.config.js | 19 + .../components/MonacoEditor/code/index.ts | 1 + .../components/MonacoEditor/code/test.ts | 12 + .../components/MonacoEditor/code/useEvent.ts | 10 +- .../components/MonacoEditor/compiler.ts | 66 ++ .../design/components/MonacoEditor/index.tsx | 50 +- .../MonacoEditor/plugins/initPlugin.ts | 6 +- .../design/components/MonacoEditor/types.ts | 1 + packages/design/package.json | 28 +- packages/design/webpack.config.js | 60 ++ pnpm-lock.yaml | 613 +++++++++++++++++- 16 files changed, 831 insertions(+), 50 deletions(-) create mode 100644 packages/design/babel.config.js create mode 100644 packages/design/components/MonacoEditor/code/test.ts create mode 100644 packages/design/components/MonacoEditor/compiler.ts create mode 100644 packages/design/webpack.config.js diff --git a/packages/demo/package.json b/packages/demo/package.json index bce830d..be93a05 100644 --- a/packages/demo/package.json +++ b/packages/demo/package.json @@ -39,6 +39,7 @@ "@mdx-js/loader": "^2.1.5", "babel-plugin-prismjs": "^2.1.0", "gsap": "^3.11.5", + "node-polyfill-webpack-plugin": "^2.0.1", "pivot-design": "workspace:*", "pivot-design-icon": "workspace:*", "prismjs": "^1.29.0", diff --git a/packages/demo/src/components/Editor/.catalog.ts b/packages/demo/src/components/Editor/.catalog.ts index a63628d..1f6c926 100644 --- a/packages/demo/src/components/Editor/.catalog.ts +++ b/packages/demo/src/components/Editor/.catalog.ts @@ -1 +1 @@ -export const list = [] \ No newline at end of file +export const list = [{"h2":"基本用法","h3":[]}] \ No newline at end of file diff --git a/packages/demo/src/components/Editor/index.mdx b/packages/demo/src/components/Editor/index.mdx index 237561f..efbbacd 100644 --- a/packages/demo/src/components/Editor/index.mdx +++ b/packages/demo/src/components/Editor/index.mdx @@ -4,7 +4,7 @@ import Props from './props.mdx'; ## 基本用法 - + diff --git a/packages/demo/src/components/_CodeBlock/index.scss b/packages/demo/src/components/_CodeBlock/index.scss index e93ba3c..6e8ab4e 100644 --- a/packages/demo/src/components/_CodeBlock/index.scss +++ b/packages/demo/src/components/_CodeBlock/index.scss @@ -21,9 +21,6 @@ justify-content: center; align-items: center; background-color: var(--semi-color-fill-0); - > :not(.PIVOT-draggable-item) { - margin: 0 24px; - } } .line-numbers { diff --git a/packages/demo/webpack.config.js b/packages/demo/webpack.config.js index b368935..3e74ac4 100644 --- a/packages/demo/webpack.config.js +++ b/packages/demo/webpack.config.js @@ -1,5 +1,6 @@ const path = require('path'); //node环境当前路径 const HtmlWebpackPlugin = require('html-webpack-plugin'); //模板文件插件，能够自动将打包的css和js加入到模板文件中 +const NodePolyfillPlugin = require('node-polyfill-webpack-plugin'); module.exports = { entry: { app: './index.tsx', //找到咱们刚才在src下面的入口文件 @@ -14,6 +15,11 @@ module.exports = { alias: { '@': path.resolve(__dirname, './src'), }, + fallback: { + fs: false, + assert: require.resolve('assert'), + path: require.resolve('path-browserify'), + }, }, devServer: { port: 8080, @@ -86,5 +92,6 @@ module.exports = { removeComments: true, // 移除注释 }, }), + new NodePolyfillPlugin(), ], }; diff --git a/packages/design/babel.config.js b/packages/design/babel.config.js new file mode 100644 index 0000000..5afba9f --- /dev/null +++ b/packages/design/babel.config.js @@ -0,0 +1,19 @@ +module.exports = { + // 执行顺序由右往左,所以先处理ts,再处理jsx,最后再试一下babel转换为低版本语法 + presets: [ + [ + '@babel/preset-env', + { + // 设置兼容目标浏览器版本,这里可以不写,babel-loader会自动寻找上面配置好的文件.browserslistrc + // "targets": { + // "chrome": 35, + // "ie": 9 + // }, + useBuiltIns: 'usage', // 根据配置的浏览器兼容,以及代码中使用到的api进行引入polyfill按需添加 + corejs: 3, // 配置使用core-js低版本 + }, + ], + ['@babel/preset-react', { runtime: 'automatic' }], + '@babel/preset-typescript', + ], +}; diff --git a/packages/design/components/MonacoEditor/code/index.ts b/packages/design/components/MonacoEditor/code/index.ts index 0ed3f5a..17b7b2b 100644 --- a/packages/design/components/MonacoEditor/code/index.ts +++ b/packages/design/components/MonacoEditor/code/index.ts @@ -1,2 +1,3 @@ export { default as useEventCode } from './useEvent'; export { default as usePreviousCode } from './usePrevious'; +export { default as testCode } from './test'; diff --git a/packages/design/components/MonacoEditor/code/test.ts b/packages/design/components/MonacoEditor/code/test.ts new file mode 100644 index 0000000..fd343b1 --- /dev/null +++ b/packages/design/components/MonacoEditor/code/test.ts @@ -0,0 +1,12 @@ +export default `import ReactDom from 'react-dom/client'; +import React from 'react'; +function App() { + return ( +
+

Pivot Design Editor

+
+ ); +} + +ReactDom.createRoot(document.getElementById('root')).render() +`; diff --git a/packages/design/components/MonacoEditor/code/useEvent.ts b/packages/design/components/MonacoEditor/code/useEvent.ts index b803f84..6babb4f 100644 --- a/packages/design/components/MonacoEditor/code/useEvent.ts +++ b/packages/design/components/MonacoEditor/code/useEvent.ts @@ -1,11 +1,11 @@ -export default `import { +export default `import ReactDom from 'react-dom/client'; +import React, { useEffect, useCallback, useLayoutEffect, useRef, useState } from "react"; -import "./index.scss"; function getRandomColor() { const colors = ["green", "blue", "purple", "red", "pink"]; return colors[Math.floor(Math.random() * colors.length)]; @@ -42,18 +42,20 @@ export default function App() { ButtonRef.current.addEventListener("click", handleEventClick); }, []); return ( -
+

useEvent

-

+

Current: {color}
); } + +ReactDom.createRoot(document.getElementById('root')).render() `; diff --git a/packages/design/components/MonacoEditor/compiler.ts b/packages/design/components/MonacoEditor/compiler.ts new file mode 100644 index 0000000..6301ca7 --- /dev/null +++ b/packages/design/components/MonacoEditor/compiler.ts @@ -0,0 +1,66 @@ +import { transformSync, transform } from '@babel/core'; +import ReactPreset from '@babel/preset-react'; +import TSPreset from '@babel/preset-typescript'; +export const babelTransform = (filename: string, code: string, tabs: Tab[]) => { + let _code = code; + if (filename.endsWith('.tsx')) { + _code = `${code}`; + } + + const { code: resultCode } = transformSync(_code, { + filename: 'j.tsx', + presets: [ReactPreset, TSPreset], + // plugins: [ + // // Babel plugin to get file import names + // function importGetter() { + // return { + // visitor: { + // ImportDeclaration(path: any) { + // const module: string = path.node.source.value; + // if (module.startsWith('.')) { + // const _module = getInternalModule(tabs, module); + // // handle style file + // if (_module.path.endsWith('.css')) { + // const js = ` + // (() => { + // let stylesheet = document.getElementById('${_module.path}'); + // if (!stylesheet) { + // stylesheet = document.createElement('style') + // stylesheet.setAttribute('id', '${_module.path}') + // document.head.appendChild(stylesheet) + // } + // const styles = document.createTextNode(\`${_module.content}\`) + // stylesheet.innerHTML = '' + // stylesheet.appendChild(styles) + // })() + // `; + // path.node.source.value = URL.createObjectURL( + // new Blob([js], { type: 'application/javascript' }) + // ); + // } else { + // // handle ts file + // path.node.source.value = URL.createObjectURL( + // new Blob( + // [babelTransform(_module.path, _module.content, tabs)], + // { + // type: 'application/javascript', + // } + // ) + // ); + // } + // } else { + // // Third-party modules + // if (!importmap[module]) { + // importmap[module] = `https://esm.sh/${module}`; + // } + // } + // }, + // }, + // }; + // }, + // ], + }); + console.log(resultCode); + + return resultCode; +}; diff --git a/packages/design/components/MonacoEditor/index.tsx b/packages/design/components/MonacoEditor/index.tsx index 1a47e03..4178430 100644 --- a/packages/design/components/MonacoEditor/index.tsx +++ b/packages/design/components/MonacoEditor/index.tsx @@ -1,8 +1,9 @@ import Editor, { EditorProps, OnMount } from '@monaco-editor/react'; import { useRef } from 'react'; import { CodeType } from './types'; -import { useEventCode } from './code'; +import { useEventCode, testCode } from './code'; import InitPlugin from './plugins/initPlugin'; +import { babelTransform } from './compiler'; interface MocacoEditorProps extends EditorProps {} export const enum ThemeType { @@ -12,27 +13,52 @@ export const enum ThemeType { 'High Contrast Dark' = 'hc-black', } -const MonacoEditor = ({ height = 600, defaultLanguage, defaultValue }: MocacoEditorProps) => { +// todo: 解析jsx，插入iframe；worker通信 +const MonacoEditor = ({ + height = 400, + defaultLanguage, + defaultValue, +}: MocacoEditorProps) => { const EditorRef = useRef['0']>(); const MonacoRef = useRef['1']>(); const handleEditorDidMount: OnMount = (editor, monaco) => { console.log('did mount', editor); EditorRef.current = editor; MonacoRef.current = monaco; + InitPlugin(monaco); }; return ( - +
+ +