diff --git a/doric-js/bundle/doric-lib.es5.js b/doric-js/bundle/doric-lib.es5.js
index f1369bb8..f68caf76 100644
--- a/doric-js/bundle/doric-lib.es5.js
+++ b/doric-js/bundle/doric-lib.es5.js
@@ -209,7 +209,7 @@ var View = /** @class */ (function () {
         this.viewId = uniqueId('ViewId');
         this.nativeViewModel = {
             id: this.viewId,
-            type: this.constructor.name,
+            type: this.viewType(),
             props: this.__dirty_props__,
         };
     }
@@ -300,6 +300,9 @@ var View = /** @class */ (function () {
         enumerable: false,
         configurable: true
     });
+    View.prototype.viewType = function () {
+        return this.constructor.name;
+    };
     View.prototype.onPropertyChanged = function (propKey, oldV, newV) {
         var _this = this;
         if (newV instanceof Function) {
@@ -3625,6 +3628,17 @@ var Module = /** @class */ (function (_super) {
     function Module() {
         return _super !== null && _super.apply(this, arguments) || this;
     }
+    Object.defineProperty(Module.prototype, "provider", {
+        get: function () {
+            var _a;
+            return this.__provider || ((_a = this.superPanel) === null || _a === void 0 ? void 0 : _a.provider);
+        },
+        set: function (provider) {
+            this.__provider = provider;
+        },
+        enumerable: false,
+        configurable: true
+    });
     Module.prototype.dispatchMessage = function (message) {
         var _a;
         (_a = this.superPanel) === null || _a === void 0 ? void 0 : _a.dispatchMessage(message);
diff --git a/doric-js/bundle/doric-lib.js b/doric-js/bundle/doric-lib.js
index 716cd079..ce3785ba 100644
--- a/doric-js/bundle/doric-lib.js
+++ b/doric-js/bundle/doric-lib.js
@@ -148,7 +148,7 @@ class View {
         this.__dirty_props__ = {};
         this.nativeViewModel = {
             id: this.viewId,
-            type: this.constructor.name,
+            type: this.viewType(),
             props: this.__dirty_props__,
         };
         return new Proxy(this, {
@@ -226,6 +226,9 @@ class View {
     get dirtyProps() {
         return this.__dirty_props__;
     }
+    viewType() {
+        return this.constructor.name;
+    }
     onPropertyChanged(propKey, oldV, newV) {
         if (newV instanceof Function) {
             newV = this.callback2Id(newV);
@@ -2789,6 +2792,13 @@ class VMPanel extends Panel {
 }
 
 class Module extends Panel {
+    get provider() {
+        var _a;
+        return this.__provider || ((_a = this.superPanel) === null || _a === void 0 ? void 0 : _a.provider);
+    }
+    set provider(provider) {
+        this.__provider = provider;
+    }
     dispatchMessage(message) {
         var _a;
         (_a = this.superPanel) === null || _a === void 0 ? void 0 : _a.dispatchMessage(message);
diff --git a/doric-js/bundle/doric-vm.js b/doric-js/bundle/doric-vm.js
index d7211d77..d47d0200 100644
--- a/doric-js/bundle/doric-vm.js
+++ b/doric-js/bundle/doric-vm.js
@@ -1669,7 +1669,7 @@ class View {
         this.__dirty_props__ = {};
         this.nativeViewModel = {
             id: this.viewId,
-            type: this.constructor.name,
+            type: this.viewType(),
             props: this.__dirty_props__,
         };
         return new Proxy(this, {
@@ -1747,6 +1747,9 @@ class View {
     get dirtyProps() {
         return this.__dirty_props__;
     }
+    viewType() {
+        return this.constructor.name;
+    }
     onPropertyChanged(propKey, oldV, newV) {
         if (newV instanceof Function) {
             newV = this.callback2Id(newV);
@@ -4310,6 +4313,13 @@ class VMPanel extends Panel {
 }
 
 class Module extends Panel {
+    get provider() {
+        var _a;
+        return this.__provider || ((_a = this.superPanel) === null || _a === void 0 ? void 0 : _a.provider);
+    }
+    set provider(provider) {
+        this.__provider = provider;
+    }
     dispatchMessage(message) {
         var _a;
         (_a = this.superPanel) === null || _a === void 0 ? void 0 : _a.dispatchMessage(message);
diff --git a/doric-js/index.d.ts b/doric-js/index.d.ts
index 49db6eaa..ed690d4a 100644
--- a/doric-js/index.d.ts
+++ b/doric-js/index.d.ts
@@ -239,6 +239,7 @@ declare module 'doric/lib/src/ui/view' {
                     [index: string]: Model;
             };
             nativeViewModel: NativeViewModel;
+            viewType(): string;
             onPropertyChanged(propKey: string, oldV: Model, newV: Model): void;
             clean(): void;
             isDirty(): boolean;
@@ -1415,8 +1416,12 @@ 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 { 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;
     }
diff --git a/doric-js/lib/src/pattern/modular.d.ts b/doric-js/lib/src/pattern/modular.d.ts
index c64d44e6..2d37c32b 100644
--- a/doric-js/lib/src/pattern/modular.d.ts
+++ b/doric-js/lib/src/pattern/modular.d.ts
@@ -1,8 +1,12 @@
 import { Panel } from "../ui/panel";
 import { Group } from "../ui/view";
 import { ClassType } from "../util/types";
+import { Provider } from "./provider";
 export declare 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;
 }
diff --git a/doric-js/lib/src/pattern/modular.js b/doric-js/lib/src/pattern/modular.js
index 49980aec..d44ef2ab 100644
--- a/doric-js/lib/src/pattern/modular.js
+++ b/doric-js/lib/src/pattern/modular.js
@@ -1,5 +1,12 @@
 import { Panel } from "../ui/panel";
 export class Module extends Panel {
+    get provider() {
+        var _a;
+        return this.__provider || ((_a = this.superPanel) === null || _a === void 0 ? void 0 : _a.provider);
+    }
+    set provider(provider) {
+        this.__provider = provider;
+    }
     dispatchMessage(message) {
         var _a;
         (_a = this.superPanel) === null || _a === void 0 ? void 0 : _a.dispatchMessage(message);
diff --git a/doric-js/lib/src/ui/view.d.ts b/doric-js/lib/src/ui/view.d.ts
index 2574ff48..3674ef86 100644
--- a/doric-js/lib/src/ui/view.d.ts
+++ b/doric-js/lib/src/ui/view.d.ts
@@ -76,6 +76,7 @@ export declare abstract class View implements Modeling {
         [index: string]: Model;
     };
     nativeViewModel: NativeViewModel;
+    viewType(): string;
     onPropertyChanged(propKey: string, oldV: Model, newV: Model): void;
     clean(): void;
     isDirty(): boolean;
diff --git a/doric-js/lib/src/ui/view.js b/doric-js/lib/src/ui/view.js
index cd433543..4335b5d5 100644
--- a/doric-js/lib/src/ui/view.js
+++ b/doric-js/lib/src/ui/view.js
@@ -30,7 +30,7 @@ export class View {
         this.__dirty_props__ = {};
         this.nativeViewModel = {
             id: this.viewId,
-            type: this.constructor.name,
+            type: this.viewType(),
             props: this.__dirty_props__,
         };
         return new Proxy(this, {
@@ -108,6 +108,9 @@ export class View {
     get dirtyProps() {
         return this.__dirty_props__;
     }
+    viewType() {
+        return this.constructor.name;
+    }
     onPropertyChanged(propKey, oldV, newV) {
         if (newV instanceof Function) {
             newV = this.callback2Id(newV);
diff --git a/doric-js/src/pattern/modular.ts b/doric-js/src/pattern/modular.ts
index 074807aa..cd656fa2 100644
--- a/doric-js/src/pattern/modular.ts
+++ b/doric-js/src/pattern/modular.ts
@@ -1,10 +1,21 @@
 import { Panel } from "../ui/panel"
 import { Group } from "../ui/view"
 import { ClassType } from "../util/types"
+import { Provider } from "./provider"
 
 export abstract class Module extends Panel {
     superPanel?: ModularPanel
 
+    __provider?: Provider
+
+    get provider(): Provider | undefined {
+        return this.__provider || (this.superPanel?.provider)
+    }
+
+    set provider(provider: Provider | undefined) {
+        this.__provider = provider
+    }
+
     dispatchMessage(message: any) {
         this.superPanel?.dispatchMessage(message)
     }
diff --git a/doric-js/src/ui/view.es5.ts b/doric-js/src/ui/view.es5.ts
index 8a76efbf..a4f2340a 100644
--- a/doric-js/src/ui/view.es5.ts
+++ b/doric-js/src/ui/view.es5.ts
@@ -185,10 +185,14 @@ export abstract class View implements Modeling {
 
     nativeViewModel: NativeViewModel = {
         id: this.viewId,
-        type: this.constructor.name,
+        type: this.viewType(),
         props: this.__dirty_props__,
     }
 
+    viewType() {
+        return this.constructor.name
+    }
+
     onPropertyChanged(propKey: string, oldV: Model, newV: Model): void {
         if (newV instanceof Function) {
             newV = this.callback2Id(newV)
diff --git a/doric-js/src/ui/view.ts b/doric-js/src/ui/view.ts
index cb316a07..4089fd0c 100644
--- a/doric-js/src/ui/view.ts
+++ b/doric-js/src/ui/view.ts
@@ -191,10 +191,14 @@ export abstract class View implements Modeling {
 
     nativeViewModel: NativeViewModel = {
         id: this.viewId,
-        type: this.constructor.name,
+        type: this.viewType(),
         props: this.__dirty_props__,
     }
 
+    viewType() {
+        return this.constructor.name
+    }
+
     onPropertyChanged(propKey: string, oldV: Model, newV: Model): void {
         if (newV instanceof Function) {
             newV = this.callback2Id(newV)