skewer-modeを入れた話

• Vue.jsの勉強中、エディタ-ブラウザ間のマウス往復にウンザリして導入した

  • webpackのHMR使えという話なのですが、入門書の進行上、そうもいかなかったのです

環境

• Win10
• GNU Emacs 25.2.0.0

skewer-modeってなに

skewer-mode

• HTML,CSS,JSについて、emacs-lisp-modeと同じ使用感でバッファをevalできる

  • リロードレスで変更反映・JS実行を行える

• JSのREPLも提供

  • REPL:Read-Eval-Print Loop
  • まんまブラウザのDevToolsのコンソールみたいな感じ

セットアップ

1. M-x package-install RET
2. skewer-modeをインストール

つかう

アタッチ

1. 例えば、~/vue/chapter1/index.html を編集し、リロードレスで反映したいとする
2. M-x httpd-serve-directory ~/vue RET
3. M-x run-skewer RET

4. ブラウザが立ち上がり、http://localhost:8080/skewer/demo が開く
   (browse-urlに依存しているらしい)

   • すでに8080が使用されていたら8081が使われたりする
5. http://localhost:8080 には、先ほどhttpd-serve-directoryで設定した~/vueがマッピングされている
6. ~/vue/chapter1/index.htmlを編集したいので、
   ブラウザのアドレスバーにhttp://localhost:8080/chapter1/index.html を入力

リロードレス編集

1. emacs上で、~/vue/chapter1/index.htmlのバッファに移動
2. M-x skewer-html-mode で skewer-html-modeマイナーモードをenabledに
3. index.htmlに変更を加える

4. ブラウザへの変更反映はタグ単位で行う。
   反映したいタグにカーソルを移動し、C-M-x (skewer-html-eval-tag)

   • 「body全体」は変更反映できないので注意

JS実行

skewer-repl

M-x skewer-repl RET でJSのREPL(Read-Eval-Print Loop) のバッファが起動する
入力途中なのにEvalされたりしてイマイチ使い勝手が良くなかった

*scratch*

1. C-x b *scratch*

   • もちろんちゃんとしたバッファを作ってもいい
2. M-x js2-mode RET
3. M-x skewer-mode RET

4. JS書く

   • 例えば、location.reload();
5. 行末でC-x C-e (skewer-eval-last-expression)
6. いちいちマウスに手を伸ばさずにページをリロードできる
7. 複数行実行したければ、ブロックで囲むとよさげ

{
    console.log(1);
    console.log(2);
    console.log(3);
}

原理

WebSocketではない

skewer.js

function skewer() {
    function callback(request) {
        var result = skewer.fn[request.type](request);
        if (result) {
            result = skewer.extend({
                id: request.id,
                type: request.type,
                status: 'success',
                value: ''
            }, result);
            skewer.postJSON(skewer.host + "/skewer/post", result, callback);
        } else {
            skewer.getJSON(skewer.host + "/skewer/get", callback);  // 5.
        }
    };
    skewer.getJSON(skewer.host + "/skewer/get", callback);  // 1.
}

古き善きXHRを使ったポーリングですね

2018年12月13日追記
Cometっていうみたいですね

処理の流れ

1. client (ブラウザ、skewer.js) は、server (Emacsのhttpサーバー)にGETリクエストを送る
2. serverは、レスポンスを保留する (pending)

3. Emacs上で下記のいずれかを行うと、serverはレスポンスを返す

   • skewer系modeのバッファ上でevalする

   • skewer-replになんか入力する

     • RETせず、1文字単位で入力するだけでも
4. clientは、serverからレスポンスが返ってきたら、これをevalする
5. clientは、eval結果をserverにPOSTする
6. serverはレスポンスを保留する(pending)
7. 以下同様

どっかでタイムアウトか何かで切れたら、client側でskewer()を呼び出して起こしてやる

所感

<button>等の操作はマウスを触らざるを得ないが、
作業の大半をキーボードから手を離さずにできるようになったのはgood