Livewire 2.x 1.xからのアップグレード

V2がリリースされました。🎉

技術的なアップグレードについて説明する前に、皆さんはこれらの変更の背後にある哲学的な基盤に興味があるかもしれませんね。

Composerのバージョンを更新する

  1. composer.jsonファイルのlivewire/livewire依存指定を^2.0に更新します
  2. composer update livewire/livewireを実行します
  3. php artisan view:clearを実行します
  4. php artisan livewire:publish --assetsを実行します(以前にアセットをリソース公開していた場合)

Alpinのバージョンを更新する

Livewire V2でAlpineJSを使用している場合は、バージョン2.7.0以降を使用していることを確認してください。

例:

<script src="https://cdn.jsdelivr.net/gh/alpinejs/[email protected]/dist/alpine.min.js" defer></script>

アプリケーションのコードを更新する

重大な変更とそのアップグレード手順を影響順に示します。

  1. 更新: $updatesQueryStringから$queryString
  2. 削除: Route::livewire()
  3. 削除: Turbolinksサポート
  4. 変更: assertSet()
  5. 削除: Propertyキャスタ
  6. 更新: Paginationビュー
  7. 更新: JavaScriptフック
  8. 更新: VueJsサポート

更新:$updatesQueryStringから$queryString

Livewire 1.xには、プロパティ値に基づいてブラウザのクエリ文字列を操作するためのより原始的なユーティリティがありました。V2には、クエリ文字列を操作するためのはるかに高度なユーティリティがあります。

最初の重大な変更は、$updatesQueryString$queryStringに変更されたことです。

class Search extends Component
{
    // 以前
    protected $updatesQueryString = ['search']

    // 現在
    protected $queryString = ['search']
}

新しいプロパティ名の他に、内部の仕組みに2つの重要な変更があります。

  1. プロパティ値は、ページの読み込み時にクエリ文字列から自動的に初期値に設定されるようになりました
  2. クエリ文字列システムは、history.replaceStateの代わりに、ブラウザのhistory.pushState APIを使用するようになりました(つまり、ブラウザの[戻る]ボタンをクリックして、古いクエリ文字列の変更に再度アクセスできます)。

クエリ文字列システムが自動的に初期値を設定するようになったため、mount()メソッドでそれを行う必要はなくなりました。

class Search extends Component
{
    ...

    public function mount()
    {
        // このようなコードはもう必要ありません。
        // これで、searchプロパティが自動的に設定されます。
        $this->search = request()->query('search', '');
    }
}

削除:Route::livewire()

Livewire 1.xでは、Route::livewire()メソッドを使用して、ページ全体のルートにコンポーネントを登録できました。 Livewire 2.0では、標準のRoute::get()メソッドと完全修飾名前空間を使用して、Livewireコンポーネントをルートに直接渡すことができるようになりました。

// 以前
Route::livewire('/post', 'show-posts');

// 現在
Route::get('/post', \App\Http\Livewire\ShowPosts::class);

最初に注意することは、Laravel7を使用している場合は、app/Providers/RouteServiceProvider.phpからnamespace(...)行を削除する必要があるということです。

protected function mapWebRoutes()
{
    Route::middleware('web')
        ->namespace($this->namespace) // Remove me
        ->group(base_path('routes/web.php'));
}

これはLaravel8でデフォルトで実行されますが、Laravel7を使用している場合はLivewireクラスをRoute::get()に渡すことができるように、これを削除する必要があります。それ以外の場合、LaravelはRoute::get()に渡されるすべてのクラスに名前空間を付加します。

1.xのLivewireはデフォルトで、resources/layouts/app.blade.phpにある従来のBladeレイアウトを使用してページレベルのコンポーネントをレンダリングします。2.0のLivewireはデフォルトと同じレイアウトファイルを使用しますが、レイアウトで新しいBladeコンポーネントの$slot構文を使用していることを前提としています。例をご覧ください。

<!-- 以前 -->
<html>
    <body>
        @yield('content')

        @livewireScripts
    </body>
</html>

<!-- 現在 -->
<html>
    <body>
        {{ $slot }}

        @livewireScripts
    </body>
</html>

ルートファイルでルートのレイアウトを手動で設定していた場合、->layout()メソッドは ->extends()と呼ばれる新しいメソッドに移動され、render関数内に配置します。

// 以前
Route::livewire('/post', ShowPosts::class)
    ->layout('layouts.base')
    ->section('body');

// 現在
class ShowPosts extends Component
{
    public function render()
    {
        return view('livewire.show-posts')
            ->extends('layouts.base')
            ->section('body');
    }
}

手動で構成したレイアウトを新しい$slot構文に更新する場合は、新しい->layout()メソッドを使用して指定できます。このメソッドはデフォルトで$slotを使用しますが、->slot()メソッドを使用して名前付きスロットにレンダーするようにコンポーネントを設定することもできます。

class ShowPosts extends Component
{
    public function render()
    {
        return view('livewire.show-posts')
            ->layout('layouts.base')
            ->slot('body');
    }
}

削除:Turbolinksサポート

Livewireは、Turbolinksをはじめからサポートしなくなりました。

LivewireアプリケーションでTurbolinksを引き続き使用する場合は、LivewireのJavaScriptアセットと一緒にTurbolinksアダプターを含める必要があります。

...
    @livewireScripts
    <script src="https://cdn.jsdelivr.net/gh/livewire/[email protected]/dist/livewire-turbolinks.js" data-turbolinks-eval="false"></script>
</body>

このアダプターは新しいため、Turbolinks機能に関連する問題が発生する可能性があります。その場合は、アダプターのリポジトリへ問題を報告してください。

変更:assertSet()

Livewire V1では、テストメソッドassertSet('property', 'value')は、実際のLivewireコンポーネントのPHPインスタンスのプロパティの値に対してアサートするのではなく、JavaScriptで安全なLivewireペイロードのデータに対してテストしていました。これにより、assertSet()から計算プロパティをテストすることが不可能でした。

V2では、assertSet())が期待どおりに動作するようになりました。実際のPHPインスタンスのデータに対してアサーションを作成し、ペイロードデータに対してアサーションを行う場合は、新しいassertPayloadSet()を使用できるようになりました。

ほとんどの人にとって、これはなにも変えることはありません。ただし、アップグレード中にテストスイートでassertSet()の周辺でエラーが発生した場合は、テストをリファクタリングするか、assertPayloadSet()を使用する必要があります。

削除:Propertyキャスタ

プロパティキャスターはLivewireV2で削除されました。この決定には3つの理由があります。

  1. 人々は主に、CollectionDateTimeのインスタンスであるプロパティにこれらを使用しました。これらは、はじめから自動的にキャストされるようになりました
  2. そもそもこの機能を使用している(または認識している)ユーザーは多くありません。
  3. これとまったく同じ機能を実現する方法は他にもあります

次に例をいくつか示します。

// 以前
public $foo;

protected $casts = ['foo' => 'collection'];

public function mount()
{
    $this->foo = collect(['foo', 'bar']);
}

// 現在
// (Collectionsは自動的にキャストされるようになりました)
public $foo;

public function mount()
{
    $this->foo = collect(['foo', 'bar']);
}
// 以前
class AllCaps implements Castable {
    public function cast($value)
    {
        return strtoupper($value);
    }

    public function uncast($value)
    {
        return strtolower($value);
    }
}

class SomeComponent extends Component
{
    public $foo;

    protected $casts = ['foo' => AllCaps::class];

    ....
}

// 現在
class SomeComponent extends Component
{
    public $foo;

    public function hydrateFoo($value)
    {
        $this->foo = strtoupper($value);
    }

    public function dehydrateFoo($value)
    {
        $this->foo = strtolower($value);
    }

    ....
}

更新:Paginationビュー

コンポーネントにWithPaginationを追加して結果をペジネーションし、$posts->links()を使用してデフォルトのLivewireページ付けリンクビューに依存している場合、ビューはBootstrap-4からTailwindに更新されます。

Livewire V2は引き続きBootstrap-4ページネーションをサポートしていますが、コンポーネントの$paginationThemeプロパティを使用して設定する必要があります。

class ShowPosts extends Component
{
    use WithPagination;

    protected $paginationTheme = 'bootstrap';

    ...
}

V2は引き続きBootstrap-4をサポートしていますが、ペジネーションビューはLaravel8に一致するように更新されています。したがって、以前にV1で使用されていたビューとは少し異なります。V1のビューをまったく同じに使用するには:

  1. GitHubからビューソースをコピーします。
  2. 適切と思われる場所に新しいBladeファイルをペーストします。たとえば、resources/views/pagination-links.blade.phpです。
  3. 次に、->links()メソッドに渡して、Bladeビューの中で参照します。
{{ $posts->links('pagination-links') }}

更新:JavaScriptフック

V2はV1と同じJavaScriptフックを提供しますが、3つの異なる変更があります。

  1. 名前を変更しました。
  2. パラメータの順序を変更し、一貫性を向上させました。
  3. "DomElement"ラッパーのインスタンスが渡されていた場所で、ネイティブDOM要素が渡されるようになりました。

比較のためにフックの使用法を並べて示します。

V1の名前 V2の名前と使い方
livewire.hook('componentInitialized', (component) => {}) Livewire.hook('component.initialized', (component) => {})
livewire.hook('elementInitialized', (el, component) => {}) Livewire.hook('element.initialized', (el, component) => {})
livewire.hook('beforeElementUpdate', (from, to, component) => {}) Livewire.hook('element.updating', (fromEl, toEl, component) => {})
livewire.hook('afterElementUpdate', (node, component) => {}) Livewire.hook('element.updated', (el, component) => {})
livewire.hook('elementRemoved', (el, component) => {}) Livewire.hook('element.removed', (el, component) => {})
livewire.hook('messageSent', (component, message) => {}) Livewire.hook('message.sent', (message, component) => {})
livewire.hook('messageFailed', (component) => {}) Livewire.hook('message.failed', (message, component) => {})
livewire.hook('responseReceived', (component, response) => {}) Livewire.hook('message.received', (message, component) => {})
livewire.hook('afterDomUpdate', (component) => {}) Livewire.hook('message.processed', (message, component) => {})
livewire.hook('beforeDomUpdate', (component) => {}) Livewire.hook('message.received', (message, component) => {})

注:いくつかのインスタンスでは、responseオブジェクトの代わりにmessageオブジェクトが渡されるようになりました。responsemessageのプロパティとしてアクセスできます。(message.response

更新:VueJSサポート

みなさんのLivewireが現在、vue-pluginに依存している場合は、バージョン 0.2.xから0.3.xにアップグレードする必要があります。

...
    @livewireScripts

    // 以前
    <script src="https://cdn.jsdelivr.net/gh/livewire/[email protected]/dist/livewire-vue.js"></script>

    // 現在
    <script src="https://cdn.jsdelivr.net/gh/livewire/[email protected]/dist/livewire-vue.js"></script>
</body>

サインオフ

このアップグレードが、あなたにさほど大きく影響しないことを祈ってます。

このドキュメントに質問や修正を加える場合は、GitHubのリポジトリでIssueを送信してください

いつも、あなたのサポートとLivewireを使ってくれることに感謝しています!

Caleb

ドキュメント章別ページ

ヘッダー項目移動

注目:アイコン:ページ内リンク設置(リンクがないヘッダーへの移動では、リンクがある以前のヘッダーのハッシュをURLへ付加します。

移動

クリックで即時移動します。

言語
バージョン

設定

適用ボタンクリック後に、全項目まとめて適用されます。

カラーテーマ
和文指定 Pagination
和文指定 Scaffold
Largeスクリーン表示幅
インデント
本文フォント
コードフォント
フォント適用確認

フォントの指定フィールドから、フォーカスが外れると、当ブロックの内容に反映されます。EnglishのDisplayもPreviewしてください。

フォント設定時、表示に不具合が出た場合、当サイトのクッキーを削除してください。

バックスラッシュを含むインライン\Code\Blockの例です。

以下はコードブロックの例です。

<?php

namespace App;

use Illuminate\Database\Eloquent\Model;

class User extends Model
{
    /**
     * ユーザに関連する電話レコードを取得
     */
    public function phone()
    {
        return $this->hasOne('App\Phone');
    }
}

設定を保存する前に、表示が乱れないか必ず確認してください。CSSによるフォントファミリー指定の知識がない場合は、フォントを変更しないほうが良いでしょう。

キーボード・ショートカット

オープン操作

PDC

ページ(章)移動の左オフキャンバスオープン

HA

ヘッダー移動モーダルオープン

MS

移動/設定の右オフキャンバスオープン

ヘッダー移動

T

最初のヘッダーへ移動

E

最後のヘッダーへ移動

NJ

次ヘッダー(H2〜H4)へ移動

BK

前ヘッダー(H2〜H4)へ移動

その他

?

このヘルプページ表示
閉じる