Twinkle

位置情報使ってる箇所があったので書き換えてみた。
https://developer.chrome.com/blog/geolocation-html-element?hl=ja

素のhtmlとJavaScriptでは

<geolocation
  onlocation="handleLocation(event)"
  autolocate
  accuracymode="precise">
</geolocation>

function handleLocation(event) {
  // Directly access the GeolocationPosition object on the element
  if (event.target.position) {
    const { latitude, longitude } = event.target.position.coords;
    console.log("Location retrieved:", latitude, longitude);
  } else if (event.target.error) {
    console.error("Error:", event.target.error.message);
  }
}

Livewire4のシングルファイルコンポーネントでは

<div>
    <geolocation
        @location="$js.handleLocation(event)"
        autolocate
        accuracymode="precise">
    </geolocation>
</div>

<script>
    $wire.$js.handleLocation = (event) => {
        // Directly access the GeolocationPosition object on the element
        if (event.target.position) {
            const {latitude, longitude} = event.target.position.coords;
            console.log("Location retrieved:", latitude, longitude);
        } else if (event.target.error) {
            console.error("Error:", event.target.error.message);
        }
    }
</script>

@locationもしくはx-on:locationでlocationイベントを処理すればいい。

まだポリフィルが必要だけど@locationを使っているとgeolocation-element-polyfillは動作しないので自力でフォールバックが必要。

<geolocation>
    <button @click="$js.polyfill()">Use my location</button>
</geolocation>

@locationではなくx-on:locationで書けばgeolocation-element-polyfillも動作。

<geolocation
    x-on:location="$js.handleLocation(event)"
    autolocate
    accuracymode="precise">
</geolocation>

@assets
<script>
    (async () => {
        if (!('HTMLGeolocationElement' in window)) {
            await import('https://unpkg.com/geolocation-element-polyfill/index.js');
        }
    })();
</script>
@endassets

<script>
</script>