feat(@uform/react): Optimize package size and fixing onFieldChange initialization trigger twice

Author: janryWang

packages/core/src/form.js

@@ -22,8 +22,9 @@ import {
 } from './utils'
 import { Field } from './field'
 import { runValidation, format } from '@uform/validator'
-import { Subject } from 'rxjs'
-import { filter } from 'rxjs/operators'
+import { Subject } from 'rxjs/internal/Subject'
+import { filter } from 'rxjs/internal/operators/filter'
+import { debounceTime } from 'rxjs/internal/operators/debounceTime'
 import { FormPath } from './path'
 
 const defaults = opts => ({
@@ -98,6 +99,9 @@ export class Form {
           if (!this.subscribes[eventName]) {
             this.subscribes[eventName] = new Subject()
           }
+          this.subscribes[eventName] = this.subscribes[eventName].pipe(
+            debounceTime(0)
+          )
           if (isStr($filter) || isFn($filter)) {
             return this.subscribes[eventName].pipe(
               filter(isStr($filter) ? FormPath.match($filter) : $filter)

packages/react/package.json

@@ -24,7 +24,8 @@
     "@uform/utils": "0.1.3",
     "@uform/validator": "0.1.3",
     "pascal-case": "^2.0.1",
-    "react-eva": "^1.0.0"
+    "react-eva": "^1.0.0",
+    "rxjs-compat": "^6.5.1"
   },
   "publishConfig": {
     "access": "public"

packages/react/src/__tests__/effects.spec.js

@@ -74,6 +74,28 @@ test('onFormInit setFieldState', async () => {
   expect(queryByText('field is required')).toBeNull()
 })
 
+test('init triggers', async () => {
+  const callback = jest.fn()
+  const TestComponent = () => {
+    return (
+      <SchemaForm
+        effects={($, { setFieldState }) => {
+          $('onFieldChange', 'aaa').subscribe(callback)
+        }}
+      >
+        <Field name='aaa' type='string' />
+        <button type='submit' data-testid='btn'>
+          Submit
+        </button>
+      </SchemaForm>
+    )
+  }
+
+  render(<TestComponent />)
+  await sleep(33)
+  expect(callback).toHaveBeenCalledTimes(1)
+})
+
 test('onFieldChange will trigger with initialValues', async () => {
   const callback = jest.fn()
   const TestComponent = () => {
@@ -104,8 +126,7 @@ test('onFieldChange will trigger with initialValues', async () => {
 
   render(<TestComponent />)
   await sleep(33)
-  expect(callback).toHaveBeenCalledTimes(3)
+  expect(callback).toHaveBeenCalledTimes(2)
   expect(callback.mock.calls[0][0].value).toBe(undefined)
-  expect(callback.mock.calls[1][0].value).toBe(undefined)
-  expect(callback.mock.calls[2][0].value).toBe(123)
+  expect(callback.mock.calls[1][0].value).toBe(123)
 })