template.js

A javascript template engine, simple, easy & extras, support webpack, rspack, vite, rollup, esbuild, parcel, browserify, fis and gulp.

yanhaijing
1320
496
JavaScript

template.js


license
CI

English | 简体中文

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

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

To learn about who is using this, click here.

Related Links