Nachos Preventing Motivation

    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

    Install

    npm i handledom

    DownloadsWeekly Downloads

    1

    Version

    0.1.10

    License

    CC0-1.0

    Unpacked Size

    246 kB

    Total Files

    10

    Last publish

    Collaborators

    • paleo