Created
May 5, 2022 17:37
-
-
Save scharf/e8f4ba70e9d1a548c7fab3c59eeb3a10 to your computer and use it in GitHub Desktop.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
import { observable, makeObservable, autorun, runInAction } from 'mobx'; | |
function assignValueToMember(self: object, memberName: string, version: number) { | |
console.log('\n'); | |
// @ts-ignore | |
const dispose = autorun(() => console.log(`autorun ${memberName} == ${self[memberName]}`)); | |
console.log(`assign ${memberName} = ${version}`); | |
runInAction(() => { | |
// @ts-ignore | |
self[memberName] = version; | |
}); | |
dispose(); | |
} | |
export class Base { | |
version = 0; | |
@observable | |
notAssigned_01?: number; | |
@observable | |
assignedBeforeMakeObservable_02?: number; | |
@observable | |
assignedAfterMakeObservable_03?: number; | |
@observable | |
notAssignedWithBang_04!: number; | |
@observable | |
initializedWithNull_05: number | null = null; | |
@observable | |
notAssignedInitializedWithUndefined_06?: number = undefined; | |
@observable | |
initializedValue_07 = 0; | |
@observable | |
assignedUndefinedInBeforeMakeObservableConstructor_08?: number; | |
@observable | |
assignedUndefinedInAfterMakeObservableConstructor_09?: number; | |
constructor() { | |
this.assignedBeforeMakeObservable_02 = -1; | |
this.assignedUndefinedInBeforeMakeObservableConstructor_08 = undefined; | |
makeObservable(this); | |
this.assignedAfterMakeObservable_03 = -1; | |
this.assignedUndefinedInAfterMakeObservableConstructor_09 = undefined; | |
} | |
update() { | |
console.log(`\n======== Base ========`); | |
this.assignMember('notAssigned_01'); | |
this.assignMember('assignedBeforeMakeObservable_02'); | |
this.assignMember('assignedAfterMakeObservable_03'); | |
this.assignMember('notAssignedWithBang_04'); | |
this.assignMember('initializedWithNull_05'); | |
this.assignMember('notAssignedInitializedWithUndefined_06'); | |
this.assignMember('initializedValue_07'); | |
this.assignMember('assignedUndefinedInBeforeMakeObservableConstructor_08'); | |
this.assignMember('assignedUndefinedInAfterMakeObservableConstructor_09'); | |
} | |
protected assignMember(memberName: string) { | |
assignValueToMember(this, memberName, +this.version); | |
} | |
} | |
export class DerivedNotCallingMakeObservable extends Base { | |
@observable | |
notAssignedDerived?: number; | |
constructor() { | |
super(); | |
} | |
update() { | |
console.log(`\n======== DerivedNotCallingMakeObservable ========`); | |
this.assignMember('notAssignedDerived'); | |
} | |
} | |
export class DerivedCallingMakeObservable extends Base { | |
@observable | |
notAssignedDerived?: number; | |
constructor() { | |
super(); | |
makeObservable(this); | |
} | |
update() { | |
console.log(`\n======== DerivedCallingMakeObservable ========`); | |
this.assignMember('notAssignedDerived'); | |
} | |
} | |
export class DerivedNoConstructor extends Base { | |
@observable | |
notAssignedDerived?: number; | |
update() { | |
console.log(`\n======== DerivedNoConstructor ========`); | |
this.assignMember('notAssignedDerived'); | |
} | |
} | |
export function runDemo() { | |
new Base().update(); | |
new DerivedNotCallingMakeObservable().update(); | |
new DerivedCallingMakeObservable().update(); | |
new DerivedNoConstructor().update(); | |
} | |
runDemo(); | |
/* | |
======== Base ======== | |
autorun notAssigned_01 == undefined | |
assign notAssigned_01 = 0 | |
autorun notAssigned_01 == 0 | |
autorun assignedBeforeMakeObservable_02 == -1 | |
assign assignedBeforeMakeObservable_02 = 0 | |
autorun assignedBeforeMakeObservable_02 == 0 | |
autorun assignedAfterMakeObservable_03 == -1 | |
assign assignedAfterMakeObservable_03 = 0 | |
autorun assignedAfterMakeObservable_03 == 0 | |
autorun notAssignedWithBang_04 == undefined | |
assign notAssignedWithBang_04 = 0 | |
autorun notAssignedWithBang_04 == 0 | |
autorun initializedWithNull_05 == null | |
assign initializedWithNull_05 = 0 | |
autorun initializedWithNull_05 == 0 | |
autorun notAssignedInitializedWithUndefined_06 == undefined | |
assign notAssignedInitializedWithUndefined_06 = 0 | |
autorun notAssignedInitializedWithUndefined_06 == 0 | |
autorun initializedValue_07 == 0 | |
assign initializedValue_07 = 0 | |
autorun assignedUndefinedInBeforeMakeObservableConstructor_08 == undefined | |
assign assignedUndefinedInBeforeMakeObservableConstructor_08 = 0 | |
autorun assignedUndefinedInBeforeMakeObservableConstructor_08 == 0 | |
autorun assignedUndefinedInAfterMakeObservableConstructor_09 == undefined | |
assign assignedUndefinedInAfterMakeObservableConstructor_09 = 0 | |
autorun assignedUndefinedInAfterMakeObservableConstructor_09 == 0 | |
======== DerivedNotCallingMakeObservable ======== | |
autorun notAssignedDerived == undefined | |
assign notAssignedDerived = 0 | |
======== DerivedCallingMakeObservable ======== | |
autorun notAssignedDerived == undefined | |
assign notAssignedDerived = 0 | |
autorun notAssignedDerived == 0 | |
======== DerivedNoConstructor ======== | |
autorun notAssignedDerived == undefined | |
assign notAssignedDerived = 0 | |
*/ |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment