ci 模板html,cirru-html

Template engine that converts Cirru to HTML

Cirru HTML

A template engine that converts Cirru to HTML.

Usage

npm install --save cirru-html{makeRender, render, setResolver} = require 'cirru-html'

code = 'span (= cirru code)'

data = {}

renderer = makeRender code, {}

renderer {} # pass in data # => 'cirru code'

render code, data # => 'cirru code'makeRender

template is a code string in Cirru,

or a JSON Object of parsed Cirru code (with cirruParser.pare).

renderer is a cached renderer that make it fast.

data is optional.

In Node, you need data['@filename'] to run @insert and @partial.

render

Shorthand for using renderer in one call:

exports.render = (template, data) ->

render = exports.makeRender template, data

render datasetResolver

Solution for reading file is taken out from the module.

For Node:

html = require 'cirru-html'

html.setResolver (basePath, child, scope) ->

dest = path.join (path.dirname basePath), child

scope?['@filename'] = dest

html = fs.readFileSync dest, 'utf8'For browsers, maybe from an element:

setResolver (basePath, child, scope) ->

match = child.match /(\w+)\.cirru/

element = q "##{match[1]} .file"

element.value or element.innerHTML

Demo of HTML

Here's a demo of HTML:

doctype

html

head

title "Cirru HTML"

meta $ :charset utf-8

link (:rel stylesheet) $ :href css/style.css

script (:defer) $ :src build/build.js

body

#entry

@repeat (@ names)

.test

:id (@ @value)

textarea.file

textarea.data

button.button " =>"

textarea.result

Notice: the compiled HTML is not prettified.

Template engine

@

@if

@block

@repeat

@with

@insert

@partial

Functions may also be passed into the renderer to apply on the data.

Architeture

Steps of rendering:

Cirru Code

-> Syntax Tree

-> Abstract Syntax Tree, based on Classes

-> Cached Tree, HTML data converted

-> Rendering

Classes for rendering HTML:

SingleTag

PairTag

TextTag

Classes for expressions

AtExpression

IfExpression

RepeatExpression &key, &value

WithExpression

InsertExpression

PartialExpression

BlockExpression

MethodsExpression

Filenames passed to @insert and @partial are only names.

data parameters contain at least @filename and @methods: [].

Changelog

0.2.2

Fixed double quote in some attributes

0.2.1

Fixed with

Since 0.2, renderer is removed

License

MIT

HomePage

Repository