プログラミング/riot.js のバックアップソース(No.6)

更新

[[公開メモ]]

#contents

* Riot 4 では大幅に内容が変わったそうです [#j06809f4]

チートシート的な覚書。

** コンポーネントの書き方の基本 [#g34b71e7]

ユーザー定義のタグやプロパティにはハイフンを含めるのが本来の流儀。含めなくても動くけど。

 LANG:html
 <some-tag>
   <!-- { } の中では this. が補完される -->
   <div foo={ state.brabra } onclick={ ()=> any_command() }>
     { any javascript code }
     <slot any-prop={ any } />  <!-- タグ内に記述された内容が入る -->
     { props.someProp }
     <input id="input1" onchange={ onChangeValue }></input>
   </div>
   <style type="scss">
     :host {
       /* this.root に適用される */
     }
     div {
       /* this.root div に適用される */
     }
   </style>
   <script>
     import * as Validator from 'validatorjs';
     
     export default {
       // システムコールバック
       onBeforeMount(props, state) {
         // props や state は this.props, this.state そのものなのでメンバーへの代入も可
         // this.state = { a: b } のように書き換えると this.state !== state になってしまうので注意
         Object.assign(state, {
           brabra: default_value
         })
 
         // this.root で <some-tag> の DOM を参照できる
         // this.props.someProp で <some-tag some-prop="value"> の "value" を得られる
 
         // this.state にコンポーネントの状態変数を入れる
         // this.update({prop: value}) で state.prop = value をした上で DOM が書き換えられる
        
         // this.$("any selector") で this.root 以下に querySelector できる
         // this.$$("any selector") で this.root 以下に querySelectorAll できる
       },
       onMounted(props, state) {
       },
       onBeforeUpdate(props, state) {
         // this.state の内容を元に DOM が書き換えられる前に呼ばれる
         // バリデーションなどをするのに良い場所
         const rule = {
           // rules for validatorjs
         };
 
         state.validation = new Validator(state, rule);
         state.validation.passes();  // check!
         for(let id of Object.keys(rule)) {
           const errors = state.validation.errors.errors[id];
           this.$('#'+id).classList.toggle('has-error', !!errors);
           if(errors) {
             this.$('#'+id+'-errors').innerText = errors.join('<br>');
             if(this.lastState && this.lastState[id])
               state[id] = this.lastState[id]; // 直前の値に戻す
           }
         }
       },
       onUpdated(props, state) {
  
         this.lastState = [...state]; // 直前の値を取っておく
       },
       onBeforeUnmount(props, state) {
       },
  
       // イベントハンドラの例
       onChangeValue(e) {
         // input 要素の id 名の要素に value を代入して update
         this.update({[e.target.id]: e.target.value});
       },
 
       // 汎用に使えるイベントディスパッチ用ヘルパー
       // dispatch("click", {any: data}) のように呼ぶことで、
       // <some-tag on-click={ clickHandler }> として与えられたイベントリスナを呼び出す
       // onclick ではなく on-click であることに注意
       dispatchEvent(event, detail) {
         const camelCase = (str) => {
           return str.split('-').map((w,i) => 
             (i === 0) ? w.toLowerCase() 
                       : w.charAt(0).toUpperCase() + w.slice(1).toLowerCase()
           ).join('')
         }
         const handler = this.props[camelCase("on-" + event)];
         if(!handler) return;
         handler(new CustomEvent("name", {detail: data}));
       },
     }
   </script>
 </some-tag>

タグの呼び出し側では以下のようにして使う

 <tag any-prop="value" on-custom-event={customEventHandler}>
   ここに書かれた内容が slot に入る。
   <span>{anyProp}</span> のようにして渡されたプロパティを使える。
 </tag>

this.props.anyProp や this.props.onCustomEvent に値が入る。

** コンポーネントからコールバックを受けるためのイベントハンドラ [#wc372bec]

タグからコールバックを受けるには上記のように on-custom-event みたいなイベントリスナーを渡して、
タグ内で dispatchEvent("custom-event", anyData) とすれば、以下のようにデータを受け取れる。

 customEventHandler(e) {
   // e.detail に anyData が入っている
 }

** コンポーネント側のメソッドを呼びたい場合 [#k14225e2]

逆にタグの呼び出し側からコンポーネント側のメソッドを呼びたいときは、
props 経由でインターフェースを共有するのが良さそう?

呼び出し側から intf というプロパティを与えておいて、その中に function を返してもらう。

 <parent-tag>
   <some-tag intf={someTagIntf}>
   </some-tag>
 
   <script>
     export default {
       onBeforeMount(props, state) {
         const someTagIntf = {
           someFunc: null        // some-tag 側で値を設定する
         }
       },
       anyMemberFunction() {
         someTagIntf.someFunc(); // some-tag 内のメソッドを呼び出せる
       },
     }
   </script>
 </parent-tag>

タグ側では、

 <some-tag>
  <script>
    export default {
      onBeforeUpdate(props, state) {
        props.intf.someFunc = this.someFunc;
      },
      someFunc(arg) {
        // parent-tag から someTagIntf.someFunc として呼び出せる
      },
    }
   </script>
 </some-tag>

みたいな。

** プラグインのインストール [#o4f6abaf]

上記の dispachEvent などは非常に汎用的に使えるので、すべてのコンポーネントに定義してしまいたくなる。

  riot.install( (component) => {
    component.camelCase = (str) => {
      return str.split('-').map((w,i) => 
        (i === 0) ? w.toLowerCase() 
                  : w.charAt(0).toUpperCase() + w.slice(1).toLowerCase()
      ).join('')
    }
 
    component.kebabCase = (str) => {
      return str.split(/(?=[A-Z])/).join('-').toLowerCase()
    }
 
    component.dispatchEvent = (name, data) => {
      const handler = component.props[component.camelCase("on-" + name)];
      if(!handler) return;
      handler(new CustomEvent("name", {detail: data}));
    }
 
    return component;
  })

のようにすると、すべてのコンポーネントで camelCase, kebabCase, dispatchEvent などを使えるようになる。

install 時には this にあたるところに component と書かなければならないことに注意が必要。

* 注意点 [#t5b9a7f0]

** <slot /> はトップレベルでは使えないみたい? @ 2023-03-29 [#a13e5c23]

たぶんバグなのだけれど、<slot /> を含むタグをトップレベルで使おうとするとおかしなことになる。

親コンポーネントに含まれる子タグ側で <slot /> を使う分にはちゃんと動作する。

** riot compiler で &lt;template> に書いたタグ定義をコンパイルする際の問題 [#afee6ffb]

&lt;template> 内のプロパティに { } 記法を使うとバグる。

 <template id="my-tag">
   <my-tag any-prop={ this will not work }>
     <p>{ this will work }</p>
   </my-tag>
 </template>

&lt;template> の innterHtml は、一旦 DOM になったものを再度テキスト化したものになるため、
そもそも html として成り立たない any-prop={ } の部分がおかしくなる。

   <my-tag any-prop={ this will not work }>

ではなく、

   <my-tag any-prop="{ this will not work }">

と書けば大丈夫なのだけれどちょっと面倒。

* 古い内容 [#kc3b56c3]

[[プログラミング/riot.js/古い内容]] に移しました。


Counter: 2175 (from 2010/06/03), today: 1, yesterday: 2