feat: update modular,add mount and unmount action

doric-demo/src/ModularDemo.ts

@@ -1,14 +1,27 @@
-import { Module, Color, Gravity, Group, layoutConfig, LayoutSpec, ModularPanel, Panel, scroller, text, vlayout, modal, hlayout, Text, ClassType, HLayout, View, VLayout, Provider, loge } from "doric";
+import { Module, Color, Gravity, Group, layoutConfig, LayoutSpec, ModularPanel, scroller, text, vlayout, hlayout, Text, HLayout, View, VLayout, Provider, stack, } from "doric";
 import { CounterPage } from "./Counter";
+
 let moduleId = 0
 
 class ReceivedMessage {
     received: string[] = []
+    mounted: Record<string, boolean> = {}
 }
 
 class SingleModule extends Module {
     myId = ++moduleId
 
+    onCreate() {
+        super.onCreate()
+        this.provider?.observe(ReceivedMessage).addObserver((state => {
+            if (state?.mounted[this.name()] === false) {
+                this.unmount()
+            } else {
+                this.mount()
+            }
+        }))
+    }
+
     name() {
         return `${this.constructor.name}#${this.myId}`
     }
@@ -46,6 +59,19 @@ class SingleModule extends Module {
                     text: this.discription(),
                     textColor: Color.WHITE,
                 }),
+                text({
+                    text: "Unmount",
+                    textSize: 12,
+                    textColor: Color.WHITE,
+                    onClick: () => {
+                        this.provider?.observe(ReceivedMessage)?.update(state => {
+                            if (state) {
+                                state.mounted[this.name()] = false
+                            }
+                            return state
+                        })
+                    }
+                }),
                 ...this.buildExtraContent(),
             ],
             {
@@ -340,6 +366,28 @@ class ScrollableHorizontalModule extends GroupModule {
 }
 
 
+class ResetModule extends SingleModule {
+    discription() {
+        return "This module reset all modules to mounted."
+    }
+
+    buildExtraContent() {
+        return [
+            text({
+                text: "Reset",
+                textColor: Color.WHITE,
+                onClick: () => {
+                    this.provider?.observe(ReceivedMessage).update(state => {
+                        if (state) {
+                            state.mounted = {}
+                        }
+                        return state
+                    })
+                },
+            })
+        ]
+    }
+}
 
 @Entry
 class ModularDemo extends ModularPanel {
@@ -355,6 +403,7 @@ class ModularDemo extends ModularPanel {
             ScrollableVerticalModule,
             ScrollableHorizontalModule,
             CounterPage,
+            ResetModule,
         ]
     }
     setupShelf(root: Group) {

doric-js/bundle/doric-lib.es5.js

@@ -3655,7 +3655,9 @@ var __extends = (undefined && undefined.__extends) || (function () {
 var Module = /** @class */ (function (_super) {
     __extends(Module, _super);
     function Module() {
-        return _super !== null && _super.apply(this, arguments) || this;
+        var _this = _super !== null && _super.apply(this, arguments) || this;
+        _this.unmounted = false;
+        return _this;
     }
     Object.defineProperty(Module.prototype, "provider", {
         get: function () {
@@ -3668,13 +3670,68 @@ var Module = /** @class */ (function (_super) {
         enumerable: false,
         configurable: true
     });
+    Module.prototype.mount = function () {
+        var _a;
+        if (this.unmounted) {
+            this.unmounted = false;
+            (_a = this.superPanel) === null || _a === void 0 ? void 0 : _a.onStructureChanged(this, true);
+            this.onMounted();
+        }
+    };
+    Module.prototype.unmount = function () {
+        var _a;
+        if (!this.unmounted) {
+            this.unmounted = true;
+            (_a = this.superPanel) === null || _a === void 0 ? void 0 : _a.onStructureChanged(this, false);
+            this.onUnmounted();
+        }
+    };
+    Object.defineProperty(Module.prototype, "mounted", {
+        get: function () {
+            return !this.unmounted;
+        },
+        enumerable: false,
+        configurable: true
+    });
+    /**
+     * Dispatch message to other modules.
+     * @param message which is sent out
+     */
     Module.prototype.dispatchMessage = function (message) {
         var _a;
         (_a = this.superPanel) === null || _a === void 0 ? void 0 : _a.dispatchMessage(message);
     };
+    /**
+     * Dispatched messages can be received by override this method.
+     * @param message recevied message
+     */
     Module.prototype.onMessage = function (message) { };
+    /**
+     * Called when this module is mounted
+     */
+    Module.prototype.onMounted = function () { };
+    /**
+     * Called when this module is unmounted
+     */
+    Module.prototype.onUnmounted = function () { };
     return Module;
 }(Panel));
+var VMModule = /** @class */ (function (_super) {
+    __extends(VMModule, _super);
+    function VMModule() {
+        return _super !== null && _super.apply(this, arguments) || this;
+    }
+    VMModule.prototype.getViewModel = function () {
+        return this.vm;
+    };
+    VMModule.prototype.build = function (root) {
+        this.vh = new (this.getViewHolderClass());
+        this.vm = new (this.getViewModelClass())(this.getState(), this.vh);
+        this.vm.context = this.context;
+        this.vm.attach(root);
+    };
+    return VMModule;
+}(Module));
 var ModularPanel = /** @class */ (function (_super) {
     __extends(ModularPanel, _super);
     function ModularPanel() {
@@ -3696,16 +3753,38 @@ var ModularPanel = /** @class */ (function (_super) {
             this.onMessage(message);
         }
     };
+    Object.defineProperty(ModularPanel.prototype, "mountedModules", {
+        get: function () {
+            return this.modules.filter(function (e) { return !(e instanceof Module) || e.mounted; });
+        },
+        enumerable: false,
+        configurable: true
+    });
     ModularPanel.prototype.onMessage = function (message) {
-        this.modules.forEach(function (e) {
+        this.mountedModules.forEach(function (e) {
             if (e instanceof Module) {
                 e.onMessage(message);
             }
         });
     };
+    ModularPanel.prototype.onStructureChanged = function (module, mounted) {
+        var _this = this;
+        if (this.superPanel) {
+            this.superPanel.onStructureChanged(module, mounted);
+        }
+        else {
+            if (!!!this.scheduledRebuild) {
+                this.scheduledRebuild = setTimeout(function () {
+                    _this.scheduledRebuild = undefined;
+                    _this.getRootView().children.length = 0;
+                    _this.build(_this.getRootView());
+                }, 0);
+            }
+        }
+    };
     ModularPanel.prototype.build = function (root) {
         var groupView = this.setupShelf(root);
-        this.modules.forEach(function (e) {
+        this.mountedModules.forEach(function (e) {
             Reflect.set(e, "__root__", groupView);
             e.build(groupView);
         });
@@ -3713,32 +3792,32 @@ var ModularPanel = /** @class */ (function (_super) {
     ModularPanel.prototype.onCreate = function () {
         var _this = this;
         _super.prototype.onCreate.call(this);
-        this.modules.forEach(function (e) {
+        this.mountedModules.forEach(function (e) {
             e.context = _this.context;
             e.onCreate();
         });
     };
     ModularPanel.prototype.onDestroy = function () {
         _super.prototype.onDestroy.call(this);
-        this.modules.forEach(function (e) {
+        this.mountedModules.forEach(function (e) {
             e.onDestroy();
         });
     };
     ModularPanel.prototype.onShow = function () {
         _super.prototype.onShow.call(this);
-        this.modules.forEach(function (e) {
+        this.mountedModules.forEach(function (e) {
             e.onShow();
         });
     };
     ModularPanel.prototype.onHidden = function () {
         _super.prototype.onHidden.call(this);
-        this.modules.forEach(function (e) {
+        this.mountedModules.forEach(function (e) {
             e.onHidden();
         });
     };
     ModularPanel.prototype.onRenderFinished = function () {
         _super.prototype.onRenderFinished.call(this);
-        this.modules.forEach(function (e) {
+        this.mountedModules.forEach(function (e) {
             e.onRenderFinished();
         });
     };
@@ -3792,6 +3871,7 @@ exports.TOP = TOP;
 exports.Text = Text;
 exports.TranslationAnimation = TranslationAnimation;
 exports.VLayout = VLayout;
+exports.VMModule = VMModule;
 exports.VMPanel = VMPanel;
 exports.View = View;
 exports.ViewComponent = ViewComponent;

doric-js/bundle/doric-lib.js

@@ -2822,6 +2822,10 @@ class VMPanel extends Panel {
 }
 
 class Module extends Panel {
+    constructor() {
+        super(...arguments);
+        this.unmounted = false;
+    }
     get provider() {
         var _a;
         return this.__provider || ((_a = this.superPanel) === null || _a === void 0 ? void 0 : _a.provider);
@@ -2829,11 +2833,57 @@ class Module extends Panel {
     set provider(provider) {
         this.__provider = provider;
     }
+    mount() {
+        var _a;
+        if (this.unmounted) {
+            this.unmounted = false;
+            (_a = this.superPanel) === null || _a === void 0 ? void 0 : _a.onStructureChanged(this, true);
+            this.onMounted();
+        }
+    }
+    unmount() {
+        var _a;
+        if (!this.unmounted) {
+            this.unmounted = true;
+            (_a = this.superPanel) === null || _a === void 0 ? void 0 : _a.onStructureChanged(this, false);
+            this.onUnmounted();
+        }
+    }
+    get mounted() {
+        return !this.unmounted;
+    }
+    /**
+     * Dispatch message to other modules.
+     * @param message which is sent out
+     */
     dispatchMessage(message) {
         var _a;
         (_a = this.superPanel) === null || _a === void 0 ? void 0 : _a.dispatchMessage(message);
     }
+    /**
+     * Dispatched messages can be received by override this method.
+     * @param message recevied message
+     */
     onMessage(message) { }
+    /**
+     * Called when this module is mounted
+     */
+    onMounted() { }
+    /**
+     * Called when this module is unmounted
+     */
+    onUnmounted() { }
+}
+class VMModule extends Module {
+    getViewModel() {
+        return this.vm;
+    }
+    build(root) {
+        this.vh = new (this.getViewHolderClass());
+        this.vm = new (this.getViewModelClass())(this.getState(), this.vh);
+        this.vm.context = this.context;
+        this.vm.attach(root);
+    }
 }
 class ModularPanel extends Module {
     constructor() {
@@ -2854,48 +2904,65 @@ class ModularPanel extends Module {
             this.onMessage(message);
         }
     }
+    get mountedModules() {
+        return this.modules.filter(e => !(e instanceof Module) || e.mounted);
+    }
     onMessage(message) {
-        this.modules.forEach(e => {
+        this.mountedModules.forEach(e => {
             if (e instanceof Module) {
                 e.onMessage(message);
             }
         });
     }
+    onStructureChanged(module, mounted) {
+        if (this.superPanel) {
+            this.superPanel.onStructureChanged(module, mounted);
+        }
+        else {
+            if (!!!this.scheduledRebuild) {
+                this.scheduledRebuild = setTimeout(() => {
+                    this.scheduledRebuild = undefined;
+                    this.getRootView().children.length = 0;
+                    this.build(this.getRootView());
+                }, 0);
+            }
+        }
+    }
     build(root) {
         const groupView = this.setupShelf(root);
-        this.modules.forEach(e => {
+        this.mountedModules.forEach(e => {
             Reflect.set(e, "__root__", groupView);
             e.build(groupView);
         });
     }
     onCreate() {
         super.onCreate();
-        this.modules.forEach(e => {
+        this.mountedModules.forEach(e => {
             e.context = this.context;
             e.onCreate();
         });
     }
     onDestroy() {
         super.onDestroy();
-        this.modules.forEach(e => {
+        this.mountedModules.forEach(e => {
             e.onDestroy();
         });
     }
     onShow() {
         super.onShow();
-        this.modules.forEach(e => {
+        this.mountedModules.forEach(e => {
             e.onShow();
         });
     }
     onHidden() {
         super.onHidden();
-        this.modules.forEach(e => {
+        this.mountedModules.forEach(e => {
             e.onHidden();
         });
     }
     onRenderFinished() {
         super.onRenderFinished();
-        this.modules.forEach(e => {
+        this.mountedModules.forEach(e => {
             e.onRenderFinished();
         });
     }
@@ -2948,6 +3015,7 @@ exports.TOP = TOP;
 exports.Text = Text;
 exports.TranslationAnimation = TranslationAnimation;
 exports.VLayout = VLayout;
+exports.VMModule = VMModule;
 exports.VMPanel = VMPanel;
 exports.View = View;
 exports.ViewComponent = ViewComponent;

doric-js/bundle/doric-vm.js

@@ -4343,6 +4343,10 @@ class VMPanel extends Panel {
 }
 
 class Module extends Panel {
+    constructor() {
+        super(...arguments);
+        this.unmounted = false;
+    }
     get provider() {
         var _a;
         return this.__provider || ((_a = this.superPanel) === null || _a === void 0 ? void 0 : _a.provider);
@@ -4350,11 +4354,57 @@ class Module extends Panel {
     set provider(provider) {
         this.__provider = provider;
     }
+    mount() {
+        var _a;
+        if (this.unmounted) {
+            this.unmounted = false;
+            (_a = this.superPanel) === null || _a === void 0 ? void 0 : _a.onStructureChanged(this, true);
+            this.onMounted();
+        }
+    }
+    unmount() {
+        var _a;
+        if (!this.unmounted) {
+            this.unmounted = true;
+            (_a = this.superPanel) === null || _a === void 0 ? void 0 : _a.onStructureChanged(this, false);
+            this.onUnmounted();
+        }
+    }
+    get mounted() {
+        return !this.unmounted;
+    }
+    /**
+     * Dispatch message to other modules.
+     * @param message which is sent out
+     */
     dispatchMessage(message) {
         var _a;
         (_a = this.superPanel) === null || _a === void 0 ? void 0 : _a.dispatchMessage(message);
     }
+    /**
+     * Dispatched messages can be received by override this method.
+     * @param message recevied message
+     */
     onMessage(message) { }
+    /**
+     * Called when this module is mounted
+     */
+    onMounted() { }
+    /**
+     * Called when this module is unmounted
+     */
+    onUnmounted() { }
+}
+class VMModule extends Module {
+    getViewModel() {
+        return this.vm;
+    }
+    build(root) {
+        this.vh = new (this.getViewHolderClass());
+        this.vm = new (this.getViewModelClass())(this.getState(), this.vh);
+        this.vm.context = this.context;
+        this.vm.attach(root);
+    }
 }
 class ModularPanel extends Module {
     constructor() {
@@ -4375,48 +4425,65 @@ class ModularPanel extends Module {
             this.onMessage(message);
         }
     }
+    get mountedModules() {
+        return this.modules.filter(e => !(e instanceof Module) || e.mounted);
+    }
     onMessage(message) {
-        this.modules.forEach(e => {
+        this.mountedModules.forEach(e => {
             if (e instanceof Module) {
                 e.onMessage(message);
             }
         });
     }
+    onStructureChanged(module, mounted) {
+        if (this.superPanel) {
+            this.superPanel.onStructureChanged(module, mounted);
+        }
+        else {
+            if (!!!this.scheduledRebuild) {
+                this.scheduledRebuild = setTimeout(() => {
+                    this.scheduledRebuild = undefined;
+                    this.getRootView().children.length = 0;
+                    this.build(this.getRootView());
+                }, 0);
+            }
+        }
+    }
     build(root) {
         const groupView = this.setupShelf(root);
-        this.modules.forEach(e => {
+        this.mountedModules.forEach(e => {
             Reflect.set(e, "__root__", groupView);
             e.build(groupView);
         });
     }
     onCreate() {
         super.onCreate();
-        this.modules.forEach(e => {
+        this.mountedModules.forEach(e => {
             e.context = this.context;
             e.onCreate();
         });
     }
     onDestroy() {
         super.onDestroy();
-        this.modules.forEach(e => {
+        this.mountedModules.forEach(e => {
             e.onDestroy();
         });
     }
     onShow() {
         super.onShow();
-        this.modules.forEach(e => {
+        this.mountedModules.forEach(e => {
             e.onShow();
         });
     }
     onHidden() {
         super.onHidden();
-        this.modules.forEach(e => {
+        this.mountedModules.forEach(e => {
             e.onHidden();
         });
     }
     onRenderFinished() {
         super.onRenderFinished();
-        this.modules.forEach(e => {
+        this.mountedModules.forEach(e => {
             e.onRenderFinished();
         });
     }
@@ -4710,6 +4777,7 @@ exports.TOP = TOP;
 exports.Text = Text;
 exports.TranslationAnimation = TranslationAnimation;
 exports.VLayout = VLayout;
+exports.VMModule = VMModule;
 exports.VMPanel = VMPanel;
 exports.View = View;
 exports.ViewComponent = ViewComponent;

doric-js/index.d.ts

@@ -1423,27 +1423,56 @@ declare module 'doric/lib/src/pattern/modular' {
     import { Panel } from "doric/lib/src/ui/panel";
     import { Group } from "doric/lib/src/ui/view";
     import { ClassType } from "doric/lib/src/util/types";
+    import { ViewHolder, ViewModel } from "doric/lib/src/pattern/mvvm";
     import { Provider } from "doric/lib/src/pattern/provider";
     export abstract class Module extends Panel {
-        superPanel?: ModularPanel;
-        __provider?: Provider;
-        get provider(): Provider | undefined;
-        set provider(provider: Provider | undefined);
-        dispatchMessage(message: any): void;
-        onMessage(message: any): void;
+            superPanel?: ModularPanel;
+            __provider?: Provider;
+            get provider(): Provider | undefined;
+            set provider(provider: Provider | undefined);
+            mount(): void;
+            unmount(): void;
+            get mounted(): boolean;
+            /**
+                * Dispatch message to other modules.
+                * @param message which is sent out
+                */
+            dispatchMessage(message: any): void;
+            /**
+                * Dispatched messages can be received by override this method.
+                * @param message recevied message
+                */
+            onMessage(message: any): void;
+            /**
+                * Called when this module is mounted
+                */
+            onMounted(): void;
+            /**
+                * Called when this module is unmounted
+                */
+            onUnmounted(): void;
+    }
+    export abstract class VMModule<M extends Object, V extends ViewHolder> extends Module {
+            abstract getViewModelClass(): ClassType<ViewModel<M, V>>;
+            abstract getState(): M;
+            abstract getViewHolderClass(): ClassType<V>;
+            getViewModel(): ViewModel<M, V> | undefined;
+            build(root: Group): void;
     }
     export abstract class ModularPanel extends Module {
-        constructor();
-        abstract setupModules(): ClassType<Panel>[];
-        abstract setupShelf(root: Group): Group;
-        dispatchMessage(message: any): void;
-        onMessage(message: any): void;
-        build(root: Group): void;
-        onCreate(): void;
-        onDestroy(): void;
-        onShow(): void;
-        onHidden(): void;
-        onRenderFinished(): void;
+            constructor();
+            abstract setupModules(): ClassType<Panel>[];
+            abstract setupShelf(root: Group): Group;
+            dispatchMessage(message: any): void;
+            get mountedModules(): Panel[];
+            onMessage(message: any): void;
+            onStructureChanged(module: Module, mounted: boolean): void;
+            build(root: Group): void;
+            onCreate(): void;
+            onDestroy(): void;
+            onShow(): void;
+            onHidden(): void;
+            onRenderFinished(): void;
     }
 }
 

doric-js/lib/src/pattern/modular.d.ts

@@ -1,22 +1,55 @@
 import { Panel } from "../ui/panel";
 import { Group } from "../ui/view";
 import { ClassType } from "../util/types";
+import { ViewHolder, ViewModel } from "./mvvm";
 import { Provider } from "./provider";
 export declare abstract class Module extends Panel {
     superPanel?: ModularPanel;
     __provider?: Provider;
     get provider(): Provider | undefined;
     set provider(provider: Provider | undefined);
+    private unmounted;
+    mount(): void;
+    unmount(): void;
+    get mounted(): boolean;
+    /**
+     * Dispatch message to other modules.
+     * @param message which is sent out
+     */
     dispatchMessage(message: any): void;
+    /**
+     * Dispatched messages can be received by override this method.
+     * @param message recevied message
+     */
     onMessage(message: any): void;
+    /**
+     * Called when this module is mounted
+     */
+    onMounted(): void;
+    /**
+     * Called when this module is unmounted
+     */
+    onUnmounted(): void;
+}
+export declare abstract class VMModule<M extends Object, V extends ViewHolder> extends Module {
+    private vm?;
+    private vh?;
+    abstract getViewModelClass(): ClassType<ViewModel<M, V>>;
+    abstract getState(): M;
+    abstract getViewHolderClass(): ClassType<V>;
+    getViewModel(): ViewModel<M, V> | undefined;
+    build(root: Group): void;
 }
 export declare abstract class ModularPanel extends Module {
     private modules;
+    private scheduledRebuild?;
     constructor();
     abstract setupModules(): ClassType<Panel>[];
     abstract setupShelf(root: Group): Group;
     dispatchMessage(message: any): void;
+    get mountedModules(): Panel[];
     onMessage(message: any): void;
+    onStructureChanged(module: Module, mounted: boolean): void;
     build(root: Group): void;
     onCreate(): void;
     onDestroy(): void;

doric-js/lib/src/pattern/modular.js

@@ -1,5 +1,9 @@
 import { Panel } from "../ui/panel";
 export class Module extends Panel {
+    constructor() {
+        super(...arguments);
+        this.unmounted = false;
+    }
     get provider() {
         var _a;
         return this.__provider || ((_a = this.superPanel) === null || _a === void 0 ? void 0 : _a.provider);
@@ -7,11 +11,57 @@ export class Module extends Panel {
     set provider(provider) {
         this.__provider = provider;
     }
+    mount() {
+        var _a;
+        if (this.unmounted) {
+            this.unmounted = false;
+            (_a = this.superPanel) === null || _a === void 0 ? void 0 : _a.onStructureChanged(this, true);
+            this.onMounted();
+        }
+    }
+    unmount() {
+        var _a;
+        if (!this.unmounted) {
+            this.unmounted = true;
+            (_a = this.superPanel) === null || _a === void 0 ? void 0 : _a.onStructureChanged(this, false);
+            this.onUnmounted();
+        }
+    }
+    get mounted() {
+        return !this.unmounted;
+    }
+    /**
+     * Dispatch message to other modules.
+     * @param message which is sent out
+     */
     dispatchMessage(message) {
         var _a;
         (_a = this.superPanel) === null || _a === void 0 ? void 0 : _a.dispatchMessage(message);
     }
+    /**
+     * Dispatched messages can be received by override this method.
+     * @param message recevied message
+     */
     onMessage(message) { }
+    /**
+     * Called when this module is mounted
+     */
+    onMounted() { }
+    /**
+     * Called when this module is unmounted
+     */
+    onUnmounted() { }
+}
+export class VMModule extends Module {
+    getViewModel() {
+        return this.vm;
+    }
+    build(root) {
+        this.vh = new (this.getViewHolderClass());
+        this.vm = new (this.getViewModelClass())(this.getState(), this.vh);
+        this.vm.context = this.context;
+        this.vm.attach(root);
+    }
 }
 export class ModularPanel extends Module {
     constructor() {
@@ -32,48 +82,65 @@ export class ModularPanel extends Module {
             this.onMessage(message);
         }
     }
+    get mountedModules() {
+        return this.modules.filter(e => !(e instanceof Module) || e.mounted);
+    }
     onMessage(message) {
-        this.modules.forEach(e => {
+        this.mountedModules.forEach(e => {
             if (e instanceof Module) {
                 e.onMessage(message);
             }
         });
     }
+    onStructureChanged(module, mounted) {
+        if (this.superPanel) {
+            this.superPanel.onStructureChanged(module, mounted);
+        }
+        else {
+            if (!!!this.scheduledRebuild) {
+                this.scheduledRebuild = setTimeout(() => {
+                    this.scheduledRebuild = undefined;
+                    this.getRootView().children.length = 0;
+                    this.build(this.getRootView());
+                }, 0);
+            }
+        }
+    }
     build(root) {
         const groupView = this.setupShelf(root);
-        this.modules.forEach(e => {
+        this.mountedModules.forEach(e => {
             Reflect.set(e, "__root__", groupView);
             e.build(groupView);
         });
     }
     onCreate() {
         super.onCreate();
-        this.modules.forEach(e => {
+        this.mountedModules.forEach(e => {
             e.context = this.context;
             e.onCreate();
         });
     }
     onDestroy() {
         super.onDestroy();
-        this.modules.forEach(e => {
+        this.mountedModules.forEach(e => {
             e.onDestroy();
         });
     }
     onShow() {
         super.onShow();
-        this.modules.forEach(e => {
+        this.mountedModules.forEach(e => {
             e.onShow();
         });
     }
     onHidden() {
         super.onHidden();
-        this.modules.forEach(e => {
+        this.mountedModules.forEach(e => {
             e.onHidden();
         });
     }
     onRenderFinished() {
         super.onRenderFinished();
-        this.modules.forEach(e => {
+        this.mountedModules.forEach(e => {
             e.onRenderFinished();
         });
     }

doric-js/src/pattern/modular.ts

@@ -1,6 +1,7 @@
 import { Panel } from "../ui/panel"
 import { Group } from "../ui/view"
 import { ClassType } from "../util/types"
+import { ViewHolder, ViewModel } from "./mvvm"
 import { Provider } from "./provider"
 
 export abstract class Module extends Panel {
@@ -16,15 +17,77 @@ export abstract class Module extends Panel {
         this.__provider = provider
     }
 
+    private unmounted = false
+
+    mount() {
+        if (this.unmounted) {
+            this.unmounted = false
+            this.superPanel?.onStructureChanged(this, true)
+            this.onMounted()
+        }
+    }
+
+    unmount() {
+        if (!this.unmounted) {
+            this.unmounted = true
+            this.superPanel?.onStructureChanged(this, false)
+            this.onUnmounted()
+        }
+    }
+
+    get mounted() {
+        return !this.unmounted
+    }
+
+    /**
+     * Dispatch message to other modules.
+     * @param message which is sent out
+     */
     dispatchMessage(message: any) {
         this.superPanel?.dispatchMessage(message)
     }
 
+    /**
+     * Dispatched messages can be received by override this method.
+     * @param message recevied message
+     */
     onMessage(message: any) { }
+
+    /**
+     * Called when this module is mounted
+     */
+    onMounted() { }
+
+    /**
+     * Called when this module is unmounted
+     */
+    onUnmounted() { }
+}
+
+export abstract class VMModule<M extends Object, V extends ViewHolder> extends Module {
+    private vm?: ViewModel<M, V>
+    private vh?: V
+    abstract getViewModelClass(): ClassType<ViewModel<M, V>>
+
+    abstract getState(): M
+
+    abstract getViewHolderClass(): ClassType<V>
+
+    getViewModel() {
+        return this.vm
+    }
+
+    build(root: Group): void {
+        this.vh = new (this.getViewHolderClass())
+        this.vm = new (this.getViewModelClass())(this.getState(), this.vh)
+        this.vm.context = this.context
+        this.vm.attach(root)
+    }
 }
 
 export abstract class ModularPanel extends Module {
     private modules: Panel[]
+    private scheduledRebuild?: NodeJS.Timeout
 
     constructor() {
         super()
@@ -49,18 +112,35 @@ export abstract class ModularPanel extends Module {
         }
     }
 
+    get mountedModules() {
+        return this.modules.filter(e => !(e instanceof Module) || e.mounted)
+    }
+
     onMessage(message: any) {
-        this.modules.forEach(e => {
+        this.mountedModules.forEach(e => {
             if (e instanceof Module) {
                 e.onMessage(message)
             }
         })
     }
 
+    onStructureChanged(module: Module, mounted: boolean) {
+        if (this.superPanel) {
+            this.superPanel.onStructureChanged(module, mounted)
+        } else {
+            if (!!!this.scheduledRebuild) {
+                this.scheduledRebuild = setTimeout(() => {
+                    this.scheduledRebuild = undefined
+                    this.getRootView().children.length = 0
+                    this.build(this.getRootView())
+                }, 0)
+            }
+        }
+    }
 
     build(root: Group) {
         const groupView = this.setupShelf(root)
-        this.modules.forEach(e => {
+        this.mountedModules.forEach(e => {
             Reflect.set(e, "__root__", groupView)
             e.build(groupView)
         })
@@ -68,7 +148,7 @@ export abstract class ModularPanel extends Module {
 
     onCreate() {
         super.onCreate()
-        this.modules.forEach(e => {
+        this.mountedModules.forEach(e => {
             e.context = this.context
             e.onCreate()
         })
@@ -76,28 +156,28 @@ export abstract class ModularPanel extends Module {
 
     onDestroy() {
         super.onDestroy()
-        this.modules.forEach(e => {
+        this.mountedModules.forEach(e => {
             e.onDestroy()
         })
     }
 
     onShow() {
         super.onShow()
-        this.modules.forEach(e => {
+        this.mountedModules.forEach(e => {
             e.onShow()
         })
     }
 
     onHidden() {
         super.onHidden()
-        this.modules.forEach(e => {
+        this.mountedModules.forEach(e => {
             e.onHidden()
         })
     }
 
     onRenderFinished() {
         super.onRenderFinished()
-        this.modules.forEach(e => {
+        this.mountedModules.forEach(e => {
             e.onRenderFinished()
         })
     }

doric-web/dist/index.js

@@ -4397,6 +4397,10 @@ class VMPanel extends Panel {
 }
 
 class Module extends Panel {
+    constructor() {
+        super(...arguments);
+        this.unmounted = false;
+    }
     get provider() {
         var _a;
         return this.__provider || ((_a = this.superPanel) === null || _a === void 0 ? void 0 : _a.provider);
@@ -4404,11 +4408,57 @@ class Module extends Panel {
     set provider(provider) {
         this.__provider = provider;
     }
+    mount() {
+        var _a;
+        if (this.unmounted) {
+            this.unmounted = false;
+            (_a = this.superPanel) === null || _a === void 0 ? void 0 : _a.onStructureChanged(this, true);
+            this.onMounted();
+        }
+    }
+    unmount() {
+        var _a;
+        if (!this.unmounted) {
+            this.unmounted = true;
+            (_a = this.superPanel) === null || _a === void 0 ? void 0 : _a.onStructureChanged(this, false);
+            this.onUnmounted();
+        }
+    }
+    get mounted() {
+        return !this.unmounted;
+    }
+    /**
+     * Dispatch message to other modules.
+     * @param message which is sent out
+     */
     dispatchMessage(message) {
         var _a;
         (_a = this.superPanel) === null || _a === void 0 ? void 0 : _a.dispatchMessage(message);
     }
+    /**
+     * Dispatched messages can be received by override this method.
+     * @param message recevied message
+     */
     onMessage(message) { }
+    /**
+     * Called when this module is mounted
+     */
+    onMounted() { }
+    /**
+     * Called when this module is unmounted
+     */
+    onUnmounted() { }
+}
+class VMModule extends Module {
+    getViewModel() {
+        return this.vm;
+    }
+    build(root) {
+        this.vh = new (this.getViewHolderClass());
+        this.vm = new (this.getViewModelClass())(this.getState(), this.vh);
+        this.vm.context = this.context;
+        this.vm.attach(root);
+    }
 }
 class ModularPanel extends Module {
     constructor() {
@@ -4429,48 +4479,65 @@ class ModularPanel extends Module {
             this.onMessage(message);
         }
     }
+    get mountedModules() {
+        return this.modules.filter(e => !(e instanceof Module) || e.mounted);
+    }
     onMessage(message) {
-        this.modules.forEach(e => {
+        this.mountedModules.forEach(e => {
             if (e instanceof Module) {
                 e.onMessage(message);
             }
         });
     }
+    onStructureChanged(module, mounted) {
+        if (this.superPanel) {
+            this.superPanel.onStructureChanged(module, mounted);
+        }
+        else {
+            if (!!!this.scheduledRebuild) {
+                this.scheduledRebuild = setTimeout(() => {
+                    this.scheduledRebuild = undefined;
+                    this.getRootView().children.length = 0;
+                    this.build(this.getRootView());
+                }, 0);
+            }
+        }
+    }
     build(root) {
         const groupView = this.setupShelf(root);
-        this.modules.forEach(e => {
+        this.mountedModules.forEach(e => {
             Reflect.set(e, "__root__", groupView);
             e.build(groupView);
         });
     }
     onCreate() {
         super.onCreate();
-        this.modules.forEach(e => {
+        this.mountedModules.forEach(e => {
             e.context = this.context;
             e.onCreate();
         });
     }
     onDestroy() {
         super.onDestroy();
-        this.modules.forEach(e => {
+        this.mountedModules.forEach(e => {
             e.onDestroy();
         });
     }
     onShow() {
         super.onShow();
-        this.modules.forEach(e => {
+        this.mountedModules.forEach(e => {
             e.onShow();
         });
     }
     onHidden() {
         super.onHidden();
-        this.modules.forEach(e => {
+        this.mountedModules.forEach(e => {
             e.onHidden();
         });
     }
     onRenderFinished() {
         super.onRenderFinished();
-        this.modules.forEach(e => {
+        this.mountedModules.forEach(e => {
             e.onRenderFinished();
         });
     }
@@ -4523,6 +4590,7 @@ exports.TOP = TOP;
 exports.Text = Text;
 exports.TranslationAnimation = TranslationAnimation;
 exports.VLayout = VLayout;
+exports.VMModule = VMModule;
 exports.VMPanel = VMPanel;
 exports.View = View;
 exports.ViewComponent = ViewComponent;