WIP: Mobx4

CHANGELOG.md

@@ -1,3 +1,23 @@
+# 4.0.0
+
+## Breaking changes
+
+* The `extras.` namespace has been dropped to enable tree-shaking non-used MobX features. All methods that where there originally are now exported at top level. If they are part of the official public API (you are encouraged to use them) they are exported as is. If they are experimental or somehow internal (you are discouraged to use them), they are prefixed with `_`.
+* If there are multiple mobx instances active in a single project, an exception will be thrown. Previously only a warning was printed. Fixes #1098. For details, see [#1082](https://github.com/mobxjs/mobx/issues/1082).
+* Dropped the `shareGlobalState` feature. Instead, projects should be setup properly and it is up to the hosting package to make sure that there is only one MobX instance
+* Dropped bower support. Fixes #1263
+* The `spyReportStart`, `spyReportEnd`, `spyReport` and `isSpyEnabled` are no longer public. It is no longer possible to emit custom spy events as to avoid confusing in listeners what the possible set of events is.
+* Dropped `isStrictModeEnabled`
+* `observable(value)` will only succeed if it can turn the value into an observable data structure (a Map, Array or observable object). But it will no longer create an observable box for other values to avoid confusion. Call `observable.box(value)`  explictly in such cases.
+* `isComputed` and `isObservable` no longer accept a property as second argument. Instead use `isComputedProp` and `isObservableProp`.
+* Removed `whyRun`, use `trace` instead
+
+## Non breaking changes
+
+* Dropped already deprecated and broken `default` export that made it impossible to tree-shake mobx. Make sure you always use `import { x } from "mobx"` and not `import x from "mobx"`
+* Dropped already deprecated toplevel `map` function
+* Killed the already deprecated modifiers `asFlat` etc. If you war still using this, see the MobX 2 -> 3 migration notes.
+
 # 3.5.0/1
 
 * Introduced `trace` for easier debugging of reactions / computed values. See the [docs](https://mobx.js.org/best/trace.html) for details.

README.md

@@ -300,21 +300,14 @@ And finally kudos for all the people that believed in, tried, validated and even
 * Use `npm test` to run the basic test suite, `npm run coverage` for the test suite with coverage and `npm run perf` for the performance tests.
 
 ## Flow support
-MobX ships with [flow typings](flow-typed/mobx.js). Flow will automatically include them when you import mobx modules. Although you **do not** need to import the types explicitly, you can still do it like this: `import type { ... } from 'mobx'`. 
+MobX ships with [flow typings](flow-typed/mobx.js). Flow will automatically include them when you import mobx modules. Although you **do not** need to import the types explicitly, you can still do it like this: `import type { ... } from 'mobx'`.
 
 To use the [flow typings](flow-typed/mobx.js) shipped with MobX:
 
 * In `.flowconfig`, you **cannot** ignore `node_modules`.
 * In `.flowconfig`, you **cannot** import it explicitly in the `[libs]` section.
 * You **do not** need to install library definition using [flow-typed](https://github.com/flowtype/flow-typed).
 
-## Bower support
-
-Bower support is available through the infamous unpkg.com:
-`bower install https://unpkg.com/mobx/bower.zip`
-
-Then use `lib/mobx.umd.js` or `lib/mobx.umd.min.js`
-
 ## MobX was formerly known as Mobservable.
 
 See the [changelog](https://github.com/mobxjs/mobx/blob/master/CHANGELOG.md#200) for all the details about `mobservable` to `mobx`.

package.json

@@ -36,8 +36,7 @@
   },
   "files": [
     "lib",
-    "LICENSE",
-    "bower.json"
+    "LICENSE"
   ],
   "homepage": "https://mobx.js.org/",
   "devDependencies": {

src/api/iscomputed.ts

@@ -1,8 +1,9 @@
 import { isObservableObject } from "../types/observableobject"
 import { getAtom } from "../types/type-utils"
 import { isComputedValue } from "../core/computedvalue"
+import { fail } from "../utils/utils"
 
-export function isComputed(value, property?: string): boolean {
+export function _isComputed(value, property?: string): boolean {
     if (value === null || value === undefined) return false
     if (property !== undefined) {
         if (isObservableObject(value) === false) return false
@@ -12,3 +13,17 @@ export function isComputed(value, property?: string): boolean {
     }
     return isComputedValue(value)
 }
+
+export function isComputed(value: any): boolean {
+    if (arguments.length > 1)
+        return fail(
+            `isComputed expects only 1 argument. Use isObsevableProp to inspect the observability of a property`
+        )
+    return _isComputed(value)
+}
+
+export function isComputedProp(value: any, propName: string): boolean {
+    if (typeof propName !== "string")
+        return fail(`isComputed expected a property name as second argument`)
+    return _isComputed(value, propName)
+}

src/api/isobservable.ts

@@ -5,13 +5,9 @@ import { isAtom } from "../core/atom"
 import { isComputedValue } from "../core/computedvalue"
 import { isReaction } from "../core/reaction"
 import { getMessage } from "../utils/messages"
+import { fail } from "../utils/utils"
 
-/**
- * Returns true if the provided value is reactive.
- * @param value object, function or array
- * @param property if property is specified, checks whether value.property is reactive.
- */
-export function isObservable(value, property?: string): boolean {
+function _isObservable(value, property?: string): boolean {
     if (value === null || value === undefined) return false
     if (property !== undefined) {
         if (isObservableArray(value) || isObservableMap(value)) throw new Error(getMessage("m019"))
@@ -30,3 +26,16 @@ export function isObservable(value, property?: string): boolean {
         isComputedValue(value)
     )
 }
+
+export function isObservable(value: any): boolean {
+    if (arguments.length > 1)
+        return fail(
+            `isObservable expects only 1 argument. Use isObsevableProp to inspect the observability of a property`
+        )
+    return _isObservable(value)
+}
+
+export function isObservableProp(value: any, propName: string): boolean {
+    if (typeof propName !== "string") return fail(`expected a property name as second argument`)
+    return _isObservable(value, propName)
+}

src/api/observable.ts

@@ -45,27 +45,18 @@ function createObservable(v: any = undefined) {
     if (res !== v) return res
 
     // otherwise, just box it
-    return observable.box(v)
+    fail(
+        `The provided value could not be converted into an observable. If you want just create an observable reference to the object use 'observable.box(value)'`
+    )
 }
 
 export interface IObservableFactory {
     // observable overloads
-    <T>(): IObservableValue<T>
     <T>(wrapped: IModifierDescriptor<T>): T
     (target: Object, key: string, baseDescriptor?: PropertyDescriptor): any
     <T>(value: T[]): IObservableArray<T>
-    (value: string): IObservableValue<string>
-    (value: boolean): IObservableValue<boolean>
-    (value: number): IObservableValue<number>
-    (value: Date): IObservableValue<Date>
-    (value: RegExp): IObservableValue<RegExp>
-    (value: Function): IObservableValue<Function>
-    <T>(value: null | undefined): IObservableValue<T>
-    (value: null | undefined): IObservableValue<any>
-    (): IObservableValue<any>
     <T>(value: IMap<string | number | boolean, T>): ObservableMap<T>
     <T extends Object>(value: T): T & IObservableObject
-    <T>(value: T): IObservableValue<T>
 }
 
 export interface IObservableFactories {
@@ -82,7 +73,7 @@ export interface IObservableFactories {
      * Decorator that creates an observable that only observes the references, but doesn't try to turn the assigned value into an observable.ts.
      */
     ref(target: Object, property: string, descriptor?: PropertyDescriptor): any
-    ref<T>(initialValue: T): T;
+    ref<T>(initialValue: T): T
 
     /**
      * Decorator that creates an observable converts its value (objects, maps or arrays) into a shallow observable structure

src/api/whyrun.ts → src/api/trace.ts

@@ -1,24 +1,8 @@
 import { globalState } from "../core/globalstate"
-import { isComputedValue } from "../core/computedvalue"
-import { isReaction } from "../core/reaction"
 import { getAtom } from "../types/type-utils"
-import { fail, deprecated } from "../utils/utils"
-import { getMessage } from "../utils/messages"
+import { fail } from "../utils/utils"
 import { TraceMode } from "../core/derivation"
 
-function log(msg: string): string {
-    console.log(msg)
-    return msg
-}
-
-export function whyRun(thing?: any, prop?: string) {
-    deprecated("`whyRun` is deprecated in favor of `trace`")
-    thing = getAtomFromArgs(arguments)
-    if (!thing) return log(getMessage("m024"))
-    if (isComputedValue(thing) || isReaction(thing)) return log(thing.whyRun())
-    return fail(getMessage("m025"))
-}
-
 export function trace(thing?: any, prop?: string, enterBreakPoint?: boolean): void
 export function trace(thing?: any, enterBreakPoint?: boolean): void
 export function trace(enterBreakPoint?: boolean): void

src/core/computedvalue.ts

@@ -27,7 +27,6 @@ import {
     invariant,
     Lambda,
     unique,
-    joinStrings,
     primitiveSymbol,
     toPrimitive
 } from "../utils/utils"
@@ -78,6 +77,7 @@ export class ComputedValue<T> implements IObservable, IComputedValue<T>, IDeriva
     __mapid = "#" + getNextId()
     protected value: T | undefined | CaughtException = new CaughtException(null)
     name: string
+    triggeredBy: string
     isComputing: boolean = false // to check for cycles
     isRunningSetter: boolean = false
     setter: (value: T) => void
@@ -242,36 +242,6 @@ export class ComputedValue<T> implements IObservable, IComputedValue<T>, IDeriva
     valueOf(): T {
         return toPrimitive(this.get())
     }
-
-    whyRun() {
-        const isTracking = Boolean(globalState.trackingDerivation)
-        const observing = unique(this.isComputing ? this.newObserving! : this.observing).map(
-            (dep: any) => dep.name
-        )
-        const observers = unique(getObservers(this).map(dep => dep.name))
-        return (
-            `
-WhyRun? computation '${this.name}':
- * Running because: ${isTracking
-     ? "[active] the value of this computation is needed by a reaction"
-     : this.isComputing
-       ? "[get] The value of this computed was requested outside a reaction"
-       : "[idle] not running at the moment"}
-` +
-            (this.dependenciesState === IDerivationState.NOT_TRACKING
-                ? getMessage("m032")
-                : ` * This computation will re-run if any of the following observables changes:
-    ${joinStrings(observing)}
-    ${this.isComputing && isTracking
-        ? " (... or any observable accessed during the remainder of the current run)"
-        : ""}
-    ${getMessage("m038")}
-
-  * If the outcome of this computation changes, the following observers will be re-run:
-    ${joinStrings(observers)}
-`)
-        )
-    }
 }
 
 ComputedValue.prototype[primitiveSymbol()] = ComputedValue.prototype.valueOf

src/core/derivation.ts

@@ -49,7 +49,7 @@ export interface IDerivation extends IDepTreeNode {
      */
     unboundDepsCount: number
     __mapid: string
-    onBecomeStale()
+    onBecomeStale(): void
     isTracing: TraceMode
 }
 
@@ -59,7 +59,7 @@ export class CaughtException {
     }
 }
 
-export function isCaughtException(e): e is CaughtException {
+export function isCaughtException(e: any): e is CaughtException {
     return e instanceof CaughtException
 }
 
@@ -128,7 +128,7 @@ export function checkIfStateModificationsAreAllowed(atom: IAtom) {
  * The tracking information is stored on the `derivation` object and the derivation is registered
  * as observer of any of the accessed observables.
  */
-export function trackDerivedFunction<T>(derivation: IDerivation, f: () => T, context) {
+export function trackDerivedFunction<T>(derivation: IDerivation, f: () => T, context: any) {
     // pre allocate array allocation + room for variation in deps
     // array will be trimmed by bindDependencies
     changeDependenciesStateTo0(derivation)
@@ -155,7 +155,7 @@ export function trackDerivedFunction<T>(derivation: IDerivation, f: () => T, con
  */
 function bindDependencies(derivation: IDerivation) {
     // invariant(derivation.dependenciesState !== IDerivationState.NOT_TRACKING, "INTERNAL ERROR bindDependencies expects derivation.dependenciesState !== -1");
-
+    derivation.triggeredBy = ""
     const prevObserving = derivation.observing
     const observing = (derivation.observing = derivation.newObserving!)
     let lowestNewObservingDerivationState = IDerivationState.UP_TO_DATE

src/core/globalstate.ts

@@ -1,4 +1,4 @@
-import { getGlobal, deprecated } from "../utils/utils"
+import { getGlobal, deprecated, fail } from "../utils/utils"
 import { IDerivation } from "./derivation"
 import { Reaction } from "./reaction"
 import { IObservable } from "./observable"
@@ -88,9 +88,7 @@ export class MobXGlobals {
 
 export let globalState: MobXGlobals = new MobXGlobals()
 
-let shareGlobalStateCalled = false
 let runInIsolationCalled = false
-let warnedAboutMultipleInstances = false
 
 {
     const global = getGlobal()
@@ -99,10 +97,9 @@ let warnedAboutMultipleInstances = false
     } else {
         global.__mobxInstanceCount++
         setTimeout(() => {
-            if (!shareGlobalStateCalled && !runInIsolationCalled && !warnedAboutMultipleInstances) {
-                warnedAboutMultipleInstances = true
-                console.warn(
-                    "[mobx] Warning: there are multiple mobx instances active. This might lead to unexpected results. See https://github.com/mobxjs/mobx/issues/1082 for details."
+            if (!runInIsolationCalled) {
+                fail(
+                    "There are multiple mobx instances active. This might lead to unexpected results. See https://github.com/mobxjs/mobx/issues/1082 for details."
                 )
             }
         })
@@ -114,34 +111,10 @@ export function isolateGlobalState() {
     getGlobal().__mobxInstanceCount--
 }
 
-export function shareGlobalState() {
-    // TODO: remove in 4.0; just use peer dependencies instead.
-    deprecated(
-        "Using `shareGlobalState` is not recommended, use peer dependencies instead. See https://github.com/mobxjs/mobx/issues/1082 for details."
-    )
-    shareGlobalStateCalled = true
-    const global = getGlobal()
-    const ownState = globalState
-
-    /**
-     * Backward compatibility check
-     */
-    if (global.__mobservableTrackingStack || global.__mobservableViewStack)
-        throw new Error("[mobx] An incompatible version of mobservable is already loaded.")
-    if (global.__mobxGlobal && global.__mobxGlobal.version !== ownState.version)
-        throw new Error("[mobx] An incompatible version of mobx is already loaded.")
-    if (global.__mobxGlobal) globalState = global.__mobxGlobal
-    else global.__mobxGlobal = ownState
-}
-
 export function getGlobalState(): any {
     return globalState
 }
 
-export function registerGlobals() {
-    // no-op to make explicit why this file is loaded
-}
-
 /**
  * For testing purposes only; this will break the internal state of existing observables,
  * but can be used to get back at a stable state after throwing errors

src/core/observable.ts

@@ -26,7 +26,7 @@ export interface IObservable extends IDepTreeNode {
     observers: IDerivation[] // maintain _observers in raw array for for way faster iterating in propagation.
     observersIndexes: {} // map derivation.__mapid to _observers.indexOf(derivation) (see removeObserver)
 
-    onBecomeUnobserved()
+    onBecomeUnobserved(): void
 }
 
 export function hasObservers(observable: IObservable): boolean {
@@ -157,7 +157,7 @@ export function reportObserved(observable: IObservable) {
     }
 }
 
-function invariantLOS(observable: IObservable, msg) {
+function invariantLOS(observable: IObservable, msg: string) {
     // it's expensive so better not run it in produciton. but temporarily helpful for testing
     const min = getObservers(observable).reduce((a, b) => Math.min(a, b.dependenciesState), 2)
     if (min >= observable.lowestObserverState) return // <- the only assumption about `lowestObserverState`