feat:add editor、sandbox、playground component

Author: canyuegongzi

component/packages/wu-code-monaco-editor/.editorconfig

@@ -0,0 +1,13 @@
+# EditorConfig is awesome: https://EditorConfig.org
+
+root = true
+
+[*]
+charset = utf-8
+indent_size = 4
+indent_style = space
+insert_final_newline = true
+trim_trailing_whitespace = true
+
+[*.md]
+trim_trailing_whitespace = false

component/packages/wu-code-monaco-editor/.eslintignore

@@ -0,0 +1,2 @@
+build/**
+dist/**

component/packages/wu-code-monaco-editor/.eslintrc.js

@@ -0,0 +1,39 @@
+module.exports = {
+  parser: '@typescript-eslint/parser',
+  parserOptions: {
+    sourceType: 'module',
+  },
+  plugins: [ '@typescript-eslint/eslint-plugin' ],
+  extends: [
+    'plugin:@typescript-eslint/eslint-recommended',
+    'plugin:@typescript-eslint/recommended',
+    'prettier',
+    'prettier/@typescript-eslint',
+  ],
+  root: true,
+  env: {
+    node: true,
+    jest: true,
+    'shared-node-browser': true,
+    es6: true
+  },
+  rules: {
+      '@typescript-eslint/no-empty-interface': 'off',
+      '@typescript-eslint/no-namespace': 'off',
+      '@typescript-eslint/ban-types': 'off',
+      '@typescript-eslint/no-var-requires': 'off',
+      '@typescript-eslint/interface-name-prefix': 'off',
+      '@typescript-eslint/explicit-function-return-type': 'off',
+      '@typescript-eslint/no-explicit-any': 'off',
+      '@typescript-eslint/explicit-module-boundary-types': 'off',
+      '@typescript-eslint/ban-ts-comment': 'off',
+      '@typescript-eslint/no-empty-function': 'off',
+      '@typescript-eslint/no-unused-vars': 'off',
+      'prefer-rest-params': 'off',
+      '@typescript-eslint/no-this-alias': 'off',
+      'semi':[ 'error','always' ],
+      'prefer-spread': 'off',
+      "array-bracket-spacing": [ "error","always" ],
+      "object-curly-spacing": [ "error","always" ]
+  },
+};

component/packages/wu-code-monaco-editor/.prettierrc

@@ -0,0 +1,5 @@
+{
+  "singleQuote": true,
+  "trailingComma": "all",
+  "printWidth": 300,
+}

component/packages/wu-code-monaco-editor/build/webpack_build.config.js

@@ -0,0 +1,37 @@
+const webpack = require('webpack');
+const path = require('path');
+const HtmlWebpackPlugin = require('html-webpack-plugin');
+const {commonPlugins, commonRules} = require("./webpack_common.config");
+module.exports = {
+    entry: ['./src/index.tsx'],
+    output: {
+        path: path.resolve(__dirname, '../', "dist"),
+        filename: "bundle.[chunkhash:8].js",
+        publicPath: '/',
+    },
+    target: 'web',
+    resolve: {
+        extensions: ['.ts', '.js', '.tsx'],
+    },
+    plugins: [
+        /*new webpack.EvalSourceMapDevToolPlugin({}),*/
+        new webpack.HotModuleReplacementPlugin(),
+        new HtmlWebpackPlugin({
+            template: "./public/index.html"
+        }),
+        /*...commonPlugins*/
+
+    ],
+    devServer: {
+        compress: true,
+        open: true,
+        port: 9005
+    },
+    // devtool: 'eval-source-map',
+    devtool: false,
+    module: {
+        rules: [
+            ...commonRules
+        ]
+    }
+}

component/packages/wu-code-monaco-editor/build/webpack_common.config.js

@@ -0,0 +1,86 @@
+const webpack = require('webpack');
+const commonRules = [
+    {
+        test:/\.tsx?$/,
+        exclude: /node_modules/,
+        use: [
+            {
+                loader: "ts-loader"
+            }
+        ]
+    },
+    {
+        test: /\.html$/,
+        exclude: /node_modules/,
+        use: [
+            {
+                loader: "raw-loader"
+            }
+        ]
+    },
+    {
+        test: /\.txt$/,
+        exclude: /node_modules/,
+        use: [
+            {
+                loader: "raw-loader"
+            }
+        ]
+    },
+    {
+        test: /\.png|jpg|gif|jpeg|svg/,
+        type: 'asset/resource',
+        parser: {
+            dataUrlCondition: {
+                maxSize: 10 * 1024,
+            },
+        },
+        generator: {
+            filename: 'images/[base]',
+        },
+    },
+    {
+        test: /\.(eot|ttf|woff|woff2)(\?\S*)?$/,
+        type: 'asset/resource',
+        generator: {
+            filename: 'fonts/[base]',
+        },
+    },
+    {
+        test: /\.css$/,
+        use:[ // 由后向前加载
+            {loader: 'css-loader'},
+            {loader: "postcss-loader"}
+        ]
+    },
+    {
+        test: /\.less$/,
+        use:[
+            {loader: 'css-loader'},
+            {loader: "postcss-loader"},
+            {loader: 'less-loader'}
+        ]
+    },
+    {                   // 处理sass/scss
+        test: /\.s[ac]ss$/i,
+        use: [
+            // 将 CSS 转化成 CommonJS 模块
+            'css-loader',
+            // 将 Sass 编译成 CSS
+            'sass-loader',
+        ],
+    },
+    {
+        //test: /\.styl$/,
+        test: /\.styl(us)?$/,
+        use: [
+            {loader: 'css-loader'},
+            {loader: "postcss-loader"},
+            {loader: 'stylus-loader'}
+        ]
+    }
+]
+const commonPlugins = [
+    new webpack.HotModuleReplacementPlugin(),
+]
+module.exports = { commonRules, commonPlugins };

component/packages/wu-code-monaco-editor/build/webpack_dev.config.js

@@ -0,0 +1,37 @@
+const webpack = require('webpack');
+const path = require('path');
+const HtmlWebpackPlugin = require('html-webpack-plugin');
+const {commonPlugins, commonRules} = require("./webpack_common.config");
+module.exports = {
+    entry: ['./src/index.tsx'],
+    output: {
+        path: path.resolve(__dirname, '../', "dist"),
+        filename: "bundle.[chunkhash:8].js",
+        publicPath: '/',
+    },
+    target: 'web',
+    resolve: {
+        extensions: ['.ts', '.js', '.tsx'],
+    },
+    plugins: [
+        /*new webpack.EvalSourceMapDevToolPlugin({}),*/
+        new webpack.HotModuleReplacementPlugin(),
+        new HtmlWebpackPlugin({
+            template: "./public/index.html"
+        }),
+        /*...commonPlugins*/
+
+    ],
+    devServer: {
+        compress: true,
+        open: true,
+        port: 9005
+    },
+    // devtool: 'eval-source-map',
+    devtool: false,
+    module: {
+        rules: [
+            ...commonRules
+        ]
+    }
+}

component/packages/wu-code-monaco-editor/index.html

@@ -0,0 +1,16 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <title>Title</title>
+    <style>
+        html {
+            width: 100vw;height:100vh;
+        }
+    </style>
+</head>
+<body style="width: 100%;height: 100%;margin: 0;">
+    <wu-code-monaco-editor style="width: 100%;height: 100%"></wu-code-monaco-editor>
+</body>
+<script src="./dist/index.umd.js"></script>
+</html>

component/packages/wu-code-monaco-editor/nodemon-debug.json

@@ -0,0 +1,6 @@
+{
+  "watch": ["./src"],
+  "ext": "ts",
+  "ignore": ["./src/**/*.spec.ts"],
+  "exec": "node --inspect-brk -r ts-node/register -r tsconfig-paths/register ./src/index.ts"
+}

component/packages/wu-code-monaco-editor/nodemon.json

@@ -0,0 +1,9 @@
+{
+  "watch": ["./src"],
+  "ext": "ts",
+  "ignore": ["./src/**/*.spec.ts"],
+  "env": {
+    "NODE_ENV": "development"
+  },
+  "exec": "cross-env NODE_ENV=production tsc -p tsconfig.build.json && node ./build/dev.js"
+}