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

Lloyd Huang — Fri, 29 Dec 2017 10:56:46 CST

想用 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

如果執行有錯，請確認 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 來解譯與呈現。

Watch the demo video on YouTube (webm)

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


<html>
<head>
    
    <script src="http://localhost:8080/skewer">script>
    
    <script src="testing.js">script>
head>
<body>
    <p>Hello world skewerp>
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 溝通。

110碼:AAA2369