feat(vue): add injectionCleaner to FormProvider (#2449)

packages/vue/src/__tests__/form.spec.ts

@@ -1,5 +1,5 @@
 import Vue from 'vue'
-import { render } from '@testing-library/vue'
+import { render, fireEvent } from '@testing-library/vue'
 import { createForm } from '@formily/core'
 import {
   FormProvider,
@@ -9,7 +9,7 @@ import {
   VoidField,
 } from '../vue2-components'
 import { defineComponent } from 'vue-demi'
-import { useParentForm } from '../hooks'
+import { useParentForm, useField } from '../hooks'
 import { h } from 'vue-demi'
 
 Vue.component('FormProvider', FormProvider)
@@ -18,6 +18,28 @@ Vue.component('ObjectField', ObjectField)
 Vue.component('VoidField', VoidField)
 Vue.component('Field', Field)
 
+const Input = defineComponent({
+  props: ['value'],
+  setup(props, { attrs, listeners }) {
+    const fieldRef = useField()
+    return () => {
+      const field = fieldRef.value
+      return h('input', {
+        class: 'test-input',
+        attrs: {
+          ...attrs,
+          value: props.value,
+          'data-testid': field.path.toString(),
+        },
+        on: {
+          ...listeners,
+          input: listeners.change,
+        },
+      })
+    }
+  },
+})
+
 test('render form', () => {
   const form = createForm()
   render({
@@ -72,3 +94,34 @@ test('useParentForm', () => {
   expect(queryByTestId('222').textContent).toBe('Form')
   expect(queryByTestId('333').textContent).toBe('Form')
 })
+
+test('useInjectionCleaner', async () => {
+  const form = createForm()
+
+  const { getByTestId } = render(
+    defineComponent({
+      name: 'TestComponent',
+      setup() {
+        return {
+          form,
+          Input,
+        }
+      },
+      template: `<FormProvider :form="form">
+        <Field name="parent">
+          <FormProvider :form="form">
+            <Field name="inner" :component="[Input]" />
+          </FormProvider>
+          <Field name="outer" :component="[Input]" />
+        </Field>
+      </FormProvider>`,
+    })
+  )
+  expect(form.mounted).toBeTruthy()
+  expect(form.query('inner').take().mounted).toBeTruthy()
+  expect(form.query('parent.outer').take().mounted).toBeTruthy()
+  await fireEvent.update(getByTestId('parent.outer'), '123')
+  expect(form.getValuesIn('parent.outer')).toBe('123')
+  await fireEvent.update(getByTestId('inner'), '123')
+  expect(form.getValuesIn('inner')).toBe('123')
+})

packages/vue/src/components/FormProvider.ts

@@ -1,7 +1,15 @@
 import { provide, defineComponent, watch } from 'vue-demi'
-import { FormSymbol } from '../shared/context'
+import {
+  FormSymbol,
+  FieldSymbol,
+  SchemaMarkupSymbol,
+  SchemaSymbol,
+  SchemaExpressionScopeSymbol,
+  SchemaOptionsSymbol,
+} from '../shared/context'
 import { IProviderProps } from '../types'
 import { useAttach } from '../hooks/useAttach'
+import { useInjectionCleaner } from '../hooks/useInjectionCleaner'
 import h from '../shared/h'
 import { Fragment } from '../shared/fragment'
 
@@ -25,6 +33,13 @@ export default defineComponent<IProviderProps>({
     )
 
     provide(FormSymbol, formRef)
+    useInjectionCleaner([
+      FieldSymbol,
+      SchemaMarkupSymbol,
+      SchemaSymbol,
+      SchemaExpressionScopeSymbol,
+      SchemaOptionsSymbol,
+    ])
 
     return () => h(Fragment, { attrs }, slots)
   },

packages/vue/src/hooks/useInjectionCleaner.ts

@@ -0,0 +1,7 @@
+import { InjectionKey, provide, Ref, ref } from 'vue-demi'
+
+export const useInjectionCleaner = (
+  injectionKeys: InjectionKey<Ref<unknown>>[]
+) => {
+  injectionKeys.forEach((key) => provide(key, ref()))
+}