mvvm-mobx 1.0.0

package/README.md

@@ -0,0 +1,189 @@
+# MVVM MobX
+
+This package contains classes and utils for working with MVVM over MobX.
+It adheres to the concepts of Prism.
+
+## CounterFlag
+
+A flag that bases it true/false value on an active counter.
+It has an internal counter that increases when an operation is starting and decreases when an operation is ending.
+When the counter is 0, the flag is marked as inactive (`flag.isActive === false`). When the counter is greater than 0 then the flag is marked as active.
+
+Operations are bounded with the `using` method. When this method starts it means that an operation has started and the counter increases. When this method ends it means that that operation has ended and the counter decreases.
+You can call `using` many times simultaneously.
+
+An example on how to use it:
+
+```typescript
+const flag = new CounterFlag();
+
+await flag.using(async () => {
+    // At this point the counter has been increased and the flag is active.
+    
+    await runSomeWork(); // Inside runSomeWork you can also call flag.using
+});
+
+// At this point the counter has been decreased and the flag is inactive.
+```
+
+## RelayCommand
+
+Implements the [Command pattern](https://onewindowsdev.com/2016/06/16/the-command-pattern-and-mvvm/) by relaying the actual work to external functions that are provided in the constructor.
+In Prism it was called DelegateCommand. This name was not used here because in JS the term "delegate" is not known.
+
+You pass an execution method in the constructor (and possibly another method to check if an execution is allowed).
+The UI should bind to the command (can use the helper `commandProps` function) and act appropriately.
+`RelayCommand` works with MobX, so the `canExecute` method is observable is the function that is passed to the constructor is also observable.
+Observable functions don't have to be decorated with `@computed` in order to work. See more info: https://mobx.js.org/computeds-with-args.html#1-derivations-dont-_need_-to-be-computed
+
+Using a relay command:
+
+```typescript
+const saveProjectCommand = new RelayCommand(this.saveProject, this.canSaveProject);
+
+private function async saveProject() {
+    // save project
+}
+
+private function canSaveProject() {
+    return this.isProjectValid;
+}
+```
+
+The command can support 1 parameter:
+
+```typescript
+const deleteProjectCommand = new DelegateCommand<string>(this.deleteProject, this.canDeleteProject);
+
+private function async deleteProject(projectId: string) {
+    // save project
+}
+
+private function canDeleteProject(projectId: string) {
+    return !this.isReadOnly;
+}
+```
+
+
+In the UI you can bind buttons to the commands:
+
+```jsx
+<Button {...bindCommand(vm.saveProjectCommand)}>
+    Save Project
+</Button>
+
+{vm.projects.map(project =>
+    observer(
+    <div>
+        {project.name}
+        <Button {...bindCommand(vm.deleteProjectCommand, project.id)}>
+            Delete Project
+        </Button>
+    </div>)
+)}
+```
+
+What it does in the "Save Project" button is equivalent to:
+
+```jsx
+<Button
+    onClick={() => vm.saveProjectCommand.execute()}
+    disabled={!vm.saveProjectCommand.canExecute()}>
+
+    Save Project
+</Button>
+```
+
+The command has an indication while it's working (`command.workingFlag.isActive`)
+
+## Interaction
+
+Many times we need to communicate with the user and wait for his response. This is called **interaction**.
+Common scenarios:
+* The user wants to perform in irreversible action and we want to confirm that he's sure.
+* The user wants to perform an action that has implications and we want to confirm.
+* Presenting error messages.
+
+Since according to MVVM all the above is done and decided by the business logic, it should reside in the view model.
+
+So how do we interact with the user from the VM through the view, in the middle of a business logic flow?
+
+This is why we have the Interaction Manager. We can create an `InteractionRequest` object and request an interaction from the user:
+
+```typescript
+const interactionObject: InteractionRequest = {
+            title: 'Confirmation',
+            content: 'Are you sure you want to delete?',
+            actions: [
+                CommonInteractionActions.yes.action
+                CommonInteractionActions.no.action
+                ]
+        };
+ 
+ if (await interactionManager.requestInteraction(interactionObject)) === CommonInteractionActions.yes.id) {
+    deleteItem();
+ }
+```
+
+---
+**Note**
+
+In the above example, you can use the shorthand:
+```typescript
+if (await Interact.withYesNo(interactionManager, 'Confirmation', 'Are you sure you want to delete?')) {
+    deleteItem();
+ }
+```
+In many cases you need some action with cancellation (like "Delete" and "Cancel" buttons).
+You can use the shorthand:
+```typescript
+const deleteAction = new InteractionAction('delete', 'Delete');
+
+// Show interaction view with "Delete" and "Cancel" buttons:
+if (await Interact.withCustomAndCancel(interactionManager, 'Confirmation', 'Are you sure you want to delete?', deleteAction)) {
+    deleteItem();
+ }
+```
+
+---
+
+The interaction object has title, content, and actions for the user to respond on the request.
+
+We create this object as pass it to the manager.
+In the View layer, there should be a component that listens to this manager and when interaction is requested, it should present it to the user, and pass the user's response back to the manager.
+
+The view is responsible to present the interaction in a manner which it finds suitable. It can be a modal, a toast notification and so on.
+
+Once the user chooses the response, the promise of the `requestInteraction` method should be finished.
+
+### Finishing the interaction through code
+If you implement the `ReportInteractionOperationFinished` interface, you can finish the interaction through code by calling the interface's `onOperationFinished` function.
+
+This package includes a pre-implemented `SingleConcurrentInteractionManager` interaction manager for handling one interaction request at a time. When using modals, this should fit most of the use cases.
+
+To implement the View side, there's also a `useSingleConcurrentInteractionHandler` hook that take case of most of the logic.
+
+## PaneViewModelBase
+
+Intended for view models that represent a pane in the app that handles data and actions.
+
+When performing long actions (like setting/getting data from the server), you can put your logic inside the runLongWork method:
+
+```typescript
+await this.runLongWork(async () => {
+    await saveToServer();
+});
+```
+
+The method will:
+1. Set the workingFlag.isActive property to `true` so that UI elements could present an in-progress state.
+2. Catch exception (except AcknowledgementRequiredException) and put the message in the `error` property for the UI to bind to.
+3. Log the exceptions.
+
+You can use the helper `errorModalProps` function in the UI to automatically bind and handle the `error` property:
+
+```jsx
+<ErrorModal
+    {...errorModalProps(vm)}
+/>
+```

package/dist/commands/RelayCommand.d.ts

@@ -0,0 +1,9 @@
+import { CounterFlag } from '../core/CounterFlag';
+export declare class RelayCommand<T = void> {
+    private readonly executeFunc;
+    private readonly canExecuteFunc?;
+    readonly workingFlag: CounterFlag;
+    constructor(executeFunc: (parameter: T) => Promise<void> | void, canExecuteFunc?: ((parameter: T) => boolean) | undefined);
+    canExecute(parameter: T): boolean;
+    execute(parameter: T): Promise<void>;
+}

package/dist/commands/RelayCommand.js

@@ -0,0 +1,68 @@
+"use strict";
+var __runInitializers = (this && this.__runInitializers) || function (thisArg, initializers, value) {
+    var useValue = arguments.length > 2;
+    for (var i = 0; i < initializers.length; i++) {
+        value = useValue ? initializers[i].call(thisArg, value) : initializers[i].call(thisArg);
+    }
+    return useValue ? value : void 0;
+};
+var __esDecorate = (this && this.__esDecorate) || function (ctor, descriptorIn, decorators, contextIn, initializers, extraInitializers) {
+    function accept(f) { if (f !== void 0 && typeof f !== "function") throw new TypeError("Function expected"); return f; }
+    var kind = contextIn.kind, key = kind === "getter" ? "get" : kind === "setter" ? "set" : "value";
+    var target = !descriptorIn && ctor ? contextIn["static"] ? ctor : ctor.prototype : null;
+    var descriptor = descriptorIn || (target ? Object.getOwnPropertyDescriptor(target, contextIn.name) : {});
+    var _, done = false;
+    for (var i = decorators.length - 1; i >= 0; i--) {
+        var context = {};
+        for (var p in contextIn) context[p] = p === "access" ? {} : contextIn[p];
+        for (var p in contextIn.access) context.access[p] = contextIn.access[p];
+        context.addInitializer = function (f) { if (done) throw new TypeError("Cannot add initializers after decoration has completed"); extraInitializers.push(accept(f || null)); };
+        var result = (0, decorators[i])(kind === "accessor" ? { get: descriptor.get, set: descriptor.set } : descriptor[key], context);
+        if (kind === "accessor") {
+            if (result === void 0) continue;
+            if (result === null || typeof result !== "object") throw new TypeError("Object expected");
+            if (_ = accept(result.get)) descriptor.get = _;
+            if (_ = accept(result.set)) descriptor.set = _;
+            if (_ = accept(result.init)) initializers.unshift(_);
+        }
+        else if (_ = accept(result)) {
+            if (kind === "field") initializers.unshift(_);
+            else descriptor[key] = _;
+        }
+    }
+    if (target) Object.defineProperty(target, contextIn.name, descriptor);
+    done = true;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.RelayCommand = void 0;
+const mobx_1 = require("mobx");
+const CounterFlag_1 = require("../core/CounterFlag");
+let RelayCommand = (() => {
+    var _a;
+    let _instanceExtraInitializers = [];
+    let _execute_decorators;
+    return _a = class RelayCommand {
+            constructor(executeFunc, canExecuteFunc) {
+                this.executeFunc = (__runInitializers(this, _instanceExtraInitializers), executeFunc);
+                this.canExecuteFunc = canExecuteFunc;
+                this.workingFlag = new CounterFlag_1.CounterFlag();
+                (0, mobx_1.makeObservable)(this);
+            }
+            canExecute(parameter) {
+                return this.canExecuteFunc?.(parameter) ?? true;
+            }
+            async execute(parameter) {
+                await this.workingFlag.using(async () => {
+                    await this.executeFunc(parameter);
+                });
+            }
+        },
+        (() => {
+            const _metadata = typeof Symbol === "function" && Symbol.metadata ? Object.create(null) : void 0;
+            _execute_decorators = [mobx_1.action];
+            __esDecorate(_a, null, _execute_decorators, { kind: "method", name: "execute", static: false, private: false, access: { has: obj => "execute" in obj, get: obj => obj.execute }, metadata: _metadata }, null, _instanceExtraInitializers);
+            if (_metadata) Object.defineProperty(_a, Symbol.metadata, { enumerable: true, configurable: true, writable: true, value: _metadata });
+        })(),
+        _a;
+})();
+exports.RelayCommand = RelayCommand;

package/dist/commands/index.d.ts

@@ -0,0 +1,2 @@
+export * from './RelayCommand';
+export * from './prop-helpers';

package/dist/commands/index.js

@@ -0,0 +1,18 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __exportStar = (this && this.__exportStar) || function(m, exports) {
+    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+__exportStar(require("./RelayCommand"), exports);
+__exportStar(require("./prop-helpers"), exports);

package/dist/commands/prop-helpers.d.ts

@@ -0,0 +1,5 @@
+import { RelayCommand } from './RelayCommand';
+export declare function bindCommand<T>(command: RelayCommand<T>, parameter?: any, disabledPropName?: string): {
+    [disabledPropName]: boolean;
+    onClick: () => Promise<void>;
+} | null;

package/dist/commands/prop-helpers.js

@@ -0,0 +1,13 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.bindCommand = bindCommand;
+function bindCommand(command, parameter = null, disabledPropName = 'disabled') {
+    if (!command) {
+        return null;
+    }
+    const isDisabled = !command.canExecute(parameter);
+    return {
+        onClick: () => command.execute(parameter),
+        [disabledPropName]: isDisabled,
+    };
+}

package/dist/core/CounterFlag.d.ts

@@ -0,0 +1,15 @@
+export declare class CounterFlag {
+    private counter;
+    constructor();
+    /**
+     * Activates the flag while executing the provided function.
+     * @param fn The function to execute while the flag is active.
+     */
+    using(fn: () => Promise<void>): Promise<void>;
+    /**
+     * Increments the counter and returns a disposable object that decreases the counter when disposed.
+     * @returns A disposable object that decreases the counter when disposed.
+     */
+    increment(): Disposable;
+    get isActive(): boolean;
+}

package/dist/core/CounterFlag.js

@@ -0,0 +1,152 @@
+"use strict";
+var __runInitializers = (this && this.__runInitializers) || function (thisArg, initializers, value) {
+    var useValue = arguments.length > 2;
+    for (var i = 0; i < initializers.length; i++) {
+        value = useValue ? initializers[i].call(thisArg, value) : initializers[i].call(thisArg);
+    }
+    return useValue ? value : void 0;
+};
+var __esDecorate = (this && this.__esDecorate) || function (ctor, descriptorIn, decorators, contextIn, initializers, extraInitializers) {
+    function accept(f) { if (f !== void 0 && typeof f !== "function") throw new TypeError("Function expected"); return f; }
+    var kind = contextIn.kind, key = kind === "getter" ? "get" : kind === "setter" ? "set" : "value";
+    var target = !descriptorIn && ctor ? contextIn["static"] ? ctor : ctor.prototype : null;
+    var descriptor = descriptorIn || (target ? Object.getOwnPropertyDescriptor(target, contextIn.name) : {});
+    var _, done = false;
+    for (var i = decorators.length - 1; i >= 0; i--) {
+        var context = {};
+        for (var p in contextIn) context[p] = p === "access" ? {} : contextIn[p];
+        for (var p in contextIn.access) context.access[p] = contextIn.access[p];
+        context.addInitializer = function (f) { if (done) throw new TypeError("Cannot add initializers after decoration has completed"); extraInitializers.push(accept(f || null)); };
+        var result = (0, decorators[i])(kind === "accessor" ? { get: descriptor.get, set: descriptor.set } : descriptor[key], context);
+        if (kind === "accessor") {
+            if (result === void 0) continue;
+            if (result === null || typeof result !== "object") throw new TypeError("Object expected");
+            if (_ = accept(result.get)) descriptor.get = _;
+            if (_ = accept(result.set)) descriptor.set = _;
+            if (_ = accept(result.init)) initializers.unshift(_);
+        }
+        else if (_ = accept(result)) {
+            if (kind === "field") initializers.unshift(_);
+            else descriptor[key] = _;
+        }
+    }
+    if (target) Object.defineProperty(target, contextIn.name, descriptor);
+    done = true;
+};
+var __addDisposableResource = (this && this.__addDisposableResource) || function (env, value, async) {
+    if (value !== null && value !== void 0) {
+        if (typeof value !== "object" && typeof value !== "function") throw new TypeError("Object expected.");
+        var dispose, inner;
+        if (async) {
+            if (!Symbol.asyncDispose) throw new TypeError("Symbol.asyncDispose is not defined.");
+            dispose = value[Symbol.asyncDispose];
+        }
+        if (dispose === void 0) {
+            if (!Symbol.dispose) throw new TypeError("Symbol.dispose is not defined.");
+            dispose = value[Symbol.dispose];
+            if (async) inner = dispose;
+        }
+        if (typeof dispose !== "function") throw new TypeError("Object not disposable.");
+        if (inner) dispose = function() { try { inner.call(this); } catch (e) { return Promise.reject(e); } };
+        env.stack.push({ value: value, dispose: dispose, async: async });
+    }
+    else if (async) {
+        env.stack.push({ async: true });
+    }
+    return value;
+};
+var __disposeResources = (this && this.__disposeResources) || (function (SuppressedError) {
+    return function (env) {
+        function fail(e) {
+            env.error = env.hasError ? new SuppressedError(e, env.error, "An error was suppressed during disposal.") : e;
+            env.hasError = true;
+        }
+        var r, s = 0;
+        function next() {
+            while (r = env.stack.pop()) {
+                try {
+                    if (!r.async && s === 1) return s = 0, env.stack.push(r), Promise.resolve().then(next);
+                    if (r.dispose) {
+                        var result = r.dispose.call(r.value);
+                        if (r.async) return s |= 2, Promise.resolve(result).then(next, function(e) { fail(e); return next(); });
+                    }
+                    else s |= 1;
+                }
+                catch (e) {
+                    fail(e);
+                }
+            }
+            if (s === 1) return env.hasError ? Promise.reject(env.error) : Promise.resolve();
+            if (env.hasError) throw env.error;
+        }
+        return next();
+    };
+})(typeof SuppressedError === "function" ? SuppressedError : function (error, suppressed, message) {
+    var e = new Error(message);
+    return e.name = "SuppressedError", e.error = error, e.suppressed = suppressed, e;
+});
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.CounterFlag = void 0;
+const mobx_1 = require("mobx");
+let CounterFlag = (() => {
+    var _a;
+    let _instanceExtraInitializers = [];
+    let _counter_decorators;
+    let _counter_initializers = [];
+    let _counter_extraInitializers = [];
+    let _using_decorators;
+    let _increment_decorators;
+    let _get_isActive_decorators;
+    return _a = class CounterFlag {
+            constructor() {
+                this.counter = (__runInitializers(this, _instanceExtraInitializers), __runInitializers(this, _counter_initializers, 0));
+                __runInitializers(this, _counter_extraInitializers);
+                (0, mobx_1.makeObservable)(this);
+            }
+            /**
+             * Activates the flag while executing the provided function.
+             * @param fn The function to execute while the flag is active.
+             */
+            async using(fn) {
+                const env_1 = { stack: [], error: void 0, hasError: false };
+                try {
+                    const _ = __addDisposableResource(env_1, this.increment(), false);
+                    await fn();
+                }
+                catch (e_1) {
+                    env_1.error = e_1;
+                    env_1.hasError = true;
+                }
+                finally {
+                    __disposeResources(env_1);
+                }
+            }
+            /**
+             * Increments the counter and returns a disposable object that decreases the counter when disposed.
+             * @returns A disposable object that decreases the counter when disposed.
+             */
+            increment() {
+                this.counter++;
+                return {
+                    [Symbol.dispose]: () => (0, mobx_1.runInAction)(() => this.counter--),
+                };
+            }
+            get isActive() {
+                return this.counter > 0;
+            }
+        },
+        (() => {
+            const _metadata = typeof Symbol === "function" && Symbol.metadata ? Object.create(null) : void 0;
+            _counter_decorators = [mobx_1.observable];
+            _using_decorators = [mobx_1.action];
+            _increment_decorators = [mobx_1.action];
+            _get_isActive_decorators = [mobx_1.computed];
+            __esDecorate(_a, null, _using_decorators, { kind: "method", name: "using", static: false, private: false, access: { has: obj => "using" in obj, get: obj => obj.using }, metadata: _metadata }, null, _instanceExtraInitializers);
+            __esDecorate(_a, null, _increment_decorators, { kind: "method", name: "increment", static: false, private: false, access: { has: obj => "increment" in obj, get: obj => obj.increment }, metadata: _metadata }, null, _instanceExtraInitializers);
+            __esDecorate(_a, null, _get_isActive_decorators, { kind: "getter", name: "isActive", static: false, private: false, access: { has: obj => "isActive" in obj, get: obj => obj.isActive }, metadata: _metadata }, null, _instanceExtraInitializers);
+            __esDecorate(null, null, _counter_decorators, { kind: "field", name: "counter", static: false, private: false, access: { has: obj => "counter" in obj, get: obj => obj.counter, set: (obj, value) => { obj.counter = value; } }, metadata: _metadata }, _counter_initializers, _counter_extraInitializers);
+            if (_metadata) Object.defineProperty(_a, Symbol.metadata, { enumerable: true, configurable: true, writable: true, value: _metadata });
+        })(),
+        _a;
+})();
+exports.CounterFlag = CounterFlag;

package/dist/core/index.d.ts

@@ -0,0 +1 @@
+export * from './CounterFlag';

package/dist/core/index.js

@@ -0,0 +1,17 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __exportStar = (this && this.__exportStar) || function(m, exports) {
+    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+__exportStar(require("./CounterFlag"), exports);

package/dist/index.d.ts

@@ -0,0 +1,3 @@
+export * from './core';
+export * from './commands';
+export * from './interaction';

package/dist/index.js

@@ -0,0 +1,19 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __exportStar = (this && this.__exportStar) || function(m, exports) {
+    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+__exportStar(require("./core"), exports);
+__exportStar(require("./commands"), exports);
+__exportStar(require("./interaction"), exports);

package/dist/interaction/CommonInteractionResponses.d.ts

@@ -0,0 +1,24 @@
+import { InteractionResponse } from "./InteractionResponse";
+/** Contains predefined common responses and their ID. */
+export declare class CommonInteractionResponses {
+    static get ok(): {
+        id: string;
+        action: InteractionResponse;
+    };
+    static get cancel(): {
+        id: string;
+        action: InteractionResponse;
+    };
+    static get close(): {
+        id: string;
+        action: InteractionResponse;
+    };
+    static get yes(): {
+        id: string;
+        action: InteractionResponse;
+    };
+    static get no(): {
+        id: string;
+        action: InteractionResponse;
+    };
+}

package/dist/interaction/CommonInteractionResponses.js

@@ -0,0 +1,13 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.CommonInteractionResponses = void 0;
+const InteractionResponse_1 = require("./InteractionResponse");
+/** Contains predefined common responses and their ID. */
+class CommonInteractionResponses {
+    static get ok() { return { id: 'ok', action: new InteractionResponse_1.InteractionResponse('ok', 'OK') }; }
+    static get cancel() { return { id: 'cancel', action: new InteractionResponse_1.InteractionResponse('cancel', 'Cancel') }; }
+    static get close() { return { id: 'close', action: new InteractionResponse_1.InteractionResponse('close', 'Close') }; }
+    static get yes() { return { id: 'yes', action: new InteractionResponse_1.InteractionResponse('yes', 'Yes') }; }
+    static get no() { return { id: 'no', action: new InteractionResponse_1.InteractionResponse('no', 'No') }; }
+}
+exports.CommonInteractionResponses = CommonInteractionResponses;

package/dist/interaction/Interact.d.ts

@@ -0,0 +1,49 @@
+import { InteractionResponse } from "./InteractionResponse";
+import { InteractionManager } from "./InteractionManager";
+import { RelayCommand } from "../commands/RelayCommand";
+import { ReportInteractionOperationFinished } from "./ReportInteractionOperationFinished";
+/** A syntactic-sugar util for working with interactions. */
+export declare class Interact {
+    /**
+     * Interact with the user with default OK and Cancel responses.
+     * @param interactionManager In interaction manager to use.
+     * @param title The title of the interaction.
+     * @param content The content of the interaction.
+     * @returns true if @constant CommonInteractionResponses.Ok.id was selected, or false if @constant CommonInteractionResponses.Cancel.id was selected.
+     */
+    static withOkCancel(interactionManager: InteractionManager, title: string | any, content: string | any): Promise<boolean>;
+    /**
+     * Interact with the user with a default OK action.
+     * @param interactionManager In interaction manager to use.
+     * @param title The title of the interaction.
+     * @param content The content of the interaction.
+     * @returns Should always return true.
+     */
+    static withOk(interactionManager: InteractionManager, title: string | any, content: string | any): Promise<boolean>;
+    /**
+     * Interact with the user with default OK and Cancel responses, and a command to execute when the OK action is activated.
+     * @param interactionManager In interaction manager to use.
+     * @param title The title of the interaction.
+     * @param content The content of the interaction.
+     * @param okCommand The comment to execute when the OK action is selected.
+     * @returns true if @constant CommonInteractionResponses.Ok.id was selected, or false if @constant CommonInteractionResponses.Cancel.id was selected.
+     */
+    static withOkCommand(interactionManager: InteractionManager, title: string | any, content: ReportInteractionOperationFinished, okCommand: RelayCommand): Promise<boolean>;
+    /**
+     * Interact with the user with default Yes and No responses.
+     * @param interactionManager In interaction manager to use.
+     * @param title The title of the interaction.
+     * @param content The content of the interaction.
+     * @returns true if @constant CommonInteractionResponses.Yes.id was selected, or false if @constant CommonInteractionResponses.No.id was selected.
+     */
+    static withYesNo(interactionManager: InteractionManager, title: string | any, content: string | any): Promise<boolean>;
+    /**
+     * Interact with the user with a custom action and Cancel action.
+     * @param interactionManager In interaction manager to use.
+     * @param title The title of the interaction.
+     * @param content The content of the interaction.
+     * @param action The custom action that's treated as main action.
+     * @returns true if @constant CommonInteractionResponses.Ok.id was selected, or false if @constant CommonInteractionResponses.Cancel.id was selected.
+     */
+    static withCustomAndCancel(interactionManager: InteractionManager, title: string | any, content: string | any, action: InteractionResponse): Promise<boolean>;
+}

package/dist/interaction/Interact.js

@@ -0,0 +1,87 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Interact = void 0;
+const InteractionResponse_1 = require("./InteractionResponse");
+const RelayCommand_1 = require("../commands/RelayCommand");
+const CommonInteractionResponses_1 = require("./CommonInteractionResponses");
+/** A syntactic-sugar util for working with interactions. */
+class Interact {
+    /**
+     * Interact with the user with default OK and Cancel responses.
+     * @param interactionManager In interaction manager to use.
+     * @param title The title of the interaction.
+     * @param content The content of the interaction.
+     * @returns true if @constant CommonInteractionResponses.Ok.id was selected, or false if @constant CommonInteractionResponses.Cancel.id was selected.
+     */
+    static async withOkCancel(interactionManager, title, content) {
+        return await this.withCustomAndCancel(interactionManager, title, content, CommonInteractionResponses_1.CommonInteractionResponses.ok.action);
+    }
+    /**
+     * Interact with the user with a default OK action.
+     * @param interactionManager In interaction manager to use.
+     * @param title The title of the interaction.
+     * @param content The content of the interaction.
+     * @returns Should always return true.
+     */
+    static async withOk(interactionManager, title, content) {
+        return (await interactionManager.requestInteraction({
+            title,
+            content,
+            responses: [CommonInteractionResponses_1.CommonInteractionResponses.ok.action],
+            defaultActionId: CommonInteractionResponses_1.CommonInteractionResponses.ok.id,
+        })) === CommonInteractionResponses_1.CommonInteractionResponses.ok.id;
+    }
+    /**
+     * Interact with the user with default OK and Cancel responses, and a command to execute when the OK action is activated.
+     * @param interactionManager In interaction manager to use.
+     * @param title The title of the interaction.
+     * @param content The content of the interaction.
+     * @param okCommand The comment to execute when the OK action is selected.
+     * @returns true if @constant CommonInteractionResponses.Ok.id was selected, or false if @constant CommonInteractionResponses.Cancel.id was selected.
+     */
+    static async withOkCommand(interactionManager, title, content, okCommand) {
+        return await this.withCustomAndCancel(interactionManager, title, content, new InteractionResponse_1.InteractionResponse(CommonInteractionResponses_1.CommonInteractionResponses.ok.id, CommonInteractionResponses_1.CommonInteractionResponses.ok.action.title, okCommand));
+    }
+    /**
+     * Interact with the user with default Yes and No responses.
+     * @param interactionManager In interaction manager to use.
+     * @param title The title of the interaction.
+     * @param content The content of the interaction.
+     * @returns true if @constant CommonInteractionResponses.Yes.id was selected, or false if @constant CommonInteractionResponses.No.id was selected.
+     */
+    static async withYesNo(interactionManager, title, content) {
+        return (await interactionManager.requestInteraction({
+            title,
+            content,
+            responses: [CommonInteractionResponses_1.CommonInteractionResponses.yes.action, CommonInteractionResponses_1.CommonInteractionResponses.no.action],
+            defaultActionId: CommonInteractionResponses_1.CommonInteractionResponses.yes.id,
+            cancelActionId: CommonInteractionResponses_1.CommonInteractionResponses.no.id,
+        })) === CommonInteractionResponses_1.CommonInteractionResponses.yes.id;
+    }
+    /**
+     * Interact with the user with a custom action and Cancel action.
+     * @param interactionManager In interaction manager to use.
+     * @param title The title of the interaction.
+     * @param content The content of the interaction.
+     * @param action The custom action that's treated as main action.
+     * @returns true if @constant CommonInteractionResponses.Ok.id was selected, or false if @constant CommonInteractionResponses.Cancel.id was selected.
+     */
+    static async withCustomAndCancel(interactionManager, title, content, action) {
+        if (action.command && !('onOperationFinished' in content)) {
+            throw Error('Missing onOperationFinished property on the content when using command in responses. Do not forget a default assignment to undefined.');
+        }
+        return (await interactionManager.requestInteraction({
+            title,
+            content,
+            responses: [
+                action,
+                new InteractionResponse_1.InteractionResponse(CommonInteractionResponses_1.CommonInteractionResponses.cancel.id, CommonInteractionResponses_1.CommonInteractionResponses.cancel.action.title, 
+                // A Cancel action that becomes disabled when the OK command (if exists) is active:
+                new RelayCommand_1.RelayCommand(() => content?.onOperationFinished?.call(CommonInteractionResponses_1.CommonInteractionResponses.cancel.id), () => action.command?.workingFlag?.isActive !== true)),
+            ],
+            defaultActionId: action.id,
+            cancelActionId: CommonInteractionResponses_1.CommonInteractionResponses.cancel.id,
+        })) === action.id;
+    }
+}
+exports.Interact = Interact;

package/dist/interaction/InteractionManager.d.ts

@@ -0,0 +1,5 @@
+import { InteractionRequest } from './InteractionRequest';
+export interface InteractionManager {
+    requestInteraction(interactionRequest: InteractionRequest): Promise<string | void>;
+}
+export declare const InteractionManager: unique symbol;

package/dist/interaction/InteractionManager.js

@@ -0,0 +1,4 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.InteractionManager = void 0;
+exports.InteractionManager = Symbol('InteractionManager');

package/dist/interaction/InteractionRequest.d.ts

@@ -0,0 +1,14 @@
+import { InteractionResponse } from './InteractionResponse';
+/** Represents a request object with info on how to interact with the user from the view model. */
+export interface InteractionRequest {
+    /** The title of the request. Can be a string, or a view model on VM-first approach. */
+    title: string | any;
+    /** The content of the request. Can be a string, or a view model on VM-first approach. */
+    content: string | any;
+    /** A list of possible actions for the user to choose from as a response for the interaction request. */
+    responses?: InteractionResponse[];
+    /** The ID of the action that is considered to be a cancellation of the flow. */
+    cancelActionId?: string;
+    /** The ID of the action that is the preferred action for the user. In many cases this action can be highlighted and even be activated with the Enter key. */
+    defaultActionId?: string;
+}

package/dist/interaction/InteractionRequest.js

@@ -0,0 +1,2 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });

package/dist/interaction/InteractionResponse.d.ts

@@ -0,0 +1,21 @@
+import { RelayCommand } from "../commands/RelayCommand";
+/** Represents an action for the user to respond on an interaction request. */
+export declare class InteractionResponse {
+    /** The ID of the response. */
+    readonly id: string;
+    /** The title of the response. */
+    readonly title: string;
+    /** An optional command to invoke as the user responds. */
+    readonly command?: RelayCommand<void> | undefined;
+    /** An optional icon. */
+    readonly icon?: string | undefined;
+    constructor(
+    /** The ID of the response. */
+    id: string, 
+    /** The title of the response. */
+    title: string, 
+    /** An optional command to invoke as the user responds. */
+    command?: RelayCommand<void> | undefined, 
+    /** An optional icon. */
+    icon?: string | undefined);
+}

package/dist/interaction/InteractionResponse.js

@@ -0,0 +1,21 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.InteractionResponse = void 0;
+/** Represents an action for the user to respond on an interaction request. */
+class InteractionResponse {
+    constructor(
+    /** The ID of the response. */
+    id, 
+    /** The title of the response. */
+    title, 
+    /** An optional command to invoke as the user responds. */
+    command, 
+    /** An optional icon. */
+    icon) {
+        this.id = id;
+        this.title = title;
+        this.command = command;
+        this.icon = icon;
+    }
+}
+exports.InteractionResponse = InteractionResponse;

package/dist/interaction/ReportInteractionOperationFinished.d.ts

@@ -0,0 +1,3 @@
+export interface ReportInteractionOperationFinished {
+    onOperationFinished: ((actionId: string) => void) | null;
+}

package/dist/interaction/ReportInteractionOperationFinished.js

@@ -0,0 +1,2 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });

package/dist/interaction/SingleConcurrentInteractionManager.d.ts

@@ -0,0 +1,9 @@
+import { InteractionManager } from "./InteractionManager";
+import { InteractionRequest } from "./InteractionRequest";
+export declare class SingleConcurrentInteractionManager implements InteractionManager {
+    interactionRequest: InteractionRequest | null;
+    private resolveFunc?;
+    constructor();
+    requestInteraction(interactionRequest: InteractionRequest): Promise<string | void>;
+    respond(interactionResponse?: string): void;
+}

package/dist/interaction/SingleConcurrentInteractionManager.js

@@ -0,0 +1,78 @@
+"use strict";
+var __runInitializers = (this && this.__runInitializers) || function (thisArg, initializers, value) {
+    var useValue = arguments.length > 2;
+    for (var i = 0; i < initializers.length; i++) {
+        value = useValue ? initializers[i].call(thisArg, value) : initializers[i].call(thisArg);
+    }
+    return useValue ? value : void 0;
+};
+var __esDecorate = (this && this.__esDecorate) || function (ctor, descriptorIn, decorators, contextIn, initializers, extraInitializers) {
+    function accept(f) { if (f !== void 0 && typeof f !== "function") throw new TypeError("Function expected"); return f; }
+    var kind = contextIn.kind, key = kind === "getter" ? "get" : kind === "setter" ? "set" : "value";
+    var target = !descriptorIn && ctor ? contextIn["static"] ? ctor : ctor.prototype : null;
+    var descriptor = descriptorIn || (target ? Object.getOwnPropertyDescriptor(target, contextIn.name) : {});
+    var _, done = false;
+    for (var i = decorators.length - 1; i >= 0; i--) {
+        var context = {};
+        for (var p in contextIn) context[p] = p === "access" ? {} : contextIn[p];
+        for (var p in contextIn.access) context.access[p] = contextIn.access[p];
+        context.addInitializer = function (f) { if (done) throw new TypeError("Cannot add initializers after decoration has completed"); extraInitializers.push(accept(f || null)); };
+        var result = (0, decorators[i])(kind === "accessor" ? { get: descriptor.get, set: descriptor.set } : descriptor[key], context);
+        if (kind === "accessor") {
+            if (result === void 0) continue;
+            if (result === null || typeof result !== "object") throw new TypeError("Object expected");
+            if (_ = accept(result.get)) descriptor.get = _;
+            if (_ = accept(result.set)) descriptor.set = _;
+            if (_ = accept(result.init)) initializers.unshift(_);
+        }
+        else if (_ = accept(result)) {
+            if (kind === "field") initializers.unshift(_);
+            else descriptor[key] = _;
+        }
+    }
+    if (target) Object.defineProperty(target, contextIn.name, descriptor);
+    done = true;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.SingleConcurrentInteractionManager = void 0;
+const mobx_1 = require("mobx");
+let SingleConcurrentInteractionManager = (() => {
+    var _a;
+    let _instanceExtraInitializers = [];
+    let _interactionRequest_decorators;
+    let _interactionRequest_initializers = [];
+    let _interactionRequest_extraInitializers = [];
+    let _requestInteraction_decorators;
+    let _respond_decorators;
+    return _a = class SingleConcurrentInteractionManager {
+            constructor() {
+                this.interactionRequest = (__runInitializers(this, _instanceExtraInitializers), __runInitializers(this, _interactionRequest_initializers, { title: '', content: '' }));
+                this.resolveFunc = __runInitializers(this, _interactionRequest_extraInitializers);
+                (0, mobx_1.makeObservable)(this);
+                this.interactionRequest = null;
+            }
+            requestInteraction(interactionRequest) {
+                return new Promise((resolve) => {
+                    this.interactionRequest = interactionRequest;
+                    this.resolveFunc = resolve;
+                });
+            }
+            respond(interactionResponse) {
+                this.interactionRequest = null;
+                this.resolveFunc(interactionResponse);
+                this.resolveFunc = undefined;
+            }
+        },
+        (() => {
+            const _metadata = typeof Symbol === "function" && Symbol.metadata ? Object.create(null) : void 0;
+            _interactionRequest_decorators = [mobx_1.observable];
+            _requestInteraction_decorators = [mobx_1.action];
+            _respond_decorators = [mobx_1.action];
+            __esDecorate(_a, null, _requestInteraction_decorators, { kind: "method", name: "requestInteraction", static: false, private: false, access: { has: obj => "requestInteraction" in obj, get: obj => obj.requestInteraction }, metadata: _metadata }, null, _instanceExtraInitializers);
+            __esDecorate(_a, null, _respond_decorators, { kind: "method", name: "respond", static: false, private: false, access: { has: obj => "respond" in obj, get: obj => obj.respond }, metadata: _metadata }, null, _instanceExtraInitializers);
+            __esDecorate(null, null, _interactionRequest_decorators, { kind: "field", name: "interactionRequest", static: false, private: false, access: { has: obj => "interactionRequest" in obj, get: obj => obj.interactionRequest, set: (obj, value) => { obj.interactionRequest = value; } }, metadata: _metadata }, _interactionRequest_initializers, _interactionRequest_extraInitializers);
+            if (_metadata) Object.defineProperty(_a, Symbol.metadata, { enumerable: true, configurable: true, writable: true, value: _metadata });
+        })(),
+        _a;
+})();
+exports.SingleConcurrentInteractionManager = SingleConcurrentInteractionManager;

package/dist/interaction/index.d.ts

@@ -0,0 +1,8 @@
+export * from './InteractionManager';
+export * from './InteractionRequest';
+export * from './wireUpSingleConcurrentInteractionHandler';
+export * from './SingleConcurrentInteractionManager';
+export * from './ReportInteractionOperationFinished';
+export * from './Interact';
+export * from './InteractionResponse';
+export * from './CommonInteractionResponses';

package/dist/interaction/index.js

@@ -0,0 +1,24 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __exportStar = (this && this.__exportStar) || function(m, exports) {
+    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+__exportStar(require("./InteractionManager"), exports);
+__exportStar(require("./InteractionRequest"), exports);
+__exportStar(require("./wireUpSingleConcurrentInteractionHandler"), exports);
+__exportStar(require("./SingleConcurrentInteractionManager"), exports);
+__exportStar(require("./ReportInteractionOperationFinished"), exports);
+__exportStar(require("./Interact"), exports);
+__exportStar(require("./InteractionResponse"), exports);
+__exportStar(require("./CommonInteractionResponses"), exports);

package/dist/interaction/wireUpSingleConcurrentInteractionHandler.d.ts

@@ -0,0 +1,9 @@
+import { SingleConcurrentInteractionManager } from './SingleConcurrentInteractionManager';
+export declare function wireUpSingleConcurrentInteractionHandler(interactionManager: SingleConcurrentInteractionManager): {
+    isCancelable: boolean | undefined;
+    nonCommonActionExists: boolean;
+    onModalKeyDown: (e: {
+        key: string;
+        stopPropagation: Function;
+    }) => void;
+} | null;

package/dist/interaction/wireUpSingleConcurrentInteractionHandler.js

@@ -0,0 +1,45 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.wireUpSingleConcurrentInteractionHandler = wireUpSingleConcurrentInteractionHandler;
+const CommonInteractionResponses_1 = require("./CommonInteractionResponses");
+const commonActionIds = [
+    CommonInteractionResponses_1.CommonInteractionResponses.ok.id,
+    CommonInteractionResponses_1.CommonInteractionResponses.cancel.id,
+    CommonInteractionResponses_1.CommonInteractionResponses.yes.id,
+    CommonInteractionResponses_1.CommonInteractionResponses.no.id,
+    CommonInteractionResponses_1.CommonInteractionResponses.close.id,
+];
+function containsNonCommonAction(actions) {
+    if (!actions) {
+        return false;
+    }
+    return actions.some(action => !commonActionIds.includes(action.id));
+}
+function wireUpSingleConcurrentInteractionHandler(interactionManager) {
+    const { interactionRequest } = interactionManager;
+    if (!interactionRequest) {
+        return null;
+    }
+    if (!(typeof interactionRequest.content === 'string') && 'onOperationFinished' in interactionRequest.content) {
+        // Register a handler for the onOperationFinished event that will end the interaction:
+        interactionRequest.content.onOperationFinished = (actionId) => interactionManager.respond(actionId);
+    }
+    const onModalKeyDown = (e) => {
+        if (!interactionRequest.defaultActionId || !interactionRequest.responses || e.key !== 'Enter') {
+            return;
+        }
+        const defaultAction = interactionRequest.responses.find(a => a.id === interactionRequest.defaultActionId);
+        if (defaultAction?.command) {
+            if (defaultAction.command.canExecute()) {
+                defaultAction.command.execute();
+            }
+        }
+        else if (defaultAction) {
+            interactionManager.respond(interactionRequest.defaultActionId);
+        }
+        e.stopPropagation();
+    };
+    const nonCommonActionExists = containsNonCommonAction(interactionRequest.responses);
+    const isCancelable = interactionRequest.responses?.some(a => a.id === interactionRequest.cancelActionId);
+    return { isCancelable, nonCommonActionExists, onModalKeyDown };
+}

package/package.json

@@ -0,0 +1,55 @@
+{
+  "name": "mvvm-mobx",
+  "version": "1.0.0",
+  "description": "MVVM pattern implementation with MobX for reactive state management",
+  "main": "dist/index.js",
+  "types": "dist/index.d.ts",
+  "files": [
+    "dist"
+  ],
+  "scripts": {
+    "build": "tsc",
+    "build:watch": "tsc --watch",
+    "test": "jest --passWithNoTests",
+    "test:watch": "jest --watch",
+    "lint": "eslint src --ext .ts",
+    "lint:fix": "eslint src --ext .ts --fix",
+    "format": "prettier --write \"src/**/*.ts\"",
+    "clean": "rm -rf dist",
+    "prepublishOnly": "npm run build && npm run test"
+  },
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/haim-b/mvvm-mobx.git"
+  },
+  "keywords": [
+    "mvvm",
+    "mobx",
+    "state-management",
+    "reactive"
+  ],
+  "author": "haim-b",
+  "license": "MIT",
+  "devDependencies": {
+    "@types/jest": "^29.5.0",
+    "@types/node": "^20.0.0",
+    "@typescript-eslint/eslint-plugin": "^6.0.0",
+    "@typescript-eslint/parser": "^6.0.0",
+    "eslint": "^8.0.0",
+    "jest": "^29.5.0",
+    "logger-interface": "^0.1.1",
+    "mobx": "^6.0.0",
+    "prettier": "^3.0.0",
+    "ts-jest": "^29.1.0",
+    "typescript": "^5.0.0"
+  },
+  "peerDependencies": {
+    "logger-interface": "^0.1.1",
+    "mobx": "^6.0.0"
+  },
+  "peerDependenciesMeta": {
+    "mobx": {
+      "optional": false
+    }
+  }
+}