riotで名前付きのyieldをネストさせると......

yield[from=XXX]の名前付きでyieldをさせると、解析に失敗する。

このように使える。テストコードから持ってきた例だけど、実際には<panel>みたいなタグで使える。

タグ

<yield-multi3>
  <div class="header"><yield from="header" /></div>
  <div class="content"><yield /></div>
</yield-multi3>

こうすると、ネストするときには、こうするんだけど、

使う方

    <yield-multi3>
      <yield to="header">
        <span>header1</span>
      </yield>
      <yield-multi3>
        <yield to="header">
          <span>header2</span>
        </yield>
        <span>content</span>
      </yield-multi3>
    </yield-multi3>

こうなっている。

予定

    <yield-multi3>
      <div class="header"><span>header1</span></div>
      <yield-multi3>
        <div class="header"><span>header2</span></div>
        <div class="content"><span>content</span></div>
      </yield-multi3>
    </yield-multi3>

でも、こんな風になってしまう。

結果：header2が消えている

    <yield-multi3>
      <div class="header"><span>header1</span></div>
      <yield-multi3>
        <div class="content"><span>content</span></div>
      </yield-multi3>
    </yield-multi3>

何が問題

正規表現で、解析しているので、その限界。ということで、木構造の段階で解析してやればよい。

1. 対象のhtmlのノードの子供をなめる。
2. 子供がyieldタグであれば、to属性の名前をキーとして子供のinnerHTMLにして、消す。
3. 対象のhtmlのノードでinnerHTMLをyield用のhtmlとする。

たとえば、前の例では、こんなオブジェクトに変換させる。

{
  "header": "<span>header1</span>",
  "": '<yield-multi3>'+
      '  <div class="header"><span>header2</span></div>'+
      '  <div class="content"><span>content</span></div>'+
      '</yield-multi3>'
}

ようなパッチを書いてみた。
でも、かなりのコードが影響受けるので、ちょっと微妙だけど、場所的には妥当かな。
途中の呼ばれる関数の引数がinnerHTML(String)からObjectに代わるので、ちょっと気になるけど。

URL

修正前 http://plnkr.co/edit/5jCnKV93z0wAmpjkDYp9?p=preview
修正後 http://plnkr.co/edit/drOMHJ0TgMslyM4yld9p?p=preview
GIT https://github.com/uk-taniyama/riot/tree/fix/nested-slot-yield