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
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, 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
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'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
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