polymer-elementタグをReactのJSXで書こう

JavaScriptに<polymer-element>タグをReactのJSX記法で書ける便利スクリプトを書きました。babelと一緒に使います。

babelは、次世代のJavaScriptを今のJavaScriptに変換してくれるトランスパイラです。 babelではReact.jsのJSXも展開することができます。 JSXとは、JavaScript中にHTMLタグを直接書けるようにする記法のことで、例えば

var aElem = <a href="blog.html">Blog</a>;

のように書くことができて、これをbabelで解釈して今のJavaScriptに置き換えることができます。しかし、babelのデフォルトではaElemはReact Elementとなってしまいます。

aElemを document.createElement( ) によって生成されるElementオブジェクトにしたかったため、冒頭に挙げたpolyjsxを書きました。

JavaScript中のJSXが現れる場所に/** @jsx polyjsx */を与えることで、babelのJSX解釈のデフォルトである React.createElement( )の代わりに polyjsx( ) を用いることができます。詳しくはREADME.mdをご覧ください。

前回の記事で紹介したShady DOMまわりを考えて書いたため、polyjsx( ) は上のaElemの例のような普通のHTML要素に対して使えるだけでなく、 Polymer 1.0 によって記述された以下のようなWeb Components（Polymer-element）に対しても使えます。これがポイントです。

/** @jsx polyjsx */
var message = '国産ビーフ';
var steak = (
    <price-tax price="2500" rate="8" switchable>
        素敵なステーキ
        <span style="color: red">{message}</span>
    </price-tax>
);

document.querySelector('body').appendChild(steak);

リポジトリ直下の polyjsx.js は単体ですぐに使えるようになっていますので、

<head>
    <script src="polyjsx.js"></script>
</head>

のように呼び出してご利用ください。

#daiizメモ

Scrapboxに夢中

polymer-elementタグをReactのJSXで書こう