线上ide组件

.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"

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",

packages/demo/src/components/Editor/.catalog.ts

@@ -1 +1 @@
-export const list = []
+export const list = [{"h2":"基本用法","h3":[]}]

packages/demo/src/components/Editor/index.mdx

@@ -4,7 +4,7 @@ import Props from './props.mdx';
 
 ## 基本用法
 
-<CodeBlock id="基本示例">
+<CodeBlock id="基本示例" style={{ padding: 0 }}>
   <Base />
 </CodeBlock>
 

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 {

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 拖拽列表',

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(),
   ],
 };

packages/design/.prettierrc

@@ -1,4 +1,4 @@
 {
   "singleQuote": true,
-  "printWidth": 120
+  "printWidth": 80
 }

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',
+  ],
+};

packages/design/components/MonacoEditor/code/index.ts

@@ -0,0 +1,3 @@
+export { default as useEventCode } from './useEvent';
+export { default as usePreviousCode } from './usePrevious';
+export { default as testCode } from './test';

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 (
+    <section>
+      <h1 style={{ color: '#fff' }}>Pivot Design Editor</h1>
+    </section>
+  );
+}
+
+ReactDom.createRoot(document.getElementById('root')).render(<App />)
+`;

packages/design/components/MonacoEditor/code/useEvent.ts

@@ -0,0 +1,61 @@
+export default `import ReactDom from 'react-dom/client';
+import React, {
+  useEffect,
+  useCallback,
+  useLayoutEffect,
+  useRef,
+  useState
+} from "react";
+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<HTMLButtonElement>(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 (
+    <section style={{ color: '#fff' }}>
+      <h1>useEvent</h1>
+      <button className="link" ref={ButtonRef}>
+        Next
+      </button>
+      <article>
+        <figure>
+          <p style={{ height:100, width: 100, background: \`$\{color}\` }} />
+          <figcaption>Current: {color}</figcaption>
+        </figure>
+      </article>
+    </section>
+  );
+}
+
+ReactDom.createRoot(document.getElementById('root')).render(<App />)
+`;

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 (
+    <section>
+      <h1>usePrevious</h1>
+      <button className="link" onClick={handleClick}>
+        Next
+      </button>
+      <article>
+        <figure>
+          <p style={{ background: \`$\{previousColor}\` }} />
+          <figcaption>Previous: {previousColor}</figcaption>
+        </figure>
+        <figure>
+          <p style={{ background: \`$\{color}\` }} />
+          <figcaption>Current: {color}</figcaption>
+        </figure>
+      </article>
+    </section>
+  );
+}
+`;

packages/design/components/MonacoEditor/compiler.ts

@@ -0,0 +1,64 @@
+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}`;
+    //             }
+    //           }
+    //         },
+    //       },
+    //     };
+    //   },
+    // ],
+  });
+  return resultCode;
+};

packages/design/components/MonacoEditor/components/Preview/index.html

@@ -0,0 +1,28 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>preview</title>
+  </head>
+  <body>
+    <script type="importmap">
+      {
+        "imports": {
+          "react": "https://esm.sh/react",
+          "react-dom/client": "https://esm.sh/react-dom/client"
+        }
+      }
+    </script>
+    <div id="root"></div>
+  </body>
+  <script>
+    window.addEventListener('message', (e) => {
+      const { type, data } = e.data;
+      const compileScript = document.createElement('script');
+      compileScript.type = 'module';
+      compileScript.innerHTML = data;
+      document.body.appendChild(compileScript);
+    });
+  </script>
+</html>

packages/design/components/MonacoEditor/components/Preview/index.tsx

@@ -0,0 +1,29 @@
+import { useRef } from 'react';
+import iframe from '!!raw-loader!./index.html';
+import { MessageChangeType } from '../../types';
+const src = URL.createObjectURL(new Blob([iframe], { type: 'text/html' }));
+
+const Preview = ({ compiler }) => {
+  const iframeRef = useRef<HTMLIFrameElement>(null);
+  compiler.addEventListener('message', (e) => {
+    const { data, type } = e.data;
+    if (type === MessageChangeType.Compile) {
+      iframeRef.current?.contentWindow?.postMessage({
+        type,
+        data,
+      });
+    }
+  });
+
+  return (
+    <iframe
+      ref={iframeRef}
+      src={src}
+      sandbox="allow-scripts allow-same-origin"
+      frameBorder="1"
+      width="100%"
+      height={800}
+    />
+  );
+};
+export default Preview;

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<MonacoEditorContextDescriptor>(defaultMonacoEditorValue);
+
+export const EditorContextProvider: FC<PropsWithChildren<MonacoEditorContextDescriptor>> = ({ children, ...props }) => {
+  const [state, dispatch] = useReducer(reducer, {
+    ...defaultMonacoEditorValue,
+    ...props,
+  });
+  return <Context.Provider value={{ ...state, dispatch }}>{children}</Context.Provider>;
+};
+
+export const useEditorContext = () => {
+  return useContext(Context);
+};

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 };
+  }
+}