Migration from Mobx 4 > 6 about mobx HOT 6 CLOSED

It looks correct. You've added the makeObservable(this) to the constructor and you're basically done.
mobx-undecorate is just a tool so you don't have to do this by hand, but it does the same thing.
It's not something you call from the code, you call it from command line, it takes your .js/.ts files and modifies them.
Eg you have 180 classes, you either add makeObservable(this) to 180 constructors by hand or you run mobx-undecorate and it does it for you.

from mobx.

at one place, like so?

Yes this configuration is global. Typically you would put it somewhere at the beginning (index.js/main.js). Technically you can call it anytime you want and it just changes the current configuration, so it's respected by any code/calls that follows the configure call.

Is it before calling a super() or after?

Try to place it before, you will get a JS syntax error.

where should I put the calling of makeObservable(this);

makeObservable(this) makes existing fields observable. Meaning you have to place it after all fields are defined and before anything that relies on obserability:

class A {
   a = 'a'
   constructor() {
      this.b = 'introducing new field inside a constructor';  // Since you use field initializers + decorators, you don't have to worry about this
      makeObservable(this, { a: observable, b: observable });
      // autorun/reaction/observe/intercept etc must be after
      autorun(() => console.log(this.a, this.b))
   }
}

mobx-undecorate codemod

It's a CLI tool that transforms your source code like this:

// original code
class A {
  @observable
   x = 0
}

// with --keepDecorators option
class A {
  @observable
   x = 0
   constructor() {
      makeObservable(this)
   }
}
// without --keepDecorators option
class A {
   x = 0
   constructor() {
      makeObservable(this, { x: observable })
   }
}

from mobx.

@urugator Thanks for quick reply. I will try to apply all your recommendations today, to see if it helps.

Is it before calling a super() or after?

Try to place it before, you will get a JS syntax error.

is that a recommendation, or are you encouraging me to try it out so I can see the error?

One more thing, I am not sure, where shoudl I put this line of code: ["@babel/plugin-proposal-class-properties", { "loose": false }]

We use craco instead of webpack and there are no signs of babel in our porject,m except peer dependecies. Shall I ignore that settings or do I have to write it somewhere? If so, where should I put it.

Many thanks

from mobx.

encouraging me to try it out so I can see the error?

https://craco.js.org/docs/configuration/babel/

from mobx.

@urugator So this piece of code is not correct?

export default class EditBundleViewModel extends ScreenBase {
	busyWatcher = new BusyWatcher();

	@observable searchId = 0;
	@observable searchText = "";
	@observable categories: Category[] = [];
	@observable upsells: Item[] = [];
	@observable selected: Item[] = [];
	@observable serverValidationErrors?: InvalidFields[];
	
	@observable itemsInBundle: OfferItemDto[] = [];
	@observable itemsInBundleExpanded: boolean[] = [];
	@observable itemsInAdditionalBundle: Item[] = [];
	@observable additionalBundleExpandedState: boolean[] = [];

	@observable fetchingItems = false;
	@observable fetchingUpsells = true;
	@observable deletableItems: ProductItemDto[] = [];
	@observable showNotSortedCategory = true;

	constructor(
		public context: OfferContext,
		public defaultExpanded: boolean,
		public localization: ILocalizationService,
		public dialogService: ConfirmDialogService,
		private otnaWiseporterRepository: OtnaWiseporterRepository,
		private otnaOfferItemsRepository: OtnaOfferItemsRepository,
		private editBundleService: EditBundleService,
		private userContext: UserContext,
		private notificationService: INotificationService
	) {
		super();
		makeObservable(this);
	}

and does the order matter? Like do I have to place makeObservable(this) frist and then call the mobx-undecorate?

from mobx.

cool, looks like I successfully updated our app, Thanks for your support

from mobx.