Merge pull request #60 from ddxv/sv-5

Try moving to Svelte 5

frontend/package.json

@@ -14,31 +14,31 @@
 	"type": "module",
 	"devDependencies": {
 		"@carbon/charts-svelte": "^1.22.0",
-		"@skeletonlabs/skeleton": "2.10.2",
+		"@skeletonlabs/skeleton": "2.10.3",
 		"@skeletonlabs/tw-plugin": "0.4.0",
 		"@sveltejs/adapter-auto": "^3.0.0",
 		"@sveltejs/adapter-node": "^5.2.6",
-		"@sveltejs/kit": "^2.0.0",
-		"@sveltejs/vite-plugin-svelte": "^3.0.0",
+		"@sveltejs/kit": "^2.5.27",
+		"@sveltejs/vite-plugin-svelte": "^4.0.0",
 		"@types/eslint": "^9.6.1",
 		"@types/node": "^22.7.5",
 		"@typescript-eslint/eslint-plugin": "^8.8.1",
 		"@typescript-eslint/parser": "^8.8.1",
-		"@vincjo/datatables": "^1.14.10",
+		"@vincjo/datatables": "^2.0.5",
 		"autoprefixer": "10.4.20",
 		"eslint": "^9.12.0",
 		"eslint-config-prettier": "^9.1.0",
-		"eslint-plugin-svelte": "^2.35.1",
+		"eslint-plugin-svelte": "^2.45.1",
 		"postcss": "8.4.47",
 		"prettier": "^3.1.1",
-		"prettier-plugin-svelte": "^3.1.2",
-		"svelte": "^4.2.7",
+		"prettier-plugin-svelte": "^3.2.6",
+		"svelte": "^5.1.3",
 		"svelte-check": "^4.0.5",
 		"tailwindcss": "^3.4.13",
-		"typescript-eslint": "^8.0.0",
 		"tslib": "^2.4.1",
-		"typescript": "^5.0.0",
-		"vite": "^5.0.3",
+		"typescript": "^5.5.0",
+		"typescript-eslint": "^8.0.0",
+		"vite": "^5.4.4",
 		"vite-plugin-tailwind-purgecss": "0.3.3"
 	},
 	"dependencies": {

frontend/src/lib/AdsTxtTable.svelte

@@ -1,12 +1,16 @@
 <script lang="ts">
 	import Pagination from './Pagination.svelte';
 
-	import { DataHandler } from '@vincjo/datatables/remote';
-	import type { State } from '@vincjo/datatables/remote';
+	import { DataHandler } from '@vincjo/datatables/legacy/remote';
+	import type { State } from '@vincjo/datatables/legacy/remote';
 	import type { AdsTxtEntries } from '../types';
 	import CompanyButton from './CompanyButton.svelte';
 
-	export let entries_table: AdsTxtEntries[];
+	interface Props {
+		entries_table: AdsTxtEntries[];
+	}
+
+	let { entries_table }: Props = $props();
 
 	const totalRows = entries_table.length;
 

frontend/src/lib/AdtechNav.svelte

@@ -1,12 +1,9 @@
 <script lang="ts">
+
 	import { page } from '$app/stores';
 	import { goto } from '$app/navigation';
 
-	$: paramClassesActive = (pkey: string, pvalue: string) =>
-		$page.url.searchParams.get(pkey) == pvalue ? buttonSelectedColor : groupByParents;
 
-	$: paramMetricClassesActive = (pkey: string, pvalue: string) =>
-		$page.url.searchParams.get(pkey) == pvalue ? buttonSelectedColor : metricInstalls;
 
 	const buttonSelectedColor =
 		'radio-item text-base text-center cursor-pointer px-4 py-1 rounded-token variant-filled-primary active:';
@@ -26,7 +23,11 @@
 	const metricInstalls: string = 'installs';
 	const metricAppCount: string = 'appcount';
 
-	$: currentPath = $page.url.pathname;
+	let paramClassesActive = $derived((pkey: string, pvalue: string) =>
+		$page.url.searchParams.get(pkey) == pvalue ? buttonSelectedColor : groupByParents);
+	let paramMetricClassesActive = $derived((pkey: string, pvalue: string) =>
+		$page.url.searchParams.get(pkey) == pvalue ? buttonSelectedColor : metricInstalls);
+	let currentPath = $derived($page.url.pathname);
 </script>
 
 <div class="card">
@@ -39,8 +40,10 @@
 						<a
 							href={currentPath}
 							class={paramMetricClassesActive('metric', metricInstalls)}
-							on:click|preventDefault={() =>
-								navigateWithParams(currentPath, 'metric', metricInstalls)}
+							onclick={((event) => {
+								navigateWithParams(currentPath, 'metric', metricInstalls)
+								event.preventDefault();
+							})}
 						>
 							<span class="flex-auto">Installs Past 30 Days</span>
 						</a>
@@ -49,8 +52,10 @@
 						<a
 							href={currentPath}
 							class={paramMetricClassesActive('metric', metricAppCount)}
-							on:click|preventDefault={() =>
-								navigateWithParams(currentPath, 'metric', metricAppCount)}
+							onclick={((event) => {
+								navigateWithParams(currentPath, 'metric', metricAppCount)
+								event.preventDefault();
+							})}
 						>
 							<span class="flex-auto">Count of Apps</span>
 						</a>
@@ -67,8 +72,10 @@
 						<a
 							href={currentPath}
 							class={paramClassesActive('groupby', groupByBrands)}
-							on:click|preventDefault={() =>
-								navigateWithParams(currentPath, 'groupby', groupByBrands)}
+							onclick={((event) => {
+								navigateWithParams(currentPath, 'groupby', groupByBrands)
+								event.preventDefault();
+							})}
 						>
 							<span class="flex-auto">Group by SubCompany or Brand</span>
 						</a>
@@ -77,8 +84,12 @@
 						<a
 							href={currentPath}
 							class={paramClassesActive('groupby', groupByParents)}
-							on:click|preventDefault={() =>
-								navigateWithParams(currentPath, 'groupby', groupByParents)}
+							onclick={((event) => {
+								navigateWithParams(currentPath, 'groupby', groupByParents)
+								event.preventDefault();
+							}
+							)
+								}
 						>
 							<span class="flex-auto">Group by Parent Company</span>
 						</a>

frontend/src/lib/AdtechTable.svelte

@@ -1,3 +1,4 @@
+<!-- @migration-task Error while migrating Svelte code: `<a>` is invalid inside `<tr>` -->
 <script lang="ts">
 	import { homeCategorySelection } from '../stores';
 	import type { Company } from '../types';
@@ -41,12 +42,13 @@
 		<tbody class="px-0">
 			{#each Object.entries(tabledata) as [_prop, values]}
 				<tr style="cursor: pointer;" class="px-0">
-					<a href={`/companies/${values.name}`} class="table-row-link">
 						<td class="px-0">
 							<div class="inline-flex">
+					<a href={`/companies/${values.name}`} class="table-row-link">
 								<h3 class="h7 md:h5">
 									{values.name}
 								</h3>
+					</a>
 							</div>
 						</td>
 						{#if tableType == 'appcount'}
@@ -85,7 +87,6 @@
 								</div>
 							</td>
 						{/if}
-					</a>
 				</tr>
 			{/each}
 		</tbody>

frontend/src/lib/AppGroupCard.svelte

@@ -1,9 +1,13 @@
 <script lang="ts">
 	import type { AppGroup } from '../types';
 	import type { AppFullDetail } from '../types';
-	export let apps: AppGroup;
 
 	import AppInfo from './RatingInstalls.svelte';
+	interface Props {
+		apps: AppGroup;
+	}
+
+	let { apps }: Props = $props();
 
 	function getClass(app: AppFullDetail) {
 		return (app.featured_image_url && app.featured_image_url !== 'null') ||

frontend/src/lib/AppHistoryTable.svelte

@@ -1,11 +1,10 @@
 <script lang="ts">
 	import Pagination from './Pagination.svelte';
 
-	import { DataHandler } from '@vincjo/datatables/remote';
-	import type { State } from '@vincjo/datatables/remote';
+	import { DataHandler } from '@vincjo/datatables/legacy/remote';
+	import type { State } from '@vincjo/datatables/legacy/remote';
 	import type { AppHistoryInfo } from '../types';
 
-	export let history_table: AppHistoryInfo[];
 
 	const totalRows = history_table.length;
 	const rowsPerPage = 10;
@@ -29,7 +28,12 @@
 
 	handler.invalidate();
 
-	export let os: string = 'google';
+	interface Props {
+		history_table: AppHistoryInfo[];
+		os?: string;
+	}
+
+	let { history_table, os = $bindable('google') }: Props = $props();
 	if (os.includes('google')) {
 		os = 'google';
 	} else if (os.includes('apple')) {

frontend/src/lib/AppPlot.svelte

@@ -9,11 +9,25 @@
 	} from '@carbon/charts-svelte';
 	import '@carbon/charts-svelte/styles.css';
 
-	export let plotdata: ChartTabularData;
-	export let plotType: string;
-	export let plotHeightPx: string = '300px';
 
-	export let changeOptions: ComboChartOptions = {
+
+
+
+	interface Props {
+		plotdata: ChartTabularData;
+		plotType: string;
+		plotHeightPx?: string;
+		changeOptions?: ComboChartOptions;
+		installOptions?: LineChartOptions;
+		numberOptions?: ComboChartOptions;
+		appRankOptions?: LineChartOptions;
+	}
+
+	let {
+		plotdata,
+		plotType,
+		plotHeightPx = '300px',
+		changeOptions = {
 		toolbar: { enabled: false },
 		axes: {
 			bottom: {
@@ -50,9 +64,8 @@
 				// 	}
 			}
 		]
-	};
-
-	export let installOptions: LineChartOptions = {
+	},
+		installOptions = {
 		toolbar: { enabled: false },
 		axes: {
 			bottom: {
@@ -80,9 +93,8 @@
 		// 		}
 		// 	}
 		// ]
-	};
-
-	export let numberOptions: ComboChartOptions = {
+	},
+		numberOptions = {
 		toolbar: { enabled: false },
 		axes: {
 			bottom: {
@@ -114,9 +126,8 @@
 				}
 			}
 		]
-	};
-
-	export let appRankOptions: LineChartOptions = {
+	},
+		appRankOptions = {
 		title: 'Step (discrete)',
 		axes: {
 			bottom: {
@@ -132,7 +143,8 @@
 		},
 		curve: 'curveStepAfter',
 		height: plotHeightPx
-	};
+	}
+	}: Props = $props();
 </script>
 
 {#if plotType == 'rank'}

frontend/src/lib/AppRankTable.svelte

@@ -2,10 +2,14 @@
 	import type { RankedAppList, RankedApps } from '../types';
 	import Pagination from './Pagination.svelte';
 	import ThFilter from './ThFilter.svelte';
-	import { DataHandler } from '@vincjo/datatables/remote';
-	import type { State } from '@vincjo/datatables/remote';
+	import { DataHandler } from '@vincjo/datatables/legacy/remote';
+	import type { State } from '@vincjo/datatables/legacy/remote';
 
-	export let tableData: RankedAppList;
+	interface Props {
+		tableData: RankedAppList;
+	}
+
+	let { tableData }: Props = $props();
 	const totalRows = tableData.ranks.length; // Calculate totalRows based on the length of the history_table array
 	const rowsPerPage = 10;
 

frontend/src/lib/AppRankTableShort.svelte

@@ -1,7 +1,11 @@
 <script lang="ts">
 	import type { RankedAppList } from '../types';
 
-	export let myTable: RankedAppList;
+	interface Props {
+		myTable: RankedAppList;
+	}
+
+	let { myTable }: Props = $props();
 </script>
 
 <table class="table table-hover table-compact">

frontend/src/lib/Breadcrumbs.svelte

@@ -1,18 +1,35 @@
 <script lang="ts" generics="Metadata = any">
+	import { run } from 'svelte/legacy';
+
 	import type { Crumb, ModuleData } from '.././types';
 	import { onMount } from 'svelte';
 
-	// Relative path to the routes folder for the glob import
-	export let relPathToRoutes: string = '/src/routes/';
-	// The route from the routers perspective, e.g. $page.route.id
-	export let routeId: string | null;
-	export let url: URL;
-	export let crumbs: Crumb<Metadata>[] | undefined = undefined;
+	
+	
 	export function titleSanitizer(title: string) {
 		return title.replace(/([A-Z])/g, ' $1').replace(/^./, (str) => str.toUpperCase());
 	}
-	export let routeModules: Record<string, ModuleData> | undefined = undefined;
-	export let pageData: any;
+	interface Props {
+		// Relative path to the routes folder for the glob import
+		relPathToRoutes?: string;
+		// The route from the routers perspective, e.g. $page.route.id
+		routeId: string | null;
+		url: URL;
+		crumbs?: Crumb<Metadata>[] | undefined;
+		routeModules?: Record<string, ModuleData> | undefined;
+		pageData: any;
+		children?: import('svelte').Snippet<[any]>;
+	}
+
+	let {
+		relPathToRoutes = '/src/routes/',
+		routeId,
+		url,
+		crumbs = undefined,
+		routeModules = $bindable(undefined),
+		pageData,
+		children
+	}: Props = $props();
 
 	onMount(async () => {
 		// If nothing is passed to routeModules, populate it
@@ -35,8 +52,8 @@
 		return undefined;
 	}
 
-	let _crumbs = [] as Crumb<Metadata>[];
-	$: {
+	let _crumbs = $state([] as Crumb<Metadata>[]);
+	run(() => {
 		_crumbs = [] as Crumb<Metadata>[];
 		if (crumbs != undefined) {
 			// If crumbs array is passed in always use that with highest priority
@@ -98,7 +115,7 @@
 
 			_crumbs = _crumbs;
 		}
-	}
+	});
 </script>
 
-<slot crumbs={_crumbs} {routeModules} />
+{@render children?.({ crumbs: _crumbs, routeModules, })}