Rendering HTML_html/css_WEB-ITnose with CirruScript

Early on I tried to use Cirru syntax to directly generate HTML
Later I also tried to use Cirru syntax to generate JavaScript templates
The effect was barely adequate, mainly for learning purposes, and later I got React. Just don’t use it at all
However, in the future, loading static resources will still require HTML, so I found it troublesome, so I came up with something

stir-template

After several evolutions, this module finally It is finalized and written in a very similar way to React
https://github.com/mvc-works/stir-template
The code is written in a lower version of CirruScript, and the API can also be called in CoffeeScript

stir = require :stir-tempatehtml = stir.htmlhead = stir.headbody = stir.bodydiv = stir.createFactory :divrenderPage = (data) ->  stir.render    stir.doctype()    html null,      head null,      body null,        div name: 'a', 'empty'        div()

You can see that it imitates React. The first parameter of the rendering function is the attribute, followed by the child element.
also provides similar auxiliary functions render, createElement, createFactory
written in this style, as Writing React components in CoffeeScript is almost the same.
If you need to generate a tag yourself, you can try this syntax:

newTag = stir.createFactory 'new-tag'

In addition, 8b05045a5be5764f313ed5b9168a17e6 is a special tag that is not included in React. Provide
, then stir-template can be easily used with React in places where the latter is inconvenient

Cirru’s indentation

http://script.cirru.org/

I have used CirruScript extensively in my personal projects.. It can be regarded as a ranking improvement
https://github.com/mvc-works/webpack-workflow
CirruScript is first compiled into a code generator for ES5, and secondly I only use
as a template language. I think there are too many commas in CoffeeScript and there are bugs in indentation. I am unhappy and have been using
CirruScript with stir-template and React. You can use it like this:

var  stir $ require :stir-template  React $ require :reactvar  Page $ React.createFactory $ require :./src/pagevar  ({}~ html head title body meta script link div a span) stirvar  line $ \ (text) (div ({} (:className :line)) text)= module.exports $ \ (data)  return $ stir.render    stir.doctype    html null      head null        title null ":Coffee Webpack Starter"        meta $ object (:charset :utf-8)        link $ object (:rel :icon)          :href :http://tp4.sinaimg.cn/5592259015/180/5725970590/1        link $ {} (:rel :stylesheet)          :href $ cond data.dev :src/main.css data.style        script $ object (:src data.vendor) (:defer true)        script $ object (:src data.main) (:defer true)      body null        div ({} (:class :intro))          div ({} (:class :title)) ":This is a demo of Webpack usage."          line ":Open Console to see how it loads."          div null            span null ":Read more at "            a              {} (:href :http://github.com/teambition/coffee-webpack-starter)              , :github.com/teambition/coffee-webpack-starter            span null :.        div ({} (:class :demo))          React.renderToString (Page)

First HTML The structure can probably still be seen, and then there is the grammar...

• Indentation

Cirru first of all does not rely on a lot of grammar to function language, but relies on indentation
The entire code will first be parsed into a tree, and this tree is the focus of subsequent execution
At least when I write code, I always keep his tree in mind How it works, you can see Demo:
http://repo.cirru.org/parser/

• Dollar sign $

The dollar sign was introduced to solve a type of indentation. For example, the following code:

(set a (f1 (f2 (f3 x))))

After indentation, I feel very tired when I think about it. It will be like this. It is better to use brackets

set a  f1    f2      f3 x

Then the problem becomes easier after I introduce $. You can write directly like this:

set a $ f1 $ f2 $ f3 x

• Comma,

Then commas are also introduced to solve a certain situation. The meaning is probably the opposite of $. Such code

(set a (f1 a) (b) (f2))

will look like this when it is indented. Pay attention to the b and f2 in a single line because the newline is With brackets:

set a  f1 a  b  f2

Then the question arises, how to express such code, b here has no brackets:

(set a (f1 a) b (f2))

So I introduced,, function Just remove a layer of indentation, which is probably like this:

(set a (f1 a) (, b) (f2))

Then use the indented writing method, and there will be no parsing errors:

set a  f1 a  , b  f2

According to the above 3 rules, The indentation of Cirru syntax can express most programming needs
Except for the crazy use of parentheses in the first operator of an expression... there is no normal way to put it in any language

CirruScript operators

CirruScript's compiler converts the AST by identifying the first operator of the expression
For example, var return will be recognized as the AST of the corresponding expression or statement
Another div like this , if there is no corresponding operator, it will be processed as a function call

object operator, used to generate objects, its parameters are all key-value pairs
It has an alias of {}, I I think it looks more familiar. After all, the curly braces are still very familiar.
The array operator has the same meaning. It is used to generate an array. Its parameter is the element.
It has an alias of []. An empty array may It is written as ([]) and expressed as an expression

I have done some processing on the literals and identifiers to facilitate writing code.
The null and true here are automatically recognized, and the numbers are also processed.
In addition, data.main is also processed through the AST of member expressions

There are some strange things here, such as {}~, which is actually object~
But but , the correct name of this should be: **Destructuring Assignment**, it’s just a bit strange
For strange syntax, go to http://script.cirru.org to see what the specific AST is

CirruScript’s string

String is a strange thing, because Cirru is degenerated from the graphics editor...
Degenerated... It is a natural thing, the original graphics are normal, It's weird to express it in text
In Cirru's syntax, a and "a", with or without quotation marks, are actually the same
The difference is "a1 a2" and a1 a2, without quotation marks There are two nodes, and there is a
, so... the quotation marks are actually used for escaping special characters, and there is this kind of "a1" a2"
What you typed in 4750256ae76b6b9d804861d8f69e79d3 There is no need to escape, it is a graphical interface, it is normal

然后为了表示字符串, 我动起来歪脑筋, 对, 用冒号 :
冒号开头的就是字符串了, 没有特殊字符的时候还可以少一个字符
:utf-8 跟 ":utf-8" 表示的是一个意思, 编译的结果也是一样的
必须加引号的是 ":hello world" 这样的有特殊字符的节点
看多了 Clojure 的话其实冒号你是会习惯的...

总结

最新版的 Gulp 应该是能识别 gulpfile.cirru 这样的后缀的
我也写了插件, 应该问题不大, CoffeeScript 这么难用都用下来了
https://github.com/Cirru/gulp-cirru-script

一般我会写个 template.cirru 文件, 从 Gulp 里引用
最后执行一下函数, 就能从数据渲染出 HTML 来了:

require('cirru-script/lib/register')gulp.task 'html', (cb) ->  html = require'./template.cirru' # <-- 引用看这里  fs = require 'fs'  if not env.dev    assets = require './build/assets.json'    env.main = "./build/#{assets.main}"    env.vendor = "./build/#{assets.vendor}"  fs.writeFile 'index.html', (html env), cb # <-- 调用看这里

希望你有兴趣用 CirruScript 生成 HTML. 早日淘汰手写 HTML.