プログラミング/riot.js の履歴(No.5)

覚えにくい点をメモ†

• カスタムタグのスクリプト内に於いて、this 変数は常に「現在のタグのインスタンス」を指します。などというときの「タグのインスタンス」は、「カスタムタグに関連づけられたデータオブジェクト」のこと。← これとても重要
  • タグに相当する DOM エレメントは this.root で参照する
• <style type="riot"></style> を置くことで、riot が css を挿入する位置を指定できる。
  （type って text/css じゃないものが書かれていても大丈夫なんだっけ？？？）
• カスタムタグを利用する際は<todo></todo>のように閉じられる必要があります。自己終了タグ<todo/>はサポートしません。
• this.refsオブジェクトに続くref属性を持つ要素へのアクセス って何だっけ？
• タグのライフサイクル
  1. タグが構成される
  2. タグのJavaScriptロジックが実行される
  3. テンプレート変数が計算され、"before-mount" イベントが発火
  4. ページ上でタグがマウントされ、"mount" イベントが発火
  5. 次のいずれかで update される。
     その際、"update" イベントで値を計算し、html 更新後に "updated" が発火
     • Observable な変数が変更された際自動的に (e.preventUpdateをtrueにセットしない場合)
     • this.update()が現在のタグインスタンス上で呼ばれたとき
     • this.update()が親タグあるいは、さらに上流のタグで呼ばれたとき。更新は親から子への一方通行で流れる。
     • riot.update()が呼ばれたとき。ページ上のすべてのテンプレート変数を更新。
  6. unmount() が呼ばれれば、'before-unmount' の後に 'unmount' が発火
• イベント名に一貫性がないことに注意が必要
  "mounting", "mounted", "updating", "updated", "unmounting", "unmounted" などだったら覚えやすいのに
• コンパイラ入り riot を使う場合は、<script src="todo.js" type="riot/tag"></script> の形で tag を呼んでおけばよしなにしてくれる

ドキュメントのバグ†

コンパイルできる環境を作るには†

riot のタグを slim + sass + coffeescript で書きたい

プログラミング/nvm のように nvm 経由で Node.js と npm を入れて、

LANG:console
$ rvm use
 Using /home/osamu/.rvm/gems/ruby-2.4.3
$ gem install slim sass coffee-script
$ nvm use
$ npm init
$ npm install riot uglify-js
$ riot --version
   riot-cli:      4.0.1 - https://github.com/riot/cli
   riot-compiler: 3.4.0 - https://github.com/riot/compiler
$ mkdir riot_tags
$ cat > riot_tags/raw.tag.slim
 raw
   span
 
   coffee:
     @root.innerHTML = opts.content
$ cat riot_tags/* | slimrb -ps | riot -io | uglifyjs -o public/riot_tags.js

こんな感じでうまく行きそうなんだけれど、

たしか、slimrb がタグとタグとの間の改行を消してしまうことがあって、 そのせいで riot がエラーを吐く場合があった気がする。

LANG:console
$ cat riot_tags/* | slimrb -ps | sed -e 's/></>\n</g' | riot -io | uglifyjs -o public/riot_tags.js

とか、

LANG:console
$ npm install html
$ cat riot_tags/* | slimrb -ps | html | riot -io | uglifyjs -o public/riot_tags.js

とかで何とかすればいいのだっけ？

あれ、これだとファイルの末尾が空行でないとおかしな事になるな。。。