Important: This documentation covers Yarn 1 (Classic).
For Yarn 2+ docs and migration guide, see yarnpkg.com.

Package detail

qcobjects

QuickGroup407LGPL-3.02.5.142-betaTypeScript support: included

QCObjects is an Open-source framework that empowers full-stack developers to make micro-services and micro-frontends into an N-Tier architecture.

qcobjects, cobjects, learn javascript, javascript, learn to code, qco, ROUTING, TOOLBAR, MEDIA, IMAGE, LAYOUT, BUTTON, server, view, mvvm, node, quickcorp, javascript, pure, mvc, objects, microfrontend, micro-frontend, architecture, component, components, pure, framework, javascript-framework, mvc-pattern, demo, html, first-timers-only, microfrontends, microservices, microfrontend, component-architecture, cli, tool, nodejs, cloud, multicloud, multi-cloud, aws, server, digitalocean, hosting, architecture, n-tier, multitier, multi-tier

readme

logo

GitHub license FOSSA Status Documentation Status GitHub release GitHub stars npm version apm: version docker pulls Contributor Covenant CII Best Practices

Become a Patreon

QCObjects - To code fancy, clean and quick | Product Hunt

QCObjects

Welcome to QCObjects. An Open-source framework that empowers full-stack developers to make micro-services and micro-frontends into an N-Tier architecture.

With QCObjects devlopers are also able to code front-end and back-end together using a common syntax in pure JavaScript. It is cross-browser, cross-platform and cross-frame.

Install it, make a textfield or a navigate home functionality, all in just one step.

QCObjects is being featured by British Herald as today, the most advanced framework for modern software development.

This document is the Main Reference Documentation!

This repository and readme is hosted at https://qcobjects.dev

Check out the official page of QCObjects at https://qcobjects.com

This project adheres to the Contributor Covenant code of conduct. By participating, you are expected to uphold this code. Please report unacceptable behavior to info@quickcorp.cl.

Contributors are welcome!

You can contribute to QCObjects following the set of guidelines expressed in the file CONTRIBUTING.md

The meaning of the name QCObjects (Do not forget the Q)

Often, some people is confusing QCObjects name with CObjects (perhaps some day it changes, who knows...) but the Q has an important meaning: It means Quick! What the complete name QCObjects does mean is Quick Components and Objects, and that is why the Q, C, O letters are capitalized.

QCObjects Explainer Video

For those who have no time to read all of this today, here is a small video that explains what QCObjects is and what can be done with it.

QCObjects Explainer Video

Table of Contents

Principals

Here are the principals with QCObjects was made with:

  1. You should type in JavaScript to code a JavaScript application.
  2. Everything is an object.
  3. Every object has a definition.
  4. On the front-end side, any object can be stacked into the DOM or Virtual-DOM without the need to re-declare its definition.
  5. Every object has a body.
  6. A class should be the main definition of an object.
  7. A class should be easy typed as an object itself.
  8. Your code should be easily organised into packages.
  9. Your code should be possible to easily scafold your applications into a clean architecture.
  10. A component is an entity that has an object representation, and a tag declaration. The content of a component should be possible to be filled up remotely and locally. As a component is an object, it has a body as well, and the body of the component normally is an stacked instance of a DOM element.
  11. A component can be attached to the DOM or detached from it without affecting its functionality.
  12. A service call can be extended to scafold its functionality.
  13. You should be able to import a package remotely.
  14. You should be able to scafold your code and also controlling your savings on the server side by not doing unnecessary calls to remote sources. You should not need to repeat yourself coding this kind of controls.
  15. You should be able to code your N-Tier application in a single language or syntax.
  16. You should be able to apply any template you want to a component, it doesn't matter the what syntax or language the template was written with.
  17. If an HTML tag is already represented by a DOM object instance, you should not need to duplicate this instance definition in order to render its contents.
  18. Your HTML main page should be clean. But you should be able to bind what controls the tag behaviour without affecting the HTML syntax.
  19. The order of execution of your code should be easily understandable and readable from the code, and the rendering process of every component should have and execution control in as many layers you need.
  20. A layered pattern (like MVC or MVCC) should be present for every component. It doesn't matter if you define every layer or not.
  21. The behaviour of a component should not be determined by its rendering process.
  22. It is necessary a components stack that splits the DOM into a subjacent tree of attached elements. So now it exists and it is called The QCObjects Nested Components Stack.
  23. You should be able to extend a component instance. But you should be able to control its dynamic behaviour without affecting its initial declaration.
  24. You should be able to apply simultaneous visual effects and animations in an easy way to any DOM element instance.
  25. You should be able to control the visual effects and animations either from CSS or JavaScript without affecting the performance.
  26. You should be able to control the behaviour of your code Into-the-box and out-of-the-box and survive doing it.

Main features

  • Built-In & custom templates for Progressive Web Apps (PWA) and Accelerated Mobile Pages (AMP)
  • Revolutionary UI Effects
  • Breakthrough backend micro-services
  • The simplicity of a wonderful layout design
  • Fully usable CLI tools
  • Objects & Components driven architecture
  • Front-end and back-end together in a full-stack environment
  • Recursive routing for components
  • Built-In nested components management
  • Fully integrated MVC pattern (Model, View, Controller)
  • Dynamic Data Objects
  • Based on N-Tier Architecture concepts

Progressive Web Apps (PWA) Adopted Features

Prevent Render-blocking resources

To prevent Render-blocking resources, QCObjects has implemented the Package factory function.

On-Demand Resources Load

With a dynamic components driven architecture, QCObjects is rendering every visual resource that is inside of a component only when the component is building itself, and every component is connected to a tree called global.componentsStack that is actually pointing to every component instance and its subcomponents. Every time a component is rebuilt, visual resources are dynamically reloaded on-demand in the most efficient way, so you can forget all the nasty code that you were needing to controll the resource loading process with other frameworks.

Lazy-loading of images in components (use lazy-src instead of src attribute in img tag)

Since the version 2.1.251, QCObjects provide an easy way to lazy load the images, using the latest standard for browsers.

<img src="img/preloader.svg" lazy-src="img/myrealimage.png"/>

In the above code, a preloader (light-weight) image is used to be loaded in the first instance, and a lazy-src attribute is used to set the real image to show after lazy loading process. QCObjects will load all the declared tags inside a component in lazy mode if they have a lazy-src attribute, after the component is rebuilt or loaded. Also, QCObjects will use the Intersection Observer API (when available) to determine whether the lazy-src or src image is visually useful to be showed.

The effect of lazy loading is only high visible on the first time the PWA is loaded. The next time, the speed of loading will be significantly increased making more difficult to the human eye to see the result. However this feature makes a lot of difference in terms of user experience when the internet connection has low speed issues or the images are extremely large. This feature is a part of the recommended features for PWAs writen by Mozzila Developers Network in an article about Progressive loading. You can read that article here

If you don't want to use lazy loading for images, you can always keep the normal way of loading by not adding the lazy-src attribute to the tag and using the traditional src.

Cross Browser Javascript Framework for MVC Patterns

QCObjects is a javascript framework designed to make easier everything about the MVC patterns implementation into the pure javascript scope. You don't need to use typescript nor any transpiler to run QCObjects. It runs directly on the browser and it uses pure javascript with no extra dependencies of code. You can make your own components expressed in real native javascript objects or extend a native DOM object to use in your own way. You can also use QCObjects in conjunction with CSS3 frameworks like [Foundation] (https://foundation.zurb.com), [Bootstrap] (https://getbootstrap.com) and mobile javascript frameworks like [PhoneGap] (https://phonegap.com) and OnsenUI (https://onsen.io)

screenshot

Install it, make a textfield or a navigate home functionality, all in just one step.

QCObjects in installable in your computer, it comes with a CLI Tool and commands to create your application template in one step. Navigate home without leaving the webpage and make a shadowed textfield in one step.

Dynamic Components Architecture

qcobjects components layout FOSSA Status

ECMA-262 Specification

See ECMAScript® 2020 Language Specification for reference

Copyright

Copyright (c) Jean Machuca and QuickCorp info@quickcorp.cl

Demo

PWA Live Demo

Check out a live demo of pure QCObjects based frontend Progressive Web App here: PWA QCObjects

Demo Integrating with Foundation

Check out a demo using Foundation components here: Demo Using Foundation

Demo Integrating with Materializecss

Check out a demo using MaterializeCSS here: Demo Using Materializecss

Demo Using Raw CSS

Check out a demo using raw CSS: Demo Using Raw CSS

Example of QCObjects using and manipulating canvas objects

The following code shows how QCObjects can manipulate canvas objects directly and inside components

<!DOCTYPE html>
<html>
    <head>
        <title>Demo</title>
        <script type="text/javascript" src="https://cdn.qcobjects.dev/QCObjects.js"></script>
        <script type="text/javascript">
            var canvas1,canvas2,canvas3,container;
        CONFIG.set('relativeImportPath','src/');

            /**
             * Main import sentence.
             */
            Import('cl.quickcorp',function (){

                /**
                 * Super Container MyOwnBody
                 */
                Class('MyOwnBody',HTMLBodyElement,{
                    customAttr:'custom',
                    body:document.body  // breakes default body element and replace with them
                });

                /**
                 * Another custom class definition
                 */
                Class('MyContainer',HTMLElement,{
                    width:400,
                    height:400,
                    customAttr:'custom attr container'
                });


                /**
                 * Another custom class definition
                 */
                Class('canvas',HTMLCanvasElement,{
                    customAttr:'custom'
                });

                /**
                 * Another custom class definition
                 */
                Class('MyCanvas2',HTMLCanvasElement,{});

                body = New(MyOwnBody); // binds to body
                body.css({backgroundColor:'#ccc'});

                container = Tag('container')[0].Cast(MyContainer); // cast any javascript dom object to QC_Object class
                container.css({backgroundColor:'red'}); // access binding in two directions to dom objects

                /**
                 * Instance a new custom canvas
                 */
                canvas1 = New(canvas,{
            width:100,
            height:100,
          });
                canvas2 = New(canvas,{
            width:200,
                    height:100,
          });
                canvas3 = New(canvas,{
            width:300,
                    height:50,
          });

                canvas1.css({backgroundColor:'#000000'}); // like jquery and another style access
          canvas1.body.style.backgroundColor='#000000'; // standard javascript style access
                canvas2.body.style.backgroundColor='#0044AA'; // standard javascript style access
                canvas3.body.style.backgroundColor='green'; // standard javascript style access

                canvas1.append(); //append canvas1 to body
                canvas2.attachIn('container'); // attach or append to specific tag containers
                container.append(canvas3); // append canvas3 to custom tag binding

//                canvas1.body.remove(); // remove canvas1 from dom
                body.append(canvas3); // append canvas3 to body

          // using components
          var c1 = New(Component,{'templateURI':'templatesample.html',cached:false});
          document.body.append(c1); // appends the c1 to the body


            });

        </script>
    </head>
    <body>
        <container id="contentLoader" ></container>
    </body>
</html>

DevBlog

The Official DevBlog of QCObjects is hosted on Hashnode. The DevBlog is personally written by Jean Machuca, the author of QCObjects and and he is explaining in detail how are the best practices and giving the best tips and tricks to use the most advanced features of QCObjects.

Fork

Please fork this project or make a link to this project into your README.md file. Read the LICENSE.txt file before you use this code.

Become a Sponsor

If you want to become a sponsor for this wonderful project you can do it here

Check out the QCObjects SDK

You can check out the QCObjects SDK and follow the examples to make your own featured components

Donate

If you like this code please DONATE!

paypal

Become a Patreon

Installing

Using QCObjects with Atom:

> apm install qcobjects-syntax

https://atom.io/packages/qcobjects-syntax

Using QCObjects in Visual Studio Code:

https://marketplace.visualstudio.com/items?itemName=Quickcorp.QCObjects-vscode

Installing with NPM:

> npm install qcobjects-cli -g && npm install qcobjects --save

screenshot2

Installing the docker playground:

docker pull -a quickcorp/qcobjects-playground && docker run -it --name qcobjects-playground --rm -it quickcorp/qcobjects-playground

screenshot3

One-Step Installation Script for Ubuntu 18.x

WARNING: Do this only in a fresh|blank|brandnew installation of Ubuntu 18.x, don't do it into an existing production environment. You will be asked for sudo grant permission.

curl -L https://cdn.qcobjects.dev/install_qcobjects_ubuntu18x.sh |sh

WARNING: I'm not responsible for damaging your infrastructure by using an automated installation script into an unsafe network. Make sure all your repos and scripts are under HTTPS with a valid certificate. For better safe results I recommended you to download the script, edit it for your special needs and then execute it in your machine as local.

One-Step Installation Script for RHEL8

curl -L https://cdn.qcobjects.dev/install_qcobjects_rhel8.sh |sh

One-Step Installation Script for Raspberry PI Raspbian 9

su -c "curl -L https://cdn.qcobjects.dev/install_qcobjects_raspbian9.sh |sh" root

One-Step Installation Script for macOS

Tested on macOS Catalina 10.15.3

curl -L https://cdn.qcobjects.dev/install_qcobjects_macOS.sh | zsh

Install and test QCObjects on Microsoft Windows OS

1.- Install the latest version of NodeJS for Windows from here 2.- From cmd install qcobjects-cli using npm

npm i qcobjects-cli -g

3.- Create a directory for your project

md mynewproject && cd mynewproject

4.- Create a new QCObjects Progressive Web Application

qcobjects create mynewproject --pwa

screenshot

QCObjects Multi-Cloud Installation

QCObjects is natively supported by the most famous cloud providers. In most of them, you can install it and set everything up and running in just one step.

DigitalOcean One-Click Droplet

If you want to forget apt-get and the config guide. Go straight to deploying your project using a preconfigured 1-Click App including QCObjects CLI, QCObjects-SDK and QCObjects HTTP2 Built-In Server, then spin it up on a Droplet VM or a Kubernetes cluster in 60 seconds or less.

Create Your Own QCObjects DigitalOcean Droplet here

AWS Amazon Machine Images (AMI)

An Amazon Machine Image (AMI) provides the information required to launch an instance. You must specify an AMI when you launch an instance. You can launch multiple instances from a single AMI when you need multiple instances with the same configuration. You can use different AMIs to launch instances when you need instances with different configurations.

An AMI includes the following:

  • One or more EBS snapshots, or, for instance-store-backed AMIs, a template for the root volume of the instance (for example, an operating system, an application server, and applications).
  • Launch permissions that control which AWS accounts can use the AMI to launch instances.
  • A block device mapping that specifies the volumes to attach to the instance when it's launched.

Start building your QCObjects AMI here

Amazon Web Services AWS PIB (Private Amazon Machine Image)

A Private Image lets you build a new AMI by installing AWS Marketplace software on an image you choose from the AMIs available to your AWS account, this allows you to better meet internal specifications for security, management and compliance. As with standard AWS Marketplace AMIs, each Private Image will comprise a subscription for the installed product and have software usage billed via AWS Marketplace.

Start building your QCObjects Amazon Private Image here

Using the development version code in the straight way into HTML5:

<script type="text/javascript" src="https://cdn.qcobjects.dev/QCObjects.js"></script>

Using the CDN minified version code from jsDelivr CDN

<script src="https://cdn.jsdelivr.net/npm/qcobjects/QCObjects.min.js"></script>

Using the latest non-minified version from jsDelivr CDN

<script src="https://cdn.jsdelivr.net/npm/qcobjects/QCObjects.js"></script>

Using UNPKG CDN

<script src="https://unpkg.com/qcobjects@latest/QCObjects.js"></script>

Using CDNJS

<script src="https://cdnjs.cloudflare.com/ajax/libs/qcobjects/[VERSION]/QCObjects.js"></script>

Where [VERSION] is the corresponding latest version using numeric notation, example: to use version 2.1.420:

<script src="https://cdnjs.cloudflare.com/ajax/libs/qcobjects/2.1.420/QCObjects.js"></script>

You don't need to minify QCObjects, but if you still want to use the minified code, you can do this:

<script src="https://cdnjs.cloudflare.com/ajax/libs/qcobjects/2.1.420/QCObjects.min.js"></script>

Again, Change 2.1.420 to the number of the version that you want to use.

Reference

Essentials

Here are the essentials symbols and concepts of QCObjects Reference

QC_Object

Basic Type of all elements

ComplexStorageCache

With ComplexStorageCache you can handle a cache for any object and save it in the local storage.

Usage:

var cache = new ComplexStorageCache({
                      index:object.id, // Object Index
                      load:(cacheController)=>{}, // A function to execute for the first time
                      alternate: (cacheController)=>{} // The alternate function to execute from the second time the source coude is loaded
                      });

Example:

var dataObject = {id:1,
                  prop1:1,
                  prop2:2
                };

var cache = new ComplexStorageCache({
    index: dataObject.id,
    load: (cacheController) => {
      dataObject = {
              id:dataObject.id,
              prop1:dataObject.prop1*2, // changing a property value
              prop2:dataObject.prop2
            };
      return dataObject;
    },
    alternate: (cacheController) => {
      dataObject = cacheController.cache.getCached(dataObject.id); // setting dataObject with the cached value
      return;
    }
  });

// Next time you can get the object from the cache
var dataObjectCopyFromCache = cache.getCached(dataObject.id);
console.log(dataObjectCopyFromCache); // will show the very same object value than dataObject

asyncLoad

The asyncLoad function loads a code once in async mode. This is useful to asure some initial process don't replicate its execution and aren't loaded after sensitive code.

Usage:

asyncLoad(()=>{
  // my code here
},args);
// Where args is an array of arguments, it can be the "arguments" special object

Example:


let doSomething = (arg1,arg2)=>{
  asyncLoad((arg1,arg2)=>{
    console.log(arg1);
    console.log(arg2);
  },arguments);
};

doSomething(1,2); // the code of doSomething will be executed once after the rest of asyncLoad queue of functions and before the execution of Ready event.

Class

This is NOT the class definition of ECMAScript 2015 (see class ECMAScript 2015 for reference).

Class is a special function to help you to declare a class in an easier and compatible way. It works cross-browser, and I hope ECMA could adopt something like that in the future. To let javascript not to be confuse about this, QCObjects uses "Class" not "class" (note the Camel Case).

Usage:

Class('MyClassName',MyClassDefinition);

Where MyClassDefinition is an object with a QCObjects prototype

Example:

Class('MyClassName',InheritClass,{
  propertyName1:0, // just to declare purpose
  propertyName2:'',
  classMethod1: function (){
    // some code here
    // note you can use "this" object
    return this.propertyName1;
  },
  classMethod2: function () {
    // some code here
    return this.propertyName2;
  }
});

var newObject = New(MyClassName,{
    propertyName1:1, // this initializes the value in 1
    propertyName2:"some value"
});
console.log(newObject.classMethod1()); // this will show number 1
console.log(newObject.classMethod2()); // this will show "some value"

QC_Append, append method

This is a special method inserted to make your life easier when you want to dynamically manipulate the DOM. You can insert even a Component, a QCObjects Object or a DOM Element inside another HTMLElement.

Usage:
[element].append([object or element]);

Example:

// This will create a QCObjects class named "canvas" extending a HTMLCanvasElement with a customAttr property that has a "custom" value
Class('canvas',HTMLCanvasElement,{
  customAttr:'custom'
});

// This will declare an instance canvas1 from the class canvas
let canvas1 = New(canvas,{
            width:100,
            height:100,
          });

// This will append the canvas1 object to the document body
document.body.append(canvas1);

The _super_ method

When you extend a QCObjects class from another one, you can use _super_ method to get an instance from the main class definition.

Usage:


_super_('MySuperClass','MySuperMethod').call(this,params)
// where this is the current instance and params are method parameters

Example:

Class('MySuperiorClass',InheritClass,{
  propertyName1:0, // just to declare purpose
  propertyName2:'',
  classMethod1: function (){
    // some code here
    // note you can use "this" object
    return this.propertyName1;
  },
});

Class('MyClassName',MySuperiorClass,{
  propertyName1:0, // just to declare purpose
  propertyName2:'',
  classMethod2: function () {
    // The next line will execute classMethod1 from MySuperiorClass
    // but using the current instance of MyClassName1
    return _super_('MySuperiorClass','classMethod1').call(this);
  }
});

var newObject = New(MyClassName,{
    propertyName1:1, // this initializes the value in 1
    propertyName2:"some value"
});
console.log(newObject.classMethod2()); // this will show the number 1

New

Creates an object instance of a QCObjects class definition.

Usage:

let objectInstance = New(QCObjectsClassName, properties);
// where properties is a single object with the property values

NOTE: In the properties object you can use single values or getter as well but they will be executed once.

Example:

Class('MyCustomClass',Object);
let objectInstance = New(MyCustomClass,{
  prop1:1,
  get randomNumber(){ // this getter will be executed once
    return Math.random();
  }
});

console.log(objectInstance.randomNumber); // it will show console.log(objectInstance.prop1); // it will show number 1

InheritClass

A single common used QCObjects class definition.

ClassFactory

Use ClassFactory to get the Class declaration factory instance of a QCObjects Class You can get either a Class factory from a Package or from the Class queue stack

To retreive the ClassFactory from the Class queue stack you can simply use the name of a Class as calling directly in the code.

Example:

/* When you declare MyClass using Class() it is instantly added to the Class queue stack
* and you can get the factory either using ClassFactory() or calling the name MyClass straight in the code
*/
Class('MyClass',{
    a:1
})
console.log(MyClass == ClassFactory('MyClass')) // it will show true
/* On the other hand, ClassFactory() will be so useful when you define a Class into a Package
*/
Package('org.quickcorp.package1',[
    Class('MyClass',{
        a:1
    })
])
console.log(MyClass == ClassFactory('MyClass')) // it will still show true
// The following line will show true as well
console.log(MyClass == ClassFactory('org.quickcorp.package1.MyClass'))
/* The interesting thing is when you have declared more than one Class using the
* same name MyClass into different packages but with different property default values
* and even properties
*/
Package('org.quickcorp.package1',[
    Class('MyClass',{
        a:1
    })
])
Package('org.quickcorp.package2',[
    Class('MyClass',{
        a:2,
        b:1
    })
])
// The last declaration of MyClass will be the one survival in the Class queue
// so the reference MyClass in the code will point to that one
console.log(MyClass == ClassFactory('MyClass')) // it will still show true

// In this case as the MyClass defined in the org.quickcorp.package1 will not be the same
// as the one in the org.quickcorp.package2, but the MyClass in the package2 is the last one
// The following line will show false
console.log(MyClass == ClassFactory('org.quickcorp.package1.MyClass'))

// The following line will show true
console.log(MyClass == ClassFactory('org.quickcorp.package2.MyClass'))

// The following line will show false
console.log(ClassFactory('org.quickcorp.package1.MyClass') == ClassFactory('org.quickcorp.package2.MyClass'))

The above examples are intentionally done to explain and show how the scope of the Class definitions in QCObjects is protected and handled and it is reflected in the use of ClassFactory.

So you are gonna want to use ClassFactory when you need complete control over the scope when extending Classes

Example

// When normally you extend a Class using the Class queue you do:
Class('MyExtendedClass',MyInheritClass,{
    extendedProp1: 'value of prop',
    extendedProp2: 2
})

/* But to protect the scope from misleading by reference, you can asure that MyInheritClass
is the one you want to extend by declaring it into a package and then extend it
*/
Package('org.quickcorp.mypackage1',[
    Class('MyInheritClass',{
        sourceProp:1
    }),
])

// The following code is a definition of MyExtendedClass into a different package
// org.quickcorp.package2
// extending MyInheritClass using ClassFactory to retreive the Class from the source package
// org.quickcorp.mypackage1
Package('org.quickcorp.mypackage2',[
    Class('MyExtendedClass',ClassFactory('org.quickcorp.mypackage1.MyInheritClass'),{
        extendedProp1: 'value of prop',
        extendedProp2: 2
    })
])

// this will show the number 1 (as the inherited default value of sourceProp)
console.log(New(MyExtendedClass).sourceProp)

_Crypt

With _Crypt you can encode serializable objects by a passphrase

Example (1):

 var _string = New(_Crypt,{string:'hello world',key:'some encryption md5 key'});
 console.log(_string._encrypt());
 console.log(_string._decrypt()); // decodes encrypted string to the source

Example (2):

 _Crypt.encrypt('hola mundo','12345678866');
 _Crypt.decrypt('nqCelFSiq6Wcpw==','12345678866');

GLOBAL

GLOBAL is a special QCObjects class to reach the global scope. It has a set and a get method to help you to manage the internal GLOBAL properties.

Example:

GLOBAL.set('globalProperty1','some value in global scope');
var globalProperty1 = GLOBAL.get('globalProperty1');

CONFIG

CONFIG is a smart class that manages the global settings of your application. You can get the properties either from a config.json or from the memory previously saved by a set() call.

Usage from memory:

1.- In your initial code set the CONFIG initial values:

CONFIG.set('someSettingProperty','some initial value');

2.- Then you can access it from anywhere in your code by using the get method:

var someSettingProperty = CONFIG.get('someSettingProperty');

Usage from config.json:

1.- You need to indicate first that you are using a config.json file by setting the "useConfigService" value to true

CONFIG.set('useConfigService',true); // using config.json for custom settings config

2.- Once you have set the value above QCObjects will know and look to the next CONFIG settings into the file config.json in the basePath folder of your application.

Usage from an encrypted config.json:

There is also a way to use an encrypted config.json file in order to protect your settings robots that can steal unprotected data from your web application (like API keys web crawlers).

To encrypt your json file go to https://config.qcobjects.dev, put your domain and the config.json content. The tool will encrypt your json and you can copy the encrypted content to insert it in your config.json file. QCObjects will know the data is encrypted and the process to decode the data will be transparent for you.

Dynamic CONFIG Settings

Sometimes you will need to set a value from a source that isn't static, like the ENV vars or another custom source of dynamic data. To get a value using CONFIG from a dynamic source you have to use a processor. There are common processors predefined like $ENV (only available on CLI, Collab and Node) and $config (available on all environments).

Processors are called as a meta value either into the config.json file or in the CONFIG Class.

// file: config.json
{
    "domain":"localhost",
    "env1":"$ENV(ENV1)",
    "customSettings":{
        "value1":"$config(domain)"
    }
}
let value1 = CONFIG.get("customSettings").value1;
// value1 = "localhost";

let env1 = CONFIG.get("env1");
//env1 = (environment variable ENV1)
// sets the key "api_key" of the CONFIG settings to a dynamic processor $ENV that recovers the value of API_KEY from the environment variables
CONFIG.set("api_key","$ENV(API_KEY)");

let api_key = CONFIG.get("api_key");
// api_key will contain the value of the system API_KEY environment var
// ($ENV processor returns a valid value only on Node.js , QCObjects CLI and QCObjects Collab engine)

Processor

Static Class that used to set custom processors for CONFIG.

Usage:

Processor.setProcessor(processor)

Where processor is a named function that receives the arguments of the processor

Example:

You have an environment variable called SERVICE_URL that stores a url of a service. You have to use that value in your config settings in the serviceURL value but you also need to set the host and the port settings using the parsed value of that url. To parse the value of SERVICE_URL environment variable on-demand and fill up the corresponding settings in your config.json, Your config.json file will look like this:

// file: config.json
{
    "serviceURL":"$ENV(SERVICE_URL)",
    "host":"$SERVICE_HOST(SERVICE_URL)",
    "port":"$SERVICE_PORT(SERVICE_URL)"
}

The $SERVICE_HOST and $SERVICE_PORT processors don't exist. To define them, you must use:

// execute the next code in your init.js file or before to load the CONFIG settings

let SERVICE_HOST = function (arg){
    var processorHandler = this; // to make this always works, do not use arrow functions to define your
    let serviceURL = new URL(processorHandler.processors.ENV(arg));
    return serviceURL.host;
}
let SERVICE_PORT = function (arg){
    var processorHandler = this; // to make this always works, do not use arrow functions to define your
    let serviceURL = new URL(processorHandler.processors.ENV(arg));
    return serviceURL.port;
}

Processor.setProcessor(SERVICE_HOST);
Processor.setProcessor(SERVICE_PORT);

Then you only need to set your environment variable SERVICE_URL in your shell

This is only for Unix/Linux systems

export SERVICE_URL="https://example.com:443/path-to-a-resource/"

and your settings will be dynamically loaded like this:

{
    "serviceURL":"https://example.com:443/path-to-a-resource/",
    "host":"example.com",
    "port":"443"
}

And you get the corresponding values using CONFIG.get(value)

waitUntil

waitUntil is a helper just in case you are in trouble trying to run a code before a condition is true. The code inside waitUntil will be executed once.

NOTE: This is useful in some cases but an excessive use is not recommended.

Usage:

waitUntil(()=>{
  // the code that will be executed after the condition is true
},()=>{return condition;});
// where condition is what I want to wait for

Example:

let someVar = 0;
waitUntil(()=>{
  console.log('someVar is present');
},()=>{return typeof someVar != 'undefined';});
// where condition is what I want to wait for

Package

Defines a QCObjects package and returns it.

Usage:

Package('packageName',[packageContent]);

Where packageContent is an array of QCObjects Classes. If you only pass the packageName param you will get the previously declared package content.

Example (1):

'use strict';
Package('org.quickcorp.main',[
  Class('Main',InheritClass,{
    propertyName1:'propertyValue1',
  }),
  Class('MyCustomClass',InheritClass,{
    propertyName2:'propertyValue2',
  }),
]);

Example (2):

let mainPackage = Package('org.quickcorp.main'); // this will return the previously declared content of package 'org.quickcorp.main'
// mainPackage[0] will be the Main class definition.
// This is useful for code introspection

The packages loading technique present in QCObjects is promise based and also scope oriented. You can ask if a package is loaded simply calling the Package() function passing a package name as an argument.

Import

Imports a package from another JS file

Usage:

Import (packagename,[ready],[external]);

Where packagename is the name of the package, ready is a function that will be executed after the package is loaded, and external is a boolean value that indicates if the JS file is in the same origin or it is from another external resource.

Example (1):

Import('org.quickcorp.main');

The above code will try to import a JS fila named 'org.quickcorp.main.js' from the path specified in the relativeImportPath settings value present in your CONFIG. Inside the JS file you have to define a package by using Package('org.quickcorp.main',[Class1, Class2...])

Example (2):

Import('org.quickcorp.main',function (){
  console.log('remote import is loaded');
},true);

The above code this time is trying to load the same package but using an external path defined by the remoteImportsPath setting present in your CONFIG

NOTE: In both examples above you have not use or specify the ".js" extension. This it's used by default and can't be changed by security reasons.

Export

Put a symbol (var or function) in the global scope.

Usage:

Export('name of symbol');

Example:

(()=>{
  // this is local scope
  let someFunction = (someLocalParam)=>{
    console.log(someLocalParam);
  };
  Export(someFunction); // now, someFunction is in the top level scope.
})();


// this is the top level scope
someFunction('this works');

Cast

Use the Cast method of any DOM element to get the properties of another type of object. This is useful to transform an object type to another giving more flexibility in your code.

Usage:

let resultObject = [element or QCObjects type].Cast(objectToCastFrom);

Where objectToCastFrom is an object to get the properties from and put it into the result object returned by Cast.

Example:

Class('MyOwnClass',{
  prop1:'1',
  prop2:2
});

let obj = document.createElement('div').Cast(MyOwnClass);

The above code will create a DOM object and Cast it to MyOwnClass. Because of MyOwnClass is a QCObjects type class, obj will now have a prop1 and prop2 properties, and will now be a QCObjects object instance with a body property that is a div element.

Tag

Tag is a useful function to select any DOM element using selectors. Tag will always return a list of elements, that you can map, sort, and filter as any other list.

Usage:

var listOfElements = Tag(selector);

Where selector is a DOM query selector.

Example:

<!DOCTYPE html>
<html>
    <head>
        <title>Demo</title>
        <script type="text/javascript" src="https://cdn.qcobjects.dev/QCObjects.js"></script>
    </head>
    <body>
    <div class="myselector">
    <p>Hello world</p>
    </div>
    <script>
    Ready(()=>{
      Tag('.myselector > p').map((element)=>{
        element.innerHTML = 'Hello world! How are you?';
      });
    });
    </script>
    </body>
</html>

In the above code, a paragraph element was created inside a div with a css class named myselector by html, and then is modified dynamically using the QCObjects Tag function. If you are familiar with query selector frameworks like JQuery, you will love this one.

Ready

Assign a function to run after everything is done by QCObjects and after the window.onload event. Use it to prevent 'undefined' DOM objects error.

Usage:

Ready(()=>{
  // My init code here!
});

Note that if you define dynamic components by using a HTML "component" tag, the dynamic content load will not trigger Ready events. To catch code everytime a dynamic component is loaded, use a Controller done method instead.

You will use Ready implementation mostly when you want to implement QCObjects in conjunction with another framework that needs it.

Component Class

A QCObjects class type for components.

Properties

[Component].domain Returns a string with the domain of your application. It is automatically set by QCObjects at the load time.

[Component].basePath Returns a string with the base path url of your application. It is automatically set by QCObjects at the load time.

NOTE: If you want to change the components base path, you have to use CONFIG.set('componentsBasePath','new path relative to the domain') in your init code.

[Component].templateURI Is a string representing the component template URI relative to the domain. When is set, the component will load a template and append the inner content into the body childs as a part of the DOM. To set this property, it is recommended to use the ComponentURI helper function.

[Component].tplsource Is a string representing the source where the template will be loaded. It can be "default" or "none". A value of "default" will tell QCObjects to load the template from the templateURI content. A value of "none" will tell QCObjects not to load a template from anywhere.

[Component].url Is a string representing the entire url of the component. It is automatically set by QCObjects when the component is instantiated.

[Component].name Is a string representing the name of a component. The name of a component can be any alphanumeric value that identifies the component type. It will be internally used by ComponentURI to build a normalised component template URI.

[Component].method Is a string representing a HTTP or HTTPS method. By default, every component is set to use the "GET" method. In the most of cases, you don't need to change this property.

[Component].data Is an object representing the data of the component. When QCObjects loads a template, it will get every property of data object and bind it to a template label representing the same property inside the template content between double brakets (example: {{prop1}} in the template content will represent data.prop1 in the component instance). NOTE: To refresh the data bindings it is needed to rebuild the component (see the use of [Component].rebuild() method for more details ).

[Component].reload Is a boolean value that tells QCObjects when to force reload the content of a component from the template or not. If its value is true, the template content will be replacing the current DOM childs of the component body element. If its value is false, the template content will be added after the las component body child.

[Component].cached Is a boolean value that tells QCObjects if the component needs to be cached or not. When a component is cached, the template content loaded from templateURI will be loaded once. You can set this property either as a static property of the Component Class to set the default value for every next component object instance, or setting the individual value of the property in every component definition. In a world where the performance matters, to give more flexibility to the cache behaviour is needed more than ever.

[Component].routingWay Returns a string representing the routing way. Its value can be "hash", "pathname" or "search". NOTE: To change the routingWay of every component it is recommended to use CONFIG.set('routingWay','value of a valid routing way') in your init code.

[Component].validRoutingWays Returns a list representing the valid routing ways. QCObjects uses this to internally validate the routingWay which was used to build the component routings.

[Component].routingNodes Returns a NodeList object representing the list of nodes that were loaded by the component routing builder.

[Component].routings Returns a list with the component routings built when the component was instantiated.

[Component].routingPath Returns a string representing the current routing path

[Component].routingSelected Returns an object representing the current routing of the component

[Component].subcomponents Returns a list of components that are childs of the component instance.

[Component].body Is a DOM element representing the body of the component. NOTE: Every time a component body is set, it will trigger the routings builder for this component.

Methods

[Component].set('prop',value) Sets a value for a component property.

[Component].get('prop') Returns the value of a component property

[Component].rebuild() Rebuilds the component. It will force a call for the componentLoader with this component when it's needed.

[Component].Cast(ClassName or ComponentClassName) Returns the cast of a component definition into another one. This is useful to dynamically merge components definitions.

[Component].route() Forces the component routings builder to reload the routings of the component. This will result in a rebuild call when it's needed.

[Component].fullscreen() Puts the component in fullscreen mode.

[Component].closefullscreen() Closes the fullscreen mode.

[Component].css(css object) Sets the css properties for the component.

[Component].append(component or QCObjects object) Appends a component as a child of the current component body

[Component].attachIn(selector) Attaches a current component body to any element in the given selector.

Component HTML Tag

Is a HTML tag representation of a component instance. Every declaration of a <component></component> tag will generate a related instance of a QCObjects component. While a component tag is not an instance itself, you can even define some instance properties by setting the related tag attribute when it is available.

Available attributes

Below is a list of the available attributes for a component tag

The name Attribute

<component name> Sets the name of the related component instance built by QCObjects.

Usage:
<component name="name_of_component"></component>
Example:
<!-- index.html -->
<!DOCTYPE html>
<html>
    <head>
        <title>Demo</title>
        <script type="text/javascript" src="https://cdn.qcobjects.dev/QCObjects.js"></script>
    </head>
    <body>
      <!-- this will load the contents of ./templates/main[.tplextension] file -->
      <component name="main"></component>
    </body>
</html>
The cached Attribute

<component cached> Sets the cached property if the related instance of a component.

NOTE: Only a value of "true" can be set in order to tell QCObjects that the component template content has to be cached. Any other value will be interpreted as false.

Usage:
<component name="name_of_component" cached="true"></component>
The data property tag declaration

<component data-property1 data-property2 ...> Sets a static value of a property for the data object in the component instance.

NOTE: Data property tag declaration was thought with the purpose to give some simple way to mocking a dynamic component with template assignments. Don't use it thinking it is a bidirectional way data binding. While you can get a bidirectional way behaviour accesing a data object from a component instance, it is not the same for the component tag. Data property declaration in component tags is only one way data binding because of components tree architecture.

The controllerClass Attribute

<component controllerClass> Defines a custom Controlle

changelog

[INFO] qcobjects-sdk is Installed. [INFO] Importing SDK... qcobjects-sdk [INFO] qcobjects-sdk is Installed. [INFO] qcobjects-sdk/js/org.qcobjects.models.js is Installed. [INFO] qcobjects-sdk/js/org.qcobjects.components.js is Installed. [INFO] qcobjects-sdk/js/org.qcobjects.controllers.js is Installed. [INFO] qcobjects-sdk/js/org.qcobjects.views.js is Installed. [INFO] qcobjects-sdk/js/org.qcobjects.effects.js is Installed. [INFO] qcobjects-sdk/js/org.qcobjects.modal.effects.js is Installed. [INFO] qcobjects-sdk/js/org.qcobjects.tools.canvas.js is Installed. [INFO] qcobjects-sdk/js/org.qcobjects.tools.layouts.js is Installed. [INFO] qcobjects-sdk/js/org.qcobjects.cloud.auth.session.usertoken.js is Installed. [INFO] qcobjects-sdk/js/org.qcobjects.cloud.auth.session.data.js is Installed. [INFO] Auto discover is disabled [INFO] Dependencies loaded [INFO] Version1.1 version 1.1 Version1.2 log new Version1.3 serviceLoader Version1.4 static initial data for components Version1.4.1 fix innerHTML Version1.4.2 now tag <component> supports custom componentClass attribute v0.0.2 New Version v0.0.2 v2.0.0 2.0.0 v2.1.0 2.1.0 v2.1.1 2.1.1 v2.1.10 2.1.10 v2.1.11 2.1.11 v2.1.119 2.1.119 v2.1.12 2.1.12 v2.1.120 2.1.120 v2.1.121 2.1.121 v2.1.122 2.1.122 v2.1.123 2.1.123 v2.1.124 2.1.124 v2.1.125 2.1.125 v2.1.126 2.1.126 v2.1.127 2.1.127 v2.1.128 2.1.128 v2.1.129 2.1.129 v2.1.13 2.1.13 v2.1.130 2.1.130 v2.1.131 2.1.131 v2.1.132 2.1.132 v2.1.133 2.1.133 v2.1.134 2.1.134 v2.1.135 2.1.135 v2.1.136 2.1.136 v2.1.137 2.1.137 v2.1.138 2.1.138 v2.1.139 2.1.139 v2.1.14 2.1.14 v2.1.140 2.1.140 v2.1.141 2.1.141 v2.1.142 2.1.142 v2.1.143 2.1.143 v2.1.144 2.1.144 v2.1.145 2.1.145 v2.1.146 2.1.146 v2.1.147 2.1.147 v2.1.148 2.1.148 v2.1.149 2.1.149 v2.1.15 2.1.15 v2.1.150 2.1.150 v2.1.151 2.1.151 v2.1.152 2.1.152 v2.1.153 2.1.153 v2.1.154 2.1.154 v2.1.155 2.1.155 v2.1.156 2.1.156 v2.1.157 2.1.157 v2.1.158 2.1.158 v2.1.159 2.1.159 v2.1.16 2.1.16 v2.1.160 2.1.160 v2.1.161 2.1.161 v2.1.162 2.1.162 v2.1.163 2.1.163 v2.1.164 2.1.164 v2.1.165 2.1.165 v2.1.166 2.1.166 v2.1.167 2.1.167 v2.1.168 2.1.168 v2.1.169 2.1.169 v2.1.17 2.1.17 v2.1.170 2.1.170 v2.1.171 2.1.171 v2.1.172 2.1.172 v2.1.173 2.1.173 v2.1.174 2.1.174 v2.1.175 2.1.175 v2.1.176 2.1.176 v2.1.177 2.1.177 v2.1.178 2.1.178 v2.1.179 2.1.179 v2.1.180 2.1.180 v2.1.181 2.1.181 v2.1.182 2.1.182 v2.1.183 2.1.183 v2.1.184 2.1.184 v2.1.185 2.1.185 v2.1.186 2.1.186 v2.1.187 2.1.187 v2.1.188 2.1.188 v2.1.189 2.1.189 v2.1.190 2.1.190 v2.1.191 2.1.191 v2.1.192 2.1.192 v2.1.193 2.1.193 v2.1.194 2.1.194 v2.1.195 2.1.195 v2.1.196 2.1.196 v2.1.197 2.1.197 v2.1.198 2.1.198 v2.1.199 2.1.199 v2.1.2 2.1.2 v2.1.200 2.1.200 v2.1.201 2.1.201 v2.1.202 2.1.202 v2.1.203 2.1.203 v2.1.204 2.1.204 v2.1.205 2.1.205 v2.1.206 2.1.206 v2.1.207 2.1.207 v2.1.208 2.1.208 v2.1.209 2.1.209 v2.1.210 2.1.210 v2.1.211 2.1.211 v2.1.212 2.1.212 v2.1.213 2.1.213 v2.1.214 2.1.214 v2.1.215 2.1.215 v2.1.216 2.1.216 v2.1.217 2.1.217 v2.1.218 2.1.218 v2.1.220 2.1.220 v2.1.221 2.1.221 v2.1.222 2.1.222 v2.1.223 2.1.223 v2.1.224 2.1.224 v2.1.225 2.1.225 v2.1.226 2.1.226 v2.1.227 2.1.227 v2.1.228 2.1.228 v2.1.229 2.1.229 v2.1.230 adding scripts for git version v2.1.231 Improving DDO v2.1.232 adding empty path option in findPackageNodePath v2.1.233 sync dependencies v2.1.234 adding sync command v2.1.235 qcobjects-cli 0.1.23 fixed to work on Windows OS v2.1.236 README.md: Installing QCObjects on Windows OS v2.1.237 README.md: Using latest non-minified version from jsDelivr CDN v2.1.238 index.html forcibly clear cache for this page v2.1.239 sw.js updating sw version v2.1.240 sw.js fixing v2.1.241 fixing invalid command message and set logger.debugEnabled=false v2.1.242 QCObjects.js: fixing secretKey and domain v2.1.243 QCObjects.js: fixing component localStorage cache index v2.1.244 regular expressions in frontend routing paths v2.1.245 data variable replacement for any occurrences in templates v2.1.246 fix routes v2.1.247 QCObjects 2019 Year-end video embed v2.1.248 sw.js change sw version v2.1.249 Scroll management v2.1.250 PWA Adopted Features v2.1.251 fix lazy load images for components v2.1.252 replacing subelements return value to a standard Array v2.1.253 including projectPath and basePath to find packages v2.1.254 including relativeImportPath to find packages v2.1.255 projectPath v2.1.256 body null when start microservice v2.1.257 beautify code v2.1.258 infoEnabled=false v2.1.259 default get method for BackendMicroservice v2.1.260 ClassFactory improved to locate the Class from Package when it is asked for v2.1.261 using ClassFactory into the super method to improve the reference of Class definitions for inherited Classes v2.1.262 remove package script after loading v2.1.263 using ClassFactory for componentClass from <component >html tag v2.1.264 scrollIntoHash into the component v2.1.265 scrollIntoHash into the component v2.1.266 scrollIntoHash into the component v2.1.267 CONFIG: default value in get method v2.1.268 scrollIntoHash: config settings for scrollable hash v2.1.269 scrollIntoHash auto by default v2.1.270 render function for every Element v2.1.271 render function for every Element v2.1.272 fixing path for images in README.md v2.1.273 CastProps now binds also functions v2.1.274 improving path for node packages finder v2.1.275 debug v2.1.276 i18n for components v2.1.277 fix for i18n for components v2.1.278 fix 18n for components v2.1.279 fix 18n for components v2.1.280 improving i18n for components v2.1.281 catching i18n at initial process of routing into components v2.1.282 fix i18n to not interfer with events v2.1.283 fix i18n to not interfer with events v2.1.284 improving performance for i18n in components v2.1.285 parsedAssignmentText fix v2.1.286 parsedAssignmentText fix v2.1.287 Component cacheIndex readonly property v2.1.288 namespace for Packages v2.1.289 hack to prevent pre-population of __instanceID v2.1.290 hack to prevent pre-population of __instanceID v2.1.291 sw v2.1.292 isQCObjectsClass && isQCObjects_Object helper functions v2.1.293 hack to prevent pre-population of classType into the object instance v2.1.294 hack to prevent pre-population of classType into the object instance v2.1.295 _classType can be either in the Class definition as in the __definition subinstance v2.1.296 lazyLoadImages and scrollIntoHash as component methods v2.1.297 runComponentHelpers as a component method v2.1.298 TransitionEffect Class for using with effectClass attribute in component HTML tag v2.1.299 README.md install macOS and unpkg cdn v2.1.3 2.1.3 v2.1.300 README.md install macOS and unpkg cdn v2.1.301 README.md install macOS and unpkg cdn v2.1.302 github sponsors button in repo v2.1.303 package.json change homepage and tags v2.1.304 global.get('PackagesList') returns all the valid declared packages with QCObjects classes v2.1.305 global.get('PackagesList') returns all the valid declared packages with QCObjects classes v2.1.306 ClassesList && ClassNamesList v2.1.307 ClassesList && ClassesNameList v2.1.308 global.GLOBAL hack v2.1.309 global.PackagesNameList global.PackagesList global.ClassesList global.ClassesNameList v2.1.310 global.PackagesNameList global.PackagesList global.ClassesList global.ClassesNameList v2.1.311 ignore certificates on .gitignore v2.1.312 openapi.json && openapi.yaml paths in config.json template v2.1.313 fix install_qcobjects for ubuntu v2.1.314 fix serviceLoaderInNode http2 post v2.1.315 controllerClass attribute into the routing element v2.1.316 logger with colors v2.1.317  [INFO] logger with colors v2.1.318 cors v2.1.319 fix cors in BackendMicroservice v2.1.320 fix cors in BackendMicroservice v2.1.322 fix serviceLoader when there is no data under node systems v2.1.323 fix serviceLoader when there is no data under node systems v2.1.324 fix i18n to get the messages from global v2.1.325 i18n v2.1.326 i18n v2.1.327 i18n v2.1.328 i18n v2.1.329 i18n promise oriented v2.1.330 fix conflicting files v2.1.331 fix conflicting files v2.1.332 fix conflicting files v2.1.333 optimizing the loading of components v2.1.334 optimizing the loading of components v2.1.335 optimizing the loading of components v2.1.336 optimizing the loading of components v2.1.337 optimizing the loading of components v2.1.338 fix dependencies v2.1.339 fix dependencies v2.1.340 fix dependencies v2.1.341 fix dependencies v2.1.342 fixing README.md v2.1.343 fix dependencies v2.1.344 updating keywords v2.1.345 updating keywords v2.1.346 fix typo v2.1.347 code integrity v2.1.348 code integrity v2.1.349 code integrity v2.1.350 code integrity v2.1.351 code integrity v2.1.352 code integrity v2.1.353 eslint v2.1.354 eslint v2.1.355 eslint v2.1.356 eslint v2.1.357 eslint v2.1.358 eslint v2.1.359 eslint v2.1.360 eslint v2.1.361 eslint v2.1.362 version script v2.1.363 github action publish v2.1.364 github action publish v2.1.365 github action publish v2.1.366 github action publish v2.1.367 github action publish v2.1.368 github action publish v2.1.369 github action publish v2.1.370 github action publish v2.1.371 github action publish v2.1.372 github action publish v2.1.373 github action publish v2.1.374 github action publish v2.1.375 github action publish v2.1.376 github action publish v2.1.377 github action publish v2.1.378 github actions integration v2.1.379 eslint v2.1.380 eslint v2.1.381 fix require expression v2.1.382 fix require expression v2.1.383 normalizing the use of module.exports v2.1.384 code integrity v2.1.385 returning global when module.exports v2.1.386 changing node version of Dockerfile to latest v2.1.387 Dockerfile uses lts of node v2.1.388 setting this Dockerfile as the official image of QCObjects v2.1.389 description v2.1.390 install mac global links v2.1.391 shadowed components v2.1.392 shadowed components v2.1.393 shadowed components v2.1.394 shadowed components v2.1.395 shadowed components v2.1.396 shadowed components v2.1.397 shadowed components v2.1.398 shadowed components v2.1.399 fixing isQCObjects_Class && shadowed components slots v2.1.4 2.1.4 v2.1.400 shadowed components slots v2.1.401 slot template parsing for shadowed components v2.1.402 fix parseTemplate v2.1.403 fix tmp shadowed container for slots v2.1.404 fix tmp shadowed container for slots v2.1.405 recursive shadowed components v2.1.406 adding some good info to README.md v2.1.407 fixing border cases of routing v2.1.408 Export DOMCreateElement v2.1.409 fix Export on node v2.1.410 fixing Export and _Crypt on border cases v2.1.411 fix v2.1.412 some adaptations for use with electron v2.1.413 some adaptations for use with electron v2.1.414 some adaptations for use with electron v2.1.415 fix custom component class when name is not defined in the component tag v2.1.416 fix componentURI when no name is present v2.1.417 fix when no name is present in component v2.1.418 using shadowed property from definition when is not present in the tag v2.1.419 lazy loading for images inside a shadowed component v2.1.420 fix breaking code when no extending a controller from Controller v2.1.421 including cdnjs instructions in README file v2.1.422 fix install mac v2.1.423 fix http2 request call in serviceLoader v2.1.424 _reroute only works in browser mode v2.1.425 reroute only works in browser mode v2.1.426 Math functions v2.1.427 dynamic settings v2.1.428 dynamic settings v2.1.429 dynamic settings v2.1.430 dynamic settings v2.1.431 dynamic settings v2.1.432 dynamic settings v2.1.433 dynamic settings v2.1.434 dynamic settings v2.1.435 New Version v2.1.435 v2.1.445 New Version v2.1.445 v2.1.446 New Version v2.1.446 v2.1.7 version 2.1.7 v2.1.8 2.1.8 v2.1.9 2.1.9 v2.2.446 New Version v2.2.446 v2.2.447 New Version v2.2.447 v2.2.448 Inclussion of CHANGELOG file v2.2.449 Inclussion of CHANGELOG file v2.2.450 maskable icon attribute for manifest v2.2.451 fix routingPaths global setting to be right pointed in global scope using top v2.2.452 fix routingPaths global setting to be right pointed in global scope using top v2.2.453 README.md change references to http by https links v2.2.454 README.md including Effect and Timer explanation v2.2.455 README-es.md v2.2.457 Added Spanish README file README-es.md v2.2.458 Added Spanish README file README-es.md v2.2.459 download button in webpage qcobjects.dev v2.2.460 download button in webpage qcobjects.dev v2.2.461 keywords v2.2.462 keywords v2.2.463 keywords v2.2.465 keywords v2.2.466 keywords v2.2.467 keywords v2.2.468 keywords v2.2.469 fix html v2.2.470 fix html v2.2.471 keywords v2.2.473 README.pdf v2.2.475 README.pdf && README-es.pdf v2.2.477 i18n & scrollIntoHash for shadowed components v2.2.478 replacing for by map in the routing of components v2.2.481 _validroutings refactor v2.2.483 routingParams for components in frontend v2.2.484 optimizing the routingPath generation algorithm v2.2.486 optional assign routingParams values to template v2.2.487 optional assign routingParams values to template v2.2.488 optional assign routingParams values to template v2.2.489 optional assign routingParams values to template v2.2.490 dev website 2020 shadowed components appbar v2.2.491 dev website 2020 shadowed components appbar v2.2.492 dev website 2020 shadowed components appbar v2.2.493 sw files for website 2020 docs v2.2.494 download button for website 2020 docs v2.2.495 spanish language button for website 2020 docs v2.2.496 spanish language button for website 2020 docs v2.2.497 spanish language button for website 2020 docs v2.2.498 spanish language button for website 2020 docs v2.2.499 spanish language button for website 2020 docs v2.2.500 spanish language button for website 2020 docs v2.2.503 mapping scrollIntoHash v2.2.504 mapping scrollIntoHash v2.2.505 website2020 powershell v2.2.506 Install OpenSSL & Certbot for Dockerfile v2.2.507 Install OpenSSL & Certbot for Dockerfile v2.2.508 Install QCObjects Service in Docker v2.2.509 Install QCObjects Service in Docker v2.2.510 Install QCObjects Service in Docker v2.2.511 Install QCObjects Service in Docker v2.2.512 Install QCObjects Service in Docker v2.2.513 Install QCObjects Service in Docker v2.2.514 Install QCObjects Service in Docker v2.2.515 Install QCObjects Service in Docker v2.2.516 Install QCObjects Service in Docker v2.2.517 Install QCObjects Service in Docker v2.2.521 addComponentHelper v2.2.523 fix processObject CONFIG v2.2.524 fix processObject CONFIG v2.2.525 fix processObject CONFIG v2.2.526 f [INFO] ix processObject CONFIG v2.2.527 inline template source for components v2.2.528 internal renaming conventions v2.2.530 sitemap v2.2.531 sitemap v2.2.532 page title v2.2.533 page description v2.2.534 including keywords in readme v2.2.535 including keywords in readme v2.2.536 including keywords in readme v2.2.537 including keywords in readme v2.2.538 including keywords in readme v2.2.539 including keywords in readme v2.2.540 including keywords in readme v2.2.541 fix reload behaviour v2.2.542 fix reload behaviour v2.2.543 fix css modern v2.2.544 fix css modern v2.2.545 sw cache for 1 hour v2.2.546 sw cache for 1 hour v2.2.547 sw cache for 1 hour v2.2.548 sw cache for 1 hour v2.2.549 header blank for some routes v2.2.550 header blank for some routes v2.2.551 fix basePath v2.2.552 fix basePath v2.2.553 video & testimonials v2.2.554 video & testimonials v2.2.555 video & testimonials v2.2.556 video & testimonials v2.2.557 video & testimonials v2.2.558 video & testimonials v2.2.559 video & testimonials v2.2.560 video & testimonials v2.2.561 video & testimonials v2.2.562 video & testimonials v2.2.563 video & testimonials v2.2.564 video & testimonials v2.2.565 video & testimonials v2.2.566 video & testimonials v2.2.567 video & testimonials v2.2.568 video & testimonials v2.2.569 video & testimonials v2.2.570 video & testimonials v2.2.571 README QCObjects name meaning v2.2.572 README QCObjects name meaning v2.2.573 tags v2.2.574 tags v2.2.575 preventing undefined name v2.2.576 preventing undefined name v2.2.577 preventing undefined name v2.2.578 preventing undefined name v2.2.579 preventing undefined name v2.2.580 preventing undefined name v2.2.581 preventing undefined name v2.2.582 preventing undefined name v2.2.583 preventing undefined name v2.2.584 preventing undefined name v2.2.585 preventing undefined name v2.2.586 preventing undefined name v2.2.587 list function for strings v2.2.588 list function for strings v2.2.589 deploy to netlify v2.2.591 change of the behaviour in object creation v2.2.592 fix Maximum call stack size exceeded v2.2.593 fix Maximum call stack size exceeded v2.2.594 fix Maximum call stack size exceeded v2.2.595 fix Maximum call stack size exceeded v2.2.596 fix Maximum call stack size exceeded v2.2.597 fix Maximum call stack size exceeded v2.2.598 fix Maximum call stack size exceeded v2.2.599 video comercial v2.2.600 video comercial v2.2.601 video comercial v2.2.602 video comercial v2.2.603 video comercial v2.2.604 video comercial v2.2.605 video comercial v2.2.606 translating find method from Object to Element v2.2.607 translating find method from Object to Element v2.2.608 doc examples apps v2.2.609 doc examples apps v2.2.610 doc examples apps v2.2.611 download direct link from github v2.2.612 gtag v2.2.613 gtag v2.2.614 Template Processors for DefaultTemplateHandler v2.2.615 shadowed code snippet card v2.2.616 shadowed code snippet card v2.2.617 shadowed code snippet card v2.2.618 shadowed code snippet card v2.2.619 shadowed code snippet card v2.2.620 shadowed code snippet card v2.2.621 code snippet v2.2.622 code snippet v2.2.623 examples v2.2.624 examples v2.2.625 splash screen app template v2.2.626 splash screen app template v2.2.627 link for docs v2.2.628 tpl extension in routings v2.2.629 tpl extension in routings v2.2.630 internal naming conventions v2.2.631 Version v2.3 release v2.3.1 Version v2.3 release v2.3.10 layout portrait & landscape processor v2.3.11 layout portrait & landscape processor v2.3.12 layout portrait & landscape processor v2.3.14 componentLoader support for node v2.3.15 componentLoader support for node v2.3.16 componentLoader support for node v2.3.17 componentLoader support for node v2.3.18 componentLoader support for node v2.3.19 use of request npm module has been deprecated and replaced by http and https respectively v2.3.2 v2.3 release v2.3.20 use of request npm module has been deprecated and replaced by http and https respectively v2.3.21 use of request npm module has been deprecated and replaced by http and https respectively v2.3.22 use of request npm module has been deprecated and replaced by http and https respectively v2.3.24 full compatibility with top-level await v2.3.26 support for RHEL8 & Raspberry PI Raspbian 9 v2.3.27 Allow to register multiple widgets v2.3.28 serviceClass and response-to attributes to allow components to load a service instance atomatically if needed v2.3.29 serviceClass and response-to attributes to allow components to load a service instance atomatically if needed v2.3.3 v2.3 release v2.3.31 Security improvements v2.3.32 Security improvements v2.3.35 freezing Object now is optional v2.3.36 freezing Object now is optional v2.3.37 secureObjects default value to false to prevent conflicts with ESLint v2.3.38 secureObjects default value to false to prevent conflicts with ESLint v2.3.4 v2.3 release v2.3.40 improving BackendMicroservice performance v2.3.41 new getDocumentLayout function, improved performance of BackendMicroservice, secureObjects is now false by default v2.3.43 Performance improvement for rendering process v2.3.44 Performance improvement for rendering process v2.3.45 shortCode & uniqueId helpers to create unique identifiers v2.3.47 some security fixes, accurate name of objects v2.3.49 add support for Node to ComplexStorageCache v2.3.5 v2.3 release v2.3.50 add support for Node to ComplexStorageCache v2.3.53 add support for Node to ComplexStorageCache v2.3.54 fix code integrity v2.3.56 Improvements to Transition Effects behaviour, add is_a and getType for dynamic type management v2.3.57 Improvements to Transition Effects behaviour, add is_a and getType for dynamic type management v2.3.58 Improvements to Transition Effects behaviour, add is_a and getType for dynamic type management v2.3.59 Improvements to Transition Effects behaviour, add is_a and getType for dynamic type management v2.3.6 fix serviceLoader in backend headers v2.3.61 bugfix, Installation scripts for Ubuntu, RHEL8 and RaspberryPi now point urls to cdn v2.3.63 Added parent accessor for components attached in the components stack v2.3.64 allow serviceLoader to load local and mockup services v2.3.65 allow serviceLoader to load local and mockup services v2.3.66 sync v2.3.66-lts v2.3.65-lts v2.3.67-lts URL fallback to request url for old node versions v2.3.68 URL fallback to request url for old node versions v2.3.69 fix URL compatibility to allow serviceLoader work well with node 8 v2.3.7 fix serviceLoader in backend headers v2.3.71 Securing deployment pipelines v2.3.72 Securing deployment pipelines v2.3.73 Securing deployment pipelines v2.3.75 Sync v2.3 v2.3.9 layout portrait & landscape processor v2.4.1-beta New Version v2.4.1-beta v2.4.10-beta unrestrict method overriding for compatibility purpose with v2.3 v2.4.11-beta unrestrict method overriding for compatibility purpose with v2.3 v2.4.13-beta unrestricted method overriding for compatibility purpose with v2.3 v2.4.14-beta unrestricted method o [INFO] verriding for compatibility purpose with v2.3 v2.4.15-beta unrestricted method overriding for compatibility purpose with v2.3 v2.4.16-beta recursive promise oriented re-routing v2.4.17-beta promise re-routing v2.4.19-beta workflows limited to branches v2.4.20 Synced Version v2.4.20 v2.4.20-beta workflows limited to branches v2.4.23-beta sync beta version v2.4.25-beta sdk path to v2.4 v2.4.26-beta sdk path to v2.4 v2.4.28-beta upgrade node v2.4.29-beta border cases minor fixes v2.4.30-beta adding RegisterClass function v2.4.32 Synced Version v2.4.32 v2.4.32-beta sdk load improvement v2.4.33 front-end routing improvements v2.4.34 front-end routing improvements v2.4.35 fix hierarchy v2.4.36 fix hierarchy v2.4.37 fix tests v2.4.38 fix register class v2.4.39 adding subcomponents decomposition to Component class v2.4.4-beta v2.4-beta version v2.4.40 recursive routing algorithm improvements v2.4.41 enable all attribute names for component widgets v2.4.42 adding minor fixes v2.4.5-beta v2.4-beta version v2.4.8-beta Added Tests for QCObjects Global Features and ClassFactory v2.4.9-beta allow new only to be called once for every object instance 

Changelog

This is an automatic Changelog history of versions generated using the command: qcobjects v-changelog > CHANGELOG.md

Version1 -> Version1.1

- version 1.1

Version1 -> Version1.2

- log new

Version1 -> Version1.3

- serviceLoader

Version1 -> Version1.4

- fix innerHTML
- now tag <component> supports custom componentClass attribute
- static initial data for components

v0 -> v0.0

- New Version

v2 -> v2.0

-

v2 -> v2.1

- CONFIG: default value in get method
- ClassFactory improved to locate the Class from Package when it is asked for
- ClassesList && ClassNamesList
- ClassesList && ClassesNameList
- Component cacheIndex readonly property
- Dockerfile uses lts of node
- Export _DOMCreateElement
- Improving DDO
- Math functions
- New Version
- PWA Adopted Features
- QCObjects 2019 Year-end video embed
- QCObjects.js: fixing component localStorage cache index
- QCObjects.js: fixing secretKey and domain
- README.md install macOS and unpkg cdn
- README.md: Installing QCObjects on Windows OS
- README.md: Using latest non-minified version from jsDelivr CDN
- Scroll management
- TransitionEffect Class for using with effectClass attribute in component HTML tag
- _CastProps now binds also functions
- __classType can be either in the Class definition as __definition subinstance
- _reroute_ only works in browser mode
- adding empty path option in findPackageNodePath
- adding scripts for git version
- adding some good info to README.md
- adding sync command
- beautify code
- body null when start microservice
- catching i18n at initial process of routing into components
- changing node version of Dockerfile to latest
- code integrity
- controllerClass attribute into the routing element
- cors
- data variable replacement for any occurrences in templates
- debug
- default get method for BackendMicroservice
- description
- dynamic settings
- eslint
- fix
- fix 18n for components
- fix Export on node
- fix breaking code when no extending a controller from Controller
- fix componentURI when no name is present
- fix conflicting files
- fix cors in BackendMicroservice
- fix custom component class when name is not defined in the tag
- fix dependencies
- fix for i18n components
- fix http2 request call in serviceLoader
- fix i18n to get the messages from global
- fix i18n to not interfer with events
- fix install mac
- fix install_qcobjects for ubuntu
- fix lazy load images for components
- fix parseTemplate
- fix require expression
- fix routes
- fix serviceLoader when there is no data under node systems
- fix serviceLoaderInNode http2 post
- fix tmp shadowed container for slots
- fix typo
- fix when no name is present in component
- fixing Export and _Crypt on border cases
- fixing README.md
- fixing border cases of routing
- fixing invalid command message and set logger.debugEnabled=false
- fixing isQCObjects_Class && shadowed components slots
- fixing path for images in README.md
- github action publish
- github actions integration
- github sponsors button in repo
- global.PackagesNameList global.PackagesList global.ClassesList global.ClassesNameList
- global._GLOBAL hack
- global.get('PackagesList') returns all the valid declared packages with QCObjects classes
- hack to prevent pre-population of __classType into the object instance
- hack to prevent pre-population of __instanceID
- i18n
- i18n for components
- i18n promise oriented
- ignore certificates on .gitignore
- improving i18n for components
- improving path for node packages finder
- improving performance for i18n in components
- including cdnjs instructions in README file
- including projectPath and basePath to find packages
- including relativeImportPath to find packages
- index.html forcibly clear cache for this page
- infoEnabled=false
- install mac global links
- isQCObjects_Class && isQCObjects_Object helper functions
- lazy loading for images inside a shadowed component
- lazyLoadImages and scrollIntoHash as component methods
- logger with colors
- namespace for Packages
- normalizing the use of module.exports
- openapi.json && openapi.yaml paths in config.json template
- optimizing the loading of components
- package.json change homepage and tags
- parsedAssignmentText fix
- projectPath
- qcobjects-cli 0.1.23 fixed to work on Windows OS
- recursive shadowed components
- regular expressions in frontend routing paths
- remove package script after loading
- render function for every Element
- replacing subelements return value to a standard Array
- returning global when module.exports
- runComponentHelpers as a component method
- scrollIntoHash auto by default
- scrollIntoHash into the component
- scrollIntoHash: config settings for scrollable hash
- setting this Dockerfile as the official image of QCObjects
- shadowed components
- shadowed components slots
- slot template parsing for shadowed components
- some adaptations for use with electron
- sw
- sw.js change sw version
- sw.js fixing
- sw.js updating sw version
- sync dependencies
- updating keywords
- using ClassFactory for componentClass from <component >html tag
- using ClassFactory into the _super_ method to improve reference of Class definitions for inherited Classes
- using shadowed property from definition when is not present in the tag
- version 2.1.7
- version script

v2 -> v2.2

- Added Spanish README file README-es.md
- Inclussion of CHANGELOG file
- Install OpenSSL & Certbot for Dockerfile
- Install QCObjects Service in Docker
- New Version
- README QCObjects name meaning
- README-es.md
- README.md change references to http by https links
- README.md including Effect and Timer explanation
- README.pdf
- README.pdf && README-es.pdf
- Template Processors for DefaultTemplateHandler
- Version v2.3 release
- __valid_routings__ refactor
- addComponentHelper
- change of the behaviour in object creation
- code snippet
- deploy to netlify
- dev website 2020 shadowed components appbar
- doc examples apps
- download button for website 2020 docs
- download button in webpage qcobjects.dev
- download direct link from github
- examples
- fix Maximum call stack size exceeded
- fix basePath
- fix css modern
- fix html
- fix processObject CONFIG
- fix reload behaviour
- fix routingPaths global setting to be right pointed in scope using _top
- gtag
- header blank for some routes
- i18n & scrollIntoHash for shadowed components
- including keywords in readme
- inline template source for components
- internal naming conventions
- internal renaming conventions
- keywords
- link for docs
- list function for strings
- mapping scrollIntoHash
- maskable icon attribute for manifest
- optimizing the routingPath generation algorithm
- optional assign routingParams values to template
- page description
- page title
- preventing undefined name
- replacing for by map in the routing of components
- routingParams for components in frontend
- shadowed code snippet card
- sitemap
- spanish language button for website 2020 docs
- splash screen app template
- sw cache for 1 hour
- sw files for website 2020 docs
- tags
- tpl extension in routings
- translating find method from Object to Element
- video & testimonials
- video comercial
- website2020 powershell

v2 -> v2.3

- Added __parent__ accessor for components attached in the stack
- Allow to register multiple widgets
- Improvements to Transition Effects behaviour, add is_a and __getType__ for dynamic type management
- Performance improvement for rendering process
- Securing deployment pipelines
- Security improvements
- Sync v2.3
- URL fallback to request url for old node versions
- Version v2.3 release
- add support for Node to ComplexStorageCache
- allow serviceLoader to load local and mockup services
- bugfix, Installation scripts for Ubuntu, RHEL8 and RaspberryPi now point urls to cdn
- componentLoader support for node
- fix URL compatibility to allow serviceLoader work well with node 8
- fix code integrity
- fix serviceLoader in backend headers
- freezing Object now is optional
- full compatibility with top-level await
- improving BackendMicroservice performance
- layout portrait & landscape processor
- new getDocumentLayout function, improved performance of BackendMicroservice, secureObjects is now false by default
- secureObjects default value to false prevent conflicts with ESLint
- serviceClass and response-to attributes to allow components load a service instance atomatically if needed
- shortCode & uniqueId helpers to create unique identifiers
- some security fixes, accurate name of objects
- support for RHEL8 & Raspberry PI Raspbian 9
- sync
- use of request npm module has been deprecated and replaced by http https respectively
- v2.3 release
- v2.3.65-lts

v2 -> v2.4

- Added Tests for QCObjects Global Features and ClassFactory
- New Version
- Synced Version
- adding RegisterClass function
- adding minor fixes
- adding subcomponents decomposition to Component class
- allow _new_ only to be called once for every object instance
- border cases minor fixes
- enable all attribute names for component widgets
- fix hierarchy
- fix register class
- fix tests
- front-end routing improvements
- promise re-routing
- recursive promise oriented re-routing
- recursive routing algorithm improvements
- sdk load improvement
- sdk path to v2.4
- sync beta version
- unrestrict method overriding for compatibility purpose with v2.3
- unrestricted method overriding for compatibility purpose with v2.3
- upgrade node
- v2.4-beta version
- workflows limited to branches