qcobjects 2.4.32-beta → 2.4.37

package/QCObjects.js

@@ -190,7 +190,8 @@
   } else if (typeof global !== "undefined") {
     _top = global;
   }
-  var basePath = (
+  var _domain_, _basePath_;
+  _basePath_ = (
     function () {
       var _basePath = "";
       if (isBrowser) {
@@ -238,7 +239,7 @@
       _top.console.prototype.log = function (message) {};
     }
 
-    var domain = (
+    _domain_ = (
       function () {
         return (typeof document !== "undefined" && document.domain !== "") ? (document.domain) : ("localhost");
       }
@@ -264,7 +265,7 @@
     // This is only for code integrity purpose using non-browser implementations
     // like using node.js
     var _secretKey = "secret";
-    var domain = "localhost";
+    _domain_ = "localhost";
   }
 
   _top._asyncLoad = [];
@@ -783,9 +784,9 @@
     var _ret_ = "";
     switch (true) {
       case typeof o_c === "object" &&
-      !!o_c.constructor &&
-      Object.hasOwnProperty.call(o_c.constructor, "name") &&
-      o_c.constructor.name !== "":
+      (!!o_c.constructor &&
+      !!o_c.constructor.name)  
+      && o_c.constructor.name !== "":
         _ret_ = o_c.constructor.name;
         break;
       case (!!o_c && !!o_c.__classType) && o_c.__classType !== "":
@@ -794,6 +795,9 @@
       case (!!o_c && !!o_c.__definition) && (!!o_c.__definition.__classType) && o_c.__definition.__classType !== "":
         _ret_ = o_c.__definition.__classType;
         break;
+      case typeof o_c === "function" && !!o_c.name:
+        _ret_ = o_c.name;
+        break;
       default:
         _ret_ = ObjectName(o_c);
         break;
@@ -831,15 +835,19 @@
 
   };
 
-  var __register_class__ = function (_class_) {
-    var name = _class_.name;
+  var __register_class__ = function (_class_, __namespace) {
+    var name = _class_.name || __getType__(_class_);
+    _class_.__definition.__classType = name;
+    if (typeof __namespace !== "undefined"){
+      _class_.__definition.__namespace = __namespace;
+    }
     _QC_CLASSES[name] = _class_;
     _top[name] = _QC_CLASSES[name];
     return _top[name];
   };
 
-  var RegisterClass = function (_class_) {
-    return __register_class__(_class_);
+  var RegisterClass = function (_class_, __namespace) {
+    return __register_class__(_class_, __namespace);
   };
   __make_global__(RegisterClass);
 
@@ -906,7 +914,6 @@
       __definition = {
         ...definition
       };
-      body = null;
 
       static hierarchy(__class__) {
         var __classType = function (o_c) {
@@ -935,6 +942,7 @@
           _o_ = {};
         }
         super(_o_);
+  
         let self = this;
         __instanceID = (typeof __instanceID === "undefined" || __instanceID === null) ? (0) : (__instanceID + 1);
         if (!self.__instanceID) {
@@ -1013,20 +1021,9 @@
         return this["body"]["style"];
       }
 
-      hierarchy(__instance__) {
-        var __hierarchy;
-        if (typeof __instance__ === "undefined" || __instance__ === null) {
-          __instance__ = this;
-        }
-        var __parent__ = Object.getPrototypeOf(__instance__.constructor);
-        if (__parent__.hierarchy) {
-          __hierarchy = __parent__.hierarchy.call(__parent__, __parent__);
-        } else {
-          __hierarchy = [];
-        }
-        return [__getType__(__instance__)].concat(__hierarchy).filter(function (value, index, self) {
-          return self.indexOf(value) === index;
-        });
+      hierarchy() {
+        var __instance__ = this;
+        return this.getClass().hierarchy(__instance__);
       }
 
 
@@ -1072,7 +1069,6 @@
 
     _QC_CLASSES[name] = _CastProps(definition, _QC_CLASSES[name]);
     _QC_CLASSES[name]["__definition"] = definition;
-    _QC_CLASSES[name]["__definition"]["hierarchy"] = _QC_CLASSES[name]["hierarchy"].bind(_QC_CLASSES[name]["__definition"]);
     _QC_CLASSES[name]["__definition"]["__classType"] = name;
     _QC_CLASSES[name]["__definition"]["__new__"] = function __new__(_o_) {
       _CastProps(_o_, this);
@@ -1100,14 +1096,13 @@
       var _className = className.split(".").slice(-1).join("");
       var _package = Package(packageName);
       var packageClasses = (typeof _package !== "undefined") ? (_package.filter(classFactory => {
-        return typeof classFactory !== "undefined" &&
-          Object.hasOwnProperty.call(classFactory, "__definition") &&
-          isQCObjects_Class(classFactory) &&
-          classFactory.__definition.__classType === _className &&
-          !Object.hasOwnProperty.call(classFactory, "__instanceID");
+        return isQCObjects_Class(classFactory) &&
+          (classFactory.__definition.__classType === _className || (typeof classFactory === "function" && !!classFactory.name) ) ;
       }).reverse()) : ([]);
       if (packageClasses.length > 0) {
         _classFactory = packageClasses[0];
+      } else {
+        throw Error (`Class ${className} not found.`);
       }
     } else if (className !== null && Object.hasOwnProperty.call(_QC_CLASSES, className)) {
       _classFactory = _QC_CLASSES[className];
@@ -1383,7 +1378,7 @@
           "routingWay": "hash",
           "useSDK": true,
           "useLocalSDK": false,
-          "basePath": basePath
+          "basePath": _basePath_
         };
         _config_settings._CONFIG_ENC = null;
         this._instance = _config_settings;
@@ -1412,7 +1407,7 @@
       logger.debug(`CONFIG.set  ${name}: ${value}`);
       // hack to force update basePath from CONFIG
       if (name === "basePath") {
-        basePath = value;
+        _basePath_ = value;
       }
       var _conf;
       try {
@@ -1532,7 +1527,7 @@
     }
     if (Object.hasOwnProperty.call(_QC_PACKAGES, namespace)) {
       _QC_PACKAGES[namespace].map(function (_class_) {
-        __register_class__(_class_);
+        __register_class__(_class_, namespace);
       });
     }
     return (Object.hasOwnProperty.call(_QC_PACKAGES, namespace)) ? (_QC_PACKAGES[namespace]) : (undefined);
@@ -1644,7 +1639,7 @@
               "_package_name_": packagename
             });
           };
-          s1.src = (external) ? (_top.CONFIG.get("remoteImportsPath") + packagename + ".js") : (basePath + _top.CONFIG.get("relativeImportPath") + packagename + ".js");
+          s1.src = (external) ? (_top.CONFIG.get("remoteImportsPath") + packagename + ".js") : (_basePath_ + _top.CONFIG.get("relativeImportPath") + packagename + ".js");
           document.getElementsByTagName("head")[0].appendChild(s1);
         }
       });
@@ -1665,7 +1660,7 @@
             if (jsNodePath !== null) {
               packageAbsoluteName = jsNodePath + "/" + packagename + ".js";
             } else {
-              packageAbsoluteName = basePath + _top.CONFIG.get("relativeImportPath") + packagename;
+              packageAbsoluteName = _basePath_ + _top.CONFIG.get("relativeImportPath") + packagename;
             }
           }
           try {
@@ -2019,657 +2014,711 @@
       }
     }
   };
-  Class("Component", ClassFactory("InheritClass"), {
-    domain: domain,
-    basePath: basePath,
-    templateURI: "",
-    templateHandler: "DefaultTemplateHandler",
-    template: undefined,
-    processorHandler: null,
-    tplsource: "default",
-    url: "",
-    name: "",
-    method: "GET",
-    data: {},
-    reload: false,
-    shadowed: false,
-    cached: true,
-    done() {
-      //TODO: default done method
-    },
-    fail() {
-      //TODO: default fail method
-    },
-    set(name, value) {
-      this[name] = value;
-    },
-    get(name) {
-      return this[name];
-    },
-    __promise__: null,
-    feedComponent() {
-      var _component_ = this;
-      var _feedComponent_InBrowser = function (_component_) {
-        if (typeof _component_.container === "undefined" && typeof _component_.body === "undefined") {
-          logger.warn("COMPONENT {{NAME}} has an undefined container and body".replace("{{NAME}}", _component_.name));
-          return;
+
+  Package("com.qcobjects", [
+    class Component extends ClassFactory("InheritClass") {
+      validRoutingWays= ["pathname", "hash", "search"];
+      basePath= _basePath_;
+      domain= _domain_;
+      templateHandler= "DefaultTemplateHandler";
+      processorHandler= null;
+      routingWay= null;
+      routingNodes= [];
+      routings= [];
+      routingPath= "";
+      _componentHelpers= [];
+      splashScreenComponent=undefined;
+
+      constructor ({
+        templateURI= "",
+        template,
+        tplsource= "default",
+        url= "",
+        name= "",
+        method= "GET",
+        data= {},
+        reload= false,
+        shadowed= false,
+        cached= true,
+        _body=_DOMCreateElement("div"),
+        __promise__= null,
+        __shadowRoot,
+        body,
+        shadowRoot,
+        splashScreenComponent,
+      }){
+        super(...arguments);
+        var self = this;
+  
+        if (typeof self.name === "undefined") {
+          logger.warn("A name is not defined for " + __getType__(self));
         }
-        var container = (typeof _component_.container === "undefined" || _component_.container === null) ? (_component_.body) : (_component_.container);
-        var parsedAssignmentText = _component_.parsedAssignmentText;
-        _component_.innerHTML = parsedAssignmentText;
-        if (_component_.shadowed) {
-          logger.debug("COMPONENT {{NAME}} is shadowed".replace("{{NAME}}", _component_.name));
-          logger.debug("Preparing slots for Shadowed COMPONENT {{NAME}}".replace("{{NAME}}", _component_.name));
-          var tmp_shadowContainer = _DOMCreateElement("div");
-          container.subelements("[slot]").map(
-            function (c) {
-              if (c.parentElement === container) {
-                tmp_shadowContainer.appendChild(c);
-              }
-            });
-          logger.debug("Creating shadowedContainer for COMPONENT {{NAME}}".replace("{{NAME}}", _component_.name));
-          var shadowContainer = _DOMCreateElement("div");
-          shadowContainer.classList.add("shadowHost");
-          try {
-            _component_.shadowRoot = shadowContainer.attachShadow({
-              mode: "open"
-            });
-          } catch (e) {
-            try {
-              logger.debug("Shadowed COMPONENT {{NAME}} is repeated".replace("{{NAME}}", _component_.name));
-              _component_.shadowRoot = shadowContainer.shadowRoot;
-            } catch (e) {
-              logger.warn("Shadowed COMPONENT {{NAME}} is not allowed on this browser".replace("{{NAME}}", _component_.name));
-            }
-          }
-          if (typeof _component_.shadowRoot !== "undefined" && _component_.shadowRoot !== null) {
-            if (_component_.reload) {
-              logger.debug("FORCED RELOADING OF CONTAINER FOR Shadowed COMPONENT {{NAME}}".replace("{{NAME}}", _component_.name));
-              shadowContainer.shadowRoot.innerHTML = _component_.innerHTML;
-            } else {
-              tmp_shadowContainer.innerHTML = _component_.parseTemplate(tmp_shadowContainer.innerHTML);
-              logger.debug("ADDING Shadowed COMPONENT {{NAME}} ".replace("{{NAME}}", _component_.name));
-              shadowContainer.shadowRoot.innerHTML += _component_.innerHTML;
-            }
-            logger.debug("ADDING Slots to Shadowed COMPONENT {{NAME}} ".replace("{{NAME}}", _component_.name));
-            shadowContainer.innerHTML += tmp_shadowContainer.innerHTML;
-            logger.debug("APPENDING Shadowed COMPONENT {{NAME}} to Container ".replace("{{NAME}}", _component_.name));
-            if (container.subelements(".shadowHost") < 1) {
-              container.appendChild(shadowContainer);
-            } else {
-              logger.debug("Shadowed Container for COMPONENT {{NAME}} is already present in the tree ".replace("{{NAME}}", _component_.name));
-              container.removeChild(container.subelements(".shadowHost").pop());
-              container.appendChild(shadowContainer);
-            }
-          } else {
-            logger.warn("Shadowed COMPONENT {{NAME}} is bad configured".replace("{{NAME}}", _component_.name));
-          }
-        } else {
-          if (_component_.reload) {
-            logger.debug("FORCED RELOADING OF CONTAINER FOR COMPONENT {{NAME}}".replace("{{NAME}}", _component_.name));
-            container.innerHTML = _component_.innerHTML;
-          } else if (container && _component_) {
-            logger.debug("ADDING COMPONENT {{NAME}} ".replace("{{NAME}}", _component_.name));
-            container.innerHTML += _component_.innerHTML;
-          } else {
-            logger.warn("COMPONENT {{NAME}} is not added to the DOM".replace("{{NAME}}", _component_.name));
-          }
+  
+        self.routingWay = _top.CONFIG.get("routingWay");
+  
+        self.processorHandler = New(ClassFactory("Processor"), {
+          component: self
+        });
+  
+        if (typeof self.__new__ === "function") {
+          self.__new__.call(self, self);
         }
 
-      };
+        self._generateRoutingPaths(self.body)
+        .then(function (){
+          self._reroute_()
+          .then(function () {
+            return self.rebuild()
+              .then(function () {
+                logger.info(`Component._new_ The component ${self.name} was built successfully!`);
+              }).catch(function (standardResponse) {
+                logger.warn(`Component._new_ Something went wrong building the component ${self.name}`);
+                console.error(standardResponse);
+              });
+          });
+        });
 
-      var _feedComponent_InNode = function (_component_) {
-        var parsedAssignmentText = _component_.parsedAssignmentText;
-        _component_.innerHTML = parsedAssignmentText;
-      };
+      }
+  
+      set body(value) {
+        var self = this;
+        self._body = value;
+      }
+  
+      get body() {
+        var self= this;
+        return self._body;
+      }
+  
+      set cacheIndex(value) {
+        // readonly
+        logger.debug("[cacheIndex] This property is readonly");
+      }
+  
+      get cacheIndex() {
+        var self= this;
+        var __routing_path__ = _DataStringify(self.routingPath);
+        return Base64.encode(self.name + __routing_path__);
+      }
+  
+      set parsedAssignmentText(value) {
+        // readonly
+        logger.debug("[parsedAssignmentText] This property is readonly");
+      }
+  
+      get parsedAssignmentText() {
+        var self= this;
+        self._parsedAssignmentText = self.parseTemplate(self.template);
+        if (typeof self._parsedAssignmentText === "undefined"){
+          throw Error (`[Component][${this.name}][parsedAssignmentText] Could not generate content!`);
+        }
+        return self._parsedAssignmentText;
+      }
+  
+  
+      set shadowRoot(value) {
+        var self= this;
+        if (typeof self.__shadowRoot == "undefined") {
+          self.__shadowRoot = value;
+        } else {
+          logger.debug("[shadowRoot] This property can only be assigned once!");
+        }
+      }
 
-      var _ret_;
-      if (!is_a(_component_, "Component")) {
-        logger.warn("Trying to feed a non component object");
-        return;
+      get shadowRoot() {
+        var self= this;
+        return self.__shadowRoot;
       }
-      if (isBrowser) {
-        _ret_ = _feedComponent_InBrowser(_component_);
-      } else {
-        _ret_ = _feedComponent_InNode(_component_);
+  
+  
+      set routingSelected(value){
+        logger.debug("[routingSelected] This is a read-only property of the component");
       }
-      return _ret_;
-    },
-    rebuild() {
-      var _component = this;
-      var _promise = new Promise(function (resolve, reject) {
-        if (typeof _component === "undefined" || _component === null) {
-          reject("Component is undefined");
+  
+      get routingSelected (){
+        var self= this;
+        return __valid_routings__(self.routings, self.routingPath);
+      }
+  
+      set routingParams (value){
+        logger.debug("[routingParams] This is a read-only property of the component");
+      }
+  
+      get routingParams (){
+        var component = this;
+        return [{}].concat(component.routingSelected.map(function (routing) {
+          return __routing_params__(routing, component.routingPath);
+        })).reduce(function (accumulator, colData, index) {
+          return Object.assign(accumulator, colData);
+        });
+      }
+  
+      done(standardResponse) {
+        var _ret_;
+        if (typeof standardResponse !== "undefined"){
+          var {request, component} = standardResponse;
+          _ret_ = Promise.resolve({request, component});
         }
-        if (isQCObjects_Object(_component) && is_a(_component, "Component")) {
-          switch (true) {
-            case (_component.get("tplsource") === "none"):
-              logger.debug("Component " + _component.name + " has specified template-source=none, so no template load was done");
-              var standardResponse = {
-                request: null,
-                component: _component
-              };
-              if (typeof _component.done === "function") {
-                _component.done.call(_component, standardResponse);
+        return _ret_;
+      }
+      
+      fail(standardResponse) {
+        var _ret_;
+        if (typeof standardResponse !== "undefined"){
+          var {error, component} = standardResponse;
+          _ret_ = Promise.resolve({error, component});
+        }
+        return _ret_;
+      }
+  
+      set(name, value) {
+        this[name] = value;
+      }
+  
+      get(name) {
+        return this[name];
+      }
+  
+      feedComponent() {
+        var _component_ = this;
+        logger.debug(`[Component][${this.name}][feedComponent] start feeding component...`);
+        var _feedComponent_InBrowser = function (_component_) {
+          if (typeof _component_.container === "undefined" && typeof _component_.body === "undefined") {
+            logger.warn("COMPONENT {{NAME}} has an undefined container and body".replace("{{NAME}}", _component_.name));
+            return;
+          }
+          var container = (typeof _component_.container === "undefined" || _component_.container === null) ? (_component_.body) : (_component_.container);
+          var parsedAssignmentText = _component_.parsedAssignmentText;
+          _component_.innerHTML = parsedAssignmentText;
+          if (_component_.shadowed) {
+            logger.debug("COMPONENT {{NAME}} is shadowed".replace("{{NAME}}", _component_.name));
+            logger.debug("Preparing slots for Shadowed COMPONENT {{NAME}}".replace("{{NAME}}", _component_.name));
+            var tmp_shadowContainer = _DOMCreateElement("div");
+            container.subelements("[slot]").map(
+              function (c) {
+                if (c.parentElement === container) {
+                  tmp_shadowContainer.appendChild(c);
+                }
+              });
+            logger.debug("Creating shadowedContainer for COMPONENT {{NAME}}".replace("{{NAME}}", _component_.name));
+            var shadowContainer = _DOMCreateElement("div");
+            shadowContainer.classList.add("shadowHost");
+            try {
+              _component_.shadowRoot = shadowContainer.attachShadow({
+                mode: "open"
+              });
+            } catch (e) {
+              try {
+                logger.debug("Shadowed COMPONENT {{NAME}} is repeated".replace("{{NAME}}", _component_.name));
+                _component_.shadowRoot = shadowContainer.shadowRoot;
+              } catch (e) {
+                logger.warn("Shadowed COMPONENT {{NAME}} is not allowed on this browser".replace("{{NAME}}", _component_.name));
               }
-              resolve.call(_promise, standardResponse);
-              break;
-            case (_component.get("tplsource") === "inline"):
-              logger.debug("Component " + _component.name + " has specified template-source=inline, so it is assumed that template is already declared");
-              _component.feedComponent();
-              var standardResponse = {
-                request: null,
-                component: _component
-              };
-              if (typeof _component.done === "function") {
-                _component.done.call(_component, standardResponse);
+            }
+            if (typeof _component_.shadowRoot !== "undefined" && _component_.shadowRoot !== null) {
+              if (_component_.reload) {
+                logger.debug("FORCED RELOADING OF CONTAINER FOR Shadowed COMPONENT {{NAME}}".replace("{{NAME}}", _component_.name));
+                shadowContainer.shadowRoot.innerHTML = _component_.innerHTML;
+              } else {
+                tmp_shadowContainer.innerHTML = _component_.parseTemplate(tmp_shadowContainer.innerHTML);
+                logger.debug("ADDING Shadowed COMPONENT {{NAME}} ".replace("{{NAME}}", _component_.name));
+                shadowContainer.shadowRoot.innerHTML += _component_.innerHTML;
               }
-              resolve.call(_promise, standardResponse);
-              break;
-            case (_component.get("tplsource") === "default" &&
-              _component.get("templateURI") !== ""):
-              _component.set("url", _component.get("basePath") + _component.get("templateURI"));
-              componentLoader(_component, false).then(
-                function (standardResponse) {
-                  resolve.call(_promise, standardResponse);
-                },
-                function (standardResponse) {
-                  reject.call(_promise, standardResponse);
-                });
-              break;
-            case (_component.get("tplsource") === "external" &&
-              _component.get("templateURI") !== ""):
-              _component.set("url", _component.get("templateURI"));
-              componentLoader(_component, false).then(
-                function (standardResponse) {
-                  resolve.call(_promise, standardResponse);
-                },
-                function (standardResponse) {
-                  reject.call(_promise, standardResponse);
-                });
-              break;
-            case _component.get("tplsource") === "default" && _component.get("templateURI", "") === "":
-              logger.debug(`Component ${_component.name} template-source is ${_component.get("tplsource")} and no templateURI is present`);
-              reject.call(_promise, `Component ${_component.name} template-source is ${_component.get("tplsource")} and no templateURI is present`);
-              break;
-            default:
-              logger.debug("Component " + _component.name + " will not be rebuilt because no templateURI is present");
-              reject.call(_promise, {
-                request: null,
-                component: _component
-              });
-              break;
+              logger.debug("ADDING Slots to Shadowed COMPONENT {{NAME}} ".replace("{{NAME}}", _component_.name));
+              shadowContainer.innerHTML += tmp_shadowContainer.innerHTML;
+              logger.debug("APPENDING Shadowed COMPONENT {{NAME}} to Container ".replace("{{NAME}}", _component_.name));
+              if (container.subelements(".shadowHost") < 1) {
+                container.appendChild(shadowContainer);
+              } else {
+                logger.debug("Shadowed Container for COMPONENT {{NAME}} is already present in the tree ".replace("{{NAME}}", _component_.name));
+                container.removeChild(container.subelements(".shadowHost").pop());
+                container.appendChild(shadowContainer);
+              }
+            } else {
+              logger.warn("Shadowed COMPONENT {{NAME}} is bad configured".replace("{{NAME}}", _component_.name));
+            }
+          } else {
+            if (_component_.reload) {
+              logger.debug("FORCED RELOADING OF CONTAINER FOR COMPONENT {{NAME}}".replace("{{NAME}}", _component_.name));
+              container.innerHTML = _component_.innerHTML;
+            } else if (container && _component_) {
+              logger.debug("ADDING COMPONENT {{NAME}} ".replace("{{NAME}}", _component_.name));
+              container.innerHTML += _component_.innerHTML;
+            } else {
+              logger.warn("COMPONENT {{NAME}} is not added to the DOM".replace("{{NAME}}", _component_.name));
+            }
           }
-
-        }
-      });
-      return _promise;
-    },
-    Cast(oClass) {
-      /* Cast method for components has been deprecated. Don't use this method, it is available only for compatibility purposes */
-      let o = _methods_(oClass).map(m => m.name.replace(/bound /g, "")).map(m => {
-        return {
-          [m]: oClass[m].bind(this)
+  
         };
-      }).reduce((c, p) => Object.assign(c, p), {});
-      return _Cast(this, o);
-    },
-    routingWay: null,
-    validRoutingWays: ["pathname", "hash", "search"],
-    routingNodes: [],
-    routings: [],
-    routingPath: "",
-    route() {
-      var componentClass = this;
-      var isValidInstance = ((!!componentClass.__instanceID) &&
-        Object.hasOwnProperty.call(componentClass, "subcomponents")) ? (true) : (false);
-      var __route__ = function (componentList) {
-        var _componentNames_ = [];
-        var _promises_ = componentList.filter(function (rc) {
-          return typeof rc !== "undefined";
-        }).map(function (rc) {
-          if (typeof rc.name !== "undefined") {
-            _componentNames_.push(rc.name);
-          } else {
-            throw new Error(__getType__(rc) + " does not have a name");
+  
+        var _feedComponent_InNode = function (_component_) {
+          var parsedAssignmentText = _component_.parsedAssignmentText;
+          _component_.innerHTML = parsedAssignmentText;
+        };
+  
+        var _ret_;
+        if (!is_a(_component_, "Component")) {
+          logger.warn("Trying to feed a non component object");
+          return;
+        }
+        if (isBrowser) {
+          _ret_ = _feedComponent_InBrowser(_component_);
+        } else {
+          _ret_ = _feedComponent_InNode(_component_);
+        }
+        return _ret_;
+      }
+  
+      rebuild() {
+        var _component = this;
+        var _promise = new Promise(function (resolve, reject) {
+          if (typeof _component === "undefined" || _component === null) {
+            reject("Component is undefined");
           }
-          return new Promise(function (resolve, reject) {
-            var _promise_;
-            if (typeof rc !== "undefined" &&
-              Object.hasOwnProperty.call(rc, "_reroute_")) {
-              _promise_ = rc._reroute_()
-                .then(function () {
-                  rc.body.innerHTML = "";
-                  rc.innerHTML = "";
-                  return rc.rebuild();
-                })
-                .then(function (_rc_) {
-                  if (Object.hasOwnProperty.call(_rc_, "subcomponents") &&
-                    typeof _rc_.subcomponents !== "undefined" &&
-                    _rc_.subcomponents.length > 0
-                  ) {
-                    logger.debug("LOOKING FOR ROUTINGS IN SUBCOMPONENTS FOR: " + _rc_.name);
-                    return __route__.call(_rc_, _rc_.subcomponents);
-                  } else {
-                    resolve(_rc_);
-                  }
+          if (isQCObjects_Object(_component) && is_a(_component, "Component")) {
+            switch (true) {
+              case (_component.get("tplsource") === "none"):
+                logger.debug("Component " + _component.name + " has specified template-source=none, so no template load was done");
+                var standardResponse = {
+                  request: null,
+                  component: _component
+                };
+                if (typeof _component.done === "function") {
+                  _component.done.call(_component, standardResponse);
+                }
+                resolve.call(_promise, standardResponse);
+                break;
+              case (_component.get("tplsource") === "inline"):
+                logger.debug("Component " + _component.name + " has specified template-source=inline, so it is assumed that template is already declared");
+                _component.feedComponent();
+                var standardResponse = {
+                  request: null,
+                  component: _component
+                };
+                if (typeof _component.done === "function") {
+                  _component.done.call(_component, standardResponse);
+                }
+                resolve.call(_promise, standardResponse);
+                break;
+              case (_component.get("tplsource") === "default" &&
+                _component.get("templateURI") !== ""):
+                _component.set("url", _component.get("basePath") + _component.get("templateURI"));
+                componentLoader(_component, false).then(
+                  function (standardResponse) {
+                    resolve.call(_promise, standardResponse);
+                  },
+                  function (standardResponse) {
+                    reject.call(_promise, standardResponse);
+                  });
+                break;
+              case (_component.get("tplsource") === "external" &&
+                _component.get("templateURI") !== ""):
+                _component.set("url", _component.get("templateURI"));
+                componentLoader(_component, false).then(
+                  function (standardResponse) {
+                    resolve.call(_promise, standardResponse);
+                  },
+                  function (standardResponse) {
+                    reject.call(_promise, standardResponse);
+                  });
+                break;
+              case _component.get("tplsource") === "default" && _component.get("templateURI", "") === "":
+                logger.debug(`Component ${_component.name} template-source is ${_component.get("tplsource")} and no templateURI is present`);
+                reject.call(_promise, `Component ${_component.name} template-source is ${_component.get("tplsource")} and no templateURI is present`);
+                break;
+              default:
+                logger.debug("Component " + _component.name + " will not be rebuilt because no templateURI is present");
+                reject.call(_promise, {
+                  request: null,
+                  component: _component
                 });
-            } else if (typeof rc !== "undefined") {
-              reject("Component " + rc.name + " is not an instance of Component");
+                break;
             }
-            return _promise_;
-          });
+  
+          }
         });
-        return Promise.all(_promises_)
-          .then(function () {
-            logger.debug("ROUTING COMPLETED FOR " + _componentNames_.join(", "));
-          }).catch(function (err) {
-            logger.error("ROUTING FAILED FOR " + _componentNames_.join(", ") + ": " + err);
-          });
-      };
-      if (isValidInstance || Object.hasOwnProperty.call(global, "componentsStack")) {
-        if (isValidInstance && is_a(componentClass, "Component")) {
-          logger.debug("loading routings for instance " + componentClass.name);
-        }
-        __route__.call(componentClass, (isValidInstance) ? (componentClass.subcomponents) : (global.componentsStack));
-      } else {
-        logger.debug("An undetermined result expected if load routings. So will not be loaded this time.");
-      }
-    },
-    fullscreen() {
-      if (isBrowser) {
-        var elem = this.body;
-        if (elem.requestFullscreen) {
-          elem.requestFullscreen();
-        } else if (elem.mozRequestFullScreen) {
-          /* Firefox */
-          elem.mozRequestFullScreen();
-        } else if (elem.webkitRequestFullscreen) {
-          /* Chrome, Safari & Opera */
-          elem.webkitRequestFullscreen();
-        } else if (elem.msRequestFullscreen) {
-          /* IE/Edge */
-          elem.msRequestFullscreen();
-        }
-      } else {
-        // not yet implemented.
+        return _promise;
       }
-    },
-    closefullscreen() {
-      if (isBrowser) {
-        if (document.exitFullscreen) {
-          document.exitFullscreen();
-        } else if (document.mozCancelFullScreen) {
-          document.mozCancelFullScreen();
-        } else if (document.webkitExitFullscreen) {
-          document.webkitExitFullscreen();
-        } else if (document.msExitFullscreen) {
-          document.msExitFullscreen();
-        }
-      } else {
-        // noy yet implemented.
+  
+      Cast(oClass) {
+        /* Cast method for components has been deprecated. Don't use this method, it is available only for compatibility purposes */
+        let o = _methods_(oClass).map(m => m.name.replace(/bound /g, "")).map(m => {
+          return {
+            [m]: oClass[m].bind(this)
+          };
+        }).reduce((c, p) => Object.assign(c, p), {});
+        return _Cast(this, o);
       }
-    },
-    _generateRoutingPaths(componentBody) {
-      var component = this;
-      if (isBrowser) {
-        if (__valid_routing_way__(component.validRoutingWays, component.routingWay)) {
-          if (typeof componentBody !== "undefined") {
-            component.innerHTML = componentBody.innerHTML;
-            component.routingNodes = componentBody.subelements("routing");
-            component.routings = [];
-            component.routingNodes.map(function (routingNode, r) {
-              var attributeNames = routingNode.getAttributeNames();
-              var routing = {};
-              attributeNames.map(function (attributeName, a) {
-                routing[attributeNames[a]] = routingNode.getAttribute(attributeNames[a]);
-              });
-              component.routings.push(routing);
-              if (!_top.global.get("routingPaths")) {
-                _top.global.set("routingPaths", []);
-              }
-              if (!_top.global.get("routingPaths").includes(routing.path)) {
-                _top.global.get("routingPaths").push(routing.path);
+  
+      static route() {
+        var componentClass = this;
+        var _route_promise_;
+        var isValidInstance = ((!!componentClass.__instanceID) &&
+          Object.hasOwnProperty.call(componentClass, "subcomponents")) ? (true) : (false);
+        var __route__ = function (componentList) {
+          var _componentNames_ = [];
+          var _promises_ = componentList.filter(function (rc) {
+            return typeof rc !== "undefined";
+          }).map(function (rc) {
+            if (typeof rc.name !== "undefined") {
+              _componentNames_.push(rc.name);
+            } else {
+              throw new Error(__getType__(rc) + " does not have a name");
+            }
+            return new Promise(function (resolve, reject) {
+              var _promise_;
+              if (typeof rc !== "undefined" && !!rc._reroute_) {
+                _promise_ = rc._reroute_()
+                  .then(function () {
+                    rc.body.innerHTML = "";
+                    rc.innerHTML = "";
+                    return rc.rebuild();
+                  })
+                  .then(function (_rc_) {
+                    if (Object.hasOwnProperty.call(_rc_, "subcomponents") &&
+                      typeof _rc_.subcomponents !== "undefined" &&
+                      _rc_.subcomponents.length > 0
+                    ) {
+                      logger.debug("LOOKING FOR ROUTINGS IN SUBCOMPONENTS FOR: " + _rc_.name);
+                      return __route__.call(_rc_, _rc_.subcomponents);
+                    } else {
+                      resolve(_rc_);
+                    }
+                  });
+              } else if (typeof rc !== "undefined") {
+                reject("Component " + rc.name + " is not an instance of Component");
               }
+              return _promise_;
             });
+          });
+          return Promise.all(_promises_)
+            .then(function () {
+              logger.debug("ROUTING COMPLETED FOR " + _componentNames_.join(", "));
+            }).catch(function (err) {
+              logger.warn("ROUTING FAILED FOR " + _componentNames_.join(", ") + ": " + err);
+            });
+        };
+        if (isValidInstance || Object.hasOwnProperty.call(global, "componentsStack")) {
+          if (isValidInstance && is_a(componentClass, "Component")) {
+            logger.debug("loading routings for instance " + componentClass.name);
           }
+          _route_promise_ = __route__.call(componentClass, (isValidInstance) ? (componentClass.subcomponents) : (global.componentsStack));
+        } else {
+          logger.debug("An undetermined result expected if load routings. So will not be loaded this time.");
         }
-      } else {
-        // not yet implemented.
       }
-    },
-    parseTemplate(template) {
-      var _self = this;
-      var _parsedAssignmentText;
-      if (Object.hasOwnProperty.call(_self, "templateHandler")) {
-        var value = template;
-        var templateHandlerName = _self.templateHandler;
-        var templateHandlerClass = ClassFactory(_self.templateHandler);
-        var templateInstance = New(templateHandlerClass, {
-          component: _self,
-          template: value
-        });
-        var selfData = _self.data;
-        if (Object.hasOwnProperty.call(_self, "assignRoutingParams") && _self.assignRoutingParams) {
-          try {
-            selfData = Object.assign(selfData, _self.routingParams);
-          } catch (e) {
-            logger.debug("[parseTemplate] it was not possible to assign the routing params to the template");
+  
+      fullscreen() {
+        if (isBrowser) {
+          var elem = this.body;
+          if (elem.requestFullscreen) {
+            elem.requestFullscreen();
+          } else if (elem.mozRequestFullScreen) {
+            /* Firefox */
+            elem.mozRequestFullScreen();
+          } else if (elem.webkitRequestFullscreen) {
+            /* Chrome, Safari & Opera */
+            elem.webkitRequestFullscreen();
+          } else if (elem.msRequestFullscreen) {
+            /* IE/Edge */
+            elem.msRequestFullscreen();
           }
+        } else {
+          // not yet implemented.
         }
-        _parsedAssignmentText = templateInstance.assign(selfData);
-      } else {
-        _parsedAssignmentText = value;
       }
-      return _parsedAssignmentText;
-    },
-    _new_(properties) {
-      var self = this;
-
-      if (typeof self.name === "undefined") {
-        logger.warn("A name is not defined for " + __getType__(self));
-      }
-
-      self.routingWay = _top.CONFIG.get("routingWay");
-
-      self.processorHandler = New(ClassFactory("Processor"), {
-        component: self
-      });
-
-      Object.defineProperty(self, "body", {
-        configurable: true,
-        set(value) {
-          self._body = value;
-          self._generateRoutingPaths(value);
-        },
-        get() {
-          return self._body;
-        }
-      });
-
-      Object.defineProperty(self, "cacheIndex", {
-        configurable: true,
-        set(value) {
-          // readonly
-          logger.debug("[cacheIndex] This property is readonly");
-        },
-        get() {
-          var __routing_path__ = _DataStringify(self.routingPath);
-          return Base64.encode(self.name + __routing_path__);
-        }
-      });
-
-      Object.defineProperty(self, "parsedAssignmentText", {
-        configurable: true,
-        set(value) {
-          // readonly
-          logger.debug("[parsedAssignmentText] This property is readonly");
-        },
-        get() {
-          self._parsedAssignmentText = self.parseTemplate(self.template);
-          return self._parsedAssignmentText;
+  
+      closefullscreen() {
+        if (isBrowser) {
+          if (document.exitFullscreen) {
+            document.exitFullscreen();
+          } else if (document.mozCancelFullScreen) {
+            document.mozCancelFullScreen();
+          } else if (document.webkitExitFullscreen) {
+            document.webkitExitFullscreen();
+          } else if (document.msExitFullscreen) {
+            document.msExitFullscreen();
+          }
+        } else {
+          // noy yet implemented.
         }
-      });
-
-      Object.defineProperty(self, "shadowRoot", {
-        configurable: true,
-        set(value) {
-          if (typeof self.__shadowRoot == "undefined") {
-            self.__shadowRoot = value;
+      }
+  
+      _generateRoutingPaths(componentBody) {
+        var component = this;
+        return new Promise(function (resolve, reject){
+          if (isBrowser) {
+            if (__valid_routing_way__(component.validRoutingWays, component.routingWay)) {
+              if (typeof componentBody !== "undefined") {
+                component.innerHTML = componentBody.innerHTML;
+                component.routingNodes = componentBody.subelements("routing");
+                component.routings = [];
+                component.routingNodes.map(function (routingNode, r) {
+                  var attributeNames = routingNode.getAttributeNames();
+                  var routing = {};
+                  attributeNames.map(function (attributeName, a) {
+                    routing[attributeNames[a]] = routingNode.getAttribute(attributeNames[a]);
+                  });
+                  component.routings.push(routing);
+                  if (!_top.global.get("routingPaths")) {
+                    _top.global.set("routingPaths", []);
+                  }
+                  if (!_top.global.get("routingPaths").includes(routing.path)) {
+                    _top.global.get("routingPaths").push(routing.path);
+                  }
+                });
+              }
+            }
           } else {
-            logger.debug("[shadowRoot] This property can only be assigned once!");
+            // not yet implemented.
           }
-        },
-        get() {
-          return self.__shadowRoot;
-        }
-      });
-
-      Object.defineProperty(self, "routingSelected", {
-        configurable: true,
-        set(value) {
-          logger.debug("[routingSelected] This is a read-only property of the component");
-        },
-        get() {
-          return __valid_routings__(this.routings, this.routingPath);
-        }
-      });
-
-      Object.defineProperty(self, "routingParams", {
-        configurable: true,
-        set(value) {
-          logger.debug("[routingParams] This is a read-only property of the component");
-        },
-        get() {
-          var component = this;
-          return [{}].concat(component.routingSelected.map(function (routing) {
-            return __routing_params__(routing, component.routingPath);
-          })).reduce(function (accumulator, colData, index) {
-            return Object.assign(accumulator, colData);
+          resolve();
+  
+        });
+      }
+  
+      parseTemplate(template) {
+        var _self = this;
+        var _parsedAssignmentText;
+        var value = template;
+        if (Object.hasOwnProperty.call(_self, "templateHandler")) {
+          var templateHandlerName = _self.templateHandler;
+          logger.debug(`[Component][${this.name}][parseTemplate] Attempting to use ${templateHandlerName} ...`);
+          var templateHandlerClass = ClassFactory(templateHandlerName);
+          var templateInstance = New(templateHandlerClass, {
+            component: _self,
+            template: value
           });
+          var selfData = _self.data;
+          if (Object.hasOwnProperty.call(_self, "assignRoutingParams") && _self.assignRoutingParams) {
+            try {
+              selfData = Object.assign(selfData, _self.routingParams);
+            } catch (e) {
+              logger.debug("[parseTemplate] it was not possible to assign the routing params to the template");
+            }
+          }
+          _parsedAssignmentText = templateInstance.assign(selfData);
+        } else {
+          logger.debug(`[Component][${this.name}][parseTemplate] No value for templateHandler. Using raw content...`);
+          _parsedAssignmentText = value;
         }
-      });
-
-      if (typeof self.__new__ === "function") {
-        self.__new__.call(self, properties);
+        return _parsedAssignmentText;
       }
-
-      self._reroute_()
-        .then(function () {
-          return self.rebuild()
-            .then(function () {
-              logger.info(`Component._new_ The component ${self.name} was built successfully!`);
-            }).catch(function (standardResponse) {
-              logger.warn(`Component._new_ Something went wrong building the component ${self.name}`);
-              console.error(standardResponse);
-            });
+  
+      _reroute_() {
+        /* This method set the selected routing and makes the switch to the templateURI */
+        var rc = this;
+        return new Promise(function (resolve, reject) {
+          if (isBrowser) {
+            if (__valid_routing_way__(rc.validRoutingWays, rc.routingWay)) {
+              rc.routingPath = document.location[rc.routingWay];
+              rc.routingSelected.map(function (routing, r) {
+                var componentURI = ComponentURI({
+                  "COMPONENTS_BASE_PATH": _top.CONFIG.get("componentsBasePath"),
+                  "COMPONENT_NAME": routing.name.toString(),
+                  "TPLEXTENSION": (Object.hasOwnProperty.call(routing, "tplextension")) ? (routing.tplextension) : (rc.tplextension),
+                  "TPL_SOURCE": "default" /* here is always default in order to get the right uri */
+                });
+                rc.templateURI = componentURI;
+              });
+              if (rc.routingSelected.length > 0) {
+                rc.template = "";
+                rc.body.innerHTML = "";
+              }
+            }
+          }
+          resolve(rc);
+  
         });
-
-    },
-    _reroute_() {
-      /* This method set the selected routing and makes the switch to the templateURI */
-      var rc = this;
-      return new Promise(function (resolve, reject) {
+      }
+  
+      lazyLoadImages() {
         if (isBrowser) {
-          if (__valid_routing_way__(rc.validRoutingWays, rc.routingWay)) {
-            rc.routingPath = document.location[rc.routingWay];
-            rc.routingSelected.map(function (routing, r) {
-              var componentURI = ComponentURI({
-                "COMPONENTS_BASE_PATH": _top.CONFIG.get("componentsBasePath"),
-                "COMPONENT_NAME": routing.name.toString(),
-                "TPLEXTENSION": (Object.hasOwnProperty.call(routing, "tplextension")) ? (routing.tplextension) : (rc.tplextension),
-                "TPL_SOURCE": "default" /* here is always default in order to get the right uri */
+          var component = this;
+          var _componentRoot = (component.shadowed) ? (component.shadowRoot) : (component.body);
+          var _imgLazyLoaded = [..._componentRoot.subelements("img[lazy-src]")];
+          var _lazyLoadImages = function (image) {
+            image.setAttribute("src", image.getAttribute("lazy-src"));
+            image.onload = () => {
+              image.removeAttribute("lazy-src");
+            };
+          };
+          if ("IntersectionObserver" in window) {
+            var observer = new IntersectionObserver((items, observer) => {
+              items.forEach((item) => {
+                if (item.isIntersecting) {
+                  _lazyLoadImages(item.target);
+                  observer.unobserve(item.target);
+                }
               });
-              rc.templateURI = componentURI;
             });
-            if (rc.routingSelected.length > 0) {
-              rc.template = "";
-              rc.body.innerHTML = "";
-            }
+            _imgLazyLoaded.map(function (img) {
+              return observer.observe(img);
+            });
+          } else {
+            _imgLazyLoaded.map(_lazyLoadImages);
           }
+  
+        } else {
+          // not yet implemented
         }
-        resolve(rc);
-
-      });
-    },
-    lazyLoadImages() {
-      if (isBrowser) {
-        var component = this;
-        var _componentRoot = (component.shadowed) ? (component.shadowRoot) : (component.body);
-        var _imgLazyLoaded = [..._componentRoot.subelements("img[lazy-src]")];
-        var _lazyLoadImages = function (image) {
-          image.setAttribute("src", image.getAttribute("lazy-src"));
-          image.onload = () => {
-            image.removeAttribute("lazy-src");
-          };
-        };
-        if ("IntersectionObserver" in window) {
-          var observer = new IntersectionObserver((items, observer) => {
-            items.forEach((item) => {
-              if (item.isIntersecting) {
-                _lazyLoadImages(item.target);
-                observer.unobserve(item.target);
-              }
-            });
-          });
-          _imgLazyLoaded.map(function (img) {
-            return observer.observe(img);
+        return null;
+      }
+  
+      applyTransitionEffect(effectClassName) {
+        var _Effect = ClassFactory(effectClassName);
+        if (typeof _Effect !== "undefined" && is_a(_Effect, "TransitionEffect")) {
+          this.effect = New(_Effect, {
+            component: this
           });
+          this.effect.apply(this.effect.defaultParams);
         } else {
-          _imgLazyLoaded.map(_lazyLoadImages);
+          logger.debug(`${__getType__(_Effect)} is not a TransitionEffect`);
         }
-
-      } else {
-        // not yet implemented
       }
-      return null;
-    },
-    applyTransitionEffect(effectClassName) {
-      var _Effect = ClassFactory(effectClassName);
-      if (typeof _Effect !== "undefined" && is_a(_Effect, "TransitionEffect")) {
-        this.effect = New(_Effect, {
-          component: this
-        });
-        this.effect.apply(this.effect.defaultParams);
-      } else {
-        logger.debug(`${__getType__(_Effect)} is not a TransitionEffect`);
-      }
-    },
-    applyObserveTransitionEffect(effectClassName) {
-      if (isBrowser) {
-        var component = this;
-        var _componentRoot = (component.shadowed) ? (component.shadowRoot) : (component.body);
-        var _applyEffect_ = function (element) {
-          component.applyTransitionEffect(effectClassName);
-        };
-        if ("IntersectionObserver" in window) {
-          var observer = new IntersectionObserver((items, observer) => {
-            items.forEach((item) => {
-              if (item.isIntersecting) {
-                _applyEffect_(item.target);
-                observer.unobserve(item.target);
-              }
+  
+      applyObserveTransitionEffect(effectClassName) {
+        if (isBrowser) {
+          var component = this;
+          var _componentRoot = (component.shadowed) ? (component.shadowRoot) : (component.body);
+          var _applyEffect_ = function (element) {
+            component.applyTransitionEffect(effectClassName);
+          };
+          if ("IntersectionObserver" in window) {
+            var observer = new IntersectionObserver((items, observer) => {
+              items.forEach((item) => {
+                if (item.isIntersecting) {
+                  _applyEffect_(item.target);
+                  observer.unobserve(item.target);
+                }
+              });
             });
-          });
-          observer.observe(_componentRoot);
+            observer.observe(_componentRoot);
+          } else {
+            _applyEffect_(_componentRoot);
+          }
         } else {
-          _applyEffect_(_componentRoot);
+          // not yet implemented
         }
-      } else {
-        // not yet implemented
+        return null;
       }
-      return null;
-    },
-    scrollIntoHash() {
-      if (isBrowser) {
-        var component = this;
-        if (document.location.hash !== "") {
-          var _componentRoot = (component.shadowed) ? (component.shadowRoot) : (component.body);
-          _componentRoot.subelements(document.location.hash).map(
-            function (element) {
-              if (typeof element.scrollIntoView === "function") {
-                element.scrollIntoView(
-                  _top.CONFIG.get("scrollIntoHash", {
-                    behavior: "auto",
-                    block: "top",
-                    inline: "top"
-                  })
-                );
+  
+      scrollIntoHash() {
+        if (isBrowser) {
+          var component = this;
+          if (document.location.hash !== "") {
+            var _componentRoot = (component.shadowed) ? (component.shadowRoot) : (component.body);
+            _componentRoot.subelements(document.location.hash).map(
+              function (element) {
+                if (typeof element.scrollIntoView === "function") {
+                  element.scrollIntoView(
+                    _top.CONFIG.get("scrollIntoHash", {
+                      behavior: "auto",
+                      block: "top",
+                      inline: "top"
+                    })
+                  );
+                }
               }
-            }
-          );
+            );
+          }
+        } else {
+          // not yet implemented
         }
-      } else {
-        // not yet implemented
       }
-    },
-    i18n_translate() {
-      if (isBrowser) {
-        if (_top.CONFIG.get("use_i18n")) {
-          var component = this;
-          var _componentRoot = (component.shadowed) ? (component.shadowRoot) : (component.body);
-          var lang1 = _top.CONFIG.get("lang", "en");
-          var lang2 = navigator.language.slice(0, 2);
-          var i18n = _top.global.get("i18n");
-          if ((lang1 !== lang2) && (typeof i18n === "object" && Object.hasOwnProperty.call(i18n, "messages"))) {
-            var callback_i18n = function () {
-              var component = this;
-              return new Promise(function (resolve, reject) {
-                var messages = i18n.messages.filter(function (message) {
-                  return Object.hasOwnProperty.call(message, lang1) && Object.hasOwnProperty.call(message, lang2);
-                });
-                _componentRoot.subelements("ul,li,h1,h2,h3,a,b,p,input,textarea,summary,details,option,component")
-                  .map(function (element) {
-                    messages.map(function (message) {
-                      var _innerHTML = element.innerHTML;
-                      _innerHTML = _innerHTML.replace(new RegExp(`${message[lang1]}`, "g"), message[lang2]);
-                      element.innerHTML = _innerHTML;
-                      return null;
-                    });
-                    return element;
+  
+      i18n_translate() {
+        if (isBrowser) {
+          if (_top.CONFIG.get("use_i18n")) {
+            var component = this;
+            var _componentRoot = (component.shadowed) ? (component.shadowRoot) : (component.body);
+            var lang1 = _top.CONFIG.get("lang", "en");
+            var lang2 = navigator.language.slice(0, 2);
+            var i18n = _top.global.get("i18n");
+            if ((lang1 !== lang2) && (typeof i18n === "object" && Object.hasOwnProperty.call(i18n, "messages"))) {
+              var callback_i18n = function () {
+                var component = this;
+                return new Promise(function (resolve, reject) {
+                  var messages = i18n.messages.filter(function (message) {
+                    return Object.hasOwnProperty.call(message, lang1) && Object.hasOwnProperty.call(message, lang2);
                   });
-                resolve();
+                  _componentRoot.subelements("ul,li,h1,h2,h3,a,b,p,input,textarea,summary,details,option,component")
+                    .map(function (element) {
+                      messages.map(function (message) {
+                        var _innerHTML = element.innerHTML;
+                        _innerHTML = _innerHTML.replace(new RegExp(`${message[lang1]}`, "g"), message[lang2]);
+                        element.innerHTML = _innerHTML;
+                        return null;
+                      });
+                      return element;
+                    });
+                  resolve();
+                });
+              };
+              callback_i18n.call(component).then(function () {
+                logger.debug("i18n loaded for component: " + component.name);
               });
-            };
-            callback_i18n.call(component).then(function () {
-              logger.debug("i18n loaded for component: " + component.name);
-            });
-
+  
+            }
           }
+        } else {
+          // not yet implemented
         }
-      } else {
-        // not yet implemented
       }
-    },
-    _componentHelpers: [],
-    addComponentHelper(componentHelper) {
-      var component = this;
-      component._componentHelpers.push(componentHelper);
-    },
-    runComponentHelpers() {
-      if (isBrowser) {
+  
+      addComponentHelper(componentHelper) {
         var component = this;
-        var __component_helpers__ = [];
-        /*
-         * BEGIN use i18n translation
-         */
-        __component_helpers__.push(component.i18n_translate.bind(component));
-        /*
-         * END use i18n translation
-         */
-
-        /*
-         * BEGIN component scrollIntoHash
-         */
-        __component_helpers__.push(component.scrollIntoHash.bind(component));
-        /*
-         * END component scrollIntoHash
-         */
-
-        /*
-         * BEGIN component images lazy-load
-         */
-
-        __component_helpers__.push(component.lazyLoadImages.bind(component));
-
-        /*
-         * END component images lazy-load
-         */
-
-        __component_helpers__ = __component_helpers__.concat(component._componentHelpers);
-
-        __component_helpers__.map(
-          function (_component_helper_) {
-            _component_helper_();
-          }
-        );
-
-      } else {
-        // not yet implemented
+        component._componentHelpers.push(componentHelper);
       }
-
+  
+      runComponentHelpers() {
+        if (isBrowser) {
+          var component = this;
+          var __component_helpers__ = [];
+          /*
+           * BEGIN use i18n translation
+           */
+          __component_helpers__.push(component.i18n_translate.bind(component));
+          /*
+           * END use i18n translation
+           */
+  
+          /*
+           * BEGIN component scrollIntoHash
+           */
+          __component_helpers__.push(component.scrollIntoHash.bind(component));
+          /*
+           * END component scrollIntoHash
+           */
+  
+          /*
+           * BEGIN component images lazy-load
+           */
+  
+          __component_helpers__.push(component.lazyLoadImages.bind(component));
+  
+          /*
+           * END component images lazy-load
+           */
+  
+          __component_helpers__ = __component_helpers__.concat(component._componentHelpers);
+  
+          __component_helpers__.map(
+            function (_component_helper_) {
+              logger.debug(`Executing ${_component_helper_.name} as component helper for ${component.name}...`);
+              _component_helper_();
+            }
+          );
+  
+        } else {
+          // not yet implemented
+        }
+  
+      }
+      
     }
-  });
+  
+  ]);
 
   _top._bindroute_.__assigned = false;
 
@@ -2677,122 +2726,171 @@
     (_protected_code_)(__c__);
   });
 
-  Class("Controller", ClassFactory("InheritClass"), {
-    dependencies: [],
-    component: null,
-    routingSelectedAttr(attrName) {
-      return this.component.routingSelected.map(function (r) {
-        return r[attrName];
-      }).filter(function (v) {
-        return v;
-      }).pop();
-    },
-    isTouchable() {
-      return ("ontouchstart" in window) ||
-        (navigator.MaxTouchPoints > 0) ||
-        (navigator.msMaxTouchPoints > 0);
-    },
-    onpress(subelementSelector, handler) {
-      try {
-        if (this.isTouchable()) {
-          this.component.body.subelements(subelementSelector)[0].addEventListener("touchstart", handler, {
-            passive: true
-          });
-        } else {
-          this.component.body.subelements(subelementSelector)[0].addEventListener("click", handler, {
-            passive: true
-          });
+  Package("com.qcobjects.controllers", [
+    class Controller extends ClassFactory("InheritClass") {
+      constructor ({
+        component= null,
+        dependencies = []        
+      }){
+        super (...arguments);
+        if (typeof this.component === "undefined" || this.component === "null"){
+          throw Error (`${__getType__(this)} must be called with a component`);
         }
-      } catch (e) {
-        logger.debug("No button to assign press event");
       }
-    },
-    createRoutingController() {
-      var controller = this;
-      var component = controller.component;
-      var controllerName = controller.routingSelectedAttr("controllerclass");
-      if (typeof controllerName !== "undefined") {
-        var _Controller = ClassFactory(controllerName);
-        if (typeof _Controller !== "undefined") {
-          component.routingController = New(_Controller, {
-            component: component
-          }); // Initializes the main controller for the component
-          if (Object.hasOwnProperty.call(component.routingController, "done") && typeof component.routingController.done === "function") {
-            component.routingController.done.call(component.routingController);
+
+      routingSelectedAttr(attrName) {
+        return this.component.routingSelected.map(function (r) {
+          return r[attrName];
+        }).filter(function (v) {
+          return v;
+        }).pop();
+      }
+
+      isTouchable() {
+        return ("ontouchstart" in window) ||
+          (navigator.MaxTouchPoints > 0) ||
+          (navigator.msMaxTouchPoints > 0);
+      }
+
+      onpress(subelementSelector, handler) {
+        try {
+          if (this.isTouchable()) {
+            this.component.body.subelements(subelementSelector)[0].addEventListener("touchstart", handler, {
+              passive: true
+            });
+          } else {
+            this.component.body.subelements(subelementSelector)[0].addEventListener("click", handler, {
+              passive: true
+            });
           }
+        } catch (e) {
+          logger.debug("No button to assign press event");
         }
       }
-    }
-  });
 
-  Class("View", ClassFactory("InheritClass"), {
-    dependencies: [],
-    component: null
-  });
+      createRoutingController() {
+        var controller = this;
+        var component = controller.component;
+        var controllerName = controller.routingSelectedAttr("controllerclass");
+        if (typeof controllerName !== "undefined") {
+          var _Controller = ClassFactory(controllerName);
+          if (typeof _Controller !== "undefined") {
+            component.routingController = New(_Controller, {
+              component: component
+            }); // Initializes the main controller for the component
+            if (Object.hasOwnProperty.call(component.routingController, "done") && typeof component.routingController.done === "function") {
+              component.routingController.done.call(component.routingController);
+            }
+          }
+        }
+      }
 
-  Class("Service", ClassFactory("InheritClass"), {
-    kind: "rest",
-    /* it can be rest, mockup, local */
-    domain: domain,
-    basePath: basePath,
-    url: "",
-    method: "GET",
-    data: {},
-    reload: false,
-    cached: false,
-    set(name, value) {
-      this[name] = value;
-    },
-    get(name) {
-      return this[name];
+      done(){}  
     }
-  });
+  ]);
+
+  Package("com.qcobjects.views",[
+    class View extends ClassFactory("InheritClass") {
+      constructor ({component = undefined, dependencies = []}){
+        super(...arguments);
+        if (typeof this.component === "undefined" || this.component === "null"){
+          throw Error (`${__getType__(this)} must be called with a component`);
+        }
 
-  Class("JSONService", ClassFactory("Service"), {
-    method: "GET",
-    cached: false,
-    headers: {
-      "Content-Type": "application/json",
-      "charset": "utf-8"
-    },
-    JSONresponse: null,
-    done(result) {
-      logger.debug("***** RECEIVED RESPONSE:");
-      logger.debug(result.service.template);
-      this.JSONresponse = JSON.parse(result.service.template);
+      }
     }
-  });
+  ]);
+
+  Package("com.qcobjects.api", [
+    class Service extends ClassFactory("InheritClass") {
+      kind= "rest";
+      /* it can be rest, mockup, local */
+      domain= _domain_;
+      basePath= _basePath_;
+      url= "";
+      method= "GET";
+      data= {};
+      reload= false;
+      cached= false;
+
+      constructor () {
+        super(...arguments);
+      }
 
-  Class("ConfigService", ClassFactory("JSONService"), {
-    method: "GET",
-    cached: false,
-    configFileName: "config.json",
-    headers: {
-      "Content-Type": "application/json",
-      "charset": "utf-8"
-    },
-    JSONresponse: null,
-    done(result) {
-      logger.debug("***** CONFIG LOADED:");
-      logger.debug(result.service.template);
-      this.JSONresponse = JSON.parse(result.service.template);
-      if (Object.hasOwnProperty.call(this.JSONresponse, "__encoded__")) {
-        this.JSONresponse = JSON.parse(ClassFactory("_Crypt").decrypt(this.JSONresponse.__encoded__, _secretKey));
+      set(name, value) {
+        this[name] = value;
       }
-      for (var k in this.JSONresponse) {
-        _top.CONFIG.set(k, this.JSONresponse[k]);
+
+      get(name) {
+        return this[name];
       }
-      this.configLoaded.call(this);
-    },
-    fail(result) {
-      this.configLoaded.call(this);
-    },
-    _new_(o) {
-      this.set("url", this.get("basePath") + this.get("configFileName"));
+  
     }
-  });
 
-  Class("VO", ClassFactory("InheritClass"), {});
+  ]);
+
+  Package("com.qcobjects.api.services", [
+    class JSONService extends ClassFactory("Service") {
+      method= "GET";
+      cached= false;
+      headers= {
+        "Content-Type": "application/json",
+        "charset": "utf-8"
+      };
+      JSONresponse= null;
+      done(result) {
+        logger.debug("***** RECEIVED RESPONSE:");
+        logger.debug(result.service.template);
+        this.JSONresponse = JSON.parse(result.service.template);
+      }
+  
+      constructor (){
+        super(...arguments);
+      }
+
+    }
+  ]);
+
+  Package("com.qcobjects.api.config", [
+    class ConfigService extends ClassFactory("JSONService"){
+      method= "GET";
+      cached= false;
+      configFileName= "config.json";
+      headers= {
+        "Content-Type": "application/json",
+        "charset": "utf-8"
+      };
+      JSONresponse= null;
+      done(result) {
+        logger.debug("***** CONFIG LOADED:");
+        logger.debug(result.service.template);
+        this.JSONresponse = JSON.parse(result.service.template);
+        if (Object.hasOwnProperty.call(this.JSONresponse, "__encoded__")) {
+          this.JSONresponse = JSON.parse(ClassFactory("_Crypt").decrypt(this.JSONresponse.__encoded__, _secretKey));
+        }
+        for (var k in this.JSONresponse) {
+          _top.CONFIG.set(k, this.JSONresponse[k]);
+        }
+        this.configLoaded.call(this);
+      }
+      fail(result) {
+        this.configLoaded.call(this);
+      }
+
+      constructor (){
+        super(...arguments);
+        this.set("url", this.get("basePath") + this.get("configFileName"));
+      }
+    }
+  ]);
+
+  Package("com.qcobjects.valueObjects", [
+    class VO extends ClassFactory("InheritClass") {
+      constructor (){
+        super(...arguments);
+      }
+    }
+  ]);
 
   /**
    * Returns a standarized uri for a component
@@ -2820,8 +2918,9 @@
    * @param component a Component object
    */
   var componentLoader = function (component, _async) {
+    var __promise__;
     var _componentLoaderInBrowser = function (component, _async) {
-      component.__promise__ = new Promise(function (resolve, reject) {
+      __promise__ = new Promise(function (resolve, reject) {
         var _promise = component.__promise__;
         var container = (Object.hasOwnProperty.call(component, "container") && typeof component.container !== "undefined" && component.container !== null) ? (component.container) : (component.body);
         if (container !== null) {
@@ -2928,13 +3027,11 @@
             }
 
           }
-
-          return;
         } else {
           logger.debug("CONTAINER DOESNT EXIST");
         }
       });
-      component.__promise__.then(function (standardResponse) {
+      __promise__.then(function (standardResponse) {
         var _ret_;
         if (typeof component.done === "function") {
           _ret_ = component.done.call(component, standardResponse);
@@ -2949,11 +3046,11 @@
       }).catch(function (e) {
         logger.debug("Something wrong loading the component");
       });
-      return component.__promise__;
+      return __promise__;
     };
     var _componentLoaderInNode = function (component, _async) {
-      component.__promise__ = new Promise(function (resolve, reject) {
-        var _promise = component.__promise__;
+      __promise__ = new Promise(function (resolve, reject) {
+        var _promise = __promise__;
         var _feedComponent_ = function (component) {
           component.feedComponent();
           var standardResponse = {
@@ -3017,8 +3114,6 @@
           }
 
         }
-
-        return;
       });
       component.__promise__.then(function (standardResponse) {
         var _ret_;
@@ -3399,11 +3494,15 @@
               _component_.controller = New(_Controller, {
                 component: _component_
               }); // Initializes the main controller for the component
-              if (Object.hasOwnProperty.call(_component_.controller, "done") && typeof _component_.controller.done === "function") {
+              if (typeof _component_.controller.done === "function") {
                 _component_.controller.done.call(_component_.controller);
+              } else {
+                logger.debug(`${controllerName} does not have a done() method.`);
               }
-              if (Object.hasOwnProperty.call(_component_.controller, "createRoutingController")) {
+              if (typeof _component_.controller.createRoutingController === "function") {
                 _component_.controller.createRoutingController.call(_component_.controller);
+              } else {
+                logger.debug(`${controllerName} does not have a createRoutingController() method.`);
               }
             }
             var effectClassName = _component_.body.getAttribute("effectClass");
@@ -3425,7 +3524,14 @@
             }
             _component_.body.setAttribute("loaded", true);
 
-            _component_.runComponentHelpers();
+            logger.debug(`Trying to run component helpers for ${_component_.name}...`);
+            try {
+              _component_.runComponentHelpers();
+              logger.debug(`Component helpers for ${_component_.name} executed.`);
+            } catch (e){
+              logger.debug(`Component helpers for ${_component_.name} could not be executed.`);
+              throw Error(e);
+            }
 
             if ((Tag("component[loaded=true]").length * 100 / Tag("component").length) >= 100) {
               d.dispatchEvent(new CustomEvent("componentsloaded", {
@@ -3579,7 +3685,7 @@
     HTMLElement.prototype.buildComponents = Element.prototype.buildComponents;
     var _ComponentWidget_ = class extends HTMLElement {
       constructor() {
-        super();
+        super(...arguments);
         const componentWidget = this;
         const componentName = componentWidget.nodeName.toLowerCase();
         const componentBody = _DOMCreateElement("component");
@@ -3635,151 +3741,174 @@
 
   if (!isBrowser) {
 
-    Class("BackendMicroservice", Object, {
-      domain: domain,
-      basePath: basePath,
-      body: null,
-      stream: null,
-      request: null,
-      cors() {
-        if (this.route.cors) {
-          let {
-            allow_origins,
-            allow_credentials,
-            allow_methods,
-            allow_headers
-          } = this.route.cors;
-          var microservice = this;
-          if (typeof microservice.headers !== "object") {
-            microservice.headers = {};
-          }
-          if (typeof allow_origins !== "undefined") {
-            // an example of allow_origins is ['https://example.com','http://www.example.com']
-            if (allow_origins === "*" || (typeof microservice.request.headers.origin === "undefined") || [...allow_origins].indexOf(microservice.request.headers.origin) !== -1) {
-              // for compatibility with all browsers allways return a wildcard when the origin is allowed
-              microservice.headers["Access-Control-Allow-Origin"] = "*";
-            } else {
-              logger.debug("Origin is not allowed: " + microservice.request.headers.origin);
-              logger.debug("Forcing to finish the response...");
-              this.body = {};
-              try {
-                this.done();
-              } catch (e) {}
+    Package("com.qcobjects.api", [
+      class BackendMicroservice extends ClassFactory("InheritClass") {
+
+        constructor ({
+          domain= _domain_,
+          basePath= _basePath_,
+          body= null,
+          stream= null,
+          request= null
+        }){
+          super(...arguments);
+  
+          var o = this;
+  
+          logger.debug("Executing BackendMicroservice ");
+          let microservice = this;
+          microservice.body = null;
+          this.cors();
+          microservice.stream = stream;
+          stream.on("data", (data) => {
+            // data from POST, GET
+            var requestMethod = request.method.toLowerCase();
+            var supportedMethods = {
+              "post": microservice.post,
+            };
+            if (Object.hasOwnProperty.call(supportedMethods, requestMethod)) {
+              supportedMethods[requestMethod].call(microservice, data);
             }
-          } else {
-            microservice.headers["Access-Control-Allow-Origin"] = "*";
-          }
-          if (typeof allow_credentials !== "undefined") {
-            microservice.headers["Access-Control-Allow-Credentials"] = allow_credentials.toString();
-          } else {
-            microservice.headers["Access-Control-Allow-Credentials"] = "true";
-          }
-          if (typeof allow_methods !== "undefined") {
-            microservice.headers["Access-Control-Allow-Methods"] = [...allow_methods].join(",");
-          } else {
-            microservice.headers["Access-Control-Allow-Methods"] = "GET, OPTIONS, POST";
-          }
-          if (typeof allow_headers !== "undefined") {
-            microservice.headers["Access-Control-Allow-Headers"] = [...allow_headers].join(",");
-          } else {
-            microservice.headers["Access-Control-Allow-Headers"] = "*";
-          }
-        }
-      },
-      _new_(o) {
-        logger.debug("Executing BackendMicroservice ");
-        let microservice = this;
-        microservice.body = null;
-        let request = microservice.request;
-        this.cors();
-        let stream = o.stream;
-        microservice.stream = stream;
-        stream.on("data", (data) => {
+          });
+  
           // data from POST, GET
           var requestMethod = request.method.toLowerCase();
           var supportedMethods = {
-            "post": microservice.post,
+            "get": microservice.get,
+            "head": microservice.head,
+            "put": microservice.put,
+            "delete": microservice.delete,
+            "connect": microservice.connect,
+            "options": microservice.options,
+            "trace": microservice.trace,
+            "patch": microservice.patch
           };
           if (Object.hasOwnProperty.call(supportedMethods, requestMethod)) {
-            supportedMethods[requestMethod].call(microservice, data);
+            supportedMethods[requestMethod].call(microservice);
           }
-        });
-
-        // data from POST, GET
-        var requestMethod = request.method.toLowerCase();
-        var supportedMethods = {
-          "get": microservice.get,
-          "head": microservice.head,
-          "put": microservice.put,
-          "delete": microservice.delete,
-          "connect": microservice.connect,
-          "options": microservice.options,
-          "trace": microservice.trace,
-          "patch": microservice.patch
-        };
-        if (Object.hasOwnProperty.call(supportedMethods, requestMethod)) {
-          supportedMethods[requestMethod].call(microservice);
+          
+          
         }
-
-      },
-      head(formData) {
-        this.done();
-      },
-      get(formData) {
-        this.done();
-      },
-      post(formData) {
-        this.done();
-      },
-      put(formData) {
-        this.done();
-      },
-      delete(formData) {
-        this.done();
-      },
-      connect(formData) {
-        this.done();
-      },
-      options(formData) {
-        this.done();
-      },
-      trace(formData) {
-        this.done();
-      },
-      patch(formData) {
-        this.done();
-      },
-      finishWithBody(stream) {
-        try {
-          stream.write(_DataStringify(this.body));
-          stream.end();
-        } catch (e) {
-          logger.debug("Something wrong writing the response for microservice" + e.toString());
+  
+        cors() {
+          if (this.route.cors) {
+            let {
+              allow_origins,
+              allow_credentials,
+              allow_methods,
+              allow_headers
+            } = this.route.cors;
+            var microservice = this;
+            if (typeof microservice.headers !== "object") {
+              microservice.headers = {};
+            }
+            if (typeof allow_origins !== "undefined") {
+              // an example of allow_origins is ['https://example.com','http://www.example.com']
+              if (allow_origins === "*" || (typeof microservice.request.headers.origin === "undefined") || [...allow_origins].indexOf(microservice.request.headers.origin) !== -1) {
+                // for compatibility with all browsers allways return a wildcard when the origin is allowed
+                microservice.headers["Access-Control-Allow-Origin"] = "*";
+              } else {
+                logger.debug("Origin is not allowed: " + microservice.request.headers.origin);
+                logger.debug("Forcing to finish the response...");
+                this.body = {};
+                try {
+                  this.done();
+                } catch (e) {}
+              }
+            } else {
+              microservice.headers["Access-Control-Allow-Origin"] = "*";
+            }
+            if (typeof allow_credentials !== "undefined") {
+              microservice.headers["Access-Control-Allow-Credentials"] = allow_credentials.toString();
+            } else {
+              microservice.headers["Access-Control-Allow-Credentials"] = "true";
+            }
+            if (typeof allow_methods !== "undefined") {
+              microservice.headers["Access-Control-Allow-Methods"] = [...allow_methods].join(",");
+            } else {
+              microservice.headers["Access-Control-Allow-Methods"] = "GET, OPTIONS, POST";
+            }
+            if (typeof allow_headers !== "undefined") {
+              microservice.headers["Access-Control-Allow-Headers"] = [...allow_headers].join(",");
+            } else {
+              microservice.headers["Access-Control-Allow-Headers"] = "*";
+            }
+          }
         }
-      },
-      done() {
-        var microservice = this;
-        var stream = microservice.stream;
-        try {
-          stream.respond(microservice.headers);
-        } catch (e) {
-          logger.debug(e.toString());
+        
+  
+        head(formData) {
+          this.done();
+        }
+  
+        get(formData) {
+          this.done();
+        }
+  
+        post(formData) {
+          this.done();
+        }
+  
+        put(formData) {
+          this.done();
+        }
+  
+        delete(formData) {
+          this.done();
+        }
+  
+        connect(formData) {
+          this.done();
+        }
+  
+        options(formData) {
+          this.done();
         }
-        if (microservice.body !== null) {
+  
+        trace(formData) {
+          this.done();
+        }
+  
+        patch(formData) {
+          this.done();
+        }
+  
+        finishWithBody(stream) {
+          try {
+            stream.write(_DataStringify(this.body));
+            stream.end();
+          } catch (e) {
+            logger.debug("Something wrong writing the response for microservice" + e.toString());
+          }
+        }
+        
+        done() {
+          var microservice = this;
+          var stream = microservice.stream;
           try {
-            microservice.finishWithBody.call(microservice, stream);
+            stream.respond(microservice.headers);
           } catch (e) {
             logger.debug(e.toString());
           }
+          if (microservice.body !== null) {
+            try {
+              microservice.finishWithBody.call(microservice, stream);
+            } catch (e) {
+              logger.debug(e.toString());
+            }
+          }
         }
+  
+  
       }
-    });
+    ]);
+
 
   }
 
   Class("SourceJS", Object, {
-    domain: domain,
-    basePath: basePath,
+    domain: _domain_,
+    basePath: _basePath_,
     body: _DOMCreateElement("script"),
     type: "text/javascript",
     containerTag: "body",
@@ -3837,8 +3966,8 @@
     }
   });
   Class("SourceCSS", Object, {
-    domain: domain,
-    basePath: basePath,
+    domain: _domain_,
+    basePath: _basePath_,
     body: _DOMCreateElement("link"),
     url: "",
     data: {},
@@ -4627,7 +4756,11 @@
         window.onpopstate = function (event) {
           event.stopImmediatePropagation();
           event.stopPropagation();
-          ClassFactory("Component").route();
+          if (ClassFactory("CONFIG").get("rebuildObjects", true)){
+            global.componentsStack = document.buildComponents.call(document, true);
+          } else {
+            ClassFactory("Component").route();
+          }
         };
 
         /*