@singularsystems/neo-react 1.0.0-alpha.3 → 1.0.0-beta.1

package/CHANGELOG.md

@@ -0,0 +1,98 @@
+# Version 1.x
+
+Version 1 of neo-react upgrades react to version 18, and mobX to version 6. Both of these are major updates and will require you to make code changes to your project.
+
+## Testing
+
+In addition to requiring code / syntax changes, both React 18, and Mobx 6 behave differently enough to their previous versions that runtime bugs may be introduced into your project. You should only update to this version when you and the client have enough time to test the project thoroughly. If you find any issues, please report them so this document can be updated.
+
+The project changes required are detailed below:
+
+## Package changes:
+
+* Update all neo packages to the latest 1.x version.
+* Update the following packages to the latest version (these were the latest at time of writing):
+    * dependencies
+        * `"axios": "1.4.0"`,
+        * `"mobx": "6.9.0"`,
+        * `"mobx-react": "7.6.0"`,
+        * `"react": "18.2.0"`,
+        * `"react-dom": "18.2.0"`,
+        * `"react-router": "5.2.1"`, - Must be version 5.x
+        * `"react-router-dom": "5.3.0"`, - Must be version 5.x
+        * `"react-select": "5.7.3"`,
+        
+    * devDependencies
+        * `"@types/react": "18.2.4"`,
+        * `"@types/react-dom": "18.2.3"`,
+        * `"@types/react-router": "5.1.17"`, - Must be version 5.x
+        * `"@types/react-router-dom": "5.3.3"`, - Must be version 5.x
+    * resolutions
+        * remove all entries
+* delete yarn.lock, and run `yarn install`
+
+## Fix errors
+
+If any of your components allow children, React 18 requires to you have an explicit `children` prop. Add this to the props definition of the component:
+
+```typescript
+interface MyProps {
+    ...
+    children: React.ReactNode;
+}
+
+// or if the component has no other props:
+
+MyComponent extends React.Component<{ children: React.ReactNode }> {
+    ...
+}
+```
+
+The React root api has also changed in version 18. Make the following changes to your `index.tsx` file:
+
+Your existing code will look something like this:
+
+```typescript
+import ReactDOM from 'react-dom';
+...
+// React init
+ReactDOM.render(
+    renderComponent,
+    document.getElementById('root') as HTMLElement
+);
+```
+
+Change the `ReactDOM` import, and the react init code:
+
+```typescript
+import ReactDOM from 'react-dom/client';
+...
+// React init
+const root = ReactDOM.createRoot(document.getElementById('root') as HTMLElement);
+root.render(renderComponent);
+```
+
+## Mobx
+
+Before mobx 6, you could mark a property as being observable by adding an `@observable` decorator to the property. In mobx 6 this no longer works ([read more](https://mobx.js.org/migrating-from-4-or-5.html)). 
+
+For any class that extends `ModelBase`, `ValueObject`, `ViewModelBase` etc, this change is handled by neo, and you will not need to change any code.
+
+For other classes, you will need to add initialisation code to the constructor.
+
+* Search for `@observable` in your project. (In most projects this will be in the Sidebar and AppLayout components)
+* In the constructor of the class that contains the property, add:
+
+```typescript
+makeObservable(this);
+```
+
+### Decorators on neo models
+
+If you try use mobx decorators on any models that extend `ModelBase`, `ValueObject` or `ViewModelBase`, you will receive this error:
+
+> [MobX] makeObservable second arg must be nullish when using decorators. Mixing @decorator syntax with annotations is not supported.
+
+This is most likely because you have used an `@action` decorator on a method. Neo now marks all methods as actions, so you can remove the `@action` decorator.
+
+* Search for `@action` in your project. Remove the decorator **only** if the class extends `ModelBase` (and its decendents e.g. `ValueObject`) or `ViewModelBase`.

package/README.md

@@ -4,6 +4,10 @@ This project contains the react/mobx implementation of the neo client library.
 
 It also contains UI components built for react.
 
+## Changelog
+
+View the changelog [here](./CHANGELOG.md).
+
 ## Testing
 
 To debug the tests, you need to add the following to .vscode\launch.json

package/dist/Modules/NeoReactModule.d.ts

@@ -1,4 +1,4 @@
-import { AppServices } from '@singularsystems/neo-core';
-import '../React/DataView';
-declare const neoReactModule: AppServices.Module;
-export default neoReactModule;
+import { AppServices } from '@singularsystems/neo-core';
+import '../React/DataView';
+declare const neoReactModule: AppServices.Module;
+export default neoReactModule;

package/dist/Modules/NeoReactModule.js

@@ -1,26 +1,28 @@
-import { AppServices } from '@singularsystems/neo-core';
-import { NeoReactTypes } from './Types';
-import { ReactModelCreator } from '../React/ReactModelCreator';
-import { ErrorHandler } from '../ReactComponents/ErrorHandler';
-import '../React/DataView';
-import { PageLeaveHandler } from '../Routing/PageLeaveHandler';
-import NavigationHelper from '../Routing/NavigationHelper';
-import { runReactSetup } from './ReactSetup';
-import { AutoRunnerFactory } from '../React/AutoRunner';
-import { RoutingState } from '../Routing/RoutingState';
-import { ContextMenuState } from '../ReactComponents/ContextMenu/ContextMenuState';
-import { DisposeHelper } from '../Services/DisposeHelper';
-import Decimal from 'decimal.js-light';
-var neoReactModule = new AppServices.Module("neo-react", function (container) {
-    container.bind(AppServices.NeoTypes.Core.AutoRunnerFactory).to(AutoRunnerFactory).inSingletonScope();
-    container.bind(AppServices.NeoTypes.Core.ModelCreator).to(ReactModelCreator).inTransientScope();
-    container.bind(AppServices.NeoTypes.Misc.DecimalType).toConstantValue(Decimal);
-    container.bind(AppServices.NeoTypes.UI.ErrorHandler).to(ErrorHandler).inSingletonScope();
-    container.bind(AppServices.NeoTypes.UI.GlobalContextMenuState).toConstantValue(new ContextMenuState());
-    container.bind(AppServices.NeoTypes.Routing.PageLeaveHandler).to(PageLeaveHandler).inSingletonScope();
-    container.bind(NeoReactTypes.Routing.GlobalRoutingState).to(RoutingState).inSingletonScope();
-    container.bind(NeoReactTypes.Routing.NavigationHelper).to(NavigationHelper).inSingletonScope();
-    container.bind(NeoReactTypes.Services.DisposeHelper).to(DisposeHelper).inTransientScope();
-    runReactSetup(container);
-});
-export default neoReactModule;
+import { AppServices } from '@singularsystems/neo-core';
+import { NeoReactTypes } from './Types';
+import { ReactModelCreator } from '../React/ReactModelCreator';
+import { ErrorHandler } from '../ReactComponents/ErrorHandler';
+import '../React/DataView';
+import { PageLeaveHandler } from '../Routing/PageLeaveHandler';
+import NavigationHelper from '../Routing/NavigationHelper';
+import { runReactSetup } from './ReactSetup';
+import { AutoRunnerFactory } from '../React/AutoRunner';
+import { RoutingState } from '../Routing/RoutingState';
+import { ContextMenuState } from '../ReactComponents/ContextMenu/ContextMenuState';
+import { DisposeHelper } from '../Services/DisposeHelper';
+import Decimal from 'decimal.js-light';
+import { IconFactory } from '../ReactComponents/Icons/IconFactory';
+var neoReactModule = new AppServices.Module("neo-react", function (container) {
+    container.bind(AppServices.NeoTypes.Core.AutoRunnerFactory).to(AutoRunnerFactory).inSingletonScope();
+    container.bind(AppServices.NeoTypes.Core.ModelCreator).to(ReactModelCreator).inTransientScope();
+    container.bind(AppServices.NeoTypes.Misc.DecimalType).toConstantValue(Decimal);
+    container.bind(AppServices.NeoTypes.UI.ErrorHandler).to(ErrorHandler).inSingletonScope();
+    container.bind(AppServices.NeoTypes.UI.GlobalContextMenuState).toConstantValue(new ContextMenuState());
+    container.bind(AppServices.NeoTypes.Routing.PageLeaveHandler).to(PageLeaveHandler).inSingletonScope();
+    container.bind(NeoReactTypes.Components.IconFactory).to(IconFactory).inSingletonScope();
+    container.bind(NeoReactTypes.Routing.GlobalRoutingState).to(RoutingState).inSingletonScope();
+    container.bind(NeoReactTypes.Routing.NavigationHelper).to(NavigationHelper).inSingletonScope();
+    container.bind(NeoReactTypes.Services.DisposeHelper).to(DisposeHelper).inTransientScope();
+    runReactSetup(container);
+});
+export default neoReactModule;

package/dist/Modules/ReactSetup.d.ts

@@ -1,2 +1,2 @@
-import { NeoContainer } from '@singularsystems/neo-core/dist/AppServices/NeoContainer';
-export declare function runReactSetup(container: NeoContainer): void;
+import { NeoContainer } from '@singularsystems/neo-core/dist/AppServices/NeoContainer';
+export declare function runReactSetup(container: NeoContainer): void;

package/dist/Modules/ReactSetup.js

@@ -1,17 +1,17 @@
-import { AppServices, Utils } from '@singularsystems/neo-core';
-import { configure, runInAction, untracked } from 'mobx';
-import React from 'react';
-import { NeoReactTypes } from './Types';
-export function runReactSetup(container) {
-    Utils.peek = function (target, propertyName) {
-        return untracked(function () { return target[propertyName]; });
-    };
-    Utils.suppressHtmlEncode = function (html) {
-        return React.createElement("div", { dangerouslySetInnerHTML: { __html: html } });
-    };
-    Utils.batchUpdate = runInAction;
-    window.addEventListener("beforeunload", function (e) {
-        container.get(AppServices.NeoTypes.Routing.PageLeaveHandler).onWindowUnload(container.get(NeoReactTypes.Routing.GlobalRoutingState).currentView, e);
-    });
-    configure({ enforceActions: "never", useProxies: "never" });
-}
+import { AppServices, Utils } from '@singularsystems/neo-core';
+import { configure, runInAction, untracked } from 'mobx';
+import React from 'react';
+import { NeoReactTypes } from './Types';
+export function runReactSetup(container) {
+    Utils.peek = function (target, propertyName) {
+        return untracked(function () { return target[propertyName]; });
+    };
+    Utils.suppressHtmlEncode = function (html) {
+        return React.createElement("div", { dangerouslySetInnerHTML: { __html: html } });
+    };
+    Utils.batchUpdate = runInAction;
+    window.addEventListener("beforeunload", function (e) {
+        container.get(AppServices.NeoTypes.Routing.PageLeaveHandler).onWindowUnload(container.get(NeoReactTypes.Routing.GlobalRoutingState).currentView, e);
+    });
+    configure({ enforceActions: "never", useProxies: "never" });
+}

package/dist/Modules/Types.d.ts

@@ -1,61 +1,63 @@
-import { AppServices } from '@singularsystems/neo-core';
-import { INavigationHelper } from '../Routing/NavigationHelper';
-import { RoutingState } from '../Routing/RoutingState';
-import Slider, { Range } from 'rc-slider';
-import { SketchPicker } from 'react-color';
-import AsyncSelect from 'react-select/async';
-import { AxiosStatic } from 'axios';
-import Decimal from 'decimal.js-light';
-import Select from 'react-select';
-import { IDisposeHelper } from '../Services/IDisposeHelper';
-declare const NeoReactTypes: {
-    Components: {
-        Slider: AppServices.ServiceIdentifier<typeof Slider>;
-        Range: AppServices.ServiceIdentifier<typeof Range>;
-        SketchPicker: AppServices.ServiceIdentifier<typeof SketchPicker>;
-        ReactSelect: AppServices.ServiceIdentifier<Select>;
-        AsyncSelect: AppServices.ServiceIdentifier<AsyncSelect>;
-    };
-    Routing: {
-        NavigationHelper: AppServices.ServiceIdentifier<INavigationHelper>;
-        GlobalRoutingState: AppServices.ServiceIdentifier<RoutingState>;
-        MenuItemProvider: AppServices.ServiceIdentifier<import("@singularsystems/neo-core/dist/Routing").IMenuItemProvider<import("@singularsystems/neo-core/dist/Routing").IMenuRoute>>;
-        PageLeaveHandler: AppServices.ServiceIdentifier<import("@singularsystems/neo-core/dist/Routing").IPageLeaveHandler>;
-        RouteSecurityService: AppServices.ServiceIdentifier<import("@singularsystems/neo-core/dist/Routing").IRouteSecurityService>;
-    };
-    Services: {
-        DisposeHelper: AppServices.ServiceIdentifier<IDisposeHelper>;
-    };
-    Axios: AppServices.ServiceIdentifier<AxiosStatic>;
-    Config: {
-        ConfigModel: AppServices.ServiceIdentifier<AppServices.IConfigModel>;
-        ConfigService: AppServices.ServiceIdentifier<import("@singularsystems/neo-core/dist/AppServices/Config/ConfigService").IConfigService>;
-    };
-    Core: {
-        AutoRunnerFactory: AppServices.ServiceIdentifier<import("@singularsystems/neo-core/dist/Model/IAutoRunner").IAutoRunnerFactory>;
-        ConnectionManager: AppServices.ServiceIdentifier<import("@singularsystems/neo-core/dist/ConnectionManager").IConnectionManager>;
-        ModelCreator: AppServices.ServiceIdentifier<import("@singularsystems/neo-core/dist/Model/IModelCreatorBase").default>;
-    };
-    Localisation: {
-        LocalisationService: AppServices.ServiceIdentifier<import("@singularsystems/neo-core/dist/Localisation").ILocalisationService>;
-    };
-    Misc: {
-        DecimalType: AppServices.ServiceIdentifier<typeof Decimal>;
-    };
-    Security: {
-        AuthenticationService: AppServices.ServiceIdentifier<import("@singularsystems/neo-core/dist/Security").IAuthenticationService>;
-        AuthorisationService: AppServices.ServiceIdentifier<import("@singularsystems/neo-core/dist/Security").IAuthorisationService>;
-        LoginErrorHandler: AppServices.ServiceIdentifier<import("@singularsystems/neo-core/dist/Security").ILoginErrorHandler>;
-        SecurityService: AppServices.ServiceIdentifier<import("@singularsystems/neo-core/dist/Security/ISecurityService").default>;
-    };
-    TaskRunner: AppServices.ServiceIdentifier<import("@singularsystems/neo-core").ITaskRunner>;
-    UI: {
-        ErrorHandler: AppServices.ServiceIdentifier<import("@singularsystems/neo-core/dist/Components").IErrorHandler>;
-        GlobalContextMenuState: AppServices.ServiceIdentifier<import("@singularsystems/neo-core/dist/Components/ContextMenu/ContextMenu").IContextMenuState>;
-        GlobalNotifications: AppServices.ServiceIdentifier<import("@singularsystems/neo-core/dist/Components").INotificationHelper>;
-        ModalStore: AppServices.ServiceIdentifier<import("@singularsystems/neo-core/dist/Components/Modal/ModalStore").IModalStore>;
-        NotificationHelper: AppServices.ServiceIdentifier<import("@singularsystems/neo-core/dist/Components").INotificationHelper>;
-        NotificationStore: AppServices.ServiceIdentifier<import("@singularsystems/neo-core/dist/Components").INotificationStore>;
-    };
-};
-export { NeoReactTypes };
+import { AppServices } from '@singularsystems/neo-core';
+import { INavigationHelper } from '../Routing/NavigationHelper';
+import { RoutingState } from '../Routing/RoutingState';
+import Slider, { Range } from 'rc-slider';
+import { SketchPicker } from 'react-color';
+import AsyncSelect from 'react-select/async';
+import { AxiosStatic } from 'axios';
+import Decimal from 'decimal.js-light';
+import Select from 'react-select';
+import { IDisposeHelper } from '../Services/IDisposeHelper';
+import { IIconFactory } from '../ReactComponents/Icons/IIconFactory';
+declare const NeoReactTypes: {
+    Components: {
+        Slider: AppServices.ServiceIdentifier<typeof Slider>;
+        Range: AppServices.ServiceIdentifier<typeof Range>;
+        SketchPicker: AppServices.ServiceIdentifier<typeof SketchPicker>;
+        ReactSelect: AppServices.ServiceIdentifier<Select>;
+        AsyncSelect: AppServices.ServiceIdentifier<AsyncSelect>;
+        IconFactory: AppServices.ServiceIdentifier<IIconFactory>;
+    };
+    Routing: {
+        NavigationHelper: AppServices.ServiceIdentifier<INavigationHelper>;
+        GlobalRoutingState: AppServices.ServiceIdentifier<RoutingState>;
+        MenuItemProvider: AppServices.ServiceIdentifier<import("@singularsystems/neo-core/dist/Routing").IMenuItemProvider<import("@singularsystems/neo-core/dist/Routing").IMenuRoute>>;
+        PageLeaveHandler: AppServices.ServiceIdentifier<import("@singularsystems/neo-core/dist/Routing").IPageLeaveHandler>;
+        RouteSecurityService: AppServices.ServiceIdentifier<import("@singularsystems/neo-core/dist/Routing").IRouteSecurityService>;
+    };
+    Services: {
+        DisposeHelper: AppServices.ServiceIdentifier<IDisposeHelper>;
+    };
+    Axios: AppServices.ServiceIdentifier<AxiosStatic>;
+    Config: {
+        ConfigModel: AppServices.ServiceIdentifier<AppServices.IConfigModel>;
+        ConfigService: AppServices.ServiceIdentifier<import("@singularsystems/neo-core/dist/AppServices/Config/ConfigService").IConfigService>;
+    };
+    Core: {
+        AutoRunnerFactory: AppServices.ServiceIdentifier<import("@singularsystems/neo-core/dist/Model/IAutoRunner").IAutoRunnerFactory>;
+        ConnectionManager: AppServices.ServiceIdentifier<import("@singularsystems/neo-core/dist/ConnectionManager").IConnectionManager>;
+        ModelCreator: AppServices.ServiceIdentifier<import("@singularsystems/neo-core/dist/Model/IModelCreatorBase").default>;
+    };
+    Localisation: {
+        LocalisationService: AppServices.ServiceIdentifier<import("@singularsystems/neo-core/dist/Localisation").ILocalisationService>;
+    };
+    Misc: {
+        DecimalType: AppServices.ServiceIdentifier<typeof Decimal>;
+    };
+    Security: {
+        AuthenticationService: AppServices.ServiceIdentifier<import("@singularsystems/neo-core/dist/Security").IAuthenticationService>;
+        AuthorisationService: AppServices.ServiceIdentifier<import("@singularsystems/neo-core/dist/Security").IAuthorisationService>;
+        LoginErrorHandler: AppServices.ServiceIdentifier<import("@singularsystems/neo-core/dist/Security").ILoginErrorHandler>;
+        SecurityService: AppServices.ServiceIdentifier<import("@singularsystems/neo-core/dist/Security/ISecurityService").default>;
+    };
+    TaskRunner: AppServices.ServiceIdentifier<import("@singularsystems/neo-core").ITaskRunner>;
+    UI: {
+        ErrorHandler: AppServices.ServiceIdentifier<import("@singularsystems/neo-core/dist/Components").IErrorHandler>;
+        GlobalContextMenuState: AppServices.ServiceIdentifier<import("@singularsystems/neo-core/dist/Components/ContextMenu/ContextMenu").IContextMenuState>;
+        GlobalNotifications: AppServices.ServiceIdentifier<import("@singularsystems/neo-core/dist/Components").INotificationHelper>;
+        ModalStore: AppServices.ServiceIdentifier<import("@singularsystems/neo-core/dist/Components/Modal/ModalStore").IModalStore>;
+        NotificationHelper: AppServices.ServiceIdentifier<import("@singularsystems/neo-core/dist/Components").INotificationHelper>;
+        NotificationStore: AppServices.ServiceIdentifier<import("@singularsystems/neo-core/dist/Components").INotificationStore>;
+    };
+};
+export { NeoReactTypes };

package/dist/Modules/Types.js

@@ -1,12 +1,13 @@
-import { __assign } from "tslib";
-import { AppServices } from '@singularsystems/neo-core';
-var NeoReactTypes = __assign(__assign({}, AppServices.NeoTypes), { Components: {
-        Slider: new AppServices.ServiceIdentifier("NeoReact.Slider"),
-        Range: new AppServices.ServiceIdentifier("NeoReact.Range"),
-        SketchPicker: new AppServices.ServiceIdentifier("NeoReact.SketchPicker"),
-        ReactSelect: new AppServices.ServiceIdentifier("NeoReact.ReactSelect"),
-        AsyncSelect: new AppServices.ServiceIdentifier("NeoReact.AsyncSelect"),
-    }, Routing: __assign(__assign({}, AppServices.NeoTypes.Routing), { NavigationHelper: AppServices.NeoTypes.Routing.NavigationHelper.asType(), GlobalRoutingState: new AppServices.ServiceIdentifier("NeoReact.GlobalRoutingState") }), Services: {
-        DisposeHelper: new AppServices.ServiceIdentifier("NeoReact.DisposeHelper")
-    } });
-export { NeoReactTypes };
+import { __assign } from "tslib";
+import { AppServices } from '@singularsystems/neo-core';
+var NeoReactTypes = __assign(__assign({}, AppServices.NeoTypes), { Components: {
+        Slider: new AppServices.ServiceIdentifier("NeoReact.Slider"),
+        Range: new AppServices.ServiceIdentifier("NeoReact.Range"),
+        SketchPicker: new AppServices.ServiceIdentifier("NeoReact.SketchPicker"),
+        ReactSelect: new AppServices.ServiceIdentifier("NeoReact.ReactSelect"),
+        AsyncSelect: new AppServices.ServiceIdentifier("NeoReact.AsyncSelect"),
+        IconFactory: new AppServices.ServiceIdentifier("NeoReact.IconFactory")
+    }, Routing: __assign(__assign({}, AppServices.NeoTypes.Routing), { NavigationHelper: AppServices.NeoTypes.Routing.NavigationHelper.asType(), GlobalRoutingState: new AppServices.ServiceIdentifier("NeoReact.GlobalRoutingState") }), Services: {
+        DisposeHelper: new AppServices.ServiceIdentifier("NeoReact.DisposeHelper")
+    } });
+export { NeoReactTypes };

package/dist/React/AutoRunner.d.ts

@@ -1,5 +1,5 @@
-import { Misc, Model } from '@singularsystems/neo-core';
-import { IAutoRunnerFactory } from '@singularsystems/neo-core/dist/Model/IAutoRunner';
-export declare class AutoRunnerFactory implements IAutoRunnerFactory {
-    create<T extends Model.IModelBase>(model: T, callback: (model: T) => void, options?: Misc.IAutoRunnerOptions<T>): Misc.IAutoRunner;
-}
+import { Misc, Model } from '@singularsystems/neo-core';
+import { IAutoRunnerFactory } from '@singularsystems/neo-core/dist/Model/IAutoRunner';
+export declare class AutoRunnerFactory implements IAutoRunnerFactory {
+    create<T extends Model.IModelBase>(model: T, callback: (model: T) => void, options?: Misc.IAutoRunnerOptions<T>): Misc.IAutoRunner;
+}

package/dist/React/AutoRunner.js

@@ -1,92 +1,94 @@
-import { __decorate } from "tslib";
-import { Utils, Misc } from '@singularsystems/neo-core';
-import { reaction } from 'mobx';
-import { injectable } from 'inversify';
-var AutoRunnerFactory = /** @class */ (function () {
-    function AutoRunnerFactory() {
-    }
-    AutoRunnerFactory.prototype.create = function (model, callback, options) {
-        return new AutoRunner(model, callback, options);
-    };
-    AutoRunnerFactory = __decorate([
-        injectable()
-    ], AutoRunnerFactory);
-    return AutoRunnerFactory;
-}());
-export { AutoRunnerFactory };
-var AutoRunner = /** @class */ (function () {
-    function AutoRunner(model, callback, options) {
-        var _this = this;
-        this.isPaused = false;
-        this.propertyMap = {};
-        this.options = options !== null && options !== void 0 ? options : {};
-        this.disposerDelayed = reaction(function () { return _this.accessAllValues(model, true, new Map(), ""); }, function () { var _a; return _this.runCallback(model, callback, (_a = _this.options.delayMs) !== null && _a !== void 0 ? _a : 500); });
-        this.disposerImmediate = reaction(function () { return _this.accessAllValues(model, false, new Map(), ""); }, function () { return _this.runCallback(model, callback, 0); });
-    }
-    AutoRunner.prototype.cancelPending = function () {
-        Utils.clearDebounce(this);
-    };
-    AutoRunner.prototype.dispose = function () {
-        this.disposerDelayed();
-        this.disposerImmediate();
-    };
-    AutoRunner.prototype.runCallback = function (model, callback, delay) {
-        var _this = this;
-        if (!this.isPaused) {
-            Utils.debounce(this, function () {
-                _this.isPaused = true;
-                try {
-                    callback(model);
-                }
-                finally {
-                    _this.isPaused = false;
-                }
-            }, delay);
-        }
-    };
-    /**
-     * Access all the property values of a model including it's value objects properties.
-     * @param instance Instance to access.
-     * @param delayed True if only delayed properties should be accessed. A delayed property is one where the user
-     * types in the value over a short period of time. E.g. numeric input or text input.
-     */
-    AutoRunner.prototype.accessAllValues = function (instance, delayed, trackedInstances, path) {
-        var _a;
-        if (instance && !trackedInstances.has(instance)) {
-            trackedInstances.set(instance, true);
-            var info = instance.constructor.neo;
-            var filterProperties = path === "" ? this.options.rootProperties : undefined;
-            for (var _i = 0, _b = info.properties; _i < _b.length; _i++) {
-                var propertyInfo = _b[_i];
-                if (!propertyInfo.noTrack && instance.meta[propertyInfo.propertyName] && (!filterProperties || filterProperties.indexOf(propertyInfo.propertyName) >= 0)) {
-                    if (propertyInfo.relationType === Misc.RelationType.None) {
-                        var key = path + propertyInfo.propertyName;
-                        var useDelay = this.propertyMap[key];
-                        if (useDelay === undefined) {
-                            // This needs to be calculated once, otherwise null -> string value changes cause properties to no longer be tracked.
-                            useDelay = (_a = propertyInfo.debounce) !== null && _a !== void 0 ? _a : ([Misc.DataType.Int, Misc.DataType.Float].indexOf(propertyInfo.propertyType) >= 0 ||
-                                (typeof instance.meta[propertyInfo.propertyName].peek === "string"));
-                            this.propertyMap[key] = useDelay;
-                        }
-                        if (useDelay === delayed) {
-                            void instance[propertyInfo.propertyName];
-                        }
-                    }
-                    else if (propertyInfo.relationType === Misc.RelationType.ValueObject ||
-                        (propertyInfo.relationType === Misc.RelationType.ChildObject && this.options.includeChildObjects)) {
-                        this.accessAllValues(instance[propertyInfo.propertyName], delayed, trackedInstances, path + propertyInfo.propertyName + ".");
-                    }
-                    else if (propertyInfo.relationType === Misc.RelationType.ChildList && this.options.includeChildLists) {
-                        var index = 0;
-                        for (var _c = 0, _d = instance[propertyInfo.propertyName]; _c < _d.length; _c++) {
-                            var child = _d[_c];
-                            this.accessAllValues(child, delayed, trackedInstances, "".concat(path).concat(propertyInfo.propertyName, "[").concat(index++, "]."));
-                        }
-                    }
-                }
-            }
-        }
-        return {};
-    };
-    return AutoRunner;
-}());
+import { __decorate } from "tslib";
+import { Misc, DebounceHelper } from '@singularsystems/neo-core';
+import { reaction } from 'mobx';
+import { injectable } from 'inversify';
+export var AutoRunnerFactory = /** @class */ (function () {
+    function AutoRunnerFactory() {
+    }
+    AutoRunnerFactory.prototype.create = function (model, callback, options) {
+        return new AutoRunner(model, callback, options);
+    };
+    AutoRunnerFactory = __decorate([
+        injectable()
+    ], AutoRunnerFactory);
+    return AutoRunnerFactory;
+}());
+var AutoRunner = /** @class */ (function () {
+    function AutoRunner(model, callback, options) {
+        var _this = this;
+        this.isPaused = false;
+        this.propertyMap = {};
+        this.options = options !== null && options !== void 0 ? options : {};
+        this.disposerDelayed = reaction(function () { return _this.accessAllValues(model, true, new Map(), ""); }, function () { var _a; return _this.runCallback(model, callback, (_a = _this.options.delayMs) !== null && _a !== void 0 ? _a : 500); });
+        this.disposerImmediate = reaction(function () { return _this.accessAllValues(model, false, new Map(), ""); }, function () { return _this.runCallback(model, callback, 0); });
+    }
+    AutoRunner.prototype.cancelPending = function () {
+        DebounceHelper.cancelPending(this);
+    };
+    AutoRunner.prototype.fireImmediate = function () {
+        DebounceHelper.executeImmediate(this);
+    };
+    AutoRunner.prototype.dispose = function () {
+        this.disposerDelayed();
+        this.disposerImmediate();
+    };
+    AutoRunner.prototype.runCallback = function (model, callback, delay) {
+        var _this = this;
+        if (!this.isPaused) {
+            DebounceHelper.debounce(this, function () {
+                _this.isPaused = true;
+                try {
+                    callback(model);
+                }
+                finally {
+                    _this.isPaused = false;
+                }
+            }, delay);
+        }
+    };
+    /**
+     * Access all the property values of a model including it's value objects properties.
+     * @param instance Instance to access.
+     * @param delayed True if only delayed properties should be accessed. A delayed property is one where the user
+     * types in the value over a short period of time. E.g. numeric input or text input.
+     */
+    AutoRunner.prototype.accessAllValues = function (instance, delayed, trackedInstances, path) {
+        var _a;
+        if (instance && !trackedInstances.has(instance)) {
+            trackedInstances.set(instance, true);
+            var info = instance.constructor.neo;
+            var filterProperties = path === "" ? this.options.rootProperties : undefined;
+            for (var _i = 0, _b = info.properties; _i < _b.length; _i++) {
+                var propertyInfo = _b[_i];
+                if (!propertyInfo.noTrack && instance.meta[propertyInfo.propertyName] && (!filterProperties || filterProperties.indexOf(propertyInfo.propertyName) >= 0)) {
+                    if (propertyInfo.relationType === Misc.RelationType.None) {
+                        var key = path + propertyInfo.propertyName;
+                        var useDelay = this.propertyMap[key];
+                        if (useDelay === undefined) {
+                            // This needs to be calculated once, otherwise null -> string value changes cause properties to no longer be tracked.
+                            useDelay = (_a = propertyInfo.debounce) !== null && _a !== void 0 ? _a : ([Misc.DataType.Int, Misc.DataType.Float].indexOf(propertyInfo.propertyType) >= 0 ||
+                                (typeof instance.meta[propertyInfo.propertyName].peek === "string"));
+                            this.propertyMap[key] = useDelay;
+                        }
+                        if (useDelay === delayed) {
+                            void instance[propertyInfo.propertyName];
+                        }
+                    }
+                    else if (propertyInfo.relationType === Misc.RelationType.ValueObject ||
+                        (propertyInfo.relationType === Misc.RelationType.ChildObject && this.options.includeChildObjects)) {
+                        this.accessAllValues(instance[propertyInfo.propertyName], delayed, trackedInstances, path + propertyInfo.propertyName + ".");
+                    }
+                    else if (propertyInfo.relationType === Misc.RelationType.ChildList && this.options.includeChildLists) {
+                        var index = 0;
+                        for (var _c = 0, _d = instance[propertyInfo.propertyName]; _c < _d.length; _c++) {
+                            var child = _d[_c];
+                            this.accessAllValues(child, delayed, trackedInstances, "".concat(path).concat(propertyInfo.propertyName, "[").concat(index++, "]."));
+                        }
+                    }
+                }
+            }
+        }
+        return {};
+    };
+    return AutoRunner;
+}());

package/dist/React/DataView.d.ts

@@ -1,6 +1,6 @@
-import React from 'react';
-import { Data } from '@singularsystems/neo-core';
-export declare class DataViewContextParams<T> {
-    dataView: Data.DataViewBase<T>;
-}
-export declare const DataViewContext: React.Context<DataViewContextParams<unknown>>;
+import React from 'react';
+import { Data } from '@singularsystems/neo-core';
+export declare class DataViewContextParams<T> {
+    dataView: Data.DataViewBase<T>;
+}
+export declare const DataViewContext: React.Context<DataViewContextParams<unknown>>;

package/dist/React/DataView.js

@@ -1,11 +1,11 @@
-import React from 'react';
-import { Data } from '@singularsystems/neo-core';
-import { untracked } from 'mobx';
-Data.DataViewBase.unTrackedSort = untracked;
-var DataViewContextParams = /** @class */ (function () {
-    function DataViewContextParams() {
-    }
-    return DataViewContextParams;
-}());
-export { DataViewContextParams };
-export var DataViewContext = React.createContext(new DataViewContextParams());
+import React from 'react';
+import { Data } from '@singularsystems/neo-core';
+import { untracked } from 'mobx';
+Data.DataViewBase.unTrackedSort = untracked;
+var DataViewContextParams = /** @class */ (function () {
+    function DataViewContextParams() {
+    }
+    return DataViewContextParams;
+}());
+export { DataViewContextParams };
+export var DataViewContext = React.createContext(new DataViewContextParams());