handledom
TypeScript icon, indicating that this package has built-in type declarations

0.1.10 • Public • Published

handledom

Build Status npm Type definitions GitHub

An HTML template engine for DOM lovers.

How to use with Webpack

Handledom templates will be compiled at build time by Webpack.

Install:

# Install Handledom and its webpack plugin 
npm i handledom
npm i -D @handledom/in-template-string-loader
 
# Install classic webpack packages 
npm i -D webpack webpack-cli

In webpack.config.js:

module.exports = {
  // …
  module: {
    rules: [
      {
        test: /\.js$/,
        exclude: /node_modules/,
        use: ["@handledom/in-template-string-loader"]
      },
    ]
  }
}

In a source file:

import handledom from "handledom"
 
const template = handledom`<p>Hello, {{ name }}!</p>`
 
const { root, update } = template({
  name: "Steve"
})
 
document.body.append(root)

Configure Webpack to use Handledom with TypeScript

In webpack.config.js:

module.exports = {
  // …
  resolve: {
    extensions: [".ts"],
  },
  module: {
    rules: [
      {
        test: /\.ts$/,
        exclude: /node_modules/,
        use: ["@handledom/in-template-string-loader", "ts-loader"]
      },
    ]
  }
}

How to use with compilation on the browser

Handledom templates can be compiled at runtime on the browser. Here is how to do:

Install handledom:

npm i handledom

In a source file:

import handledom from "handledom/browser"
 
const template = handledom`<p>Hello, {{ name }}!</p>`
 
const { root, update } = template({
  name: "Steve"
})
 
document.body.append(root)

Contribute

Install and Build

We need a JVM (Java Virtual Machine) to build the parser because we use ANTLR, which is a Java program. So, at first, install a JVM on your system.

In a terminal, open the cloned handledom/handledom/ repository. Then:

# Download once the ANTLR JAR file in the project's root directory 
wget https://www.antlr.org/download/antlr-4.7.2-complete.jar
 
# Install once all Node.js dependencies 
npm install

Development environment

With VS Code, our recommanded plugins are:

  • ANTLR4 grammar syntax support - mike-lischke.vscode-antlr4
  • ESLint - dbaeumer.vscode-eslint
  • Prettier - esbenp.prettier-vscode

Readme

Keywords

Package Sidebar

Install

npm i handledom

Weekly Downloads

1

Version

0.1.10

License

CC0-1.0

Unpacked Size

246 kB

Total Files

10

Last publish

Collaborators

  • paleo