CH5 - Creston Components library (CrComLib) - Getting Started
Continuous Integration and Deployment Status
DEV NIGHTLY - latest-dev | Status |
---|
Build Pipeline | |
Release Pipeline | |
NPM | |
MASTER-QE - latest-qe | Status |
---|
Build Pipeline | |
Release Pipeline | |
NPM | |
See Crestron Labs for documentation
http://www.crestronlabs.com/forumdisplay.php?229-Crestron-HTML5-Lab
Generated folders
- build_bundles/module_type - contains files generated by webpack (and the typescript compiler for the esm modules)
- compiled_bundles/module_type - contains files generated by the typescript compiler (tsc)
- docs/html
Where module_type is:
- umd - UMD (contains CommonJs, AMD, and also creates a global property in the window object).
- cjs - CommonJs
- esm - ES Modules, ES6.
- amd - Asynchronous Module Definition
For ch5 components
Ch5 components will display additional info in the browser console if they have a debug attribute defined. For example:
<ch5-button debug label="Btn1"></ch5-button>
For ch5 custom attributes (dta-ch5-...)
Additional information will be displayed in the browser console if the element has a debug attribute. For example:
<div debug data-ch5-show="a_signal">Hello</div>
For the bridge-related functions/methods
In order to display additional information, you must first enable this using the methods from Ch5Debug:
- getConfig - Returns the current configuration: all keys that can be set and their current value. A key enables debug info
for a method/function
- loadConfig(cfg) - Loads a new config (replaces the previous one)
- enableAll() - Enables all keys. Will display all debug info available. (The debug info that uses Ch5Debug, the info
from ch5 components, and custom attributes will not be affected)
- disablesAll() - Disables all keys
- setConfigKeyValue(key:string, value:boolean) - Changes the value of a key
Using the library
When using a no-ce build (a build intended for browsers that do not support customElements)
When importing the library in a webpage, two additional webcomponentsjs
scripts should be included before the library:
- The first one for the polyfills used by browsers that do not yet support customElements or that have partial support. For example, from CDN:
<script src="https://unpkg.com/@webcomponents/webcomponentsjs@2.1.3/webcomponents-loader.js" type="text/javascript" charset="utf-8"></script>
- The second one for allowing browsers that support customElements to also be able to use them from ES5. For example, from CDN:
<script src="https://unpkg.com/@webcomponents/webcomponentsjs@2.1.3/custom-elements-es5-adapter.js" type="text/javascript" charset="utf-8"></script>
When using a build that does not have a 'no-ce' ending for the foldername
Browsers that do not support customElements will not be able to use the library
For more information, please consult the DEVELOPER.README