![](\"https://img.alicdn.com/tfs/TB1fHhZu4D1gK0jSZFyXXciOVXa-2500-1200.png\")
\n![](\"https://img.shields.io/npm/dt/@formily/core\"/)
\n![](\"https://img.shields.io/npm/dm/@formily/core\"/)
\n![](\"https://img.shields.io/npm/v/@formily/core.svg\")
![](\"https://codecov.io/gh/alibaba/formily/branch/formily_next/graph/badge.svg?token=3V9RU8Wh9d\"/){kind=icon}
\n![\"PRs](\"https://img.shields.io/badge/PRs-welcome-brightgreen.svg\"/){kind=icon}
\n![](\"https://img.shields.io/badge/using-issues--helper-blueviolet\"/){kind=icon}
\n\n \n \n\n
\n )\n})`\n position: relative;\n overflow: auto;\n height: calc(100% - 40px);\n user-select: none;\n .highlight {\n position: absolute;\n top: 0;\n right: 0;\n left: -100%;\n height: 100%;\n z-index: 0;\n &.active {\n background: #3d424a;\n }\n }\n .node-header:hover .highlight {\n background: #3d424a;\n }\n`\n"
},
{
"path": "devtools/chrome-extension/src/app/components/LeftPanel.tsx",
"content": "import React, { useState } from 'react'\nimport { Tabs } from './Tabs'\nimport { FieldTree } from './FieldTree'\nimport styled from 'styled-components'\n\nexport const LeftPanel = styled(({ className, dataSource, onSelect }) => {\n const [current, setCurrent] = useState(0)\n return (\n \n {\n setCurrent(index)\n onSelect({\n current: index,\n key: '',\n })\n }}\n />\n {\n if (onSelect) {\n onSelect({\n current,\n key: node.path,\n })\n }\n }}\n />\n
\n )\n})`\n width: 50%;\n min-width: 50%;\n`\n"
},
{
"path": "devtools/chrome-extension/src/app/components/RightPanel.tsx",
"content": "import React from 'react'\nimport styled from 'styled-components'\nimport ReactJson from 'react-json-view'\n\nexport const RightPanel = styled(({ className, dataSource }) => {\n return (\n \n
\n )\n})`\n border-left: 1px solid #3d424a;\n flex-grow: 2;\n overflow: auto;\n padding: 10px;\n .react-json-view {\n background: none !important;\n font-size: 12px !important;\n }\n`\n"
},
{
"path": "devtools/chrome-extension/src/app/components/SearchBox.tsx",
"content": "import React from 'react'\nimport styled from 'styled-components'\n\nconst SerachBox = styled.div`\n display: flex;\n align-items: center;\n height: 100%;\n .input-addon {\n padding: 0 5px;\n }\n .form-control {\n width: 50%;\n border: none;\n background: transparent;\n color: white;\n outline: none;\n }\n`\n\nconst SearchIcon = () => {\n return (\n \n
\n \n {toArr(dataSource).map((item, index) => {\n return (\n {\n if (onChange) {\n onChange(index)\n }\n }}\n >\n Form#{index + 1}\n
\n )\n })}\n \n )\n})`\n height: 36px;\n border-bottom: 1px solid #3d424a;\n display: flex;\n line-height: 36px;\n width: 100%;\n overflow: scroll;\n &::-webkit-scrollbar {\n display: none;\n }\n .tab-item {\n cursor: pointer;\n transition: 0.15s all ease-in-out;\n border-right: 1px solid #3d424a;\n padding: 0 10px;\n font-size: 12px;\n &:hover {\n background: #1d1f25;\n }\n &.active {\n background: #1d1f25;\n }\n }\n`\n"
},
{
"path": "devtools/chrome-extension/src/app/components/filter.ts",
"content": "// Helper functions for filtering\nexport const defaultMatcher = (filterText, node) => {\n return node.name.toLowerCase().indexOf(filterText.toLowerCase()) !== -1\n}\n\nexport const findNode = (node, filter, matcher) => {\n return (\n matcher(filter, node) || // i match\n (node.children && // or i have decendents and one of them match\n node.children.length &&\n !!node.children.find((child) => findNode(child, filter, matcher)))\n )\n}\n\nexport const filterTree = (node, filter, matcher = defaultMatcher) => {\n // If im an exact match then all my children get to stay\n if (matcher(filter, node) || !node.children) {\n return node\n }\n // If not then only keep the ones that match or have matching descendants\n const filtered = node.children\n .filter((child) => findNode(child, filter, matcher))\n .map((child) => filterTree(child, filter, matcher))\n return Object.assign({}, node, { children: filtered })\n}\n\nexport const expandFilteredNodes = (node, filter, matcher = defaultMatcher) => {\n let children = node.children\n if (!children || children.length === 0) {\n return Object.assign({}, node, { toggled: false })\n }\n const childrenWithMatches = node.children.filter((child) =>\n findNode(child, filter, matcher)\n )\n const shouldExpand = childrenWithMatches.length > 0\n // If im going to expand, go through all the matches and see if thier children need to expand\n if (shouldExpand) {\n children = childrenWithMatches.map((child) => {\n return expandFilteredNodes(child, filter, matcher)\n })\n }\n return Object.assign({}, node, {\n children: children,\n toggled: shouldExpand,\n })\n}\n"
},
{
"path": "devtools/chrome-extension/src/app/demo.tsx",
"content": "import React from 'react'\nimport ReactDOM from 'react-dom'\nimport App from './index'\nconst dataSource = [\n {\n '': {\n pristine: false,\n valid: true,\n invalid: false,\n loading: false,\n validating: false,\n initialized: true,\n submitting: false,\n errors: [],\n warnings: [],\n values: {\n aa: true,\n cc: true,\n gg: 'aaaa',\n },\n initialValues: {\n aa: true,\n cc: true,\n },\n mounted: true,\n unmounted: false,\n props: {},\n displayName: 'FormState',\n },\n block: {\n name: 'block',\n path: 'block',\n initialized: true,\n visible: true,\n display: true,\n mounted: true,\n unmounted: false,\n props: {\n key: 'block',\n type: 'object',\n name: 'block',\n 'x-component': 'block',\n 'x-props': {\n title: 'Block1',\n },\n 'x-component-props': {\n title: 'Block1',\n },\n },\n displayName: 'VirtualFieldState',\n },\n 'block.aa': {\n name: 'aa',\n path: 'block.aa',\n dataType: 'boolean',\n initialized: true,\n pristine: true,\n valid: true,\n modified: false,\n touched: false,\n active: false,\n visited: false,\n invalid: false,\n visible: true,\n display: true,\n loading: false,\n validating: false,\n errors: [],\n values: [true],\n ruleErrors: [],\n ruleWarnings: [],\n effectErrors: [],\n warnings: [],\n effectWarnings: [],\n editable: true,\n value: true,\n initialValue: true,\n rules: [],\n required: false,\n mounted: true,\n unmounted: false,\n props: {\n key: 'aa',\n name: 'aa',\n type: 'boolean',\n 'x-component': 'radio',\n default: true,\n enum: [\n {\n label: '是',\n value: true,\n },\n {\n label: '否',\n value: false,\n },\n ],\n title: '是否隐藏AA',\n },\n displayName: 'FieldState',\n },\n 'block.bb': {\n name: 'bb',\n path: 'block.bb',\n dataType: 'string',\n initialized: true,\n pristine: true,\n valid: true,\n modified: false,\n touched: false,\n active: false,\n visited: false,\n invalid: false,\n visible: false,\n display: true,\n loading: false,\n validating: false,\n errors: [],\n values: [null],\n ruleErrors: [],\n ruleWarnings: [],\n effectErrors: [],\n warnings: [],\n effectWarnings: [],\n editable: true,\n rules: [],\n required: false,\n mounted: true,\n unmounted: false,\n props: {\n key: 'bb',\n name: 'bb',\n type: 'string',\n title: 'AA',\n },\n displayName: 'FieldState',\n },\n 'block.cc': {\n name: 'cc',\n path: 'block.cc',\n dataType: 'boolean',\n initialized: true,\n pristine: true,\n valid: true,\n modified: false,\n touched: false,\n active: false,\n visited: false,\n invalid: false,\n visible: true,\n display: true,\n loading: false,\n validating: false,\n errors: [],\n values: [true],\n ruleErrors: [],\n ruleWarnings: [],\n effectErrors: [],\n warnings: [],\n effectWarnings: [],\n editable: true,\n value: true,\n initialValue: true,\n rules: [],\n required: false,\n mounted: true,\n unmounted: false,\n props: {\n key: 'cc',\n name: 'cc',\n type: 'boolean',\n title: '是否隐藏DD',\n default: true,\n 'x-component': 'radio',\n enum: [\n {\n label: '是',\n value: true,\n },\n {\n label: '否',\n value: false,\n },\n ],\n },\n displayName: 'FieldState',\n },\n dd: {\n name: 'dd',\n path: 'dd',\n initialized: true,\n visible: false,\n display: true,\n mounted: true,\n unmounted: false,\n props: {\n key: 'dd',\n type: 'object',\n name: 'dd',\n 'x-component': 'block',\n 'x-props': {\n title: 'Block2',\n },\n 'x-component-props': {\n title: 'Block2',\n },\n },\n displayName: 'VirtualFieldState',\n },\n kk: {\n name: 'kk',\n path: 'kk',\n initialized: true,\n visible: true,\n display: true,\n mounted: true,\n unmounted: false,\n props: {\n key: 'kk',\n type: 'object',\n name: 'kk',\n 'x-component': 'block',\n 'x-props': {\n title: 'Block3',\n },\n 'x-component-props': {\n title: 'Block3',\n },\n },\n displayName: 'VirtualFieldState',\n },\n 'kk.gg': {\n name: 'gg',\n path: 'kk.gg',\n dataType: 'string',\n initialized: true,\n pristine: false,\n valid: true,\n modified: true,\n touched: false,\n active: false,\n visited: false,\n invalid: false,\n visible: true,\n display: true,\n loading: false,\n validating: false,\n errors: [],\n values: ['aaaa'],\n ruleErrors: [],\n ruleWarnings: [],\n effectErrors: [],\n warnings: [],\n effectWarnings: [],\n editable: true,\n value: 'aaaa',\n rules: [],\n required: false,\n mounted: true,\n unmounted: false,\n props: {\n key: 'gg',\n name: 'gg',\n type: 'string',\n title: 'GG',\n 'x-props': {\n showSearch: true,\n filterLocal: false,\n style: {\n width: 200,\n },\n },\n enum: [\n {\n label: 'aaaa',\n value: 'aaaa',\n extra: ['x1', 'x2', 'x3'],\n },\n {\n label: 'bbbb',\n value: 'bbbb',\n extra: ['x4', 'x5', 'x6'],\n },\n {\n label: 'cccc',\n value: 'cccc',\n extra: ['x7', 'x8', 'x9'],\n },\n ],\n },\n displayName: 'FieldState',\n },\n 'kk.hh': {\n name: 'hh',\n path: 'kk.hh',\n dataType: 'string',\n initialized: true,\n pristine: true,\n valid: true,\n modified: false,\n touched: false,\n active: false,\n visited: false,\n invalid: false,\n visible: false,\n display: true,\n loading: false,\n validating: false,\n errors: [],\n values: [null],\n ruleErrors: [],\n ruleWarnings: [],\n effectErrors: [],\n warnings: [],\n effectWarnings: [],\n editable: true,\n rules: [],\n required: false,\n mounted: true,\n unmounted: false,\n props: {\n key: 'hh',\n name: 'hh',\n type: 'string',\n title: 'HH',\n enum: [],\n 'x-props': {\n style: {\n width: 200,\n },\n },\n },\n displayName: 'FieldState',\n },\n },\n {\n '': {\n pristine: true,\n valid: true,\n invalid: false,\n loading: false,\n validating: false,\n initialized: true,\n submitting: false,\n errors: [],\n warnings: [],\n values: {},\n initialValues: {},\n mounted: true,\n unmounted: false,\n props: {},\n displayName: 'FormState',\n },\n total: {\n name: 'total',\n path: 'total',\n dataType: 'number',\n initialized: true,\n pristine: true,\n valid: true,\n modified: false,\n touched: false,\n active: false,\n visited: false,\n invalid: false,\n visible: true,\n display: true,\n loading: false,\n validating: false,\n errors: [],\n values: [null],\n ruleErrors: [],\n ruleWarnings: [],\n effectErrors: [],\n warnings: [],\n effectWarnings: [],\n editable: true,\n rules: [\n {\n required: true,\n },\n ],\n required: true,\n mounted: true,\n unmounted: false,\n props: {\n key: 'total',\n name: 'total',\n type: 'number',\n required: true,\n title: '总价',\n },\n displayName: 'FieldState',\n },\n count: {\n name: 'count',\n path: 'count',\n dataType: 'number',\n initialized: true,\n pristine: true,\n valid: true,\n modified: false,\n touched: false,\n active: false,\n visited: false,\n invalid: false,\n visible: true,\n display: true,\n loading: false,\n validating: false,\n errors: [],\n values: [null],\n ruleErrors: [],\n ruleWarnings: [],\n effectErrors: [],\n warnings: [],\n effectWarnings: [],\n editable: true,\n rules: [\n {\n required: true,\n },\n ],\n required: true,\n mounted: true,\n unmounted: false,\n props: {\n key: 'count',\n name: 'count',\n type: 'number',\n required: true,\n title: '数量',\n },\n displayName: 'FieldState',\n },\n price: {\n name: 'price',\n path: 'price',\n dataType: 'number',\n initialized: true,\n pristine: true,\n valid: true,\n modified: false,\n touched: false,\n active: false,\n visited: false,\n invalid: false,\n visible: true,\n display: true,\n loading: false,\n validating: false,\n errors: [],\n values: [null],\n ruleErrors: [],\n ruleWarnings: [],\n effectErrors: [],\n warnings: [],\n effectWarnings: [],\n editable: true,\n rules: [\n {\n required: true,\n },\n ],\n required: true,\n mounted: true,\n unmounted: false,\n props: {\n key: 'price',\n name: 'price',\n type: 'number',\n required: true,\n title: '单价',\n },\n displayName: 'FieldState',\n },\n },\n {\n '': {\n pristine: true,\n valid: true,\n invalid: false,\n loading: false,\n validating: false,\n initialized: true,\n submitting: false,\n errors: [],\n warnings: [],\n values: {},\n initialValues: {},\n mounted: true,\n unmounted: false,\n props: {},\n displayName: 'FormState',\n },\n NO_NAME_FIELD_$0: {\n name: 'NO_NAME_FIELD_$0',\n path: 'NO_NAME_FIELD_$0',\n initialized: true,\n visible: true,\n display: true,\n mounted: true,\n unmounted: false,\n props: {\n key: 'NO_NAME_FIELD_$0',\n type: 'object',\n name: 'NO_NAME_FIELD_$0',\n 'x-component': 'block',\n 'x-props': {\n title: 'Block1',\n },\n 'x-component-props': {\n title: 'Block1',\n },\n },\n displayName: 'VirtualFieldState',\n },\n 'NO_NAME_FIELD_$0.aa': {\n name: 'aa',\n path: 'NO_NAME_FIELD_$0.aa',\n dataType: 'string',\n initialized: true,\n pristine: true,\n valid: true,\n modified: false,\n touched: false,\n active: false,\n visited: false,\n invalid: false,\n visible: true,\n display: true,\n loading: false,\n validating: false,\n errors: [],\n values: [null],\n ruleErrors: [],\n ruleWarnings: [],\n effectErrors: [],\n warnings: [],\n effectWarnings: [],\n editable: true,\n rules: [],\n required: false,\n mounted: true,\n unmounted: false,\n props: {\n key: 'aa',\n name: 'aa',\n type: 'string',\n enum: ['aaaaa', 'bbbbb', 'ccccc', 'ddddd', 'eeeee'],\n title: 'AA',\n },\n displayName: 'FieldState',\n },\n 'NO_NAME_FIELD_$0.bb': {\n name: 'bb',\n path: 'NO_NAME_FIELD_$0.bb',\n dataType: 'string',\n initialized: true,\n pristine: true,\n valid: true,\n modified: false,\n touched: false,\n active: false,\n visited: false,\n invalid: false,\n visible: false,\n display: true,\n loading: false,\n validating: false,\n errors: [],\n values: [null],\n ruleErrors: [],\n ruleWarnings: [],\n effectErrors: [],\n warnings: [],\n effectWarnings: [],\n editable: true,\n rules: [],\n required: false,\n mounted: true,\n unmounted: false,\n props: {\n key: 'bb',\n type: 'string',\n name: 'bb',\n title: 'BB',\n enum: [],\n },\n displayName: 'FieldState',\n },\n 'NO_NAME_FIELD_$0.cc': {\n name: 'cc',\n path: 'NO_NAME_FIELD_$0.cc',\n dataType: 'string',\n initialized: true,\n pristine: true,\n valid: true,\n modified: false,\n touched: false,\n active: false,\n visited: false,\n invalid: false,\n visible: true,\n display: true,\n loading: false,\n validating: false,\n errors: [],\n values: [null],\n ruleErrors: [],\n ruleWarnings: [],\n effectErrors: [],\n warnings: [],\n effectWarnings: [],\n editable: true,\n rules: [],\n required: false,\n mounted: true,\n unmounted: false,\n props: {\n key: 'cc',\n type: 'string',\n name: 'cc',\n title: 'CC',\n },\n displayName: 'FieldState',\n },\n },\n {\n '': {\n pristine: true,\n valid: true,\n invalid: false,\n loading: false,\n validating: false,\n initialized: true,\n submitting: false,\n errors: [],\n warnings: [],\n values: {},\n initialValues: {},\n mounted: true,\n unmounted: false,\n props: {},\n displayName: 'FormState',\n },\n aa: {\n name: 'aa',\n path: 'aa',\n dataType: 'string',\n initialized: true,\n pristine: true,\n valid: true,\n modified: false,\n touched: false,\n active: false,\n visited: false,\n invalid: false,\n visible: true,\n display: true,\n loading: false,\n validating: false,\n errors: [],\n values: [null],\n ruleErrors: [],\n ruleWarnings: [],\n effectErrors: [],\n warnings: [],\n effectWarnings: [],\n editable: true,\n rules: [\n {\n required: true,\n },\n ],\n required: true,\n mounted: true,\n unmounted: false,\n props: {\n key: 'aa',\n name: 'aa',\n type: 'string',\n required: true,\n title: 'AA',\n },\n displayName: 'FieldState',\n },\n bb: {\n name: 'bb',\n path: 'bb',\n dataType: 'string',\n initialized: true,\n pristine: true,\n valid: true,\n modified: false,\n touched: false,\n active: false,\n visited: false,\n invalid: false,\n visible: true,\n display: true,\n loading: false,\n validating: false,\n errors: [],\n values: [null],\n ruleErrors: [],\n ruleWarnings: [],\n effectErrors: [],\n warnings: [],\n effectWarnings: [],\n editable: true,\n rules: [],\n required: false,\n mounted: true,\n unmounted: false,\n props: {\n key: 'bb',\n type: 'string',\n name: 'bb',\n title: 'BB',\n enum: ['111', '222'],\n },\n displayName: 'FieldState',\n },\n },\n {\n '': {\n pristine: false,\n valid: true,\n invalid: false,\n loading: false,\n validating: false,\n initialized: true,\n submitting: false,\n errors: [],\n warnings: [],\n values: {\n aa: [\n {\n bb: 'aaaaa',\n dd: [\n {\n ff: '是',\n ee: '是',\n },\n ],\n cc: '1111',\n },\n {\n bb: 'ccccc',\n dd: [\n {\n ff: '是',\n ee: '否',\n },\n ],\n cc: '1111',\n },\n ],\n },\n initialValues: {\n aa: [\n {\n bb: 'aaaaa',\n dd: [\n {\n ee: '是',\n ff: '是',\n },\n ],\n },\n {\n bb: 'ccccc',\n dd: [\n {\n ee: '否',\n ff: '是',\n },\n ],\n },\n ],\n },\n mounted: true,\n unmounted: false,\n props: {},\n displayName: 'FormState',\n },\n NO_NAME_FIELD_$0: {\n name: 'NO_NAME_FIELD_$0',\n path: 'NO_NAME_FIELD_$0',\n initialized: true,\n visible: true,\n display: true,\n mounted: true,\n unmounted: false,\n props: {\n key: 'NO_NAME_FIELD_$0',\n type: 'object',\n name: 'NO_NAME_FIELD_$0',\n 'x-component': 'block',\n 'x-props': {\n title: 'Block1',\n },\n 'x-component-props': {\n title: 'Block1',\n },\n },\n displayName: 'VirtualFieldState',\n },\n 'NO_NAME_FIELD_$0.aa': {\n name: 'aa',\n path: 'NO_NAME_FIELD_$0.aa',\n dataType: 'array',\n initialized: true,\n pristine: false,\n valid: true,\n modified: true,\n touched: false,\n active: false,\n visited: false,\n invalid: false,\n visible: true,\n display: true,\n loading: false,\n validating: false,\n errors: [],\n values: [\n [\n {\n bb: 'aaaaa',\n dd: [\n {\n ff: '是',\n ee: '是',\n },\n ],\n cc: '1111',\n },\n {\n bb: 'ccccc',\n dd: [\n {\n ff: '是',\n ee: '否',\n },\n ],\n cc: '1111',\n },\n ],\n ],\n ruleErrors: [],\n ruleWarnings: [],\n effectErrors: [],\n warnings: [],\n effectWarnings: [],\n editable: true,\n value: [\n {\n bb: 'aaaaa',\n dd: [\n {\n ff: '是',\n ee: '是',\n },\n ],\n cc: '1111',\n },\n {\n bb: 'ccccc',\n dd: [\n {\n ff: '是',\n ee: '否',\n },\n ],\n cc: '1111',\n },\n ],\n initialValue: [\n {\n bb: 'aaaaa',\n dd: [\n {\n ee: '是',\n ff: '是',\n },\n ],\n },\n {\n bb: 'ccccc',\n dd: [\n {\n ee: '否',\n ff: '是',\n },\n ],\n },\n ],\n rules: [],\n required: false,\n mounted: true,\n unmounted: false,\n props: {\n key: 'aa',\n type: 'array',\n name: 'aa',\n },\n displayName: 'FieldState',\n },\n 'NO_NAME_FIELD_$0.aa.0': {\n name: 'aa.0',\n path: 'NO_NAME_FIELD_$0.aa.0',\n dataType: 'object',\n initialized: true,\n pristine: false,\n valid: true,\n modified: true,\n touched: false,\n active: false,\n visited: false,\n invalid: false,\n visible: true,\n display: true,\n loading: false,\n validating: false,\n errors: [],\n values: [\n {\n bb: 'aaaaa',\n dd: [\n {\n ff: '是',\n ee: '是',\n },\n ],\n cc: '1111',\n },\n ],\n ruleErrors: [],\n ruleWarnings: [],\n effectErrors: [],\n warnings: [],\n effectWarnings: [],\n editable: true,\n value: {\n bb: 'aaaaa',\n dd: [\n {\n ff: '是',\n ee: '是',\n },\n ],\n cc: '1111',\n },\n initialValue: {\n bb: 'aaaaa',\n dd: [\n {\n ee: '是',\n ff: '是',\n },\n ],\n },\n rules: [],\n required: false,\n mounted: true,\n unmounted: false,\n props: {\n type: 'object',\n },\n displayName: 'FieldState',\n },\n 'NO_NAME_FIELD_$0.aa.0.NO_NAME_FIELD_$1': {\n name: 'aa.0.NO_NAME_FIELD_$1',\n path: 'NO_NAME_FIELD_$0.aa.0.NO_NAME_FIELD_$1',\n initialized: true,\n visible: true,\n display: true,\n mounted: true,\n unmounted: false,\n props: {\n key: 'NO_NAME_FIELD_$1',\n type: 'object',\n name: 'NO_NAME_FIELD_$1',\n 'x-component': 'block',\n 'x-props': {\n title: '基本信息',\n },\n 'x-component-props': {\n title: '基本信息',\n },\n },\n displayName: 'VirtualFieldState',\n },\n 'NO_NAME_FIELD_$0.aa.0.NO_NAME_FIELD_$1.NO_NAME_FIELD_$2': {\n name: 'aa.0.NO_NAME_FIELD_$2',\n path: 'NO_NAME_FIELD_$0.aa.0.NO_NAME_FIELD_$1.NO_NAME_FIELD_$2',\n initialized: true,\n visible: true,\n display: true,\n mounted: true,\n unmounted: false,\n props: {\n key: 'NO_NAME_FIELD_$2',\n type: 'object',\n name: 'NO_NAME_FIELD_$2',\n 'x-component': 'layout',\n 'x-props': {\n inline: true,\n },\n 'x-component-props': {\n inline: true,\n },\n },\n displayName: 'VirtualFieldState',\n },\n 'NO_NAME_FIELD_$0.aa.0.NO_NAME_FIELD_$1.NO_NAME_FIELD_$2.bb': {\n name: 'aa.0.bb',\n path: 'NO_NAME_FIELD_$0.aa.0.NO_NAME_FIELD_$1.NO_NAME_FIELD_$2.bb',\n dataType: 'string',\n initialized: true,\n pristine: true,\n valid: true,\n modified: false,\n touched: false,\n active: false,\n visited: false,\n invalid: false,\n visible: true,\n display: true,\n loading: false,\n validating: false,\n errors: [],\n values: ['aaaaa'],\n ruleErrors: [],\n ruleWarnings: [],\n effectErrors: [],\n warnings: [],\n effectWarnings: [],\n editable: true,\n value: 'aaaaa',\n initialValue: 'aaaaa',\n rules: [],\n required: false,\n mounted: true,\n unmounted: false,\n props: {\n key: 'bb',\n type: 'string',\n name: 'bb',\n enum: ['aaaaa', 'bbbbb', 'ccccc', 'ddddd', 'eeeee'],\n title: 'BB',\n },\n displayName: 'FieldState',\n },\n 'NO_NAME_FIELD_$0.aa.0.NO_NAME_FIELD_$1.NO_NAME_FIELD_$2.cc': {\n name: 'aa.0.cc',\n path: 'NO_NAME_FIELD_$0.aa.0.NO_NAME_FIELD_$1.NO_NAME_FIELD_$2.cc',\n dataType: 'string',\n initialized: true,\n pristine: false,\n valid: true,\n modified: true,\n touched: false,\n active: false,\n visited: false,\n invalid: false,\n visible: true,\n display: true,\n loading: false,\n validating: false,\n errors: [],\n values: ['1111'],\n ruleErrors: [],\n ruleWarnings: [],\n effectErrors: [],\n warnings: [],\n effectWarnings: [],\n editable: true,\n value: '1111',\n rules: [],\n required: false,\n mounted: true,\n unmounted: false,\n props: {\n key: 'cc',\n type: 'string',\n name: 'cc',\n enum: ['1111', '2222'],\n title: 'CC',\n },\n displayName: 'FieldState',\n },\n 'NO_NAME_FIELD_$0.aa.0.NO_NAME_FIELD_$1.NO_NAME_FIELD_$2.gg': {\n name: 'aa.0.gg',\n path: 'NO_NAME_FIELD_$0.aa.0.NO_NAME_FIELD_$1.NO_NAME_FIELD_$2.gg',\n dataType: 'string',\n initialized: true,\n pristine: true,\n valid: true,\n modified: false,\n touched: false,\n active: false,\n visited: false,\n invalid: false,\n visible: true,\n display: true,\n loading: false,\n validating: false,\n errors: [],\n values: [null],\n ruleErrors: [],\n ruleWarnings: [],\n effectErrors: [],\n warnings: [],\n effectWarnings: [],\n editable: true,\n rules: [],\n required: false,\n mounted: true,\n unmounted: false,\n props: {\n key: 'gg',\n type: 'string',\n name: 'gg',\n title: 'GG',\n 'x-props': {\n style: {\n width: 200,\n },\n },\n },\n displayName: 'FieldState',\n },\n 'NO_NAME_FIELD_$0.aa.0.NO_NAME_FIELD_$3': {\n name: 'aa.0.NO_NAME_FIELD_$3',\n path: 'NO_NAME_FIELD_$0.aa.0.NO_NAME_FIELD_$3',\n initialized: true,\n visible: true,\n display: true,\n mounted: true,\n unmounted: false,\n props: {\n key: 'NO_NAME_FIELD_$3',\n type: 'object',\n name: 'NO_NAME_FIELD_$3',\n 'x-component': 'block',\n 'x-props': {\n title: '嵌套Array',\n },\n 'x-component-props': {\n title: '嵌套Array',\n },\n },\n displayName: 'VirtualFieldState',\n },\n 'NO_NAME_FIELD_$0.aa.0.NO_NAME_FIELD_$3.dd': {\n name: 'aa.0.dd',\n path: 'NO_NAME_FIELD_$0.aa.0.NO_NAME_FIELD_$3.dd',\n dataType: 'array',\n initialized: true,\n pristine: true,\n valid: true,\n modified: false,\n touched: false,\n active: false,\n visited: false,\n invalid: false,\n visible: true,\n display: true,\n loading: false,\n validating: false,\n errors: [],\n values: [\n [\n {\n ee: '是',\n ff: '是',\n },\n ],\n ],\n ruleErrors: [],\n ruleWarnings: [],\n effectErrors: [],\n warnings: [],\n effectWarnings: [],\n editable: true,\n value: [\n {\n ee: '是',\n ff: '是',\n },\n ],\n initialValue: [\n {\n ee: '是',\n ff: '是',\n },\n ],\n rules: [],\n required: false,\n mounted: true,\n unmounted: false,\n props: {\n key: 'dd',\n type: 'array',\n name: 'dd',\n },\n displayName: 'FieldState',\n },\n 'NO_NAME_FIELD_$0.aa.0.NO_NAME_FIELD_$3.dd.0': {\n name: 'aa.0.dd.0',\n path: 'NO_NAME_FIELD_$0.aa.0.NO_NAME_FIELD_$3.dd.0',\n dataType: 'object',\n initialized: true,\n pristine: true,\n valid: true,\n modified: false,\n touched: false,\n active: false,\n visited: false,\n invalid: false,\n visible: true,\n display: true,\n loading: false,\n validating: false,\n errors: [],\n values: [\n {\n ee: '是',\n ff: '是',\n },\n ],\n ruleErrors: [],\n ruleWarnings: [],\n effectErrors: [],\n warnings: [],\n effectWarnings: [],\n editable: true,\n value: {\n ee: '是',\n ff: '是',\n },\n initialValue: {\n ee: '是',\n ff: '是',\n },\n rules: [],\n required: false,\n mounted: true,\n unmounted: false,\n props: {\n type: 'object',\n },\n displayName: 'FieldState',\n },\n 'NO_NAME_FIELD_$0.aa.0.NO_NAME_FIELD_$3.dd.0.NO_NAME_FIELD_$4': {\n name: 'aa.0.dd.0.NO_NAME_FIELD_$4',\n path: 'NO_NAME_FIELD_$0.aa.0.NO_NAME_FIELD_$3.dd.0.NO_NAME_FIELD_$4',\n initialized: true,\n visible: true,\n display: true,\n mounted: true,\n unmounted: false,\n props: {\n key: 'NO_NAME_FIELD_$4',\n type: 'object',\n name: 'NO_NAME_FIELD_$4',\n 'x-component': 'layout',\n 'x-props': {\n inline: true,\n style: {\n marginLeft: 20,\n },\n },\n 'x-component-props': {\n inline: true,\n style: {\n marginLeft: 20,\n },\n },\n },\n displayName: 'VirtualFieldState',\n },\n 'NO_NAME_FIELD_$0.aa.0.NO_NAME_FIELD_$3.dd.0.NO_NAME_FIELD_$4.ee': {\n name: 'aa.0.dd.0.ee',\n path: 'NO_NAME_FIELD_$0.aa.0.NO_NAME_FIELD_$3.dd.0.NO_NAME_FIELD_$4.ee',\n dataType: 'string',\n initialized: true,\n pristine: true,\n valid: true,\n modified: false,\n touched: false,\n active: false,\n visited: false,\n invalid: false,\n visible: true,\n display: true,\n loading: false,\n validating: false,\n errors: [],\n values: ['是'],\n ruleErrors: [],\n ruleWarnings: [],\n effectErrors: [],\n warnings: [],\n effectWarnings: [],\n editable: true,\n value: '是',\n initialValue: '是',\n rules: [],\n required: false,\n mounted: true,\n unmounted: false,\n props: {\n key: 'ee',\n type: 'string',\n name: 'ee',\n enum: ['是', '否'],\n title: 'EE',\n description: '是否显示GG',\n },\n displayName: 'FieldState',\n },\n 'NO_NAME_FIELD_$0.aa.0.NO_NAME_FIELD_$3.dd.0.NO_NAME_FIELD_$4.ff': {\n name: 'aa.0.dd.0.ff',\n path: 'NO_NAME_FIELD_$0.aa.0.NO_NAME_FIELD_$3.dd.0.NO_NAME_FIELD_$4.ff',\n dataType: 'string',\n initialized: true,\n pristine: true,\n valid: true,\n modified: false,\n touched: false,\n active: false,\n visited: false,\n invalid: false,\n visible: true,\n display: true,\n loading: false,\n validating: false,\n errors: [],\n values: ['是'],\n ruleErrors: [],\n ruleWarnings: [],\n effectErrors: [],\n warnings: [],\n effectWarnings: [],\n editable: true,\n value: '是',\n initialValue: '是',\n rules: [],\n required: false,\n mounted: true,\n unmounted: false,\n props: {\n key: 'ff',\n type: 'string',\n name: 'ff',\n default: '是',\n enum: ['是', '否'],\n title: 'FF',\n description: '是否显示EE',\n },\n displayName: 'FieldState',\n },\n 'NO_NAME_FIELD_$0.aa.1': {\n name: 'aa.1',\n path: 'NO_NAME_FIELD_$0.aa.1',\n dataType: 'object',\n initialized: true,\n pristine: false,\n valid: true,\n modified: true,\n touched: false,\n active: false,\n visited: false,\n invalid: false,\n visible: true,\n display: true,\n loading: false,\n validating: false,\n errors: [],\n values: [\n {\n bb: 'ccccc',\n dd: [\n {\n ff: '是',\n ee: '否',\n },\n ],\n cc: '1111',\n },\n ],\n ruleErrors: [],\n ruleWarnings: [],\n effectErrors: [],\n warnings: [],\n effectWarnings: [],\n editable: true,\n value: {\n bb: 'ccccc',\n dd: [\n {\n ff: '是',\n ee: '否',\n },\n ],\n cc: '1111',\n },\n initialValue: {\n bb: 'ccccc',\n dd: [\n {\n ee: '否',\n ff: '是',\n },\n ],\n },\n rules: [],\n required: false,\n mounted: true,\n unmounted: false,\n props: {\n type: 'object',\n },\n displayName: 'FieldState',\n },\n 'NO_NAME_FIELD_$0.aa.1.NO_NAME_FIELD_$1': {\n name: 'aa.1.NO_NAME_FIELD_$1',\n path: 'NO_NAME_FIELD_$0.aa.1.NO_NAME_FIELD_$1',\n initialized: true,\n visible: true,\n display: true,\n mounted: true,\n unmounted: false,\n props: {\n key: 'NO_NAME_FIELD_$1',\n type: 'object',\n name: 'NO_NAME_FIELD_$1',\n 'x-component': 'block',\n 'x-props': {\n title: '基本信息',\n },\n 'x-component-props': {\n title: '基本信息',\n },\n },\n displayName: 'VirtualFieldState',\n },\n 'NO_NAME_FIELD_$0.aa.1.NO_NAME_FIELD_$1.NO_NAME_FIELD_$2': {\n name: 'aa.1.NO_NAME_FIELD_$2',\n path: 'NO_NAME_FIELD_$0.aa.1.NO_NAME_FIELD_$1.NO_NAME_FIELD_$2',\n initialized: true,\n visible: true,\n display: true,\n mounted: true,\n unmounted: false,\n props: {\n key: 'NO_NAME_FIELD_$2',\n type: 'object',\n name: 'NO_NAME_FIELD_$2',\n 'x-component': 'layout',\n 'x-props': {\n inline: true,\n },\n 'x-component-props': {\n inline: true,\n },\n },\n displayName: 'VirtualFieldState',\n },\n 'NO_NAME_FIELD_$0.aa.1.NO_NAME_FIELD_$1.NO_NAME_FIELD_$2.bb': {\n name: 'aa.1.bb',\n path: 'NO_NAME_FIELD_$0.aa.1.NO_NAME_FIELD_$1.NO_NAME_FIELD_$2.bb',\n dataType: 'string',\n initialized: true,\n pristine: true,\n valid: true,\n modified: false,\n touched: false,\n active: false,\n visited: false,\n invalid: false,\n visible: true,\n display: true,\n loading: false,\n validating: false,\n errors: [],\n values: ['ccccc'],\n ruleErrors: [],\n ruleWarnings: [],\n effectErrors: [],\n warnings: [],\n effectWarnings: [],\n editable: true,\n value: 'ccccc',\n initialValue: 'ccccc',\n rules: [],\n required: false,\n mounted: true,\n unmounted: false,\n props: {\n key: 'bb',\n type: 'string',\n name: 'bb',\n enum: ['aaaaa', 'bbbbb', 'ccccc', 'ddddd', 'eeeee'],\n title: 'BB',\n },\n displayName: 'FieldState',\n },\n 'NO_NAME_FIELD_$0.aa.1.NO_NAME_FIELD_$1.NO_NAME_FIELD_$2.cc': {\n name: 'aa.1.cc',\n path: 'NO_NAME_FIELD_$0.aa.1.NO_NAME_FIELD_$1.NO_NAME_FIELD_$2.cc',\n dataType: 'string',\n initialized: true,\n pristine: false,\n valid: true,\n modified: true,\n touched: false,\n active: false,\n visited: false,\n invalid: false,\n visible: true,\n display: true,\n loading: false,\n validating: false,\n errors: [],\n values: ['1111'],\n ruleErrors: [],\n ruleWarnings: [],\n effectErrors: [],\n warnings: [],\n effectWarnings: [],\n editable: true,\n value: '1111',\n rules: [],\n required: false,\n mounted: true,\n unmounted: false,\n props: {\n key: 'cc',\n type: 'string',\n name: 'cc',\n enum: ['1111', '2222'],\n title: 'CC',\n },\n displayName: 'FieldState',\n },\n 'NO_NAME_FIELD_$0.aa.1.NO_NAME_FIELD_$1.NO_NAME_FIELD_$2.gg': {\n name: 'aa.1.gg',\n path: 'NO_NAME_FIELD_$0.aa.1.NO_NAME_FIELD_$1.NO_NAME_FIELD_$2.gg',\n dataType: 'string',\n initialized: true,\n pristine: true,\n valid: true,\n modified: false,\n touched: false,\n active: false,\n visited: false,\n invalid: false,\n visible: false,\n display: true,\n loading: false,\n validating: false,\n errors: [],\n values: [null],\n ruleErrors: [],\n ruleWarnings: [],\n effectErrors: [],\n warnings: [],\n effectWarnings: [],\n editable: true,\n rules: [],\n required: false,\n mounted: true,\n unmounted: false,\n props: {\n key: 'gg',\n type: 'string',\n name: 'gg',\n title: 'GG',\n 'x-props': {\n style: {\n width: 200,\n },\n },\n },\n displayName: 'FieldState',\n },\n 'NO_NAME_FIELD_$0.aa.1.NO_NAME_FIELD_$3': {\n name: 'aa.1.NO_NAME_FIELD_$3',\n path: 'NO_NAME_FIELD_$0.aa.1.NO_NAME_FIELD_$3',\n initialized: true,\n visible: true,\n display: true,\n mounted: true,\n unmounted: false,\n props: {\n key: 'NO_NAME_FIELD_$3',\n type: 'object',\n name: 'NO_NAME_FIELD_$3',\n 'x-component': 'block',\n 'x-props': {\n title: '嵌套Array',\n },\n 'x-component-props': {\n title: '嵌套Array',\n },\n },\n displayName: 'VirtualFieldState',\n },\n 'NO_NAME_FIELD_$0.aa.1.NO_NAME_FIELD_$3.dd': {\n name: 'aa.1.dd',\n path: 'NO_NAME_FIELD_$0.aa.1.NO_NAME_FIELD_$3.dd',\n dataType: 'array',\n initialized: true,\n pristine: true,\n valid: true,\n modified: false,\n touched: false,\n active: false,\n visited: false,\n invalid: false,\n visible: true,\n display: true,\n loading: false,\n validating: false,\n errors: [],\n values: [\n [\n {\n ee: '否',\n ff: '是',\n },\n ],\n ],\n ruleErrors: [],\n ruleWarnings: [],\n effectErrors: [],\n warnings: [],\n effectWarnings: [],\n editable: true,\n value: [\n {\n ee: '否',\n ff: '是',\n },\n ],\n initialValue: [\n {\n ee: '否',\n ff: '是',\n },\n ],\n rules: [],\n required: false,\n mounted: true,\n unmounted: false,\n props: {\n key: 'dd',\n type: 'array',\n name: 'dd',\n },\n displayName: 'FieldState',\n },\n 'NO_NAME_FIELD_$0.aa.1.NO_NAME_FIELD_$3.dd.0': {\n name: 'aa.1.dd.0',\n path: 'NO_NAME_FIELD_$0.aa.1.NO_NAME_FIELD_$3.dd.0',\n dataType: 'object',\n initialized: true,\n pristine: true,\n valid: true,\n modified: false,\n touched: false,\n active: false,\n visited: false,\n invalid: false,\n visible: true,\n display: true,\n loading: false,\n validating: false,\n errors: [],\n values: [\n {\n ee: '否',\n ff: '是',\n },\n ],\n ruleErrors: [],\n ruleWarnings: [],\n effectErrors: [],\n warnings: [],\n effectWarnings: [],\n editable: true,\n value: {\n ee: '否',\n ff: '是',\n },\n initialValue: {\n ee: '否',\n ff: '是',\n },\n rules: [],\n required: false,\n mounted: true,\n unmounted: false,\n props: {\n type: 'object',\n },\n displayName: 'FieldState',\n },\n 'NO_NAME_FIELD_$0.aa.1.NO_NAME_FIELD_$3.dd.0.NO_NAME_FIELD_$4': {\n name: 'aa.1.dd.0.NO_NAME_FIELD_$4',\n path: 'NO_NAME_FIELD_$0.aa.1.NO_NAME_FIELD_$3.dd.0.NO_NAME_FIELD_$4',\n initialized: true,\n visible: true,\n display: true,\n mounted: true,\n unmounted: false,\n props: {\n key: 'NO_NAME_FIELD_$4',\n type: 'object',\n name: 'NO_NAME_FIELD_$4',\n 'x-component': 'layout',\n 'x-props': {\n inline: true,\n style: {\n marginLeft: 20,\n },\n },\n 'x-component-props': {\n inline: true,\n style: {\n marginLeft: 20,\n },\n },\n },\n displayName: 'VirtualFieldState',\n },\n 'NO_NAME_FIELD_$0.aa.1.NO_NAME_FIELD_$3.dd.0.NO_NAME_FIELD_$4.ee': {\n name: 'aa.1.dd.0.ee',\n path: 'NO_NAME_FIELD_$0.aa.1.NO_NAME_FIELD_$3.dd.0.NO_NAME_FIELD_$4.ee',\n dataType: 'string',\n initialized: true,\n pristine: true,\n valid: true,\n modified: false,\n touched: false,\n active: false,\n visited: false,\n invalid: false,\n visible: true,\n display: true,\n loading: false,\n validating: false,\n errors: [],\n values: ['否'],\n ruleErrors: [],\n ruleWarnings: [],\n effectErrors: [],\n warnings: [],\n effectWarnings: [],\n editable: true,\n value: '否',\n initialValue: '否',\n rules: [],\n required: false,\n mounted: true,\n unmounted: false,\n props: {\n key: 'ee',\n type: 'string',\n name: 'ee',\n enum: ['是', '否'],\n title: 'EE',\n description: '是否显示GG',\n },\n displayName: 'FieldState',\n },\n 'NO_NAME_FIELD_$0.aa.1.NO_NAME_FIELD_$3.dd.0.NO_NAME_FIELD_$4.ff': {\n name: 'aa.1.dd.0.ff',\n path: 'NO_NAME_FIELD_$0.aa.1.NO_NAME_FIELD_$3.dd.0.NO_NAME_FIELD_$4.ff',\n dataType: 'string',\n initialized: true,\n pristine: true,\n valid: true,\n modified: false,\n touched: false,\n active: false,\n visited: false,\n invalid: false,\n visible: true,\n display: true,\n loading: false,\n validating: false,\n errors: [],\n values: ['是'],\n ruleErrors: [],\n ruleWarnings: [],\n effectErrors: [],\n warnings: [],\n effectWarnings: [],\n editable: true,\n value: '是',\n initialValue: '是',\n rules: [],\n required: false,\n mounted: true,\n unmounted: false,\n props: {\n key: 'ff',\n type: 'string',\n name: 'ff',\n default: '是',\n enum: ['是', '否'],\n title: 'FF',\n description: '是否显示EE',\n },\n displayName: 'FieldState',\n },\n },\n]\n\nReactDOM.render(\n \n {\n select(info)\n if (chrome && chrome.devtools && chrome.devtools.inspectedWindow) {\n chrome.devtools.inspectedWindow.eval(\n `window.__FORMILY_DEV_TOOLS_HOOK__.setVm(\"${info.key}\",\"${\n dataSource[info.current][''].id\n }\")`\n )\n }\n }}\n />\n
\n )\n})`\n display: flex;\n position: absolute;\n top: 0;\n bottom: 0;\n left: 0;\n right: 0;\n overflow: hidden;\n color: #36d4c7;\n background: #282c34;\n`\n"
},
{
"path": "devtools/chrome-extension/src/extension/backend.ts",
"content": "//inject content script\n\nconst serializeObject = (obj: any) => {\n const seens = new WeakMap()\n const serialize = (obj: any) => {\n if (Array.isArray(obj)) {\n return obj.map(serialize)\n } else if (typeof obj === 'function') {\n return `f ${obj.displayName || obj.name}(){ }`\n } else if (typeof obj === 'object') {\n if (seens.get(obj)) return '#CircularReference'\n if (!obj) return obj\n if ('$$typeof' in obj && '_owner' in obj) {\n seens.set(obj, true)\n return '#ReactNode'\n } else if (obj.toJS) {\n seens.set(obj, true)\n return obj.toJS()\n } else if (obj.toJSON) {\n seens.set(obj, true)\n return obj.toJSON()\n } else {\n seens.set(obj, true)\n const result = {}\n for (let key in obj) {\n result[key] = serialize(obj[key])\n }\n seens.set(obj, false)\n return result\n }\n }\n return obj\n }\n return serialize(obj)\n}\n\nconst send = ({\n type,\n id,\n form,\n}: {\n type: string\n id?: string | number\n form?: any\n}) => {\n const graph = serializeObject(form?.getFormGraph())\n window.postMessage(\n {\n source: '@formily-devtools-inject-script',\n type,\n id,\n graph:\n form &&\n JSON.stringify(graph, (key, value) => {\n if (typeof value === 'symbol') {\n return value.toString()\n }\n return value\n }),\n },\n '*'\n )\n}\n\nsend({\n type: 'init',\n})\n\ninterface IIdleDeadline {\n didTimeout: boolean\n timeRemaining: () => DOMHighResTimeStamp\n}\n\nconst HOOK = {\n hasFormilyInstance: false,\n hasOpenDevtools: false,\n store: {},\n openDevtools() {\n this.hasOpenDevtools = true\n },\n closeDevtools() {\n this.hasOpenDevtools = false\n },\n setVm(fieldId: string, formId: string) {\n if (fieldId) {\n globalThis.$vm = this.store[formId].fields[fieldId]\n } else {\n globalThis.$vm = this.store[formId]\n }\n },\n inject(id: number, form: any) {\n this.hasFormilyInstance = true\n this.store[id] = form\n send({\n type: 'install',\n id,\n form,\n })\n let timer = null\n const task = () => {\n globalThis.requestIdleCallback((deadline: IIdleDeadline) => {\n if (this.store[id]) {\n if (deadline.timeRemaining() < 16) {\n task()\n } else {\n send({\n type: 'update',\n id,\n form,\n })\n }\n }\n })\n }\n form.subscribe(() => {\n if (!this.hasOpenDevtools) return\n clearTimeout(timer)\n timer = setTimeout(task, 300)\n })\n },\n update() {\n const keys = Object.keys(this.store || {})\n keys.forEach((id) => {\n send({\n type: 'update',\n id,\n form: this.store[id],\n })\n })\n },\n unmount(id: number) {\n delete this.store[id]\n send({\n type: 'uninstall',\n id,\n })\n },\n}\n\nglobalThis.__FORMILY_DEV_TOOLS_HOOK__ = HOOK\nglobalThis.__UFORM_DEV_TOOLS_HOOK__ = HOOK\n"
},
{
"path": "devtools/chrome-extension/src/extension/background.ts",
"content": "// background.ts - Manifest V3版本\nconst connections = {}\n\n// 处理扩展程序的连接请求\nchrome.runtime.onConnect.addListener(function (port) {\n if (port.name === '@formily-devtools-panel-script') {\n const extensionListener = function (message) {\n // 原始的连接事件不包含开发者工具网页的标签页标识符，\n // 所以我们需要显式发送它。\n if (message.name == 'init') {\n connections[message.tabId] = port\n return\n }\n // 其他消息的处理\n }\n\n // 监听开发者工具网页发来的消息\n port.onMessage.addListener(extensionListener)\n\n port.onDisconnect.addListener(function (disconnectedPort) {\n port.onMessage.removeListener(extensionListener)\n const tabs = Object.keys(connections)\n for (let i = 0, len = tabs.length; i < len; i++) {\n if (connections[tabs[i]] == port) {\n delete connections[tabs[i]]\n break\n }\n }\n })\n }\n})\n\n// 从内容脚本接收消息，并转发至当前标签页对应的开发者工具网页\nchrome.runtime.onMessage.addListener(function (request, sender) {\n // 来自内容脚本的消息应该已经设置 sender.tab\n if (sender.tab) {\n const tabId = sender.tab.id\n if (tabId && tabId in connections) {\n connections[tabId].postMessage(request)\n }\n }\n return true\n})\n"
},
{
"path": "devtools/chrome-extension/src/extension/content.ts",
"content": "window.addEventListener(\n 'message',\n (event) => {\n const { source, ...payload } = event.data\n if (source === '@formily-devtools-inject-script') {\n chrome.runtime.sendMessage({\n source,\n ...payload,\n })\n }\n },\n false\n)\n"
},
{
"path": "devtools/chrome-extension/src/extension/devpanel.tsx",
"content": "import React, { useEffect, useState } from 'react'\nimport ReactDOM from 'react-dom'\nimport App from '../app'\n\nconst backgroundPageConnection = chrome.runtime.connect({\n name: '@formily-devtools-panel-script',\n})\n\nbackgroundPageConnection.postMessage({\n name: 'init',\n tabId: chrome.devtools.inspectedWindow.tabId,\n})\n\nchrome.devtools.inspectedWindow.eval(\n 'window.__FORMILY_DEV_TOOLS_HOOK__.openDevtools()'\n)\n\nconst Devtools = () => {\n const [state, setState] = useState([])\n useEffect(() => {\n let store = {}\n const update = () => {\n setState(\n Object.keys(store).map((key) => {\n return store[key]\n })\n )\n }\n chrome.devtools.inspectedWindow.eval(\n 'window.__FORMILY_DEV_TOOLS_HOOK__.update()'\n )\n backgroundPageConnection.onMessage.addListener(({ type, id, graph }) => {\n if (type === 'init') {\n store = {}\n chrome.devtools.inspectedWindow.eval(\n 'window.__FORMILY_DEV_TOOLS_HOOK__.openDevtools()'\n )\n } else if (type !== 'uninstall') {\n store[id] = JSON.parse(graph)\n } else {\n delete store[id]\n }\n update()\n })\n }, [])\n return hello world
, document.getElementById('root'))\n"
},
{
"path": "devtools/chrome-extension/src/extension/views/devpanel.ejs",
"content": "\n\n\n \n
\n"
},
{
"path": "devtools/chrome-extension/src/extension/views/devtools.ejs",
"content": "\n\n \n
\n"
},
{
"path": "devtools/chrome-extension/src/extension/views/popup.ejs",
"content": "\n\n \n
\n"
},
{
"path": "devtools/chrome-extension/tsconfig.build.json",
"content": "{\n \"extends\": \"./tsconfig.json\",\n \"compilerOptions\": {\n \"outDir\": \"./lib\",\n \"paths\": {\n \"@formily/*\": [\"packages/*\", \"devtools/*\"]\n },\n \"declaration\": true\n }\n}\n"
},
{
"path": "devtools/chrome-extension/tsconfig.json",
"content": "{\n \"extends\": \"../../tsconfig.json\",\n \"include\": [\"./src/**/*.ts\", \"./src/**/*.tsx\"],\n \"exclude\": [\"./src/__tests__/*\", \"./esm/*\", \"./lib/*\"]\n}\n"
},
{
"path": "docs/functions/contributors.ts",
"content": "import { Handler } from '@netlify/functions'\nimport { Octokit } from '@octokit/rest'\n\nconst octokit = new Octokit({\n baseUrl: 'https://api.github.com',\n auth: process.env.GITHUB_TOKEN,\n})\n\nconst headers = {\n 'Access-Control-Allow-Origin': '*',\n 'Access-Control-Allow-Headers': 'Content-Type',\n 'Access-Control-Allow-Methods': 'GET',\n}\n\nexport const handler: Handler = async (event) => {\n if (event.httpMethod !== 'GET') {\n return { statusCode: 405, body: 'Method Not Allowed' }\n }\n return {\n statusCode: 200,\n headers,\n body: JSON.stringify(\n await octokit.repos.listContributors({\n owner: 'alibaba',\n repo: 'formily',\n per_page: 1000,\n page: 1,\n })\n ),\n }\n}\n"
},
{
"path": "docs/functions/npm-search.ts",
"content": "import { Handler } from '@netlify/functions'\nimport qs from 'querystring'\nimport axios from 'axios'\n\nconst headers = {\n 'Access-Control-Allow-Origin': '*',\n 'Access-Control-Allow-Headers': 'Content-Type',\n 'Access-Control-Allow-Methods': 'GET',\n}\n\nexport const handler: Handler = async (event) => {\n if (event.httpMethod !== 'GET') {\n return { statusCode: 405, body: 'Method Not Allowed' }\n }\n const params = qs.parse(event.rawQuery)\n const results = await axios.get(\n `https://www.npmjs.com/search/suggestions?q=${params.q}&size=100`\n )\n return {\n statusCode: 200,\n headers,\n body: JSON.stringify(results.data),\n }\n}\n"
},
{
"path": "docs/guide/advanced/async.md",
"content": "# Asynchronous Data Sources\n\nAsynchronous data source management, the core is reflected in the dataSource property of the [Field](https://core.formilyjs.org/api/models/field) model. We can modify the dataSource of the Field in effects, or modify the dataSource property in reactions.\n\nIf the field component (such as Select) has a consumer dataSource property, when the dataSource changes, the corresponding component will automatically re-render.\n\n\n {content}\n \n \n
\n )\n }\n return content\n}\n\nconst dataSource = [\n {\n feature: 'Custom component access cost',\n antd: '4.x low access cost',\n fusion: 'high',\n formik: 'low',\n finalForm: 'low',\n schemaForm: text('high', 'Because of coupling bootstrap'),\n hookForm: text('high', 'Because of coupling React Ref'),\n 'formily1.x': 'low',\n 'formily2.x': 'low',\n },\n {\n feature: 'performance',\n antd: text(\n '4.x performance is better',\n 'Only solved the value synchronization and accurate rendering'\n ),\n fusion: 'bad',\n formik: 'bad',\n finalForm: text(\n 'better',\n 'But only solved the value synchronization and accurate rendering'\n ),\n schemaForm: 'bad',\n hookForm: text(\n 'good',\n 'But only solved the value synchronization and accurate rendering'\n ),\n 'formily1.x': text(\n 'excellent',\n 'Can solve the precise rendering in the linkage process'\n ),\n 'formily2.x': text(\n 'excellent',\n 'Can solve the precise rendering in the linkage process'\n ),\n },\n {\n feature: 'Whether to support dynamic rendering',\n antd: 'no',\n fusion: 'no',\n formik: 'no',\n finalForm: 'no',\n schemaForm: 'yes',\n hookForm: 'no',\n 'formily1.x': 'yes',\n 'formily2.x': 'yes',\n },\n {\n feature: 'Whether to use out of the box',\n antd: 'yes',\n fusion: 'yes',\n formik: 'no',\n finalForm: 'no',\n schemaForm: 'yes',\n hookForm: 'no',\n 'formily1.x': 'yes',\n 'formily2.x': 'yes',\n },\n {\n feature: 'Whether to support cross-terminal',\n antd: 'no',\n fusion: 'no',\n formik: 'no',\n finalForm: 'no',\n schemaForm: 'no',\n hookForm: 'no',\n 'formily1.x': 'yes',\n 'formily2.x': 'yes',\n },\n {\n feature: 'Development efficiency',\n antd: 'general',\n fusion: 'generalv',\n formik: 'general',\n finalForm: 'general',\n schemaForm: text(\n 'low',\n 'Source code development requires manual maintenance of JSON'\n ),\n hookForm: 'general',\n 'formily1.x': 'high',\n 'formily2.x': 'high',\n },\n {\n feature: 'Learning cost',\n antd: 'easy',\n fusion: 'easy',\n formik: 'easy',\n finalForm: 'hard',\n schemaForm: 'hard',\n hookForm: 'easy',\n 'formily1.x': 'very hard',\n 'formily2.x': text('hard', 'The concept is drastically reduced'),\n },\n {\n feature: 'View code maintainability',\n antd: text('bad', 'Lots of conditional expressions'),\n fusion: text('bad', 'Lots of conditional expressions'),\n formik: text('bad', 'Lots of conditional expressions'),\n finalForm: text('bad', 'Lots of conditional expressions'),\n schemaForm: 'good',\n hookForm: text('bad', 'Lots of conditional expressions'),\n 'formily1.x': 'good',\n 'formily2.x': 'good',\n },\n {\n feature: 'Scenario-based packaging capabilities',\n antd: 'no',\n fusion: 'no',\n formik: 'no',\n finalForm: 'no',\n schemaForm: 'yes',\n hookForm: 'no',\n 'formily1.x': 'yes',\n 'formily2.x': 'yes',\n },\n {\n feature: 'Whether to support form preview',\n antd: 'no',\n fusion: 'yes',\n formik: 'no',\n finalForm: 'no',\n schemaForm: 'no',\n hookForm: 'no',\n 'formily1.x': 'yes',\n 'formily2.x': 'yes',\n },\n]\n\nexport default () => {\n return (\n \n {content}\n \n \n
\n )\n }\n return content\n}\n\nconst dataSource = [\n {\n feature: '自定义组件接入成本',\n antd: '4.x接入成本低',\n fusion: '高',\n formik: '低',\n finalForm: '低',\n schemaForm: text('高', '因为耦合bootstrap'),\n hookForm: text('高', '因为耦合React Ref'),\n 'formily1.x': '低',\n 'formily2.x': '低',\n },\n {\n feature: '性能',\n antd: text('4.x性能较好', '只解决了值同步精确渲染'),\n fusion: '差',\n formik: '差',\n finalForm: text('较好', '但只解决了值同步精确渲染'),\n schemaForm: '差',\n hookForm: text('好', '但只解决了值同步精确渲染'),\n 'formily1.x': text('非常好', '能解决联动过程中的精确渲染'),\n 'formily2.x': text('非常好', '能解决联动过程中的精确渲染'),\n },\n {\n feature: '是否支持动态渲染',\n antd: '否',\n fusion: '否',\n formik: '否',\n finalForm: '否',\n schemaForm: '是',\n hookForm: '否',\n 'formily1.x': '是',\n 'formily2.x': '是',\n },\n {\n feature: '是否开箱即用',\n antd: '是',\n fusion: '是',\n formik: '否',\n finalForm: '否',\n schemaForm: '是',\n hookForm: '否',\n 'formily1.x': '是',\n 'formily2.x': '是',\n },\n {\n feature: '是否支持跨端',\n antd: '否',\n fusion: '否',\n formik: '否',\n finalForm: '否',\n schemaForm: '否',\n hookForm: '否',\n 'formily1.x': '是',\n 'formily2.x': '是',\n },\n {\n feature: '开发效率',\n antd: '一般',\n fusion: '一般',\n formik: '一般',\n finalForm: '一般',\n schemaForm: text('低', '源码开发需要手工维护JSON'),\n hookForm: '一般',\n 'formily1.x': '高',\n 'formily2.x': '高',\n },\n {\n feature: '学习成本',\n antd: '低',\n fusion: '低',\n formik: '低',\n finalForm: '高',\n schemaForm: '高',\n hookForm: '低',\n 'formily1.x': '很高',\n 'formily2.x': text('高', '概念大量减少'),\n },\n {\n feature: '视图代码可维护性',\n antd: text('低', '大量条件表达式'),\n fusion: text('低', '大量条件表达式'),\n formik: text('低', '大量条件表达式'),\n finalForm: text('低', '大量条件表达式'),\n schemaForm: '高',\n hookForm: text('低', '大量条件表达式'),\n 'formily1.x': '高',\n 'formily2.x': '高',\n },\n {\n feature: '场景化封装能力',\n antd: '无',\n fusion: '无',\n formik: '无',\n finalForm: '无',\n schemaForm: '有',\n hookForm: '无',\n 'formily1.x': '有',\n 'formily2.x': '有',\n },\n {\n feature: '是否支持表单预览态',\n antd: '否',\n fusion: '是',\n formik: '否',\n finalForm: '否',\n schemaForm: '否',\n hookForm: '否',\n 'formily1.x': '是',\n 'formily2.x': '是',\n },\n]\n\nexport default () => {\n return (\n \n \n Promise.resolve(\n `
\n )\n}\n\nconst form = createForm({\n validateFirst: true,\n effects() {\n onFieldMount('version', async (field) => {\n const { versions: unsort } = await fetch(\n 'https://registry.npmmirror.com/@formily/core'\n ).then((res) => res.json())\n\n const versions = Object.keys(unsort).sort((v1, v2) =>\n semver.gte(v1, v2) ? -1 : 1\n )\n field.dataSource = versions.map((version) => ({\n label: version,\n value: version,\n }))\n })\n onFieldMount('package', async (field) => {\n const packages = await fetch(\n 'https://formilyjs.org/.netlify/functions/npm-search?q=@formily'\n ).then((res) => res.json())\n field.dataSource = packages.map(({ name }) => {\n return {\n label: name,\n value: name,\n }\n })\n })\n onFieldReact('bug-desc', (field) => {\n field.visible = field.query('type').value() === 'Bug Report'\n })\n onFieldReact('feature-desc', (field) => {\n field.visible = field.query('type').value() === 'Feature Request'\n })\n },\n})\n\nconst createIssueURL = ({\n type,\n title,\n version,\n package: pkg,\n reproduceLink,\n reproduceStep,\n expected,\n actually,\n comment,\n feature,\n api,\n}) => {\n const url = new URL('https://github.com/alibaba/formily/issues/new')\n\n const bugInfo = `\n- [ ] I have searched the [issues](https://github.com/alibaba/formily/issues) of this repository and believe that this is not a duplicate.\n\n### Reproduction link\n[](${\n reproduceLink || ''\n })\n\n### Steps to reproduce\n${reproduceStep || ''}\n\n### What is expected?\n${expected || ''}\n\n### What is actually happening?\n${actually || ''}\n\n### Package\n${pkg}@${version}\n\n---\n\n${comment || ''}\n\n\n`\n\n const prInfo = `\n- [ ] I have searched the [issues](https://github.com/alibaba/formily/issues) of this repository and believe that this is not a duplicate.\n\n### What problem does this feature solve?\n${feature || ''}\n\n### What does the proposed API look like?\n${api || ''}\n\n\n\n`\n\n url.searchParams.set('title', `[${type}] ${title}`)\n url.searchParams.set('body', type === 'Bug Report' ? bugInfo : prInfo)\n\n return url.href\n}\n\nexport default () => {\n return (\n \n )\n}\n```\n"
},
{
"path": "docs/guide/issue-helper.zh-CN.md",
"content": "# 问题反馈\n\n## 在你开始之前...\n\nIssue List 专用于跟踪错误报告和功能请求。 这意味着我们不接受使用相关的问题。 如果您创建了不符合要求的 Issue，它将立即被关闭。\n\n如果您面临的是使用相关的问题，您可以这样：\n\n- 先阅读介绍和组件文档\n- 确保您已在 FAQ 和 changelog 中搜索了您的问题\n- 在[Discussions](https://github.com/alibaba/formily/discussions)中查找/询问问题\n\n试着先尝试搜索您的问题\n\n它可能已经在开发分支中得到了解决，甚至已经解决。 但是，如果发现旧的，已关闭的问题仍保留在最新版本中，则应使用下面的表单打开一个新的问题，而不是对旧问题进行评论。\n\n```tsx\nimport React from 'react'\nimport { createForm, onFieldMount, onFieldReact } from '@formily/core'\nimport { Field, VoidField } from '@formily/react'\nimport {\n Form,\n Input,\n Select,\n Radio,\n FormItem,\n FormButtonGroup,\n Submit,\n} from '@formily/antd'\nimport semver from 'semver'\nimport ReactMde from 'react-mde'\nimport * as Showdown from 'showdown'\nimport 'react-mde/lib/styles/css/react-mde-all.css'\n\nconst converter = new Showdown.Converter({\n tables: true,\n simplifiedAutoLink: true,\n strikethrough: true,\n tasklists: true,\n})\n\nconst MdInput = ({ value, onChange }) => {\n const [selectedTab, setSelectedTab] = React.useState('write')\n return (\n ${\n converter.makeHtml(markdown) || ''\n }
`\n )\n }\n />\n \n \n Promise.resolve(\n `
\n )\n}\n\nconst form = createForm({\n validateFirst: true,\n effects() {\n onFieldMount('version', async (field) => {\n const { versions: unsort } = await fetch(\n 'https://registry.npmmirror.com/@formily/core'\n ).then((res) => res.json())\n\n const versions = Object.keys(unsort).sort((v1, v2) =>\n semver.gte(v1, v2) ? -1 : 1\n )\n field.dataSource = versions.map((version) => ({\n label: version,\n value: version,\n }))\n })\n onFieldMount('package', async (field) => {\n const packages = await fetch(\n 'https://formilyjs.org/.netlify/functions/npm-search?q=@formily'\n ).then((res) => res.json())\n field.dataSource = packages.map(({ name }) => {\n return {\n label: name,\n value: name,\n }\n })\n })\n onFieldReact('bug-desc', (field) => {\n field.visible = field.query('type').value() === 'Bug Report'\n })\n onFieldReact('feature-desc', (field) => {\n field.visible = field.query('type').value() === 'Feature Request'\n })\n },\n})\n\nconst createIssueURL = ({\n type,\n title,\n version,\n package: pkg,\n reproduceLink,\n reproduceStep,\n expected,\n actually,\n comment,\n feature,\n api,\n}) => {\n const url = new URL('https://github.com/alibaba/formily/issues/new')\n\n const bugInfo = `\n- [ ] I have searched the [issues](https://github.com/alibaba/formily/issues) of this repository and believe that this is not a duplicate.\n\n### Reproduction link\n[](${\n reproduceLink || ''\n })\n\n### Steps to reproduce\n${reproduceStep || ''}\n\n### What is expected?\n${expected || ''}\n\n### What is actually happening?\n${actually || ''}\n\n### Package\n${pkg}@${version}\n\n---\n\n${comment || ''}\n\n\n`\n\n const prInfo = `\n- [ ] I have searched the [issues](https://github.com/alibaba/formily/issues) of this repository and believe that this is not a duplicate.\n\n### What problem does this feature solve?\n${feature || ''}\n\n### What does the proposed API look like?\n${api || ''}\n\n\n\n`\n\n url.searchParams.set('title', `[${type}] ${title}`)\n url.searchParams.set('body', type === 'Bug Report' ? bugInfo : prInfo)\n\n return url.href\n}\n\nexport default () => {\n return (\n \n )\n}\n```\n"
},
{
"path": "docs/guide/learn-formily.md",
"content": "# How to learn Formily\n\n## Study Suggestion\n\nTo describe Formily in one sentence, it is an MVVM form solution that abstracts the form domain model. Therefore, if you want to use Formily in depth, you must learn and understand what Formily's domain model is like and what problems does it solve. After understanding the domain model, it is actually how to consume the view layer of this domain model. This layer only needs to look at the documentation of the specific components.\n\n## About the documentation\n\nBecause Formily’s learning costs are still relatively high, if you want to quickly understand the full picture of Formily, the most important thing is to read the documentation. It's just how to look at the document and where it will be more important. Below we give different document learning routes for different users.\n\n### Entry-level user\n\n- Introduction, because you need to understand Formily's core ideas and whether it is suitable for your business scenario.\n- Quick start, learn how to use Formily in practice from the simplest example.\n- Component documentation/core library documentation, because Formily has already encapsulated most of the out-of-the-box components for you. If you encounter component-related problems, you can just check the component documentation just like looking up a dictionary.\n- Scenario case, starting from the specific scenario, see what is the best practice in this scenario.\n\n### Advanced users\n\n- Digest the core concepts carefully and have a deeper understanding of Formily.\n- Advanced guide, mainly to learn more advanced usage methods, such as custom components, from simple custom components to super complex custom components.\n- Read component documents/core library documents at any time to deepen memory\n- For the details and best practices of custom component development, it is recommended to look directly at the source code of @formily/antd or @formily/next, because this is the boilerplate code and is closely related to the actual business scenario.\n\n### Source code co-builder\n\n- Contribution guide, understand the most basic contribution posture.\n- Read the document, if you find that the document is defective, you can submit a PR to fix it.\n- Read the unit test to understand the implementation details corresponding to each test case. If you find that there are missing test cases, you can submit a PR.\n- Read the source code, if you find a bug in the source code, you can raise a PR.\n\n${\n converter.makeHtml(markdown) || ''\n }
`\n )\n }\n />\n \n {\n field.title =\n field.query('.[].name').value() || field.title\n }}\n >\n \n \n \n
\n ))}\n \n {\n field.title =\n field.query('.[].name').value() || field.title\n }}\n >\n \n
\n ))}\n \n {\n field.title =\n field.query('.[].name').value() || field.title\n }}\n >\n \n \n \n
\n ))}\n \n {\n field.title =\n field.query('.[].name').value() || field.title\n }}\n >\n \n
\n ))}\n \n {\n field.title =\n field.query('.[].name').value() || field.title\n }}\n >\n \n \n \n
\n ))}\n \n {\n field.title =\n field.query('.[].name').value() || field.title\n }}\n >\n \n \n \n
\n ))}\n Powered by self\n---\n\n```tsx\n/**\n * inline: true\n */\nimport React from 'react'\nimport { Section } from './site/Section'\nimport './site/styles.less'\n\nexport default () => (\n
![](\"//img.alicdn.com/imgextra/i2/O1CN01eI9FLz22tZek2jv7E_!!6000000007178-2-tps-3683-2272.png\")
\n \n \n)\n```\n\n```tsx\n/**\n * inline: true\n */\nimport React from 'react'\nimport { Section } from './site/Section'\nimport './site/styles.less'\n\nexport default () => (\n ![](\"//img.alicdn.com/imgextra/i4/O1CN019qbf1b1ChnTfT9x3X_!!6000000000113-55-tps-1939-1199.svg\")
\n \n \n)\n```\n\n```tsx\n/**\n * inline: true\n */\nimport React from 'react'\nimport { Section } from './site/Section'\nimport { Contributors } from './site/Contributors'\nimport './site/styles.less'\n\nexport default () => (\n Powered by self\n---\n\n```tsx\n/**\n * inline: true\n */\nimport React from 'react'\nimport { Section } from './site/Section'\nimport './site/styles.less'\n\nexport default () => (\n
\n \n \n)\n```\n\n```tsx\n/**\n * inline: true\n */\nimport React from 'react'\nimport { Section } from './site/Section'\nimport './site/styles.less'\n\nexport default () => (\n ![](\"//img.alicdn.com/imgextra/i3/O1CN01iEwHrP1NUw84xTded_!!6000000001574-55-tps-1939-1199.svg\")
\n \n \n)\n```\n\n```tsx\n/**\n * inline: true\n */\nimport React from 'react'\nimport { Section } from './site/Section'\nimport { Contributors } from './site/Contributors'\nimport './site/styles.less'\n\nexport default () => (\n \n {contributors.map((user, key) => (\n
\n )\n}\n"
},
{
"path": "docs/site/QrCode.less",
"content": ".qrcode-group {\n display: flex;\n justify-content: center;\n .qrcode {\n width: 400px;\n margin: 20px;\n display: flex;\n flex-direction: column;\n justify-content: center;\n align-items: center;\n\n &-title {\n font-size: 20px;\n position: relative;\n\n &-content {\n position: absolute;\n left: 50%;\n bottom: 0;\n white-space: nowrap;\n transform: translateX(-50%);\n }\n }\n }\n}\n"
},
{
"path": "docs/site/QrCode.tsx",
"content": "import React from 'react'\nimport './QrCode.less'\n\nexport interface IQrCodeProps {\n title?: React.ReactNode\n link?: string\n}\n\nexport const QrCode: React.FC\n \n 
\n \n
\n ))}\n \n \n
\n {user.login}
\n \n \n
\n )\n}\n\nexport const QrCodeGroup: React.FC = (props) => (\n \n
\n {props.title}
\n \n 
\n
\n {props.children}
\n)\n"
},
{
"path": "docs/site/Section.less",
"content": ".site-section {\n &-title {\n font-size: 50px;\n text-align: center;\n padding-bottom: 200px;\n position: relative;\n color: #45124e;\n\n @media (max-width: 480px) {\n font-size: 30px;\n }\n }\n}\n"
},
{
"path": "docs/site/Section.tsx",
"content": "import React from 'react'\nimport './Section.less'\n\nexport interface ISectionProps {\n title?: React.ReactNode\n style?: React.CSSProperties\n titleStyle?: React.CSSProperties\n scale?: number\n}\n\nexport const Section: React.FC\n {props.title}\n
\n maxColumns 3 + minColumns 2
\nmaxColumns 3
\nminColumns 2
\nNull
\nminWidth 150 +maxColumns 3
\nmaxWidth 120+minColumns 2
\nmaxWidth 120 + gridSpan -1
\nmaxColumns 3 + minColumns 2
\nmaxColumns 3
\nminColumns 2
\nNull
\nminWidth 150 +maxColumns 3
\nmaxWidth 120+minColumns 2
\nmaxWidth 120 + gridSpan -1
\n{props.text}
\n\nconst SchemaField = createSchemaField({\n components: {\n Input,\n Select,\n Cascader,\n TreeSelect,\n DatePicker,\n NumberPicker,\n Switch,\n Radio,\n FormItem,\n Title,\n },\n})\n\nconst form = createForm()\n\nexport default () => {\n return (\n\n \n \n \n \n \n \n
\n )\n}\n```\n\n## Borderless case\n\nSet to remove the component border\n\n```tsx\nimport React from 'react'\nimport {\n Input,\n Radio,\n TreeSelect,\n Cascader,\n Select,\n DatePicker,\n FormItem,\n NumberPicker,\n Switch,\n} from '@formily/antd'\nimport { createForm } from '@formily/core'\nimport { FormProvider, createSchemaField } from '@formily/react'\n\nconst Title = (props) => \n Required Mark：\n
{props.text}
\n\nconst SchemaField = createSchemaField({\n components: {\n Input,\n Select,\n Cascader,\n TreeSelect,\n DatePicker,\n NumberPicker,\n Switch,\n Radio,\n FormItem,\n Title,\n },\n})\n\nconst form = createForm()\n\nexport default () => {\n return (\n{props.text}
\n\nconst SchemaField = createSchemaField({\n components: {\n Input,\n Select,\n Cascader,\n TreeSelect,\n DatePicker,\n NumberPicker,\n Switch,\n Radio,\n FormItem,\n Title,\n },\n})\n\nconst form = createForm()\n\nexport default () => {\n return (\n{props.text}
\n\nconst SchemaField = createSchemaField({\n components: {\n Input,\n Select,\n Cascader,\n TreeSelect,\n DatePicker,\n TimePicker,\n NumberPicker,\n Switch,\n Radio,\n FormItem,\n Title,\n FormLayout,\n },\n})\n\nconst form = createForm()\n\nexport default () => {\n return (\n{props.text}
\n\nconst SchemaField = createSchemaField({\n components: {\n Input,\n Select,\n Cascader,\n TreeSelect,\n DatePicker,\n NumberPicker,\n Switch,\n Radio,\n FormItem,\n Title,\n },\n})\n\nconst form = createForm()\n\nexport default () => {\n return (\n\n Required Mark：\n
{props.text}
\n\nconst SchemaField = createSchemaField({\n components: {\n Input,\n Select,\n Cascader,\n TreeSelect,\n DatePicker,\n NumberPicker,\n Switch,\n Radio,\n FormItem,\n Title,\n },\n})\n\nconst form = createForm()\n\nexport default () => {\n return (\n{props.text}
\n\nconst SchemaField = createSchemaField({\n components: {\n Input,\n Select,\n Cascader,\n TreeSelect,\n DatePicker,\n NumberPicker,\n Switch,\n Radio,\n FormItem,\n Title,\n },\n})\n\nconst form = createForm()\n\nexport default () => {\n return (\n{props.text}
\n\nconst SchemaField = createSchemaField({\n components: {\n Input,\n Select,\n Cascader,\n TreeSelect,\n DatePicker,\n TimePicker,\n NumberPicker,\n Switch,\n Radio,\n FormItem,\n Title,\n FormLayout,\n },\n})\n\nconst form = createForm()\n\nexport default () => {\n return (\n123
,\n },\n 'x-component': 'Input',\n },\n select: {\n type: 'string',\n title: 'Select box',\n required: true,\n 'x-decorator': 'FormItem',\n 'x-component': 'Select',\n },\n },\n },\n },\n}\n\nconst form = createForm()\n\nexport default () => (\n 123
,\n },\n 'x-component': 'Input',\n },\n select: {\n type: 'string',\n title: '选择框',\n required: true,\n 'x-decorator': 'FormItem',\n 'x-component': 'Select',\n },\n },\n },\n },\n}\n\nconst form = createForm()\n\nexport default () => (\n \n
\n Click or drag file to this area to upload\n
\n\n Support for a single or bulk upload. Strictly prohibit from uploading\n company data or other band files\n
\n \n )\n}\n\nconst SchemaField = createSchemaField({\n components: {\n NormalUpload,\n CardUpload,\n DraggerUpload,\n FormItem,\n },\n})\n\nconst form = createForm()\n\nexport default () => (\n\n
\n Click or drag file to this area to upload\n
\n\n Support for a single or bulk upload. Strictly prohibit from uploading\n company data or other band files\n
\n \n )\n}\n\nconst SchemaField = createSchemaField({\n components: {\n NormalUpload,\n CardUpload,\n DraggerUpload,\n FormItem,\n },\n})\n\nconst form = createForm()\n\nconst schema = {\n type: 'object',\n properties: {\n upload: {\n type: 'array',\n title: 'Upload',\n required: true,\n 'x-decorator': 'FormItem',\n 'x-component': 'NormalUpload',\n },\n upload2: {\n type: 'array',\n title: 'Card upload',\n required: true,\n 'x-decorator': 'FormItem',\n 'x-component': 'CardUpload',\n },\n upload3: {\n type: 'array',\n title: 'Drag and drop upload',\n required: true,\n 'x-decorator': 'FormItem',\n 'x-component': 'DraggerUpload',\n },\n },\n}\n\nexport default () => (\n\n
\n Click or drag file to this area to upload\n
\n\n Support for a single or bulk upload. Strictly prohibit from uploading\n company data or other band files\n
\n \n )\n}\n\nconst form = createForm()\n\nexport default () => (\n\n
\n Click or drag file to this area to upload\n
\n\n Support for a single or bulk upload. Strictly prohibit from uploading\n company data or other band files\n
\n \n )\n}\n\nconst SchemaField = createSchemaField({\n components: {\n NormalUpload,\n CardUpload,\n DraggerUpload,\n FormItem,\n },\n})\n\nconst form = createForm()\n\nexport default () => (\n\n
\n Click or drag file to this area to upload\n
\n\n Support for a single or bulk upload. Strictly prohibit from uploading\n company data or other band files\n
\n \n )\n}\n\nconst SchemaField = createSchemaField({\n components: {\n NormalUpload,\n CardUpload,\n DraggerUpload,\n FormItem,\n },\n})\n\nconst form = createForm()\n\nconst schema = {\n type: 'object',\n properties: {\n upload: {\n type: 'array',\n title: '上传',\n required: true,\n 'x-decorator': 'FormItem',\n 'x-component': 'NormalUpload',\n },\n upload2: {\n type: 'array',\n title: '卡片上传',\n required: true,\n 'x-decorator': 'FormItem',\n 'x-component': 'CardUpload',\n },\n upload3: {\n type: 'array',\n title: '拖拽上传',\n required: true,\n 'x-decorator': 'FormItem',\n 'x-component': 'DraggerUpload',\n },\n },\n}\n\nexport default () => (\n\n
\n Click or drag file to this area to upload\n
\n\n Support for a single or bulk upload. Strictly prohibit from uploading\n company data or other band files\n
\n \n )\n}\n\nconst form = createForm()\n\nexport default () => (\nPowered by self\n---\n\n## Installation\n\n```bash\n$ npm install --save antd moment\n$ npm install --save @formily/core @formily/react @formily/antd\n\n```\n\n## Quick start\n\n```tsx\n/**\n * defaultShowCode: true\n */\nimport React from 'react'\nimport { NumberPicker, FormItem, Space } from '@formily/antd'\nimport { createForm } from '@formily/core'\nimport { FormProvider, FormConsumer, Field } from '@formily/react'\n\nconst form = createForm()\n\nexport default () => (\n
Powered by self\n---\n\n## 安装\n\n```bash\n$ npm install --save antd moment\n$ npm install --save @formily/core @formily/react @formily/antd\n\n```\n\n## 快速开始\n\n```tsx\n/**\n * defaultShowCode: true\n */\nimport React from 'react'\nimport { NumberPicker, FormItem, Space } from '@formily/antd'\nimport { createForm } from '@formily/core'\nimport { FormProvider, FormConsumer, Field } from '@formily/react'\n\nconst form = createForm()\n\nexport default () => (\n
\n {props.children}\n
\n )\n }\n)\n\nconst SortableList = SortableContainer(\n (props: React.PropsWithChildren\n {props.children}\n
\n )\n }\n)\n\nconst isAdditionComponent = (schema: ISchema) => {\n return schema['x-component']?.indexOf('Addition') > -1\n}\n\nconst useAddition = () => {\n const schema = useFieldSchema()\n return schema.reduceProperties((addition, schema, key) => {\n if (isAdditionComponent(schema)) {\n return \n
\n \n \n \n
\n )\n }\n\n return (\n \n \n {}}\n pagination={false}\n columns={columns}\n dataSource={dataSource}\n components={{\n body: {\n wrapper: getWrapperComp(dataSource, startIndex),\n row: RowComp,\n },\n }}\n />\n
\n )}\n {pager}
\n {sources.map((column, key) => {\n //专门用来承接对Column的状态管理\n if (!isColumnComponent(column.schema)) return\n return React.createElement(RecursionField, {\n name: column.name,\n schema: column.schema,\n onlyRenderSelf: true,\n key,\n })\n })}\n {addition}\n \n \n
\n )\n})\n\nEditable.Popover = observer((props) => {\n const field = useField\n \n {props.children}\n \n {renderEditHelper()}\n {renderCloseHelper()}\n
\n \n \n \n
\n \n )\n})\n\nexport default Editable\n"
},
{
"path": "packages/antd/src/editable/style.less",
"content": "@root-entry-name: 'default';\n@import (reference) '~antd/es/style/themes/index.less';\n\n@editable-prefix-cls: ~'@{ant-prefix}-formily-editable';\n\n.@{editable-prefix-cls} {\n cursor: pointer;\n display: inline-block !important;\n\n .@{ant-prefix}-form-text {\n .@{ant-prefix}-tag {\n transition: none !important;\n }\n\n .@{ant-prefix}-tag:last-child {\n margin-right: 0 !important;\n }\n }\n\n &-content {\n display: flex;\n align-items: center;\n\n > * {\n margin-right: 3px;\n &:last-child {\n margin-right: 0;\n }\n }\n }\n\n .@{editable-prefix-cls}-edit-btn,\n .@{editable-prefix-cls}-close-btn {\n transition: all 0.25s ease-in-out;\n color: #aaa;\n font-size: 12px;\n\n &:hover {\n color: @primary-5;\n }\n }\n\n .@{ant-prefix}-form-text {\n display: flex;\n align-items: center;\n }\n\n .@{editable-prefix-cls}-preview {\n white-space: nowrap;\n text-overflow: ellipsis;\n overflow: hidden;\n word-break: break-all;\n max-width: 100px;\n display: block;\n }\n}\n"
},
{
"path": "packages/antd/src/editable/style.ts",
"content": "import 'antd/lib/form/style/index'\nimport 'antd/lib/space/style/index'\nimport 'antd/lib/popover/style/index'\nimport './style.less'\n"
},
{
"path": "packages/antd/src/form/index.tsx",
"content": "import React from 'react'\nimport { Form as FormType, ObjectField, IFormFeedback } from '@formily/core'\nimport { useParentForm, FormProvider, JSXComponent } from '@formily/react'\nimport { FormLayout, IFormLayoutProps } from '../form-layout'\nimport { PreviewText } from '../preview-text'\nexport interface FormProps extends IFormLayoutProps {\n form?: FormType\n component?: JSXComponent\n onAutoSubmit?: (values: any) => any\n onAutoSubmitFailed?: (feedbacks: IFormFeedback[]) => void\n previewTextPlaceholder?: React.ReactNode\n}\n\nexport const Form: React.FC\n \n {props.title || field.title}\n \n {pattern === 'editable' && (\n
\n