chore: add sandbox example

examples/.eslintrc

@@ -0,0 +1,74 @@
+{
+  "parser": "@typescript-eslint/parser",
+  "extends": [
+    "plugin:react/recommended",
+    "plugin:@typescript-eslint/recommended",
+    "prettier/@typescript-eslint",
+    "plugin:markdown/recommended"
+  ],
+  "env": {
+    "node": true
+  },
+  "plugins": ["@typescript-eslint", "react", "prettier", "markdown"],
+  "parserOptions": {
+    "sourceType": "module",
+    "ecmaVersion": 10,
+    "ecmaFeatures": {
+      "jsx": true
+    }
+  },
+  "settings": {
+    "react": {
+      "version": "detect"
+    }
+  },
+  "rules": {
+    "prettier/prettier": 0,
+    // don't force es6 functions to include space before paren
+    "space-before-function-paren": 0,
+    "react/prop-types": 0,
+    "react/no-find-dom-node": 0,
+    "react/display-name": 0,
+    // allow specifying true explicitly for boolean props
+    "react/jsx-boolean-value": 0,
+    "react/no-did-update-set-state": 0,
+    // maybe we should no-public
+    "@typescript-eslint/explicit-member-accessibility": 0,
+    "@typescript-eslint/interface-name-prefix": 0,
+    "@typescript-eslint/no-explicit-any": 0,
+    "@typescript-eslint/explicit-function-return-type": 0,
+    "@typescript-eslint/no-parameter-properties": 0,
+    "@typescript-eslint/array-type": 0,
+    "@typescript-eslint/no-object-literal-type-assertion": 0,
+    "@typescript-eslint/no-use-before-define": 0,
+    "@typescript-eslint/no-unused-vars": 1,
+    "@typescript-eslint/no-namespace": 0,
+    "@typescript-eslint/ban-types": 0,
+    "@typescript-eslint/adjacent-overload-signatures": 0,
+    "@typescript-eslint/explicit-module-boundary-types": 0,
+    "@typescript-eslint/no-empty-function": 0,
+    "no-console": [
+      "error",
+      {
+        "allow": ["warn", "error", "info"]
+      }
+    ],
+    "prefer-const": 0,
+    "no-var": 1,
+    "prefer-rest-params": 0
+  },
+  "overrides": [
+    {
+      "files": ["**/*.md"],
+      "processor": "markdown/markdown"
+    },
+    {
+      "files": ["**/*.md/*.{jsx,tsx}"],
+      "rules": {
+        "@typescript-eslint/no-unused-vars": "error",
+        "no-unused-vars": "error",
+        "no-console": "off"
+      }
+    }
+  ]
+}

packages/playground/package.json → examples/basic/package.json

@@ -1,5 +1,5 @@
 {
-  "name": "@designable/playground",
+  "name": "@designable/basic-example",
   "version": "1.0.0-beta.39",
   "license": "MIT",
   "private": true,

packages/playground/src/content.tsx → examples/basic/src/content.tsx

@@ -31,7 +31,6 @@ export const Content = () => (
             style={{
               background: '#eee',
               border: '1px solid #ddd',
-              width: '100%',
               display: 'flex',
               padding: 10,
               height: props.children ? 'auto' : 150,

packages/playground/src/main.tsx → examples/basic/src/main.tsx

@@ -30,7 +30,6 @@ import { Space, Button, Radio } from 'antd'
 import { GithubOutlined } from '@ant-design/icons'
 //import { Sandbox } from '@designable/react-sandbox'
 import 'antd/dist/antd.less'
-import './theme.less'
 
 const RootBehavior = createBehavior({
   name: 'Root',

examples/sandbox/.npmignore

@@ -0,0 +1,4 @@
+node_modules
+*.log
+build
+__tests__

examples/sandbox/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.

examples/sandbox/README.md

@@ -0,0 +1 @@
+# @designable/playground

examples/sandbox/config/template.ejs

@@ -0,0 +1,15 @@
+<!DOCTYPE html>
+<head>
+  <title>
+    Designable Playground
+  </title>
+</head>
+<body>
+  <div id="root">
+  </div>
+  <script src="https://unpkg.com/@formily/reactive/dist/formily.reactive.umd.production.js"></script>
+  <script src="https://unpkg.com/moment/min/moment-with-locales.js"></script>
+  <script src="https://unpkg.com/react/umd/react.development.js"></script>
+  <script src="https://unpkg.com/react-dom/umd/react-dom.development.js"></script>
+  <script src="https://unpkg.com/antd/dist/antd-with-locales.min.js"></script>
+</body>

examples/sandbox/config/webpack.base.ts

@@ -0,0 +1,103 @@
+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'),
+    sandbox: path.resolve(__dirname, '../src/sandbox'),
+  },
+  output: {
+    path: path.resolve(__dirname, '../dist'),
+    filename: '[name].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]',
+        },
+      },
+    ],
+  },
+}

examples/sandbox/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,
+  },
+}

examples/sandbox/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,
+  },
+}

examples/sandbox/package.json

@@ -0,0 +1,41 @@
+{
+  "name": "@designable/sandbox-example",
+  "version": "1.0.0-beta.39",
+  "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.39",
+    "@designable/react": "1.0.0-beta.39",
+    "@designable/react-sandbox": "1.0.0-beta.39",
+    "@designable/react-settings-form": "1.0.0-beta.39",
+    "@designable/shared": "1.0.0-beta.39",
+    "@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"
+}