Riot.js v4 内部プロパティまとめ

Riot.js Advent Calendar 2019 の16日目が空いていたので埋めます。

はじめに

前回の調査でSymbol('riot-component')がキーとして使われていることが判りました。
これ以外にもいくつか似たようなものがあったので、まとめておきます。

Symbol('riot-component')

DOM_COMPONENT_INSTANCE_PROPERTY = Symbol('riot-component')
   :
element[DOM_COMPONENT_INSTANCE_PROPERTY] = this; // add eventually the 'is' attribute

riotファイルがマウントされている(子コンポーネント)エレメントのプロパティに定義されています。
前回でも触れました。中身は対象コンポーネント(つまり子)のthisです。

Symbol('parent')

PARENT_KEY_SYMBOL = Symbol('parent')
   :
this[PARENT_KEY_SYMBOL] = parentScope

thisのプロパティに定義されています。
自分が他のコンポーネントから呼び出されている場合に親コンポーネントのthisが入っています。
自分より親がいない場合はundefinedとなっています。

Symbol('attributes')

ATTRIBUTES_KEY_SYMBOL = Symbol('attributes')
     :
this[ATTRIBUTES_KEY_SYMBOL] = createAttributeBindings(element, attributes).mount(parentScope);

thisのプロパティに定義されています。
コンポーネントのマウント時に渡された情報（の複製）が入っています。

Symbol('template')

TEMPLATE_KEY_SYMBOL = Symbol('template')
   :
this[TEMPLATE_KEY_SYMBOL] = this.template.createDOM(element).clone(); // link this object to the DOM node

thisのプロパティに定義されています。
コンポーネントのHTMLテンプレートに関する情報（の複製）が入っています。

まとめ

この中で使えそうなのは、Symbol('riot-component')とSymbol('parent')ですね。

親から子を呼ぶには、Symbol('riot-component')

親から子

const elm = this.$("my-child");
let child = elm[Object.getOwnPropertySymbols(elm).find(symbol => symbol.toString() === "Symbol(riot-component)")];
console.log(child);

子から親を呼ぶには、Symbol('parent')です。

子から親

let parent = this[Object.getOwnPropertySymbols(this).find(symbol => symbol.toString() === "Symbol(parent)")];
console.log(parent);