Livewire ライブワイヤーの JS を修正したい

/ Livewire / By
ショコラ
ショコラ

Livewire ライブワイヤーの JS を修正したい

私がやりたかったこと。
JavaScript から PHP側のメソッド を呼び出す時に、他のコンポーネントの状態を参照するため「wire:click=”create(Livewire.data())”」のように Livewire.data() をわざわざユーザーに書かせたくなかった。
サーバーと通信する時に仕込むことができるかな？と思いました。
JSのクラスは「プロトタイプベース」ということで、ここが突破口になりそうです。
因みに、/livewire/livewire.js はトランスパイルされた vendor/livewire/livewire/dist/livewire.js を見ています。

もっさん先輩
もっさん先輩

livewire.js の中の callメソッド を上書きしたいと思いました。

{key:"call",value:function(method){for(var _this4=this,_len=arguments.length,params=new Array(_len>1?_len-1:0),_key=1;_key<_len;_key++)params[_key-1]=arguments[_key];return new Promise((function(resolve,reject){var action=new _default$4(method,params,_this4.el);_this4.addAction(action),action.onResolve((function(thing){return resolve(thing)})),action.onReject((function(thing){return reject(thing)}))}))}},

↑上のコードを見易く整形すると、↓下のコードになります。

{
  key:"call",
  value: function(method) {
    for (var _this4=this,_len=arguments.length,params=new Array(_len>1?_len-1:0),_key=1; _key<_len; _key++)
      params[_key-1]=arguments[_key];
    return new Promise((function(resolve,reject) {
      var action = new _default$4(method,params,_this4.el);
      _this4.addAction(action),
      action.onResolve((function(thing){return resolve(thing)})),
      action.onReject((function(thing){return reject(thing)}))
    }))
  }
},

話は少しそれますが、↑上のソースで衝撃だったのが８行目と９行目で、行の終わりに「,」のカンマを使っているところです。セミコロンならわかりますけど、カンマです・・・「var i=0,j=0,k=0;」と同じことか、確かに最後の行がカンマで終わらなければ、カンマでいけますね。

↓下のように★のマークの行を入れることができれば勝てるのですけれど、、、

{
  key:"call",
  value:function(method) {
    for (var _this4=this,_len=arguments.length,params=new Array(_len>1?_len-1:0),_key=1; _key<_len; _key++)
      params[_key-1]=arguments[_key];

    params.push(Livewire.data()) //★

    return new Promise((function(resolve,reject) {
      var action = new _default$4(method,params,_this4.el);
      _this4.addAction(action),
      action.onResolve((function(thing){return resolve(thing)})),
      action.onReject((function(thing){return reject(thing)}))
    }))
  }
},

勝てました。

やり方です。component.initialized のフックのタイミングで、コンポーネントに設定されている addActionメソッド を別名 _addAction で登録します。
新addActionメソッド では、メソッド呼び出しの場合にパラメーターに Livewire.data() を追加して元の addAction を呼び出すように変更します。

<script type="module">
Livewire.hook('component.initialized', component => {
/*
  component._call = component.call
  component.call = function(method, ...params) {
    params.push(Livewire.data())
    this._call(method,...params)
  }
*/
  component._addAction = component.addAction
  component.addAction = function(action) {
    if (('method' in action.payload) && ('$' != action.payload.method.charAt(0)))
      action.payload.params.push(Livewire.data())
    return this._addAction(action)
  }
})
</script>

↑当初は callメソッド を変更していましたが、callメソッド も addActionメソッド を通りますので、addAction が正解です。

以上

Scroll to Top