https://github.com/livewire/livewire/releases/tag/v4.0.0
コンポーネントのクラス、テンプレート、スタイル、JavaScriptを1つのファイルに記述可能。単一ファイル形式がデフォルトとなり、php artisan livewire:convertでいつでも形式を変換できる。
アプリ全体でコンポーネントを名前で参照可能。新しいRoute::livewire()マクロでフルページコンポーネントのルートを定義できる。
pages::とlayouts::名前空間がデフォルトで提供され、カスタム名前空間のサポートによりコンポーネントを柔軟に整理できる。
テンプレート内に<script>と<style>タグを直接追加可能。スタイルは自動的にコンポーネントにスコープされ、スクリプトはthisでコンポーネントコンテキストにアクセスできる。
コンポーネント内で独立して更新される分離された領域を作成可能。遅延読み込み、クロスコンポーネントターゲティング、無限スクロールパターンのコンテンツ追加をサポート。
完全なBladeコンポーネントの互換性を実現。子コンポーネントにリアクティブなコンテンツを注入し、HTML属性をシームレスに転送できる。
wire:sortを使用して要素のグループをドラッグ可能でソート可能にし、スムーズなアニメーションを実現。外部ライブラリは不要。
wire:transitionディレクティブでブラウザのView Transitions APIを使用したハードウェアアクセラレーションアニメーションを追加。
即座に更新されるUIを実現するディレクティブ:
wire:show - CSSで表示を切り替えwire:text - テキストコンテンツを更新wire:bind - 任意のHTML属性をリアクティブにバインド$dirty - 未保存の変更を追跡ネットワークリクエストをトリガーする要素に自動的にdata-loading属性が付与され、CSSから直接ローディング状態をスタイリング可能。
@placeholderディレクティブでローディング状態を定義。別のプレースホルダービューは不要。
JavaScriptが必要な場合の機能:
wire:ref - 要素に名前を付けてPHPまたはJavaScriptからターゲット指定#[Json] - JavaScriptに直接データを返す$jsアクション - クライアント側のみのアクションを実行数十のバグ修正、パフォーマンス改善、開発体験の向上が含まれています。