The standard build gives you CHTML out of the box - the fully-featured edition of the library. You can embed it as a script tag on your HTML page. Or you install it via npm.
<script src="https://unpkg.com/@web-native-js/chtml/dist/main.js"></script><script>// The above tag loads CHTML into a global "WebNative" object.const Chtml = window.WebNative.Chtml;</script>
$ npm i -g npm$ npm i --save @web-native-js/chtml
To use CHTML for rendering on the browser, import the default export from the package. The imported module comes with CHTML automatically initialized for the browser environment.
To use CHTML for server-side rendering, you'll import the
Chtml.js class directly. You'll also need to install the jsdom library - the only required dependency for this purpose. jsdom will help us emulate the "window" environment for CHTML here on the server.
// Import the class directlyimport Chtml from '@web-native-js/chtml/src/Chtml.js';// Import jsDomimport jsdom from 'jsdom';// Utilities we'll needimport fs from 'fs';import path from 'path';// Read the document file from the serverconst documentFile = fs.readFileSync(path.resolve('./index.html'));// Instantiate jsdom so we can obtain the "window" for CHTML// Detailed instruction on setting up jsdom is available in the jsdom docsconst JSDOM = new jsdom.JSDOM(documentFile.toString());// Initialize CHTML... and we'll be good to goChtml.init(JSDOM.window);
We will learn more about server-side rendering later on.
Let's now head to the core concepts of CHTML in a brief overview.