handledom
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 handledomnpm i -D @handledom/in-template-string-loader # Install classic webpack packages npm i -D webpack webpack-cli
In webpack.config.js
:
moduleexports = // … module: rules: test: /\.js$/ exclude: /node_modules/ use: "@handledom/in-template-string-loader"
In a source file:
document.body.appendroot
Configure Webpack to use Handledom with TypeScript
In webpack.config.js
:
moduleexports = // … 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:
document.body.appendroot
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