Cirru 是怎样编译到 Clojure 的

这篇文章解释一下 Cirru 到 Clojure 代码的编译步骤.
目前编辑使用的是 Cumulo Editor, 参考这里的 Demo.
Cirru 是整个大的项目的名字, Cirru 本身的目标是 AST 编程,
而 Cumulo Editor 是目前项目下最新的语法树编辑器. 也就是 AST 里的 Syntax Tree.
所以在新闻中你看到的 Cirru 的存在形态, 目前是这样的:

这个函数表示的是下面这段 Clojure 代码:

(defcomp
 comp-search
 (buffer query mock-ssr?)
 (div
  {:style (merge ui/column-center style-searcher)}
  (div
   {}
   (if mock-ssr?
     (div {:style style-mock} (<> span "Loading..." nil))
     (input
      {:style (merge ui/input style-input),
       :value buffer,
       :placeholder "Press Enter to search...",
       :on {:input on-search, :keydown (on-keydown buffer)}})))
  (=< nil 16)
  (if (>= (count query) 2)
    (let [results (->> information
                       (filter
                        (fn [item]
                          (string/includes?
                           (string/lower-case (:title item))
                           (string/lower-case query)))))]
      (if (empty? results)
        (div {:style style-empty} (<> span (str "找不到" (pr-str query) ".") nil))
        (div
         {:style style-results}
         (->> results (map-indexed (fn [idx item] [idx (comp-item item)])))))))
  (=< nil 16)
  (if (>= (count query) 2) (comp-search-engine query))))

编辑器数据表示

这中间有比较复杂的编译过程. 我首先把上面的内容, 简化.
比如图片当中的 DOM, 在浏览器当中实际上是 HTML, 大致可以表示成:

<div>
  <input value="defcomp">
  <input value="comp-search">
  <div></div>
  <div>
    <input value="div">
  </div>
</div>

这个结构用 JSON 表示的话, 可以是:

["defcomp", "comp-search", [],
  ["div"]]

这在 Clojure 里, 类似的 JSON 的数据格式叫做 EDN, 和 JSON 相似, 看上去这样:

["defcomp" "comp-search" []
  ["div"]]

不过实际当中考虑到原信息和优化方案, 这个结构其实很复杂
比如说这 "comp-search" 实际存储当中的会带上很多信息:

{:type :leaf, :author "root", :time 1503305265979, :text "comp-search", :id "B1_VAM_Ob"}

完整的结构非常繁琐, 需要借助工具才能查看, 如果非要查看的话:
https://github.com/tiye/tiye....
http://pretty-print.net/

归结一下来说, 大致上 Cirru 在程序中使用和最后存储的格式对应是这样:

["defcomp" "comp-search" []
  ["div"]]

这是 S-Expression 的一套简写. 只要用 Vector 和 String 就能直白地表示.
虽然 Clojure 语法不仅仅是 S-Expression, 但是说大部分可以用 S-Expression 表示没问题.
当然, 这样肯定不能表示 Macros, 也不能表示各种 Reader 生成的语法.
实际开发当中可以和 Clojure 代码混用, 好在很多代码其实这套方案是足够的.

语法转换

还要考虑的一个问题是 Cirru 当中为了统一前缀表达式约定了一些写法,
在 Clojure 当中存在惯用的写法, 这就需要预先进行转换了.
比如 Cirru 当中 ["{}" [":a" "1"]] 对应 {:a 1}, ["[]" "1"] 对应 [1],
甚至字符串标记 "|str1" 对应 "str1", 都需要做转换.
为了完成这个功能, 我写了一个模块专门在 Symbol 层面做了数据转换:
https://github.com/Cirru/sepa...

在这个模块当中, 甚至的 case let defn 等函数或特殊格式做了调整,
某种程度上和在 Clojure 当中习惯是不一致的, 但是在 Cirru Editor 当中很更清晰.
也是得益于 Lisp 整个语法设计的精巧, 才能很容易达成.

代码生成

生成代码反而是简单的, 由于现成的类库比较强大:
https://github.com/brandonblo...
fipp 可以接受 Symbol 类型的 S-Expression, 返回格式化完成的代码.
而且这个代码的布局和缩进都比较符合人们阅读的习惯.

这是 fipp 给出的一个将 Quote List 编译到 Clojure 代码字符串的 API:

(fipp.clojure/pprint '(let [foo "abc 123"
                            bar {:x 1 :y 2 :z 3}]
                        (do-stuff foo (assoc bar :w 4)))
                    {:width 40})

结尾

所以总结下来, 从最初的 Cirru Editor 采用的存储格式:

["defcomp" "comp-search" []
  ["div" ["{}" [":style" "style-searcher"]]]]

首先会在 Symbol 层面进行一些转化, 得到一个 Quoted List:

'(defcomp comp-search ()
  (div {:style style-searcher}))

最后由 fipp 生成带缩进的代码字符串:

(defcomp comp-search ()
  (div {:style style-searcher}))