読者です 読者をやめる 読者になる 読者になる

ほんとのこと知りたいだけなのに。

夏休みはもうおわり。

Riot.js カスタムタグのAPI

riotux-todoを眺めているとriot.tag2なるメソッドが出現する。 意味不明だったのでカスタムタグ関連のAPIを俯瞰してみることにする。

API一覧

本家(日本語)を一覧にしてみる。

API description
riot.mount(customTagSelector, [opts]) customTagSelector ページから要素を選択し、カスタムタグをそこにマウントする。
riot.mount('*', [opts]) ページ上のすべてのカスタムタグをマウントする。
riot.mount(selector, tagName, [opts]) selector で指定されたDOMにタグをマウントする。
riot.render(tagName, [opts]) タグをHTMLとしてレンダリング。このメソッドは サーバサイド (Node/io.js) でのみ利用可。
this.update() 現在のタグインスタンス内と、子タグについても同様に、すべてのテンプレート変数を更新する。
this.update(data) 現在のインスタンスに値をセットして、テンプレート変数を更新する。
riot.update() ページ上のすべてのタグとそのテンプレート変数を更新する。
this.unmount(keepTheParent) タグとその子孫をページから取り除く。"unmount"イベントが発火する。
riot.tag(tagName, html, [css], [attrs], [constructor]) 新しいカスタムタグを「手動」でコンパイラを使わずに作成する。
riot.Tag(impl, conf, innerHTML) 【実験的:Riot2.3】では、内部で使用されているTag関数を利用して、より自由にカスタムタグを作る。

riot.tag2

しかし、一覧にしてみるも riot.tag2 は存在しない。

riotux-todo, riotux 両方grepしてみるもヒットしない。

riot.js を探してみる。するとありました。riot.js に。

/**
 * Create a new riot tag implementation (for use by the compiler)
 * @param   { String }   name - name/id of the new riot tag
 * @param   { String }   html - tag template
 * @param   { String }   css - custom tag css
 * @param   { String }   attrs - root tag attributes
 * @param   { Function } fn - user function
 * @returns { String } name/id of the tag just created
 */
riot.tag2 = function(name, html, css, attrs, fn) {
  if (css) styleManager.add(css)
  //if (bpair) riot.settings.brackets = bpair
  __tagImpl[name] = { name: name, tmpl: html, attrs: attrs, fn: fn }
  return name
}

ここに少し説明がありました。

Riot.js ソースコード完全解説 v3対応版 #カスタムタグの読み込み #riot.tag2()

カスタムタグを登録する。基本的には手動で使わない。

だそうです。

なんだよriotux-todo使わんといてほしいなぁ。

ちなみに日本語サイトだからドキュメント無いんかな?と思い英語サイトを見てみるも存在しませんでした。

もういちど一覧

riotのメソッドとアトリビュートを一覧にしてみた。 なんか使えそうなものがあるかも。。。。ないか。。。

たしかにtag2は「for use by the compiler」と書いているな。 tag2tagに脳内変換しても支障なさそう。

elements type description
observable = function(el) func ---
brackets var? riot.util.brackets
tmp var? ---
mkitem(expr, key, val) func ---
mkdom func? lib/browser/tag/mkdom.js
mkitem(expr, key, val) func Convert the item looped into an object used to extend the child tag properties
unmountRedundant(items, tags) func Unmount the redundant tags
moveNestedTags(child, i) func Move the nested custom tags in non custom loop tags
addVirtual(tag, src, target) func Adds the elements for a virtual tag
moveVirtual(tag, src, target, len) func Move virtual tag and all child nodes
_each(dom, parent, expr) func Manage tags having the 'each'
styleManager var Object that will be used to inject and manage the css of every tag instance
parseNamedElements(root, tag, childTags, forceParsingNamed) func ---
parseExpressions(root, tag, expressions) func ---
Tag(impl, conf, innerHTML) func ---
setEventHandler(name, handler, dom, tag) func Attach an event to a DOM node
insertTo(root, node, before) func Insert a DOM node replacing another one (used by if- attribute)
update(expressions, tag) func Update the expressions in a Tag instance
each(els, fn) func Specialized function for looping an array-like collection with each={}
isFunction(v) func Detect if the argument passed is a function
getOuterHTML(el) func Get the outer html of any DOM node SVGs included
setInnerHTML(container, html) func Set the inner html of any DOM node SVGs included
isSVGTag(name) func Checks wether a DOM node must be considered part of an svg document
isObject(v) func Detect if the argument passed is an object, exclude null.
remAttr(dom, name) func Remove any DOM attribute from a node
toCamel(string) func Convert a string containing dashes to camel case
getAttr(dom, name) func Get the value of any DOM attribute on a node
setAttr(dom, name, val) func Set any DOM attribute
getTag(dom) func Detect the tag implementation by a DOM node
addChildTag(tag, tagName, parent) func Add a child tag to its parent into the tags object
moveChildTag(tag, tagName, newPos) func Move the position of a custom tag in its parent tag
initChildTag(child, opts, innerHTML, parent) func Create a new child tag including it correctly into its parent
getImmediateCustomParentTag(tag) func Loop backward all the parents tree to detect the first custom parent tag
defineProperty(el, key, value, options) func Helper function to set an immutable property
getTagName(dom) func Get the tag name of any DOM node
extend(src) func Extend any object with other properties
contains(arr, item) func Check whether an array contains an item
isArray(a) func Check whether an object is a kind of array
isWritable(obj, key) func Detect whether a property of an object could be overridden
cleanUpData(data) func With this function we avoid that the internal Tag methods get overridden
walk(dom, fn) func Walk down recursively all the children tags starting dom node
walkAttributes(html, fn) func Minimize risk: only zero or one space between attr & value
isInStub(dom) func Check whether a DOM node is in stub mode, useful for the riot 'if' directive
mkEl(name, isSvg) func Create a generic DOM node
$$(selector, ctx) func Shorter and fast way to select multiple nodes in the DOM
$(selector, ctx) func Simple object prototypal inheritance
inherit(parent) func Simple object prototypal inheritance
getNamedKey(dom) func Get the name property needed to identify a DOM node in riot
setNamed(dom, parent, keys) func Set the named properties of a tag element
startsWith(src, str) func Faster String startsWith alternative
rAF var? requestAnimationFrame function
mountTo(root, tagName, opts) func Mount a tag creating new Tag instance
util var? share methods for other riot parts, e.g. compiler
mixin var? Create a mixin that could be globally shared across all the tags
tag(name, html, css, attrs, fn) func Create a new riot tag implementation
tag2(name, html, css, attrs, fn) func Create a new riot tag implementation (for use by the compiler)
mount(selector, tagName, opts) func Mount a tag using a specific tag implementation
update() func Update all the tags instances created
vdom var? Export the Virtual DOM
Tag var? Export the Tag constructor

おわり

API眺めて感じるのは以下のような言葉がまだ理解できていない様子。 これもちょっと整理するか。

  • インスタンス
  • マウント
  • テンプレート
  • テンプレート変数