Riot 源码阅读笔记 -- compiler

关于 Riot 的 compiler，具体请见：Riot compiler

之前在 Riot 源码阅读笔记中提到另挖坑来聊聊 Riot 提供的 template + logic compiler 是怎么干活的，于是有了这一篇文章... (其实大部分都是正则，正则)

Riot 提供了两种方式，分别是 pre-compile 和直接在页面使用 script[type="riot/tag"]，都是用的同一个 compiler 来处理代码的解析，在真实环境时推荐使用 pre-compile 的方式。

在页面使用 script[type="riot/tag", src="path"] 和 React 在页面使用 script[type="text/jsx", src="path"] 一样，都是用了 ajax 来请求文件内容，跨域就拜拜了，请知悉。

在 Node 中的入口

npm install riot -g 之后便可以通过命令行的方式来启动 compiler 来处理。

源码中入口是：lib/cli.js，主要就是做命令参数解析和调用 lib/compiler.js 的工作，有兴趣请自己查阅。

compiler.js 干了什么

区分 template 和 logic

  /^<([\w\-]+)>([^\x00]*[\w\-\/]>$)?([^\x00]*?)^<\/\1>/gim
// [1         ][2                  ][3        ][4    ]
// 1. 匹配 <custom-tag>, 即自定义标签
// 2. 匹配 html 内容，以一个标签结尾，如 `</h3>, <br />, </custom-tag>`，这里的 `$` 限制了 html 和 js 要隔行写
// 3. 匹配 js 内容
// 4. 以 `^` 限制了结束标签需要另起一行写，然后就是结对出现。

上述的这个正则已经将模板内容解析成三部分，标签名称，template 内容，logic 内容，相对简单吧，比起 JSX 需要的处理要少得多，也容易理解得多。

解析成三部分之后，分别对每一个部分做对应的处理后拼接成最后的 js 代码，即是类似这样的代码：

riot.tag('custom-tag', '...', function () {
      // [1         ]  [2  ]
   this.prop = ...
// [3            ]
})
// 1. 标签名称
// 2. 处理后的 template 字符串
// 3. 处理后的可执行的 javascript 代码

对 template 做了什么

Riot 支持使用 jade 的，通过参数判断，如果是 jade，则调用 jade 来编译

压缩

把所有多个空格连续的都换成一个空格，清理 comment

var HTML_COMMENT = /<!--.*?-->/g
html = html.replace(/\s+/g, ' ')
html = html.trim().replace(HTML_COMMENT, '')

// 如果带了 compact 参数，则压缩标签间空格
if (opts.compact) html = html.replace(/> </g, '><')

其他的

这里做的事情比较多，请允许我给一个列表：

在 Riot 中，标签属性的表达式可以不用加引号，所以 compiler 要加引号...

// foo={ bar } --> foo="{ bar }"
html = html.replace(/=(\{[^\}]+\})([\s\/\>])/g, '="$1"$2')

在 IE8 下，boolean 类型的元素属性插入后会丢失其值，所以需要 hack 来处理一下，boolean 类型的转换一下以保留其值

// checked="{ foo }" --> __checked="{ foo }"
html = html.replace(/([\w\-]+)=["'](\{[^\}]+\})["']/g, function(full, name, expr) {
                  // [1      ][2                  ]
                  // 1. 匹配属性名称，后边跟一个 `=`
                  // 2. 匹配属性值，引号开始和结束，中间是被 `{}` 包裹起来的表达式
  // 这里的 BOOL_ATTR 是一个包括了所有 boolean 属性字符串的数组                
  if (BOOL_ATTR.indexOf(name.toLowerCase()) >= 0) name = '__' + name
  return name + '="' + expr + '"'
})

关于这个，不用 compiler 直接写模板的话，要这样： __checked，有一个 issue 就是讨论这个问题的。

由于兼容了多个 transpiler ，所以表达式里边的其他语法也要调用其他 transpiler 来 compile，当然，如果没用 transpiler 就不用处理了，通过参数来控制

// { expr } 调用 `compileJS` 方法处理 expr 后放回来
html = html.replace(/\{\s*([^\}]+)\s*\}/g, function(_, expr) {
  return '{' + compileJS(expr, opts, type).trim() + '}'
})

处理标签闭合，这个相对好理解，其中主要就是不处理 H5 中自闭合的标签

var CLOSED_TAG = /<([\w\-]+)([^>]*)\/\s*>/g
// <foo/> -> <foo></foo>
html = html.replace(CLOSED_TAG, function(_, name, attr) {
  var tag = '<' + name + (attr ? ' ' + attr.trim() : '') + '>'
  
  // Do not self-close HTML5 void tags
  // 这里的 VOID_TAGS 是一个包括了所有的 h5 自闭合标签的数组
  if (VOID_TAGS.indexOf(name.toLowerCase()) == -1) tag += '</' + name + '>'
  return tag
})

转义处理

做一些必要的转义处理，如引号，转义了的 {}

// escape single quotes
html = html.replace(/'/g, "\\'")

// \{ jotain \} --> \\{ jotain \\}
html = html.replace(/\\[{}]/g, '\\$&')

对 js 做了什么

首先是根据参数调用对应的 transplier 来干活，编译代码，如果是 js 代码就不用编译了。

logic 部分其实 Riot 也提供了一种简写的 js 语法的，就像是 ES6 提供的 class method 写法一样，如

edit(e) {
  this.text = e.target.value
}

处理成：

this.edit = function (e) {
  this.text = e.target.value
}.bind(this)

好吧，其他暂时不重要，我们看一下 Riot 是怎么处理这一块的转化的。

先清理掉 comment

按行解析，遍历每一行

var l = line.trim()

// 方法开始，带 `(` 而且没有 `function` 关键词
if (l[0] != '}' && l.indexOf('(') > 0 && l.slice(-1) == '{' && l.indexOf('function') == -1) {
  var m = /(\s+)([\w]+)\s*\(([\w,\s]*)\)\s*\{/.exec(line) // 正则匹配出函数名称以及参数列表
    
  if (m && !/^(if|while|switch|for)$/.test(m[2])) { // 排除其他带 `(` 的情况
    lines[i] = m[1] + 'this.' + m[2] + ' = function(' + m[3] + ') {'
    es6_ident = m[1]
  }
}

// method end
if (line.slice(0, es6_ident.length + 1) == es6_ident + '}') {
  // 在函数方法后添加一个 `.bind(this)` 来确保调用时 this 的值
  lines[i] = es6_ident + es6_ident + 'this.update()\n' + es6_ident + '}.bind(this);'
  es6_ident = ''
}

对浏览器的支持

Riot 提供了一个 riot+compiler.js 的版本，其实也是将这个 compiler 打包进去，这个 compiler 本身做了一些支持浏览器的事情。

Ajax 方法来拉取模板内容
挂载 compile 方法到 riot 上
重写 mount 和 mountTo 方法来支持 compile

总结

简单的区分 template 和 logic 的方式感觉很巧妙，这么写对于一个 component 代码看起来也蛮好看的。

compiler 代码精简的同时提供了不少优秀的功能，包括代码的基础压缩，支持多种 transpiler，自带的 ES6 class method 写法等。

teabyii/Riot-compiler.md