From 6aded636ee818485bac9fd4f41814246b2aeadeb Mon Sep 17 00:00:00 2001 From: Scott Mikula Date: Thu, 7 Jun 2018 15:19:55 -0700 Subject: [PATCH] Update to MobX v4 (#98) This updates Satchel to the latest versions of `mobx` and `mobx-react`. There were a number of breaking API changes, including some (as far as I can tell) undocumented ones in the spying infrastructure. This will be in v4 of Satchel since consumers will be forced to take a new major version of MobX. --- package.json | 8 ++--- src/globalContext.ts | 4 +-- src/index.ts | 2 +- src/legacy/createUndo.ts | 44 ++++++++++++++-------------- src/legacy/select.ts | 2 +- src/useStrict.ts | 5 ++++ test/createStoreTests.ts | 4 +-- test/legacy/createUndoTests.ts | 24 +++++++-------- test/legacy/dispatchTests.ts | 4 +-- test/legacy/promise/endToEndTests.ts | 4 +-- yarn.lock | 25 +++++++++------- 11 files changed, 68 insertions(+), 58 deletions(-) create mode 100644 src/useStrict.ts diff --git a/package.json b/package.json index 6762087..e8ecd0a 100644 --- a/package.json +++ b/package.json @@ -31,8 +31,8 @@ "jasmine": "^2.6.0", "jest": "20.0.4", "lint-staged": "~4.0.1", - "mobx": "~2.6.5", - "mobx-react": "~4.0.3", + "mobx": "^4.3.1", + "mobx-react": "^5.2.0", "npm-run-all": "^4.0.2", "prettier": "~1.5.2", "react": "15.4.2", @@ -45,8 +45,8 @@ "typescript": "~2.4.2" }, "peerDependencies": { - "mobx": "^2.6.5", - "mobx-react": "^4.0.3", + "mobx": "^4.3.1", + "mobx-react": "^5.2.0", "react": ">=15.4.0", "react-dom": ">=15.4.0" }, diff --git a/src/globalContext.ts b/src/globalContext.ts index 8781ccc..d17ee37 100644 --- a/src/globalContext.ts +++ b/src/globalContext.ts @@ -1,4 +1,4 @@ -import { map, ObservableMap } from 'mobx'; +import { observable, ObservableMap } from 'mobx'; import ActionMessage from './interfaces/ActionMessage'; import DispatchFunction from './interfaces/DispatchFunction'; import Subscriber from './interfaces/Subscriber'; @@ -35,7 +35,7 @@ declare var global: { export function __resetGlobalContext() { global.__satchelGlobalContext = { schemaVersion: schemaVersion, - rootStore: map({}), + rootStore: observable.map({}), nextActionId: 0, subscriptions: {}, dispatchWithMiddleware: null, diff --git a/src/index.ts b/src/index.ts index d3f808d..18c434b 100644 --- a/src/index.ts +++ b/src/index.ts @@ -1,4 +1,4 @@ -import { useStrict } from 'mobx'; +import useStrict from './useStrict'; // Current API export { default as ActionCreator } from './interfaces/ActionCreator'; diff --git a/src/legacy/createUndo.ts b/src/legacy/createUndo.ts index c4bebd8..afce726 100644 --- a/src/legacy/createUndo.ts +++ b/src/legacy/createUndo.ts @@ -43,7 +43,7 @@ function spyOnChanges(event: any) { // update (array) undoStep = { verify: () => modifiedObject[event.index] === event.newValue, - objectName: modifiedObject.$mobx.name, + objectName: event.name, propertyName: event.index, undo: () => { modifiedObject[event.index] = event.oldValue; @@ -52,21 +52,21 @@ function spyOnChanges(event: any) { } else if (typeof modifiedObject.get !== 'undefined') { // update (map) undoStep = { - verify: () => modifiedObject.get(event.name) === event.newValue, - objectName: modifiedObject.$mobx.name, - propertyName: event.name, + verify: () => modifiedObject.get(event.key) === event.newValue, + objectName: event.name, + propertyName: event.key, undo: () => { - modifiedObject.set(event.name, event.oldValue); + modifiedObject.set(event.key, event.oldValue); }, }; } else { // update (object) undoStep = { - verify: () => modifiedObject[event.name] === event.newValue, - objectName: modifiedObject.$mobx.name, - propertyName: event.name, + verify: () => modifiedObject[event.key] === event.newValue, + objectName: event.name, + propertyName: event.key, undo: () => { - modifiedObject[event.name] = event.oldValue; + modifiedObject[event.key] = event.oldValue; }, }; } @@ -81,7 +81,7 @@ function spyOnChanges(event: any) { } return true; }, - objectName: modifiedObject.$mobx.name, + objectName: event.name, propertyName: event.index, undo: () => { // First, remove the added items. @@ -97,32 +97,32 @@ function spyOnChanges(event: any) { if (typeof modifiedObject.get !== 'undefined') { // add (map) undoStep = { - verify: () => modifiedObject.get(event.name) === event.newValue, - objectName: modifiedObject.$mobx.name, - propertyName: event.name, + verify: () => modifiedObject.get(event.key) === event.newValue, + objectName: event.name, + propertyName: event.key, undo: () => { - modifiedObject.delete(event.name); + modifiedObject.delete(event.key); }, }; } else { // add (object) undoStep = { - verify: () => modifiedObject[event.name] === event.newValue, - objectName: modifiedObject.$mobx.name, - propertyName: event.name, + verify: () => modifiedObject[event.key] === event.newValue, + objectName: event.name, + propertyName: event.key, undo: () => { - delete modifiedObject[event.name]; + delete modifiedObject[event.key]; }, }; } break; case 'delete': undoStep = { - verify: () => !modifiedObject.has(event.name), - objectName: modifiedObject.$mobx.name, - propertyName: event.name, + verify: () => !modifiedObject.has(event.key), + objectName: event.name, + propertyName: event.key, undo: () => { - modifiedObject.set(event.name, event.oldValue); + modifiedObject.set(event.key, event.oldValue); }, }; break; diff --git a/src/legacy/select.ts b/src/legacy/select.ts index 879c181..76a5fa4 100644 --- a/src/legacy/select.ts +++ b/src/legacy/select.ts @@ -1,4 +1,4 @@ -import { Reaction, Atom, IObservableValue, isObservableArray } from 'mobx'; +import { Reaction, IObservableValue, isObservableArray } from 'mobx'; import { getOriginalTarget, getActionType, setActionType } from './functionInternals'; import { getGlobalContext } from '../globalContext'; diff --git a/src/useStrict.ts b/src/useStrict.ts new file mode 100644 index 0000000..0121d5c --- /dev/null +++ b/src/useStrict.ts @@ -0,0 +1,5 @@ +import { configure } from 'mobx'; + +export default function useStrict(strictMode: boolean) { + configure({ enforceActions: strictMode ? 'strict' : false }); +} diff --git a/test/createStoreTests.ts b/test/createStoreTests.ts index 1b2d6cf..2bbb039 100644 --- a/test/createStoreTests.ts +++ b/test/createStoreTests.ts @@ -13,7 +13,7 @@ describe('createStore', () => { let store = createStore('testStore', initialState)(); // Assert - expect(store).toBe(initialState); - expect(getRootStore().get('testStore')).toBe(initialState); + expect(store).toEqual(initialState); + expect(getRootStore().get('testStore')).toEqual(initialState); }); }); diff --git a/test/legacy/createUndoTests.ts b/test/legacy/createUndoTests.ts index 0a80280..6c1d8da 100644 --- a/test/legacy/createUndoTests.ts +++ b/test/legacy/createUndoTests.ts @@ -1,11 +1,11 @@ import 'jasmine'; import action from '../../src/legacy/action'; import createUndo, { UndoResult } from '../../src/legacy/createUndo'; -import { extendObservable, observable, map, _ } from 'mobx'; +import { extendObservable, observable, _resetGlobalState } from 'mobx'; import { __resetGlobalContext } from '../../src/globalContext'; function resetState() { - _.resetGlobalState(); + _resetGlobalState(); __resetGlobalContext(); } @@ -39,7 +39,7 @@ describe('createUndo', () => { let newValue = 5; let oldValue = 2; - let object = map({ key: oldValue }); + let object = observable.map({ key: oldValue }); let undoableAction = action('updateMap')(() => { object.set(index, newValue); }); @@ -90,7 +90,7 @@ describe('createUndo', () => { let index = 'key'; let newValue = 5; - let object = map({}); + let object = observable.map({}); let undoableAction = action('addMap')(() => { object.set(index, newValue); }); @@ -126,7 +126,7 @@ describe('createUndo', () => { let index = 'key'; let oldValue = 5; - let object = map({ [index]: oldValue }); + let object = observable.map({ [index]: oldValue }); let undoableAction = action('deleteMap')(() => { object.delete(index); }); @@ -168,7 +168,7 @@ describe('createUndo', () => { let newValue = 5; let oldValue = 2; - let object = map({ key: oldValue }); + let object = observable.map({ key: oldValue }); let undoableAction = action('updateMap')(() => { object.set(index, newValue); }); @@ -219,7 +219,7 @@ describe('createUndo', () => { let index = 'key'; let newValue = 5; - let object = map({}); + let object = observable.map({}); let undoableAction = action('addMap')(() => { object.set(index, newValue); }); @@ -255,7 +255,7 @@ describe('createUndo', () => { let index = 'key'; let oldValue = 5; - let object = map({ [index]: oldValue }); + let object = observable.map({ [index]: oldValue }); let undoableAction = action('deleteMap')(() => { object.delete(index); }); @@ -296,7 +296,7 @@ describe('createUndo', () => { let newValue = 5; let oldValue = 2; - let object = map({ key: oldValue }); + let object = observable.map({ key: oldValue }); let undoableAction = action('updateMap')(() => { object.set(index, newValue); }); @@ -344,7 +344,7 @@ describe('createUndo', () => { let index = 'key'; let newValue = 5; - let object = map({}); + let object = observable.map({}); let undoableAction = action('addMap')(() => { object.set(index, newValue); }); @@ -378,7 +378,7 @@ describe('createUndo', () => { let index = 'key'; let oldValue = 5; - let object = map({ [index]: oldValue }); + let object = observable.map({ [index]: oldValue }); let undoableAction = action('deleteMap')(() => { object.delete(index); }); @@ -423,7 +423,7 @@ describe('createUndo', () => { }); it('throws if an undo instance is called twice', () => { - let object = map({ key: 2 }); + let object = observable.map({ key: 2 }); let undoableAction = action('updateMap')(() => { object.set('key', 5); }); diff --git a/test/legacy/dispatchTests.ts b/test/legacy/dispatchTests.ts index d159d58..7634da8 100644 --- a/test/legacy/dispatchTests.ts +++ b/test/legacy/dispatchTests.ts @@ -1,5 +1,5 @@ import 'jasmine'; -import { autorun, _ } from 'mobx'; +import { autorun, _resetGlobalState } from 'mobx'; import getRootStore from '../../src/getRootStore'; import dispatch from '../../src/legacy/dispatch'; @@ -10,7 +10,7 @@ var backupConsoleError = console.error; describe('dispatch', () => { beforeEach(() => { - _.resetGlobalState(); + _resetGlobalState(); __resetGlobalContext(); }); diff --git a/test/legacy/promise/endToEndTests.ts b/test/legacy/promise/endToEndTests.ts index d058ce8..a57daa3 100644 --- a/test/legacy/promise/endToEndTests.ts +++ b/test/legacy/promise/endToEndTests.ts @@ -14,8 +14,8 @@ describe('promiseMiddleware', () => { it('wraps callbacks in promises when applied', done => { // Arrange legacyApplyMiddleware(promiseMiddleware); - let store = createStore('testStore', { testValue: null, currentAction: null })(); - let newValue = {}; + let store = createStore('testStore', { testValue: 1, currentAction: null })(); + let newValue = 2; // Act testAction(store, newValue) diff --git a/yarn.lock b/yarn.lock index d185a08..73d539c 100644 --- a/yarn.lock +++ b/yarn.lock @@ -1061,9 +1061,9 @@ hoek@4.x.x: version "4.2.0" resolved "https://registry.yarnpkg.com/hoek/-/hoek-4.2.0.tgz#72d9d0754f7fe25ca2d01ad8f8f9a9449a89526d" -hoist-non-react-statics@^1.2.0: - version "1.2.0" - resolved "https://registry.yarnpkg.com/hoist-non-react-statics/-/hoist-non-react-statics-1.2.0.tgz#aa448cf0986d55cc40773b17174b7dd066cb7cfb" +hoist-non-react-statics@^2.5.0: + version "2.5.0" + resolved "https://registry.yarnpkg.com/hoist-non-react-statics/-/hoist-non-react-statics-2.5.0.tgz#d2ca2dfc19c5a91c5a6615ce8e564ef0347e2a40" home-or-tmp@^2.0.0: version "2.0.0" @@ -1929,15 +1929,16 @@ mkdirp@^0.5.1: dependencies: minimist "0.0.8" -mobx-react@~4.0.3: - version "4.0.4" - resolved "https://registry.yarnpkg.com/mobx-react/-/mobx-react-4.0.4.tgz#5d979d8b67b7bfd3f093b5b06a50ed5b552c3410" +mobx-react@^5.2.0: + version "5.2.0" + resolved "https://registry.yarnpkg.com/mobx-react/-/mobx-react-5.2.0.tgz#d1fc36d6231a84d0ca54ebeaaa692872859d3629" dependencies: - hoist-non-react-statics "^1.2.0" + hoist-non-react-statics "^2.5.0" + react-lifecycles-compat "^3.0.2" -mobx@~2.6.5: - version "2.6.5" - resolved "https://registry.yarnpkg.com/mobx/-/mobx-2.6.5.tgz#9ea2a7f049c886b943981ea491bfcfba301dec49" +mobx@^4.3.1: + version "4.3.1" + resolved "https://registry.yarnpkg.com/mobx/-/mobx-4.3.1.tgz#334e5aab4916b1d43f0faf3605a64b1b4b3ccb8d" ms@2.0.0: version "2.0.0" @@ -2322,6 +2323,10 @@ react-dom@15.4.2: loose-envify "^1.1.0" object-assign "^4.1.0" +react-lifecycles-compat@^3.0.2: + version "3.0.4" + resolved "https://registry.yarnpkg.com/react-lifecycles-compat/-/react-lifecycles-compat-3.0.4.tgz#4f1a273afdfc8f3488a8c516bfda78f872352362" + react@15.4.2: version "15.4.2" resolved "https://registry.yarnpkg.com/react/-/react-15.4.2.tgz#41f7991b26185392ba9bae96c8889e7e018397ef"