mobx 6.10.2 → 6.11.0

package/src/api/computed.ts

@@ -10,19 +10,22 @@ import {
     die,
     IComputedValue,
     createComputedAnnotation,
-    comparer
+    comparer,
+    is20223Decorator
 } from "../internal"
 
+import type { ClassGetterDecorator } from "../types/decorator_fills"
+
 export const COMPUTED = "computed"
 export const COMPUTED_STRUCT = "computed.struct"
 
-export interface IComputedFactory extends Annotation, PropertyDecorator {
+export interface IComputedFactory extends Annotation, PropertyDecorator, ClassGetterDecorator {
     // @computed(opts)
-    <T>(options: IComputedValueOptions<T>): Annotation & PropertyDecorator
+    <T>(options: IComputedValueOptions<T>): Annotation & PropertyDecorator & ClassGetterDecorator
     // computed(fn, opts)
     <T>(func: () => T, options?: IComputedValueOptions<T>): IComputedValue<T>
 
-    struct: Annotation & PropertyDecorator
+    struct: Annotation & PropertyDecorator & ClassGetterDecorator
 }
 
 const computedAnnotation = createComputedAnnotation(COMPUTED)
@@ -35,6 +38,10 @@ const computedStructAnnotation = createComputedAnnotation(COMPUTED_STRUCT, {
  * For legacy purposes also invokable as ES5 observable created: `computed(() => expr)`;
  */
 export const computed: IComputedFactory = function computed(arg1, arg2) {
+    if (is20223Decorator(arg2)) {
+        // @computed (2022.3 Decorators)
+        return computedAnnotation.decorate_20223_(arg1, arg2)
+    }
     if (isStringish(arg2)) {
         // @computed
         return storeAnnotation(arg1, arg2, computedAnnotation)

package/src/api/decorators.ts

@@ -1,5 +1,7 @@
 import { Annotation, addHiddenProp, AnnotationsMap, hasProp, die, isOverride } from "../internal"
 
+import type { Decorator } from "../types/decorator_fills"
+
 export const storedAnnotationsSymbol = Symbol("mobx-stored-annotations")
 
 /**
@@ -7,11 +9,17 @@ export const storedAnnotationsSymbol = Symbol("mobx-stored-annotations")
  * - decorator
  * - annotation object
  */
-export function createDecoratorAnnotation(annotation: Annotation): PropertyDecorator & Annotation {
+export function createDecoratorAnnotation<D extends Decorator = Decorator>(
+    annotation: Annotation
+): PropertyDecorator & Annotation & D {
     function decorator(target, property) {
-        storeAnnotation(target, property, annotation)
+        if (is20223Decorator(property)) {
+            return annotation.decorate_20223_(target, property)
+        } else {
+            storeAnnotation(target, property, annotation)
+        }
     }
-    return Object.assign(decorator, annotation)
+    return Object.assign(decorator, annotation) as any
 }
 
 /**
@@ -61,13 +69,30 @@ function assertNotDecorated(prototype: object, annotation: Annotation, key: Prop
  */
 export function collectStoredAnnotations(target): AnnotationsMap<any, any> {
     if (!hasProp(target, storedAnnotationsSymbol)) {
-        if (__DEV__ && !target[storedAnnotationsSymbol]) {
-            die(
-                `No annotations were passed to makeObservable, but no decorated members have been found either`
-            )
-        }
+        // if (__DEV__ && !target[storedAnnotationsSymbol]) {
+        //     die(
+        //         `No annotations were passed to makeObservable, but no decorated members have been found either`
+        //     )
+        // }
         // We need a copy as we will remove annotation from the list once it's applied.
         addHiddenProp(target, storedAnnotationsSymbol, { ...target[storedAnnotationsSymbol] })
     }
     return target[storedAnnotationsSymbol]
 }
+
+export function is20223Decorator(context): context is DecoratorContext {
+    return typeof context == "object" && typeof context["kind"] == "string"
+}
+
+export function assert20223DecoratorType(
+    context: DecoratorContext,
+    types: DecoratorContext["kind"][]
+) {
+    if (__DEV__ && !types.includes(context.kind)) {
+        die(
+            `The decorator applied to '${String(context.name)}' cannot be used on a ${
+                context.kind
+            } element`
+        )
+    }
+}

package/src/api/flow.ts

@@ -7,9 +7,12 @@ import {
     isStringish,
     storeAnnotation,
     createFlowAnnotation,
-    createDecoratorAnnotation
+    createDecoratorAnnotation,
+    is20223Decorator
 } from "../internal"
 
+import type { ClassMethodDecorator } from "../types/decorator_fills"
+
 export const FLOW = "flow"
 
 let generatorId = 0
@@ -25,11 +28,11 @@ export function isFlowCancellationError(error: Error) {
 
 export type CancellablePromise<T> = Promise<T> & { cancel(): void }
 
-interface Flow extends Annotation, PropertyDecorator {
+interface Flow extends Annotation, PropertyDecorator, ClassMethodDecorator {
     <R, Args extends any[]>(
         generator: (...args: Args) => Generator<any, R, any> | AsyncGenerator<any, R, any>
     ): (...args: Args) => CancellablePromise<R>
-    bound: Annotation & PropertyDecorator
+    bound: Annotation & PropertyDecorator & ClassMethodDecorator
 }
 
 const flowAnnotation = createFlowAnnotation("flow")
@@ -37,6 +40,10 @@ const flowBoundAnnotation = createFlowAnnotation("flow.bound", { bound: true })
 
 export const flow: Flow = Object.assign(
     function flow(arg1, arg2?) {
+        // @flow (2022.3 Decorators)
+        if (is20223Decorator(arg2)) {
+            return flowAnnotation.decorate_20223_(arg1, arg2)
+        }
         // @flow
         if (isStringish(arg2)) {
             return storeAnnotation(arg1, arg2, flowAnnotation)

package/src/api/observable.ts

@@ -30,9 +30,12 @@ import {
     isStringish,
     createObservableAnnotation,
     createAutoAnnotation,
+    is20223Decorator,
     initObservable
 } from "../internal"
 
+import type { ClassAccessorDecorator, ClassFieldDecorator } from "../types/decorator_fills"
+
 export const OBSERVABLE = "observable"
 export const OBSERVABLE_REF = "observable.ref"
 export const OBSERVABLE_SHALLOW = "observable.shallow"
@@ -71,7 +74,8 @@ const observableShallowAnnotation = createObservableAnnotation(OBSERVABLE_SHALLO
 const observableStructAnnotation = createObservableAnnotation(OBSERVABLE_STRUCT, {
     enhancer: refStructEnhancer
 })
-const observableDecoratorAnnotation = createDecoratorAnnotation(observableAnnotation)
+const observableDecoratorAnnotation =
+    createDecoratorAnnotation<ClassAccessorDecorator>(observableAnnotation)
 
 export function getEnhancerFromOptions(options: CreateObservableOptions): IEnhancer<any> {
     return options.deep === true
@@ -96,6 +100,11 @@ export function getEnhancerFromAnnotation(annotation?: Annotation): IEnhancer<an
  * @param v the value which should become observable.
  */
 function createObservable(v: any, arg2?: any, arg3?: any) {
+    // @observable someProp; (2022.3 Decorators)
+    if (is20223Decorator(arg2)) {
+        return observableAnnotation.decorate_20223_(v, arg2)
+    }
+
     // @observable someProp;
     if (isStringish(arg2)) {
         storeAnnotation(v, arg2, observableAnnotation)
@@ -142,7 +151,12 @@ export interface IObservableValueFactory {
     <T>(value?: T, options?: CreateObservableOptions): IObservableValue<T | undefined>
 }
 
-export interface IObservableFactory extends Annotation, PropertyDecorator {
+export interface IObservableFactory
+    extends Annotation,
+        PropertyDecorator,
+        ClassAccessorDecorator,
+        ClassFieldDecorator {
+    // TODO: remove ClassFieldDecorator, this is only temporarily support for legacy decorators
     <T = any>(value: T[], options?: CreateObservableOptions): IObservableArray<T>
     <T = any>(value: Set<T>, options?: CreateObservableOptions): ObservableSet<T>
     <K = any, V = any>(value: Map<K, V>, options?: CreateObservableOptions): ObservableMap<K, V>
@@ -171,13 +185,13 @@ export interface IObservableFactory extends Annotation, PropertyDecorator {
     /**
      * Decorator that creates an observable that only observes the references, but doesn't try to turn the assigned value into an observable.ts.
      */
-    ref: Annotation & PropertyDecorator
+    ref: Annotation & PropertyDecorator & ClassAccessorDecorator & ClassFieldDecorator
     /**
      * Decorator that creates an observable converts its value (objects, maps or arrays) into a shallow observable structure
      */
-    shallow: Annotation & PropertyDecorator
-    deep: Annotation & PropertyDecorator
-    struct: Annotation & PropertyDecorator
+    shallow: Annotation & PropertyDecorator & ClassAccessorDecorator & ClassFieldDecorator
+    deep: Annotation & PropertyDecorator & ClassAccessorDecorator & ClassFieldDecorator
+    struct: Annotation & PropertyDecorator & ClassAccessorDecorator & ClassFieldDecorator
 }
 
 const observableFactories: IObservableFactory = {

package/src/types/actionannotation.ts

@@ -7,7 +7,9 @@ import {
     isFunction,
     Annotation,
     globalState,
-    MakeResult
+    MakeResult,
+    assert20223DecoratorType,
+    storeAnnotation
 } from "../internal"
 
 export function createActionAnnotation(name: string, options?: object): Annotation {
@@ -15,11 +17,13 @@ export function createActionAnnotation(name: string, options?: object): Annotati
         annotationType_: name,
         options_: options,
         make_,
-        extend_
+        extend_,
+        decorate_20223_
     }
 }
 
 function make_(
+    this: Annotation,
     adm: ObservableObjectAdministration,
     key: PropertyKey,
     descriptor: PropertyDescriptor,
@@ -49,6 +53,7 @@ function make_(
 }
 
 function extend_(
+    this: Annotation,
     adm: ObservableObjectAdministration,
     key: PropertyKey,
     descriptor: PropertyDescriptor,
@@ -58,6 +63,47 @@ function extend_(
     return adm.defineProperty_(key, actionDescriptor, proxyTrap)
 }
 
+function decorate_20223_(this: Annotation, mthd, context: DecoratorContext) {
+    if (__DEV__) {
+        assert20223DecoratorType(context, ["method", "field"])
+    }
+    const { kind, name, addInitializer } = context
+    const ann = this
+
+    const _createAction = m =>
+        createAction(ann.options_?.name ?? name!.toString(), m, ann.options_?.autoAction ?? false)
+
+    // Backwards/Legacy behavior, expects makeObservable(this)
+    if (kind == "field") {
+        addInitializer(function () {
+            storeAnnotation(this, name, ann)
+        })
+        return
+    }
+
+    if (kind == "method") {
+        if (!isAction(mthd)) {
+            mthd = _createAction(mthd)
+        }
+
+        if (this.options_?.bound) {
+            addInitializer(function () {
+                const self = this as any
+                const bound = self[name].bind(self)
+                bound.isMobxAction = true
+                self[name] = bound
+            })
+        }
+
+        return mthd
+    }
+
+    die(
+        `Cannot apply '${ann.annotationType_}' to '${String(name)}' (kind: ${kind}):` +
+            `\n'${ann.annotationType_}' can only be used on properties with a function value.`
+    )
+}
+
 function assertActionDescriptor(
     adm: ObservableObjectAdministration,
     { annotationType_ }: Annotation,

package/src/types/autoannotation.ts

@@ -9,7 +9,8 @@ import {
     computed,
     autoAction,
     isGenerator,
-    MakeResult
+    MakeResult,
+    die
 } from "../internal"
 
 const AUTO = "true"
@@ -21,7 +22,8 @@ export function createAutoAnnotation(options?: object): Annotation {
         annotationType_: AUTO,
         options_: options,
         make_,
-        extend_
+        extend_,
+        decorate_20223_
     }
 }
 
@@ -105,3 +107,7 @@ function extend_(
     let observableAnnotation = this.options_?.deep === false ? observable.ref : observable
     return observableAnnotation.extend_(adm, key, descriptor, proxyTrap)
 }
+
+function decorate_20223_(this: Annotation, desc, context: ClassGetterDecoratorContext) {
+    die(`'${this.annotationType_}' cannot be used as a decorator`)
+}

package/src/types/computedannotation.ts

@@ -1,15 +1,26 @@
-import { ObservableObjectAdministration, die, Annotation, MakeResult } from "../internal"
+import {
+    ObservableObjectAdministration,
+    die,
+    Annotation,
+    MakeResult,
+    assert20223DecoratorType,
+    $mobx,
+    asObservableObject,
+    ComputedValue
+} from "../internal"
 
 export function createComputedAnnotation(name: string, options?: object): Annotation {
     return {
         annotationType_: name,
         options_: options,
         make_,
-        extend_
+        extend_,
+        decorate_20223_
     }
 }
 
 function make_(
+    this: Annotation,
     adm: ObservableObjectAdministration,
     key: PropertyKey,
     descriptor: PropertyDescriptor
@@ -18,6 +29,7 @@ function make_(
 }
 
 function extend_(
+    this: Annotation,
     adm: ObservableObjectAdministration,
     key: PropertyKey,
     descriptor: PropertyDescriptor,
@@ -35,6 +47,31 @@ function extend_(
     )
 }
 
+function decorate_20223_(this: Annotation, get, context: ClassGetterDecoratorContext) {
+    if (__DEV__) {
+        assert20223DecoratorType(context, ["getter"])
+    }
+    const ann = this
+    const { name: key, addInitializer } = context
+
+    addInitializer(function () {
+        const adm: ObservableObjectAdministration = asObservableObject(this)[$mobx]
+        const options = {
+            ...ann.options_,
+            get,
+            context: this
+        }
+        options.name ||= __DEV__
+            ? `${adm.name_}.${key.toString()}`
+            : `ObservableObject.${key.toString()}`
+        adm.values_.set(key, new ComputedValue(options))
+    })
+
+    return function () {
+        return this[$mobx].getObservablePropValue_(key)
+    }
+}
+
 function assertComputedDescriptor(
     adm: ObservableObjectAdministration,
     { annotationType_ }: Annotation,

package/src/types/decorator_fills.ts

@@ -0,0 +1,33 @@
+// Hopefully these will be main-lined into Typescipt, but at the moment TS only declares the Contexts
+
+export type ClassAccessorDecorator<This = any, Value = any> = (
+    value: ClassAccessorDecoratorTarget<This, Value>,
+    context: ClassAccessorDecoratorContext
+) => ClassAccessorDecoratorResult<This, Value> | void
+
+export type ClassGetterDecorator<This = any, Value = any> = (
+    value: (this: This) => Value,
+    context: ClassGetterDecoratorContext
+) => ((this: This) => Value) | void
+
+export type ClassSetterDecorator<This = any, Value = any> = (
+    value: (this: This, value: Value) => void,
+    context: ClassSetterDecoratorContext
+) => ((this: This, value: Value) => void) | void
+
+export type ClassMethodDecorator<This = any, Value extends (...p: any[]) => any = any> = (
+    value: Value,
+    context: ClassMethodDecoratorContext<This, Value>
+) => Value | void
+
+export type ClassFieldDecorator<This = any, Value extends (...p: any[]) => any = any> = (
+    value: Value,
+    context: ClassFieldDecoratorContext<This, Value>
+) => Value | void
+
+export type Decorator =
+    | ClassAccessorDecorator
+    | ClassGetterDecorator
+    | ClassSetterDecorator
+    | ClassMethodDecorator
+    | ClassFieldDecorator

package/src/types/flowannotation.ts

@@ -8,7 +8,8 @@ import {
     isFunction,
     globalState,
     MakeResult,
-    hasProp
+    hasProp,
+    assert20223DecoratorType
 } from "../internal"
 
 export function createFlowAnnotation(name: string, options?: object): Annotation {
@@ -16,11 +17,13 @@ export function createFlowAnnotation(name: string, options?: object): Annotation
         annotationType_: name,
         options_: options,
         make_,
-        extend_
+        extend_,
+        decorate_20223_
     }
 }
 
 function make_(
+    this: Annotation,
     adm: ObservableObjectAdministration,
     key: PropertyKey,
     descriptor: PropertyDescriptor,
@@ -50,6 +53,7 @@ function make_(
 }
 
 function extend_(
+    this: Annotation,
     adm: ObservableObjectAdministration,
     key: PropertyKey,
     descriptor: PropertyDescriptor,
@@ -59,6 +63,28 @@ function extend_(
     return adm.defineProperty_(key, flowDescriptor, proxyTrap)
 }
 
+function decorate_20223_(this: Annotation, mthd, context: ClassMethodDecoratorContext) {
+    if (__DEV__) {
+        assert20223DecoratorType(context, ["method"])
+    }
+    const { name, addInitializer } = context
+
+    if (!isFlow(mthd)) {
+        mthd = flow(mthd)
+    }
+
+    if (this.options_?.bound) {
+        addInitializer(function () {
+            const self = this as any
+            const bound = self[name].bind(self)
+            bound.isMobXFlow = true
+            self[name] = bound
+        })
+    }
+
+    return mthd
+}
+
 function assertFlowDescriptor(
     adm: ObservableObjectAdministration,
     { annotationType_ }: Annotation,

package/src/types/legacyobservablearray.ts

@@ -52,7 +52,7 @@ inherit(StubArray, Array.prototype)
 // but it is unclear why the hack is need as MobX never changed the prototype
 // anyway, so removed it in V6
 
-class LegacyObservableArray<T> extends StubArray {
+export class LegacyObservableArray<T> extends StubArray {
     constructor(
         initialValues: T[] | undefined,
         enhancer: IEnhancer<T>,

package/src/types/observableannotation.ts

@@ -3,7 +3,11 @@ import {
     deepEnhancer,
     die,
     Annotation,
-    MakeResult
+    MakeResult,
+    assert20223DecoratorType,
+    ObservableValue,
+    asObservableObject,
+    $mobx
 } from "../internal"
 
 export function createObservableAnnotation(name: string, options?: object): Annotation {
@@ -11,11 +15,13 @@ export function createObservableAnnotation(name: string, options?: object): Anno
         annotationType_: name,
         options_: options,
         make_,
-        extend_
+        extend_,
+        decorate_20223_
     }
 }
 
 function make_(
+    this: Annotation,
     adm: ObservableObjectAdministration,
     key: PropertyKey,
     descriptor: PropertyDescriptor
@@ -24,6 +30,7 @@ function make_(
 }
 
 function extend_(
+    this: Annotation,
     adm: ObservableObjectAdministration,
     key: PropertyKey,
     descriptor: PropertyDescriptor,
@@ -38,6 +45,72 @@ function extend_(
     )
 }
 
+function decorate_20223_(
+    this: Annotation,
+    desc,
+    context: ClassAccessorDecoratorContext | ClassFieldDecoratorContext
+) {
+    if (__DEV__) {
+        if (context.kind === "field") {
+            throw die(
+                `Please use \`@observable accessor ${String(
+                    context.name
+                )}\` instead of \`@observable ${String(context.name)}\``
+            )
+        }
+        assert20223DecoratorType(context, ["accessor"])
+    }
+
+    const ann = this
+    const { kind, name } = context
+
+    // The laziness here is not ideal... It's a workaround to how 2022.3 Decorators are implemented:
+    //   `addInitializer` callbacks are executed _before_ any accessors are defined (instead of the ideal-for-us right after each).
+    //   This means that, if we were to do our stuff in an `addInitializer`, we'd attempt to read a private slot
+    //   before it has been initialized. The runtime doesn't like that and throws a `Cannot read private member
+    //   from an object whose class did not declare it` error.
+    // TODO: it seems that this will not be required anymore in the final version of the spec
+    // See TODO: link
+    const initializedObjects = new WeakSet()
+
+    function initializeObservable(target, value) {
+        const adm: ObservableObjectAdministration = asObservableObject(target)[$mobx]
+        const observable = new ObservableValue(
+            value,
+            ann.options_?.enhancer ?? deepEnhancer,
+            __DEV__ ? `${adm.name_}.${name.toString()}` : `ObservableObject.${name.toString()}`,
+            false
+        )
+        adm.values_.set(name, observable)
+        initializedObjects.add(target)
+    }
+
+    if (kind == "accessor") {
+        return {
+            get() {
+                if (!initializedObjects.has(this)) {
+                    initializeObservable(this, desc.get.call(this))
+                }
+                return this[$mobx].getObservablePropValue_(name)
+            },
+            set(value) {
+                if (!initializedObjects.has(this)) {
+                    initializeObservable(this, value)
+                }
+                return this[$mobx].setObservablePropValue_(name, value)
+            },
+            init(value) {
+                if (!initializedObjects.has(this)) {
+                    initializeObservable(this, value)
+                }
+                return value
+            }
+        }
+    }
+
+    return
+}
+
 function assertObservableDescriptor(
     adm: ObservableObjectAdministration,
     { annotationType_ }: Annotation,

package/src/types/overrideannotation.ts

@@ -7,19 +7,23 @@ import {
     MakeResult
 } from "../internal"
 
+import type { ClassMethodDecorator } from "./decorator_fills"
+
 const OVERRIDE = "override"
 
-export const override: Annotation & PropertyDecorator = createDecoratorAnnotation({
-    annotationType_: OVERRIDE,
-    make_,
-    extend_
-})
+export const override: Annotation & PropertyDecorator & ClassMethodDecorator =
+    createDecoratorAnnotation({
+        annotationType_: OVERRIDE,
+        make_,
+        extend_,
+        decorate_20223_
+    })
 
 export function isOverride(annotation: Annotation): boolean {
     return annotation.annotationType_ === OVERRIDE
 }
 
-function make_(adm: ObservableObjectAdministration, key): MakeResult {
+function make_(this: Annotation, adm: ObservableObjectAdministration, key): MakeResult {
     // Must not be plain object
     if (__DEV__ && adm.isPlainObject_) {
         die(
@@ -37,6 +41,10 @@ function make_(adm: ObservableObjectAdministration, key): MakeResult {
     return MakeResult.Cancel
 }
 
-function extend_(adm, key, descriptor, proxyTrap): boolean {
+function extend_(this: Annotation, adm, key, descriptor, proxyTrap): boolean {
     die(`'${this.annotationType_}' can only be used with 'makeObservable'`)
 }
+
+function decorate_20223_(this: Annotation, desc, context: DecoratorContext) {
+    console.warn(`'${this.annotationType_}' cannot be used with decorators - this is a no-op`)
+}