@cratis/arc.react.mvvm 18.0.0

package/dist/esm/withViewModel.js

@@ -0,0 +1,123 @@
+import { jsx } from 'react/jsx-runtime';
+import { container } from 'tsyringe';
+import { useContext, useState, useRef, useEffect } from 'react';
+import { Observer } from 'mobx-react';
+import { makeAutoObservable } from 'mobx';
+import { useParams, useSearchParams } from 'react-router-dom';
+import { DialogComponentsContext, useDialogContext, DialogContextContent } from '@cratis/arc.react/dialogs';
+import { useDialogMediator, DialogMediator } from './dialogs/DialogMediator.js';
+import { DialogMediatorHandler } from './dialogs/DialogMediatorHandler.js';
+import { Dialogs } from './dialogs/Dialogs.js';
+import { IDialogs } from './dialogs/IDialogs.js';
+import { ArcContext } from '@cratis/arc.react';
+import { WellKnownBindings } from './WellKnownBindings.js';
+import { deepEqual } from '@cratis/arc';
+import { ObservableQueryFor, QueryFor } from '@cratis/arc/queries';
+import { Command } from '@cratis/arc/commands';
+
+function disposeViewModel(viewModel) {
+    const vmWithDetach = viewModel;
+    if (typeof (vmWithDetach.detached) == 'function') {
+        vmWithDetach.detached();
+    }
+    if (viewModel.__childContainer) {
+        const container = viewModel.__childContainer;
+        container.dispose();
+    }
+}
+function handleProps(viewModel, params) {
+    const vmWithHandleParams = viewModel;
+    if (typeof (vmWithHandleParams.handleProps) == 'function') {
+        vmWithHandleParams.handleProps(params);
+    }
+}
+function handleParams(viewModel, params) {
+    const vmWithHandleParams = viewModel;
+    if (typeof (vmWithHandleParams.handleParams) == 'function') {
+        vmWithHandleParams.handleParams(params);
+    }
+}
+function handleQueryParams(viewModel, queryParams) {
+    const vmWithHandleParams = viewModel;
+    if (typeof (vmWithHandleParams.handleQueryParams) == 'function') {
+        vmWithHandleParams.handleQueryParams(queryParams);
+    }
+}
+function withViewModel(viewModelType, targetComponent) {
+    const renderComponent = (props) => {
+        const applicationContext = useContext(ArcContext);
+        const dialogComponentsContext = useContext(DialogComponentsContext);
+        const params = useParams();
+        const [currentProps, setCurrentProps] = useState(props);
+        const [previousParams, setPreviousParams] = useState(params);
+        const [queryParams] = useSearchParams();
+        const [previousQueryParams, setPreviousQueryParams] = useState(queryParams);
+        const queryParamsObject = Object.fromEntries(queryParams.entries());
+        const dialogMediatorContext = useRef(null);
+        const currentViewModel = useRef(null);
+        const [, setInitialRender] = useState(true);
+        const parentDialogMediator = useDialogMediator();
+        const dialogContext = useDialogContext();
+        useEffect(() => {
+            if (currentViewModel.current !== null) {
+                return () => {
+                    disposeViewModel(currentViewModel.current);
+                };
+            }
+            dialogMediatorContext.current = new DialogMediatorHandler(parentDialogMediator);
+            const child = container.createChildContainer();
+            child.registerInstance(WellKnownBindings.props, props);
+            child.registerInstance(WellKnownBindings.params, params);
+            child.registerInstance(WellKnownBindings.queryParams, queryParamsObject);
+            child.registerInstance(DialogContextContent, dialogContext);
+            const originalResolve = child.resolve;
+            child.resolve = function (type) {
+                const instance = originalResolve.apply(child, arguments);
+                if (type.prototype instanceof ObservableQueryFor ||
+                    type.prototype instanceof QueryFor ||
+                    type.prototype instanceof Command) {
+                    const query = instance;
+                    query.setMicroservice(applicationContext.microservice);
+                    query.setApiBasePath(applicationContext.apiBasePath ?? '');
+                    query.setOrigin(applicationContext.origin ?? '');
+                }
+                return instance;
+            };
+            const dialogService = new Dialogs(dialogMediatorContext.current, dialogComponentsContext);
+            child.registerInstance(IDialogs, dialogService);
+            const viewModel = child.resolve(viewModelType);
+            makeAutoObservable(viewModel);
+            viewModel.__childContainer = child;
+            currentViewModel.current = viewModel;
+            setInitialRender(false);
+            handleProps(viewModel, props);
+            handleParams(viewModel, params);
+            handleQueryParams(viewModel, queryParamsObject);
+            return () => {
+                if (applicationContext.development === false) {
+                    disposeViewModel(viewModel);
+                }
+            };
+        }, []);
+        if (currentViewModel.current === null)
+            return null;
+        if (!deepEqual(currentProps, props)) {
+            setCurrentProps(props);
+            handleProps(currentViewModel.current, props);
+        }
+        if (!deepEqual(params, previousParams)) {
+            setPreviousParams(params);
+            handleParams(currentViewModel.current, params);
+        }
+        if (!deepEqual(queryParams, previousQueryParams)) {
+            setPreviousQueryParams(queryParams);
+            handleQueryParams(currentViewModel.current, queryParams);
+        }
+        const component = () => targetComponent({ viewModel: currentViewModel.current, props });
+        return (jsx(DialogMediator, { handler: dialogMediatorContext.current, children: jsx(Observer, { children: component }) }));
+    };
+    return renderComponent;
+}
+
+export { withViewModel };
+//# sourceMappingURL=withViewModel.js.map

package/dist/esm/withViewModel.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"withViewModel.js","sources":["../../withViewModel.tsx"],"sourcesContent":["// Copyright (c) Cratis. All rights reserved.\n// Licensed under the MIT license. See LICENSE file in the project root for full license information.\n\nimport { container, DependencyContainer } from 'tsyringe';\nimport { Constructor } from '@cratis/fundamentals';\nimport { FunctionComponent, ReactElement, useContext, useEffect, useRef, useState } from 'react';\nimport { Observer } from 'mobx-react';\nimport { makeAutoObservable } from 'mobx';\nimport { useParams, useSearchParams } from 'react-router-dom';\nimport {\n    DialogMediator,\n    DialogMediatorHandler,\n    Dialogs,\n    IDialogMediatorHandler,\n    IDialogs,\n    useDialogMediator\n} from './dialogs';\nimport { IViewModelDetached } from './IViewModelDetached';\nimport { ArcContext } from '@cratis/arc.react';\nimport { WellKnownBindings } from \"./WellKnownBindings\";\nimport { deepEqual } from '@cratis/arc';\nimport { IHandleParams } from 'IHandleParams';\nimport { IHandleQueryParams } from 'IHandleQueryParams';\nimport { IHandleProps } from 'IHandleProps';\nimport { ObservableQueryFor, QueryFor } from '@cratis/arc/queries';\nimport { Command } from '@cratis/arc/commands';\nimport { ICanBeConfigured } from '@cratis/arc/ICanBeConfigured';\nimport { DialogComponentsContext, DialogContextContent, IDialogComponents, useDialogContext } from '@cratis/arc.react/dialogs';\n\ninterface IViewModel extends IViewModelDetached {\n    __childContainer: DependencyContainer;\n}\n\nfunction disposeViewModel(viewModel: IViewModel) {\n    const vmWithDetach = (viewModel as IViewModelDetached);\n    if (typeof (vmWithDetach.detached) == 'function') {\n        vmWithDetach.detached();\n    }\n\n    if (viewModel.__childContainer) {\n        const container = viewModel.__childContainer as DependencyContainer;\n        container.dispose();\n    }\n}\n\nfunction handleProps(viewModel: IViewModel, params: object) {\n    const vmWithHandleParams = (viewModel as unknown as IHandleProps);\n    if (typeof (vmWithHandleParams.handleProps) == 'function') {\n        vmWithHandleParams.handleProps(params);\n    }\n}\n\nfunction handleParams(viewModel: IViewModel, params: object) {\n    const vmWithHandleParams = (viewModel as unknown as IHandleParams);\n    if (typeof (vmWithHandleParams.handleParams) == 'function') {\n        vmWithHandleParams.handleParams(params);\n    }\n}\n\nfunction handleQueryParams(viewModel: IViewModel, queryParams: object) {\n    const vmWithHandleParams = (viewModel as unknown as IHandleQueryParams);\n    if (typeof (vmWithHandleParams.handleQueryParams) == 'function') {\n        vmWithHandleParams.handleQueryParams(queryParams);\n    }\n}\n\n/**\n * Represents the view context that is passed to the view.\n */\nexport interface IViewContext<T, TProps = object> {\n    viewModel: T,\n    props: TProps,\n}\n\n/**\n * Use a view model with a component.\n * @param {Constructor} viewModelType View model type to use.\n * @param {FunctionComponent} targetComponent The target component to render.\n * @returns \n */\nexport function withViewModel<TViewModel extends object, TProps extends object = object>(\n    viewModelType: Constructor<TViewModel>,\n    targetComponent: FunctionComponent<IViewContext<TViewModel, TProps>>) {\n\n    const renderComponent = (props: TProps) => {\n        const applicationContext = useContext(ArcContext);\n        const dialogComponentsContext = useContext<IDialogComponents>(DialogComponentsContext);\n        const params = useParams();\n        const [currentProps, setCurrentProps] = useState(props);\n        const [previousParams, setPreviousParams] = useState(params);\n        const [queryParams] = useSearchParams();\n        const [previousQueryParams, setPreviousQueryParams] = useState(queryParams);\n        const queryParamsObject = Object.fromEntries(queryParams.entries());\n        const dialogMediatorContext = useRef<IDialogMediatorHandler | null>(null);\n        const currentViewModel = useRef<TViewModel | null>(null);\n        const [, setInitialRender] = useState(true);\n        const parentDialogMediator = useDialogMediator();\n        const dialogContext = useDialogContext();\n\n        useEffect(() => {\n            if (currentViewModel.current !== null) {\n                return () => {\n                    disposeViewModel(currentViewModel.current as IViewModel);\n                };\n            }\n\n            dialogMediatorContext.current = new DialogMediatorHandler(parentDialogMediator);\n\n            const child = container.createChildContainer();\n            child.registerInstance(WellKnownBindings.props, props);\n            child.registerInstance(WellKnownBindings.params, params);\n            child.registerInstance(WellKnownBindings.queryParams, queryParamsObject);\n            child.registerInstance(DialogContextContent, dialogContext as unknown);\n\n            const originalResolve = child.resolve;\n\n            child.resolve = function <T>(type: Constructor<T>) {\n                // eslint-disable-next-line prefer-rest-params\n                const instance = originalResolve.apply(child, arguments as never);\n\n                if (type.prototype instanceof ObservableQueryFor ||\n                    type.prototype instanceof QueryFor ||\n                    type.prototype instanceof Command) {\n                    const query = instance as ICanBeConfigured;\n                    query.setMicroservice(applicationContext.microservice);\n                    query.setApiBasePath(applicationContext.apiBasePath ?? '');\n                    query.setOrigin(applicationContext.origin ?? '');\n                }\n\n                return instance;\n            } as never;\n\n            const dialogService = new Dialogs(dialogMediatorContext.current!, dialogComponentsContext);\n            child.registerInstance<IDialogs>(IDialogs as Constructor<IDialogs>, dialogService);\n            const viewModel = child.resolve<TViewModel>(viewModelType) as IViewModel;\n            makeAutoObservable(viewModel);\n            viewModel.__childContainer = child;\n            currentViewModel.current = viewModel as TViewModel;\n\n            setInitialRender(false);\n            handleProps(viewModel, props);\n            handleParams(viewModel, params);\n            handleQueryParams(viewModel, queryParamsObject);\n\n            return () => {\n                if (applicationContext.development === false) {\n                    disposeViewModel(viewModel);\n                }\n            };\n        }, []);\n\n        if (currentViewModel.current === null) return null;\n\n        if (!deepEqual(currentProps, props)) {\n            setCurrentProps(props);\n            handleProps(currentViewModel.current as IViewModel, props);\n        }\n\n        if (!deepEqual(params, previousParams)) {\n            setPreviousParams(params);\n            handleParams(currentViewModel.current as IViewModel, params);\n        }\n\n        if (!deepEqual(queryParams, previousQueryParams)) {\n            setPreviousQueryParams(queryParams);\n            handleQueryParams(currentViewModel.current as IViewModel, queryParams);\n        }\n\n        const component = () => targetComponent({ viewModel: currentViewModel.current!, props }) as ReactElement<object, string>;\n\n        return (\n            <DialogMediator handler={dialogMediatorContext.current!}>\n                <Observer>\n                    {component}\n                </Observer>\n            </DialogMediator>\n        );\n    };\n\n    return renderComponent;\n}\n"],"names":["_jsx"],"mappings":"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"}

package/global.d.ts

@@ -0,0 +1,11 @@
+// Copyright (c) Cratis. All rights reserved.
+// Licensed under the MIT license. See LICENSE file in the project root for full license information.
+
+import * as React from 'react';
+
+declare global {
+  namespace JSX {
+    interface Element extends React.ReactElement {}
+    // Add additional JSX-related overrides if necessary.
+  }
+}

package/index.ts

@@ -0,0 +1,21 @@
+// Copyright (c) Cratis. All rights reserved.
+// Licensed under the MIT license. See LICENSE file in the project root for full license information.
+
+import 'reflect-metadata';
+import * as browser from './browser';
+import * as messaging from './messaging';
+import * as dialogs from './dialogs';
+export * from './Bindings';
+export * from './MVVMContext';
+export * from './withViewModel';
+export * from './IViewModelDetached';
+export * from './WellKnownBindings';
+export * from './IHandleProps';
+export * from './IHandleParams';
+export * from './IHandleQueryParams';
+
+export {
+    browser,
+    messaging,
+    dialogs
+};

package/messaging/IMessenger.ts

@@ -0,0 +1,28 @@
+// Copyright (c) Cratis. All rights reserved.
+// Licensed under the MIT license. See LICENSE file in the project root for full license information.
+
+import { Subscription } from 'rxjs';
+import { Constructor } from '@cratis/fundamentals';
+
+/**
+ * Represents a message handler.
+ */
+export type MessageHandler<T> = (message: T) => void;
+
+/**
+ * Defines a system for publishing and subscribing to messages.
+ */
+export abstract class IMessenger {
+
+    /**
+     * Publish a message.
+     * @param {*} message Message to publish.
+     */
+    abstract publish<TMessage extends object>(message: TMessage): void;
+
+    /**
+     * Subscribe to a specific message type.
+     * @param {MessageHandler} callback Callback that gets called when message arrives.
+     */
+    abstract subscribe<TMessage extends object>(type: Constructor<TMessage>, callback: MessageHandler<TMessage>): Subscription;
+}

package/messaging/Message.ts

@@ -0,0 +1,18 @@
+// Copyright (c) Cratis. All rights reserved.
+// Licensed under the MIT license. See LICENSE file in the project root for full license information.
+
+import { Constructor } from '@cratis/fundamentals';
+
+/**
+ * Represents a message published on the {@link Messenger}.
+ */
+export class Message {
+
+    /**
+     * Initializes a new instance of {@link Message}.
+     * @param {Constructor} type Type of the content in the message.
+     * @param {*} content The actual content.
+     */
+    constructor(readonly type: Constructor, readonly content: object) {
+    }
+}

package/messaging/Messenger.ts

@@ -0,0 +1,26 @@
+// Copyright (c) Cratis. All rights reserved.
+// Licensed under the MIT license. See LICENSE file in the project root for full license information.
+
+import { Constructor } from '@cratis/fundamentals';
+import { IMessenger } from './IMessenger';
+import { filter, Subject, Subscription } from 'rxjs';
+import { Message } from './Message';
+
+/**
+ * Represents an implementation of {@link IMessenger}.
+ */
+export class Messenger extends IMessenger {
+    private _messages: Subject<Message> = new Subject<Message>();
+
+    /** @inheritdoc */
+    publish<TMessage extends object>(message: TMessage): void {
+        this._messages.next(new Message(message.constructor as Constructor, message));
+    }
+
+    /** @inheritdoc */
+    subscribe<TMessage extends object>(type: Constructor<TMessage>, callback: (message: TMessage) => void): Subscription {
+        const observable = this._messages.pipe(filter(m => m.type === type));
+        const subscription = observable.subscribe(m => callback(m.content as TMessage));
+        return subscription;
+    }
+}

package/messaging/for_Messenger/when_publishing_message_with_subscriber.ts

@@ -0,0 +1,27 @@
+// Copyright (c) Cratis. All rights reserved.
+// Licensed under the MIT license. See LICENSE file in the project root for full license information.
+
+import { Messenger } from '../Messenger';
+
+class MessageToSend {
+    constructor(readonly something: string) { }
+}
+
+describe('when publishing message with subscriber', () => {
+    let messenger: Messenger;
+    let message: MessageToSend;
+    let callbackCalled = false;
+
+    beforeEach(() => {
+        messenger = new Messenger();
+        messenger.subscribe(MessageToSend, (m: MessageToSend) => {
+            callbackCalled = true;
+            message = m;
+        });
+        messenger.publish(new MessageToSend('forty two'));
+    });
+
+    it('should call the callback', () => callbackCalled.should.be.true);
+    it('should pass the message to the callback', () => message.should.not.be.undefined);
+    it('should pass the correct content to the callback', () => message.something.should.equal('forty two'));
+});

package/messaging/index.ts

@@ -0,0 +1,6 @@
+// Copyright (c) Cratis. All rights reserved.
+// Licensed under the MIT license. See LICENSE file in the project root for full license information.
+
+export * from './Message';
+export * from './IMessenger';
+export * from './Messenger';

package/package.json

@@ -0,0 +1,71 @@
+{
+    "name": "@cratis/arc.react.mvvm",
+    "version": "18.0.0",
+    "description": "",
+    "author": "Cratis",
+    "license": "MIT",
+    "repository": {
+        "type": "git",
+        "url": "git+https://github.com/cratis/arc.git"
+    },
+    "publishConfig": {
+        "access": "public"
+    },
+    "files": [
+        "dist",
+        "**/*.ts",
+        "**/*.tsx"
+    ],
+    "type": "module",
+    "main": "dist/cjs/index.js",
+    "module": "dist/esm/index.js",
+    "types": "dist/esm/index.d.ts",
+    "exports": {
+        "./package.json": "./package.json",
+        ".": {
+            "types": "./dist/esm/index.d.ts",
+            "require": "./dist/cjs/index.js",
+            "import": "./dist/esm/index.js"
+        },
+        "./browser": {
+            "types": "./dist/esm/browser/index.d.ts",
+            "import": "./dist/esm/browser/index.js",
+            "require": "./dist/cjs/browser/index.js"
+        },
+        "./messaging": {
+            "types": "./dist/esm/messaging/index.d.ts",
+            "import": "./dist/esm/messaging/index.js",
+            "require": "./dist/cjs/messaging/index.js"
+        },
+        "./dialogs": {
+            "types": "./dist/esm/dialogs/index.d.ts",
+            "require": "./dist/cjs/dialogs/index.js",
+            "import": "./dist/esm/dialogs/index.js"
+        }
+    },
+    "scripts": {
+        "prepare": "yarn g:build",
+        "clean": "yarn g:clean",
+        "build": "yarn g:build",
+        "lint": "yarn g:lint",
+        "lint:ci": "yarn g:lint:ci",
+        "test": "yarn g:test",
+        "ci": "yarn g:ci",
+        "up": "yarn g:up"
+    },
+    "dependencies": {
+        "@cratis/arc": "18.0.0",
+        "@cratis/arc.react": "18.0.0",
+        "@cratis/fundamentals": "^7.2.3",
+        "mobx": "^6.15.0",
+        "mobx-react": "^9.2.1",
+        "reflect-metadata": "^0.2.2",
+        "rxjs": "^7.8.2",
+        "tsyringe": "^4.10.0"
+    },
+    "peerDependencies": {
+        "react": "^18.0.0 || ^19.0.0",
+        "react-dom": "^18.0.0 || ^19.0.0",
+        "react-router-dom": "^7.0.0"
+    }
+}

package/withViewModel.tsx

@@ -0,0 +1,181 @@
+// Copyright (c) Cratis. All rights reserved.
+// Licensed under the MIT license. See LICENSE file in the project root for full license information.
+
+import { container, DependencyContainer } from 'tsyringe';
+import { Constructor } from '@cratis/fundamentals';
+import { FunctionComponent, ReactElement, useContext, useEffect, useRef, useState } from 'react';
+import { Observer } from 'mobx-react';
+import { makeAutoObservable } from 'mobx';
+import { useParams, useSearchParams } from 'react-router-dom';
+import {
+    DialogMediator,
+    DialogMediatorHandler,
+    Dialogs,
+    IDialogMediatorHandler,
+    IDialogs,
+    useDialogMediator
+} from './dialogs';
+import { IViewModelDetached } from './IViewModelDetached';
+import { ArcContext } from '@cratis/arc.react';
+import { WellKnownBindings } from "./WellKnownBindings";
+import { deepEqual } from '@cratis/arc';
+import { IHandleParams } from 'IHandleParams';
+import { IHandleQueryParams } from 'IHandleQueryParams';
+import { IHandleProps } from 'IHandleProps';
+import { ObservableQueryFor, QueryFor } from '@cratis/arc/queries';
+import { Command } from '@cratis/arc/commands';
+import { ICanBeConfigured } from '@cratis/arc/ICanBeConfigured';
+import { DialogComponentsContext, DialogContextContent, IDialogComponents, useDialogContext } from '@cratis/arc.react/dialogs';
+
+interface IViewModel extends IViewModelDetached {
+    __childContainer: DependencyContainer;
+}
+
+function disposeViewModel(viewModel: IViewModel) {
+    const vmWithDetach = (viewModel as IViewModelDetached);
+    if (typeof (vmWithDetach.detached) == 'function') {
+        vmWithDetach.detached();
+    }
+
+    if (viewModel.__childContainer) {
+        const container = viewModel.__childContainer as DependencyContainer;
+        container.dispose();
+    }
+}
+
+function handleProps(viewModel: IViewModel, params: object) {
+    const vmWithHandleParams = (viewModel as unknown as IHandleProps);
+    if (typeof (vmWithHandleParams.handleProps) == 'function') {
+        vmWithHandleParams.handleProps(params);
+    }
+}
+
+function handleParams(viewModel: IViewModel, params: object) {
+    const vmWithHandleParams = (viewModel as unknown as IHandleParams);
+    if (typeof (vmWithHandleParams.handleParams) == 'function') {
+        vmWithHandleParams.handleParams(params);
+    }
+}
+
+function handleQueryParams(viewModel: IViewModel, queryParams: object) {
+    const vmWithHandleParams = (viewModel as unknown as IHandleQueryParams);
+    if (typeof (vmWithHandleParams.handleQueryParams) == 'function') {
+        vmWithHandleParams.handleQueryParams(queryParams);
+    }
+}
+
+/**
+ * Represents the view context that is passed to the view.
+ */
+export interface IViewContext<T, TProps = object> {
+    viewModel: T,
+    props: TProps,
+}
+
+/**
+ * Use a view model with a component.
+ * @param {Constructor} viewModelType View model type to use.
+ * @param {FunctionComponent} targetComponent The target component to render.
+ * @returns 
+ */
+export function withViewModel<TViewModel extends object, TProps extends object = object>(
+    viewModelType: Constructor<TViewModel>,
+    targetComponent: FunctionComponent<IViewContext<TViewModel, TProps>>) {
+
+    const renderComponent = (props: TProps) => {
+        const applicationContext = useContext(ArcContext);
+        const dialogComponentsContext = useContext<IDialogComponents>(DialogComponentsContext);
+        const params = useParams();
+        const [currentProps, setCurrentProps] = useState(props);
+        const [previousParams, setPreviousParams] = useState(params);
+        const [queryParams] = useSearchParams();
+        const [previousQueryParams, setPreviousQueryParams] = useState(queryParams);
+        const queryParamsObject = Object.fromEntries(queryParams.entries());
+        const dialogMediatorContext = useRef<IDialogMediatorHandler | null>(null);
+        const currentViewModel = useRef<TViewModel | null>(null);
+        const [, setInitialRender] = useState(true);
+        const parentDialogMediator = useDialogMediator();
+        const dialogContext = useDialogContext();
+
+        useEffect(() => {
+            if (currentViewModel.current !== null) {
+                return () => {
+                    disposeViewModel(currentViewModel.current as IViewModel);
+                };
+            }
+
+            dialogMediatorContext.current = new DialogMediatorHandler(parentDialogMediator);
+
+            const child = container.createChildContainer();
+            child.registerInstance(WellKnownBindings.props, props);
+            child.registerInstance(WellKnownBindings.params, params);
+            child.registerInstance(WellKnownBindings.queryParams, queryParamsObject);
+            child.registerInstance(DialogContextContent, dialogContext as unknown);
+
+            const originalResolve = child.resolve;
+
+            child.resolve = function <T>(type: Constructor<T>) {
+                // eslint-disable-next-line prefer-rest-params
+                const instance = originalResolve.apply(child, arguments as never);
+
+                if (type.prototype instanceof ObservableQueryFor ||
+                    type.prototype instanceof QueryFor ||
+                    type.prototype instanceof Command) {
+                    const query = instance as ICanBeConfigured;
+                    query.setMicroservice(applicationContext.microservice);
+                    query.setApiBasePath(applicationContext.apiBasePath ?? '');
+                    query.setOrigin(applicationContext.origin ?? '');
+                }
+
+                return instance;
+            } as never;
+
+            const dialogService = new Dialogs(dialogMediatorContext.current!, dialogComponentsContext);
+            child.registerInstance<IDialogs>(IDialogs as Constructor<IDialogs>, dialogService);
+            const viewModel = child.resolve<TViewModel>(viewModelType) as IViewModel;
+            makeAutoObservable(viewModel);
+            viewModel.__childContainer = child;
+            currentViewModel.current = viewModel as TViewModel;
+
+            setInitialRender(false);
+            handleProps(viewModel, props);
+            handleParams(viewModel, params);
+            handleQueryParams(viewModel, queryParamsObject);
+
+            return () => {
+                if (applicationContext.development === false) {
+                    disposeViewModel(viewModel);
+                }
+            };
+        }, []);
+
+        if (currentViewModel.current === null) return null;
+
+        if (!deepEqual(currentProps, props)) {
+            setCurrentProps(props);
+            handleProps(currentViewModel.current as IViewModel, props);
+        }
+
+        if (!deepEqual(params, previousParams)) {
+            setPreviousParams(params);
+            handleParams(currentViewModel.current as IViewModel, params);
+        }
+
+        if (!deepEqual(queryParams, previousQueryParams)) {
+            setPreviousQueryParams(queryParams);
+            handleQueryParams(currentViewModel.current as IViewModel, queryParams);
+        }
+
+        const component = () => targetComponent({ viewModel: currentViewModel.current!, props }) as ReactElement<object, string>;
+
+        return (
+            <DialogMediator handler={dialogMediatorContext.current!}>
+                <Observer>
+                    {component}
+                </Observer>
+            </DialogMediator>
+        );
+    };
+
+    return renderComponent;
+}