API · コンパイラ

ブラウザ

ここに紹介するメソッドはブラウザのみ対応しています。Nodeかio.jsでコンパイルしたい場合は、サーバの節に進んでください。

riot.compile(callback)

<script type="riot/tag">で定義されたすべてのタグをJavaScriptにコンパイルします。タグはインラインのスクリプト定義、あるいはsrc属性で指定された外部リソース、どちらでも可能です。すべてのスクリプトがコンパイルされると、指定されたcallbackメソッドが呼び出されます。例:

riot.compile(function() {
  var tags = riot.mount('*')
})

riot.compile呼び出しを省略して、ただ次のように書くことも可能です:

var tags = riot.mount('*')

ただし、外部リソースのロードとコンパイルが完了するタイミングを知ることはできません。また、外部スクリプトを含む場合は戻り値も空の配列となります。つまり、すべてのスクリプトがページ上で定義されているのであれば、riot.compileのステップは省略できます。

詳しくは、一般的な説明を参照してください。

riot.compile(url, callback)

指定のURLを読み込んで、すべてのタグをコンパイルした後callbackが呼び出されます。例:

riot.compile('my/tags.tag', function() {
  // 読み込まれたタグはこの時点で利用可能
})

riot.compile(tag)

与えられたtagをコンパイルし、実行します。例:

<template id="my_tag">
  <my-tag>
    <p>{greeting}, World!</p>
    this.greeting = 'Hello'
  </my-tag>
</template>

<script>
riot.compile(my_tag.innerHTML)
</script>

呼び出し後、my-tagを普通に使うことができます。

タグ定義の最初の非空白文字が<だと仮定します。そうでなければ、引数はURLとして解釈されます。

Note:ブラウザ内のtagのコンパイルでは、スクリプトタグは使用できません。最後の終了タグは、タグのスクリプト部分の開始を定義します。

@returns コンパイルされた文字列としてのJavaScript

riot.compile(tag, true)

tagをコンパイルし、文字列として返します。タグからJavaScriptへの変換のみで、ブラウザ上でその変換結果が実行されることはありません。このメソッドは、例えばコンパイラのパフォーマンスについてのベンチマークなどで使えます。

var js = riot.compile(my_tag.innerHTML, true)

サーバ

npm install riotでインストール後、次のことができます:

var riot = require('riot')

var js = riot.compile(tag)

コンパイル関数は、タグ定義（文字列）をとって、JavaScript（文字列）を返します。

riot.parsers.css [tagName, css]

タグ内のCSSをコンパイルするのに使われる、独自パーサ。例:

riot.parsers.css.myparser = function(tag, css) {
  return css.replace(/@tag/, tag)
}

<custom-parsers>
  <p>hi</p>
  <style type="text/myparser">
    @tag {color: red;}
  </style>
</custom-parsers>

これは、次のように変換されます:

<custom-parsers>
  <p>hi</p>
  <style type="text/myparser">
    custom-parsers {color: red;}
  </style>
</custom-parsers>

riot.parsers.js [js, options]

タグ内のJavaScriptをコンパイルするのに使われる、独自パーサ。例:

riot.parsers.js.myparser = function(js) {
  return js.replace(/@version/, '1.0.0')
}

<custom-parsers>
  <p>hi</p>
  <script type="text/myparser">
    this.version = "@version"
  </script>
</custom-parsers>

これは、次のようにコンパイルされます:

<custom-parsers>
  <p>hi</p>
  <script type="text/myparser">
    this.version = "1.0.0"
  </script>
</custom-parsers>

riot.parsers.html [html]

タグ内のHTMLをコンパイルするのに使われる、独自パーサ。

あらかじめ定義されたパーサは以下です。

html

css

* lessのみブラウザ上で利用可能です。

js

v2.3.0における変更

以前のバージョンでは、エスケープされた波括弧(curly braces)が保存されていたため、不正なHTMLまたは無効なJavaScriptコードを生成することがありました。このバージョンでは、HTMLパーサにタグを通過した後、JavaScriptコードと表現がJSパーサに送られる前に、早い段階でそれらを削除します。