feat(project): remove mobx-react-lite

alibaba · Mar 10, 2021 · 7078616 · 7078616
1 parent 7d24537
commit 7078616
Show file tree

Hide file tree

Showing 27 changed files with 68 additions and 51 deletions.
diff --git a/packages/antd/package.json b/packages/antd/package.json
@@ -31,7 +31,6 @@
     "@types/react": ">=16.8.0 || >=17.0.0",
     "@types/react-dom": ">=16.8.0 || >=17.0.0",
     "antd": "^4.0.0",
-    "mobx": "^6.0.3",
     "react": ">=16.8.0 || >=17.0.0",
     "react-dom": ">=16.8.0"
   },
@@ -41,6 +40,8 @@
     "@formily/core": "^2.0.0-beta.3",
     "@formily/react": "^2.0.0-beta.3",
     "@formily/shared": "^2.0.0-beta.3",
+    "@formily/reactive": "^2.0.0-beta.3",
+    "@formily/reactive-react": "^2.0.0-beta.3",
     "classnames": "^2.2.6",
     "react-sortable-hoc": "^1.11.0",
     "react-sticky-box": "^0.9.3"

diff --git a/packages/antd/src/form-collapse/index.tsx b/packages/antd/src/form-collapse/index.tsx
@@ -1,6 +1,6 @@
 import React, { Fragment, useMemo } from 'react'
 import { Collapse, Badge } from 'antd'
-import { makeAutoObservable } from 'mobx'
+import { createModel } from '@formily/reactive'
 import { CollapseProps, CollapsePanelProps } from 'antd/lib/collapse'
 import {
   useField,
@@ -56,7 +56,7 @@ const usePanels = () => {
 }
 
 const createFormCollapse = (defaultActiveKeys?: ActiveKeys) => {
-  const formCollapse = makeAutoObservable({
+  const formCollapse = createModel({
     activeKeys: defaultActiveKeys || [],
     setActiveKeys(keys: ActiveKeys) {
       formCollapse.activeKeys = keys

diff --git a/packages/antd/src/form-step/index.tsx b/packages/antd/src/form-step/index.tsx
@@ -1,5 +1,5 @@
 import React, { Fragment } from 'react'
-import { makeAutoObservable } from 'mobx'
+import { createModel } from '@formily/reactive'
 import { Steps } from 'antd'
 import cls from 'classnames'
 import { StepsProps, StepProps } from 'antd/lib/steps'
@@ -93,7 +93,7 @@ const createFormStep = (defaultCurrent = 0): IFormStep => {
     }
   }
 
-  const formStep: IFormStep = makeAutoObservable({
+  const formStep: IFormStep = createModel({
     connect(steps, field) {
       env.steps = steps
       env.form = field?.form

diff --git a/packages/antd/src/form-tab/index.tsx b/packages/antd/src/form-tab/index.tsx
@@ -1,6 +1,6 @@
 import React, { Fragment, useMemo } from 'react'
 import { Tabs, Badge } from 'antd'
-import { makeAutoObservable } from 'mobx'
+import { createModel } from '@formily/reactive'
 import { TabPaneProps, TabsProps } from 'antd/lib/tabs'
 import {
   useField,
@@ -51,7 +51,7 @@ const useTabs = () => {
 }
 
 const createFormTab = (defaultActiveKey?: string) => {
-  const formTab = makeAutoObservable({
+  const formTab = createModel({
     activeKey: defaultActiveKey,
     setActiveKey(key: string) {
       formTab.activeKey = key

diff --git a/packages/antd/src/upload/index.tsx b/packages/antd/src/upload/index.tsx
@@ -6,7 +6,7 @@ import {
   UploadProps as AntdUploadProps,
   DraggerProps as AntdDraggerProps,
 } from 'antd/lib/upload'
-import { reaction } from 'mobx'
+import { reaction } from '@formily/reactive'
 import { UploadFile } from 'antd/lib/upload/interface'
 import { isArr, toArr } from '@formily/shared'
 import { UPLOAD_PLACEHOLDER } from './placeholder'

diff --git a/packages/core/package.json b/packages/core/package.json
@@ -29,8 +29,7 @@
     "build:docs": "dumi build"
   },
   "peerDependencies": {
-    "@types/react": ">=16.8.0 || >=17.0.0",
-    "mobx": "^6.0.3"
+    "@types/react": ">=16.8.0 || >=17.0.0"
   },
   "devDependencies": {
     "dumi": "^1.1.0-rc.8"

diff --git a/packages/core/src/models/Field.ts b/packages/core/src/models/Field.ts
@@ -14,7 +14,7 @@ import {
   parseValidatorDescriptions,
 } from '@formily/validator'
 import {
-  define,
+  defineModel,
   observable,
   reaction,
   batch,
@@ -145,7 +145,7 @@ export class Field<
   }
 
   protected makeObservable() {
-    define(this, {
+    defineModel(this, {
       title: observable.ref,
       description: observable.ref,
       dataSource: observable.ref,

diff --git a/packages/core/src/models/Form.ts b/packages/core/src/models/Form.ts
@@ -1,5 +1,5 @@
 import {
-  define,
+  defineModel,
   observable,
   batch,
   toJS,
@@ -120,7 +120,7 @@ export class Form<ValueType extends object = any> {
   }
 
   protected makeObservable() {
-    define(this, {
+    defineModel(this, {
       fields: observable.shallow,
       initialized: observable.ref,
       validating: observable.ref,

diff --git a/packages/core/src/models/Graph.ts b/packages/core/src/models/Graph.ts
@@ -1,4 +1,4 @@
-import { define, batch } from '@formily/reactive'
+import { defineModel, batch } from '@formily/reactive'
 import { each, FormPath } from '@formily/shared'
 import { IFormGraph } from '../types'
 import { Form } from './Form'
@@ -14,7 +14,7 @@ export class Graph {
 
   constructor(form: Form) {
     this.form = form
-    define(this, {
+    defineModel(this, {
       setGraph: batch,
     })
   }

diff --git a/packages/core/src/models/VoidField.ts b/packages/core/src/models/VoidField.ts
@@ -5,7 +5,7 @@ import {
   isValid,
   toArr,
 } from '@formily/shared'
-import { define, observable, autorun, batch } from '@formily/reactive'
+import { defineModel, observable, autorun, batch } from '@formily/reactive'
 import {
   JSXComponent,
   JSXComponenntProps,
@@ -93,7 +93,7 @@ export class VoidField<Decorator = any, Component = any, TextType = any> {
   }
 
   protected makeObservable() {
-    define(this, {
+    defineModel(this, {
       title: observable.ref,
       description: observable.ref,
       selfDisplay: observable.ref,

diff --git a/packages/json-schema/package.json b/packages/json-schema/package.json
@@ -26,12 +26,10 @@
     "build:esm": "tsc --declaration --module es2015 --outDir esm",
     "build:umd": "rollup --config"
   },
-  "peerDependencies": {
-    "mobx": "^6.0.3"
-  },
   "dependencies": {
     "@formily/core": "^2.0.0-beta.3",
-    "@formily/shared": "^2.0.0-beta.3"
+    "@formily/shared": "^2.0.0-beta.3",
+    "@formily/reactive": "^2.0.0-beta.3"
   },
   "publishConfig": {
     "access": "public"

diff --git a/packages/json-schema/src/__tests__/compiler.spec.ts b/packages/json-schema/src/__tests__/compiler.spec.ts
@@ -1,5 +1,5 @@
 import { compile, registerCompiler, shallowCompile } from '../compiler'
-import { makeAutoObservable } from 'mobx'
+import { createModel } from '@formily/reactive'
 import { Schema } from '../schema'
 
 test('compile', () => {
@@ -40,7 +40,7 @@ test('compile', () => {
   const compiledActions = compile(actions)
   expect(compiledActions).toEqual(actions)
   expect(compiledActions['expression']).toEqual('{{123}}')
-  const observable = makeAutoObservable({
+  const observable = createModel({
     aa: 123,
     bb: 321,
     expression: '{{123}}',

diff --git a/packages/json-schema/src/compiler.ts b/packages/json-schema/src/compiler.ts
@@ -1,5 +1,5 @@
 import { isArr, isFn, isPlainObj, isStr, reduce } from '@formily/shared'
-import { isObservable } from 'mobx'
+import { isObservable } from '@formily/reactive'
 import { Schema } from './schema'
 
 const ExpRE = /^\s*\{\{(.*)\}\}\s*$/

diff --git a/packages/json-schema/src/transformer.ts b/packages/json-schema/src/transformer.ts
@@ -1,4 +1,4 @@
-import { runInAction } from 'mobx'
+import { batch } from '@formily/reactive'
 import {
   isBool,
   isArr,
@@ -208,7 +208,7 @@ const getSchemaFieldReactions = (
     compile: (expression: any) => any
   ) => {
     if (!request) return
-    runInAction(() => {
+    batch(() => {
       if (request.state) {
         field.setState((state) => patchState(state, compile(request.state)))
       }

diff --git a/packages/next/package.json b/packages/next/package.json
@@ -27,7 +27,6 @@
     "@alifd/next": "^1.19.0",
     "@types/react": ">=16.8.0 || >=17.0.0",
     "@types/react-dom": ">=16.8.0 || >=17.0.0",
-    "mobx": "^6.0.3",
     "react": ">=16.8.0 || >=17.0.0",
     "react-dom": ">=16.8.0"
   },
@@ -41,6 +40,8 @@
     "@formily/json-schema": "^2.0.0-beta.3",
     "@formily/react": "^2.0.0-beta.3",
     "@formily/shared": "^2.0.0-beta.3",
+    "@formily/reactive": "^2.0.0-beta.3",
+    "@formily/reactive-react": "^2.0.0-beta.3",
     "classnames": "^2.2.6",
     "react-sortable-hoc": "^1.11.0",
     "react-sticky-box": "^0.9.3"

diff --git a/packages/next/src/form-collapse/index.tsx b/packages/next/src/form-collapse/index.tsx
@@ -1,6 +1,6 @@
 import React, { Fragment, useMemo } from 'react'
 import { Collapse, Badge } from '@alifd/next'
-import { makeAutoObservable } from 'mobx'
+import { createModel } from '@formily/reactive'
 import {
   CollapseProps,
   PanelProps as CollapsePanelProps,
@@ -63,7 +63,7 @@ const usePanels = () => {
 }
 
 const createFormCollapse = (defaultActiveKeys?: ActiveKeys) => {
-  const formCollapse = makeAutoObservable({
+  const formCollapse = createModel({
     activeKeys: defaultActiveKeys || [],
     setActiveKeys(keys: ActiveKeys) {
       formCollapse.activeKeys = keys

diff --git a/packages/next/src/form-step/index.tsx b/packages/next/src/form-step/index.tsx
@@ -1,5 +1,5 @@
 import React, { Fragment } from 'react'
-import { makeAutoObservable } from 'mobx'
+import { createModel } from '@formily/reactive'
 import cls from 'classnames'
 import {
   StepProps as StepsProps,
@@ -96,7 +96,7 @@ const createFormStep = (defaultCurrent = 0): IFormStep => {
     }
   }
 
-  const formStep: IFormStep = makeAutoObservable({
+  const formStep: IFormStep = createModel({
     connect(steps, field) {
       env.steps = steps
       env.form = field?.form

diff --git a/packages/next/src/form-tab/index.tsx b/packages/next/src/form-tab/index.tsx
@@ -1,6 +1,6 @@
 import React, { Fragment, useMemo } from 'react'
 import { Tab as Tabs, Badge } from '@alifd/next'
-import { makeAutoObservable } from 'mobx'
+import { createModel } from '@formily/reactive'
 import {
   ItemProps as TabPaneProps,
   TabProps as TabsProps,
@@ -54,7 +54,7 @@ const useTabs = () => {
 }
 
 const createFormTab = (defaultActiveKey?: string) => {
-  const formTab = makeAutoObservable({
+  const formTab = createModel({
     activeKey: defaultActiveKey,
     setActiveKey(key: string) {
       formTab.activeKey = key

diff --git a/packages/next/src/upload/index.tsx b/packages/next/src/upload/index.tsx
@@ -1,6 +1,6 @@
 import React, { useEffect } from 'react'
 import { useField } from '@formily/react'
-import { reaction } from 'mobx'
+import { reaction } from '@formily/reactive'
 import { Upload as NextUpload } from '@alifd/next'
 import { UploadProps, CardProps } from '@alifd/next/lib/upload'
 import { isArr, toArr } from '@formily/shared'

diff --git a/packages/react/package.json b/packages/react/package.json
@@ -31,7 +31,6 @@
   "peerDependencies": {
     "@types/react": ">=16.8.0 || >=17.0.0",
     "@types/react-dom": ">=16.8.0 || >=17.0.0",
-    "mobx": "^6.0.3",
     "react": ">=16.8.0 || >=17.0.0",
     "react-dom": ">=16.8.0 || >=17.0.0"
   },
@@ -43,7 +42,8 @@
     "@formily/json-schema": "^2.0.0-beta.3",
     "@formily/shared": "^2.0.0-beta.3",
     "@formily/validator": "^2.0.0-beta.3",
-    "mobx-react-lite": "^3.1.6",
+    "@formily/reactive": "^2.0.0-beta.3",
+    "@formily/reactive-react": "^2.0.0-beta.3",
     "hoist-non-react-statics": "^3.3.2"
   },
   "publishConfig": {

diff --git a/packages/react/src/components/FormConsumer.tsx b/packages/react/src/components/FormConsumer.tsx
@@ -1,6 +1,6 @@
 import React, { Fragment } from 'react'
 import { isFn } from '@formily/shared'
-import { observer } from 'mobx-react-lite'
+import { observer } from '@formily/reactive-react'
 import { useForm } from '../hooks'
 import { IFormSpyProps } from '../types'
 

diff --git a/packages/react/src/components/ReactiveField.tsx b/packages/react/src/components/ReactiveField.tsx
@@ -1,5 +1,5 @@
 import React, { Fragment } from 'react'
-import { observer } from 'mobx-react-lite'
+import { observer } from '@formily/reactive-react'
 import { isFn } from '@formily/shared'
 import { isVoidField } from '@formily/core'
 interface IReactiveFieldProps {

diff --git a/packages/react/src/shared/connect.ts b/packages/react/src/shared/connect.ts
@@ -1,7 +1,7 @@
 import React from 'react'
 import { isFn, isStr, FormPath, each } from '@formily/shared'
 import { isVoidField } from '@formily/core'
-import { observer } from 'mobx-react-lite'
+import { observer } from '@formily/reactive-react'
 import { JSXComponent, IComponentMapper, IStateMapper } from '../types'
 import { useField } from '../hooks'
 import hoistNonReactStatics from 'hoist-non-react-statics'

diff --git a/packages/reactive-react/package.json b/packages/reactive-react/package.json
@@ -31,7 +31,6 @@
   "peerDependencies": {
     "@types/react": ">=16.8.0 || >=17.0.0",
     "@types/react-dom": ">=16.8.0 || >=17.0.0",
-    "mobx": "^6.0.3",
     "react": ">=16.8.0 || >=17.0.0",
     "react-dom": ">=16.8.0 || >=17.0.0"
   },

diff --git a/packages/reactive/src/__tests__/define.spec.ts b/packages/reactive/src/__tests__/define.spec.ts
@@ -1,4 +1,4 @@
-import { define, observable, autorun } from '..'
+import { defineModel, observable, autorun } from '..'
 import { observe } from '../observe'
 import { FormPath } from '@formily/shared'
 import { batch } from '../batch'
@@ -8,7 +8,7 @@ describe('makeObservable', () => {
     const target: any = {
       aa: {},
     }
-    define(target, {
+    defineModel(target, {
       aa: observable,
     })
     const handler = jest.fn()
@@ -29,7 +29,7 @@ describe('makeObservable', () => {
     const target: any = {
       aa: {},
     }
-    define(target, {
+    defineModel(target, {
       aa: observable.shallow,
     })
     const handler = jest.fn()
@@ -50,7 +50,7 @@ describe('makeObservable', () => {
   })
   test('box annotation', () => {
     const target: any = {}
-    define(target, {
+    defineModel(target, {
       aa: observable.box,
     })
     const handler = jest.fn()
@@ -68,7 +68,7 @@ describe('makeObservable', () => {
   })
   test('ref annotation', () => {
     const target: any = {}
-    define(target, {
+    defineModel(target, {
       aa: observable.ref,
     })
     const handler = jest.fn()
@@ -92,7 +92,7 @@ describe('makeObservable', () => {
         target.aa.cc = 312
       },
     }
-    define(target, {
+    defineModel(target, {
       aa: observable,
       setData: batch,
     })
@@ -113,7 +113,7 @@ describe('makeObservable', () => {
         return this.aa + this.bb
       },
     }
-    define(target, {
+    defineModel(target, {
       aa: observable,
       bb: observable,
       cc: observable.computed,

diff --git a/packages/reactive/src/index.ts b/packages/reactive/src/index.ts
@@ -1,6 +1,6 @@
 export * from './batch'
 export * from './observable'
-export * from './define'
+export * from './model'
 export * from './autorun'
 export * from './tracker'
 export * from './observe'