echo Impossible|sed 's/Im/To be /'

December 29, 2017

Lisp Web - Parenscript Emacs Trident-mode slime skewer - HowTo

想用 Lisp 寫 web ,如果是全端工程師,前後台都包的話,Caveman2 + Parenscript 這樣的工作流程就很方便。但要與他人合作的話,而且要切進個別案子或是即有的工作流程那就有點點尷尬了。Team 的後台主力開發工具是 node.js ,前台是 angular 或 react ,所以協同開發輸出 JS 變成是必要的。

將 Parenscript 轉成 JS 的工具不少,自已也寫了一個簡單的版本,實作上不難。 github 上就有好幾個像是 pikey sigil lisp2js ,就連 parenscript-react-examples 裏面都有個 ps-compile.lisp 在處理 parenscript to JS,而在 npm 上也有 sigil_sigil-cli ,估計大家都有這樣的需求。

Trident-mode

Emacs 上有個 Trident-mode 搭配 slime 可以作到同樣的效果。更特別的是它可以配合 skewer-mode + simple-httpd + browser (firefox/chrome),直接把轉譯好的 JS 送到 browser 端執行,達到 REPL 的效果。

大概的關係圖如下:

                      /+-- slime                    <--> SBCL Lisp (in-package :parenscript)
Emacs (Trident-mode) /
                     \
                      \+-- (skewer + simple-httpd)  <--> Browser (firefox/chrome open http://localhost:8080/skewer.html)

[Trident] Paren -> Paren [slime|SBCL|Parenscript] JS -> [Trident] JS -> [skewer|simple-httpd|browser] eval(JS)

Trident-mode Install & Setup

請參照 https://github.com/johnmastro/trident-mode.el/blob/master/README.org 幾乎可以無痛完成。

測試

  • 用 emacs 打開檔案 test.paren (進入 trident-mode)
  • 在 emacs 編輯區下輸入 (lisp *ps-lisp-library*)
  • 在 emacs 下鍵入 Mx trident-expand-sexp RET
$> emacs test.paren

(lisp *ps-lisp-library*)

M-x trident-expand-sexp
emacs-trident-mode

如果執行有錯,請確認 slime 上目前是處於 PS>

emacs-slime-ps

emacs after-save-hook trident-compile-buffer-to-file

另一個方便的設定則是透過 after-save-hook 在每次存檔時喚起 trident-compile-buffer-to-file 將 paren 轉成 JS。在每個 paren 的檔尾加上設定如下:

;; Local Variables:
;; eval: (add-hook 'after-save-hook (lambda () (trident-compile-buffer-to-file)) nil t)
;; End:

Skewer live web development with Emacs

skewer-mode 是個方便開發 Web front end 工具,可以把 js, css, html 注入 browser 中,由 browser 來解譯與呈現。

skewer-mode Install & Setup

  • 透過 MELPA 安裝 simple-httpd js2-mode 及 skewer-mode

  • 設定好 simple-httpd httpd-root

    (require 'simple-httpd)
    ;; set root folder for httpd server
    (setq httpd-root "~/public_html")
    
    ;; chrome open http://127.0.0.1:8080/skewer.html
    (httpd-start)
    
  • 設定 skewer mode

    (add-hook 'js2-mode-hook 'skewer-mode)
    (add-hook 'css-mode-hook 'skewer-css-mode)
    (add-hook 'html-mode-hook 'skewer-html-mode)
    
  • 建立文件 ~/public-html/skewer.html 提供給 browser 載入 skewer

    <!doctype html>
    <html>
    <head>
        <!-- Include skewer.js as a script -->
        <script src="http://localhost:8080/skewer"></script>
        <!-- Testing.js for testing or mark it and skip. -->
        <script src="testing.js"></script>
    </head>
    <body>
        <p>Hello world skewer</p>
    </body>
    </html>
    
  • browser 開啟 http://localhost:8080/skewer.html

  • emacs M-x skewer-repl 進入交談介面,測試看看。

小結

emacs + trident-mode + skewer-mode 提供一個與 browser 互動 REPL 的交談介面。單用 trident-mode 幫忙將 Parenscript 轉成 JS 就非常實用了。

與 Team 的合作模式,則是自已寫用 Parenscript ,提交到 git 跟 Team 合作仍然使用 JS 溝通。

Posted by Lloyd Huang in on December 29, 2017