fix(core/react): some bug fix about viewport (#198)

alibaba · Jan 19, 2022 · 40abbc2 · 40abbc2
1 parent 57036b9
commit 40abbc2
Show file tree

Hide file tree

Showing 31 changed files with 1,522 additions and 7 deletions.
diff --git a/examples/multi-workspace/.npmignore b/examples/multi-workspace/.npmignore
@@ -0,0 +1,4 @@
+node_modules
+*.log
+build
+__tests__
diff --git a/examples/multi-workspace/LICENSE.md b/examples/multi-workspace/LICENSE.md
@@ -0,0 +1,20 @@
+The MIT License (MIT)
+
+Copyright (c) 2015-present, Alibaba Group Holding Limited. All rights reserved.
+
+Permission is hereby granted, free of charge, to any person obtaining a copy of
+this software and associated documentation files (the "Software"), to deal in
+the Software without restriction, including without limitation the rights to
+use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of
+the Software, and to permit persons to whom the Software is furnished to do so,
+subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS
+FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR
+COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER
+IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN
+CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
diff --git a/examples/multi-workspace/README.md b/examples/multi-workspace/README.md
@@ -0,0 +1 @@
+# @designable/playground
diff --git a/examples/multi-workspace/config/template.ejs b/examples/multi-workspace/config/template.ejs
@@ -0,0 +1,15 @@
+<!DOCTYPE html>
+<head>
+  <title>
+    Designable Playground
+  </title>
+</head>
+<body>
+  <div id="root">
+  </div>
+  <script type="text/javascript" src="https://unpkg.com/monaco-themes/dist/monaco-themes.js"></script>
+  <script src="https://unpkg.com/moment/min/moment-with-locales.js"></script>
+  <script src="https://unpkg.com/react/umd/react.production.min.js"></script>
+  <script src="https://unpkg.com/react-dom/umd/react-dom.production.min.js"></script>
+  <script src="https://unpkg.com/antd/dist/antd-with-locales.min.js"></script>
+</body>
diff --git a/examples/multi-workspace/config/webpack.base.ts b/examples/multi-workspace/config/webpack.base.ts
@@ -0,0 +1,102 @@
+import path from 'path'
+import fs from 'fs-extra'
+import MiniCssExtractPlugin from 'mini-css-extract-plugin'
+//import { getThemeVariables } from 'antd/dist/theme'
+
+const getAlias = () => {
+  const packagesDir = path.resolve(__dirname, '../../../packages')
+  const packages = fs.readdirSync(packagesDir)
+  const pkg = fs.readJSONSync(path.resolve(__dirname, '../package.json'))
+  const deps = Object.entries(pkg.dependencies).reduce((deps, [key]) => {
+    if (key.includes('@designable/')) {
+      return deps
+    } else if (key.includes('react')) {
+      deps[key] = require.resolve(key)
+      return deps
+    }
+    deps[key] = key
+    return deps
+  }, {})
+  const alias = packages
+    .map((v) => path.join(packagesDir, v))
+    .filter((v) => {
+      return !fs.statSync(v).isFile()
+    })
+    .reduce((buf, _path) => {
+      const name = path.basename(_path)
+      return {
+        ...buf,
+        [`@designable/${name}$`]: `${_path}/src`,
+      }
+    }, deps)
+  return alias
+}
+export default {
+  mode: 'development',
+  devtool: 'inline-source-map', // 嵌入到源文件中
+  stats: {
+    entrypoints: false,
+    children: false,
+  },
+  entry: {
+    playground: path.resolve(__dirname, '../src/main'),
+  },
+  output: {
+    path: path.resolve(__dirname, '../dist'),
+    filename: '[name].[hash].bundle.js',
+  },
+  resolve: {
+    modules: ['node_modules'],
+    extensions: ['.js', '.jsx', '.ts', '.tsx', '.json'],
+    alias: getAlias(),
+  },
+  externals: {
+    // '@formily/reactive': 'Formily.Reactive',
+    react: 'React',
+    'react-dom': 'ReactDOM',
+    moment: 'moment',
+    antd: 'antd',
+  },
+  module: {
+    rules: [
+      {
+        test: /\.tsx?$/,
+        use: [
+          {
+            loader: require.resolve('ts-loader'),
+            options: {
+              transpileOnly: true,
+            },
+          },
+        ],
+      },
+      {
+        test: /\.css$/,
+        use: [MiniCssExtractPlugin.loader, require.resolve('css-loader')],
+      },
+      {
+        test: /\.less$/,
+        use: [
+          MiniCssExtractPlugin.loader,
+          { loader: 'css-loader' },
+          {
+            loader: 'less-loader',
+            options: {
+              // modifyVars: getThemeVariables({
+              //   dark: true // 开启暗黑模式
+              // }),
+              javascriptEnabled: true,
+            },
+          },
+        ],
+      },
+      {
+        test: /\.html?$/,
+        loader: require.resolve('file-loader'),
+        options: {
+          name: '[name].[ext]',
+        },
+      },
+    ],
+  },
+}
diff --git a/examples/multi-workspace/config/webpack.dev.ts b/examples/multi-workspace/config/webpack.dev.ts
@@ -0,0 +1,52 @@
+import baseConfig from './webpack.base'
+import HtmlWebpackPlugin from 'html-webpack-plugin'
+import MiniCssExtractPlugin from 'mini-css-extract-plugin'
+//import { BundleAnalyzerPlugin } from 'webpack-bundle-analyzer'
+import webpack from 'webpack'
+import path from 'path'
+
+const PORT = 3000
+
+const createPages = (pages) => {
+  return pages.map(({ filename, template, chunk }) => {
+    return new HtmlWebpackPlugin({
+      filename,
+      template,
+      inject: 'body',
+      chunks: chunk,
+    })
+  })
+}
+
+for (let key in baseConfig.entry) {
+  if (Array.isArray(baseConfig.entry[key])) {
+    baseConfig.entry[key].push(
+      require.resolve('webpack/hot/dev-server'),
+      `${require.resolve('webpack-dev-server/client')}?http://localhost:${PORT}`
+    )
+  }
+}
+
+export default {
+  ...baseConfig,
+  plugins: [
+    new MiniCssExtractPlugin({
+      filename: '[name].[hash].css',
+      chunkFilename: '[id].[hash].css',
+    }),
+    ...createPages([
+      {
+        filename: 'index.html',
+        template: path.resolve(__dirname, './template.ejs'),
+        chunk: ['playground'],
+      },
+    ]),
+    new webpack.HotModuleReplacementPlugin(),
+    // new BundleAnalyzerPlugin()
+  ],
+  devServer: {
+    host: '127.0.0.1',
+    open: true,
+    port: PORT,
+  },
+}
diff --git a/examples/multi-workspace/config/webpack.prod.ts b/examples/multi-workspace/config/webpack.prod.ts
@@ -0,0 +1,36 @@
+import baseConfig from './webpack.base'
+import HtmlWebpackPlugin from 'html-webpack-plugin'
+import MiniCssExtractPlugin from 'mini-css-extract-plugin'
+import path from 'path'
+
+const createPages = (pages) => {
+  return pages.map(({ filename, template, chunk }) => {
+    return new HtmlWebpackPlugin({
+      filename,
+      template,
+      inject: 'body',
+      chunks: chunk,
+    })
+  })
+}
+
+export default {
+  ...baseConfig,
+  mode: 'production',
+  plugins: [
+    new MiniCssExtractPlugin({
+      filename: '[name].[hash].css',
+      chunkFilename: '[id].[hash].css',
+    }),
+    ...createPages([
+      {
+        filename: 'index.html',
+        template: path.resolve(__dirname, './template.ejs'),
+        chunk: ['playground'],
+      },
+    ]),
+  ],
+  optimization: {
+    minimize: true,
+  },
+}
diff --git a/examples/multi-workspace/package.json b/examples/multi-workspace/package.json
@@ -0,0 +1,41 @@
+{
+  "name": "@designable/multi-workspace-example",
+  "version": "1.0.0-beta.43",
+  "license": "MIT",
+  "private": true,
+  "engines": {
+    "npm": ">=3.0.0"
+  },
+  "scripts": {
+    "build": "rimraf dist && webpack-cli --config config/webpack.prod.ts",
+    "start": "webpack-dev-server --config config/webpack.dev.ts"
+  },
+  "devDependencies": {
+    "file-loader": "^5.0.2",
+    "fs-extra": "^8.1.0",
+    "html-webpack-plugin": "^3.2.0",
+    "mini-css-extract-plugin": "^1.6.0",
+    "raw-loader": "^4.0.0",
+    "style-loader": "^1.1.3",
+    "ts-loader": "^7.0.4",
+    "typescript": "4.1.5",
+    "webpack": "^4.41.5",
+    "webpack-bundle-analyzer": "^3.9.0",
+    "webpack-cli": "^3.3.10",
+    "webpack-dev-server": "^3.10.1"
+  },
+  "dependencies": {
+    "@designable/core": "1.0.0-beta.43",
+    "@designable/react": "1.0.0-beta.43",
+    "@designable/react-sandbox": "1.0.0-beta.43",
+    "@designable/react-settings-form": "1.0.0-beta.43",
+    "@designable/shared": "1.0.0-beta.43",
+    "@formily/reactive": "^2.0.2",
+    "@formily/reactive-react": "^2.0.2",
+    "antd": "^4.15.2",
+    "react": "^16.8.x",
+    "react-dom": "^16.8.x",
+    "react-jss": "^10.4.0"
+  },
+  "gitHead": "820790a9ae32c2348bb36b3de7ca5f1051ed392c"
+}
diff --git a/examples/multi-workspace/src/content.tsx b/examples/multi-workspace/src/content.tsx
@@ -0,0 +1,47 @@
+import React from 'react'
+import { ComponentTreeWidget, useTreeNode } from '@designable/react'
+import { observer } from '@formily/reactive-react'
+import 'antd/dist/antd.css'
+
+export const Content = () => (
+  <ComponentTreeWidget
+    components={{
+      Field: observer((props) => {
+        const node = useTreeNode()
+        return (
+          <span
+            {...props}
+            style={{
+              background: '#eee',
+              display: 'inline-block',
+              ...props.style,
+              padding: '10px 20px',
+              border: '1px solid #ddd',
+            }}
+          >
+            <span data-content-editable="title">{node.props.title}</span>
+            {props.children}
+          </span>
+        )
+      }),
+      Card: (props) => {
+        return (
+          <div
+            {...props}
+            style={{
+              background: '#eee',
+              border: '1px solid #ddd',
+              display: 'flex',
+              padding: 10,
+              height: props.children ? 'auto' : 150,
+              justifyContent: 'center',
+              alignItems: 'center',
+            }}
+          >
+            {props.children ? props.children : <span>拖拽字段进入该区域</span>}
+          </div>
+        )
+      },
+    }}
+  />
+)