Skip to content

Instantly share code, notes, and snippets.

View avoid-mobx-auto-observable.test.ts
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);
}
}
View maco-so-setup.sh
// 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
kubk / counter.test.ts
Created Sep 7, 2021
Mobx test timers
View counter.test.ts
import { TimeTrackerStore } from './time-tracker-store';
import { action, makeAutoObservable } from 'mobx';
class Counter {
value = 0;
intervalId?: NodeJS.Timer;
constructor() {
makeAutoObservable(this);
}
@kubk
kubk / install-fish.sh
Last active Sep 14, 2021
Ubuntu fresh install
View install-fish.sh
# Fix inotify issue: https://stackoverflow.com/a/56156015
@kubk
kubk / classes.ts
Last active May 3, 2021
Mobx 6 + TypeScript
View classes.ts
export class PlayerStore {
song?: Song;
isPlaying = false;
constructor() {
makeAutoObservable(this);
}
playSong(song: Song) {
this.song = song;
@kubk
kubk / mobx-6-cache.js
Created Apr 20, 2021
Simple Mobx 6 cache example
View mobx-6-cache.js
class UsersStore {
isLoaded = false;
users = [];
constructor() {
makeAutoObservable(this)
}
loadUsers() {
if (this.isLoaded) {
@kubk
kubk / gist:d874ad358bf7b124f725e0abef2132d0
Created Mar 9, 2021
Почему React context не замена стейт-менеджеру
View gist:d874ad358bf7b124f725e0abef2132d0
Ссылки:
- Лишний ререндер: 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
View mobx-reuse-store.ts
class ListStore<T> {
isLoading = false;
list: T[] = [];
constructor(loadList: () => Promise<T[]>) {
makeAutoObservable(this)
}
loadList() {
this.isLoading = true;
View di-container.ts
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
kubk / mobx.js
Last active Nov 6, 2020
Mobx VS Reselect comparison
View mobx.js
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);