feat(core): support field destroy method (#1895)

alibaba · Jul 28, 2021 · 52457e1 · 52457e1
1 parent cc3cb36
commit 52457e1
Show file tree

Hide file tree

Showing 17 changed files with 141 additions and 53 deletions.
diff --git a/designable/antd/package.json b/designable/antd/package.json
@@ -30,7 +30,7 @@
     "start": "webpack-dev-server --config playground/webpack.dev.ts"
   },
   "devDependencies": {
-    "@designable/react-settings-form": "^0.4.17",
+    "@designable/react-settings-form": "^0.4.19",
     "autoprefixer": "^9.0",
     "file-loader": "^5.0.2",
     "fs-extra": "^8.1.0",
@@ -56,9 +56,9 @@
     "react-is": ">=16.8.0 || >=17.0.0"
   },
   "dependencies": {
-    "@designable/core": "^0.4.17",
-    "@designable/formily": "^0.4.17",
-    "@designable/react": "^0.4.17",
+    "@designable/core": "^0.4.19",
+    "@designable/formily": "^0.4.19",
+    "@designable/react": "^0.4.19",
     "@formily/antd": "2.0.0-beta.83",
     "@formily/core": "2.0.0-beta.83",
     "@formily/designable-setters": "2.0.0-beta.83",

diff --git a/designable/antd/playground/template.ejs b/designable/antd/playground/template.ejs
@@ -14,7 +14,7 @@
   <div id="root">
   </div>
   <script src="https://unpkg.com/moment/min/moment-with-locales.js"></script>
-  <script src="https://unpkg.com/react/umd/react.development.js"></script>
-  <script src="https://unpkg.com/react-dom/umd/react-dom.development.js"></script>
-  <script src="https://unpkg.com/antd/dist/antd-with-locales.js"></script>
+  <script src="https://unpkg.com/react/umd/react.production.min.js"></script>
+  <script src="https://unpkg.com/react-dom/umd/react-dom.production.min.js"></script>
+  <script src="https://unpkg.com/antd/dist/antd-with-locales.min.js"></script>
 </body>
diff --git a/designable/setters/package.json b/designable/setters/package.json
@@ -40,10 +40,10 @@
     "react-is": ">=16.8.0 || >=17.0.0"
   },
   "dependencies": {
-    "@designable/core": "^0.4.17",
-    "@designable/formily": "^0.4.17",
-    "@designable/react": "^0.4.17",
-    "@designable/react-settings-form": "^0.4.17",
+    "@designable/core": "^0.4.19",
+    "@designable/formily": "^0.4.19",
+    "@designable/react": "^0.4.19",
+    "@designable/react-settings-form": "^0.4.19",
     "@formily/antd": "2.0.0-beta.83",
     "@formily/core": "2.0.0-beta.83",
     "@formily/react": "2.0.0-beta.83",

diff --git a/devtools/chrome-extension/package.json b/devtools/chrome-extension/package.json
@@ -16,7 +16,7 @@
     "npm": ">=3.0.0"
   },
   "scripts": {
-    "build": "webpack-cli --config config/webpack.prod.ts",
+    "build:devtools": "webpack-cli --config config/webpack.prod.ts",
     "build:zip": "rimraf package.zip && zip -r package.zip package",
     "start": "webpack-dev-server --config config/webpack.dev.ts"
   },

diff --git a/packages/core/docs/api/models/Field.md b/packages/core/docs/api/models/Field.md
@@ -568,6 +568,20 @@ interface dispose {
 }
 ```
 
+### destroy
+
+#### Description
+
+Release observer, and remove current field model
+
+#### Signature
+
+```ts
+interface destroy {
+  (): void
+}
+```
+
 ### match
 
 #### Description

diff --git a/packages/core/docs/api/models/Field.zh-CN.md b/packages/core/docs/api/models/Field.zh-CN.md
@@ -568,6 +568,20 @@ interface dispose {
 }
 ```
 
+### destroy
+
+#### 描述
+
+释放 observer，并删除字段模型
+
+#### 签名
+
+```ts
+interface destroy {
+  (): void
+}
+```
+
 ### match
 
 #### 描述

diff --git a/packages/core/docs/api/models/Form.md b/packages/core/docs/api/models/Form.md
@@ -646,7 +646,7 @@ Clear the field set
 
 ```ts
 interface clearFormGraph {
-  (): void
+  (pattern: FormPathPattern): void
 }
 ```
 

diff --git a/packages/core/docs/api/models/Form.zh-CN.md b/packages/core/docs/api/models/Form.zh-CN.md
@@ -646,7 +646,7 @@ interface setFormGraph {
 
 ```ts
 interface clearFormGraph {
-  (): void
+  (pattern: FormPathPattern): void
 }
 ```
 

diff --git a/packages/core/docs/api/models/VoidField.md b/packages/core/docs/api/models/VoidField.md
@@ -275,6 +275,20 @@ interface dispose {
 }
 ```
 
+### destroy
+
+#### Description
+
+Release observer, and remove current field model
+
+#### Signature
+
+```ts
+interface destroy {
+  (): void
+}
+```
+
 ### match
 
 #### Description

diff --git a/packages/core/docs/api/models/VoidField.zh-CN.md b/packages/core/docs/api/models/VoidField.zh-CN.md
@@ -275,6 +275,20 @@ interface dispose {
 }
 ```
 
+### destroy
+
+#### 描述
+
+释放 observer，并删除字段模型
+
+#### 签名
+
+```ts
+interface destroy {
+  (): void
+}
+```
+
 ### match
 
 #### 描述

diff --git a/packages/core/src/__tests__/graph.spec.ts b/packages/core/src/__tests__/graph.spec.ts
@@ -40,3 +40,25 @@ test('getGraph/setGraph', () => {
   })
   expect(form.query('object').get('value')).toEqual(123)
 })
+
+test('clearFormGraph', () => {
+  const form = attach(createForm())
+  attach(
+    form.createField({
+      name: 'normal',
+    })
+  )
+  attach(
+    form.createArrayField({
+      name: 'array',
+    })
+  )
+  attach(
+    form.createObjectField({
+      name: 'object',
+    })
+  )
+  form.clearFormGraph('normal')
+  expect(form.fields['normal']).toBeUndefined()
+  expect(form.fields['array']).not.toBeUndefined()
+})
diff --git a/packages/core/src/__tests__/void.spec.ts b/packages/core/src/__tests__/void.spec.ts
@@ -1,16 +1,17 @@
 import { createForm } from '../'
 import { attach } from './shared'
 
-test('create object field', () => {
+test('create void field', () => {
   const form = attach(createForm())
-  attach(
+  const field = attach(
     form.createVoidField({
       name: 'void',
     })
   )
+  field.destroy()
 })
 
-test('create field props', () => {
+test('create void field props', () => {
   const form = attach(createForm())
   const field1 = attach(
     form.createVoidField({

diff --git a/packages/core/src/models/Field.ts b/packages/core/src/models/Field.ts
@@ -802,6 +802,11 @@ export class Field<
     this.form.removeEffects(this)
   }
 
+  destroy = () => {
+    this.dispose()
+    delete this.form.fields[this.address.toString()]
+  }
+
   match = (pattern: FormPathPattern) => {
     return FormPath.parse(pattern).matchAliasGroup(this.address, this.path)
   }

diff --git a/packages/core/src/models/Form.ts b/packages/core/src/models/Form.ts
@@ -611,10 +611,9 @@ export class Form<ValueType extends object = any> {
 
   onUnmount = () => {
     this.notify(LifeCycleTypes.ON_FORM_UNMOUNT)
-    this.query('*').forEach((field) => field.dispose())
+    this.query('*').forEach((field) => field.destroy())
     this.disposers.forEach((dispose) => dispose())
     this.unmounted = true
-    this.fields = {}
     this.indexes.clear()
     this.heart.clear()
     if (globalThisPolyfill[DEV_TOOLS_HOOK] && !this.props.designable) {
@@ -642,8 +641,10 @@ export class Form<ValueType extends object = any> {
     this.graph.setGraph(graph)
   }
 
-  clearFormGraph = () => {
-    this.fields = {}
+  clearFormGraph = (pattern: FormPathPattern = '*') => {
+    this.query(pattern).forEach((field) => {
+      field.destroy()
+    })
   }
 
   validate = async (pattern: FormPathPattern = '*') => {

diff --git a/packages/core/src/models/VoidField.ts b/packages/core/src/models/VoidField.ts
@@ -375,6 +375,11 @@ export class VoidField<Decorator = any, Component = any, TextType = any> {
     this.form.removeEffects(this)
   }
 
+  destroy = () => {
+    this.dispose()
+    delete this.form.fields[this.address.toString()]
+  }
+
   match = (pattern: FormPathPattern) => {
     return FormPath.parse(pattern).matchAliasGroup(this.address, this.path)
   }

diff --git a/packages/core/src/shared/internals.ts b/packages/core/src/shared/internals.ts
@@ -378,8 +378,7 @@ export const cleanupArrayChildren = (field: ArrayField, start: number) => {
   batch(() => {
     each(fields, (field, identifier) => {
       if (isArrayChildren(identifier) && isNeedCleanup(identifier)) {
-        field.dispose()
-        delete fields[identifier]
+        field.destroy()
       }
     })
   })
@@ -406,8 +405,7 @@ export const cleanupObjectChildren = (field: ObjectField, keys: string[]) => {
   batch(() => {
     each(fields, (field, identifier) => {
       if (isObjectChildren(identifier) && isNeedCleanup(identifier)) {
-        field.dispose()
-        delete fields[identifier]
+        field.destroy()
       }
     })
   })

diff --git a/yarn.lock b/yarn.lock
@@ -1156,12 +1156,12 @@
   resolved "https://registry.yarnpkg.com/@ctrl/tinycolor/-/tinycolor-3.4.0.tgz#c3c5ae543c897caa9c2a68630bed355be5f9990f"
   integrity sha512-JZButFdZ1+/xAfpguQHoabIXkcqRRKpMrWKBkpEZZyxfY9C1DpADFB8PEqGSTeFr135SaTRfKqGKx5xSCLI7ZQ==
 
-"@designable/[email protected].16", "@designable/core@^0.4.16":
-  version "0.4.16"
-  resolved "https://registry.yarnpkg.com/@designable/core/-/core-0.4.16.tgz#57410357d99f9eb1eede53c3f212d9a014a94dd4"
-  integrity sha512-OP10agFq6D3YnmQhdCdhBJ/PYtfSAX2TUxWmmd8Z0oZKXRR7WGONsT1k/e6zr6K3ZzkTHKtSeLNoSY7+OUflzw==
+"@designable/[email protected].17", "@designable/core@^0.4.17":
+  version "0.4.17"
+  resolved "https://registry.yarnpkg.com/@designable/core/-/core-0.4.17.tgz#9717268d7ef7db56a75324266ddd5a94713e98c1"
+  integrity sha512-mLqPVlFz59s6/1eELV8ohMcl4vGA4OofZZTfSyer69BFABYTCsHGXtc6QQ1KSC+fWpL9t6jIrkw0SDq5R0jJvQ==
   dependencies:
-    "@designable/shared" "0.4.16"
+    "@designable/shared" "0.4.17"
     "@formily/json-schema" "^2.0.0-beta.76"
     "@formily/path" "^2.0.0-beta.76"
     "@formily/reactive" "^2.0.0-beta.76"
@@ -1178,25 +1178,25 @@
     "@formily/reactive" "^2.0.0-beta.50"
     "@juggle/resize-observer" "^3.3.1"
 
-"@designable/formily@^0.4.16":
-  version "0.4.16"
-  resolved "https://registry.yarnpkg.com/@designable/formily/-/formily-0.4.16.tgz#d6c645eec89d46bccd948c3ce34c91fd023927c5"
-  integrity sha512-UdlMMLmn+gI6YS4xqPQO0P6HHlAyio5p779OCh2l6/PB999YHoEdvWNqNAoOx1a6UTpfxc/yhIXCiwxhLybtQg==
+"@designable/formily@^0.4.17":
+  version "0.4.17"
+  resolved "https://registry.yarnpkg.com/@designable/formily/-/formily-0.4.17.tgz#5423790a04b1be793bf9c3b2b7eaf210a6f91713"
+  integrity sha512-26J655BmpYcISBwZE/80RE8HkaS9T/Cwluf7vOKKmr10d/syUvnnRQ/DEvtenJwwQf0L28mWIxQ1LxAamSbkhg==
   dependencies:
-    "@designable/core" "0.4.16"
-    "@designable/shared" "0.4.16"
+    "@designable/core" "0.4.17"
+    "@designable/shared" "0.4.17"
     "@formily/core" "^2.0.0-beta.76"
     "@formily/json-schema" "^2.0.0-beta.76"
 
-"@designable/react-settings-form@^0.4.16":
-  version "0.4.16"
-  resolved "https://registry.yarnpkg.com/@designable/react-settings-form/-/react-settings-form-0.4.16.tgz#edce479b023d7d1932ee9986e1b144eadbe8a779"
-  integrity sha512-Q3L24gpH5aUKg1sLdhSHEjqFxvY3TMracDdUBygM2n6GqLCjxSQFLI6MJhPlNgxIcI8Oe5ecJhBj5bcngMDt1g==
+"@designable/react-settings-form@^0.4.17":
+  version "0.4.17"
+  resolved "https://registry.yarnpkg.com/@designable/react-settings-form/-/react-settings-form-0.4.17.tgz#15925cc6372c4b440f0b300d16b6f0a0f5bbfbc0"
+  integrity sha512-Bkc2ONyjLXxziqo9VN3xCGEAoWsUj1QUvpgdXuBseBijzGOOAEaOrEpoMMAcvt2CQZHjEsJX2M/SdadA5atzFA==
   dependencies:
     "@babel/parser" "^7.14.7"
-    "@designable/core" "0.4.16"
-    "@designable/react" "0.4.16"
-    "@designable/shared" "0.4.16"
+    "@designable/core" "0.4.17"
+    "@designable/react" "0.4.17"
+    "@designable/shared" "0.4.17"
     "@formily/antd" "^2.0.0-beta.76"
     "@formily/core" "^2.0.0-beta.76"
     "@formily/react" "^2.0.0-beta.76"
@@ -1209,13 +1209,13 @@
     react-color "^2.19.3"
     react-tiny-popover "^6.0.5"
 
-"@designable/[email protected].16", "@designable/react@^0.4.16":
-  version "0.4.16"
-  resolved "https://registry.yarnpkg.com/@designable/react/-/react-0.4.16.tgz#84a0553ab0a4056ab74c3f51663b5578e76fccea"
-  integrity sha512-3uCAnyTW90etQ4XsHpz/P7jPCzNXhNy4RxIu2Z2M4bry+nbOTIhMwgC2Q84CKXYGRSShRNfhTGw/gWPSDkOplg==
+"@designable/[email protected].17", "@designable/react@^0.4.17":
+  version "0.4.17"
+  resolved "https://registry.yarnpkg.com/@designable/react/-/react-0.4.17.tgz#d0a7f2a2c6087af38a8109aa22eed73099195498"
+  integrity sha512-as/t+4JTgXzJ/C0HDLBnmj1mIjsya7fFmCRWBDG7TlK6irnze/t7tsVHaxpbgXDn7PKa+Vd1fuD8cz6w5tu6xA==
   dependencies:
-    "@designable/core" "0.4.16"
-    "@designable/shared" "0.4.16"
+    "@designable/core" "0.4.17"
+    "@designable/shared" "0.4.17"
     "@formily/reactive" "^2.0.0-beta.76"
     "@formily/reactive-react" "^2.0.0-beta.76"
     "@juggle/resize-observer" "^3.3.1"
@@ -1227,10 +1227,10 @@
   dependencies:
     requestidlecallback "^0.3.0"
 
-"@designable/[email protected].16":
-  version "0.4.16"
-  resolved "https://registry.yarnpkg.com/@designable/shared/-/shared-0.4.16.tgz#c5b8d65b13d1b919b506a30f15a95a30cfaa1d8a"
-  integrity sha512-lY8HCTwPjuMYZ4/+E1YoLRj6c0w5F8hQrYgr4ToRB/Zkc1JRFqwgu/HFu7Pa49LAvqUQQ1Zv/CaZWqlY24MFkA==
+"@designable/[email protected].17":
+  version "0.4.17"
+  resolved "https://registry.yarnpkg.com/@designable/shared/-/shared-0.4.17.tgz#d2cf5a2bcd6bae39a1b8e154dbd3b9e64eedfd11"
+  integrity sha512-7z+cbCEIbR39CG3FMrAyU63qtRdJkuo8sRCKT1KA4RMisoLCpFNLk5jn1EwDdDvyw+nhA6YTHB+i+1Lqg3js5A==
   dependencies:
     requestidlecallback "^0.3.0"
-Original file line number
+Diff line change
@@ Expand Up / @@ -646,7 +646,7 @@ Clear the field set @@
     ```ts
     interface clearFormGraph {
-      (): void
+      (pattern: FormPathPattern): void
     }
     ```
@@ Expand Down @@