Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/yanhaijing/template.js

A javascript template engine, simple, easy & extras, support webpack, rspack, vite, rollup, esbuild, parcel, browserify, fis and gulp.
https://github.com/yanhaijing/template.js

arttemplate baidutemplate browserify dotjs ejs esbuild fis handlebars jade juicer parcel rollup rspack template templatejs tmpl vite webpack

Last synced: about 1 month ago
JSON representation

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

Host: GitHub
URL: https://github.com/yanhaijing/template.js
Owner: yanhaijing
License: mit
Created: 2015-01-03T02:31:45.000Z (over 9 years ago)
Default Branch: master
Last Pushed: 2024-02-26T04:00:54.000Z (7 months ago)
Last Synced: 2024-05-16T00:10:17.167Z (4 months ago)
Topics: arttemplate, baidutemplate, browserify, dotjs, ejs, esbuild, fis, handlebars, jade, juicer, parcel, rollup, rspack, template, templatejs, tmpl, vite, webpack
Language: JavaScript
Homepage:
Size: 3.56 MB
Stars: 1,308
Watchers: 50
Forks: 501
Open Issues: 17
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- Funding: .github/FUNDING.yml
- License: LICENSE

Awesome Lists containing this project

README

        # [template.js](https://github.com/yanhaijing/template.js)

[![](https://img.shields.io/badge/Powered%20by-jslib%20base-brightgreen.svg)](https://github.com/yanhaijing/jslib-base)

[![license](https://img.shields.io/badge/license-MIT-blue.svg)](https://github.com/yanhaijing/template.js/blob/master/LICENSE)

[![CI](https://github.com/yanhaijing/template.js/actions/workflows/ci.yml/badge.svg?branch=v3)](https://github.com/yanhaijing/template.js/actions/workflows/ci.yml)

English | [简体中文](./README.zh-CN.md)

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](https://codesandbox.io/s/template-js-demo-6xgjxw?file=/src/index.mjs) for a quick demo

Template example

```



    <%for(var i = 0; i < list.length; i++) {%>

        <%:=list[i].name%>

    <%}%>



```

Data example

```js

const data = {

  list: [{ name: 'yan' }, { name: 'haijing' }],

};

```

Render output

```html



  yan

  haijing



```

Editor plugins supported by template.js

| Editor   | Plugin                                                                                            |

| -------- | ------------------------------------------------------------------------------------------------- |

| Vscode   | [highlight plugin](https://marketplace.visualstudio.com/items?itemName=yanhaijing1234.templatejs) |

| Sublime  | [highlight plugin](https://packagecontrol.io/packages/templatejs)                                 |

| Atom     | [highlight plugin](https://atom.io/packages/language-templatejs)                                  |

| WebStorm | TODO                                                                                              |

Quickly initialize a project using CLI tools

```bash

$ 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](https://github.com/yanhaijing/template.js/blob/master/packages/template-loader)                                                 |

| vite / rollup         | [rollup-plugin-templatejs](https://github.com/yanhaijing/template.js/blob/master/packages/rollup-plugin-templatejs)                               |

| esbuild               | [esbuild-plugin-templatejs](https://github.com/yanhaijing/template.js/blob/master/packages/esbuild-plugin-templatejs)                             |

| parcel2               | [parcel-transformer-template](https://github.com/yanhaijing/template.js/blob/master/packages/parcel-transformer-template)                         |

| parcel1               | [parcel-plugin-template](https://github.com/yanhaijing/template.js/blob/master/packages/parcel-plugin-template)                                   |

| fis                   | [fis-parser-template](https://github.com/yanhaijing/template.js/blob/master/packages/fis-parser-template)                                         |

| browserify            | [browserify-templatejs](https://github.com/yanhaijing/template.js/blob/master/packages/browserify-templatejs)                                     |

| gulp                  | [gulp-templatejs](https://github.com/yanhaijing/template.js/blob/master/packages/gulp-templatejs)                                                 |

| Native web & Node.js  | [template_js](https://github.com/yanhaijing/template.js/blob/master/packages/template)                                                            |

| Unsupported platforms | You can write a plugin yourself, please see [@templatejs/precompiler](https://github.com/yanhaijing/template.js/blob/master/packages/precompiler) |

Other packages summary

- [@templatejs/runtime](https://github.com/yanhaijing/template.js/blob/master/packages/runtime) The template.js runtime, providing runtime support for the rendering function generated by precompiler.

- [@templatejs/parser](https://github.com/yanhaijing/template.js/blob/master/packages/parser) The template.js template parser.

- [template-vscode](https://github.com/yanhaijing/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:

```bash

$ 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

```bash

$ yarn lint

$ yarn build

$ yarn test

$ npx lerna publish

```

Release without tagging, suitable for test package.

```bash

$ yarn lint

$ yarn build

$ yarn test

$ lerna version --no-git-tag-version

$ npx lerna publish from-package --dist-tag next

```

## Contributors List

[contributors](https://github.com/yanhaijing/template.js/graphs/contributors)

## Changelog

[CHANGELOG.md](https://github.com/yanhaijing/template.js/blob/master/CHANGELOG.md)

## Planned Feature List

[TODO.md](https://github.com/yanhaijing/template.js/blob/master/TODO.md)

## Who is Using

- [Baidu Zhidao](http://zhidao.baidu.com/)

- [Baidu Jingyan](http://jingyan.baidu.com/)

- [Baidu Shifu](http://shifu.baidu.com/)

- Meituan Waimai

- Yuanfudao

- [58 Financial](https://npm.taobao.org/package/jr58)

- Unisplendour

- Uxin

To learn about who is using this, [click here](https://github.com/yanhaijing/template.js/issues/6).

## Related Links

- [BaiduTemplate](http://tangram.baidu.com/BaiduTemplate/)

- [artTemplate](https://github.com/aui/artTemplate/)

- [Juicer](https://github.com/PaulGuo/Juicer)

- [handlebarsjs](http://handlebarsjs.com/)

- [PUG(Originally Jade)](https://pugjs.org/api/getting-started.html)

- [EJS](https://ejs.co/)

- [Only 20 lines of Javascript code! A step-by-step guide to creating a webpage template engine](https://juejin.im/entry/56258da860b294bcf7955883)