CHTML Configuration

The Chtml API relies on a certain params object to work. This object comes preset with default values, but it can be modified to further customize CHTML to a usecase.

import {params} from '@web-native-js/chtml';

Below are the parameters and what they do:

// Sets the rendering environment
env: '', // server | client
// The family of attributes used in markup
attrMap: {
// The "data-tree" attribute
hint: 'data-tree',
// The "data-namespace" attribute
namespace: 'data-namespace',
// A component's "data-role" attribute
superrole: 'data-role',
// A node's "data-role" attribute
subrole: 'data-role',
// The attribute for defining the CHTML template elements
bundle: 'chtml-bundle',
// Selectors for fidning CHTML's special elements
tagMap: {
// The selector for a component's JSEN script element.
// <script type="text/scoped-js>...</script>
jsen: 'script[type="text/scoped-js"]',
// The selector for the document's bundle elements.
// The "is" attribute must also correspond to the params.attrMap.bundle settign above
// <template is="chtml-bundle>...</template>
bundle: 'template[is="chtml-bundle"]',
// The selector for the CHTML import element
// <chtml-import></chtml-import>
import: 'chtml-import',
// A componet's nodeList property
// component.tree.nodeName
// // A component's model property
// The component.bind() method relies on tjis property
// Specifies whether to remove a component's JSEM script element from the DOM while
// an instance remains mounted on the component.
// When removed, the script element is returned back on unmouting the component instance

The object above is used globally across modules in CHTML. It is also possible to override these values at the component level. The params object passed to instantiate a component is used to achieve this as it would be inheriting from thie global params object.

let component = new Chtml(el, {treeProperty: 'nodes'});
let node1 = Reflex.get(component.nodes, 'node1');
let node2 = component.get('node2');