@zajno/common 1.4.12 → 1.4.13

package/src/viewModels/FlagModel.ts

@@ -14,11 +14,18 @@ export type ILabeledFlagModel = IFlagModel & ILabel<string>;
 
 export class FlagModel implements IFlagModel, IFlagModelReadonly {
 
-    @observable
+    // @observable
     private _value: boolean = false;
 
     constructor(initial = false) {
-        makeObservable(this);
+        makeObservable<FlagModel, '_value'>(this, {
+            _value: observable,
+            setValue: action,
+            setTrue: action,
+            setFalse: action,
+            toggle: action,
+            reset: action,
+        });
         this._value = initial;
     }
 
@@ -30,33 +37,33 @@ export class FlagModel implements IFlagModel, IFlagModelReadonly {
         this.setValue(value);
     }
 
-    @action
+    // @action
     public readonly setValue = (value: boolean) => {
         this._value = value;
     };
 
     get isDefault() { return this._value === false; }
 
-    @action
+    // @action
     setTrue = () => {
         const v = this.value;
         this.value = true;
         return !v;
     };
 
-    @action
+    // @action
     setFalse = () => {
         const v = this.value;
         this.value = false;
         return v;
     };
 
-    @action
+    // @action
     toggle = () => {
         this._value = !this._value;
     };
 
-    @action
+    // @action
     reset = () => {
         this._value = false;
     };

package/src/viewModels/LoadingModel.ts

@@ -0,0 +1,16 @@
+import { NumberModel } from './NumberModel';
+
+export class LoadingModel extends NumberModel {
+
+    public get isLoading() { return this.value > 0; }
+
+    public async useLoading<T>(cb: () => (T | Promise<T>)): Promise<T> {
+        try {
+            this.increment();
+            const res = await cb();
+            return res;
+        } finally {
+            this.decrement();
+        }
+    }
+}

package/src/viewModels/MultiSelectModel.ts

@@ -9,7 +9,7 @@ import { arraysCompareDistinct } from '../math';
 
 export class MultiSelect<T = any> extends ValidatableModel<ReadonlyArray<T>> implements IValueModel<readonly string[]>, IResetableModel, ICountableModel {
 
-    @observable
+    // @observable
     private readonly _indexes = new Set<number>();
 
     public readonly opened = new FlagModel();
@@ -24,29 +24,39 @@ export class MultiSelect<T = any> extends ValidatableModel<ReadonlyArray<T>> imp
         ...selected: number[]
     ) {
         super();
-        makeObservable(this);
+        makeObservable<MultiSelect<T>, '_indexes'>(this, {
+            '_indexes': observable,
+            selectedIndexes: computed,
+            values: computed,
+            selectedItems: computed,
+            selectedValues: computed,
+            isDefault: computed,
+            selectItems: action,
+            selectValues: action,
+            setIndexSelected: action,
+        });
         this._initial = selected;
         this.setInitialIndexes();
     }
 
-    @computed
+    // @computed
     get selectedIndexes(): ReadonlyArray<number> { return Array.from(this._indexes); }
 
     get items(): ReadonlyArray<T> { return this._items; }
 
     get flags() { return this._flags.value; }
 
-    @computed
+    // @computed
     get values(): ReadonlyArray<string> {
         return this._items.map(i => this._accessor(i));
     }
 
-    @computed
+    // @computed
     get selectedItems(): ReadonlyArray<T> {
         return this.selectedIndexes.map(i => this._items[i]);
     }
 
-    @computed
+    // @computed
     get selectedValues(): ReadonlyArray<string> {
         const values = this.values;
         return this.selectedIndexes.map(i => values[i]);
@@ -62,7 +72,7 @@ export class MultiSelect<T = any> extends ValidatableModel<ReadonlyArray<T>> imp
     get selectedCount() { return this._indexes.size; }
     get isEmpty() { return this.selectedCount === 0; }
 
-    @computed
+    // @computed
     get isDefault() { return arraysCompareDistinct(this.selectedIndexes, this._initial)?.diff === 0; }
 
     protected get valueToValidate() { return this.selectedItems; }
@@ -77,7 +87,7 @@ export class MultiSelect<T = any> extends ValidatableModel<ReadonlyArray<T>> imp
     selectItem = (item: T) => this.setItemSelected(item, true);
     deSelectItem = (item: T) => this.setItemSelected(item, false);
 
-    @action
+    // @action
     selectItems = (items: readonly T[]) => {
         items.forEach(this.selectItem);
     };
@@ -92,12 +102,12 @@ export class MultiSelect<T = any> extends ValidatableModel<ReadonlyArray<T>> imp
     selectValue = (value: string) => this.setValueSelected(value, true);
     deSelectValue = (value: string) => this.setValueSelected(value, false);
 
-    @action
+    // @action
     selectValues = (values: readonly string[]) => {
         values.forEach(this.selectValue);
     };
 
-    @action
+    // @action
     setIndexSelected = (index: number, selected: boolean) => {
         if (this._indexesLocked) {
             return;

package/src/viewModels/NumberModel.ts

@@ -8,13 +8,19 @@ export interface INumberModel extends IResetableModel {
 
 export class NumberModel implements INumberModel, IValueModel<number> {
 
-    @observable
+    // @observable
     private _value: number = 0;
 
     private _initial: number = 0;
 
     constructor(initial: number = 0) {
-        makeObservable(this);
+        makeObservable<NumberModel, '_value'>(this, {
+            _value: observable,
+            setValue: action,
+            reset: action,
+            increment: action,
+            decrement: action,
+        });
         this._initial = initial;
         this._value = this._initial;
     }
@@ -22,22 +28,22 @@ export class NumberModel implements INumberModel, IValueModel<number> {
     get value() { return this._value; }
     set value(v: number) { this.setValue(v); }
 
-    @action
+    // @action
     public readonly setValue = (v: number) => {
         this._value = v;
     };
 
     get isDefault() { return this._value === this._initial; }
 
-    @action
+    // @action
     reset = () => {
         this._value = this._initial;
     };
 
-    @action
+    // @action
     increment = (d = 1) => this.value += d;
 
-    @action
+    // @action
     decrement = (d = 1) => this.value -= d;
 }
 

package/src/viewModels/SelectModel.ts

@@ -7,7 +7,7 @@ import { withLabel } from './wrappers';
 import { IResetableModel } from 'viewModels';
 
 export class Select<T = any> extends ValidatableModel<T> implements IValueModel<string>, IResetableModel {
-    @observable
+    // @observable
     private _index: number = undefined;
 
     public readonly opened = new FlagModel();
@@ -22,7 +22,11 @@ export class Select<T = any> extends ValidatableModel<T> implements IValueModel<
         initialIndex: number = 0,
     ) {
         super();
-        makeObservable(this);
+        makeObservable<Select<T>, '_index'>(this, {
+            '_index': observable,
+            values: computed,
+            setIndex: action,
+        });
 
         this._initialIndex = initialIndex;
         this._index = initialIndex;
@@ -30,7 +34,7 @@ export class Select<T = any> extends ValidatableModel<T> implements IValueModel<
 
     protected get valueToValidate() { return this.selectedItem; }
 
-    @computed
+    // @computed
     get values(): readonly string[] {
         return this._items.map(i => this._accessor(i));
     }
@@ -78,7 +82,7 @@ export class Select<T = any> extends ValidatableModel<T> implements IValueModel<
        this.setIndex(val);
     }
 
-    @action
+    // @action
     public setIndex = (val: number) => {
         if (this._indexLocked) {
             return;

package/src/viewModels/TextModel.ts

@@ -40,10 +40,10 @@ export class Text {
 }
 
 export class TextInputVM extends ValidatableModel<string> implements IValueModel<string>, IResetableModel {
-    @observable
+    // @observable
     private _value = '';
 
-    @observable
+    // @observable
     private _focused = false;
 
     private _name: string = null;
@@ -53,7 +53,12 @@ export class TextInputVM extends ValidatableModel<string> implements IValueModel
 
     constructor(config?: TextInputConfig) {
         super();
-        makeObservable(this);
+        makeObservable<TextInputVM, '_value' | '_focused'>(this, {
+            _value: observable,
+            _focused: observable,
+            setValue: action,
+            setFocused: action,
+        });
         config = config || {};
 
         const delay = config.async ? 100 : null;
@@ -71,7 +76,7 @@ export class TextInputVM extends ValidatableModel<string> implements IValueModel
         this.setValue(val);
     }
 
-    @action
+    // @action
     public readonly setValue = (value: string) => {
         if (!this._valueObserving) {
             this._value = value;
@@ -96,7 +101,7 @@ export class TextInputVM extends ValidatableModel<string> implements IValueModel
         this.setFocused(val);
     }
 
-    @action
+    // @action
     public readonly setFocused = (value = true) => {
         this._focused = value;
         if (!value) {

package/src/viewModels/Validatable.ts

@@ -17,14 +17,17 @@ export abstract class ValidatableModel<T = string> {
     private _validator: ValueValidator<Readonly<T>, any> = null;
     private _strings: ValidationErrorsStrings<any> = null;
 
-    @observable
+    // @observable
     private _error: string = null;
 
     private _validationError: ValidationError = null;
     protected _validateOnChange = false;
 
     constructor() {
-        makeObservable(this);
+        makeObservable<ValidatableModel<T>, '_error'>(this, {
+            '_error': observable,
+            reset: action,
+        });
     }
 
     protected abstract get valueToValidate(): Readonly<T>;
@@ -82,7 +85,7 @@ export abstract class ValidatableModel<T = string> {
         return !valid;
     }
 
-    @action
+    // @action
     reset() {
         this._validationError = null;
         this._error = null;

package/src/viewModels/__tests__/common.test.ts

@@ -0,0 +1,88 @@
+import { ValidationErrors } from '../../validation';
+import { CommonModel } from '../CommonModel';
+import { LoadingModel } from '../LoadingModel';
+import { setTimeoutAsync } from '../../async/timeout';
+import { SelectString } from '../SelectModel';
+import { TextInputVM } from '../TextModel';
+
+describe('CommonModel', () => {
+    const NotEmptyError = 'should be not empty';
+
+    it('works', async () => {
+
+        let m: CommonModel<string[]>;
+
+        const fn = async () => {
+            m = new CommonModel<string[]>(() => [], true)
+                .setValidationConfig({
+                    validator: (v: readonly any[]) => v.length > 0 ? ValidationErrors.None : ValidationErrors.ShouldBeNonEmpty,
+                    errors: {
+                        [ValidationErrors.ShouldBeNonEmpty]: NotEmptyError,
+                    },
+                });
+        };
+
+        await expect(fn()).resolves.not.toThrow();
+        expect(m).toBeDefined();
+
+        m.value = ['1'];
+
+        expect(m.value).toStrictEqual(['1']);
+        const valid1 = await m.validate();
+        expect(valid1).toBeTruthy();
+
+        m.reset();
+
+        expect(m.value).toStrictEqual([]);
+
+        const valid2 = await m.validate();
+        expect(valid2).toBeFalsy();
+
+        m.reset();
+        expect(m.error).toBeFalsy();
+
+        m.validateOnChange(true);
+        m.value = [];
+
+        // skip one frame
+        await Promise.resolve();
+
+        expect(m.error).toEqual(NotEmptyError);
+    });
+});
+
+describe('LoadingModel', () => {
+
+    it('works', async () => {
+
+        const m = new LoadingModel();
+        expect(m.value).toBe(0);
+        expect(m.isLoading).toBeFalsy();
+
+        const worker = async () => {
+            await setTimeoutAsync(100);
+            return 100;
+        };
+
+        const promise = m.useLoading(worker);
+        expect(m.isLoading).toBeTruthy();
+
+        await promise;
+
+        expect(m.isLoading).toBeFalsy();
+    });
+});
+
+describe('Others', () => {
+    it('has no mobx errors', async () => {
+
+        await expect((async () => {
+            return new SelectString([]);
+        })()).resolves.not.toThrow();
+
+        await expect((async () => {
+            return new TextInputVM();
+        })()).resolves.not.toThrow();
+
+    });
+});

package/yarn.lock

@@ -2764,9 +2764,9 @@ mkdirp@^0.5.3:
     minimist "^1.2.5"
 
 mobx@^6:
-  version "6.1.8"
-  resolved "https://registry.yarnpkg.com/mobx/-/mobx-6.1.8.tgz#5d03cb76d8f7694dd82bfb2578d886945b66450d"
-  integrity sha512-U4yCvUeh6yKXRwFxm2lyJjXPVekOEar/R8ZKWAXem/3fthJqYflViawfjDAUh7lZEvbKqljC3NT/pSaUKpE+gg==
+  version "6.5.0"
+  resolved "https://registry.yarnpkg.com/mobx/-/mobx-6.5.0.tgz#dc2d028b1882737f6e813fc92454381e438b7ad3"
+  integrity sha512-pHZ/cySF00FVENDWIDzJyoObFahK6Eg4d0papqm6d7yMkxWTZ/S/csqJX1A3PsYy4t5k3z2QnlwuCfMW5lSEwA==
 
 ms@2.1.2:
   version "2.1.2"