installation.md

Installation Guide

This library is a polyfill for the proposed CHTML suite.

On this Page

• Embed As Script
  • Embed The Complete Suite
  • Embed Individual Features
• Install Via NPM
  • Initialize the Complete Suite
  • Initialize Individual Features
• Server-Side Initialization
• Next Steps

Embed As Script

• Embed The Complete Suite - Embed the build below for everything about CHTML.

  <script src="https://unpkg.com/@web-native-js/chtml/dist/main.js"></script>

• Embed Individual Features - Find a build below for a specific CHTML feature.

  • Scoped HTML - <script src="https://unpkg.com/@web-native-js/chtml/dist/scoped-html.js"></script>

  • Scoped CSS - <script src="https://unpkg.com/@web-native-js/chtml/dist/scoped-css.js"></script>

  • Scoped JS - <script src="https://unpkg.com/@web-native-js/chtml/dist/scoped-js.js"></script>

  • HTML Partials - <script src="https://unpkg.com/@web-native-js/chtml/dist/html-partials.js"></script>

Install Via NPM

$ npm i -g npm
$ npm i --save @web-native-js/chtml

The installed package is designed to be initialized with the window object of the current browser or server evironment. To do this, import the ENV object and assign the window object to it, then call the initializer.

• Initialize the Complete Suite - Initialize the module below for everything about CHTML.

  // Import
  import init, { ENV } from '@web-native-js/chtml';
  // Initialize
  ENV.window = window;
  init();

• Initialize Individual Features - Find a module below for a specific CHTML feature.

  • Scoped HTML

    // Import
    import init, { ENV } from '@web-native-js/chtml/src/scoped-html/index.js';
    // Initialize
    ENV.window = window;
    init();

  • Scoped CSS

    // Import
    import init, { ENV } from '@web-native-js/chtml/src/scoped-css/index.js';
    // Initialize
    ENV.window = window;
    init();

  • Scoped JS

    // Import
    import init, { ENV } from '@web-native-js/chtml/src/scoped-js/index.js';
    // Initialize
    ENV.window = window;
    init();

  • HTML Partials

    // Import
    import init, { ENV } from '@web-native-js/chtml/src/html-partials/index.js';
    // Initialize
    ENV.window = window;
    init();

Server-Side Initialization

Here is how CHTML could be initialized on DOM instances created on the server with a library like jsdom (using the window object from the DOM instance.)

// Import the class directly
import init, { ENV } from '@web-native-js/chtml';
// Import jsDom
import jsdom from 'jsdom';
// Utilities we'll need
import fs from 'fs';
import path from 'path';

// Read the document file from the server
const 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 docs
const JSDOM = new jsdom.JSDOM(documentFile.toString());

// Initialize CHTML...
// and we'll be good to go
ENV.window = JSDOM.window;
init();

Next Steps

Let's now learn the core concepts of CHTML.

• Chtml