• 设为首页
  • 点击收藏
  • 手机版
    手机扫一扫访问
    迪恩网络手机版
  • 关注官方公众号
    微信扫一扫关注
    迪恩网络公众号

codemix/htmling: Polymer / HTML5 templating syntax for node.js

原作者: [db:作者] 来自: 网络 收藏 邀请

开源软件名称:

codemix/htmling

开源软件地址:

https://github.com/codemix/htmling

开源编程语言:

JavaScript 82.5%

开源软件介绍:

HTMLing

Build Status

Polymer compatible HTML5 based templating syntax for node.js. Render your templates server-side using the same syntax as in the browser, with no virtual DOM trickery required.

For a full demonstration, please see htmling-demo-app.

Installation

via npm

npm install htmling

Example

Turns this:

<!doctype html>
<html>
  <head>
    <title>{{title}}</title>
    <meta name="description" content="{{description}}">
  </head>
  <body>
    <h1>{{title}}</h1>
    <ul>
    <template repeat="{{user in users}}">
      <li>{{user.name}}</li>
    </template>
    </ul>
  </body>
</html>

plus this:

{
  "title": "User List",
  "description": "A list of users",
  "users": [
    {
      "name": "Alice"
    },
    {
      "name": "George"
    }
  ]
}

into this:

<!doctype html>
<html>
  <head>
    <title>User List</title>
    <meta name="description" content="A list of users">
  </head>
  <body>
    <h1>User List</h1>
    <ul>
      <li>Alice</li>
      <li>George</li>
    </ul>
  </body>
</html>

How it works

Unlike similar libraries, HTMLing does not require a virtual DOM such as jsDOM. Instead, HTMLing parses .html files and transforms them into very efficient executable JavaScript functions. It uses a parser written in PEG.js which emits a standard Mozilla Parser API AST with some custom node types. The compiler then uses estraverse to convert these custom node types to standard JavaScript expressions. Finally, the result is passed to escodegen which converts the AST into executable JavaScript.

This compilation process happens only once, and the resulting JavaScript is extremely efficient.

Usage

HTMLing is easy to integrate with your existing build process, either via the command line or library interfaces.

CLI

HTMLing ships with a small command line interface:

Compile an individual file

The compiled output will be written to STDOUT

htmling ./file.html

Compile an individual file to a destination

The compiled output will be written to compiled.js.

htmling -o ./compiled.js ./file.html

Compile a directory hierarchy

Compile a nested directory structure to a directory called compiled. The output directory will be created if it does not already exist, and the resulting folder structure will match that of the input.

htmling -o ./compiled ./pages

Compile a directory hierarchy to a single file

Compile a nested directory structure to a single called compiled.js

htmling -c -o ./compiled.js ./pages

As a Library

It's also possible to use HTMLing as a library:

Compile a string

var HTMLing = require('htmling');

var template = HTMLing.string('Hello {{name}}');

console.log(template.render({name: 'Charles'})); // "Hello Charles"

Compile a file

var template = HTMLing.file('./index.html');
console.log(template.render());

Compile a directory

var templates = HTMLing.dir('./pages');
console.log(templates.render('index.html', {}))

Using as an express view engine

HTMLing has support for express.js.

var HTMLing = require('htmling');
app.configure(function(){
  app.engine('html', HTMLing.express(__dirname + '/views/'));
  app.set('view engine', 'html');
});

In development mode, you'll probably want to enable the watch option. This will reload your templates when they change on disk:

var HTMLing = require('htmling');
app.configure(function(){
  app.engine('html', HTMLing.express(__dirname + '/views/', {watch: true}));
  app.set('view engine', 'html');
});

License

MIT, see LICENSE.md.

Docker environment

All you need is Docker with docker-compose available from your terminal.

We have a fancy shortcut to get your application up and running, and you also get access to the container terminal:

$ make build
$ make run

From this point, it's just a matter of starting the application from within the container shell:

htmling:~/app(master)$ npm test

Other fancy shortcuts we have for Docker fans

  • $ make in to open a new container terminal
  • $ make stop to stop all containers
  • $ make clean to clean the Docker environment



鲜花

握手

雷人

路过

鸡蛋
该文章已有0人参与评论

请发表评论

全部评论

专题导读
上一篇:
Le Wagon · GitHub发布时间:2022-06-19
下一篇:
lewagon/html-css-challenges: HTML / CSS challenges @LeWagon发布时间:2022-06-19
热门推荐
阅读排行榜

扫描微信二维码

查看手机版网站

随时了解更新最新资讯

139-2527-9053

在线客服(服务时间 9:00~18:00)

在线QQ客服
地址:深圳市南山区西丽大学城创智工业园
电邮:jeky_zhao#qq.com
移动电话:139-2527-9053

Powered by 互联科技 X3.4© 2001-2213 极客世界.|Sitemap