cirru-html

2019-09-13 admin

cirru-html是什么

什么是cirru-html,Template engine that converts Cirru to HTML

cirru-html使用教程帮助文档

Cirru HTML

A template engine that converts Cirru to HTML.

See demos on http://repo.cirru.org/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 # => '<span>cirru code</span>'

render code, data # => '<span>cirru code</span>'

  • 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 data
  • setResolver

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

你可能感兴趣的文章:

本站文章除注明转载外,均为本站原创或编译。欢迎任何形式的转载,但请务必注明出处。

转载请注明:文章转载自 JavaScript中文网 [https://www.javascriptcn.com]

本文地址:https://www.javascriptcn.com/read-75049.html

文章标题:cirru-html

回到顶部