diff --git a/README.md b/README.md
index 5cc49c1..9e2eed9 100644
--- a/README.md
+++ b/README.md
@@ -1,33 +1,7 @@
-<p align="center">
-<img width="600" src="https://img.alicdn.com/imgextra/i1/O1CN01bg1tTN1p5ZOPmhKV0_!!6000000005309-55-tps-2200-981.svg">
-</p>
+# Formily 设计器
----
+## 运行
-## Introduction
+参考：[designable 工程结构](https://www.yuque.com/xjchenhao/development/rncluc#wJc7Z)
-If you are worrying about something builder, Such as form builder/table builder/chart builder/app builder etc.
-Designable is your perfect choice.
-
-## Screenshot
-
-<img src="https://img.alicdn.com/imgextra/i1/O1CN01UYmA8f1apczHZRygt_!!6000000003379-2-tps-3040-1802.png" style="box-shadow:0px 0px 20px #aaa;border:1px solid #ddd"/>
-
-## Features
-
-- 🚀 High performance, Smooth and beautiful drag and drop experience
-- 💡 Full scene coverage
-- 🎨 Support Low Code and No Code
-- 🏅 Strong scalability
-
-## Website
-
-[playground](https://designable.netlify.app)
-
-## Contributors
-
-This project exists thanks to all the people who contribute.
-
-<p>
-<a href="https://github.com/alibaba/designable/graphs/contributors"><img src="https://contrib.rocks/image?repo=alibaba/designable" /></a>
-</p>
+需要进入 formily/antd 目录，再运行 `npm run start` 左侧面板就能看到很多组件了
diff --git a/examples/.eslintrc b/examples/.eslintrc
deleted file mode 100644
index 55fbaa1..0000000
--- a/examples/.eslintrc
+++ /dev/null
@@ -1,75 +0,0 @@
-{
- "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/jsx-key": 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"
- }
- }
- ]
-}
diff --git a/examples/basic/.npmignore b/examples/basic/.npmignore
deleted file mode 100644
index cc5cbf1..0000000
--- a/examples/basic/.npmignore
+++ /dev/null
@@ -1,4 +0,0 @@
-node_modules
-*.log
-build
-__tests__
\ No newline at end of file
diff --git a/examples/basic/LICENSE.md b/examples/basic/LICENSE.md
deleted file mode 100644
index 509632e..0000000
--- a/examples/basic/LICENSE.md
+++ /dev/null
@@ -1,20 +0,0 @@
-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/basic/README.md b/examples/basic/README.md
deleted file mode 100644
index 7490a93..0000000
--- a/examples/basic/README.md
+++ /dev/null
@@ -1 +0,0 @@
-# @designable/playground
diff --git a/examples/basic/config/template.ejs b/examples/basic/config/template.ejs
deleted file mode 100644
index 02784b4..0000000
--- a/examples/basic/config/template.ejs
+++ /dev/null
@@ -1,15 +0,0 @@
-<!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>
\ No newline at end of file
diff --git a/examples/basic/config/webpack.base.ts b/examples/basic/config/webpack.base.ts
deleted file mode 100644
index dbe282a..0000000
--- a/examples/basic/config/webpack.base.ts
+++ /dev/null
@@ -1,102 +0,0 @@
-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/basic/config/webpack.dev.ts b/examples/basic/config/webpack.dev.ts
deleted file mode 100644
index e39bec5..0000000
--- a/examples/basic/config/webpack.dev.ts
+++ /dev/null
@@ -1,52 +0,0 @@
-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/basic/config/webpack.prod.ts b/examples/basic/config/webpack.prod.ts
deleted file mode 100644
index f031583..0000000
--- a/examples/basic/config/webpack.prod.ts
+++ /dev/null
@@ -1,36 +0,0 @@
-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/basic/package.json b/examples/basic/package.json
deleted file mode 100644
index 9b7f570..0000000
--- a/examples/basic/package.json
+++ /dev/null
@@ -1,41 +0,0 @@
-{
- "name": "@designable/basic-example",
- "version": "1.0.0-beta.45",
- "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.45",
- "@designable/react": "1.0.0-beta.45",
- "@designable/react-sandbox": "1.0.0-beta.45",
- "@designable/react-settings-form": "1.0.0-beta.45",
- "@designable/shared": "1.0.0-beta.45",
- "@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/basic/src/content.tsx b/examples/basic/src/content.tsx
deleted file mode 100644
index 3f8cf20..0000000
--- a/examples/basic/src/content.tsx
+++ /dev/null
@@ -1,49 +0,0 @@
-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: observer((props) => {
- return (
- <div
- {...props}
- style={{
- width: 200,
- height: 100,
- ...props.style,
- background: '#eee',
- border: '1px solid #ddd',
- display: 'flex',
- padding: 10,
- justifyContent: 'center',
- alignItems: 'center',
- }}
- >
- {props.children ? props.children : <span>拖拽字段进入该区域</span>}
- </div>
- )
- }),
- }}
- />
-)
diff --git a/examples/basic/src/main.tsx b/examples/basic/src/main.tsx
deleted file mode 100644
index b8535b3..0000000
--- a/examples/basic/src/main.tsx
+++ /dev/null
@@ -1,456 +0,0 @@
-import React, { useEffect } from 'react'
-import ReactDOM from 'react-dom'
-import {
- Designer,
- IconWidget,
- Workbench,
- ViewPanel,
- DesignerToolsWidget,
- ViewToolsWidget,
- OutlineTreeWidget,
- ResourceWidget,
- StudioPanel,
- CompositePanel,
- WorkspacePanel,
- ToolbarPanel,
- ViewportPanel,
- SettingsPanel,
- HistoryWidget,
-} from '@designable/react'
-import { SettingsForm, MonacoInput } from '@designable/react-settings-form'
-import { observer } from '@formily/react'
-import {
- createDesigner,
- createResource,
- createBehavior,
- GlobalRegistry,
-} from '@designable/core'
-import { Content } from './content'
-import { Space, Button, Radio } from 'antd'
-import { GithubOutlined } from '@ant-design/icons'
-//import { Sandbox } from '@designable/react-sandbox'
-import 'antd/dist/antd.less'
-
-const RootBehavior = createBehavior({
- name: 'Root',
- selector: 'Root',
- designerProps: {
- droppable: true,
- },
- designerLocales: {
- 'zh-CN': {
- title: '根组件',
- },
- 'en-US': {
- title: 'Root',
- },
- 'ko-KR': {
- title: '루트',
- },
- },
-})
-
-const InputBehavior = createBehavior({
- name: 'Input',
- selector: (node) =>
- node.componentName === 'Field' && node.props['x-component'] === 'Input',
- designerProps: {
- propsSchema: {
- type: 'object',
- $namespace: 'Field',
- properties: {
- 'field-properties': {
- type: 'void',
- 'x-component': 'CollapseItem',
- title: '字段属性',
- properties: {
- title: {
- type: 'string',
- 'x-decorator': 'FormItem',
- 'x-component': 'Input',
- },
-
- hidden: {
- type: 'string',
- 'x-decorator': 'FormItem',
- 'x-component': 'Switch',
- },
- default: {
- 'x-decorator': 'FormItem',
- 'x-component': 'ValueInput',
- },
- test: {
- type: 'void',
- title: '测试',
- 'x-decorator': 'FormItem',
- 'x-component': 'DrawerSetter',
- 'x-component-props': {
- text: '打开抽屉',
- },
- properties: {
- test: {
- type: 'string',
- title: '测试输入',
- 'x-decorator': 'FormItem',
- 'x-component': 'Input',
- },
- },
- },
- },
- },
-
- 'component-styles': {
- type: 'void',
- title: '样式',
- 'x-component': 'CollapseItem',
- properties: {
- 'style.width': {
- type: 'string',
- 'x-decorator': 'FormItem',
- 'x-component': 'SizeInput',
- },
- 'style.height': {
- type: 'string',
- 'x-decorator': 'FormItem',
- 'x-component': 'SizeInput',
- },
- 'style.display': {
- 'x-component': 'DisplayStyleSetter',
- },
- 'style.background': {
- 'x-component': 'BackgroundStyleSetter',
- },
- 'style.boxShadow': {
- 'x-component': 'BoxShadowStyleSetter',
- },
- 'style.font': {
- 'x-component': 'FontStyleSetter',
- },
- 'style.margin': {
- 'x-component': 'BoxStyleSetter',
- },
- 'style.padding': {
- 'x-component': 'BoxStyleSetter',
- },
- 'style.borderRadius': {
- 'x-component': 'BorderRadiusStyleSetter',
- },
- 'style.border': {
- 'x-component': 'BorderStyleSetter',
- },
- },
- },
- },
- },
- },
- designerLocales: {
- 'zh-CN': {
- title: '输入框',
- settings: {
- title: '标题',
- hidden: '是否隐藏',
- default: '默认值',
- style: {
- width: '宽度',
- height: '高度',
- display: '展示',
- background: '背景',
- boxShadow: '阴影',
- font: '字体',
- margin: '外边距',
- padding: '内边距',
- borderRadius: '圆角',
- border: '边框',
- },
- },
- },
- 'en-US': {
- title: 'Input',
- settings: {
- title: 'Title',
- hidden: 'Hidden',
- default: 'Default Value',
- style: {
- width: 'Width',
- height: 'Height',
- display: 'Display',
- background: 'Background',
- boxShadow: 'Box Shadow',
- font: 'Font',
- margin: 'Margin',
- padding: 'Padding',
- borderRadius: 'Border Radius',
- border: 'Border',
- },
- },
- },
- 'ko-KR': {
- title: '입력',
- settings: {
- title: '텍스트',
- hidden: '숨김 여부',
- default: '기본 설정 값',
- style: {
- width: '너비',
- height: '높이',
- display: '디스플레이',
- background: '배경',
- boxShadow: '그림자 박스',
- font: '폰트',
- margin: '마진',
- padding: '패딩',
- borderRadius: '테두리 굴곡',
- border: '테두리',
- },
- },
- },
- },
-})
-
-const CardBehavior = createBehavior({
- name: 'Card',
- selector: 'Card',
- designerProps: {
- droppable: true,
- resizable: {
- width(node, element) {
- const width = Number(
- node.props?.style?.width ?? element.getBoundingClientRect().width
- )
- return {
- plus: () => {
- node.props = node.props || {}
- node.props.style = node.props.style || {}
- node.props.style.width = width + 10
- },
- minus: () => {
- node.props = node.props || {}
- node.props.style = node.props.style || {}
- node.props.style.width = width - 10
- },
- }
- },
- height(node, element) {
- const height = Number(
- node.props?.style?.height ?? element.getBoundingClientRect().height
- )
- return {
- plus: () => {
- node.props = node.props || {}
- node.props.style = node.props.style || {}
- node.props.style.height = height + 10
- },
- minus: () => {
- node.props = node.props || {}
- node.props.style = node.props.style || {}
- node.props.style.height = height - 10
- },
- }
- },
- },
- translatable: {
- x(node, element, diffX) {
- const left =
- parseInt(node.props?.style?.left ?? element?.style.left) || 0
- const rect = element.getBoundingClientRect()
- return {
- translate: () => {
- node.props = node.props || {}
- node.props.style = node.props.style || {}
- node.props.style.position = 'absolute'
- node.props.style.width = rect.width
- node.props.style.height = rect.height
- node.props.style.left = left + parseInt(String(diffX)) + 'px'
- },
- }
- },
- y(node, element, diffY) {
- const top = parseInt(node.props?.style?.top ?? element?.style.top) || 0
- const rect = element.getBoundingClientRect()
- return {
- translate: () => {
- node.props = node.props || {}
- node.props.style = node.props.style || {}
- node.props.style.position = 'absolute'
- node.props.style.width = rect.width
- node.props.style.height = rect.height
- node.props.style.top = top + parseInt(String(diffY)) + 'px'
- },
- }
- },
- },
- },
- designerLocales: {
- 'zh-CN': {
- title: '卡片',
- },
- 'en-US': {
- title: 'Card',
- },
- 'ko-KR': {
- title: '카드',
- },
- },
-})
-
-GlobalRegistry.setDesignerBehaviors([RootBehavior, InputBehavior, CardBehavior])
-
-const Input = createResource({
- title: {
- 'zh-CN': '输入框',
- 'en-US': 'Input',
- 'ko-KR': '입력 상자',
- },
- icon: 'InputSource',
- elements: [
- {
- componentName: 'Field',
- props: {
- title: '输入框',
- type: 'string',
- 'x-decorator': 'FormItem',
- 'x-component': 'Input',
- },
- },
- ],
-})
-
-const Card = createResource({
- title: {
- 'zh-CN': '卡片',
- 'en-US': 'Card',
- 'ko-KR': '카드 상자',
- },
- icon: 'CardSource',
- elements: [
- {
- componentName: 'Card',
- props: {
- title: '卡片',
- },
- },
- ],
-})
-
-GlobalRegistry.registerDesignerLocales({
- 'zh-CN': {
- sources: {
- Inputs: '输入控件',
- Displays: '展示控件',
- Feedbacks: '反馈控件',
- },
- },
- 'en-US': {
- sources: {
- Inputs: 'Inputs',
- Displays: 'Displays',
- Feedbacks: 'Feedbacks',
- },
- },
- 'ko-KR': {
- sources: {
- Inputs: '입력',
- Displays: '디스플레이',
- Feedbacks: '피드백',
- },
- },
-})
-
-const Logo: React.FC = () => (
- <div style={{ display: 'flex', alignItems: 'center', fontSize: 14 }}>
- <IconWidget
- infer="Logo"
- style={{ margin: 10, height: 24, width: 'auto' }}
- />
- </div>
-)
-
-const Actions = observer(() => {
- const supportLocales = ['zh-cn', 'en-us', 'ko-kr']
- useEffect(() => {
- if (!supportLocales.includes(GlobalRegistry.getDesignerLanguage())) {
- GlobalRegistry.setDesignerLanguage('zh-cn')
- }
- }, [])
-
- return (
- <Space style={{ marginRight: 10 }}>
- <Radio.Group
- value={GlobalRegistry.getDesignerLanguage()}
- optionType="button"
- options={[
- { label: 'English', value: 'en-us' },
- { label: '简体中文', value: 'zh-cn' },
- { label: '한국어', value: 'ko-kr' },
- ]}
- onChange={(e) => {
- GlobalRegistry.setDesignerLanguage(e.target.value)
- }}
- />
- <Button href="https://github.com/alibaba/designable" target="_blank">
- <GithubOutlined />
- Github
- </Button>
- <Button>保存</Button>
- <Button type="primary">发布</Button>
- </Space>
- )
-})
-
-const engine = createDesigner()
-const App = () => {
- return (
- <Designer engine={engine}>
- <Workbench>
- <StudioPanel logo={<Logo />} actions={<Actions />}>
- <CompositePanel>
- <CompositePanel.Item title="panels.Component" icon="Component">
- <ResourceWidget title="sources.Inputs" sources={[Input, Card]} />
- <ResourceWidget
- title="sources.Displays"
- sources={[Input, Card]}
- />
- <ResourceWidget
- title="sources.Feedbacks"
- sources={[Input, Card]}
- />
- </CompositePanel.Item>
- <CompositePanel.Item title="panels.OutlinedTree" icon="Outline">
- <OutlineTreeWidget />
- </CompositePanel.Item>
- <CompositePanel.Item title="panels.History" icon="History">
- <HistoryWidget />
- </CompositePanel.Item>
- </CompositePanel>
- <WorkspacePanel>
- <ToolbarPanel>
- <DesignerToolsWidget />
- <ViewToolsWidget />{' '}
- </ToolbarPanel>
- <ViewportPanel>
- <ViewPanel type="DESIGNABLE">{() => <Content />}</ViewPanel>
- <ViewPanel type="JSONTREE">
- {() => {
- return (
- <div style={{ overflow: 'hidden', height: '100%' }}>
- <MonacoInput
- language="javascript"
- helpCode="//hello world"
- defaultValue={`<div><div>123123<div>123123<div>123123<div>123123</div></div></div></div></div>`}
- />
- </div>
- )
- }}
- </ViewPanel>
- </ViewportPanel>
- </WorkspacePanel>
- <SettingsPanel title="panels.PropertySettings">
- <SettingsForm uploadAction="https://www.mocky.io/v2/5cc8019d300000980a055e76" />
- </SettingsPanel>
- </StudioPanel>
- </Workbench>
- </Designer>
- )
-}
-
-ReactDOM.render(<App />, document.getElementById('root'))
diff --git a/examples/basic/src/sandbox.tsx b/examples/basic/src/sandbox.tsx
deleted file mode 100644
index 0ca6319..0000000
--- a/examples/basic/src/sandbox.tsx
+++ /dev/null
@@ -1,8 +0,0 @@
-import React from 'react'
-import { Content } from './content'
-import { renderSandboxContent } from '@designable/react-sandbox'
-import './theme.less'
-
-renderSandboxContent(() => {
- return <Content />
-})
diff --git a/examples/basic/tsconfig.build.json b/examples/basic/tsconfig.build.json
deleted file mode 100644
index 8f2e5f5..0000000
--- a/examples/basic/tsconfig.build.json
+++ /dev/null
@@ -1,10 +0,0 @@
-{
- "extends": "./tsconfig.json",
- "compilerOptions": {
- "outDir": "./lib",
- "paths": {
- "@designable/*": ["../*"]
- },
- "declaration": true
- }
-}
diff --git a/examples/basic/tsconfig.json b/examples/basic/tsconfig.json
deleted file mode 100644
index c6865c2..0000000
--- a/examples/basic/tsconfig.json
+++ /dev/null
@@ -1,5 +0,0 @@
-{
- "extends": "../../tsconfig.json",
- "include": ["./src/**/*.ts", "./src/**/*.tsx"],
- "exclude": ["./src/__tests__/*", "./esm/*", "./lib/*"]
-}
diff --git a/examples/multi-workspace/.npmignore b/examples/multi-workspace/.npmignore
deleted file mode 100644
index cc5cbf1..0000000
--- a/examples/multi-workspace/.npmignore
+++ /dev/null
@@ -1,4 +0,0 @@
-node_modules
-*.log
-build
-__tests__
\ No newline at end of file
diff --git a/examples/multi-workspace/LICENSE.md b/examples/multi-workspace/LICENSE.md
deleted file mode 100644
index 509632e..0000000
--- a/examples/multi-workspace/LICENSE.md
+++ /dev/null
@@ -1,20 +0,0 @@
-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
deleted file mode 100644
index 7490a93..0000000
--- a/examples/multi-workspace/README.md
+++ /dev/null
@@ -1 +0,0 @@
-# @designable/playground
diff --git a/examples/multi-workspace/config/template.ejs b/examples/multi-workspace/config/template.ejs
deleted file mode 100644
index 02784b4..0000000
--- a/examples/multi-workspace/config/template.ejs
+++ /dev/null
@@ -1,15 +0,0 @@
-<!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>
\ No newline at end of file
diff --git a/examples/multi-workspace/config/webpack.base.ts b/examples/multi-workspace/config/webpack.base.ts
deleted file mode 100644
index dbe282a..0000000
--- a/examples/multi-workspace/config/webpack.base.ts
+++ /dev/null
@@ -1,102 +0,0 @@
-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
deleted file mode 100644
index e39bec5..0000000
--- a/examples/multi-workspace/config/webpack.dev.ts
+++ /dev/null
@@ -1,52 +0,0 @@
-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
deleted file mode 100644
index f031583..0000000
--- a/examples/multi-workspace/config/webpack.prod.ts
+++ /dev/null
@@ -1,36 +0,0 @@
-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
deleted file mode 100644
index 2dbf614..0000000
--- a/examples/multi-workspace/package.json
+++ /dev/null
@@ -1,41 +0,0 @@
-{
- "name": "@designable/multi-workspace-example",
- "version": "1.0.0-beta.45",
- "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.45",
- "@designable/react": "1.0.0-beta.45",
- "@designable/react-sandbox": "1.0.0-beta.45",
- "@designable/react-settings-form": "1.0.0-beta.45",
- "@designable/shared": "1.0.0-beta.45",
- "@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
deleted file mode 100644
index d432dcb..0000000
--- a/examples/multi-workspace/src/content.tsx
+++ /dev/null
@@ -1,47 +0,0 @@
-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>
- )
- },
- }}
- />
-)
diff --git a/examples/multi-workspace/src/main.tsx b/examples/multi-workspace/src/main.tsx
deleted file mode 100644
index fd53baa..0000000
--- a/examples/multi-workspace/src/main.tsx
+++ /dev/null
@@ -1,407 +0,0 @@
-import React from 'react'
-import ReactDOM from 'react-dom'
-import {
- Designer,
- IconWidget,
- Workbench,
- Workspace,
- ViewPanel,
- DesignerToolsWidget,
- ViewToolsWidget,
- OutlineTreeWidget,
- ResourceWidget,
- StudioPanel,
- CompositePanel,
- WorkspacePanel,
- ToolbarPanel,
- ViewportPanel,
- SettingsPanel,
- HistoryWidget,
-} from '@designable/react'
-import { SettingsForm, MonacoInput } from '@designable/react-settings-form'
-import { observer } from '@formily/react'
-import {
- createDesigner,
- createResource,
- createBehavior,
- GlobalRegistry,
-} from '@designable/core'
-import { Content } from './content'
-import { Space, Button, Radio } from 'antd'
-import { GithubOutlined } from '@ant-design/icons'
-import 'antd/dist/antd.less'
-
-const RootBehavior = createBehavior({
- name: 'Root',
- selector: 'Root',
- designerProps: {
- droppable: true,
- },
- designerLocales: {
- 'zh-CN': {
- title: '根组件',
- },
- 'en-US': {
- title: 'Root',
- },
- 'ko-KR': {
- title: '루트',
- },
- },
-})
-
-const InputBehavior = createBehavior({
- name: 'Input',
- selector: (node) =>
- node.componentName === 'Field' && node.props['x-component'] === 'Input',
- designerProps: {
- propsSchema: {
- type: 'object',
- $namespace: 'Field',
- properties: {
- 'field-properties': {
- type: 'void',
- 'x-component': 'CollapseItem',
- title: '字段属性',
- properties: {
- title: {
- type: 'string',
- 'x-decorator': 'FormItem',
- 'x-component': 'Input',
- },
-
- hidden: {
- type: 'string',
- 'x-decorator': 'FormItem',
- 'x-component': 'Switch',
- },
- default: {
- 'x-decorator': 'FormItem',
- 'x-component': 'ValueInput',
- },
- test: {
- type: 'void',
- title: '测试',
- 'x-decorator': 'FormItem',
- 'x-component': 'DrawerSetter',
- 'x-component-props': {
- text: '打开抽屉',
- },
- properties: {
- test: {
- type: 'string',
- title: '测试输入',
- 'x-decorator': 'FormItem',
- 'x-component': 'Input',
- },
- },
- },
- },
- },
-
- 'component-styles': {
- type: 'void',
- title: '样式',
- 'x-component': 'CollapseItem',
- properties: {
- 'style.width': {
- type: 'string',
- 'x-decorator': 'FormItem',
- 'x-component': 'SizeInput',
- },
- 'style.height': {
- type: 'string',
- 'x-decorator': 'FormItem',
- 'x-component': 'SizeInput',
- },
- 'style.display': {
- 'x-component': 'DisplayStyleSetter',
- },
- 'style.background': {
- 'x-component': 'BackgroundStyleSetter',
- },
- 'style.boxShadow': {
- 'x-component': 'BoxShadowStyleSetter',
- },
- 'style.font': {
- 'x-component': 'FontStyleSetter',
- },
- 'style.margin': {
- 'x-component': 'BoxStyleSetter',
- },
- 'style.padding': {
- 'x-component': 'BoxStyleSetter',
- },
- 'style.borderRadius': {
- 'x-component': 'BorderRadiusStyleSetter',
- },
- 'style.border': {
- 'x-component': 'BorderStyleSetter',
- },
- },
- },
- },
- },
- },
- designerLocales: {
- 'zh-CN': {
- title: '输入框',
- settings: {
- title: '标题',
- hidden: '是否隐藏',
- default: '默认值',
- style: {
- width: '宽度',
- height: '高度',
- display: '展示',
- background: '背景',
- boxShadow: '阴影',
- font: '字体',
- margin: '外边距',
- padding: '内边距',
- borderRadius: '圆角',
- border: '边框',
- },
- },
- },
- 'en-US': {
- title: 'Input',
- settings: {
- title: 'Title',
- hidden: 'Hidden',
- default: 'Default Value',
- style: {
- width: 'Width',
- height: 'Height',
- display: 'Display',
- background: 'Background',
- boxShadow: 'Box Shadow',
- font: 'Font',
- margin: 'Margin',
- padding: 'Padding',
- borderRadius: 'Border Radius',
- border: 'Border',
- },
- },
- },
- 'ko-KR': {
- title: '입력',
- settings: {
- title: '텍스트',
- hidden: '숨김 여부',
- default: '기본 설정 값',
- style: {
- width: '너비',
- height: '높이',
- display: '디스플레이',
- background: '배경',
- boxShadow: '그림자 박스',
- font: '폰트',
- margin: '마진',
- padding: '패딩',
- borderRadius: '테두리 굴곡',
- border: '테두리',
- },
- },
- },
- },
-})
-
-const CardBehavior = createBehavior({
- name: 'Card',
- selector: 'Card',
- designerProps: {
- droppable: true,
- },
- designerLocales: {
- 'zh-CN': {
- title: '卡片',
- },
- 'en-US': {
- title: 'Card',
- },
- 'ko-KR': {
- title: '카드',
- },
- },
-})
-
-GlobalRegistry.setDesignerBehaviors([RootBehavior, InputBehavior, CardBehavior])
-
-const Input = createResource({
- title: {
- 'zh-CN': '输入框',
- 'en-US': 'Input',
- 'ko-KR': '입력 상자',
- },
- icon: 'InputSource',
- elements: [
- {
- componentName: 'Field',
- props: {
- title: '输入框',
- type: 'string',
- 'x-decorator': 'FormItem',
- 'x-component': 'Input',
- },
- },
- ],
-})
-
-const Card = createResource({
- title: {
- 'zh-CN': '卡片',
- 'en-US': 'Card',
- 'ko-KR': '카드 상자',
- },
- icon: 'CardSource',
- elements: [
- {
- componentName: 'Card',
- props: {
- title: '卡片',
- },
- },
- ],
-})
-
-GlobalRegistry.registerDesignerLocales({
- 'zh-CN': {
- sources: {
- Inputs: '输入控件',
- Displays: '展示控件',
- Feedbacks: '反馈控件',
- },
- },
- 'en-US': {
- sources: {
- Inputs: 'Inputs',
- Displays: 'Displays',
- Feedbacks: 'Feedbacks',
- },
- },
- 'ko-KR': {
- sources: {
- Inputs: '입력',
- Displays: '디스플레이',
- Feedbacks: '피드백',
- },
- },
-})
-
-const Logo: React.FC = () => (
- <div style={{ display: 'flex', alignItems: 'center', fontSize: 14 }}>
- <IconWidget
- infer="Logo"
- style={{ margin: 10, height: 24, width: 'auto' }}
- />
- </div>
-)
-
-const Actions = observer(() => (
- <Space style={{ marginRight: 10 }}>
- <Radio.Group
- value={GlobalRegistry.getDesignerLanguage()}
- optionType="button"
- options={[
- { label: 'English', value: 'en-us' },
- { label: '简体中文', value: 'zh-cn' },
- { label: '한국어', value: 'ko-kr' },
- ]}
- onChange={(e) => {
- GlobalRegistry.setDesignerLanguage(e.target.value)
- }}
- />
- <Button href="https://github.com/alibaba/designable" target="_blank">
- <GithubOutlined />
- Github
- </Button>
- <Button>保存</Button>
- <Button type="primary">发布</Button>
- </Space>
-))
-
-const engine = createDesigner()
-window.engine = engine
-const App = () => {
- return (
- <Designer engine={engine}>
- <Workbench>
- <StudioPanel logo={<Logo />} actions={<Actions />}>
- <CompositePanel>
- <CompositePanel.Item title="panels.Component" icon="Component">
- <ResourceWidget title="sources.Inputs" sources={[Input, Card]} />
- <ResourceWidget
- title="sources.Displays"
- sources={[Input, Card]}
- />
- <ResourceWidget
- title="sources.Feedbacks"
- sources={[Input, Card]}
- />
- </CompositePanel.Item>
- <CompositePanel.Item title="panels.OutlinedTree" icon="Outline">
- <OutlineTreeWidget />
- </CompositePanel.Item>
- <CompositePanel.Item title="panels.History" icon="History">
- <HistoryWidget />
- </CompositePanel.Item>
- </CompositePanel>
- <Workspace id="form-1">
- <WorkspacePanel>
- <ToolbarPanel>
- <DesignerToolsWidget />
- <ViewToolsWidget />{' '}
- </ToolbarPanel>
- <ViewportPanel>
- <ViewPanel type="DESIGNABLE">{() => <Content />}</ViewPanel>
- <ViewPanel type="JSONTREE">
- {() => {
- return (
- <div style={{ overflow: 'hidden', height: '100%' }}>
- <MonacoInput
- language="javascript"
- helpCode="//hello world"
- defaultValue={`<div><div>123123<div>123123<div>123123<div>123123</div></div></div></div></div>`}
- />
- </div>
- )
- }}
- </ViewPanel>
- </ViewportPanel>
- </WorkspacePanel>
- </Workspace>
- <Workspace id="form-2">
- <WorkspacePanel>
- <ToolbarPanel>
- <DesignerToolsWidget />
- <ViewToolsWidget />{' '}
- </ToolbarPanel>
- <ViewportPanel>
- <ViewPanel type="DESIGNABLE">{() => <Content />}</ViewPanel>
- <ViewPanel type="JSONTREE">
- {() => {
- return (
- <div style={{ overflow: 'hidden', height: '100%' }}>
- <MonacoInput
- language="javascript"
- helpCode="//hello world"
- defaultValue={`<div><div>123123<div>123123<div>123123<div>123123</div></div></div></div></div>`}
- />
- </div>
- )
- }}
- </ViewPanel>
- </ViewportPanel>
- </WorkspacePanel>
- </Workspace>
- <SettingsPanel title="panels.PropertySettings">
- <SettingsForm uploadAction="https://www.mocky.io/v2/5cc8019d300000980a055e76" />
- </SettingsPanel>
- </StudioPanel>
- </Workbench>
- </Designer>
- )
-}
-
-ReactDOM.render(<App />, document.getElementById('root'))
diff --git a/examples/multi-workspace/tsconfig.build.json b/examples/multi-workspace/tsconfig.build.json
deleted file mode 100644
index 8f2e5f5..0000000
--- a/examples/multi-workspace/tsconfig.build.json
+++ /dev/null
@@ -1,10 +0,0 @@
-{
- "extends": "./tsconfig.json",
- "compilerOptions": {
- "outDir": "./lib",
- "paths": {
- "@designable/*": ["../*"]
- },
- "declaration": true
- }
-}
diff --git a/examples/multi-workspace/tsconfig.json b/examples/multi-workspace/tsconfig.json
deleted file mode 100644
index c6865c2..0000000
--- a/examples/multi-workspace/tsconfig.json
+++ /dev/null
@@ -1,5 +0,0 @@
-{
- "extends": "../../tsconfig.json",
- "include": ["./src/**/*.ts", "./src/**/*.tsx"],
- "exclude": ["./src/__tests__/*", "./esm/*", "./lib/*"]
-}
diff --git a/examples/sandbox-multi-workspace/.npmignore b/examples/sandbox-multi-workspace/.npmignore
deleted file mode 100644
index cc5cbf1..0000000
--- a/examples/sandbox-multi-workspace/.npmignore
+++ /dev/null
@@ -1,4 +0,0 @@
-node_modules
-*.log
-build
-__tests__
\ No newline at end of file
diff --git a/examples/sandbox-multi-workspace/LICENSE.md b/examples/sandbox-multi-workspace/LICENSE.md
deleted file mode 100644
index 509632e..0000000
--- a/examples/sandbox-multi-workspace/LICENSE.md
+++ /dev/null
@@ -1,20 +0,0 @@
-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/sandbox-multi-workspace/README.md b/examples/sandbox-multi-workspace/README.md
deleted file mode 100644
index 7490a93..0000000
--- a/examples/sandbox-multi-workspace/README.md
+++ /dev/null
@@ -1 +0,0 @@
-# @designable/playground
diff --git a/examples/sandbox-multi-workspace/config/template.ejs b/examples/sandbox-multi-workspace/config/template.ejs
deleted file mode 100644
index b0369ec..0000000
--- a/examples/sandbox-multi-workspace/config/template.ejs
+++ /dev/null
@@ -1,15 +0,0 @@
-<!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.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>
\ No newline at end of file
diff --git a/examples/sandbox-multi-workspace/config/webpack.base.ts b/examples/sandbox-multi-workspace/config/webpack.base.ts
deleted file mode 100644
index 5c193d8..0000000
--- a/examples/sandbox-multi-workspace/config/webpack.base.ts
+++ /dev/null
@@ -1,103 +0,0 @@
-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]',
- },
- },
- ],
- },
-}
diff --git a/examples/sandbox-multi-workspace/config/webpack.dev.ts b/examples/sandbox-multi-workspace/config/webpack.dev.ts
deleted file mode 100644
index e39bec5..0000000
--- a/examples/sandbox-multi-workspace/config/webpack.dev.ts
+++ /dev/null
@@ -1,52 +0,0 @@
-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/sandbox-multi-workspace/config/webpack.prod.ts b/examples/sandbox-multi-workspace/config/webpack.prod.ts
deleted file mode 100644
index f031583..0000000
--- a/examples/sandbox-multi-workspace/config/webpack.prod.ts
+++ /dev/null
@@ -1,36 +0,0 @@
-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/sandbox-multi-workspace/package.json b/examples/sandbox-multi-workspace/package.json
deleted file mode 100644
index 0e6a337..0000000
--- a/examples/sandbox-multi-workspace/package.json
+++ /dev/null
@@ -1,41 +0,0 @@
-{
- "name": "@designable/sandbox-multi-workspace-example",
- "version": "1.0.0-beta.45",
- "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.45",
- "@designable/react": "1.0.0-beta.45",
- "@designable/react-sandbox": "1.0.0-beta.45",
- "@designable/react-settings-form": "1.0.0-beta.45",
- "@designable/shared": "1.0.0-beta.45",
- "@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/sandbox-multi-workspace/src/content.tsx b/examples/sandbox-multi-workspace/src/content.tsx
deleted file mode 100644
index d432dcb..0000000
--- a/examples/sandbox-multi-workspace/src/content.tsx
+++ /dev/null
@@ -1,47 +0,0 @@
-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>
- )
- },
- }}
- />
-)
diff --git a/examples/sandbox-multi-workspace/src/main.tsx b/examples/sandbox-multi-workspace/src/main.tsx
deleted file mode 100644
index c8fb656..0000000
--- a/examples/sandbox-multi-workspace/src/main.tsx
+++ /dev/null
@@ -1,430 +0,0 @@
-import React from 'react'
-import ReactDOM from 'react-dom'
-import {
- Designer,
- IconWidget,
- Workbench,
- Workspace,
- ViewPanel,
- DesignerToolsWidget,
- ViewToolsWidget,
- OutlineTreeWidget,
- ResourceWidget,
- StudioPanel,
- CompositePanel,
- WorkspacePanel,
- ToolbarPanel,
- ViewportPanel,
- SettingsPanel,
- HistoryWidget,
-} from '@designable/react'
-import { SettingsForm, MonacoInput } from '@designable/react-settings-form'
-import { observer } from '@formily/react'
-import {
- createDesigner,
- createResource,
- createBehavior,
- GlobalRegistry,
-} from '@designable/core'
-import { Space, Button, Radio } from 'antd'
-import { GithubOutlined } from '@ant-design/icons'
-import { Sandbox } from '@designable/react-sandbox'
-import 'antd/dist/antd.less'
-
-const RootBehavior = createBehavior({
- name: 'Root',
- selector: 'Root',
- designerProps: {
- droppable: true,
- },
- designerLocales: {
- 'zh-CN': {
- title: '根组件',
- },
- 'en-US': {
- title: 'Root',
- },
- 'ko-KR': {
- title: '루트',
- },
- },
-})
-
-const InputBehavior = createBehavior({
- name: 'Input',
- selector: (node) =>
- node.componentName === 'Field' && node.props['x-component'] === 'Input',
- designerProps: {
- propsSchema: {
- type: 'object',
- $namespace: 'Field',
- properties: {
- 'field-properties': {
- type: 'void',
- 'x-component': 'CollapseItem',
- title: '字段属性',
- properties: {
- title: {
- type: 'string',
- 'x-decorator': 'FormItem',
- 'x-component': 'Input',
- },
-
- hidden: {
- type: 'string',
- 'x-decorator': 'FormItem',
- 'x-component': 'Switch',
- },
- default: {
- 'x-decorator': 'FormItem',
- 'x-component': 'ValueInput',
- },
- test: {
- type: 'void',
- title: '测试',
- 'x-decorator': 'FormItem',
- 'x-component': 'DrawerSetter',
- 'x-component-props': {
- text: '打开抽屉',
- },
- properties: {
- test: {
- type: 'string',
- title: '测试输入',
- 'x-decorator': 'FormItem',
- 'x-component': 'Input',
- },
- },
- },
- },
- },
-
- 'component-styles': {
- type: 'void',
- title: '样式',
- 'x-component': 'CollapseItem',
- properties: {
- 'style.width': {
- type: 'string',
- 'x-decorator': 'FormItem',
- 'x-component': 'SizeInput',
- },
- 'style.height': {
- type: 'string',
- 'x-decorator': 'FormItem',
- 'x-component': 'SizeInput',
- },
- 'style.display': {
- 'x-component': 'DisplayStyleSetter',
- },
- 'style.background': {
- 'x-component': 'BackgroundStyleSetter',
- },
- 'style.boxShadow': {
- 'x-component': 'BoxShadowStyleSetter',
- },
- 'style.font': {
- 'x-component': 'FontStyleSetter',
- },
- 'style.margin': {
- 'x-component': 'BoxStyleSetter',
- },
- 'style.padding': {
- 'x-component': 'BoxStyleSetter',
- },
- 'style.borderRadius': {
- 'x-component': 'BorderRadiusStyleSetter',
- },
- 'style.border': {
- 'x-component': 'BorderStyleSetter',
- },
- },
- },
- },
- },
- },
- designerLocales: {
- 'zh-CN': {
- title: '输入框',
- settings: {
- title: '标题',
- hidden: '是否隐藏',
- default: '默认值',
- style: {
- width: '宽度',
- height: '高度',
- display: '展示',
- background: '背景',
- boxShadow: '阴影',
- font: '字体',
- margin: '外边距',
- padding: '内边距',
- borderRadius: '圆角',
- border: '边框',
- },
- },
- },
- 'en-US': {
- title: 'Input',
- settings: {
- title: 'Title',
- hidden: 'Hidden',
- default: 'Default Value',
- style: {
- width: 'Width',
- height: 'Height',
- display: 'Display',
- background: 'Background',
- boxShadow: 'Box Shadow',
- font: 'Font',
- margin: 'Margin',
- padding: 'Padding',
- borderRadius: 'Border Radius',
- border: 'Border',
- },
- },
- },
- 'ko-KR': {
- title: '입력',
- settings: {
- title: '텍스트',
- hidden: '숨김 여부',
- default: '기본 설정 값',
- style: {
- width: '너비',
- height: '높이',
- display: '디스플레이',
- background: '배경',
- boxShadow: '그림자 박스',
- font: '폰트',
- margin: '마진',
- padding: '패딩',
- borderRadius: '테두리 굴곡',
- border: '테두리',
- },
- },
- },
- },
-})
-
-const CardBehavior = createBehavior({
- name: 'Card',
- selector: 'Card',
- designerProps: {
- droppable: true,
- },
- designerLocales: {
- 'zh-CN': {
- title: '卡片',
- },
- 'en-US': {
- title: 'Card',
- },
- 'ko-KR': {
- title: '카드',
- },
- },
-})
-
-GlobalRegistry.setDesignerBehaviors([RootBehavior, InputBehavior, CardBehavior])
-
-const Input = createResource({
- title: {
- 'zh-CN': '输入框',
- 'en-US': 'Input',
- 'ko-KR': '입력 상자',
- },
- icon: 'InputSource',
- elements: [
- {
- componentName: 'Field',
- props: {
- title: '输入框',
- type: 'string',
- 'x-decorator': 'FormItem',
- 'x-component': 'Input',
- },
- },
- ],
-})
-
-const Card = createResource({
- title: {
- 'zh-CN': '卡片',
- 'en-US': 'Card',
- 'ko-KR': '카드 상자',
- },
- icon: 'CardSource',
- elements: [
- {
- componentName: 'Card',
- props: {
- title: '卡片',
- },
- },
- ],
-})
-
-GlobalRegistry.registerDesignerLocales({
- 'zh-CN': {
- sources: {
- Inputs: '输入控件',
- Displays: '展示控件',
- Feedbacks: '反馈控件',
- },
- },
- 'en-US': {
- sources: {
- Inputs: 'Inputs',
- Displays: 'Displays',
- Feedbacks: 'Feedbacks',
- },
- },
- 'ko-KR': {
- sources: {
- Inputs: '입력',
- Displays: '디스플레이',
- Feedbacks: '피드백',
- },
- },
-})
-
-const Logo: React.FC = () => (
- <div style={{ display: 'flex', alignItems: 'center', fontSize: 14 }}>
- <IconWidget
- infer="Logo"
- style={{ margin: 10, height: 24, width: 'auto' }}
- />
- </div>
-)
-
-const Actions = observer(() => (
- <Space style={{ marginRight: 10 }}>
- <Radio.Group
- value={GlobalRegistry.getDesignerLanguage()}
- optionType="button"
- options={[
- { label: 'English', value: 'en-us' },
- { label: '简体中文', value: 'zh-cn' },
- { label: '한국어', value: 'ko-kr' },
- ]}
- onChange={(e) => {
- GlobalRegistry.setDesignerLanguage(e.target.value)
- }}
- />
- <Button href="https://github.com/alibaba/designable" target="_blank">
- <GithubOutlined />
- Github
- </Button>
- <Button>保存</Button>
- <Button type="primary">发布</Button>
- </Space>
-))
-
-const engine = createDesigner()
-const App = () => {
- return (
- <Designer engine={engine}>
- <Workbench>
- <StudioPanel logo={<Logo />} actions={<Actions />}>
- <CompositePanel>
- <CompositePanel.Item title="panels.Component" icon="Component">
- <ResourceWidget title="sources.Inputs" sources={[Input, Card]} />
- <ResourceWidget
- title="sources.Displays"
- sources={[Input, Card]}
- />
- <ResourceWidget
- title="sources.Feedbacks"
- sources={[Input, Card]}
- />
- </CompositePanel.Item>
- <CompositePanel.Item title="panels.OutlinedTree" icon="Outline">
- <OutlineTreeWidget />
- </CompositePanel.Item>
- <CompositePanel.Item title="panels.History" icon="History">
- <HistoryWidget />
- </CompositePanel.Item>
- </CompositePanel>
- <Workspace id="form-1">
- <WorkspacePanel>
- <ToolbarPanel>
- <DesignerToolsWidget />
- <ViewToolsWidget />{' '}
- </ToolbarPanel>
- <ViewportPanel>
- <ViewPanel type="DESIGNABLE">
- {() => (
- <Sandbox
- jsAssets={[
- 'https://unpkg.com/moment/min/moment-with-locales.js',
- 'https://unpkg.com/react/umd/react.production.min.js',
- 'https://unpkg.com/react-dom/umd/react-dom.production.min.js',
- 'https://unpkg.com/antd/dist/antd-with-locales.min.js',
- './sandbox.bundle.js',
- ]}
- />
- )}
- </ViewPanel>
- <ViewPanel type="JSONTREE">
- {() => {
- return (
- <div style={{ overflow: 'hidden', height: '100%' }}>
- <MonacoInput
- language="javascript"
- helpCode="//hello world"
- defaultValue={`<div><div>123123<div>123123<div>123123<div>123123</div></div></div></div></div>`}
- />
- </div>
- )
- }}
- </ViewPanel>
- </ViewportPanel>
- </WorkspacePanel>
- </Workspace>
- <Workspace id="form-2">
- <WorkspacePanel>
- <ToolbarPanel>
- <DesignerToolsWidget />
- <ViewToolsWidget />{' '}
- </ToolbarPanel>
- <ViewportPanel>
- <ViewPanel type="DESIGNABLE">
- {() => (
- <Sandbox
- jsAssets={[
- 'https://unpkg.com/moment/min/moment-with-locales.js',
- 'https://unpkg.com/react/umd/react.production.min.js',
- 'https://unpkg.com/react-dom/umd/react-dom.production.min.js',
- 'https://unpkg.com/antd/dist/antd-with-locales.min.js',
- './sandbox.bundle.js',
- ]}
- />
- )}
- </ViewPanel>
- <ViewPanel type="JSONTREE">
- {() => {
- return (
- <div style={{ overflow: 'hidden', height: '100%' }}>
- <MonacoInput
- language="javascript"
- helpCode="//hello world"
- defaultValue={`<div><div>123123<div>123123<div>123123<div>123123</div></div></div></div></div>`}
- />
- </div>
- )
- }}
- </ViewPanel>
- </ViewportPanel>
- </WorkspacePanel>
- </Workspace>
- <SettingsPanel title="panels.PropertySettings">
- <SettingsForm uploadAction="https://www.mocky.io/v2/5cc8019d300000980a055e76" />
- </SettingsPanel>
- </StudioPanel>
- </Workbench>
- </Designer>
- )
-}
-
-ReactDOM.render(<App />, document.getElementById('root'))
diff --git a/examples/sandbox-multi-workspace/src/sandbox.tsx b/examples/sandbox-multi-workspace/src/sandbox.tsx
deleted file mode 100644
index 2959d65..0000000
--- a/examples/sandbox-multi-workspace/src/sandbox.tsx
+++ /dev/null
@@ -1,7 +0,0 @@
-import React from 'react'
-import { Content } from './content'
-import { renderSandboxContent } from '@designable/react-sandbox'
-
-renderSandboxContent(() => {
- return <Content />
-})
diff --git a/examples/sandbox-multi-workspace/tsconfig.build.json b/examples/sandbox-multi-workspace/tsconfig.build.json
deleted file mode 100644
index 8f2e5f5..0000000
--- a/examples/sandbox-multi-workspace/tsconfig.build.json
+++ /dev/null
@@ -1,10 +0,0 @@
-{
- "extends": "./tsconfig.json",
- "compilerOptions": {
- "outDir": "./lib",
- "paths": {
- "@designable/*": ["../*"]
- },
- "declaration": true
- }
-}
diff --git a/examples/sandbox-multi-workspace/tsconfig.json b/examples/sandbox-multi-workspace/tsconfig.json
deleted file mode 100644
index c6865c2..0000000
--- a/examples/sandbox-multi-workspace/tsconfig.json
+++ /dev/null
@@ -1,5 +0,0 @@
-{
- "extends": "../../tsconfig.json",
- "include": ["./src/**/*.ts", "./src/**/*.tsx"],
- "exclude": ["./src/__tests__/*", "./esm/*", "./lib/*"]
-}
diff --git a/examples/sandbox/.npmignore b/examples/sandbox/.npmignore
deleted file mode 100644
index cc5cbf1..0000000
--- a/examples/sandbox/.npmignore
+++ /dev/null
@@ -1,4 +0,0 @@
-node_modules
-*.log
-build
-__tests__
\ No newline at end of file
diff --git a/examples/sandbox/LICENSE.md b/examples/sandbox/LICENSE.md
deleted file mode 100644
index 509632e..0000000
--- a/examples/sandbox/LICENSE.md
+++ /dev/null
@@ -1,20 +0,0 @@
-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/sandbox/README.md b/examples/sandbox/README.md
deleted file mode 100644
index 7490a93..0000000
--- a/examples/sandbox/README.md
+++ /dev/null
@@ -1 +0,0 @@
-# @designable/playground
diff --git a/examples/sandbox/config/template.ejs b/examples/sandbox/config/template.ejs
deleted file mode 100644
index b0369ec..0000000
--- a/examples/sandbox/config/template.ejs
+++ /dev/null
@@ -1,15 +0,0 @@
-<!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.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>
\ No newline at end of file
diff --git a/examples/sandbox/config/webpack.base.ts b/examples/sandbox/config/webpack.base.ts
deleted file mode 100644
index 5c193d8..0000000
--- a/examples/sandbox/config/webpack.base.ts
+++ /dev/null
@@ -1,103 +0,0 @@
-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]',
- },
- },
- ],
- },
-}
diff --git a/examples/sandbox/config/webpack.dev.ts b/examples/sandbox/config/webpack.dev.ts
deleted file mode 100644
index e39bec5..0000000
--- a/examples/sandbox/config/webpack.dev.ts
+++ /dev/null
@@ -1,52 +0,0 @@
-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/sandbox/config/webpack.prod.ts b/examples/sandbox/config/webpack.prod.ts
deleted file mode 100644
index f031583..0000000
--- a/examples/sandbox/config/webpack.prod.ts
+++ /dev/null
@@ -1,36 +0,0 @@
-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/sandbox/package.json b/examples/sandbox/package.json
deleted file mode 100644
index 9a8df87..0000000
--- a/examples/sandbox/package.json
+++ /dev/null
@@ -1,41 +0,0 @@
-{
- "name": "@designable/sandbox-example",
- "version": "1.0.0-beta.45",
- "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.45",
- "@designable/react": "1.0.0-beta.45",
- "@designable/react-sandbox": "1.0.0-beta.45",
- "@designable/react-settings-form": "1.0.0-beta.45",
- "@designable/shared": "1.0.0-beta.45",
- "@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/sandbox/src/content.tsx b/examples/sandbox/src/content.tsx
deleted file mode 100644
index d432dcb..0000000
--- a/examples/sandbox/src/content.tsx
+++ /dev/null
@@ -1,47 +0,0 @@
-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>
- )
- },
- }}
- />
-)
diff --git a/examples/sandbox/src/main.tsx b/examples/sandbox/src/main.tsx
deleted file mode 100644
index 17aec3f..0000000
--- a/examples/sandbox/src/main.tsx
+++ /dev/null
@@ -1,399 +0,0 @@
-import React, { useEffect } from 'react'
-import ReactDOM from 'react-dom'
-import {
- Designer,
- IconWidget,
- Workbench,
- ViewPanel,
- DesignerToolsWidget,
- ViewToolsWidget,
- OutlineTreeWidget,
- ResourceWidget,
- StudioPanel,
- CompositePanel,
- WorkspacePanel,
- ToolbarPanel,
- ViewportPanel,
- SettingsPanel,
- HistoryWidget,
-} from '@designable/react'
-import { SettingsForm, MonacoInput } from '@designable/react-settings-form'
-import { observer } from '@formily/react'
-import {
- createDesigner,
- createResource,
- createBehavior,
- GlobalRegistry,
-} from '@designable/core'
-import { Space, Button, Radio } from 'antd'
-import { GithubOutlined } from '@ant-design/icons'
-import { Sandbox } from '@designable/react-sandbox'
-import 'antd/dist/antd.less'
-
-const RootBehavior = createBehavior({
- name: 'Root',
- selector: 'Root',
- designerProps: {
- droppable: true,
- },
- designerLocales: {
- 'zh-CN': {
- title: '根组件',
- },
- 'en-US': {
- title: 'Root',
- },
- 'ko-KR': {
- title: '루트',
- },
- },
-})
-
-const InputBehavior = createBehavior({
- name: 'Input',
- selector: (node) =>
- node.componentName === 'Field' && node.props['x-component'] === 'Input',
- designerProps: {
- propsSchema: {
- type: 'object',
- $namespace: 'Field',
- properties: {
- 'field-properties': {
- type: 'void',
- 'x-component': 'CollapseItem',
- title: '字段属性',
- properties: {
- title: {
- type: 'string',
- 'x-decorator': 'FormItem',
- 'x-component': 'Input',
- },
-
- hidden: {
- type: 'string',
- 'x-decorator': 'FormItem',
- 'x-component': 'Switch',
- },
- default: {
- 'x-decorator': 'FormItem',
- 'x-component': 'ValueInput',
- },
- test: {
- type: 'void',
- title: '测试',
- 'x-decorator': 'FormItem',
- 'x-component': 'DrawerSetter',
- 'x-component-props': {
- text: '打开抽屉',
- },
- properties: {
- test: {
- type: 'string',
- title: '测试输入',
- 'x-decorator': 'FormItem',
- 'x-component': 'Input',
- },
- },
- },
- },
- },
-
- 'component-styles': {
- type: 'void',
- title: '样式',
- 'x-component': 'CollapseItem',
- properties: {
- 'style.width': {
- type: 'string',
- 'x-decorator': 'FormItem',
- 'x-component': 'SizeInput',
- },
- 'style.height': {
- type: 'string',
- 'x-decorator': 'FormItem',
- 'x-component': 'SizeInput',
- },
- 'style.display': {
- 'x-component': 'DisplayStyleSetter',
- },
- 'style.background': {
- 'x-component': 'BackgroundStyleSetter',
- },
- 'style.boxShadow': {
- 'x-component': 'BoxShadowStyleSetter',
- },
- 'style.font': {
- 'x-component': 'FontStyleSetter',
- },
- 'style.margin': {
- 'x-component': 'BoxStyleSetter',
- },
- 'style.padding': {
- 'x-component': 'BoxStyleSetter',
- },
- 'style.borderRadius': {
- 'x-component': 'BorderRadiusStyleSetter',
- },
- 'style.border': {
- 'x-component': 'BorderStyleSetter',
- },
- },
- },
- },
- },
- },
- designerLocales: {
- 'zh-CN': {
- title: '输入框',
- settings: {
- title: '标题',
- hidden: '是否隐藏',
- default: '默认值',
- style: {
- width: '宽度',
- height: '高度',
- display: '展示',
- background: '背景',
- boxShadow: '阴影',
- font: '字体',
- margin: '外边距',
- padding: '内边距',
- borderRadius: '圆角',
- border: '边框',
- },
- },
- },
- 'en-US': {
- title: 'Input',
- settings: {
- title: 'Title',
- hidden: 'Hidden',
- default: 'Default Value',
- style: {
- width: 'Width',
- height: 'Height',
- display: 'Display',
- background: 'Background',
- boxShadow: 'Box Shadow',
- font: 'Font',
- margin: 'Margin',
- padding: 'Padding',
- borderRadius: 'Border Radius',
- border: 'Border',
- },
- },
- },
- 'ko-KR': {
- title: '입력',
- settings: {
- title: '텍스트',
- hidden: '숨김 여부',
- default: '기본 설정 값',
- style: {
- width: '너비',
- height: '높이',
- display: '디스플레이',
- background: '배경',
- boxShadow: '그림자 박스',
- font: '폰트',
- margin: '마진',
- padding: '패딩',
- borderRadius: '테두리 굴곡',
- border: '테두리',
- },
- },
- },
- },
-})
-
-const CardBehavior = createBehavior({
- name: 'Card',
- selector: 'Card',
- designerProps: {
- droppable: true,
- },
- designerLocales: {
- 'zh-CN': {
- title: '卡片',
- },
- 'en-US': {
- title: 'Card',
- },
- 'ko-KR': {
- title: '카드',
- },
- },
-})
-
-GlobalRegistry.setDesignerBehaviors([RootBehavior, InputBehavior, CardBehavior])
-
-const Input = createResource({
- title: {
- 'zh-CN': '输入框',
- 'en-US': 'Input',
- 'ko-KR': '입력 상자',
- },
- icon: 'InputSource',
- elements: [
- {
- componentName: 'Field',
- props: {
- title: '输入框',
- type: 'string',
- 'x-decorator': 'FormItem',
- 'x-component': 'Input',
- },
- },
- ],
-})
-
-const Card = createResource({
- title: {
- 'zh-CN': '卡片',
- 'en-US': 'Card',
- 'ko-KR': '카드 상자',
- },
- icon: 'CardSource',
- elements: [
- {
- componentName: 'Card',
- props: {
- title: '卡片',
- },
- },
- ],
-})
-
-GlobalRegistry.registerDesignerLocales({
- 'zh-CN': {
- sources: {
- Inputs: '输入控件',
- Displays: '展示控件',
- Feedbacks: '反馈控件',
- },
- },
- 'en-US': {
- sources: {
- Inputs: 'Inputs',
- Displays: 'Displays',
- Feedbacks: 'Feedbacks',
- },
- },
- 'ko-KR': {
- sources: {
- Inputs: '입력',
- Displays: '디스플레이',
- Feedbacks: '피드백',
- },
- },
-})
-
-const Logo: React.FC = () => (
- <div style={{ display: 'flex', alignItems: 'center', fontSize: 14 }}>
- <IconWidget
- infer="Logo"
- style={{ margin: 10, height: 24, width: 'auto' }}
- />
- </div>
-)
-
-const Actions = observer(() => {
- const supportLocales = ['zh-cn', 'en-us', 'ko-kr']
- useEffect(() => {
- if (!supportLocales.includes(GlobalRegistry.getDesignerLanguage())) {
- GlobalRegistry.setDesignerLanguage('zh-cn')
- }
- }, [])
- return (
- <Space style={{ marginRight: 10 }}>
- <Radio.Group
- value={GlobalRegistry.getDesignerLanguage()}
- optionType="button"
- options={[
- { label: 'English', value: 'en-us' },
- { label: '简体中文', value: 'zh-cn' },
- { label: '한국어', value: 'ko-kr' },
- ]}
- onChange={(e) => {
- GlobalRegistry.setDesignerLanguage(e.target.value)
- }}
- />
- <Button href="https://github.com/alibaba/designable" target="_blank">
- <GithubOutlined />
- Github
- </Button>
- <Button>保存</Button>
- <Button type="primary">发布</Button>
- </Space>
- )
-})
-
-const engine = createDesigner()
-const App = () => {
- return (
- <Designer engine={engine}>
- <Workbench>
- <StudioPanel logo={<Logo />} actions={<Actions />}>
- <CompositePanel>
- <CompositePanel.Item title="panels.Component" icon="Component">
- <ResourceWidget title="sources.Inputs" sources={[Input, Card]} />
- <ResourceWidget
- title="sources.Displays"
- sources={[Input, Card]}
- />
- <ResourceWidget
- title="sources.Feedbacks"
- sources={[Input, Card]}
- />
- </CompositePanel.Item>
- <CompositePanel.Item title="panels.OutlinedTree" icon="Outline">
- <OutlineTreeWidget />
- </CompositePanel.Item>
- <CompositePanel.Item title="panels.History" icon="History">
- <HistoryWidget />
- </CompositePanel.Item>
- </CompositePanel>
- <WorkspacePanel>
- <ToolbarPanel>
- <DesignerToolsWidget />
- <ViewToolsWidget />
- </ToolbarPanel>
- <ViewportPanel>
- <ViewPanel type="DESIGNABLE">
- {() => (
- <Sandbox
- jsAssets={[
- 'https://unpkg.com/moment/min/moment-with-locales.js',
- 'https://unpkg.com/react/umd/react.production.min.js',
- 'https://unpkg.com/react-dom/umd/react-dom.production.min.js',
- 'https://unpkg.com/antd/dist/antd-with-locales.min.js',
- './sandbox.bundle.js',
- ]}
- />
- )}
- </ViewPanel>
- <ViewPanel type="JSONTREE">
- {() => {
- return (
- <div style={{ overflow: 'hidden', height: '100%' }}>
- <MonacoInput
- language="javascript"
- helpCode="//hello world"
- defaultValue={`<div><div>123123<div>123123<div>123123<div>123123</div></div></div></div></div>`}
- />
- </div>
- )
- }}
- </ViewPanel>
- </ViewportPanel>
- </WorkspacePanel>
- <SettingsPanel title="panels.PropertySettings">
- <SettingsForm uploadAction="https://www.mocky.io/v2/5cc8019d300000980a055e76" />
- </SettingsPanel>
- </StudioPanel>
- </Workbench>
- </Designer>
- )
-}
-
-ReactDOM.render(<App />, document.getElementById('root'))
diff --git a/examples/sandbox/src/sandbox.tsx b/examples/sandbox/src/sandbox.tsx
deleted file mode 100644
index 2959d65..0000000
--- a/examples/sandbox/src/sandbox.tsx
+++ /dev/null
@@ -1,7 +0,0 @@
-import React from 'react'
-import { Content } from './content'
-import { renderSandboxContent } from '@designable/react-sandbox'
-
-renderSandboxContent(() => {
- return <Content />
-})
diff --git a/examples/sandbox/tsconfig.build.json b/examples/sandbox/tsconfig.build.json
deleted file mode 100644
index 8f2e5f5..0000000
--- a/examples/sandbox/tsconfig.build.json
+++ /dev/null
@@ -1,10 +0,0 @@
-{
- "extends": "./tsconfig.json",
- "compilerOptions": {
- "outDir": "./lib",
- "paths": {
- "@designable/*": ["../*"]
- },
- "declaration": true
- }
-}
diff --git a/examples/sandbox/tsconfig.json b/examples/sandbox/tsconfig.json
deleted file mode 100644
index c6865c2..0000000
--- a/examples/sandbox/tsconfig.json
+++ /dev/null
@@ -1,5 +0,0 @@
-{
- "extends": "../../tsconfig.json",
- "include": ["./src/**/*.ts", "./src/**/*.tsx"],
- "exclude": ["./src/__tests__/*", "./esm/*", "./lib/*"]
-}
diff --git a/formily/.eslintrc b/formily/.eslintrc
index 55fbaa1..59428f0 100644
--- a/formily/.eslintrc
+++ b/formily/.eslintrc
@@ -48,12 +48,12 @@
"@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"]
- }
- ],
+ // "no-console": [
+ // "error",
+ // {
+ // "allow": ["warn", "error", "info"]
+ // }
+ // ],
"prefer-const": 0,
"no-var": 1,
"prefer-rest-params": 0
diff --git a/formily/antd/playground/service/schema.ts b/formily/antd/playground/service/schema.ts
index bc5cf80..91a8b49 100644
--- a/formily/antd/playground/service/schema.ts
+++ b/formily/antd/playground/service/schema.ts
@@ -6,6 +6,16 @@ import {
import { message } from 'antd'
export const saveSchema = (designer: Engine) => {
+ let queryParams = Object.fromEntries(new URLSearchParams(location.search))
+ let { bid } = queryParams
+ if (!bid) {
+ message.warning('url 异常，缺少 id 参数')
+ return
+ }
+ let formilySchema = JSON.stringify(
+ transformToSchema(designer.getCurrentTree())
+ )
+ console.log('formily-schema', formilySchema)
localStorage.setItem(
'formily-schema',
JSON.stringify(transformToSchema(designer.getCurrentTree()))
diff --git a/formily/antd/playground/template.ejs b/formily/antd/playground/template.ejs
index a859d89..65ebfaf 100644
--- a/formily/antd/playground/template.ejs
+++ b/formily/antd/playground/template.ejs
@@ -1,20 +1,25 @@
<!DOCTYPE html>
<head>
- <title>
- Designable Playground
- </title>
+ <title>Formily低代码设计器</title>
+ <!-- href="http://cdn.zuo11.com/imgs/formily-icon.svg" -->
+ <link
+ rel="shortcut icon"
+ type="image/x-icon"
+ href="http://cdn.zuo11.com/imgs/avatar.jpg"
+ />
<style>
- html,body{
+ html,
+ body {
user-select: none;
-webkit-user-select: none;
}
</style>
</head>
<body>
- <div id="root">
- </div>
+ <div id="root"></div>
<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>
\ No newline at end of file
+ <script src="https://unpkg.com/antd@4.15.2/dist/antd.min.js"></script>
+</body>
diff --git a/formily/antd/playground/widgets/ActionsWidget.tsx b/formily/antd/playground/widgets/ActionsWidget.tsx
index dbfb55d..8633749 100644
--- a/formily/antd/playground/widgets/ActionsWidget.tsx
+++ b/formily/antd/playground/widgets/ActionsWidget.tsx
@@ -19,25 +19,25 @@ export const ActionsWidget = observer(() => {
}, [])
return (
<Space style={{ marginRight: 10 }}>
- <Button href="https://designable-fusion.formilyjs.org">
+ {/* <Button href="https://designable-fusion.formilyjs.org">
Alibaba Fusion
- </Button>
+ </Button> */}
<Radio.Group
value={GlobalRegistry.getDesignerLanguage()}
optionType="button"
options={[
{ label: 'English', value: 'en-us' },
{ label: '简体中文', value: 'zh-cn' },
- { label: '한국어', value: 'ko-kr' },
+ // { label: '한국어', value: 'ko-kr' },
]}
onChange={(e) => {
GlobalRegistry.setDesignerLanguage(e.target.value)
}}
/>
- <Button href="https://github.com/alibaba/designable" target="_blank">
+ {/* <Button href="https://github.com/alibaba/designable" target="_blank">
<GithubOutlined />
Github
- </Button>
+ </Button> */}
<Button
onClick={() => {
saveSchema(designer)
diff --git a/packages/.eslintrc b/packages/.eslintrc
index 5ef89b3..86dccac 100644
--- a/packages/.eslintrc
+++ b/packages/.eslintrc
@@ -49,12 +49,12 @@
"@typescript-eslint/explicit-module-boundary-types": 0,
"@typescript-eslint/no-empty-function": 0,
"@typescript-eslint/no-empty-interface": 1,
- "no-console": [
- "error",
- {
- "allow": ["warn", "error", "info"]
- }
- ],
+ // "no-console": [
+ // "error",
+ // {
+ // "allow": ["warn", "error", "info"]
+ // }
+ // ],
"prefer-const": 0,
"no-var": 1,
"prefer-rest-params": 0