template.js

A javascript template engine that is simple, easy to use, and supports webpack, rspack, vite, esbuild, rollup, parcel, browserify, fis, and gulp.

Features

Native JS syntax, template parsing, compilation, and rendering
Supports all browsers and Node, supports TypeScript
Precompilation supports mainstream packaging tools
Custom configurations, decorators, and functions
Data filtering support
Exception capture functionality
Subtemplates
Sandbox mode
Supports JIT and AOT compilation modes
Provides CLI integrated tools
Provides support for editor plugins

User Guide

template.js is a better way than concatenating strings, Click to use codesandbox for a quick demo

Template example

<ul>
    <%for(var i = 0; i < list.length; i++) {%>
        <li><%:=list[i].name%></li>
    <%}%>
</ul>

Data example

const data = {
  list: [{ name: 'yan' }, { name: 'haijing' }],
};

Render output

<ul>
  <li>yan</li>
  <li>haijing</li>
</ul>

Editor plugins supported by template.js

| Editor | Plugin | | -------- | ------------------------------------------------------------------------------------------------- | | Vscode | highlight plugin | | Sublime | highlight plugin | | Atom | highlight plugin | | WebStorm | TODO |

Quickly initialize a project using CLI tools

$ npx @templatejs/cli new myapp
# Choose the corresponding platform
# ❯ webpack
#   rspack
#   vite
#   rollup
#   esbuild
#   parcel2
#   parcel1
#   fis3
#   browserify
#   gulp
#   browser

If you already have a project, you can choose a corresponding plugin, template.js supports different usage methods

| Platform | Plugin | | --------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------- | | webpack / rspack | template-loader | | vite / rollup | rollup-plugin-templatejs | | esbuild | esbuild-plugin-templatejs | | parcel2 | parcel-transformer-template | | parcel1 | parcel-plugin-template | | fis | fis-parser-template | | browserify | browserify-templatejs | | gulp | gulp-templatejs | | Native web & Node.js | template_js | | Unsupported platforms | You can write a plugin yourself, please see @templatejs/precompiler |

Other packages summary

@templatejs/runtime The template.js runtime, providing runtime support for the rendering function generated by precompiler.
@templatejs/parser The template.js template parser.
template-vscode The template.js vscode plugin.

Developer Guide

This project uses lerna to manage multiple plugins. Common lerna commands are as follows, note that the npx prefix cannot be left out:

$ npx lerna init # Initialize
$ npx lerna create @templatejs/parser # Create a package
$ npx lerna add yargs --scope=@templatejs/parser # Install package dependencies
$ npx lerna list # List all packages
$ npx lerna bootstrap # Install all dependencies
$ npx lerna link # Create all soft links
$ npx lerna changed # List the packages to be updated next time when using lerna publish
$ npx lerna publish # Will tag, upload git, upload npm

Release steps, modify changelog

$ yarn lint
$ yarn build
$ yarn test
$ npx lerna publish

Release without tagging, suitable for test package.

$ yarn lint
$ yarn build
$ yarn test
$ lerna version --no-git-tag-version
$ npx lerna publish from-package --dist-tag next

Contributors List

contributors

Changelog

CHANGELOG.md

Planned Feature List

TODO.md

Who is Using

Baidu Zhidao
Baidu Jingyan
Baidu Shifu
Meituan Waimai
Yuanfudao
58 Financial
Unisplendour
Uxin

To learn about who is using this, click here.

Template.js

Install / Use

README