test(svelte): migrate svelte-navigator to custom minimal router (#30225)

Repro: `cd tests/components/ct-svelte && rm -rf node_modules
package-lock.json && npm i && npx playwright test --project=chromium`

Follow-up based on
https://github.com/microsoft/playwright/pull/28624#issuecomment-1858608101.

Svelte has no router by default, only SvelteKit - so lets remove the
package which is not maintained anymore and not recommended.

tests/components/ct-svelte-vite/package.json

@@ -18,12 +18,6 @@
     "vite": "^5.0.11"
   },
   "dependencies": {
-    "svelte": "^4.2.8",
+    "svelte": "^4.2.8"
-    "svelte-navigator": "^3.2.2"
-  },
-  "overrides": {
-    "svelte-navigator": {
-      "svelte": "$svelte"
-    }
   }
 }

tests/components/ct-svelte-vite/src/App.svelte

@@ -1,18 +1,34 @@
-<script lang="ts">
+<script>
-import { Link, Route, Router } from "svelte-navigator";
+import { onMount, onDestroy } from 'svelte';
-import logo from './assets/svelte.png'
 import LoginPage from './pages/LoginPage.svelte';
 import DashboardPage from './pages/DashboardPage.svelte';
+
+let path = '';
+function updatePath() {
+  path = window.location.pathname;
+}
+onMount(() => {
+  updatePath();
+  window.addEventListener('popstate', updatePath);
+});
+onDestroy(() => {
+  window.removeEventListener('popstate', updatePath);
+});
+/**
+ * @param newPath {string}
+ */
+function navigate(newPath) {
+  history.pushState({}, '', newPath);
+  updatePath();
+}
 </script>
 
-<Router>
 <header>
-    <img src="{logo}" alt="logo" width="125" height="125" />
+  <a on:click={(e) => { e.preventDefault(); navigate('/'); }} href='/login'>Login</a>
-    <Link to="/">Login</Link>
+  <a on:click={(e) => { e.preventDefault(); navigate('/dashboard'); }} href='/dashboard'>Dashboard</a>
-    <Link to="/dashboard">Dashboard</Link>
 </header>
-  <Route path="/*">
+{#if path === '/'}
-    <Route component="{LoginPage}" />
+  <LoginPage />
-    <Route path="dashboard" component="{DashboardPage}" />
+{:else if path === '/dashboard'}
-  </Route>
+  <DashboardPage />
-</Router>
+{/if}

tests/components/ct-svelte/package.json

@@ -19,12 +19,6 @@
     "sirv-cli": "^2.0.0"
   },
   "dependencies": {
-    "svelte": "^4.2.8",
+    "svelte": "^4.2.8"
-    "svelte-navigator": "^3.2.2"
-  },
-  "overrides": {
-    "svelte-navigator": {
-      "svelte": "$svelte"
-    }
   }
 }

tests/components/ct-svelte/src/App.svelte

@@ -1,16 +1,34 @@
-<script lang="ts">
+<script>
-import { Link, Route, Router } from "svelte-navigator";
+import { onMount, onDestroy } from 'svelte';
 import LoginPage from './pages/LoginPage.svelte';
 import DashboardPage from './pages/DashboardPage.svelte';
+
+let path = '';
+function updatePath() {
+  path = window.location.pathname;
+}
+onMount(() => {
+  updatePath();
+  window.addEventListener('popstate', updatePath);
+});
+onDestroy(() => {
+  window.removeEventListener('popstate', updatePath);
+});
+/**
+ * @param newPath {string}
+ */
+function navigate(newPath) {
+  history.pushState({}, '', newPath);
+  updatePath();
+}
 </script>
 
-<Router>
 <header>
-    <Link to="/">Login</Link>
+  <a on:click={(e) => { e.preventDefault(); navigate('/'); }} href='/login'>Login</a>
-    <Link to="/dashboard">Dashboard</Link>
+  <a on:click={(e) => { e.preventDefault(); navigate('/dashboard'); }} href='/dashboard'>Dashboard</a>
 </header>
-  <Route path="/*">
+{#if path === '/'}
-    <Route component="{LoginPage}" />
+  <LoginPage />
-    <Route path="dashboard" component="{DashboardPage}" />
+{:else if path === '/dashboard'}
-  </Route>
+  <DashboardPage />
-</Router>
+{/if}