This is page 27 of 35. Use http://codebase.md/alibaba/formily?format=md&lines=false&page={x} to view the full context.

# Directory Structure

```
├── .all-contributorsrc
├── .codecov.yml
├── .editorconfig
├── .eslintignore
├── .eslintrc
├── .github
│   ├── CONTRIBUTING.md
│   ├── FUNDING.yml
│   ├── ISSUE_TEMPLATE
│   │   └── config.yml
│   ├── PULL_REQUEST_TEMPLATE.md
│   └── workflows
│       ├── check-pr-title.yml
│       ├── ci.yml
│       ├── commitlint.yml
│       ├── issue-open-check.yml
│       ├── package-size.yml
│       └── pr-welcome.yml
├── .gitignore
├── .prettierrc.js
├── .umirc.js
├── .vscode
│   └── cspell.json
├── .yarnrc
├── CHANGELOG.md
├── commitlint.config.js
├── devtools
│   ├── .eslintrc
│   └── chrome-extension
│       ├── .npmignore
│       ├── assets
│       │   └── img
│       │       ├── loading.svg
│       │       └── logo
│       │           ├── 128x128.png
│       │           ├── 16x16.png
│       │           ├── 38x38.png
│       │           ├── 48x48.png
│       │           ├── error.png
│       │           ├── gray.png
│       │           └── scalable.png
│       ├── config
│       │   ├── webpack.base.ts
│       │   ├── webpack.dev.ts
│       │   └── webpack.prod.ts
│       ├── LICENSE.md
│       ├── package.json
│       ├── src
│       │   ├── app
│       │   │   ├── components
│       │   │   │   ├── FieldTree.tsx
│       │   │   │   ├── filter.ts
│       │   │   │   ├── LeftPanel.tsx
│       │   │   │   ├── RightPanel.tsx
│       │   │   │   ├── SearchBox.tsx
│       │   │   │   └── Tabs.tsx
│       │   │   ├── demo.tsx
│       │   │   └── index.tsx
│       │   └── extension
│       │       ├── backend.ts
│       │       ├── background.ts
│       │       ├── content.ts
│       │       ├── devpanel.tsx
│       │       ├── devtools.tsx
│       │       ├── inject.ts
│       │       ├── manifest.json
│       │       ├── popup.tsx
│       │       └── views
│       │           ├── devpanel.ejs
│       │           ├── devtools.ejs
│       │           └── popup.ejs
│       ├── tsconfig.build.json
│       └── tsconfig.json
├── docs
│   ├── functions
│   │   ├── contributors.ts
│   │   └── npm-search.ts
│   ├── guide
│   │   ├── advanced
│   │   │   ├── async.md
│   │   │   ├── async.zh-CN.md
│   │   │   ├── build.md
│   │   │   ├── build.zh-CN.md
│   │   │   ├── business-logic.md
│   │   │   ├── business-logic.zh-CN.md
│   │   │   ├── calculator.md
│   │   │   ├── calculator.zh-CN.md
│   │   │   ├── controlled.md
│   │   │   ├── controlled.zh-CN.md
│   │   │   ├── custom.md
│   │   │   ├── custom.zh-CN.md
│   │   │   ├── destructor.md
│   │   │   ├── destructor.zh-CN.md
│   │   │   ├── input.less
│   │   │   ├── layout.md
│   │   │   ├── layout.zh-CN.md
│   │   │   ├── linkages.md
│   │   │   ├── linkages.zh-CN.md
│   │   │   ├── validate.md
│   │   │   └── validate.zh-CN.md
│   │   ├── contribution.md
│   │   ├── contribution.zh-CN.md
│   │   ├── form-builder.md
│   │   ├── form-builder.zh-CN.md
│   │   ├── index.md
│   │   ├── index.zh-CN.md
│   │   ├── issue-helper.md
│   │   ├── issue-helper.zh-CN.md
│   │   ├── learn-formily.md
│   │   ├── learn-formily.zh-CN.md
│   │   ├── quick-start.md
│   │   ├── quick-start.zh-CN.md
│   │   ├── scenes
│   │   │   ├── dialog-drawer.md
│   │   │   ├── dialog-drawer.zh-CN.md
│   │   │   ├── edit-detail.md
│   │   │   ├── edit-detail.zh-CN.md
│   │   │   ├── index.less
│   │   │   ├── login-register.md
│   │   │   ├── login-register.zh-CN.md
│   │   │   ├── more.md
│   │   │   ├── more.zh-CN.md
│   │   │   ├── query-list.md
│   │   │   ├── query-list.zh-CN.md
│   │   │   ├── step-form.md
│   │   │   ├── step-form.zh-CN.md
│   │   │   ├── tab-form.md
│   │   │   ├── tab-form.zh-CN.md
│   │   │   └── VerifyCode.tsx
│   │   ├── upgrade.md
│   │   └── upgrade.zh-CN.md
│   ├── index.md
│   ├── index.zh-CN.md
│   └── site
│       ├── Contributors.less
│       ├── Contributors.tsx
│       ├── QrCode.less
│       ├── QrCode.tsx
│       ├── Section.less
│       ├── Section.tsx
│       └── styles.less
├── global.config.ts
├── jest.config.js
├── lerna.json
├── LICENSE.md
├── package.json
├── packages
│   ├── .eslintrc
│   ├── antd
│   │   ├── __tests__
│   │   │   ├── moment.spec.ts
│   │   │   └── sideEffects.spec.ts
│   │   ├── .npmignore
│   │   ├── .umirc.js
│   │   ├── build-style.ts
│   │   ├── create-style.ts
│   │   ├── docs
│   │   │   ├── components
│   │   │   │   ├── ArrayCards.md
│   │   │   │   ├── ArrayCards.zh-CN.md
│   │   │   │   ├── ArrayCollapse.md
│   │   │   │   ├── ArrayCollapse.zh-CN.md
│   │   │   │   ├── ArrayItems.md
│   │   │   │   ├── ArrayItems.zh-CN.md
│   │   │   │   ├── ArrayTable.md
│   │   │   │   ├── ArrayTable.zh-CN.md
│   │   │   │   ├── ArrayTabs.md
│   │   │   │   ├── ArrayTabs.zh-CN.md
│   │   │   │   ├── Cascader.md
│   │   │   │   ├── Cascader.zh-CN.md
│   │   │   │   ├── Checkbox.md
│   │   │   │   ├── Checkbox.zh-CN.md
│   │   │   │   ├── DatePicker.md
│   │   │   │   ├── DatePicker.zh-CN.md
│   │   │   │   ├── Editable.md
│   │   │   │   ├── Editable.zh-CN.md
│   │   │   │   ├── Form.md
│   │   │   │   ├── Form.zh-CN.md
│   │   │   │   ├── FormButtonGroup.md
│   │   │   │   ├── FormButtonGroup.zh-CN.md
│   │   │   │   ├── FormCollapse.md
│   │   │   │   ├── FormCollapse.zh-CN.md
│   │   │   │   ├── FormDialog.md
│   │   │   │   ├── FormDialog.zh-CN.md
│   │   │   │   ├── FormDrawer.md
│   │   │   │   ├── FormDrawer.zh-CN.md
│   │   │   │   ├── FormGrid.md
│   │   │   │   ├── FormGrid.zh-CN.md
│   │   │   │   ├── FormItem.md
│   │   │   │   ├── FormItem.zh-CN.md
│   │   │   │   ├── FormLayout.md
│   │   │   │   ├── FormLayout.zh-CN.md
│   │   │   │   ├── FormStep.md
│   │   │   │   ├── FormStep.zh-CN.md
│   │   │   │   ├── FormTab.md
│   │   │   │   ├── FormTab.zh-CN.md
│   │   │   │   ├── index.md
│   │   │   │   ├── index.zh-CN.md
│   │   │   │   ├── Input.md
│   │   │   │   ├── Input.zh-CN.md
│   │   │   │   ├── NumberPicker.md
│   │   │   │   ├── NumberPicker.zh-CN.md
│   │   │   │   ├── Password.md
│   │   │   │   ├── Password.zh-CN.md
│   │   │   │   ├── PreviewText.md
│   │   │   │   ├── PreviewText.zh-CN.md
│   │   │   │   ├── Radio.md
│   │   │   │   ├── Radio.zh-CN.md
│   │   │   │   ├── Reset.md
│   │   │   │   ├── Reset.zh-CN.md
│   │   │   │   ├── Select.md
│   │   │   │   ├── Select.zh-CN.md
│   │   │   │   ├── SelectTable.md
│   │   │   │   ├── SelectTable.zh-CN.md
│   │   │   │   ├── Space.md
│   │   │   │   ├── Space.zh-CN.md
│   │   │   │   ├── Submit.md
│   │   │   │   ├── Submit.zh-CN.md
│   │   │   │   ├── Switch.md
│   │   │   │   ├── Switch.zh-CN.md
│   │   │   │   ├── TimePicker.md
│   │   │   │   ├── TimePicker.zh-CN.md
│   │   │   │   ├── Transfer.md
│   │   │   │   ├── Transfer.zh-CN.md
│   │   │   │   ├── TreeSelect.md
│   │   │   │   ├── TreeSelect.zh-CN.md
│   │   │   │   ├── Upload.md
│   │   │   │   └── Upload.zh-CN.md
│   │   │   ├── index.md
│   │   │   └── index.zh-CN.md
│   │   ├── LICENSE.md
│   │   ├── package.json
│   │   ├── README.md
│   │   ├── rollup.config.js
│   │   ├── src
│   │   │   ├── __builtins__
│   │   │   │   ├── hooks
│   │   │   │   │   ├── index.ts
│   │   │   │   │   ├── useClickAway.ts
│   │   │   │   │   └── usePrefixCls.ts
│   │   │   │   ├── index.ts
│   │   │   │   ├── loading.ts
│   │   │   │   ├── moment.ts
│   │   │   │   ├── pickDataProps.ts
│   │   │   │   ├── portal.tsx
│   │   │   │   ├── render.ts
│   │   │   │   └── sort.tsx
│   │   │   ├── array-base
│   │   │   │   ├── index.tsx
│   │   │   │   ├── style.less
│   │   │   │   └── style.ts
│   │   │   ├── array-cards
│   │   │   │   ├── index.tsx
│   │   │   │   ├── style.less
│   │   │   │   └── style.ts
│   │   │   ├── array-collapse
│   │   │   │   ├── index.tsx
│   │   │   │   ├── style.less
│   │   │   │   └── style.ts
│   │   │   ├── array-items
│   │   │   │   ├── index.tsx
│   │   │   │   ├── style.less
│   │   │   │   └── style.ts
│   │   │   ├── array-table
│   │   │   │   ├── index.tsx
│   │   │   │   ├── style.less
│   │   │   │   └── style.ts
│   │   │   ├── array-tabs
│   │   │   │   ├── index.tsx
│   │   │   │   └── style.ts
│   │   │   ├── cascader
│   │   │   │   ├── index.tsx
│   │   │   │   └── style.ts
│   │   │   ├── checkbox
│   │   │   │   ├── index.tsx
│   │   │   │   └── style.ts
│   │   │   ├── date-picker
│   │   │   │   ├── index.tsx
│   │   │   │   └── style.ts
│   │   │   ├── editable
│   │   │   │   ├── index.tsx
│   │   │   │   ├── style.less
│   │   │   │   └── style.ts
│   │   │   ├── form
│   │   │   │   ├── index.tsx
│   │   │   │   ├── style.less
│   │   │   │   └── style.ts
│   │   │   ├── form-button-group
│   │   │   │   ├── index.tsx
│   │   │   │   ├── style.less
│   │   │   │   └── style.ts
│   │   │   ├── form-collapse
│   │   │   │   ├── index.tsx
│   │   │   │   └── style.ts
│   │   │   ├── form-dialog
│   │   │   │   ├── index.tsx
│   │   │   │   └── style.ts
│   │   │   ├── form-drawer
│   │   │   │   ├── index.tsx
│   │   │   │   └── style.ts
│   │   │   ├── form-grid
│   │   │   │   ├── index.tsx
│   │   │   │   ├── style.less
│   │   │   │   └── style.ts
│   │   │   ├── form-item
│   │   │   │   ├── animation.less
│   │   │   │   ├── grid.less
│   │   │   │   ├── index.tsx
│   │   │   │   ├── style.less
│   │   │   │   └── style.ts
│   │   │   ├── form-layout
│   │   │   │   ├── index.tsx
│   │   │   │   ├── style.less
│   │   │   │   ├── style.ts
│   │   │   │   └── useResponsiveFormLayout.ts
│   │   │   ├── form-step
│   │   │   │   ├── index.tsx
│   │   │   │   └── style.ts
│   │   │   ├── form-tab
│   │   │   │   ├── index.tsx
│   │   │   │   └── style.ts
│   │   │   ├── index.ts
│   │   │   ├── input
│   │   │   │   ├── index.tsx
│   │   │   │   └── style.ts
│   │   │   ├── number-picker
│   │   │   │   ├── index.tsx
│   │   │   │   └── style.ts
│   │   │   ├── password
│   │   │   │   ├── index.tsx
│   │   │   │   ├── PasswordStrength.tsx
│   │   │   │   └── style.ts
│   │   │   ├── preview-text
│   │   │   │   ├── index.tsx
│   │   │   │   ├── style.less
│   │   │   │   └── style.ts
│   │   │   ├── radio
│   │   │   │   ├── index.tsx
│   │   │   │   ├── style.less
│   │   │   │   └── style.ts
│   │   │   ├── reset
│   │   │   │   ├── index.tsx
│   │   │   │   └── style.ts
│   │   │   ├── select
│   │   │   │   ├── index.tsx
│   │   │   │   └── style.ts
│   │   │   ├── select-table
│   │   │   │   ├── index.tsx
│   │   │   │   ├── style.less
│   │   │   │   ├── style.ts
│   │   │   │   ├── useCheckSlackly.tsx
│   │   │   │   ├── useFilterOptions.tsx
│   │   │   │   ├── useFlatOptions.tsx
│   │   │   │   ├── useSize.tsx
│   │   │   │   ├── useTitleAddon.tsx
│   │   │   │   └── utils.ts
│   │   │   ├── space
│   │   │   │   ├── index.tsx
│   │   │   │   └── style.ts
│   │   │   ├── style.less
│   │   │   ├── style.ts
│   │   │   ├── submit
│   │   │   │   ├── index.tsx
│   │   │   │   └── style.ts
│   │   │   ├── switch
│   │   │   │   ├── index.tsx
│   │   │   │   └── style.ts
│   │   │   ├── time-picker
│   │   │   │   ├── index.tsx
│   │   │   │   └── style.ts
│   │   │   ├── transfer
│   │   │   │   ├── index.tsx
│   │   │   │   └── style.ts
│   │   │   ├── tree-select
│   │   │   │   ├── index.tsx
│   │   │   │   └── style.ts
│   │   │   └── upload
│   │   │       ├── index.tsx
│   │   │       ├── placeholder.ts
│   │   │       └── style.ts
│   │   ├── tsconfig.build.json
│   │   └── tsconfig.json
│   ├── benchmark
│   │   ├── .npmignore
│   │   ├── .umirc.js
│   │   ├── LICENSE.md
│   │   ├── package.json
│   │   ├── README.md
│   │   ├── src
│   │   │   └── index.tsx
│   │   ├── template.ejs
│   │   ├── tsconfig.build.json
│   │   ├── tsconfig.json
│   │   ├── webpack.base.ts
│   │   ├── webpack.dev.ts
│   │   └── webpack.prod.ts
│   ├── core
│   │   ├── .npmignore
│   │   ├── .umirc.js
│   │   ├── docs
│   │   │   ├── api
│   │   │   │   ├── entry
│   │   │   │   │   ├── ActionResponse.less
│   │   │   │   │   ├── ActionResponse.tsx
│   │   │   │   │   ├── createForm.md
│   │   │   │   │   ├── createForm.zh-CN.md
│   │   │   │   │   ├── FieldEffectHooks.md
│   │   │   │   │   ├── FieldEffectHooks.zh-CN.md
│   │   │   │   │   ├── FormChecker.md
│   │   │   │   │   ├── FormChecker.zh-CN.md
│   │   │   │   │   ├── FormEffectHooks.md
│   │   │   │   │   ├── FormEffectHooks.zh-CN.md
│   │   │   │   │   ├── FormHooksAPI.md
│   │   │   │   │   ├── FormHooksAPI.zh-CN.md
│   │   │   │   │   ├── FormPath.md
│   │   │   │   │   ├── FormPath.zh-CN.md
│   │   │   │   │   ├── FormValidatorRegistry.md
│   │   │   │   │   └── FormValidatorRegistry.zh-CN.md
│   │   │   │   └── models
│   │   │   │       ├── ArrayField.md
│   │   │   │       ├── ArrayField.zh-CN.md
│   │   │   │       ├── Field.md
│   │   │   │       ├── Field.zh-CN.md
│   │   │   │       ├── Form.md
│   │   │   │       ├── Form.zh-CN.md
│   │   │   │       ├── ObjectField.md
│   │   │   │       ├── ObjectField.zh-CN.md
│   │   │   │       ├── Query.md
│   │   │   │       ├── Query.zh-CN.md
│   │   │   │       ├── VoidField.md
│   │   │   │       └── VoidField.zh-CN.md
│   │   │   ├── guide
│   │   │   │   ├── architecture.md
│   │   │   │   ├── architecture.zh-CN.md
│   │   │   │   ├── field.md
│   │   │   │   ├── field.zh-CN.md
│   │   │   │   ├── form.md
│   │   │   │   ├── form.zh-CN.md
│   │   │   │   ├── index.md
│   │   │   │   ├── index.zh-CN.md
│   │   │   │   ├── mvvm.md
│   │   │   │   ├── mvvm.zh-CN.md
│   │   │   │   ├── values.md
│   │   │   │   └── values.zh-CN.md
│   │   │   ├── index.md
│   │   │   └── index.zh-CN.md
│   │   ├── LICENSE.md
│   │   ├── package.json
│   │   ├── README.md
│   │   ├── rollup.config.js
│   │   ├── src
│   │   │   ├── __tests__
│   │   │   │   ├── array.spec.ts
│   │   │   │   ├── effects.spec.ts
│   │   │   │   ├── externals.spec.ts
│   │   │   │   ├── field.spec.ts
│   │   │   │   ├── form.spec.ts
│   │   │   │   ├── graph.spec.ts
│   │   │   │   ├── heart.spec.ts
│   │   │   │   ├── internals.spec.ts
│   │   │   │   ├── lifecycle.spec.ts
│   │   │   │   ├── object.spec.ts
│   │   │   │   ├── shared.ts
│   │   │   │   └── void.spec.ts
│   │   │   ├── effects
│   │   │   │   ├── index.ts
│   │   │   │   ├── onFieldEffects.ts
│   │   │   │   └── onFormEffects.ts
│   │   │   ├── global.d.ts
│   │   │   ├── index.ts
│   │   │   ├── models
│   │   │   │   ├── ArrayField.ts
│   │   │   │   ├── BaseField.ts
│   │   │   │   ├── Field.ts
│   │   │   │   ├── Form.ts
│   │   │   │   ├── Graph.ts
│   │   │   │   ├── Heart.ts
│   │   │   │   ├── index.ts
│   │   │   │   ├── LifeCycle.ts
│   │   │   │   ├── ObjectField.ts
│   │   │   │   ├── Query.ts
│   │   │   │   ├── types.ts
│   │   │   │   └── VoidField.ts
│   │   │   ├── shared
│   │   │   │   ├── checkers.ts
│   │   │   │   ├── constants.ts
│   │   │   │   ├── effective.ts
│   │   │   │   ├── externals.ts
│   │   │   │   └── internals.ts
│   │   │   └── types.ts
│   │   ├── tsconfig.build.json
│   │   └── tsconfig.json
│   ├── element
│   │   ├── .npmignore
│   │   ├── build-style.ts
│   │   ├── create-style.ts
│   │   ├── docs
│   │   │   ├── .vuepress
│   │   │   │   ├── components
│   │   │   │   │   ├── createCodeSandBox.js
│   │   │   │   │   ├── dumi-previewer.vue
│   │   │   │   │   └── highlight.js
│   │   │   │   ├── config.js
│   │   │   │   ├── enhanceApp.js
│   │   │   │   ├── styles
│   │   │   │   │   └── index.styl
│   │   │   │   └── util.js
│   │   │   ├── demos
│   │   │   │   ├── guide
│   │   │   │   │   ├── array-cards
│   │   │   │   │   │   ├── effects-json-schema.vue
│   │   │   │   │   │   ├── effects-markup-schema.vue
│   │   │   │   │   │   ├── json-schema.vue
│   │   │   │   │   │   └── markup-schema.vue
│   │   │   │   │   ├── array-collapse
│   │   │   │   │   │   ├── effects-json-schema.vue
│   │   │   │   │   │   ├── effects-markup-schema.vue
│   │   │   │   │   │   ├── json-schema.vue
│   │   │   │   │   │   └── markup-schema.vue
│   │   │   │   │   ├── array-items
│   │   │   │   │   │   ├── json-schema.vue
│   │   │   │   │   │   └── markup-schema.vue
│   │   │   │   │   ├── array-table
│   │   │   │   │   │   ├── effects-json-schema.vue
│   │   │   │   │   │   ├── effects-markup-schema.vue
│   │   │   │   │   │   ├── json-schema.vue
│   │   │   │   │   │   └── markup-schema.vue
│   │   │   │   │   ├── array-tabs
│   │   │   │   │   │   ├── json-schema.vue
│   │   │   │   │   │   └── markup-schema.vue
│   │   │   │   │   ├── cascader
│   │   │   │   │   │   ├── json-schema.vue
│   │   │   │   │   │   ├── markup-schema.vue
│   │   │   │   │   │   └── template.vue
│   │   │   │   │   ├── checkbox
│   │   │   │   │   │   ├── json-schema.vue
│   │   │   │   │   │   ├── markup-schema.vue
│   │   │   │   │   │   └── template.vue
│   │   │   │   │   ├── date-picker
│   │   │   │   │   │   ├── json-schema.vue
│   │   │   │   │   │   ├── markup-schema.vue
│   │   │   │   │   │   └── template.vue
│   │   │   │   │   ├── editable
│   │   │   │   │   │   ├── json-schema.vue
│   │   │   │   │   │   ├── markup-schema.vue
│   │   │   │   │   │   └── template.vue
│   │   │   │   │   ├── form-button-group.vue
│   │   │   │   │   ├── form-collapse
│   │   │   │   │   │   ├── json-schema.vue
│   │   │   │   │   │   └── markup-schema.vue
│   │   │   │   │   ├── form-dialog
│   │   │   │   │   │   ├── json-schema.vue
│   │   │   │   │   │   ├── markup-schema.vue
│   │   │   │   │   │   └── template.vue
│   │   │   │   │   ├── form-drawer
│   │   │   │   │   │   ├── json-schema.vue
│   │   │   │   │   │   ├── markup-schema.vue
│   │   │   │   │   │   └── template.vue
│   │   │   │   │   ├── form-grid
│   │   │   │   │   │   ├── form.vue
│   │   │   │   │   │   ├── json-schema.vue
│   │   │   │   │   │   ├── markup-schema.vue
│   │   │   │   │   │   └── native.vue
│   │   │   │   │   ├── form-item
│   │   │   │   │   │   ├── bordered-none.vue
│   │   │   │   │   │   ├── common.vue
│   │   │   │   │   │   ├── feedback.vue
│   │   │   │   │   │   ├── inset.vue
│   │   │   │   │   │   ├── json-schema.vue
│   │   │   │   │   │   ├── markup-schema.vue
│   │   │   │   │   │   ├── size.vue
│   │   │   │   │   │   └── template.vue
│   │   │   │   │   ├── form-layout
│   │   │   │   │   │   ├── json-schema.vue
│   │   │   │   │   │   ├── markup-schema.vue
│   │   │   │   │   │   └── template.vue
│   │   │   │   │   ├── form-step
│   │   │   │   │   │   ├── json-schema.vue
│   │   │   │   │   │   └── markup-schema.vue
│   │   │   │   │   ├── form-tab
│   │   │   │   │   │   ├── json-schema.vue
│   │   │   │   │   │   └── markup-schema.vue
│   │   │   │   │   ├── form.vue
│   │   │   │   │   ├── input
│   │   │   │   │   │   ├── json-schema.vue
│   │   │   │   │   │   ├── markup-schema.vue
│   │   │   │   │   │   └── template.vue
│   │   │   │   │   ├── input-number
│   │   │   │   │   │   ├── json-schema.vue
│   │   │   │   │   │   ├── markup-schema.vue
│   │   │   │   │   │   └── template.vue
│   │   │   │   │   ├── password
│   │   │   │   │   │   ├── json-schema.vue
│   │   │   │   │   │   ├── markup-schema.vue
│   │   │   │   │   │   └── template.vue
│   │   │   │   │   ├── preview-text
│   │   │   │   │   │   ├── base.vue
│   │   │   │   │   │   └── extend.vue
│   │   │   │   │   ├── radio
│   │   │   │   │   │   ├── json-schema.vue
│   │   │   │   │   │   ├── markup-schema.vue
│   │   │   │   │   │   └── template.vue
│   │   │   │   │   ├── reset
│   │   │   │   │   │   ├── base.vue
│   │   │   │   │   │   ├── force.vue
│   │   │   │   │   │   └── validate.vue
│   │   │   │   │   ├── select
│   │   │   │   │   │   ├── json-schema-async.vue
│   │   │   │   │   │   ├── json-schema-sync.vue
│   │   │   │   │   │   ├── markup-schema-async-search.vue
│   │   │   │   │   │   ├── markup-schema-async.vue
│   │   │   │   │   │   ├── markup-schema-sync.vue
│   │   │   │   │   │   ├── template-async.vue
│   │   │   │   │   │   └── template-sync.vue
│   │   │   │   │   ├── space
│   │   │   │   │   │   ├── json-schema.vue
│   │   │   │   │   │   ├── markup-schema.vue
│   │   │   │   │   │   └── template.vue
│   │   │   │   │   ├── submit
│   │   │   │   │   │   ├── base.vue
│   │   │   │   │   │   └── loading.vue
│   │   │   │   │   ├── switch
│   │   │   │   │   │   ├── json-schema.vue
│   │   │   │   │   │   ├── markup-schema.vue
│   │   │   │   │   │   └── template.vue
│   │   │   │   │   ├── time-picker
│   │   │   │   │   │   ├── json-schema.vue
│   │   │   │   │   │   ├── markup-schema.vue
│   │   │   │   │   │   └── template.vue
│   │   │   │   │   ├── transfer
│   │   │   │   │   │   ├── json-schema.vue
│   │   │   │   │   │   ├── markup-schema.vue
│   │   │   │   │   │   └── template.vue
│   │   │   │   │   └── upload
│   │   │   │   │       ├── json-schema.vue
│   │   │   │   │       ├── markup-schema.vue
│   │   │   │   │       └── template.vue
│   │   │   │   └── index.vue
│   │   │   ├── guide
│   │   │   │   ├── array-cards.md
│   │   │   │   ├── array-collapse.md
│   │   │   │   ├── array-items.md
│   │   │   │   ├── array-table.md
│   │   │   │   ├── array-tabs.md
│   │   │   │   ├── cascader.md
│   │   │   │   ├── checkbox.md
│   │   │   │   ├── date-picker.md
│   │   │   │   ├── editable.md
│   │   │   │   ├── form-button-group.md
│   │   │   │   ├── form-collapse.md
│   │   │   │   ├── form-dialog.md
│   │   │   │   ├── form-drawer.md
│   │   │   │   ├── form-grid.md
│   │   │   │   ├── form-item.md
│   │   │   │   ├── form-layout.md
│   │   │   │   ├── form-step.md
│   │   │   │   ├── form-tab.md
│   │   │   │   ├── form.md
│   │   │   │   ├── index.md
│   │   │   │   ├── input-number.md
│   │   │   │   ├── input.md
│   │   │   │   ├── password.md
│   │   │   │   ├── preview-text.md
│   │   │   │   ├── radio.md
│   │   │   │   ├── reset.md
│   │   │   │   ├── select.md
│   │   │   │   ├── space.md
│   │   │   │   ├── submit.md
│   │   │   │   ├── switch.md
│   │   │   │   ├── time-picker.md
│   │   │   │   ├── transfer.md
│   │   │   │   └── upload.md
│   │   │   └── README.md
│   │   ├── package.json
│   │   ├── README.md
│   │   ├── rollup.config.js
│   │   ├── src
│   │   │   ├── __builtins__
│   │   │   │   ├── configs
│   │   │   │   │   └── index.ts
│   │   │   │   ├── index.ts
│   │   │   │   ├── shared
│   │   │   │   │   ├── create-context.ts
│   │   │   │   │   ├── index.ts
│   │   │   │   │   ├── loading.ts
│   │   │   │   │   ├── portal.ts
│   │   │   │   │   ├── resolve-component.ts
│   │   │   │   │   ├── transform-component.ts
│   │   │   │   │   ├── types.ts
│   │   │   │   │   └── utils.ts
│   │   │   │   └── styles
│   │   │   │       └── common.scss
│   │   │   ├── array-base
│   │   │   │   ├── index.ts
│   │   │   │   ├── style.scss
│   │   │   │   └── style.ts
│   │   │   ├── array-cards
│   │   │   │   ├── index.ts
│   │   │   │   ├── style.scss
│   │   │   │   └── style.ts
│   │   │   ├── array-collapse
│   │   │   │   ├── index.ts
│   │   │   │   ├── style.scss
│   │   │   │   └── style.ts
│   │   │   ├── array-items
│   │   │   │   ├── index.ts
│   │   │   │   ├── style.scss
│   │   │   │   └── style.ts
│   │   │   ├── array-table
│   │   │   │   ├── index.ts
│   │   │   │   ├── style.scss
│   │   │   │   └── style.ts
│   │   │   ├── array-tabs
│   │   │   │   ├── index.ts
│   │   │   │   ├── style.scss
│   │   │   │   └── style.ts
│   │   │   ├── cascader
│   │   │   │   ├── index.ts
│   │   │   │   └── style.ts
│   │   │   ├── checkbox
│   │   │   │   ├── index.ts
│   │   │   │   └── style.ts
│   │   │   ├── date-picker
│   │   │   │   ├── index.ts
│   │   │   │   └── style.ts
│   │   │   ├── editable
│   │   │   │   ├── index.ts
│   │   │   │   ├── style.scss
│   │   │   │   └── style.ts
│   │   │   ├── el-form
│   │   │   │   ├── index.ts
│   │   │   │   └── style.ts
│   │   │   ├── el-form-item
│   │   │   │   ├── index.ts
│   │   │   │   └── style.ts
│   │   │   ├── form
│   │   │   │   ├── index.ts
│   │   │   │   ├── style.scss
│   │   │   │   └── style.ts
│   │   │   ├── form-button-group
│   │   │   │   ├── index.ts
│   │   │   │   ├── style.scss
│   │   │   │   └── style.ts
│   │   │   ├── form-collapse
│   │   │   │   ├── index.ts
│   │   │   │   ├── style.scss
│   │   │   │   └── style.ts
│   │   │   ├── form-dialog
│   │   │   │   ├── index.ts
│   │   │   │   └── style.ts
│   │   │   ├── form-drawer
│   │   │   │   ├── index.ts
│   │   │   │   ├── style.scss
│   │   │   │   └── style.ts
│   │   │   ├── form-grid
│   │   │   │   ├── index.ts
│   │   │   │   ├── style.scss
│   │   │   │   └── style.ts
│   │   │   ├── form-item
│   │   │   │   ├── animation.scss
│   │   │   │   ├── grid.scss
│   │   │   │   ├── index.ts
│   │   │   │   ├── style.scss
│   │   │   │   ├── style.ts
│   │   │   │   └── var.scss
│   │   │   ├── form-layout
│   │   │   │   ├── index.ts
│   │   │   │   ├── style.scss
│   │   │   │   ├── style.ts
│   │   │   │   └── useResponsiveFormLayout.ts
│   │   │   ├── form-step
│   │   │   │   ├── index.ts
│   │   │   │   └── style.ts
│   │   │   ├── form-tab
│   │   │   │   ├── index.ts
│   │   │   │   ├── style.scss
│   │   │   │   └── style.ts
│   │   │   ├── index.ts
│   │   │   ├── input
│   │   │   │   ├── index.ts
│   │   │   │   └── style.ts
│   │   │   ├── input-number
│   │   │   │   ├── index.ts
│   │   │   │   └── style.ts
│   │   │   ├── password
│   │   │   │   ├── index.ts
│   │   │   │   └── style.ts
│   │   │   ├── preview-text
│   │   │   │   ├── index.ts
│   │   │   │   └── style.ts
│   │   │   ├── radio
│   │   │   │   ├── index.ts
│   │   │   │   └── style.ts
│   │   │   ├── reset
│   │   │   │   ├── index.ts
│   │   │   │   └── style.ts
│   │   │   ├── select
│   │   │   │   ├── index.ts
│   │   │   │   └── style.ts
│   │   │   ├── space
│   │   │   │   ├── index.ts
│   │   │   │   ├── style.scss
│   │   │   │   └── style.ts
│   │   │   ├── style.ts
│   │   │   ├── submit
│   │   │   │   ├── index.ts
│   │   │   │   └── style.ts
│   │   │   ├── switch
│   │   │   │   ├── index.ts
│   │   │   │   └── style.ts
│   │   │   ├── time-picker
│   │   │   │   ├── index.ts
│   │   │   │   └── style.ts
│   │   │   ├── transfer
│   │   │   │   ├── index.ts
│   │   │   │   └── style.ts
│   │   │   └── upload
│   │   │       ├── index.ts
│   │   │       └── style.ts
│   │   ├── transformer.ts
│   │   ├── tsconfig.build.json
│   │   └── tsconfig.json
│   ├── grid
│   │   ├── .npmignore
│   │   ├── LICENSE.md
│   │   ├── package.json
│   │   ├── README.md
│   │   ├── rollup.config.js
│   │   ├── src
│   │   │   ├── index.ts
│   │   │   └── observer.ts
│   │   ├── tsconfig.build.json
│   │   └── tsconfig.json
│   ├── json-schema
│   │   ├── .npmignore
│   │   ├── LICENSE.md
│   │   ├── package.json
│   │   ├── README.md
│   │   ├── rollup.config.js
│   │   ├── src
│   │   │   ├── __tests__
│   │   │   │   ├── __snapshots__
│   │   │   │   │   └── schema.spec.ts.snap
│   │   │   │   ├── compiler.spec.ts
│   │   │   │   ├── patches.spec.ts
│   │   │   │   ├── schema.spec.ts
│   │   │   │   ├── server-validate.spec.ts
│   │   │   │   ├── shared.spec.ts
│   │   │   │   ├── transformer.spec.ts
│   │   │   │   └── traverse.spec.ts
│   │   │   ├── compiler.ts
│   │   │   ├── global.d.ts
│   │   │   ├── index.ts
│   │   │   ├── patches.ts
│   │   │   ├── polyfills
│   │   │   │   ├── index.ts
│   │   │   │   └── SPECIFICATION_1_0.ts
│   │   │   ├── schema.ts
│   │   │   ├── shared.ts
│   │   │   ├── transformer.ts
│   │   │   └── types.ts
│   │   ├── tsconfig.build.json
│   │   └── tsconfig.json
│   ├── next
│   │   ├── __tests__
│   │   │   ├── moment.spec.ts
│   │   │   └── sideEffects.spec.ts
│   │   ├── .npmignore
│   │   ├── .umirc.js
│   │   ├── build-style.ts
│   │   ├── create-style.ts
│   │   ├── docs
│   │   │   ├── components
│   │   │   │   ├── ArrayCards.md
│   │   │   │   ├── ArrayCards.zh-CN.md
│   │   │   │   ├── ArrayCollapse.md
│   │   │   │   ├── ArrayCollapse.zh-CN.md
│   │   │   │   ├── ArrayItems.md
│   │   │   │   ├── ArrayItems.zh-CN.md
│   │   │   │   ├── ArrayTable.md
│   │   │   │   ├── ArrayTable.zh-CN.md
│   │   │   │   ├── Cascader.md
│   │   │   │   ├── Cascader.zh-CN.md
│   │   │   │   ├── Checkbox.md
│   │   │   │   ├── Checkbox.zh-CN.md
│   │   │   │   ├── DatePicker.md
│   │   │   │   ├── DatePicker.zh-CN.md
│   │   │   │   ├── DatePicker2.md
│   │   │   │   ├── DatePicker2.zh-CN.md
│   │   │   │   ├── Editable.md
│   │   │   │   ├── Editable.zh-CN.md
│   │   │   │   ├── Form.md
│   │   │   │   ├── Form.zh-CN.md
│   │   │   │   ├── FormButtonGroup.md
│   │   │   │   ├── FormButtonGroup.zh-CN.md
│   │   │   │   ├── FormCollapse.md
│   │   │   │   ├── FormCollapse.zh-CN.md
│   │   │   │   ├── FormDialog.md
│   │   │   │   ├── FormDialog.zh-CN.md
│   │   │   │   ├── FormDrawer.md
│   │   │   │   ├── FormDrawer.zh-CN.md
│   │   │   │   ├── FormGrid.md
│   │   │   │   ├── FormGrid.zh-CN.md
│   │   │   │   ├── FormItem.md
│   │   │   │   ├── FormItem.zh-CN.md
│   │   │   │   ├── FormLayout.md
│   │   │   │   ├── FormLayout.zh-CN.md
│   │   │   │   ├── FormStep.md
│   │   │   │   ├── FormStep.zh-CN.md
│   │   │   │   ├── FormTab.md
│   │   │   │   ├── FormTab.zh-CN.md
│   │   │   │   ├── index.md
│   │   │   │   ├── index.zh-CN.md
│   │   │   │   ├── Input.md
│   │   │   │   ├── Input.zh-CN.md
│   │   │   │   ├── NumberPicker.md
│   │   │   │   ├── NumberPicker.zh-CN.md
│   │   │   │   ├── Password.md
│   │   │   │   ├── Password.zh-CN.md
│   │   │   │   ├── PreviewText.md
│   │   │   │   ├── PreviewText.zh-CN.md
│   │   │   │   ├── Radio.md
│   │   │   │   ├── Radio.zh-CN.md
│   │   │   │   ├── Reset.md
│   │   │   │   ├── Reset.zh-CN.md
│   │   │   │   ├── Select.md
│   │   │   │   ├── Select.zh-CN.md
│   │   │   │   ├── SelectTable.md
│   │   │   │   ├── SelectTable.zh-CN.md
│   │   │   │   ├── Space.md
│   │   │   │   ├── Space.zh-CN.md
│   │   │   │   ├── Submit.md
│   │   │   │   ├── Submit.zh-CN.md
│   │   │   │   ├── Switch.md
│   │   │   │   ├── Switch.zh-CN.md
│   │   │   │   ├── TimePicker.md
│   │   │   │   ├── TimePicker.zh-CN.md
│   │   │   │   ├── TimePicker2.md
│   │   │   │   ├── TimePicker2.zh-CN.md
│   │   │   │   ├── Transfer.md
│   │   │   │   ├── Transfer.zh-CN.md
│   │   │   │   ├── TreeSelect.md
│   │   │   │   ├── TreeSelect.zh-CN.md
│   │   │   │   ├── Upload.md
│   │   │   │   └── Upload.zh-CN.md
│   │   │   ├── index.md
│   │   │   └── index.zh-CN.md
│   │   ├── LESENCE.md
│   │   ├── package.json
│   │   ├── README.md
│   │   ├── rollup.config.js
│   │   ├── src
│   │   │   ├── __builtins__
│   │   │   │   ├── empty.tsx
│   │   │   │   ├── hooks
│   │   │   │   │   ├── index.ts
│   │   │   │   │   ├── useClickAway.ts
│   │   │   │   │   └── usePrefixCls.ts
│   │   │   │   ├── icons.tsx
│   │   │   │   ├── index.ts
│   │   │   │   ├── loading.ts
│   │   │   │   ├── mapSize.ts
│   │   │   │   ├── mapStatus.ts
│   │   │   │   ├── moment.ts
│   │   │   │   ├── pickDataProps.ts
│   │   │   │   ├── portal.tsx
│   │   │   │   ├── render.ts
│   │   │   │   └── toArray.ts
│   │   │   ├── array-base
│   │   │   │   ├── index.tsx
│   │   │   │   ├── main.scss
│   │   │   │   └── style.ts
│   │   │   ├── array-cards
│   │   │   │   ├── index.tsx
│   │   │   │   ├── main.scss
│   │   │   │   └── style.ts
│   │   │   ├── array-collapse
│   │   │   │   ├── index.tsx
│   │   │   │   ├── main.scss
│   │   │   │   └── style.ts
│   │   │   ├── array-items
│   │   │   │   ├── index.tsx
│   │   │   │   ├── main.scss
│   │   │   │   └── style.ts
│   │   │   ├── array-table
│   │   │   │   ├── index.tsx
│   │   │   │   ├── main.scss
│   │   │   │   └── style.ts
│   │   │   ├── cascader
│   │   │   │   ├── index.tsx
│   │   │   │   └── style.ts
│   │   │   ├── checkbox
│   │   │   │   ├── index.tsx
│   │   │   │   └── style.ts
│   │   │   ├── date-picker
│   │   │   │   ├── index.tsx
│   │   │   │   └── style.ts
│   │   │   ├── date-picker2
│   │   │   │   ├── index.tsx
│   │   │   │   ├── main.scss
│   │   │   │   └── style.ts
│   │   │   ├── editable
│   │   │   │   ├── index.tsx
│   │   │   │   ├── main.scss
│   │   │   │   └── style.ts
│   │   │   ├── form
│   │   │   │   ├── index.tsx
│   │   │   │   ├── main.scss
│   │   │   │   └── style.ts
│   │   │   ├── form-button-group
│   │   │   │   ├── index.tsx
│   │   │   │   ├── main.scss
│   │   │   │   └── style.ts
│   │   │   ├── form-collapse
│   │   │   │   ├── index.tsx
│   │   │   │   └── style.ts
│   │   │   ├── form-dialog
│   │   │   │   ├── index.tsx
│   │   │   │   └── style.ts
│   │   │   ├── form-drawer
│   │   │   │   ├── index.tsx
│   │   │   │   └── style.ts
│   │   │   ├── form-grid
│   │   │   │   ├── index.tsx
│   │   │   │   ├── main.scss
│   │   │   │   └── style.ts
│   │   │   ├── form-item
│   │   │   │   ├── animation.scss
│   │   │   │   ├── grid.scss
│   │   │   │   ├── index.tsx
│   │   │   │   ├── main.scss
│   │   │   │   ├── scss
│   │   │   │   │   └── variable.scss
│   │   │   │   └── style.ts
│   │   │   ├── form-layout
│   │   │   │   ├── index.tsx
│   │   │   │   ├── main.scss
│   │   │   │   ├── style.ts
│   │   │   │   └── useResponsiveFormLayout.ts
│   │   │   ├── form-step
│   │   │   │   ├── index.tsx
│   │   │   │   └── style.ts
│   │   │   ├── form-tab
│   │   │   │   ├── index.tsx
│   │   │   │   └── style.ts
│   │   │   ├── index.ts
│   │   │   ├── input
│   │   │   │   ├── index.tsx
│   │   │   │   └── style.ts
│   │   │   ├── main.scss
│   │   │   ├── number-picker
│   │   │   │   ├── index.tsx
│   │   │   │   └── style.ts
│   │   │   ├── password
│   │   │   │   ├── index.tsx
│   │   │   │   ├── PasswordStrength.tsx
│   │   │   │   └── style.ts
│   │   │   ├── preview-text
│   │   │   │   ├── index.tsx
│   │   │   │   ├── main.scss
│   │   │   │   └── style.ts
│   │   │   ├── radio
│   │   │   │   ├── index.tsx
│   │   │   │   └── style.ts
│   │   │   ├── reset
│   │   │   │   ├── index.tsx
│   │   │   │   └── style.ts
│   │   │   ├── select
│   │   │   │   ├── index.tsx
│   │   │   │   └── style.ts
│   │   │   ├── select-table
│   │   │   │   ├── index.tsx
│   │   │   │   ├── main.scss
│   │   │   │   ├── style.ts
│   │   │   │   ├── useCheckSlackly.tsx
│   │   │   │   ├── useFilterOptions.tsx
│   │   │   │   ├── useFlatOptions.tsx
│   │   │   │   ├── useSize.tsx
│   │   │   │   ├── useTitleAddon.tsx
│   │   │   │   └── utils.ts
│   │   │   ├── space
│   │   │   │   ├── index.tsx
│   │   │   │   ├── main.scss
│   │   │   │   └── style.ts
│   │   │   ├── style.ts
│   │   │   ├── submit
│   │   │   │   ├── index.tsx
│   │   │   │   └── style.ts
│   │   │   ├── switch
│   │   │   │   ├── index.tsx
│   │   │   │   └── style.ts
│   │   │   ├── time-picker
│   │   │   │   ├── index.tsx
│   │   │   │   └── style.ts
│   │   │   ├── time-picker2
│   │   │   │   ├── index.tsx
│   │   │   │   └── style.ts
│   │   │   ├── transfer
│   │   │   │   ├── index.tsx
│   │   │   │   └── style.ts
│   │   │   ├── tree-select
│   │   │   │   ├── index.tsx
│   │   │   │   └── style.ts
│   │   │   └── upload
│   │   │       ├── index.tsx
│   │   │       ├── main.scss
│   │   │       ├── placeholder.ts
│   │   │       └── style.ts
│   │   ├── tsconfig.build.json
│   │   └── tsconfig.json
│   ├── path
│   │   ├── .npmignore
│   │   ├── benchmark.ts
│   │   ├── LICENSE.md
│   │   ├── package.json
│   │   ├── README.md
│   │   ├── rollup.config.js
│   │   ├── src
│   │   │   ├── __tests__
│   │   │   │   ├── accessor.spec.ts
│   │   │   │   ├── basic.spec.ts
│   │   │   │   ├── match.spec.ts
│   │   │   │   ├── parser.spec.ts
│   │   │   │   └── share.spec.ts
│   │   │   ├── contexts.ts
│   │   │   ├── destructor.ts
│   │   │   ├── index.ts
│   │   │   ├── matcher.ts
│   │   │   ├── parser.ts
│   │   │   ├── shared.ts
│   │   │   ├── tokenizer.ts
│   │   │   ├── tokens.ts
│   │   │   └── types.ts
│   │   ├── tsconfig.build.json
│   │   └── tsconfig.json
│   ├── react
│   │   ├── .npmignore
│   │   ├── .umirc.js
│   │   ├── docs
│   │   │   ├── api
│   │   │   │   ├── components
│   │   │   │   │   ├── ArrayField.md
│   │   │   │   │   ├── ArrayField.zh-CN.md
│   │   │   │   │   ├── ExpressionScope.md
│   │   │   │   │   ├── ExpressionScope.zh-CN.md
│   │   │   │   │   ├── Field.md
│   │   │   │   │   ├── Field.zh-CN.md
│   │   │   │   │   ├── FormConsumer.md
│   │   │   │   │   ├── FormConsumer.zh-CN.md
│   │   │   │   │   ├── FormProvider.md
│   │   │   │   │   ├── FormProvider.zh-CN.md
│   │   │   │   │   ├── ObjectField.md
│   │   │   │   │   ├── ObjectField.zh-CN.md
│   │   │   │   │   ├── RecordScope.md
│   │   │   │   │   ├── RecordScope.zh-CN.md
│   │   │   │   │   ├── RecordsScope.md
│   │   │   │   │   ├── RecordsScope.zh-CN.md
│   │   │   │   │   ├── RecursionField.md
│   │   │   │   │   ├── RecursionField.zh-CN.md
│   │   │   │   │   ├── SchemaField.md
│   │   │   │   │   ├── SchemaField.zh-CN.md
│   │   │   │   │   ├── VoidField.md
│   │   │   │   │   └── VoidField.zh-CN.md
│   │   │   │   ├── hooks
│   │   │   │   │   ├── useExpressionScope.md
│   │   │   │   │   ├── useExpressionScope.zh-CN.md
│   │   │   │   │   ├── useField.md
│   │   │   │   │   ├── useField.zh-CN.md
│   │   │   │   │   ├── useFieldSchema.md
│   │   │   │   │   ├── useFieldSchema.zh-CN.md
│   │   │   │   │   ├── useForm.md
│   │   │   │   │   ├── useForm.zh-CN.md
│   │   │   │   │   ├── useFormEffects.md
│   │   │   │   │   ├── useFormEffects.zh-CN.md
│   │   │   │   │   ├── useParentForm.md
│   │   │   │   │   └── useParentForm.zh-CN.md
│   │   │   │   └── shared
│   │   │   │       ├── connect.md
│   │   │   │       ├── connect.zh-CN.md
│   │   │   │       ├── context.md
│   │   │   │       ├── context.zh-CN.md
│   │   │   │       ├── mapProps.md
│   │   │   │       ├── mapProps.zh-CN.md
│   │   │   │       ├── mapReadPretty.md
│   │   │   │       ├── mapReadPretty.zh-CN.md
│   │   │   │       ├── observer.md
│   │   │   │       ├── observer.zh-CN.md
│   │   │   │       ├── Schema.md
│   │   │   │       └── Schema.zh-CN.md
│   │   │   ├── guide
│   │   │   │   ├── architecture.md
│   │   │   │   ├── architecture.zh-CN.md
│   │   │   │   ├── concept.md
│   │   │   │   ├── concept.zh-CN.md
│   │   │   │   ├── index.md
│   │   │   │   └── index.zh-CN.md
│   │   │   ├── index.md
│   │   │   └── index.zh-CN.md
│   │   ├── LICENSE.md
│   │   ├── package.json
│   │   ├── README.md
│   │   ├── rollup.config.js
│   │   ├── src
│   │   │   ├── __tests__
│   │   │   │   ├── expression.spec.tsx
│   │   │   │   ├── field.spec.tsx
│   │   │   │   ├── form.spec.tsx
│   │   │   │   ├── schema.json.spec.tsx
│   │   │   │   ├── schema.markup.spec.tsx
│   │   │   │   └── shared.tsx
│   │   │   ├── components
│   │   │   │   ├── ArrayField.tsx
│   │   │   │   ├── ExpressionScope.tsx
│   │   │   │   ├── Field.tsx
│   │   │   │   ├── FormConsumer.tsx
│   │   │   │   ├── FormProvider.tsx
│   │   │   │   ├── index.ts
│   │   │   │   ├── ObjectField.tsx
│   │   │   │   ├── ReactiveField.tsx
│   │   │   │   ├── RecordScope.tsx
│   │   │   │   ├── RecordsScope.tsx
│   │   │   │   ├── RecursionField.tsx
│   │   │   │   ├── SchemaField.tsx
│   │   │   │   └── VoidField.tsx
│   │   │   ├── global.d.ts
│   │   │   ├── hooks
│   │   │   │   ├── index.ts
│   │   │   │   ├── useAttach.ts
│   │   │   │   ├── useExpressionScope.ts
│   │   │   │   ├── useField.ts
│   │   │   │   ├── useFieldSchema.ts
│   │   │   │   ├── useForm.ts
│   │   │   │   ├── useFormEffects.ts
│   │   │   │   └── useParentForm.ts
│   │   │   ├── index.ts
│   │   │   ├── shared
│   │   │   │   ├── connect.ts
│   │   │   │   ├── context.ts
│   │   │   │   ├── index.ts
│   │   │   │   └── render.ts
│   │   │   └── types.ts
│   │   ├── tsconfig.build.json
│   │   └── tsconfig.json
│   ├── reactive
│   │   ├── .npmignore
│   │   ├── .umirc.js
│   │   ├── benchmark.ts
│   │   ├── docs
│   │   │   ├── api
│   │   │   │   ├── action.md
│   │   │   │   ├── action.zh-CN.md
│   │   │   │   ├── autorun.md
│   │   │   │   ├── autorun.zh-CN.md
│   │   │   │   ├── batch.md
│   │   │   │   ├── batch.zh-CN.md
│   │   │   │   ├── define.md
│   │   │   │   ├── define.zh-CN.md
│   │   │   │   ├── hasCollected.md
│   │   │   │   ├── hasCollected.zh-CN.md
│   │   │   │   ├── markObservable.md
│   │   │   │   ├── markObservable.zh-CN.md
│   │   │   │   ├── markRaw.md
│   │   │   │   ├── markRaw.zh-CN.md
│   │   │   │   ├── model.md
│   │   │   │   ├── model.zh-CN.md
│   │   │   │   ├── observable.md
│   │   │   │   ├── observable.zh-CN.md
│   │   │   │   ├── observe.md
│   │   │   │   ├── observe.zh-CN.md
│   │   │   │   ├── raw.md
│   │   │   │   ├── raw.zh-CN.md
│   │   │   │   ├── react
│   │   │   │   │   ├── observer.md
│   │   │   │   │   └── observer.zh-CN.md
│   │   │   │   ├── reaction.md
│   │   │   │   ├── reaction.zh-CN.md
│   │   │   │   ├── toJS.md
│   │   │   │   ├── toJS.zh-CN.md
│   │   │   │   ├── tracker.md
│   │   │   │   ├── tracker.zh-CN.md
│   │   │   │   ├── typeChecker.md
│   │   │   │   ├── typeChecker.zh-CN.md
│   │   │   │   ├── untracked.md
│   │   │   │   ├── untracked.zh-CN.md
│   │   │   │   └── vue
│   │   │   │       ├── observer.md
│   │   │   │       └── observer.zh-CN.md
│   │   │   ├── guide
│   │   │   │   ├── best-practice.md
│   │   │   │   ├── best-practice.zh-CN.md
│   │   │   │   ├── concept.md
│   │   │   │   ├── concept.zh-CN.md
│   │   │   │   ├── index.md
│   │   │   │   └── index.zh-CN.md
│   │   │   ├── index.md
│   │   │   └── index.zh-CN.md
│   │   ├── LICENSE.md
│   │   ├── package.json
│   │   ├── README.md
│   │   ├── rollup.config.js
│   │   ├── src
│   │   │   ├── __tests__
│   │   │   │   ├── action.spec.ts
│   │   │   │   ├── annotations.spec.ts
│   │   │   │   ├── array.spec.ts
│   │   │   │   ├── autorun.spec.ts
│   │   │   │   ├── batch.spec.ts
│   │   │   │   ├── collections-map.spec.ts
│   │   │   │   ├── collections-set.spec.ts
│   │   │   │   ├── collections-weakmap.spec.ts
│   │   │   │   ├── collections-weakset.spec.ts
│   │   │   │   ├── define.spec.ts
│   │   │   │   ├── externals.spec.ts
│   │   │   │   ├── hasCollected.spec.ts
│   │   │   │   ├── observable.spec.ts
│   │   │   │   ├── observe.spec.ts
│   │   │   │   ├── tracker.spec.ts
│   │   │   │   └── untracked.spec.ts
│   │   │   ├── action.ts
│   │   │   ├── annotations
│   │   │   │   ├── box.ts
│   │   │   │   ├── computed.ts
│   │   │   │   ├── index.ts
│   │   │   │   ├── observable.ts
│   │   │   │   ├── ref.ts
│   │   │   │   └── shallow.ts
│   │   │   ├── array.ts
│   │   │   ├── autorun.ts
│   │   │   ├── batch.ts
│   │   │   ├── checkers.ts
│   │   │   ├── environment.ts
│   │   │   ├── externals.ts
│   │   │   ├── global.d.ts
│   │   │   ├── handlers.ts
│   │   │   ├── index.ts
│   │   │   ├── internals.ts
│   │   │   ├── model.ts
│   │   │   ├── observable.ts
│   │   │   ├── observe.ts
│   │   │   ├── reaction.ts
│   │   │   ├── tracker.ts
│   │   │   ├── tree.ts
│   │   │   ├── types.ts
│   │   │   └── untracked.ts
│   │   ├── tsconfig.build.json
│   │   └── tsconfig.json
│   ├── reactive-react
│   │   ├── .npmignore
│   │   ├── .umirc.js
│   │   ├── LICENSE.md
│   │   ├── package.json
│   │   ├── README.md
│   │   ├── rollup.config.js
│   │   ├── src
│   │   │   ├── hooks
│   │   │   │   ├── index.ts
│   │   │   │   ├── useCompatEffect.ts
│   │   │   │   ├── useCompatFactory.ts
│   │   │   │   ├── useDidUpdate.ts
│   │   │   │   ├── useForceUpdate.ts
│   │   │   │   ├── useLayoutEffect.ts
│   │   │   │   └── useObserver.ts
│   │   │   ├── index.ts
│   │   │   ├── observer.ts
│   │   │   ├── shared
│   │   │   │   ├── gc.ts
│   │   │   │   ├── global.ts
│   │   │   │   ├── immediate.ts
│   │   │   │   └── index.ts
│   │   │   └── types.ts
│   │   ├── tsconfig.build.json
│   │   └── tsconfig.json
│   ├── reactive-test-cases-for-react18
│   │   ├── .npmignore
│   │   ├── .umirc.js
│   │   ├── LICENSE.md
│   │   ├── package.json
│   │   ├── README.md
│   │   ├── src
│   │   │   ├── index.js
│   │   │   └── MySlowList.js
│   │   ├── template.ejs
│   │   ├── tsconfig.build.json
│   │   ├── tsconfig.json
│   │   ├── webpack.base.ts
│   │   ├── webpack.dev.ts
│   │   └── webpack.prod.ts
│   ├── reactive-vue
│   │   ├── .npmignore
│   │   ├── LICENSE.md
│   │   ├── package.json
│   │   ├── README.md
│   │   ├── rollup.config.js
│   │   ├── src
│   │   │   ├── __tests__
│   │   │   │   └── observer.spec.ts
│   │   │   ├── hooks
│   │   │   │   ├── index.ts
│   │   │   │   └── useObserver.ts
│   │   │   ├── index.ts
│   │   │   ├── observer
│   │   │   │   ├── collectData.ts
│   │   │   │   ├── index.ts
│   │   │   │   ├── observerInVue2.ts
│   │   │   │   └── observerInVue3.ts
│   │   │   └── types.ts
│   │   ├── tsconfig.build.json
│   │   └── tsconfig.json
│   ├── shared
│   │   ├── .npmignore
│   │   ├── LICENSE.md
│   │   ├── package.json
│   │   ├── README.md
│   │   ├── rollup.config.js
│   │   ├── src
│   │   │   ├── __tests__
│   │   │   │   └── index.spec.ts
│   │   │   ├── array.ts
│   │   │   ├── case.ts
│   │   │   ├── checkers.ts
│   │   │   ├── clone.ts
│   │   │   ├── compare.ts
│   │   │   ├── defaults.ts
│   │   │   ├── deprecate.ts
│   │   │   ├── global.ts
│   │   │   ├── index.ts
│   │   │   ├── instanceof.ts
│   │   │   ├── isEmpty.ts
│   │   │   ├── merge.ts
│   │   │   ├── middleware.ts
│   │   │   ├── path.ts
│   │   │   ├── string.ts
│   │   │   ├── subscribable.ts
│   │   │   └── uid.ts
│   │   ├── tsconfig.build.json
│   │   └── tsconfig.json
│   ├── validator
│   │   ├── .npmignore
│   │   ├── LICENSE.md
│   │   ├── package.json
│   │   ├── README.md
│   │   ├── rollup.config.js
│   │   ├── src
│   │   │   ├── __tests__
│   │   │   │   ├── parser.spec.ts
│   │   │   │   ├── registry.spec.ts
│   │   │   │   └── validator.spec.ts
│   │   │   ├── formats.ts
│   │   │   ├── index.ts
│   │   │   ├── locale.ts
│   │   │   ├── parser.ts
│   │   │   ├── registry.ts
│   │   │   ├── rules.ts
│   │   │   ├── template.ts
│   │   │   ├── types.ts
│   │   │   └── validator.ts
│   │   ├── tsconfig.build.json
│   │   └── tsconfig.json
│   └── vue
│       ├── .npmignore
│       ├── bin
│       │   ├── formily-vue-fix.js
│       │   └── formily-vue-switch.js
│       ├── docs
│       │   ├── .vuepress
│       │   │   ├── components
│       │   │   │   ├── createCodeSandBox.js
│       │   │   │   ├── dumi-previewer.vue
│       │   │   │   └── highlight.js
│       │   │   ├── config.js
│       │   │   ├── enhanceApp.js
│       │   │   └── styles
│       │   │       └── index.styl
│       │   ├── api
│       │   │   ├── components
│       │   │   │   ├── array-field.md
│       │   │   │   ├── expression-scope.md
│       │   │   │   ├── field.md
│       │   │   │   ├── form-consumer.md
│       │   │   │   ├── form-provider.md
│       │   │   │   ├── object-field.md
│       │   │   │   ├── recursion-field-with-component.md
│       │   │   │   ├── recursion-field.md
│       │   │   │   ├── schema-field-with-schema.md
│       │   │   │   ├── schema-field.md
│       │   │   │   └── void-field.md
│       │   │   ├── hooks
│       │   │   │   ├── use-field-schema.md
│       │   │   │   ├── use-field.md
│       │   │   │   ├── use-form-effects.md
│       │   │   │   ├── use-form.md
│       │   │   │   └── use-parent-form.md
│       │   │   └── shared
│       │   │       ├── connect.md
│       │   │       ├── injections.md
│       │   │       ├── map-props.md
│       │   │       ├── map-read-pretty.md
│       │   │       ├── observer.md
│       │   │       └── schema.md
│       │   ├── demos
│       │   │   ├── api
│       │   │   │   ├── components
│       │   │   │   │   ├── array-field.vue
│       │   │   │   │   ├── expression-scope.vue
│       │   │   │   │   ├── field.vue
│       │   │   │   │   ├── form-consumer.vue
│       │   │   │   │   ├── form-provider.vue
│       │   │   │   │   ├── object-field.vue
│       │   │   │   │   ├── recursion-field-with-component.vue
│       │   │   │   │   ├── recursion-field.vue
│       │   │   │   │   ├── schema-field-with-schema.vue
│       │   │   │   │   ├── schema-field.vue
│       │   │   │   │   └── void-field.vue
│       │   │   │   ├── hooks
│       │   │   │   │   ├── use-field-schema.vue
│       │   │   │   │   ├── use-field.vue
│       │   │   │   │   ├── use-form-effects.vue
│       │   │   │   │   ├── use-form.vue
│       │   │   │   │   └── use-parent-form.vue
│       │   │   │   └── shared
│       │   │   │       ├── connect.vue
│       │   │   │       ├── map-props.vue
│       │   │   │       ├── map-read-pretty.vue
│       │   │   │       └── observer.vue
│       │   │   ├── index.vue
│       │   │   └── questions
│       │   │       ├── default-slot.vue
│       │   │       ├── events.vue
│       │   │       ├── named-slot.vue
│       │   │       └── scoped-slot.vue
│       │   ├── guide
│       │   │   ├── architecture.md
│       │   │   ├── concept.md
│       │   │   └── README.md
│       │   ├── questions
│       │   │   └── README.md
│       │   └── README.md
│       ├── package.json
│       ├── README.md
│       ├── rollup.config.js
│       ├── scripts
│       │   ├── postinstall.js
│       │   ├── switch-cli.js
│       │   └── utils.js
│       ├── src
│       │   ├── __tests__
│       │   │   ├── expression.scope.spec.ts
│       │   │   ├── field.spec.ts
│       │   │   ├── form.spec.ts
│       │   │   ├── schema.json.spec.ts
│       │   │   ├── schema.markup.spec.ts
│       │   │   ├── shared.spec.ts
│       │   │   └── utils.spec.ts
│       │   ├── components
│       │   │   ├── ArrayField.ts
│       │   │   ├── ExpressionScope.ts
│       │   │   ├── Field.ts
│       │   │   ├── FormConsumer.ts
│       │   │   ├── FormProvider.ts
│       │   │   ├── index.ts
│       │   │   ├── ObjectField.ts
│       │   │   ├── ReactiveField.ts
│       │   │   ├── RecursionField.ts
│       │   │   ├── SchemaField.ts
│       │   │   └── VoidField.ts
│       │   ├── global.d.ts
│       │   ├── hooks
│       │   │   ├── index.ts
│       │   │   ├── useAttach.ts
│       │   │   ├── useField.ts
│       │   │   ├── useFieldSchema.ts
│       │   │   ├── useForm.ts
│       │   │   ├── useFormEffects.ts
│       │   │   ├── useInjectionCleaner.ts
│       │   │   └── useParentForm.ts
│       │   ├── index.ts
│       │   ├── shared
│       │   │   ├── connect.ts
│       │   │   ├── context.ts
│       │   │   ├── createForm.ts
│       │   │   ├── fragment.ts
│       │   │   ├── h.ts
│       │   │   └── index.ts
│       │   ├── types
│       │   │   └── index.ts
│       │   ├── utils
│       │   │   ├── formatVNodeData.ts
│       │   │   ├── getFieldProps.ts
│       │   │   ├── getRawComponent.ts
│       │   │   └── resolveSchemaProps.ts
│       │   └── vue2-components.ts
│       ├── tsconfig.build.json
│       ├── tsconfig.json
│       └── tsconfig.types.json
├── README.md
├── README.zh-cn.md
├── scripts
│   ├── build-style
│   │   ├── buildAllStyles.ts
│   │   ├── copy.ts
│   │   ├── helper.ts
│   │   └── index.ts
│   └── rollup.base.js
├── tsconfig.build.json
├── tsconfig.jest.json
├── tsconfig.json
└── yarn.lock
```

# Files

--------------------------------------------------------------------------------
/packages/antd/docs/components/ArrayItems.md:
--------------------------------------------------------------------------------

```markdown
# ArrayItems

> Self-increment list, suitable for simple self-increment editing scenes, or for scenes with high space requirements
>
> Note: This component is only applicable to Schema scenarios

## Markup Schema example

```tsx
import React from 'react'
import {
  FormItem,
  Input,
  Editable,
  Select,
  DatePicker,
  ArrayItems,
  FormButtonGroup,
  Submit,
  Space,
} from '@formily/antd'
import { createForm } from '@formily/core'
import { FormProvider, createSchemaField } from '@formily/react'

const SchemaField = createSchemaField({
  components: {
    FormItem,
    DatePicker,
    Editable,
    Space,
    Input,
    Select,
    ArrayItems,
  },
})

const form = createForm()

export default () => {
  return (
    <FormProvider form={form}>
      <SchemaField>
        <SchemaField.Array
          name="string_array"
          title="string array"
          x-decorator="FormItem"
          x-component="ArrayItems"
        >
          <SchemaField.Void x-component="Space">
            <SchemaField.Void
              x-decorator="FormItem"
              x-component="ArrayItems.SortHandle"
            />
            <SchemaField.String
              x-decorator="FormItem"
              required
              name="input"
              x-component="Input"
            />
            <SchemaField.Void
              x-decorator="FormItem"
              x-component="ArrayItems.Remove"
            />
            <SchemaField.Void
              x-decorator="FormItem"
              x-component="ArrayItems.Copy"
            />
          </SchemaField.Void>
          <SchemaField.Void
            x-component="ArrayItems.Addition"
            title="Add entry"
          />
        </SchemaField.Array>
        <SchemaField.Array
          name="array"
          title="Object array"
          x-decorator="FormItem"
          x-component="ArrayItems"
        >
          <SchemaField.Object>
            <SchemaField.Void x-component="Space">
              <SchemaField.Void
                x-decorator="FormItem"
                x-component="ArrayItems.SortHandle"
              />
              <SchemaField.String
                x-decorator="FormItem"
                required
                title="date"
                name="date"
                x-component="DatePicker.RangePicker"
                x-component-props={{
                  style: {
                    width: 160,
                  },
                }}
              />
              <SchemaField.String
                x-decorator="FormItem"
                required
                title="input box"
                name="input"
                x-component="Input"
              />
              <SchemaField.String
                x-decorator="FormItem"
                required
                title="select box"
                name="select"
                enum={[
                  { label: 'Option 1', value: 1 },
                  { label: 'Option 2', value: 2 },
                ]}
                x-component="Select"
                x-component-props={{
                  style: {
                    width: 160,
                  },
                }}
              />
              <SchemaField.Void
                x-decorator="FormItem"
                x-component="ArrayItems.Remove"
              />
            </SchemaField.Void>
          </SchemaField.Object>
          <SchemaField.Void
            x-component="ArrayItems.Addition"
            title="Add entry"
          />
        </SchemaField.Array>
        <SchemaField.Array
          name="array2"
          title="Object array"
          x-decorator="FormItem"
          x-component="ArrayItems"
          x-component-props={{ style: { width: 300 } }}
        >
          <SchemaField.Object x-decorator="ArrayItems.Item">
            <SchemaField.Void
              x-decorator="FormItem"
              x-component="ArrayItems.SortHandle"
            />
            <SchemaField.String
              x-decorator="Editable"
              title="input box"
              name="input"
              x-component="Input"
              x-component-props={{ bordered: false }}
            />
            <SchemaField.Object
              name="config"
              x-component="Editable.Popover"
              required
              title="Configure complex data"
              x-reactions={(field) => {
                field.title = field.value?.input || field.title
              }}
            >
              <SchemaField.String
                x-decorator="FormItem"
                required
                title="date"
                name="date"
                x-component="DatePicker.RangePicker"
                x-component-props={{ style: { width: '100%' } }}
              />
              <SchemaField.String
                x-decorator="FormItem"
                required
                title="input box"
                name="input"
                x-component="Input"
              />
            </SchemaField.Object>
            <SchemaField.Void
              x-decorator="FormItem"
              x-component="ArrayItems.Remove"
            />
          </SchemaField.Object>
          <SchemaField.Void
            x-component="ArrayItems.Addition"
            title="Add entry"
          />
        </SchemaField.Array>
      </SchemaField>
      <FormButtonGroup>
        <Submit onSubmit={console.log}>Submit</Submit>
      </FormButtonGroup>
    </FormProvider>
  )
}
```

## JSON Schema case

```tsx
import React from 'react'
import {
  FormItem,
  Editable,
  Input,
  Select,
  Radio,
  DatePicker,
  ArrayItems,
  FormButtonGroup,
  Submit,
  Space,
} from '@formily/antd'
import { createForm } from '@formily/core'
import { FormProvider, createSchemaField } from '@formily/react'

const SchemaField = createSchemaField({
  components: {
    FormItem,
    Editable,
    DatePicker,
    Space,
    Radio,
    Input,
    Select,
    ArrayItems,
  },
})

const form = createForm()

const schema = {
  type: 'object',
  properties: {
    string_array: {
      type: 'array',
      'x-component': 'ArrayItems',
      'x-decorator': 'FormItem',
      title: 'String array',
      items: {
        type: 'void',
        'x-component': 'Space',
        properties: {
          sort: {
            type: 'void',
            'x-decorator': 'FormItem',
            'x-component': 'ArrayItems.SortHandle',
          },
          input: {
            type: 'string',
            'x-decorator': 'FormItem',
            'x-component': 'Input',
          },
          remove: {
            type: 'void',
            'x-decorator': 'FormItem',
            'x-component': 'ArrayItems.Remove',
          },
        },
      },
      properties: {
        add: {
          type: 'void',
          title: 'Add entry',
          'x-component': 'ArrayItems.Addition',
        },
      },
    },
    array: {
      type: 'array',
      'x-component': 'ArrayItems',
      'x-decorator': 'FormItem',
      title: 'Object array',
      items: {
        type: 'object',
        properties: {
          space: {
            type: 'void',
            'x-component': 'Space',
            properties: {
              sort: {
                type: 'void',
                'x-decorator': 'FormItem',
                'x-component': 'ArrayItems.SortHandle',
              },
              date: {
                type: 'string',
                title: 'Date',
                'x-decorator': 'FormItem',
                'x-component': 'DatePicker.RangePicker',
                'x-component-props': {
                  style: {
                    width: 160,
                  },
                },
              },
              input: {
                type: 'string',
                title: 'input box',
                'x-decorator': 'FormItem',
                'x-component': 'Input',
              },
              select: {
                type: 'string',
                title: 'drop-down box',
                enum: [
                  { label: 'Option 1', value: 1 },
                  { label: 'Option 2', value: 2 },
                ],
                'x-decorator': 'FormItem',
                'x-component': 'Select',
                'x-component-props': {
                  style: {
                    width: 160,
                  },
                },
              },
              remove: {
                type: 'void',
                'x-decorator': 'FormItem',
                'x-component': 'ArrayItems.Remove',
              },
            },
          },
        },
      },
      properties: {
        add: {
          type: 'void',
          title: 'Add entry',
          'x-component': 'ArrayItems.Addition',
        },
      },
    },
    array2: {
      type: 'array',
      'x-component': 'ArrayItems',
      'x-decorator': 'FormItem',
      'x-component-props': { style: { width: 300 } },
      title: 'Object array',
      items: {
        type: 'object',
        'x-decorator': 'ArrayItems.Item',
        properties: {
          sort: {
            type: 'void',
            'x-decorator': 'FormItem',
            'x-component': 'ArrayItems.SortHandle',
          },

          input: {
            type: 'string',
            title: 'input box',
            'x-decorator': 'Editable',
            'x-component': 'Input',
            'x-component-props': {
              bordered: false,
            },
          },
          config: {
            type: 'object',
            title: 'Configure complex data',
            'x-component': 'Editable.Popover',
            'x-reactions':
              '{{(field)=>field.title = field.value && field.value.input || field.title}}',
            properties: {
              date: {
                type: 'string',
                title: 'Date',
                'x-decorator': 'FormItem',
                'x-component': 'DatePicker.RangePicker',
                'x-component-props': {
                  style: {
                    width: 160,
                  },
                },
              },
              input: {
                type: 'string',
                title: 'input box',
                'x-decorator': 'FormItem',
                'x-component': 'Input',
              },
              select: {
                type: 'string',
                title: 'drop-down box',
                enum: [
                  { label: 'Option 1', value: 1 },
                  { label: 'Option 2', value: 2 },
                ],
                'x-decorator': 'FormItem',
                'x-component': 'Select',
                'x-component-props': {
                  style: {
                    width: 160,
                  },
                },
              },
            },
          },
          remove: {
            type: 'void',
            'x-decorator': 'FormItem',
            'x-component': 'ArrayItems.Remove',
          },
        },
      },
      properties: {
        add: {
          type: 'void',
          title: 'Add entry',
          'x-component': 'ArrayItems.Addition',
        },
      },
    },
  },
}

export default () => {
  return (
    <FormProvider form={form}>
      <SchemaField schema={schema} />
      <FormButtonGroup>
        <Submit onSubmit={console.log}>Submit</Submit>
      </FormButtonGroup>
    </FormProvider>
  )
}
```

## Effects linkage case

```tsx
import React from 'react'
import {
  FormItem,
  Input,
  ArrayItems,
  Editable,
  FormButtonGroup,
  Submit,
  Space,
} from '@formily/antd'
import { createForm, onFieldChange, onFieldReact } from '@formily/core'
import { FormProvider, createSchemaField } from '@formily/react'

const SchemaField = createSchemaField({
  components: {
    Space,
    Editable,
    FormItem,
    Input,
    ArrayItems,
  },
})

const form = createForm({
  effects: () => {
    //Active linkage mode
    onFieldChange('array.*.aa', ['value'], (field, form) => {
      form.setFieldState(field.query('.bb'), (state) => {
        state.visible = field.value != '123'
      })
    })
    //Passive linkage mode
    onFieldReact('array.*.dd', (field) => {
      field.visible = field.query('.cc').get('value') != '123'
    })
  },
})

export default () => {
  return (
    <FormProvider form={form}>
      <SchemaField>
        <SchemaField.Array
          name="array"
          title="Object array"
          maxItems={3}
          x-decorator="FormItem"
          x-component="ArrayItems"
          x-component-props={{
            style: {
              width: 300,
            },
          }}
        >
          <SchemaField.Object x-decorator="ArrayItems.Item">
            <SchemaField.Void x-component="Space">
              <SchemaField.Void
                x-decorator="FormItem"
                x-component="ArrayItems.SortHandle"
              />
              <SchemaField.Void
                x-decorator="FormItem"
                x-component="ArrayItems.Index"
              />
            </SchemaField.Void>
            <SchemaField.Void
              x-component="Editable.Popover"
              title="Configuration data"
            >
              <SchemaField.String
                name="aa"
                x-decorator="FormItem"
                title="AA"
                required
                description="AA hide BB when entering 123"
                x-component="Input"
              />
              <SchemaField.String
                name="bb"
                x-decorator="FormItem"
                title="BB"
                required
                x-component="Input"
              />
              <SchemaField.String
                name="cc"
                x-decorator="FormItem"
                title="CC"
                required
                description="Hide DD when CC enters 123"
                x-component="Input"
              />
              <SchemaField.String
                name="dd"
                x-decorator="FormItem"
                title="DD"
                required
                x-component="Input"
              />
            </SchemaField.Void>
            <SchemaField.Void x-component="Space">
              <SchemaField.Void
                x-decorator="FormItem"
                x-component="ArrayItems.Remove"
              />
              <SchemaField.Void
                x-decorator="FormItem"
                x-component="ArrayItems.MoveUp"
              />
              <SchemaField.Void
                x-decorator="FormItem"
                x-component="ArrayItems.MoveDown"
              />
            </SchemaField.Void>
          </SchemaField.Object>
          <SchemaField.Void
            x-component="ArrayItems.Addition"
            title="Add entry"
          />
        </SchemaField.Array>
      </SchemaField>
      <FormButtonGroup>
        <Submit onSubmit={console.log}>Submit</Submit>
      </FormButtonGroup>
    </FormProvider>
  )
}
```

## JSON Schema linkage case

```tsx
import React from 'react'
import {
  FormItem,
  Input,
  ArrayItems,
  Editable,
  FormButtonGroup,
  Submit,
  Space,
} from '@formily/antd'
import { createForm } from '@formily/core'
import { FormProvider, createSchemaField } from '@formily/react'

const SchemaField = createSchemaField({
  components: {
    Space,
    Editable,
    FormItem,
    Input,
    ArrayItems,
  },
})

const form = createForm()

const schema = {
  type: 'object',
  properties: {
    array: {
      type: 'array',
      'x-component': 'ArrayItems',
      'x-decorator': 'FormItem',
      maxItems: 3,
      title: 'Object array',
      'x-component-props': { style: { width: 300 } },
      items: {
        type: 'object',
        'x-decorator': 'ArrayItems.Item',
        properties: {
          left: {
            type: 'void',
            'x-component': 'Space',
            properties: {
              sort: {
                type: 'void',
                'x-decorator': 'FormItem',
                'x-component': 'ArrayItems.SortHandle',
              },
              index: {
                type: 'void',
                'x-decorator': 'FormItem',
                'x-component': 'ArrayItems.Index',
              },
            },
          },
          edit: {
            type: 'void',
            'x-component': 'Editable.Popover',
            title: 'Configuration data',
            properties: {
              aa: {
                type: 'string',
                'x-decorator': 'FormItem',
                title: 'AA',
                required: true,
                'x-component': 'Input',
                description: 'Enter 123',
              },
              bb: {
                type: 'string',
                title: 'BB',
                required: true,
                'x-decorator': 'FormItem',
                'x-component': 'Input',
                'x-reactions': [
                  {
                    dependencies: ['.aa'],
                    when: "{{$deps[0] != '123'}}",
                    fulfill: {
                      schema: {
                        title: 'BB',
                        'x-disabled': true,
                      },
                    },
                    otherwise: {
                      schema: {
                        title: 'Changed',
                        'x-disabled': false,
                      },
                    },
                  },
                ],
              },
            },
          },
          right: {
            type: 'void',
            'x-component': 'Space',
            properties: {
              remove: {
                type: 'void',
                'x-component': 'ArrayItems.Remove',
              },
              moveUp: {
                type: 'void',
                'x-component': 'ArrayItems.MoveUp',
              },
              moveDown: {
                type: 'void',
                'x-component': 'ArrayItems.MoveDown',
              },
            },
          },
        },
      },
      properties: {
        addition: {
          type: 'void',
          title: 'Add entry',
          'x-component': 'ArrayItems.Addition',
        },
      },
    },
  },
}

export default () => {
  return (
    <FormProvider form={form}>
      <SchemaField schema={schema} />
      <FormButtonGroup>
        <Submit onSubmit={console.log}>Submit</Submit>
      </FormButtonGroup>
    </FormProvider>
  )
}
```

## API

### ArrayItems

Extended attributes

| Property name | Type                      | Description     | Default value |
| ------------- | ------------------------- | --------------- | ------------- |
| onAdd         | `(index: number) => void` | add method      |               |
| onRemove      | `(index: number) => void` | remove method   |               |
| onCopy        | `(index: number) => void` | copy method     |               |
| onMoveUp      | `(index: number) => void` | moveUp method   |               |
| onMoveDown    | `(index: number) => void` | moveDown method |               |

Other Inherit HTMLDivElement Props

### ArrayItems.Item

> List block

Inherit HTMLDivElement Props

Extended attributes

| Property name | Type                | Description           | Default value |
| ------------- | ------------------- | --------------------- | ------------- |
| type          | `'card' \|'divide'` | card or dividing line |               |

### ArrayItems.SortHandle

> Drag handle

Reference https://ant.design/components/icon-cn/

### ArrayItems.Addition

> Add button

Extended attributes

| Property name | Type                 | Description   | Default value |
| ------------- | -------------------- | ------------- | ------------- |
| title         | ReactText            | Copywriting   |               |
| method        | `'push' \|'unshift'` | add method    | `'push'`      |
| defaultValue  | `any`                | Default value |               |

Other references https://ant.design/components/button-cn/

Note: The title attribute can receive the title mapping in the Field model, that is, uploading the title in the Field is also effective

Note: You can disable default behavior with `onClick={e => e.preventDefault()}` in props.

### ArrayItems.Copy

> Copy button

Extended attributes

| Property name | Type                 | Description | Default value |
| ------------- | -------------------- | ----------- | ------------- |
| title         | ReactText            | Copywriting |               |
| method        | `'push' \|'unshift'` | Copy method | `'push'`      |

Other references https://ant.design/components/button-cn/

Note: The title attribute can receive the title mapping in the Field model, that is, uploading the title in the Field is also effective

Note: You can disable default behavior with `onClick={e => e.preventDefault()}` in props.

### ArrayItems.Remove

> Delete button

| Property name | Type      | Description | Default value |
| ------------- | --------- | ----------- | ------------- |
| title         | ReactText | Copywriting |               |

Other references https://ant.design/components/icon-cn/

Note: The title attribute can receive the title mapping in the Field model, that is, uploading the title in the Field is also effective

Note: You can disable default behavior with `onClick={e => e.preventDefault()}` in props.

### ArrayItems.MoveDown

> Move down button

| Property name | Type      | Description | Default value |
| ------------- | --------- | ----------- | ------------- |
| title         | ReactText | Copywriting |               |

Other references https://ant.design/components/icon-cn/

Note: The title attribute can receive the title mapping in the Field model, that is, uploading the title in the Field is also effective

Note: You can disable default behavior with `onClick={e => e.preventDefault()}` in props.

### ArrayItems.MoveUp

> Move up button

| Property name | Type      | Description | Default value |
| ------------- | --------- | ----------- | ------------- |
| title         | ReactText | Copywriting |               |

Other references https://ant.design/components/icon-cn/

Note: The title attribute can receive the title mapping in the Field model, that is, uploading the title in the Field is also effective

Note: You can disable default behavior with `onClick={e => e.preventDefault()}` in props.

### ArrayItems.Index

> Index Renderer

No attributes

### ArrayItems.useIndex

> Read the React Hook of the current rendering row index

### ArrayItems.useRecord

> Read the React Hook of the current rendering row

```

--------------------------------------------------------------------------------
/packages/core/src/__tests__/array.spec.ts:
--------------------------------------------------------------------------------

```typescript
import { createForm } from '../'
import {
  onFieldValueChange,
  onFormInitialValuesChange,
  onFormValuesChange,
} from '../effects'
import { DataField } from '../types'
import { attach } from './shared'

test('create array field', () => {
  const form = attach(createForm())
  const array = attach(
    form.createArrayField({
      name: 'array',
    })
  )
  expect(array.value).toEqual([])
  expect(array.push).toBeDefined()
  expect(array.pop).toBeDefined()
  expect(array.shift).toBeDefined()
  expect(array.unshift).toBeDefined()
  expect(array.move).toBeDefined()
  expect(array.moveDown).toBeDefined()
  expect(array.moveUp).toBeDefined()
  expect(array.insert).toBeDefined()
  expect(array.remove).toBeDefined()
})

test('array field methods', () => {
  const form = attach(createForm())
  const array = attach(
    form.createArrayField({
      name: 'array',
      value: [],
    })
  )
  array.push({ aa: 11 }, { bb: 22 })
  expect(array.value).toEqual([{ aa: 11 }, { bb: 22 }])
  array.pop()
  expect(array.value).toEqual([{ aa: 11 }])
  array.unshift({ cc: 33 })
  expect(array.value).toEqual([{ cc: 33 }, { aa: 11 }])
  array.remove(1)
  expect(array.value).toEqual([{ cc: 33 }])
  array.insert(1, { dd: 44 }, { ee: 55 })
  expect(array.value).toEqual([{ cc: 33 }, { dd: 44 }, { ee: 55 }])
  array.move(0, 2)
  expect(array.value).toEqual([{ dd: 44 }, { ee: 55 }, { cc: 33 }])
  array.shift()
  expect(array.value).toEqual([{ ee: 55 }, { cc: 33 }])
  array.moveDown(0)
  expect(array.value).toEqual([{ cc: 33 }, { ee: 55 }])
  array.moveUp(1)
  expect(array.value).toEqual([{ ee: 55 }, { cc: 33 }])
  array.move(1, 0)
  expect(array.value).toEqual([{ cc: 33 }, { ee: 55 }])
})

test('array field children state exchanges', () => {
  //注意：插入新节点，如果指定位置有节点，会丢弃，需要重新插入节点，主要是为了防止上一个节点状态对新节点状态产生污染
  const form = attach(createForm())
  const array = attach(
    form.createArrayField({
      name: 'array',
    })
  )
  attach(
    form.createField({
      name: 'other',
      basePath: 'array',
    })
  )
  array.push({ value: 11 }, { value: 22 })
  attach(
    form.createField({
      name: 'value',
      basePath: 'array.0',
    })
  )
  attach(
    form.createField({
      name: 'value',
      basePath: 'array.1',
    })
  )
  expect(array.value).toEqual([{ value: 11 }, { value: 22 }])
  expect(form.query('array.0.value').get('value')).toEqual(11)
  expect(form.query('array.1.value').get('value')).toEqual(22)
  expect(Object.keys(form.fields).sort()).toEqual([
    'array',
    'array.0.value',
    'array.1.value',
    'array.other',
  ])
  array.pop()
  expect(array.value).toEqual([{ value: 11 }])
  expect(form.query('array.0.value').get('value')).toEqual(11)
  expect(form.query('array.1.value').get('value')).toBeUndefined()
  array.unshift({ value: 33 })
  attach(
    form.createField({
      name: 'value',
      basePath: 'array.0',
    })
  )
  attach(
    form.createField({
      name: 'value',
      basePath: 'array.1',
    })
  )
  expect(array.value).toEqual([{ value: 33 }, { value: 11 }])
  expect(form.query('array.0.value').get('value')).toEqual(33)
  expect(form.query('array.1.value').get('value')).toEqual(11)
  array.remove(1)
  expect(array.value).toEqual([{ value: 33 }])
  expect(form.query('array.0.value').get('value')).toEqual(33)
  expect(form.query('array.1.value').get('value')).toBeUndefined()
  array.insert(1, { value: 44 }, { value: 55 })
  attach(
    form.createField({
      name: 'value',
      basePath: 'array.1',
    })
  )
  attach(
    form.createField({
      name: 'value',
      basePath: 'array.2',
    })
  )
  expect(array.value).toEqual([{ value: 33 }, { value: 44 }, { value: 55 }])
  expect(form.query('array.0.value').get('value')).toEqual(33)
  expect(form.query('array.1.value').get('value')).toEqual(44)
  expect(form.query('array.2.value').get('value')).toEqual(55)
  array.move(0, 2)
  expect(array.value).toEqual([{ value: 44 }, { value: 55 }, { value: 33 }])
  expect(form.query('array.0.value').get('value')).toEqual(44)
  expect(form.query('array.1.value').get('value')).toEqual(55)
  expect(form.query('array.2.value').get('value')).toEqual(33)
  array.move(2, 0)
  expect(array.value).toEqual([{ value: 33 }, { value: 44 }, { value: 55 }])
  expect(form.query('array.0.value').get('value')).toEqual(33)
  expect(form.query('array.1.value').get('value')).toEqual(44)
  expect(form.query('array.2.value').get('value')).toEqual(55)
})

test('array field move up/down then fields move', () => {
  const form = attach(createForm())
  const array = attach(
    form.createArrayField({
      name: 'array',
    })
  )
  attach(
    form.createField({
      name: 'value',
      basePath: 'array.0',
    })
  )
  attach(
    form.createField({
      name: 'value',
      basePath: 'array.1',
    })
  )
  attach(
    form.createField({
      name: 'value',
      basePath: 'array.2',
    })
  )
  attach(
    form.createField({
      name: 'value',
      basePath: 'array.3',
    })
  )
  const line0 = form.fields['array.0.value']
  const line1 = form.fields['array.1.value']
  const line2 = form.fields['array.2.value']
  const line3 = form.fields['array.3.value']

  array.push({ value: '0' }, { value: '1' }, { value: '2' }, { value: '3' })

  array.move(0, 3)

  // 1,2,3,0
  expect(form.fields['array.0.value']).toBe(line1)
  expect(form.fields['array.1.value']).toBe(line2)
  expect(form.fields['array.2.value']).toBe(line3)
  expect(form.fields['array.3.value']).toBe(line0)

  array.move(3, 1)

  // 1,0,2,3
  expect(form.fields['array.0.value']).toBe(line1)
  expect(form.fields['array.1.value']).toBe(line0)
  expect(form.fields['array.2.value']).toBe(line2)
  expect(form.fields['array.3.value']).toBe(line3)
})

// 重现 issues #3932 , 补全 PR #3992 测试用例
test('lazy array field query each', () => {
  const form = attach(createForm())
  const array = attach(
    form.createArrayField({
      name: 'array',
    })
  )

  const init = Array.from({ length: 6 }).map((_, i) => ({ value: i }))
  array.setValue(init)

  // page1: 0, 1
  // page2: 2, 3 untouch
  // page3: 4, 5
  init.forEach((item) => {
    const len = item.value
    //2, 3
    if (len >= 2 && len <= 3) {
    } else {
      // 0, 1, 4, 5
      attach(
        form.createField({
          name: 'value',
          basePath: 'array.' + len,
        })
      )
    }
  })

  array.insert(1, { value: '11' })
  expect(() => form.query('*').take()).not.toThrowError()
  expect(Object.keys(form.fields)).toEqual([
    'array',
    'array.0.value',
    'array.5.value',
    'array.2.value',
    'array.6.value',
  ])
})

test('void children', () => {
  const form = attach(createForm())
  const array = attach(
    form.createArrayField({
      name: 'array',
    })
  )
  attach(
    form.createField({
      name: 'other',
      basePath: 'array',
    })
  )
  attach(
    form.createVoidField({
      name: 0,
      basePath: 'array',
    })
  )
  const aaa = attach(
    form.createField({
      name: 'aaa',
      basePath: 'array.0',
      value: 123,
    })
  )
  expect(aaa.value).toEqual(123)
  expect(array.value).toEqual([123])
})

test('exchange children', () => {
  const form = attach(createForm())
  const array = attach(
    form.createArrayField({
      name: 'array',
    })
  )
  attach(
    form.createField({
      name: 'other',
      basePath: 'array',
    })
  )
  attach(
    form.createField({
      name: '0.aaa',
      basePath: 'array',
      value: '123',
    })
  )
  attach(
    form.createField({
      name: '0.bbb',
      basePath: 'array',
      value: '321',
    })
  )
  attach(
    form.createField({
      name: '1.bbb',
      basePath: 'array',
      value: 'kkk',
    })
  )
  expect(array.value).toEqual([{ aaa: '123', bbb: '321' }, { bbb: 'kkk' }])
  array.move(0, 1)
  expect(array.value).toEqual([{ bbb: 'kkk' }, { aaa: '123', bbb: '321' }])
  expect(form.query('array.0.aaa').take()).toBeUndefined()
})

test('fault tolerance', () => {
  const form = attach(createForm())
  const array = attach(
    form.createArrayField({
      name: 'array',
    })
  )
  const array2 = attach(
    form.createArrayField({
      name: 'array2',
      value: [1, 2],
    })
  )
  array.setValue({} as any)
  array.push(11)
  expect(array.value).toEqual([11])
  array.pop()
  expect(array.value).toEqual([])
  array.remove(1)
  expect(array.value).toEqual([])
  array.shift()
  expect(array.value).toEqual([])
  array.unshift(1)
  expect(array.value).toEqual([1])
  array.move(0, 1)
  expect(array.value).toEqual([1])
  array.moveUp(1)
  expect(array.value).toEqual([1])
  array.moveDown(1)
  expect(array.value).toEqual([1])
  array.insert(1)
  expect(array.value).toEqual([1])
  array2.move(1, 1)
  expect(array2.value).toEqual([1, 2])
  array2.push(3)
  array2.moveUp(2)
  expect(array2.value).toEqual([1, 3, 2])
  array2.moveUp(0)
  expect(array2.value).toEqual([3, 2, 1])
  array2.moveDown(0)
  expect(array2.value).toEqual([2, 3, 1])
  array2.moveDown(1)
  expect(array2.value).toEqual([2, 1, 3])
  array2.moveDown(2)
  expect(array2.value).toEqual([3, 2, 1])
})

test('mutation fault tolerance', () => {
  const form = attach(createForm())
  const pushArray = attach(
    form.createArrayField({
      name: 'array1',
    })
  )
  const popArray = attach(
    form.createArrayField({
      name: 'array2',
    })
  )
  const insertArray = attach(
    form.createArrayField({
      name: 'array3',
    })
  )
  const removeArray = attach(
    form.createArrayField({
      name: 'array4',
    })
  )
  const shiftArray = attach(
    form.createArrayField({
      name: 'array5',
    })
  )
  const unshiftArray = attach(
    form.createArrayField({
      name: 'array6',
    })
  )
  const moveArray = attach(
    form.createArrayField({
      name: 'array7',
    })
  )
  const moveUpArray = attach(
    form.createArrayField({
      name: 'array8',
    })
  )
  const moveDownArray = attach(
    form.createArrayField({
      name: 'array9',
    })
  )
  pushArray.setValue({} as any)
  pushArray.push(123)
  expect(pushArray.value).toEqual([123])
  popArray.setValue({} as any)
  popArray.pop()
  expect(popArray.value).toEqual({})
  insertArray.setValue({} as any)
  insertArray.insert(0, 123)
  expect(insertArray.value).toEqual([123])
  removeArray.setValue({} as any)
  removeArray.remove(0)
  expect(removeArray.value).toEqual({})
  shiftArray.setValue({} as any)
  shiftArray.shift()
  expect(shiftArray.value).toEqual({})
  unshiftArray.setValue({} as any)
  unshiftArray.unshift(123)
  expect(unshiftArray.value).toEqual([123])
  moveArray.setValue({} as any)
  moveArray.move(0, 1)
  expect(moveArray.value).toEqual({})
  moveUpArray.setValue({} as any)
  moveUpArray.moveUp(0)
  expect(moveUpArray.value).toEqual({})
  moveDownArray.setValue({} as any)
  moveDownArray.moveDown(1)
  expect(moveDownArray.value).toEqual({})
})

test('array field move api with children', async () => {
  const form = attach(createForm())
  attach(
    form.createField({
      name: 'other',
    })
  )
  const array = attach(
    form.createArrayField({
      name: 'array',
    })
  )
  attach(
    form.createArrayField({
      name: '0',
      basePath: 'array',
    })
  )
  attach(
    form.createArrayField({
      name: '1',
      basePath: 'array',
    })
  )
  attach(
    form.createArrayField({
      name: '2',
      basePath: 'array',
    })
  )
  attach(
    form.createArrayField({
      name: 'name',
      basePath: 'array.2',
    })
  )
  await array.move(0, 2)
  expect(form.fields['array.0.name']).toBeUndefined()
  expect(form.fields['array.2.name']).toBeUndefined()
  expect(form.fields['array.1.name']).not.toBeUndefined()
})

test('array field remove memo leak', async () => {
  const handler = jest.fn()
  const valuesChange = jest.fn()
  const initialValuesChange = jest.fn()
  const form = attach(
    createForm({
      effects() {
        onFormValuesChange(valuesChange)
        onFormInitialValuesChange(initialValuesChange)
        onFieldValueChange('*', handler)
      },
    })
  )
  const array = attach(
    form.createArrayField({
      name: 'array',
    })
  )
  await array.push('')
  attach(
    form.createField({
      name: '0',
      basePath: 'array',
    })
  )
  await array.remove(0)
  await array.push('')
  attach(
    form.createField({
      name: '0',
      basePath: 'array',
    })
  )
  expect(handler).toBeCalledTimes(0)
  expect(valuesChange).toBeCalledTimes(4)
  expect(initialValuesChange).toBeCalledTimes(0)
})

test('nest array remove', async () => {
  const form = attach(createForm())

  const metrics = attach(
    form.createArrayField({
      name: 'metrics',
    })
  )

  attach(
    form.createObjectField({
      name: '0',
      basePath: 'metrics',
    })
  )

  attach(
    form.createObjectField({
      name: '1',
      basePath: 'metrics',
    })
  )

  attach(
    form.createArrayField({
      name: 'content',
      basePath: 'metrics.0',
    })
  )

  attach(
    form.createArrayField({
      name: 'content',
      basePath: 'metrics.1',
    })
  )

  const obj00 = attach(
    form.createObjectField({
      name: '0',
      basePath: 'metrics.0.content',
    })
  )

  const obj10 = attach(
    form.createObjectField({
      name: '0',
      basePath: 'metrics.1.content',
    })
  )

  attach(
    form.createField({
      name: 'attr',
      basePath: 'metrics.0.content.0',
      initialValue: '123',
    })
  )

  attach(
    form.createField({
      name: 'attr',
      basePath: 'metrics.1.content.0',
      initialValue: '123',
    })
  )
  expect(obj00.indexes[0]).toBe(0)
  expect(obj00.index).toBe(0)
  expect(obj10.index).toBe(0)
  expect(obj10.indexes[0]).toBe(1)
  await (form.query('metrics.1.content').take() as any).remove(0)
  expect(form.fields['metrics.0.content.0.attr']).not.toBeUndefined()
  await metrics.remove(1)
  expect(form.fields['metrics.0.content.0.attr']).not.toBeUndefined()
  expect(
    form.initialValues.metrics?.[1]?.content?.[0]?.attr
  ).not.toBeUndefined()
})

test('indexes: nest path need exclude incomplete number', () => {
  const form = attach(createForm())

  const objPathIncludeNum = attach(
    form.createField({
      name: 'attr',
      basePath: 'metrics.0.a.10.iconWidth50',
    })
  )

  expect(objPathIncludeNum.indexes.length).toBe(2)
  expect(objPathIncludeNum.indexes).toEqual([0, 10])
  expect(objPathIncludeNum.index).toBe(10)
})

test('incomplete insertion of array elements', async () => {
  const form = attach(
    createForm({
      values: {
        array: [{ aa: 1 }, { aa: 2 }, { aa: 3 }],
      },
    })
  )
  const array = attach(
    form.createArrayField({
      name: 'array',
    })
  )
  attach(
    form.createObjectField({
      name: '0',
      basePath: 'array',
    })
  )
  attach(
    form.createField({
      name: 'aa',
      basePath: 'array.0',
    })
  )
  attach(
    form.createObjectField({
      name: '2',
      basePath: 'array',
    })
  )
  attach(
    form.createField({
      name: 'aa',
      basePath: 'array.2',
    })
  )
  expect(form.fields['array.0.aa']).not.toBeUndefined()
  expect(form.fields['array.1.aa']).toBeUndefined()
  expect(form.fields['array.2.aa']).not.toBeUndefined()
  await array.unshift({})
  expect(form.fields['array.0.aa']).toBeUndefined()
  expect(form.fields['array.1.aa']).not.toBeUndefined()
  expect(form.fields['array.2.aa']).toBeUndefined()
  expect(form.fields['array.3.aa']).not.toBeUndefined()
})

test('void array items need skip data', () => {
  const form = attach(createForm())
  const array = attach(
    form.createArrayField({
      name: 'array',
    })
  )
  const array2 = attach(
    form.createArrayField({
      name: 'array2',
    })
  )
  attach(
    form.createVoidField({
      name: '0',
      basePath: 'array',
    })
  )
  attach(
    form.createVoidField({
      name: '0',
      basePath: 'array2',
    })
  )
  attach(
    form.createVoidField({
      name: 'space',
      basePath: 'array.0',
    })
  )
  const select = attach(
    form.createField({
      name: 'select',
      basePath: 'array.0.space',
    })
  )
  const select2 = attach(
    form.createField({
      name: 'select2',
      basePath: 'array2.0',
    })
  )

  select.value = 123
  select2.value = 123
  expect(array.value).toEqual([123])
  expect(array2.value).toEqual([123])
})

test('array field reset', () => {
  const form = attach(createForm())
  const array = attach(
    form.createArrayField({
      name: 'array',
    })
  )
  attach(
    form.createObjectField({
      name: '0',
      basePath: 'array',
    })
  )
  attach(
    form.createField({
      name: 'input',
      initialValue: '123',
      basePath: 'array.0',
    })
  )
  form.reset('*', { forceClear: true })
  expect(form.values).toEqual({ array: [] })
  expect(array.value).toEqual([])
})

test('array field remove can not memory leak', async () => {
  const handler = jest.fn()
  const form = attach(
    createForm({
      values: {
        array: [{ aa: 1 }, { aa: 2 }],
      },
      effects() {
        onFieldValueChange('array.*.aa', handler)
      },
    })
  )
  const array = attach(
    form.createArrayField({
      name: 'array',
    })
  )
  attach(
    form.createObjectField({
      name: '0',
      basePath: 'array',
    })
  )
  attach(
    form.createField({
      name: 'aa',
      basePath: 'array.0',
    })
  )
  attach(
    form.createObjectField({
      name: '1',
      basePath: 'array',
    })
  )
  attach(
    form.createField({
      name: 'aa',
      basePath: 'array.1',
    })
  )
  const bb = attach(
    form.createField({
      name: 'bb',
      basePath: 'array.1',
      reactions: (field) => {
        field.visible = field.query('.aa').value() === '123'
      },
    })
  )
  expect(bb.visible).toBeFalsy()
  await array.remove(0)
  form.query('array.0.aa').take((field) => {
    ;(field as DataField).value = '123'
  })
  expect(bb.visible).toBeTruthy()
  expect(handler).toBeCalledTimes(1)
})

test('array field patch values', async () => {
  const form = attach(createForm())

  const arr = attach(
    form.createArrayField({
      name: 'a',
    })
  )

  await arr.unshift({})
  attach(
    form.createObjectField({
      name: '0',
      basePath: 'a',
    })
  )
  attach(
    form.createField({
      name: 'c',
      initialValue: 'A',
      basePath: 'a.0',
    })
  )
  expect(form.values).toEqual({ a: [{ c: 'A' }] })
  await arr.unshift({})
  attach(
    form.createObjectField({
      name: '0',
      basePath: 'a',
    })
  )
  attach(
    form.createField({
      name: 'c',
      initialValue: 'A',
      basePath: 'a.0',
    })
  )
  attach(
    form.createObjectField({
      name: '1',
      basePath: 'a',
    })
  )
  attach(
    form.createField({
      name: 'c',
      initialValue: 'A',
      basePath: 'a.1',
    })
  )
  expect(form.values).toEqual({ a: [{ c: 'A' }, { c: 'A' }] })
})

test('array remove with initialValues', async () => {
  const form = attach(
    createForm({
      initialValues: {
        array: [{ a: 1 }, { a: 2 }],
      },
    })
  )
  const array = attach(
    form.createArrayField({
      name: 'array',
    })
  )
  attach(
    form.createObjectField({
      name: '0',
      basePath: 'array',
    })
  )
  attach(
    form.createObjectField({
      name: '1',
      basePath: 'array',
    })
  )
  attach(
    form.createField({
      name: 'a',
      basePath: 'array.0',
    })
  )
  attach(
    form.createField({
      name: 'a',
      basePath: 'array.1',
    })
  )
  expect(form.values).toEqual({ array: [{ a: 1 }, { a: 2 }] })
  await array.remove(1)
  expect(form.values).toEqual({ array: [{ a: 1 }] })
  expect(form.initialValues).toEqual({ array: [{ a: 1 }, { a: 2 }] })
  await array.reset()
  attach(
    form.createObjectField({
      name: '1',
      basePath: 'array',
    })
  )
  attach(
    form.createField({
      name: 'a',
      basePath: 'array.0',
    })
  )
  attach(
    form.createField({
      name: 'a',
      basePath: 'array.1',
    })
  )
  expect(form.values).toEqual({ array: [{ a: 1 }, { a: 2 }] })
  expect(form.initialValues).toEqual({ array: [{ a: 1 }, { a: 2 }] })
})

test('records: find array fields', () => {
  const form = attach(
    createForm({
      initialValues: {
        array: [{ a: 1 }, { a: 2 }],
      },
    })
  )

  attach(
    form.createArrayField({
      name: 'array',
    })
  )

  attach(
    form.createObjectField({
      name: '0',
      basePath: 'array',
    })
  )
  attach(
    form.createObjectField({
      name: '1',
      basePath: 'array',
    })
  )
  const field0 = attach(
    form.createField({
      name: 'a',
      basePath: 'array.0',
    })
  )
  const field1 = attach(
    form.createField({
      name: 'a',
      basePath: 'array.1',
    })
  )

  expect(field0.records.length).toBe(2)
  expect(field0.record).toEqual({ a: 1 })
  expect(field1.record).toEqual({ a: 2 })
})

test('record: find array nest field record', () => {
  const form = attach(
    createForm({
      initialValues: {
        array: [{ a: { b: { c: 1, d: 1 } } }, { a: { b: { c: 2, d: 2 } } }],
      },
    })
  )

  attach(
    form.createArrayField({
      name: 'array',
    })
  )

  attach(
    form.createObjectField({
      name: '0',
      basePath: 'array',
    })
  )
  attach(
    form.createObjectField({
      name: '1',
      basePath: 'array',
    })
  )

  attach(
    form.createObjectField({
      name: 'a',
      basePath: 'array.0',
    })
  )
  attach(
    form.createObjectField({
      name: 'a',
      basePath: 'array.1',
    })
  )

  attach(
    form.createObjectField({
      name: 'b',
      basePath: 'array.0.a',
    })
  )

  attach(
    form.createObjectField({
      name: 'b',
      basePath: 'array.1.a',
    })
  )

  const field0 = attach(
    form.createField({
      name: 'c',
      basePath: 'array.0.a.b',
    })
  )

  const field1 = attach(
    form.createField({
      name: 'c',
      basePath: 'array.1.a.b',
    })
  )

  const field2 = attach(
    form.createField({
      name: 'cc',
      basePath: 'array.1.a.b.c',
    })
  )

  expect(field0.records.length).toBe(2)
  expect(field1.records.length).toBe(2)
  expect(field1.records).toEqual([
    { a: { b: { c: 1, d: 1 } } },
    { a: { b: { c: 2, d: 2 } } },
  ])
  expect(field0.record).toEqual({ c: 1, d: 1 })
  expect(field1.record).toEqual({ c: 2, d: 2 })
  expect(field2.record).toEqual({ c: 2, d: 2 })
})

test('record: find array field record', () => {
  const form = attach(
    createForm({
      initialValues: {
        array: [1, 2, 3],
      },
    })
  )

  attach(
    form.createArrayField({
      name: 'array',
    })
  )

  const field = attach(
    form.createField({
      basePath: 'array',
      name: '0',
    })
  )

  expect(field.records.length).toBe(3)
  expect(field.record).toEqual(1)
})

test('record: find object field record', () => {
  const form = attach(
    createForm({
      initialValues: {
        a: {
          b: {
            c: 1,
            d: 1,
          },
        },
      },
    })
  )

  attach(
    form.createArrayField({
      name: 'a',
    })
  )

  attach(
    form.createObjectField({
      name: 'b',
      basePath: 'a',
    })
  )

  const fieldc = attach(
    form.createObjectField({
      name: 'c',
      basePath: 'a.b',
    })
  )

  expect(fieldc.records).toEqual(undefined)
  expect(fieldc.record).toEqual({
    c: 1,
    d: 1,
  })
})

test('record: find form fields', () => {
  const form = attach(
    createForm({
      initialValues: {
        array: [{ a: 1 }, { a: 2 }],
      },
    })
  )

  const array = attach(
    form.createArrayField({
      name: 'array',
    })
  )

  expect(array.record).toEqual({ array: [{ a: 1 }, { a: 2 }] })
})

```

--------------------------------------------------------------------------------
/docs/guide/index.md:
--------------------------------------------------------------------------------

```markdown
# Introduction

## Problem

As we all know, the form scene has always been the most complex scene in the front-end and back-end fields. What is the main complexity of it?

- There are a lot of fields, how can the performance not deteriorate with the increase of the number of fields?
- Field association logic is complex, how to implement complex linkage logic more simply? How to ensure that the form performance is not affected when the field is associated with the field?

  - One-to-Many (asynchronous)
  - Many-to-One (asynchronous)
  - Many-to-Many (asynchronous)

- Complex form data management
  - Form value conversion logic is complex (front and back formats are inconsistent)
  - The logic of merging synchronous and asynchronous default values is complicated
  - Cross-form data communication, how to keep the performance from deteriorating with the increase in the number of fields?
- Complex form state management
  - Focusing on the self-incrementing list scenario, how to make the array data move, and the field status can follow the move during the deletion process?
- Scene reuse of forms
  - Query list
  - Dialog/Drawer form
  - Step form
  - Tab form
- Dynamic rendering requirements are very strong
  - Field configuration allows non-professional front-ends to quickly build complex forms
  - Cross-terminal rendering, a JSON Schema, multi-terminal adaptation
  - How to describe the layout in the form protocol?
    - Vertical layout
    - Horizontal layout
    - Grid layout
    - Flexible layout
    - Free layout
  - How to describe the logic in the form protocol?

So many problems, how to solve them, think about it, But we still have to find a solution，Not only to solve but also to solve elegantly, The Alibaba digital supply chain team, after experiencing a lot of middle and back-office practice and exploration, finally precipitated **Formily form solution**. All the problems mentioned above, after going through UForm to Formily1.x, until Formily2.x finally achieved the degree of **elegant solution**. So how does Formily 2.x solve these problems?

## Solution

In order to solve the above problems, we can further refine the problem and come up with a breakthrough direction.

### Accurate Rendering

In the React scenario, to realize a form requirement, most of them use setState to realize field data collection. because form data needs to be collected and some linkage requirements are realized.This implementation is very simple and the mental cost is very low, but it also introduces performance problems, because each input will cause all fields to be rendered in full. Although there is diff at the DOM update level, diff also has a computational cost, which wastes a lot of computational resources. In terms of time complexity, the initial rendering of the form is O(n), and the field input is also O(n), which is obviously unreasonable.

Historical experience is always helpful to mankind. Decades ago, humans created the MVVM design pattern. The core of this design pattern is to abstract the view model and consume it at the DSL template layer.SL uses a certain dependency collection mechanism, and then uniformly schedules in the view model to ensure that each input is accurately rendered. This is the industrial-grade GUI form!

It just so happened that the github community abstracted a state management solution called Mobx for such MVVM models. The core capabilities of [Mobx](https://github.com/mobxjs/mobx) are its dependency tracking mechanism and the abstraction capabilities of responsive models.

Therefore, with the help of Mobx, the O(n) problem in the form field input process can be completely solved, and it can be solved very elegantly. However, during the implementation of Formily 2.x, it was discovered that Mobx still has some problems that are not compatible with Formily's core ideas. In the end, we only can reinvent one wheel,[@formily/reactive](https://reactive.formilyjs.org) which continues the core idea of Mobx.

Mention here [react-hook-form](https://github.com/react-hook-form/react-hook-form) , Very popular, known as the industry’s top performance form solution, let’s take a look at its simplest case:

```tsx pure
import React from 'react'
import ReactDOM from 'react-dom'
import { useForm } from 'react-hook-form'

function App() {
  const { register, handleSubmit, errors } = useForm() // initialize the hook
  const onSubmit = (data) => {
    console.log(data)
  }

  return (
    <form onSubmit={handleSubmit(onSubmit)}>
      <input name="firstname" ref={register} /> {/* register an input */}
      <input name="lastname" ref={register({ required: true })} />
      {errors.lastname && 'Last name is required.'}
      <input name="age" ref={register({ pattern: /\d+/ })} />
      {errors.age && 'Please enter number for age.'}
      <input type="submit" />
    </form>
  )
}

ReactDOM.render(<App />, document.getElementById('root'))
```

Although the value management achieves accurate rendering, when the verification is triggered, the form will still be rendered in full. Because of the update of the errors state, the overall controlled rendering is necessary to achieve synchronization. This is only the full rendering of the verification meeting. In fact, there is linkage. To achieve linkage with react-hook-form, it also requires overall controlled rendering to achieve linkage. Therefore, if you want to truly achieve accurate rendering, it must be Reactive!

### Domain Model

As mentioned in the previous question, the linkage of forms is very complicated, including various relationships between fields. Let’s imagine that most form linkages are basically linkages triggered based on the values of certain fields. However, actual business requirements may be sophisticated. It is not only necessary to trigger linkage based on certain field values, but also based on other side-effect values, such as application status, server data status, page URL, internal data of a UI component of a field, and current Other data status of the field itself, some special asynchronous events, etc. Use a picture to describe:

![image-20210202081316031](//img.alicdn.com/imgextra/i3/O1CN01LWjBSt251w5BtGHW2_!!6000000007467-55-tps-1100-432.svg)

As you can see from the above figure, in order to achieve a linkage relationship, the core is to associate certain state attributes of the field with certain data. Some data here can be external data or own data. For example, the display/hide of a field is associated with certain data, the value of a field is associated with certain data, and the disabling/editing of a field is associated with certain data. Here are three examples. We have actually abstracted it. One of the simplest Field model:

```typescript
interface Field {
  value: any
  visible: boolean
  disabled: boolean
}
```

Of course, does the Field model only have these 3 attributes? Definitely not, if we want to express a field, then the path of the field must have, Because we want to describe the entire form tree structure, at the same time, we also need to manage the properties of the field corresponding to the UI component. For example, Input and Select have their properties. For example, the placeholder of Input is associated with some data, or the drop-down option of Select is associated with some data, so you can understand it. So, our Field model can look like this:

```typescript
interface Field {
  path: string[]
  value: any
  visible: boolean
  disabled: boolean
  component: [Component, ComponentProps]
}
```

We have added the component attribute, which represents the UI component and UI component attribute corresponding to the field, so that the ability to associate certain data with the field component attribute, or even the field component, is realized. Are there any more? Of course, there are also, such as the outer package container of the field, usually we call it FormItem, which is mainly responsible for the interactive style of the field, such as the field title, the style of error prompts, etc., If we want to include more linkage, such as the linkage between certain data and FormItem, then we have to add the outer package container. There are many other attributes, which are not listed here.

From the above ideas, we can see that in order to solve the linkage problem, no matter how abstract we are, the field model will eventually be abstracted. It contains all the states related to the field. As long as these states are manipulated, linkage can be triggered.

Regarding accurate rendering, we have determined that we can choose a Reactive solution similar to Mobx. Although it is a reinvention of a wheel, the Reactive model is still very suitable for abstract responsive models. So based on the ability of Reactive, Formily, after constant trial and error and correction, finally designed a truly elegant form model. Such a form model solves the problem of the form domain, so it is also called a domain model. With such a domain model, we can make the linkage of the form enumerable and predictable, which also lays a solid foundation for the linkage of the protocol description to be discussed later.

### Path System

The field model in the form domain model was mentioned earlier. If the design is more complete, it is not only a field model, but also a form model as the top-level model. The top-level model manages all the field models, and each field has its own Path. How to find these fields? The linkage relationship mentioned earlier is more of a passive dependency, but in some scenarios, we just need to modify the state of a field based on an asynchronous event action. Here is how to find a field elegantly. The same It has also undergone a lot of trial and error and correction. Formily's original path system @formily/path solves this problem very well. It not only makes the field lookup elegant, but it can also deal with the disgusting problem of inconsistent front-end and back-end data structures through destructuring expressions.

### Life Cycle

With the help of Mobx and the path system, we have created a relatively complete form scheme, but after this abstraction, our scheme is like a black box, and the outside world cannot perceive the internal state flow process of the scheme. If you want to implement some logic in a certain process stage, you cannot achieve it. So, here we need another concept, the life cycle. As long as we expose the entire form life cycle as an event hook to the outside world, we can achieve an abstract but flexible form solution.

### Protocol Driven

If you want to implement a dynamically configurable form, you must make the form structure serializable.
There are many ways to serialize, which can be a UI description protocol based on the UI, or a data description protocol based on the data. Because the form itself is to maintain a copy of data, it is natural that for the form scenario, the data protocol is the most suitable. To describe the data structure, [JSON-Schema](https://json-schema.org/) is now the most popular in the industry. Because the JSON Schema protocol itself has many verification-related attributes, this is naturally associated with form verification. Is the UI description protocol really not suitable for describing forms? No, the UI description protocol is suitable for more general UI expressions. Of course, the description form is not a problem, but it will be more front-end protocol. On the contrary, JSON-Schema is expressible at the back-end model layer, and is more versatile in describing data. Therefore, the two protocols have their own strengths, but in the field of pure forms, JSON-Schema will be more domain-oriented.

So, if we choose JSON-Schema, how do we describe the UI and how do we describe the logic? It is not realistic to simply describe the data and output the form pages available for actual business.

The solution of [react-jsonschema-form](https://github.com/rjsf-team/react-jsonschema-form) is that data is data and UI is UI. The advantage of this is that each protocol is a very pure protocol, but it brings a large maintenance cost and understanding cost.
To develop a form, users need to constantly switch between the two protocols mentally. Therefore, if you look at such a split from a technical perspective, it is very reasonable, but from a product perspective, the split is to throw the cost to the user. Therefore, Formily's form protocol will be more inclined to expand on JSON-Schema.

So, how to expand? In order not to pollute the standard JSON-Schema attributes, we uniformly express the extended attributes in the x-\* format:

```json
{
  "type": "string",
  "title": "String",
  "description": "This is a string",
  "x-component": "Input",
  "x-component-props": {
    "placeholder": "please enter"
  }
}
```

In this way, the UI protocol and the data protocol are mixed together. As long as there is a unified extension agreement, the responsibilities of the two protocols can still be guaranteed to be single.

Then, what if you want to wrap a UI container on certain fields? Here, Formily defines a new schema type called `void`. No stranger to void, there is also void element in W3C specification, and void keyword in js. The former represents virtual elements, and the latter represents virtual pointers. Therefore, in JSON Schema, void is introduced to represent a virtual data node, which means that the node does not occupy the actual data structure. So, we can do this:

```json
{
  "type": "void",
  "title": "card",
  "description": "This is a card",
  "x-component": "Card",
  "properties": {
    "string": {
      "type": "string",
      "title": "String",
      "description": "This is a string",
      "x-component": "Input",
      "x-component-props": {
        "placeholder": "please enter"
      }
    }
  }
}
```

In this way, a UI container can be described. Because the UI container can be described, we can easily encapsulate a scene-based component, such as FormStep. So how do we describe the linkage between fields? For example, one field needs to control the display and hide of another field. We can do this:

```json
{
  "type": "object",
  "properties": {
    "source": {
      "type": "string",
      "title": "Source",
      "x-component": "Input",
      "x-component-props": {
        "placeholder": "please enter"
      }
    },
    "target": {
      "type": "string",
      "title": "Target",
      "x-component": "Input",
      "x-component-props": {
        "placeholder": "please enter"
      },
      "x-reactions": [
        {
          "dependencies": ["source"],
          "when": "{{$deps[0] == '123'}}",
          "fulfill": {
            "state": {
              "visible": true
            }
          },
          "otherwise": {
            "state": {
              "visible": false
            }
          }
        }
      ]
    }
  }
}
```

The target field is described with the help of `x-reactions`, which depends on the value of the source field. If the value is `'123'`, the target field is displayed, otherwise it is hidden. This linkage method is a passive linkage. What if we want to achieve active linkage ? It can be like this:

```json
{
  "type": "object",
  "properties": {
    "source": {
      "type": "string",
      "title": "Source",
      "x-component": "Input",
      "x-component-props": {
        "placeholder": "please enter"
      },
      "x-reactions": [
        {
          "when": "{{$self.value == '123'}}",
          "target": "target",
          "fulfill": {
            "state": {
              "visible": true
            }
          },
          "otherwise": {
            "state": {
              "visible": false
            }
          }
        }
      ]
    },
    "target": {
      "type": "string",
      "title": "Target",
      "x-component": "Input",
      "x-component-props": {
        "placeholder": "please enter"
      }
    }
  }
}
```

Just change the location of `x-reactions`, put it on the source field, and then specify a target.

It can be seen that our linkage is actually based on:

- condition
- Condition-satisfied action
- Unsatisfied action

To achieve. Because the internal state management uses the [@formily/reactive](https://reactive.formilyjs.org) solution similar to Mobx, Formily easily realizes passive and active linkage scenarios, covering most business needs.

Therefore, our form can be described by protocol, and it can be configurable no matter how complicated the layout is or the linkage is very complicated.

### Layered Architecture

I talked about the solutions to various problems at the beginning, so how do we design now to make Formily more self-consistent and elegant?

![](https://img.alicdn.com/imgextra/i4/O1CN019qbf1b1ChnTfT9x3X_!!6000000000113-55-tps-1939-1199.svg)

This picture mainly divides Formily into the kernel layer, UI bridge layer, extended component layer, and configuration application layer.

The kernel layer is UI-independent. It ensures that the logic and state of user management are not coupled to any framework. This has several advantages:

- Logic and UI framework are decoupled, and framework-level migration will be done in the future, without extensive refactoring of business code.
- The learning cost is uniform. If the user uses @formily/react, the business will be migrated to @formily/vue in the future, and the user does not need to learn again.

JSON Schema exists independently and is consumed by the UI bridging layer, ensuring the absolute consistency of protocol drivers under different UI frameworks, and there is no need to repeatedly implement protocol parsing logic.

Extend the component layer to provide a series of form scene components to ensure that users can use it out of the box. No need to spend a lot of time for secondary development.

## Competitive Product Comparison

```tsx
/**
 * inline: true
 */
import React from 'react'
import { Table, Tooltip } from 'antd'
import { QuestionCircleOutlined } from '@ant-design/icons'

const text = (content, tooltips) => {
  if (tooltips) {
    return (
      <div>
        {content}
        <Tooltip title={tooltips}>
          <QuestionCircleOutlined style={{ marginLeft: 3 }} />
        </Tooltip>
      </div>
    )
  }
  return content
}

const dataSource = [
  {
    feature: 'Custom component access cost',
    antd: '4.x low access cost',
    fusion: 'high',
    formik: 'low',
    finalForm: 'low',
    schemaForm: text('high', 'Because of coupling bootstrap'),
    hookForm: text('high', 'Because of coupling React Ref'),
    'formily1.x': 'low',
    'formily2.x': 'low',
  },
  {
    feature: 'performance',
    antd: text(
      '4.x performance is better',
      'Only solved the value synchronization and accurate rendering'
    ),
    fusion: 'bad',
    formik: 'bad',
    finalForm: text(
      'better',
      'But only solved the value synchronization and accurate rendering'
    ),
    schemaForm: 'bad',
    hookForm: text(
      'good',
      'But only solved the value synchronization and accurate rendering'
    ),
    'formily1.x': text(
      'excellent',
      'Can solve the precise rendering in the linkage process'
    ),
    'formily2.x': text(
      'excellent',
      'Can solve the precise rendering in the linkage process'
    ),
  },
  {
    feature: 'Whether to support dynamic rendering',
    antd: 'no',
    fusion: 'no',
    formik: 'no',
    finalForm: 'no',
    schemaForm: 'yes',
    hookForm: 'no',
    'formily1.x': 'yes',
    'formily2.x': 'yes',
  },
  {
    feature: 'Whether to use out of the box',
    antd: 'yes',
    fusion: 'yes',
    formik: 'no',
    finalForm: 'no',
    schemaForm: 'yes',
    hookForm: 'no',
    'formily1.x': 'yes',
    'formily2.x': 'yes',
  },
  {
    feature: 'Whether to support cross-terminal',
    antd: 'no',
    fusion: 'no',
    formik: 'no',
    finalForm: 'no',
    schemaForm: 'no',
    hookForm: 'no',
    'formily1.x': 'yes',
    'formily2.x': 'yes',
  },
  {
    feature: 'Development efficiency',
    antd: 'general',
    fusion: 'generalv',
    formik: 'general',
    finalForm: 'general',
    schemaForm: text(
      'low',
      'Source code development requires manual maintenance of JSON'
    ),
    hookForm: 'general',
    'formily1.x': 'high',
    'formily2.x': 'high',
  },
  {
    feature: 'Learning cost',
    antd: 'easy',
    fusion: 'easy',
    formik: 'easy',
    finalForm: 'hard',
    schemaForm: 'hard',
    hookForm: 'easy',
    'formily1.x': 'very hard',
    'formily2.x': text('hard', 'The concept is drastically reduced'),
  },
  {
    feature: 'View code maintainability',
    antd: text('bad', 'Lots of conditional expressions'),
    fusion: text('bad', 'Lots of conditional expressions'),
    formik: text('bad', 'Lots of conditional expressions'),
    finalForm: text('bad', 'Lots of conditional expressions'),
    schemaForm: 'good',
    hookForm: text('bad', 'Lots of conditional expressions'),
    'formily1.x': 'good',
    'formily2.x': 'good',
  },
  {
    feature: 'Scenario-based packaging capabilities',
    antd: 'no',
    fusion: 'no',
    formik: 'no',
    finalForm: 'no',
    schemaForm: 'yes',
    hookForm: 'no',
    'formily1.x': 'yes',
    'formily2.x': 'yes',
  },
  {
    feature: 'Whether to support form preview',
    antd: 'no',
    fusion: 'yes',
    formik: 'no',
    finalForm: 'no',
    schemaForm: 'no',
    hookForm: 'no',
    'formily1.x': 'yes',
    'formily2.x': 'yes',
  },
]

export default () => {
  return (
    <Table
      dataSource={dataSource}
      pagination={false}
      bordered
      scroll={{ x: 1600 }}
      size="small"
    >
      <Table.Column title="ability" dataIndex="feature" width={160} />
      <Table.Column title="Ant Design Form" dataIndex="antd" width={160} />
      <Table.Column title="Fusion Form" dataIndex="fusion" width={160} />
      <Table.Column title="Formik" dataIndex="formik" width={160} />
      <Table.Column
        title="React Final Form"
        dataIndex="finalForm"
        width={160}
      />
      <Table.Column
        title="React Schema Form"
        dataIndex="schemaForm"
        width={160}
      />
      <Table.Column title="React Hook Form" dataIndex="hookForm" width={160} />
      <Table.Column title="Formily1.x" dataIndex="formily1.x" width={160} />
      <Table.Column title="Formily2.x" dataIndex="formily2.x" width={160} />
    </Table>
  )
}
```

## Core Advantages

- high performance
- Out of the box
- Linkage logic to achieve high efficiencyv
- Cross-terminal capability, logic can be cross-frame, cross-terminal reuse
- Dynamic rendering capability

## Core Disadvantage

- The learning cost is relatively high. Although 2.x has already converged a large number of concepts, there is still a certain learning cost.

## Who is using it?

- Alibaba
- Tencent
- ByteDance

## Q/A

Q: Now that I have Vue, why do I still need to provide @formily/vue?

Answer: Vue is a UI framework. The problem it solves is a wider range of UI problems. Although its reactive ability is outstanding in form scenarios, at least it is more convenient than native React to write forms, but if it is in more complex form scenarios , We still need to do a lot of abstraction and encapsulation, so @formily/vue is to help you do these abstract encapsulation things, really let you develop super-complex form applications efficiently and conveniently.

Q: What is the biggest advantage of Formily2.x compared to 1.x?

Answer: The cost of learning, yes, the core is to allow users to understand Formily more quickly. We have tried our best to avoid all kinds of obscure logic and boundary problems during the 2.x design process.

Q: What is the browser compatibility of Formily 2.x?

Answer: IE is not supported, because the implementation of Reactive strongly relies on Proxy.

```

--------------------------------------------------------------------------------
/packages/core/docs/api/models/Field.md:
--------------------------------------------------------------------------------

```markdown
---
order: 1
---

# Field

Call the Field model returned by [createField](/api/models/form#createfield).

All model attributes are listed below. If the attribute is writable, then we can directly refer to it to modify the attribute, and @formily/reactive will respond to trigger the UI update.

## Attributes

| Property       | Description                                         | Type                                               | Read-only or not | Default value |
| -------------- | --------------------------------------------------- | -------------------------------------------------- | ---------------- | ------------- |
| initialized    | Has the field been initialized                      | Boolean                                            | No               | `false`       |
| mounted        | Is the field mounted                                | Boolean                                            | No               | `false`       |
| unmounted      | Is the field unmounted                              | Boolean                                            | No               | `false`       |
| address        | Field node path                                     | [FormPath](/api/entry/form-path)                   | Yes              |               |
| path           | Field data path                                     | [FormPath](/api/entry/form-path)                   | Yes              |               |
| title          | Field Title                                         | [FieldMessage](#fieldmessage)                      | No               | `""`          |
| description    | Field description                                   | [FieldMessage](#fieldmessage)                      | No               | `""`          |
| loading        | Field loading status                                | Boolean                                            | No               | `false`       |
| validating     | Is the field being validated                        | Boolean                                            | No               | `false`       |
| modified       | Whether the field tree has been manually modified   | Boolean                                            | No               | `false`       |
| selfModified   | Whether the field has been manually modified        | Boolean                                            | No               | `false`       |
| active         | Is the field active                                 | Boolean                                            | No               | `false`       |
| visited        | Whether the field has been visited                  | Boolean                                            | No               | `false`       |
| inputValue     | Field input value                                   | Any                                                | No               | `null`        |
| inputValues    | Field input value collection                        | Array                                              | No               | `[]`          |
| dataSource     | Field data source                                   | Array                                              | No               | `[]`          |
| validator      | Field validator                                     | [FieldValidator](#fieldvalidator)                  | No               | `null`        |
| decorator      | field decorator                                     | Any[]                                              | No               | `null`        |
| component      | Field component                                     | Any[]                                              | No               | `null`        |
| feedbacks      | Field feedback information                          | [IFieldFeedback](#ifieldfeedback)[]                | No               | `[]`          |
| parent         | Parent field                                        | [GeneralField](#generalfield)                      | yes              | `null`        |
| errors         | Field all error message(include children)           | [IFormFeedback](/api/models/form/#iformfeedback)[] | Yes              | `[]`          |
| warnings       | Field all warning message(include children)         | [IFormFeedback](/api/models/form/#iformfeedback)[] | Yes              | `[]`          |
| successes      | Field all success message(include children)         | [IFormFeedback](/api/models/form/#iformfeedback)[] | Yes              | `[]`          |
| valid          | Is the all field valid(include children)            | Boolean                                            | Yes              | `true`        |
| invalid        | Is the all field illegal(include children)          | Boolean                                            | Yes              | `false`       |
| value          | Field value                                         | Any                                                | No               |               |
| initialValue   | Field default value                                 | Any                                                | No               |               |
| display        | Field display status                                | [FieldDisplayTypes](#fielddisplaytypes)            | No               | `"visible"`   |
| pattern        | Field interaction mode                              | [FieldPatternTypes](#fieldpatterntypes)            | No               | `"editable"`  |
| required       | Is the field required                               | Boolean                                            | No               | `false`       |
| hidden         | Whether the field is hidden                         | Boolean                                            | No               | `false`       |
| visible        | Whether the field is displayed                      | Boolean                                            | No               | `true`        |
| disabled       | Whether the field is disabled                       | Boolean                                            | No               | `false`       |
| readOnly       | Is the field read-only                              | Boolean                                            | No               | `false`       |
| readPretty     | Whether the field is in the reading state           | Boolean                                            | No               | `false`       |
| editable       | Field is editable                                   | Boolean                                            | No               | `true`        |
| validateStatus | Field validation status                             | [FieldValidateStatus](#fieldvalidatestatus)        | yes              | `null`        |
| content        | Field content, usually as a child node              | any                                                | No               | `null`        |
| data           | Field extends properties                            | Object                                             | No               | `null`        |
| selfErrors     | Field own error message                             | [FieldMessage](#fieldmessage)[]                    | No               | `[]`          |
| selfWarnings   | Field own warning message                           | [FieldMessage](#fieldmessage)[]                    | No               | `[]`          |
| selfSuccesses  | Success message of the field itself                 | [FieldMessage](#fieldmessage)[]                    | No               | `[]`          |
| selfValid      | Is the field valid                                  | Boolean                                            | Yes              | `true`        |
| selfInvalid    | Is the field itself illegal                         | Boolean                                            | Yes              | `false`       |
| indexes        | collection of field numeric indexes                 | Number                                             | yes              | `-`           |
| index          | field numeric index, take the last index of indexes | Number                                             | Yes              | `-`           |

#### explain in detail

**active**

Trigger onFocus is true, trigger onBlur is false

**visited**

Triggered onFocus will always be true

**inputValue**

Trigger the value collected by onInput

**inputValues**

Trigger the multi-parameter values collected by onInput

**hidden**

When true, display is hidden, when false, display is visible

**visible**

When true, display is visible, when false, display is none

## Method

### setTitle

#### Description

Set field title

#### Signature

```ts
interface setTitle {
  (title?: FieldMessage): void
}
```

FieldMessage Reference [FieldMessage](#fieldmessage)

### setDescription

#### Description

Set field description information

#### Signature

```ts
interface setDescription {
  (title?: FieldMessage): void
}
```

FieldMessage Reference [FieldMessage](#fieldmessage)

### setDataSource

#### Description

Set field data source

#### Signature

```ts
interface setDataSource {
  (dataSource?: FieldDataSource): void
}
```

FieldDataSource Reference [FieldDataSource](#fielddatasource)

### setFeedback

#### Description

Set field message feedback

#### Signature

```ts
interface setFeedback {
  (feedback?: IFieldFeedback): void
}
```

IFieldFeedback Reference [IFieldFeedback](#ifieldfeedback)

### setSelfErrors

#### Description

Set the field error message, here is a feedback update with EffectError as the code, mainly to prevent pollution of the checker result, if you want to force overwrite, you can use setFeedback

#### Signature

```ts
interface setSelfErrors {
  (messages?: FieldMessage[]): void
}
```

### setSelfWarnings

#### Description

Set the field warning information, here is a feedback update with EffectWarning as the code, mainly to prevent pollution of the checker result, if you want to force overwrite, you can use setFeedback

#### Signature

```ts
interface setSelfWarning {
  (messages?: FieldMessage[]): void
}
```

### setSelfSuccesses

#### Description

Set the field success information, here is a feedback update with EffectSuccess as the code, mainly to prevent pollution of the checker result, if you want to force overwrite, you can use setFeedback

#### Signature

```ts
interface setSelfSuccesses {
  (messages?: FieldMessage[]): void
}
```

### setValidator

#### Description

Set field validator

#### Signature

```ts
interface setValidator {
  (validator?: FieldValidator): void
}
```

FieldValidator Reference [FieldValidator](#fieldvalidator)

### setRequired

#### Description

Whether the setting field is required

#### Signature

```ts
interface setRequired {
  (required?: boolean): void
}
```

### setValidatorRule

#### 描述

Set the field validator according to the rules, similar to setRequired

#### 签名

```ts
interface setValidatorRule {
  (ruleName?: string, ruleValue: any): void
}
```

### setValue

#### Description

Set field value

#### Signature

```ts
interface setValue {
  (value?: FieldValue): void
}
```

FieldValue Reference [FieldValue](#fieldvalue)

### setInitialValue

#### Description

Set field default value

#### Signature

```ts
interface setInitialValue {
  (initialValue?: FieldValue): void
}
```

FieldValue Reference [FieldValue](#fieldvalue)

### setDisplay

#### Description

Set field display status

#### Signature

```ts
interface setDisplay {
  (display?: FieldDisplayTypes): void
}
```

FieldDisplayTypes Reference [FieldDisplayTypes](#fielddisplaytypes)

### setPattern

#### Description

Set field interaction mode

#### Signature

```ts
interface setPattern {
  (pattern?: FieldPatternTypes): void
}
```

FieldPatternTypes Reference [FieldPatternTypes](#fieldpatterntypes)

### setLoading

#### Description

Set field loading status

#### Signature

```ts
interface setLoading {
  (loading?: boolean): void
}
```

### setValidating

#### Description

Set field verification status

#### Signature

```ts
interface setValidating {
  (validating?: boolean): void
}
```

### setComponent

#### Description

Set field component

#### Signature

```ts
interface setComponent {
  (component?: FieldComponent, props?: any): void
}
```

FieldComponent Reference [FieldComponent](#fieldcomponent)

### setComponentProps

#### Description

Set field component properties

#### Signature

```ts
interface setComponentProps {
  (props?: any): void
}
```

### setDecorator

#### Description

Set field decorator

#### Signature

```ts
interface setDecorator {
  (decorator?: FieldDecorator, props?: any): void
}
```

FieldDecorator Reference [FieldDecorator](#fielddecorator)

### setDecoratorProps

#### Description

Set field decorator properties

#### Signature

```ts
interface setDecoratorProps {
  (props?: any): void
}
```

### setState

#### Description

Set field status

#### Signature

```ts
interface setState {
  (state: IFieldState): void
  (callback: (state: IFieldState) => void): void
}
```

IFieldState Reference [IFieldState](#ifieldstate)

### getState

#### Description

Get field status

#### Signature

```ts
interface getState<T> {
  (): IFieldState
  (callback: (state: IFieldState) => T): T
}
```

IFieldState Reference [IFieldState](#ifieldstate)

### setData

#### Description

set field data

#### Signature

```ts
interface setData {
  (data: any): void
}
```

### setContent

#### Description

set field content

#### Signature

```ts
interface setContent {
  (content: any): void
}
```

### onInit

#### Description

Trigger field initialization, no need to call manually

#### Signature

```ts
interface onInit {
  (): void
}
```

### onMount

#### Description

Trigger field mount

#### Signature

```ts
interface onMount {
  (): void
}
```

### onUnmount

#### Description

Trigger field unloading

#### Signature

```ts
interface onUnmount {
  (): void
}
```

### onInput

#### Description

Trigger field entry

#### Signature

```ts
interface onInput {
  (...args: any[]): Promise<void>
}
```

### onFocus

#### Description

Trigger field focus

#### Signature

```ts
interface onFocus {
  (...args: any[]): Promise<void>
}
```

### onBlur

#### Description

Trigger field out of focus

#### Signature

```ts
interface onBlur {
  (...args: any[]): Promise<void>
}
```

### submit

#### describe

Trigger field submission (including all sub-nodes, this API is mainly used in sub-form scenarios)

#### sign

```ts
interface submit<T> {
  (): Promise<Field['value']>
  (onSubmit?: (values: Field['value']) => Promise<T> | void): Promise<T>
}
```

### validate

#### Description

Trigger field verification(Contains all sub-nodes, this API is mainly used in sub-form scenarios)

#### Signature

```ts
interface validate {
  (triggerType?: 'onInput' | 'onFocus' | 'onBlur'): Promise<IValidateResults>
}
```

IValidateResults Reference [IValidateResults](#ivalidateresults)

### reset

#### Description

Trigger field reset(Contains all sub-nodes, this API is mainly used in sub-form scenarios), if verification is set, then the returned result is the verification result

#### Signature

```ts
interface reset {
  (options?: IFieldResetOptions): Promise<IValidateResults>
}
```

IFieldResetOptions Reference [IFieldResetOptions](#ifieldresetoptions)

IValidateResults Reference [IValidateResults](#ivalidateresults)

### query

#### Description

Query field, you can query adjacent fields based on the current field

#### Signature

```ts
interface query {
  (pattern: FormPathPattern): Query
}
```

FormPathPattern API Reference [FormPath](/api/entry/form-path#formpathpattern)

Query object API reference [Query](/api/models/query)

### queryFeedbacks

#### Description

Query the feedback information of the current field

#### Signature

```ts
interface queryFeedbacks {
  (search: ISearchFeedback): IFieldFeedback[]
}
```

ISearchFeedback Reference [ISearchFeedback](/api/models/field#isearchfeedback)

IFieldFeedback Reference [IFieldFeedback](#ifieldfeedback)

### dispose

#### Description

Release observer, no need to release manually by default

#### Signature

```ts
interface dispose {
  (): void
}
```

### destroy

#### Description

Release observer, and remove current field model

#### Signature

```ts
interface destroy {
  (): void
}
```

### match

#### Description

Match fields based on path

#### Signature

```ts
interface match {
  (pattern: FormPathPattern): boolean
}
```

FormPathPattern API Reference [FormPath](/api/entry/form-path#formpathpattern)

### inject

#### Description

Inject executable methods into field models

#### Signature

```ts
interface inject {
  (actions: Record<string, (...args: any[]) => any>): void
}
```

### invoke

#### Description

Invoke an executable method injected by the field model via inject

#### Signature

```ts
interface invoke {
  (name: string, ...args: any[]): any
}
```

## Types of

<Alert>
Note: If you want to manually consume the type, just export it directly from the package module
</Alert>

### FieldValidator

Field validator, the type is more complicated and needs to be digested carefully by the user

```ts
//String format validator
type ValidatorFormats =
  | 'url'
  | 'email'
  | 'ipv6'
  | 'ipv4'
  | 'number'
  | 'integer'
  | 'idcard'
  | 'qq'
  | 'phone'
  | 'money'
  | 'zh'
  | 'date'
  | 'zip'
  | (string & {}) //Other format validators need to be registered through registerValidateFormats

//Object type verification result
interface IValidateResult {
  type: 'error' | 'warning' | 'success' | (string & {})
  message: string
}
//Object validator
interface IValidatorRules<Context = any> {
  triggerType?: 'onInput' | 'onFocus' | 'onBlur'
  format?: ValidatorFormats
  validator?: ValidatorFunction<Context>
  required?: boolean
  pattern?: RegExp | string
  max?: number
  maximum?: number
  exclusiveMaximum?: number
  exclusiveMinimum?: number
  minimum?: number
  min?: number
  len?: number
  whitespace?: boolean
  enum?: any[]
  const?: any
  multipleOf?: number
  uniqueItems?: boolean
  maxProperties?: number
  minProperties?: number
  maxItems?: number
  maxLength?: number
  minItems?: number
  minLength?: number
  message?: string
  [key: string]: any //Other attributes need to be registered through registerValidateRules
}
//Function type validator check result type
type ValidatorFunctionResponse = null | string | boolean | IValidateResult

//Functional validator
type ValidatorFunction<Context = any> = (
  value: any,
  rule: IValidatorRules<Context>,
  ctx: Context
) => ValidatorFunctionResponse | Promise<ValidatorFunctionResponse> | null

//Non-array validator
type ValidatorDescription =
  | ValidatorFormats
  | ValidatorFunction<Context>
  | IValidatorRules<Context>

//Array type validator
type MultiValidator<Context = any> = ValidatorDescription<Context>[]

type FieldValidator<Context = any> =
  | ValidatorDescription<Context>
  | MultiValidator<Context>
```

### FieldMessage

```ts
type FieldMessage = string | JSXElement
```

If under the UI framework that supports JSX, we can directly pass the Node of JSX, otherwise, we can only pass the string

### FieldDataSource

```ts
type FieldDataSource<ValueType> = Array<{
  label: string | JSXElement
  value: ValueType
  [key: string]: any
}>
```

The field data source is actually an array. The form of the content is determined by the user, but we recommend that users express the data source in the form of label/value. It should be noted here that if it is to be used in the UI framework, it is not set directly. To be effective, the dataSource property must be bound to a specific UI component to be effective. For example, using @formily/react, if you want to bind the state, you can use the connect function, or you can directly get the field instance through useField in the component. consumption.

### FieldValue

The field value type is actually the `Any` type, but it is important to mention that if it is a mandatory array type in ArrayField, it is a mandatory object type in ObjectField.

### FieldComponent

```ts
type FieldComponent = string | JSXComponentConstructor
```

Field component, if we use it in a framework that supports JSX, FieldComponent recommends to store the JSX component reference directly, otherwise it can store a component identification string and distribute it during actual rendering.

### FieldDecorator

```ts
type FieldDecorator = string | JSXComponentConstructor
```

Field decorator, if we use it in a framework that supports JSX, FieldDecorator recommends to store the JSX component reference directly, otherwise it can store a component identification string and distribute it during actual rendering.

### FieldReaction

```ts
type FieldReaction = (field: GeneralField) => void
```

### FieldDisplayTypes

```ts
type FieldDisplayTypes = 'none' | 'hidden' | 'visible'
```

### FieldPatternTypes

```ts
type FieldPatternTypes = 'editable' | 'disabled' | 'readOnly' | 'readPretty'
```

### FieldValidateStatus

```ts
type FieldValidateStatus = 'error' | 'warning' | 'success' | 'validating'
```

### GeneralField

```ts
type GeneralField = Field | VoidField | ArrayField | ObjectField
```

VoidField Reference [VoidField](/api/models/void-field)

ArrayField Reference [ArrayField](/api/models/array-field)

ObjectField Reference [ObjectField](/api/models/object-field)

### IFieldFeedback

```ts
interface IFieldFeedback {
  triggerType?: 'onInput' | 'onFocus' | 'onBlur' //Verify the trigger type
  type?: 'error' | 'success' | 'warning' //feedback type
  code?: //Feedback code
  | 'ValidateError'
    | 'ValidateSuccess'
    | 'ValidateWarning'
    | 'EffectError'
    | 'EffectSuccess'
    | 'EffectWarning'
  messages?: string[] //Feedback message
}
```

### ISearchFeedback

```ts
interface ISearchFeedback {
  triggerType?: 'onInput' | 'onFocus' | 'onBlur' //Verify the trigger type
  type?: 'error' | 'success' | 'warning' //feedback type
  code?: //Feedback code
  | 'ValidateError'
    | 'ValidateSuccess'
    | 'ValidateWarning'
    | 'EffectError'
    | 'EffectSuccess'
    | 'EffectWarning'
  address?: FormPathPattern
  path?: FormPathPattern
  messages?: string[]
}
```

### IFieldState

```ts
interface IFieldState {
  hidden?: boolean
  visible?: boolean
  editable?: boolean
  readOnly?: boolean
  disabled?: boolean
  readPretty?: boolean
  title?: any
  description?: any
  loading?: boolean
  validating?: boolean
  modified?: boolean
  active?: boolean
  visited?: boolean
  inputValue?: FieldValue
  inputValues?: any[]
  initialized?: boolean
  dataSource?: FieldDataSource
  mounted?: boolean
  unmounted?: boolean
  validator?: FieldValidator
  decorator?: FieldDecorator
  component?: FieldComponent
  readonly parent?: GeneralField
  errors?: FieldMessage[]
  warnings?: FieldMessage[]
  successes?: FieldMessage[]
  readonly valid?: boolean
  readonly invalid?: boolean
  value?: FieldValue
  initialValue?: FieldValue
  display?: FieldDisplayTypes
  pattern?: FieldPatternTypes
  required?: boolean
  readonly validateStatus?: 'error' | 'success' | 'warning' | 'validating'
}
```

### IGeneralFieldState

```ts
type IGeneralFieldState = IFieldState & IVoidFieldState
```

IVoidFieldState Reference [IVoidFieldState](/api/models/void-field#ivoidfieldstate)

### IFieldResetOptions

```ts
interface IFieldResetOptions {
  forceClear?: boolean //Whether to force clear
  validate?: boolean //Whether to verify
}
```

### IValidateResults

```ts
interface IValidateResults {
  error?: string[]
  warning?: string[]
  success?: string[]
}
```

> Formily Typescript type convention
>
> - Simple non-object data types or Union data types use type to define the type, and cannot start with an uppercase `I` character
> - Simple object types use interface to define the type uniformly, and start with an uppercase `I` character. If there are combinations of different interfaces (Intersection or Extends), use type to define the type, and also start with an uppercase `I` character

```

--------------------------------------------------------------------------------
/packages/shared/src/__tests__/index.spec.ts:
--------------------------------------------------------------------------------

```typescript
import moment from 'moment'
import { Map as ImmutableMap } from 'immutable'
import { isEqual } from '../compare'
import {
  toArr,
  every,
  move,
  some,
  findIndex,
  find,
  includes,
  map,
  reduce,
} from '../array'
import { clone, shallowClone } from '../clone'
import { lowerCase } from '../case'
import { deprecate } from '../deprecate'
import { globalThisPolyfill } from '../global'
import { isValid, isEmpty } from '../isEmpty'
import { stringLength } from '../string'
import { Subscribable } from '../subscribable'
import { lazyMerge, merge } from '../merge'
import { instOf } from '../instanceof'
import {
  isFn,
  isHTMLElement,
  isNumberLike,
  isReactElement,
  isMap,
  isWeakMap,
  isWeakSet,
  isSet,
} from '../checkers'
import { defaults } from '../defaults'
import { applyMiddleware } from '../middleware'

const sleep = (d = 100) => new Promise((resolve) => setTimeout(resolve, d))

describe('array', () => {
  test('toArr', () => {
    expect(isEqual(toArr([123]), [123])).toBeTruthy()
    expect(isEqual(toArr(123), [123])).toBeTruthy()
    expect(isEqual(toArr(null), [])).toBeTruthy()
  })

  test('some', () => {
    const values1 = [1, 2, 3, 4, 5]
    const values2 = []
    const values3 = { a: 1, b: 2, c: 3 }
    const values4 = {}
    expect(some(values1, (item) => item === 3)).toBeTruthy()
    expect(some(values1, (item) => item === 6)).toBeFalsy()
    expect(some(values2, () => true)).toBeFalsy()
    expect(some(values2, () => false)).toBeFalsy()
    expect(some(values3, (item) => item === 3)).toBeTruthy()
    expect(some(values3, (item) => item === 6)).toBeFalsy()
    expect(some(values4, () => true)).toBeFalsy()
    expect(some(values4, () => false)).toBeFalsy()
  })

  test('every', () => {
    const values1 = [1, 2, 3, 4, 5]
    const values2 = []
    const values3 = { a: 1, b: 2, c: 3 }
    const values4 = {}
    expect(every(values1, (item) => item < 6)).toBeTruthy()
    expect(every(values1, (item) => item < 3)).toBeFalsy()
    expect(every(values2, () => true)).toBeTruthy()
    expect(every(values2, () => false)).toBeTruthy()
    expect(every(values2, () => false)).toBeTruthy()
    expect(every(values3, (item) => item < 6)).toBeTruthy()
    expect(every(values3, (item) => item < 3)).toBeFalsy()
    expect(every(values4, () => false)).toBeTruthy()
    expect(every(values4, () => false)).toBeTruthy()
  })

  test('findIndex', () => {
    const value = [1, 2, 3, 4, 5]
    expect(
      isEqual(
        findIndex(value, (item) => item > 3),
        3
      )
    ).toBeTruthy()
    expect(
      isEqual(
        findIndex(value, (item) => item < 3, true),
        1
      )
    ).toBeTruthy()
    expect(
      isEqual(
        findIndex(value, (item) => item > 6),
        -1
      )
    ).toBeTruthy()
  })

  test('find', () => {
    const value = [1, 2, 3, 4, 5]
    expect(
      isEqual(
        find(value, (item) => item > 3),
        4
      )
    ).toBeTruthy()
    expect(
      isEqual(
        find(value, (item) => item < 3, true),
        2
      )
    ).toBeTruthy()
    expect(
      isEqual(
        find(value, (item) => item > 6),
        void 0
      )
    ).toBeTruthy()
  })

  test('includes', () => {
    const value = [1, 2, 3, 4, 5]
    expect(includes(value, 3)).toBeTruthy()
    expect(includes(value, 6)).toBeFalsy()
    expect(includes('some test string', 'test')).toBeTruthy()
    expect(includes('some test string', 'test2')).toBeFalsy()
  })

  test('map', () => {
    const value = [1, 2, 3, 4, 5]
    const stringVal = 'some test string'
    const obj = { k1: 'v1', k2: 'v2' }
    expect(
      isEqual(
        map(value, (item) => item + 1, true),
        [6, 5, 4, 3, 2]
      )
    ).toBeTruthy()
    expect(
      isEqual(
        map(stringVal, (item) => item),
        stringVal.split('')
      )
    ).toBeTruthy()
    expect(
      isEqual(
        map(obj, (item) => `${item}-copy`),
        { k1: 'v1-copy', k2: 'v2-copy' }
      )
    ).toBeTruthy()
  })

  test('reduce', () => {
    const value = [1, 2, 3, 4, 5]
    expect(
      isEqual(
        reduce(value, (acc, item) => acc + item, 0, true),
        15
      )
    ).toBeTruthy()
  })
})

describe('case', () => {
  test('lowercase', () => {
    expect(lowerCase('SOME_UPPER_CASE_TEXT')).toEqual('some_upper_case_text')
    expect(lowerCase('')).toEqual('')
  })
})

describe('compare', () => {
  // base
  expect(isEqual('some test string', 'some test string')).toBeTruthy()

  // array
  expect(
    isEqual([{ k1: 'v1' }, { k2: 'v2' }], [{ k1: 'v1' }, { k2: 'v2' }])
  ).toBeTruthy()
  expect(isEqual([{ k1: 'v1' }, { k2: 'v2' }], [{ k1: 'v1' }])).toBeFalsy()

  // moment
  const momentA = moment('2019-11-11', 'YYYY-MM-DD')
  const momentB = moment('2019-11-10', 'YYYY-MM-DD')
  expect(isEqual(momentA, {})).toBeFalsy()
  expect(isEqual(momentA, moment('2019-11-11', 'YYYY-MM-DD'))).toBeTruthy()
  expect(isEqual(momentA, momentB)).toBeFalsy()

  // immutable
  const immutableA = ImmutableMap({ key: 'val' })
  const immutableB = ImmutableMap({ key1: 'val1' })
  expect(isEqual(immutableA, {})).toBeFalsy()
  expect(isEqual(immutableA, immutableB)).toBeFalsy()
  // schema
  // todo
  // date
  const dateA = new Date('2019-11-11')
  const dateB = new Date('2019-11-10')
  expect(isEqual(dateA, {})).toBeFalsy()
  expect(isEqual(dateA, dateB)).toBeFalsy()
  expect(isEqual(dateA, new Date('2019-11-11'))).toBeTruthy()
  // regexp
  const regexpA = new RegExp(/test/)
  const regexpB = new RegExp(/test2/)
  expect(isEqual(regexpA, {})).toBeFalsy()
  expect(isEqual(regexpA, new RegExp(/test/))).toBeTruthy()
  expect(isEqual(regexpA, regexpB)).toBeFalsy()
  // URL
  const urlA = new URL('https://formilyjs.org/')
  const urlB = new URL('https://www.taobao.com')
  const urlC = new URL('https://formilyjs.org/')
  expect(isEqual(urlA, urlC)).toBeTruthy()
  expect(isEqual(urlA, urlB)).toBeFalsy()
  // object
  const objA = { key: 'val' }
  const objB = { key2: 'val2', key3: 'val3' }
  const objC = { key2: 'val2' }
  expect(isEqual(objA, { key: 'val' })).toBeTruthy()
  expect(isEqual(objA, objB)).toBeFalsy()
  expect(isEqual(objA, objC)).toBeFalsy()
  expect(isEqual([11, 22], [33, 44])).toBeFalsy()
  expect(isEqual([11, 22], {})).toBeFalsy()
  expect(isEqual(new URL('https://aa.test'), {})).toBeFalsy()
  expect(instOf(new URL('https://aa.test'), 'URL')).toBeTruthy()
  expect(instOf(new Date(), 'Date')).toBeTruthy()
  expect(
    isEqual(new URL('https://aa.test'), new URL('https://aa.test'))
  ).toBeTruthy()
  expect(
    isEqual(
      {
        $$typeof: true,
        _owner: true,
        aaa: 123,
      },
      {
        $$typeof: true,
        _owner: true,
        aaa: 123,
      }
    )
  ).toBeTruthy()
  expect(
    isEqual(
      {
        $$typeof: true,
        _owner: true,
        aaa: 123,
      },
      {
        $$typeof: true,
        _owner: true,
        bbb: 123,
      }
    )
  ).toBeFalsy()
  expect(
    isEqual(
      {
        $$typeof: true,
        _owner: true,
        aaa: 123,
      },
      {
        $$typeof: true,
        _owner: true,
        aaa: 333,
      }
    )
  ).toBeFalsy()
})

describe('clone and compare', () => {
  test('clone form data', () => {
    let dd = new Map()
    dd.set('aaa', { bb: 123 })
    let ee = new WeakMap()
    ee.set({}, 1)
    let ff = new WeakSet()
    ff.add({})
    let gg = new Set()
    gg.add(3)

    let a = {
      aa: 123123,
      bb: [{ bb: 111 }, { bb: 222 }],
      cc: () => {
        // eslint-disable-next-line no-console
        console.log('123')
      },
      dd,
      ee,
      ff,
      gg,
    }
    let cloned = clone(a)
    expect(isEqual(cloned, a)).toBeTruthy()
    expect(a === cloned).toBeFalsy()
    expect(a.bb[0] === cloned.bb[0]).toBeFalsy()
    expect(a.dd === cloned.dd).toBeTruthy()
    expect(a.dd.get('aaa') === cloned.dd.get('aaa')).toBeTruthy()
    expect(a.cc === cloned.cc).toBeTruthy()
    expect(a.ee === cloned.ee).toBeTruthy()
    expect(a.ff === cloned.ff).toBeTruthy()
    expect(a.gg === cloned.gg).toBeTruthy()
    expect(
      clone({
        aa: {
          _isAMomentObject: true,
        },
        bb: {
          _isJSONSchemaObject: true,
        },
        cc: {
          $$typeof: true,
          _owner: true,
        },
        dd: {
          _isBigNumber: true,
        },
      })
    ).toEqual({
      aa: {
        _isAMomentObject: true,
      },
      bb: {
        _isJSONSchemaObject: true,
      },
      cc: {
        $$typeof: true,
        _owner: true,
      },
      dd: {
        _isBigNumber: true,
      },
    })
    expect(
      clone({
        toJS() {
          return 123
        },
      })
    ).toEqual(123)
    expect(
      clone({
        toJSON() {
          return 123
        },
      })
    ).toEqual(123)
  })

  test('native clone', () => {
    const map = new Map()
    map.set('key', 123)
    expect(clone(map) === map).toBeTruthy()
    const weakMap = new WeakMap()
    const key = {}
    weakMap.set(key, 123)
    expect(clone(weakMap) === weakMap).toBeTruthy()
    const weakSet = new WeakSet()
    const key2 = {}
    weakMap.set(key2, 123)
    expect(clone(weakSet) === weakSet).toBeTruthy()
    const set = new Set()
    expect(clone(set) === set).toBeTruthy()
    const date = new Date()
    expect(clone(date) === date).toBeTruthy()
    // @ts-ignore
    const file = new File([''], 'filename')
    expect(clone(file) === file).toBeTruthy()
    const url = new URL('https://test.com')
    expect(clone(url) === url).toBeTruthy()
    const regexp = /\d+/
    expect(clone(regexp) === regexp).toBeTruthy()
    const promise = Promise.resolve(1)
    expect(clone(promise) === promise).toBeTruthy()
  })

  test('shallowClone', () => {
    expect(shallowClone({ aa: 123 })).toEqual({ aa: 123 })
    expect(shallowClone([123])).toEqual([123])
    expect(shallowClone(/\d+/)).toEqual(/\d+/)
    expect(shallowClone({ _isAMomentObject: true })).toEqual({
      _isAMomentObject: true,
    })
    expect(
      shallowClone({
        _isBigNumber: true,
      })
    ).toEqual({
      _isBigNumber: true,
    })
    expect(
      shallowClone({
        _isJSONSchemaObject: true,
      })
    ).toEqual({
      _isJSONSchemaObject: true,
    })
    expect(
      shallowClone({
        $$typeof: true,
        _owner: true,
      })
    ).toEqual({
      $$typeof: true,
      _owner: true,
    })
    expect(
      shallowClone({
        toJS() {
          return 123
        },
      }).toJS()
    ).toEqual(123)
    expect(
      shallowClone({
        toJSON() {
          return 123
        },
      }).toJSON()
    ).toEqual(123)
    expect(shallowClone(1)).toEqual(1)
  })
})

describe('deprecate', () => {
  test('deprecate', () => {
    const test = jest.fn(() => {
      console.info('### deprecated function called ###')
    })
    const deprecatedFn = jest.fn(
      deprecate(test, 'Some.Deprecated.Api', 'some deprecated error')
    )

    // arguments - function
    deprecatedFn()
    expect(deprecatedFn).toHaveBeenCalledTimes(1)
    expect(test).toHaveBeenCalledTimes(1)

    // arguments - string
    const testDeprecatedFn = jest.fn(() =>
      deprecate('Some.Deprecated.Api', 'some deprecated error')
    )
    testDeprecatedFn()
    expect(testDeprecatedFn).toHaveBeenCalledTimes(1)

    // arguments - empty string
    const testDeprecatedFn2 = jest.fn(() => deprecate('Some.Deprecated.Api'))
    testDeprecatedFn2()
    expect(testDeprecatedFn2).toHaveBeenCalledTimes(1)
  })
})

describe('isEmpty', () => {
  test('isValid', () => {
    // val - undefined
    expect(isValid(undefined)).toBeFalsy()
    // val - any
    expect(isValid(!undefined)).toBeTruthy()
  })

  test('isEmpty', () => {
    // val - null
    expect(isEmpty(null)).toBeTruthy()

    // val - boolean
    expect(isEmpty(true)).toBeFalsy()

    // val - number
    expect(isEmpty(2422)).toBeFalsy()

    // val - string
    expect(isEmpty('some text')).toBeFalsy()
    expect(isEmpty('')).toBeTruthy()

    // val - function
    const emptyFunc = function () {}
    const nonEmptyFunc = function (payload) {
      console.info(payload)
    }
    expect(isEmpty(emptyFunc)).toBeTruthy()
    expect(isEmpty(nonEmptyFunc)).toBeFalsy()

    // val - arrays
    expect(isEmpty([])).toBeTruthy()
    expect(isEmpty([0])).toBeTruthy()
    expect(isEmpty([''])).toBeTruthy()
    expect(isEmpty([''], true)).toBeFalsy()
    expect(isEmpty([0], true)).toBeFalsy()
    expect(isEmpty([1, 2, 3, 4, 5])).toBeFalsy()
    expect(isEmpty([0, undefined, null, ''])).toBeTruthy()

    // val - errors
    expect(isEmpty(new Error())).toBeTruthy()
    expect(isEmpty(new Error('some error'))).toBeFalsy()

    // val - objects
    // @ts-ignore
    const file = new File(['foo'], 'filename.txt', { type: 'text/plain' })
    // The toString and Object.prototype.toString of the File in the Jest environment are inconsistent
    file.toString = Object.prototype.toString
    expect(isEmpty(file)).toBeFalsy()
    expect(isEmpty(new Map())).toBeTruthy()
    expect(isEmpty(new Map().set('key', 'val'))).toBeFalsy()
    expect(isEmpty(new Set())).toBeTruthy()
    expect(isEmpty(new Set([1, 2]))).toBeFalsy()
    expect(isEmpty({ key: 'val' })).toBeFalsy()
    expect(isEmpty({})).toBeTruthy()

    expect(isEmpty(Symbol())).toBeFalsy()
  })
})

describe('string', () => {
  test('stringLength', () => {
    expect(stringLength('🦄some text')).toEqual(10)
  })
})

describe('shared Subscribable', () => {
  test('Subscribable', () => {
    const cb = jest.fn((payload) => payload)

    // defualt subscribable
    const obj = new Subscribable()
    const handlerIdx = obj.subscribe(cb)
    expect(handlerIdx).toEqual(1)
    obj.notify({ key: 'val' })
    expect(cb).toHaveBeenCalledTimes(1)
    expect(cb).toBeCalledWith({ key: 'val' })

    obj.unsubscribe(handlerIdx)
    obj.notify({ key: 'val' })
    expect(cb).toHaveBeenCalledTimes(1)

    // subscribable with custom filter
    const objWithCustomFilter = new Subscribable()
    const customFilter = (payload) => {
      payload.key2 = 'val2'
      return payload
    }
    objWithCustomFilter.subscription = {
      filter: customFilter,
    }
    objWithCustomFilter.subscribe(cb)
    const handlerIdx2 = objWithCustomFilter.subscribe(cb)
    expect(handlerIdx2).toEqual(2)
    objWithCustomFilter.notify({ key4: 'val4' })
    expect(cb).toHaveBeenCalledTimes(3)
    expect(cb).toBeCalledWith({ key4: 'val4', key2: 'val2' })

    // subscribable with custom notify
    const objWithCustomNotify = new Subscribable()
    const customNotify = jest.fn((payload) => {
      console.info(payload)
      return false
    })
    objWithCustomNotify.subscription = {
      notify: customNotify,
    }
    objWithCustomNotify.subscribe(cb)
    objWithCustomNotify.notify({ key3: 'val3' })
    expect(customNotify).toBeCalledTimes(1)
    objWithCustomNotify.unsubscribe()
  })
})

describe('types', () => {
  test('isFn', () => {
    const normalFunction = function normalFn() {}
    const asyncFunction = async function asyncFn() {}
    const generatorFunction = function* generatorFn() {}
    expect(isFn(() => {})).toBeTruthy()
    expect(isFn(normalFunction)).toBeTruthy()
    expect(isFn(asyncFunction)).toBeTruthy()
    expect(isFn(generatorFunction)).toBeTruthy()
    expect(isFn('')).toBeFalsy()
    expect(isFn(undefined)).toBeFalsy()
    expect(isFn(['🦄'])).toBeFalsy()
  })
  test('isNumberLike', () => {
    expect(isNumberLike(123)).toBeTruthy()
    expect(isNumberLike('123')).toBeTruthy()
    expect(isNumberLike('aa')).toBeFalsy()
  })
  test('isReactElement', () => {
    expect(isReactElement({ $$typeof: true, _owner: true })).toBeTruthy()
  })
  test('isHTMLElement', () => {
    // @ts-ignore
    expect(isHTMLElement(document.createElement('div'))).toBeTruthy()
  })
  test('isMap', () => {
    expect(isMap(new Map())).toBeTruthy()
  })
  test('isSet', () => {
    expect(isSet(new Set())).toBeTruthy()
  })
  test('isWeakMap', () => {
    expect(isWeakMap(new WeakMap())).toBeTruthy()
    expect(isWeakMap(new Map())).toBeFalsy()
  })
  test('isWeakSet', () => {
    expect(isWeakSet(new WeakSet())).toBeTruthy()
    expect(isWeakSet(new Set())).toBeFalsy()
  })
})

describe('merge', () => {
  test('assign', () => {
    const target = {
      aa: {
        bb: {
          cc: {
            dd: 123,
          },
        },
      },
    }
    const source = {
      aa: {
        bb: {
          cc: {
            ee: '1234',
          },
        },
      },
    }

    expect(
      merge(target, source, {
        assign: true,
      })
    ).toEqual({
      aa: {
        bb: {
          cc: {
            dd: 123,
            ee: '1234',
          },
        },
      },
    })
    expect(target).toEqual({
      aa: {
        bb: {
          cc: {
            dd: 123,
            ee: '1234',
          },
        },
      },
    })
    expect(
      merge(
        {
          react: {
            $$typeof: true,
            _owner: true,
            aa: 123,
          },
        },
        {
          react: {
            $$typeof: true,
            _owner: true,
            bb: 321,
          },
        },
        {
          assign: true,
        }
      )
    ).toEqual({
      react: {
        $$typeof: true,
        _owner: true,
        bb: 321,
      },
    })
    expect(
      merge(
        {
          react: {
            _isAMomentObject: true,
            aa: 123,
          },
        },
        {
          react: {
            _isAMomentObject: true,
            bb: 321,
          },
        },
        {
          assign: true,
        }
      )
    ).toEqual({
      react: {
        _isAMomentObject: true,
        bb: 321,
      },
    })
    expect(
      merge(
        {
          react: {
            _isJSONSchemaObject: true,
            aa: 123,
          },
        },
        {
          react: {
            _isJSONSchemaObject: true,
            bb: 321,
          },
        },
        {
          assign: true,
        }
      )
    ).toEqual({
      react: {
        _isJSONSchemaObject: true,
        bb: 321,
      },
    })
    expect(
      merge(
        {
          react: {
            _isBigNumber: true,
            c: [1, 234567890123],
            e: 0,
            s: 1,
          },
        },
        {
          react: {
            _isBigNumber: true,
            c: [2, 345678901234],
            e: 1,
            s: 0,
          },
        },
        {
          assign: true,
        }
      )
    ).toEqual({
      react: {
        _isBigNumber: true,
        c: [2, 345678901234],
        e: 1,
        s: 0,
      },
    })
    const toJSObj = {
      toJS: () => {},
      bb: 321,
    }
    expect(
      merge(
        {
          toJSObj: {
            toJS: () => {},
            aa: 123,
          },
        },
        {
          toJSObj,
        },
        {
          assign: true,
        }
      )
    ).toEqual({
      toJSObj,
    })
    const toJSONObj = {
      toJSON: () => {},
      bb: 321,
    }
    expect(
      merge(
        {
          toJSONObj: {
            toJS: () => {},
            aa: 123,
          },
        },
        {
          toJSONObj,
        },
        {
          assign: true,
        }
      )
    ).toEqual({
      toJSONObj,
    })
  })

  test('empty', () => {
    expect(
      merge(
        {
          aa: undefined,
        },
        {
          aa: {},
        }
      )
    ).toEqual({ aa: {} })
  })

  test('clone', () => {
    const target = {
      aa: {
        bb: {
          cc: {
            dd: 123,
          },
        },
      },
    }
    const source = {
      aa: {
        bb: {
          cc: {
            ee: '1234',
          },
        },
      },
    }

    expect(merge(target, source)).toEqual({
      aa: {
        bb: {
          cc: {
            dd: 123,
            ee: '1234',
          },
        },
      },
    })
    expect(target).toEqual({
      aa: {
        bb: {
          cc: {
            dd: 123,
          },
        },
      },
    })
  })
  test('merge array', () => {
    expect(merge([11, 22], [333])).toEqual([11, 22, 333])
  })
  test('merge custom', () => {
    expect(
      merge(
        { aa: { cc: 123 } },
        { aa: { bb: 321 } },
        {
          customMerge() {
            return (a, b) => ({ ...a, ...b })
          },
        }
      )
    ).toEqual({ aa: { cc: 123, bb: 321 } })
  })
  test('merge symbols', () => {
    const symbol = Symbol('xxx')
    expect(merge({ [symbol]: 123 }, { aa: 321 })).toEqual({
      [symbol]: 123,
      aa: 321,
    })

    const getOwnPropertySymbols = Object.getOwnPropertySymbols
    Object.getOwnPropertySymbols = null
    const mergedObject = merge({ [symbol]: 123 }, { aa: 321 })
    Object.getOwnPropertySymbols = getOwnPropertySymbols

    expect(mergedObject).toEqual({
      aa: 321,
    })
  })
  test('merge unmatch', () => {
    expect(merge({ aa: 123 }, [111])).toEqual([111])
  })

  test('lazy merge', () => {
    const merge1 = lazyMerge<any>(1, 2)
    expect(merge1).toBe(2)
    const merge2 = lazyMerge<any>('123', '321')
    expect(merge2).toBe('321')
    const merge3 = lazyMerge<any>(1, undefined)
    expect(merge3).toBe(1)
    const merge4 = lazyMerge<any>('123', undefined)
    expect(merge4).toBe('123')
    const merge5 = lazyMerge<any>(undefined, '123')
    expect(merge5).toBe('123')
    const merge6 = lazyMerge([1, 2, 3], [3, 4])
    expect(merge6[0]).toBe(3)
    expect(merge6[1]).toBe(4)
    expect(merge6[2]).toBe(3)
    const merge7 = lazyMerge<any>(
      {
        get x() {
          return 'x'
        },
      },
      {
        get y() {
          return 'y'
        },
      }
    )
    expect(merge7.x).toBe('x')
    expect(merge7.y).toBe('y')
    const effects = {
      a: 1,
      b: 2,
    }
    const merge8 = lazyMerge<any>(
      {
        get x() {
          return effects.a
        },
      },
      {
        get y() {
          return effects.b
        },
      }
    )
    expect(merge8.x).toBe(1)
    expect(merge8.y).toBe(2)
    effects.a = 123
    effects.b = 321
    expect(merge8.x).toBe(123)
    expect(merge8.y).toBe(321)
    expect(Object.keys(merge8)).toEqual(['x', 'y'])
    expect('x' in merge8).toBe(true)
    expect('y' in merge8).toBe(true)
    expect('z' in merge8).toBe(false)
    const merge9Source = { a: 1 }
    const merge9Target = { b: 2 }

    const merge9 = lazyMerge<any>(merge9Target, merge9Source)

    merge9.a = 2
    merge9.b = 3
    merge9.c = 4
    expect(merge9Source).toEqual({ a: 2, c: 4 })
    expect(merge9Target).toEqual({ b: 3 })
  })
})

describe('globalThis', () => {
  expect(globalThisPolyfill.requestAnimationFrame).not.toBeUndefined()
})

describe('instanceof', () => {
  test('instOf', () => {
    expect(instOf(123, 123)).toBeFalsy()
    expect(instOf('123', '123')).toBeFalsy()
  })
})

test('defaults', () => {
  const toJSON = () => {}
  const toJS = () => {}
  expect(
    defaults(
      {
        aa: {
          _isAMomentObject: true,
        },
        bb: {
          _isJSONSchemaObject: true,
        },
        cc: {
          $$typeof: true,
          _owner: true,
        },
        dd: {
          toJSON,
        },
        ee: {
          toJS,
        },
        ff: {
          _isBigNumber: true,
          toJSON,
        },
      },
      {
        aa: { value: 111 },
        bb: { value: 222 },
        cc: { value: 333 },
        dd: { value: 444 },
        ee: { value: 555 },
        mm: { value: 123 },
        ff: {
          value: {
            c: [1, 234567890123],
            e: 0,
            s: 1,
          },
        },
      }
    )
  ).toEqual({
    aa: { value: 111 },
    bb: { value: 222 },
    cc: { value: 333 },
    dd: { value: 444 },
    ee: { value: 555 },
    mm: { value: 123 },
    ff: {
      value: {
        c: [1, 234567890123],
        e: 0,
        s: 1,
      },
    },
  })

  expect(defaults([1, 2, 3], [0, undefined])).toEqual([0, 2, 3])

  const defaultDate = new RegExp('')
  // @ts-ignore
  defaultDate._name = 'name'
  const date2 = new RegExp('')
  expect(defaults(defaultDate, date2)._name).toEqual('name')
})

test('applyMiddleware', async () => {
  expect(await applyMiddleware(0)).toEqual(0)
  expect(
    await applyMiddleware(0, [
      (num: number, next) => next(num + 1),
      (num: number, next) => next(num + 1),
      (num: number, next) => next(num + 1),
    ])
  ).toEqual(3)
  expect(
    await applyMiddleware(0, [
      (num: number, next) => next(),
      (num: number, next) => next(num + 1),
      (num: number, next) => next(num + 1),
    ])
  ).toEqual(2)
  const resolved = jest.fn()
  applyMiddleware(0, [
    (num: number, next) => next(num + 1),
    () => '123',
    (num: number, next) => next(num + 1),
  ]).then(resolved)
  await sleep(16)
  expect(resolved).toBeCalledTimes(0)
})

test('applyMiddleware with error', async () => {
  try {
    await applyMiddleware(0, [
      () => {
        throw 'this is error'
      },
    ])
  } catch (e) {
    expect(e).toEqual('this is error')
  }
})

test('move', () => {
  const array1 = [1]
  move(array1, 1, 0)
  expect(array1).toEqual([1])
  move(array1, 0, 1)
  expect(array1).toEqual([1])
  move(array1, -1, 1)
  expect(array1).toEqual([1])
  move(array1, 0, 3)
  expect(array1).toEqual([1])

  const array2 = [0, 1, 2]
  move(array2, 0, 2)
  expect(array2).toEqual([1, 2, 0])
  move(array2, 1, 1)
  expect(array2).toEqual([1, 2, 0])

  const array3 = [0, 1, 2, 3]
  move(array3, 3, 1)
  expect(array3).toEqual([0, 3, 1, 2])
})

```

