From 715665e86cc1f9066eafcbc9ed505fd7c791e9cd Mon Sep 17 00:00:00 2001 From: Ahmedhossamdev Date: Thu, 28 Nov 2024 01:09:58 +0200 Subject: [PATCH 01/57] refactor: migrate to svelte5 (used props instead of export let) --- src/components/ArrivalDeparture.svelte | 5 +++-- 1 file changed, 3 insertions(+), 2 deletions(-) diff --git a/src/components/ArrivalDeparture.svelte b/src/components/ArrivalDeparture.svelte index f337f1f..8cba661 100644 --- a/src/components/ArrivalDeparture.svelte +++ b/src/components/ArrivalDeparture.svelte @@ -1,10 +1,11 @@ @@ -145,10 +148,10 @@
- -
@@ -163,7 +166,9 @@ {#each schedules as schedule} - {schedule.tripHeadsign} + {#snippet header()} + {schedule.tripHeadsign} + {/snippet} {/each} From e59393308d46f3542b4294088ec7a8450dfe45d3 Mon Sep 17 00:00:00 2001 From: Ahmedhossamdev Date: Thu, 28 Nov 2024 08:14:12 +0200 Subject: [PATCH 05/57] refactor: replace export let with destructured props --- src/routes/stops/[stopID]/+page.svelte | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/routes/stops/[stopID]/+page.svelte b/src/routes/stops/[stopID]/+page.svelte index 531eaee..ed4cd56 100644 --- a/src/routes/stops/[stopID]/+page.svelte +++ b/src/routes/stops/[stopID]/+page.svelte @@ -5,7 +5,7 @@ import '$lib/i18n.js'; import { t } from 'svelte-i18n'; - export let data; + let { data } = $props(); const stop = data.stopData.entry; const arrivalsAndDeparturesResponse = data.arrivalsAndDeparturesResponse; From 64d5e615fabcb24bc6494ae51ba0a508587778ce Mon Sep 17 00:00:00 2001 From: Ahmedhossamdev Date: Thu, 28 Nov 2024 09:04:01 +0200 Subject: [PATCH 06/57] refactor: migrate to use props and removed event dispatcher --- src/components/routes/RouteModal.svelte | 15 +++++---------- 1 file changed, 5 insertions(+), 10 deletions(-) diff --git a/src/components/routes/RouteModal.svelte b/src/components/routes/RouteModal.svelte index 8ce99c3..2d6d234 100644 --- a/src/components/routes/RouteModal.svelte +++ b/src/components/routes/RouteModal.svelte @@ -3,15 +3,10 @@ import ModalPane from '$components/navigation/ModalPane.svelte'; import { t } from 'svelte-i18n'; - export let selectedRoute; - export let stops; - export let mapProvider; + let { selectedRoute, stops, mapProvider, closePane } = $props(); - function handleStopItemClick(event) { - const { stop } = event.detail; - - mapProvider.panTo(stop.lat, stop.lon); - mapProvider.setZoom(20); + function handleStopItemClick(stop) { + mapProvider.flyTo(stop.lat, stop.lon, 18); } function title() { @@ -23,7 +18,7 @@ } - + {#if stops && selectedRoute}
@@ -38,7 +33,7 @@
{#each stops as stop} - + {/each}
From de3d4ddbbcb9e74298f580b0becf738cfe80f602 Mon Sep 17 00:00:00 2001 From: Ahmedhossamdev Date: Thu, 28 Nov 2024 10:06:42 +0200 Subject: [PATCH 07/57] refactor: migrate slot with snippet for children rendering --- src/routes/+layout.svelte | 9 ++++++++- 1 file changed, 8 insertions(+), 1 deletion(-) diff --git a/src/routes/+layout.svelte b/src/routes/+layout.svelte index f3f655f..856b18d 100644 --- a/src/routes/+layout.svelte +++ b/src/routes/+layout.svelte @@ -6,6 +6,13 @@ import '$lib/i18n'; import { locale } from 'svelte-i18n'; import { onMount } from 'svelte'; + /** + * @typedef {Object} Props + * @property {import('svelte').Snippet} [children] + */ + + /** @type {Props} */ + let { children } = $props(); config.autoAddCss = false; // Tell Font Awesome to skip adding the CSS automatically since it's being imported above onMount(() => { @@ -22,6 +29,6 @@
- + {@render children?.()}
From ee83ebee67dad7ba75b06bf86153bdbad188501d Mon Sep 17 00:00:00 2001 From: Ahmedhossamdev Date: Thu, 28 Nov 2024 22:34:02 +0200 Subject: [PATCH 08/57] refactor: migrate event dispatcher with props for route and location handling --- src/components/RouteItem.svelte | 10 ++-------- src/lib/LocationButton/LocationButton.svelte | 7 +++---- 2 files changed, 5 insertions(+), 12 deletions(-) diff --git a/src/components/RouteItem.svelte b/src/components/RouteItem.svelte index 6dc475a..4a85d7c 100644 --- a/src/components/RouteItem.svelte +++ b/src/components/RouteItem.svelte @@ -1,11 +1,5 @@ +
- + {@render children?.()}
From 76e99190d0df9524b7f6458dd3715a5e51cc95e6 Mon Sep 17 00:00:00 2001 From: Ahmedhossamdev Date: Fri, 29 Nov 2024 01:04:39 +0200 Subject: [PATCH 11/57] refactor: migrate to use props --- src/components/trip-planner/tripPlanPinMarker.svelte | 10 ++++++++-- 1 file changed, 8 insertions(+), 2 deletions(-) diff --git a/src/components/trip-planner/tripPlanPinMarker.svelte b/src/components/trip-planner/tripPlanPinMarker.svelte index d3d0706..b9f291a 100644 --- a/src/components/trip-planner/tripPlanPinMarker.svelte +++ b/src/components/trip-planner/tripPlanPinMarker.svelte @@ -1,6 +1,12 @@
Date: Fri, 29 Nov 2024 01:17:03 +0200 Subject: [PATCH 12/57] refactor: migrate to use props --- .../trip-planner/TripPlanSearchField.svelte | 35 +++++++++++++------ 1 file changed, 25 insertions(+), 10 deletions(-) diff --git a/src/components/trip-planner/TripPlanSearchField.svelte b/src/components/trip-planner/TripPlanSearchField.svelte index 162d711..1794228 100644 --- a/src/components/trip-planner/TripPlanSearchField.svelte +++ b/src/components/trip-planner/TripPlanSearchField.svelte @@ -2,13 +2,27 @@ import { faMapMarkerAlt } from '@fortawesome/free-solid-svg-icons'; import { FontAwesomeIcon } from '@fortawesome/svelte-fontawesome'; import { t } from 'svelte-i18n'; - export let label = ''; - export let place = ''; - export let results = []; - export let isLoading = false; - export let onInput; - export let onClear; - export let onSelect; + /** + * @typedef {Object} Props + * @property {string} [label] + * @property {string} [place] + * @property {any} [results] + * @property {boolean} [isLoading] + * @property {any} onInput + * @property {any} onClear + * @property {any} onSelect + */ + + /** @type {Props} */ + let { + label = '', + place = $bindable(''), + results = [], + isLoading = false, + onInput, + onClear, + onSelect + } = $props(); function handleInput(event) { onInput(event.target.value); @@ -32,7 +46,7 @@ id="location-input" type="text" bind:value={place} - on:input={handleInput} + oninput={handleInput} placeholder="{$t('trip-planner.search_for_a_place')}..." class="dark: mt-1 block w-full rounded-md border-gray-300 pr-10 text-black shadow-sm focus:border-blue-500 focus:ring-blue-500 sm:text-sm" /> @@ -40,7 +54,8 @@ From 20bc225a20f45cbe740bba825306650514a370b4 Mon Sep 17 00:00:00 2001 From: Ahmedhossamdev Date: Fri, 29 Nov 2024 01:42:17 +0200 Subject: [PATCH 16/57] refactor: migrate Header component state management to use $state --- src/components/navigation/Header.svelte | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/src/components/navigation/Header.svelte b/src/components/navigation/Header.svelte index 7ef1bc5..5e18b6c 100644 --- a/src/components/navigation/Header.svelte +++ b/src/components/navigation/Header.svelte @@ -8,9 +8,9 @@ import ThemeSwitcher from '$lib/ThemeSwitch/ThemeSwitcher.svelte'; import MobileMenu from './MobileMenu.svelte'; - let isMobileMenuOpen = false; + let isMobileMenuOpen = $state(false); - let headerLinks = null; + let headerLinks = $state(null); if (PUBLIC_NAV_BAR_LINKS) { headerLinks = JSON.parse(PUBLIC_NAV_BAR_LINKS); @@ -36,7 +36,7 @@
-
From b9d1992ffc7448a5cc4d50c0214f4b66d214f066 Mon Sep 17 00:00:00 2001 From: Ahmedhossamdev Date: Fri, 29 Nov 2024 01:49:48 +0200 Subject: [PATCH 18/57] refactor: migrate to use $props for stop and closePane function directly --- src/components/stops/StopModal.svelte | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/components/stops/StopModal.svelte b/src/components/stops/StopModal.svelte index 14d5fb2..8d031a7 100644 --- a/src/components/stops/StopModal.svelte +++ b/src/components/stops/StopModal.svelte @@ -15,9 +15,9 @@ import ModalPane from '$components/navigation/ModalPane.svelte'; import StopPane from '$components/stops/StopPane.svelte'; - export let stop; + let { stop, closePane } = $props(); - + From db910a25ae57894930f87707b0d3e32de58c5e1d Mon Sep 17 00:00:00 2001 From: Ahmedhossamdev Date: Fri, 29 Nov 2024 01:57:48 +0200 Subject: [PATCH 19/57] refactor: migrate to use $props --- src/components/trip-planner/ItineraryTab.svelte | 6 ++---- 1 file changed, 2 insertions(+), 4 deletions(-) diff --git a/src/components/trip-planner/ItineraryTab.svelte b/src/components/trip-planner/ItineraryTab.svelte index 61f2ff8..33cc9c9 100644 --- a/src/components/trip-planner/ItineraryTab.svelte +++ b/src/components/trip-planner/ItineraryTab.svelte @@ -1,14 +1,12 @@
{/if} From e41dece74ca50b65ae2733c6b0a15d1ff8f7867c Mon Sep 17 00:00:00 2001 From: Ahmedhossamdev Date: Fri, 29 Nov 2024 03:44:46 +0200 Subject: [PATCH 25/57] refactor: migrate TabContainer component to use $props for children rendering --- src/components/tabs/TabContainer.svelte | 12 +++++++++++- 1 file changed, 11 insertions(+), 1 deletion(-) diff --git a/src/components/tabs/TabContainer.svelte b/src/components/tabs/TabContainer.svelte index cb37e3e..748768f 100644 --- a/src/components/tabs/TabContainer.svelte +++ b/src/components/tabs/TabContainer.svelte @@ -1,3 +1,13 @@ + +
- + {@render children?.()}
From 9a040df2673af611f12d3da18d5dc13e3f56da54 Mon Sep 17 00:00:00 2001 From: Ahmedhossamdev Date: Fri, 29 Nov 2024 03:45:58 +0200 Subject: [PATCH 26/57] refactor: migrate SearchPane component to use $props and $state --- src/components/search/SearchPane.svelte | 56 +++++++++++++------------ 1 file changed, 30 insertions(+), 26 deletions(-) diff --git a/src/components/search/SearchPane.svelte b/src/components/search/SearchPane.svelte index 9de2f51..2a06412 100644 --- a/src/components/search/SearchPane.svelte +++ b/src/components/search/SearchPane.svelte @@ -14,16 +14,22 @@ const dispatch = createEventDispatcher(); - export let cssClasses = ''; - export let mapProvider = null; - - let routes = null; - let stops = null; - let location = null; - let query = null; + let { + clearPolylines, + handleRouteSelected, + handleViewAllRoutes, + handleTripPlan, + cssClasses = '', + mapProvider = null + } = $props(); + + let routes = $state(null); + let stops = $state(null); + let location = $state(null); + let query = $state(null); let polylines = []; let currentIntervalId = null; - let mapLoaded = false; + let mapLoaded = $state(false); function handleLocationClick(location) { clearResults(); @@ -31,14 +37,12 @@ const lng = location.geometry.location.lng; mapProvider.panTo(lat, lng); mapProvider.setZoom(20); - dispatch('locationSelected', { location }); } function handleStopClick(stop) { clearResults(); mapProvider.panTo(stop.lat, stop.lon); mapProvider.setZoom(20); - dispatch('stopSelected', { stop }); } async function handleRouteClick(route) { @@ -48,6 +52,9 @@ const stops = stopsForRoute.data.references.stops; const polylinesData = stopsForRoute.data.entry.polylines; + const midpoint = calculateMidpoint(stopsForRoute.data.references.stops); + mapProvider.flyTo(midpoint.lat, midpoint.lng, 12); + for (const polylineData of polylinesData) { const shape = polylineData.points; let polyline; @@ -57,10 +64,15 @@ await showStopsOnRoute(stops); currentIntervalId = await fetchAndUpdateVehicles(route.id, mapProvider); - const midpoint = calculateMidpoint(stopsForRoute.data.references.stops); - mapProvider.panTo(midpoint.lat, midpoint.lng); - mapProvider.setZoom(12); - dispatch('routeSelected', { route, stopsForRoute, stops, polylines, currentIntervalId }); + + const routeData = { + route, + stops, + polylines, + currentIntervalId + }; + + handleRouteSelected(routeData); } async function showStopsOnRoute(stops) { @@ -76,13 +88,9 @@ query = results.detail.query; } - function handleViewAllRoutes() { - dispatch('viewAllRoutes'); - } - function clearResults() { if (polylines) { - dispatch('clearResults', polylines); + clearPolylines(); } routes = null; stops = null; @@ -94,10 +102,6 @@ clearInterval(currentIntervalId); } - function handleTripPlan(event) { - dispatch('tripPlanned', event.detail); - } - function handlePlanTripTabClick() { const event = new CustomEvent('planTripTabClicked'); window.dispatchEvent(event); @@ -127,7 +131,7 @@ {#if query}

{$t('search.results_for')} "{query}". -

@@ -169,7 +173,7 @@ @@ -181,7 +185,7 @@ {#if env.PUBLIC_OTP_SERVER_URL} - + {/if} From 460b9204e2acbca199957487f8ceed78f2113b80 Mon Sep 17 00:00:00 2001 From: Ahmedhossamdev Date: Fri, 29 Nov 2024 03:46:12 +0200 Subject: [PATCH 27/57] refactor: migrate TabLink component to use $props --- src/components/tabs/TabLink.svelte | 13 ++++++++++--- 1 file changed, 10 insertions(+), 3 deletions(-) diff --git a/src/components/tabs/TabLink.svelte b/src/components/tabs/TabLink.svelte index 572d096..c184239 100644 --- a/src/components/tabs/TabLink.svelte +++ b/src/components/tabs/TabLink.svelte @@ -1,10 +1,17 @@
- + {@render children?.()}
From 7a8ee789dc1fcb5003853c6c1ab15225666d2525 Mon Sep 17 00:00:00 2001 From: Ahmedhossamdev Date: Fri, 29 Nov 2024 03:46:37 +0200 Subject: [PATCH 28/57] refactor: migrate StopPageHeader component to use $props --- src/components/stops/StopPageHeader.svelte | 4 +--- 1 file changed, 1 insertion(+), 3 deletions(-) diff --git a/src/components/stops/StopPageHeader.svelte b/src/components/stops/StopPageHeader.svelte index 265ff7d..ca04e5e 100644 --- a/src/components/stops/StopPageHeader.svelte +++ b/src/components/stops/StopPageHeader.svelte @@ -7,9 +7,7 @@ import { page } from '$app/stores'; import { t } from 'svelte-i18n'; - export let stopName; - export let stopId; - export let stopDirection; + let { stopName, stopId, stopDirection } = $props();
From 363824b1fd267127ab4a56506095dc75aa8b9513 Mon Sep 17 00:00:00 2001 From: Ahmedhossamdev Date: Fri, 29 Nov 2024 04:51:30 +0200 Subject: [PATCH 29/57] refactor: migrate SearchResultItem component to use $props --- src/components/search/SearchResultItem.svelte | 19 ++++++++++++++----- 1 file changed, 14 insertions(+), 5 deletions(-) diff --git a/src/components/search/SearchResultItem.svelte b/src/components/search/SearchResultItem.svelte index 0c2cf71..a5f4ec6 100644 --- a/src/components/search/SearchResultItem.svelte +++ b/src/components/search/SearchResultItem.svelte @@ -1,14 +1,23 @@