kubk

import { makeAutoObservable } from 'mobx';
import { avoidMobxAutoObservable } from './avoid-mobx-auto-observable';
import { types } from 'util';

test('avoidMobxAutoObservable allows to avoid Mobx auto conversion', () => {
  class Store {
    constructor(public dependency: object) {
      makeAutoObservable(this);
    }
  }

kubk

// turn off https://intellij-support.jetbrains.com/hc/en-us/articles/360005137400-Cmd-Shift-A-hotkey-opens-Terminal-with-apropos-search-instead-of-the-Find-Action-dialog

brew install git node@16 php@8
pecl install xdebug && php -m | grep xdebug

// cp .id_rsa and .id_rsa.pub

kubk

import { TimeTrackerStore } from './time-tracker-store';
import { action, makeAutoObservable } from 'mobx';

class Counter {
  value = 0;
  intervalId?: NodeJS.Timer;

  constructor() {
    makeAutoObservable(this);
  }

kubk

# Fix inotify issue: https://stackoverflow.com/a/56156015

kubk

export class PlayerStore {
  song?: Song;
  isPlaying = false;

  constructor() {
    makeAutoObservable(this);
  }

  playSong(song: Song) {
    this.song = song;

kubk

class UsersStore {
  isLoaded = false;
  users = [];

  constructor() {
    makeAutoObservable(this)
  }
  
  loadUsers() {
    if (this.isLoaded) {

kubk

Ссылки:
 - Лишний ререндер: https://codesandbox.io/s/usecontext-problem-b6evb
 - Переизобретают Mobx с массой ограничений: https://habr.com/ru/post/546124/
 - Разработчики из Atlassian не смогли переписать react-beautiful-dnd с Redux на контекст из-за проблем с перформансом: https://github.com/atlassian/react-beautiful-dnd/issues/1576#issuecomment-549643226

kubk

class ListStore<T> {
  isLoading = false;
  list: T[] = [];

  constructor(loadList: () => Promise<T[]>) {
    makeAutoObservable(this)
  }

  loadList() {
    this.isLoading = true;

kubk

import { assert } from "ts-essentials";

export class Container {
  private services = new Map<string, object>();
  private factories = new Map<string, (container: Container) => object>();

  set(key: string, factory: (container: Container) => object) {
    this.factories.set(key, factory);
  }

kubk

const store = makeAutoObservable({
  shop: {
    taxPercent: 8,
    items: [
      { name: 'apple', value: 1.20 },
      { name: 'orange', value: 0.95 },
    ]
  },
  get subtotal() {
    return this.shop.items.reduce((acc, item) => acc + item.value, 0);