fix(svelte): remove svelte-navigator from repository (#221)

* Remove svelte-navigator

* add missing hash for initial state + theme from query

---------

Co-authored-by: Vladimir Kharlampidi <[email protected]>

Author: ilyakamens

kitchen-sink/react/components/App.jsx

@@ -6,7 +6,9 @@ import routes from '../routes.js';
 import HomePage from '../pages/Home.jsx';
 
 function App() {
-  const [theme, setTheme] = useState('ios');
+  const [theme, setTheme] = useState(
+    window.location.search.includes('theme=material') ? 'material' : 'ios'
+  );
   const [currentColorTheme, setCurrentColorTheme] = useState('');
   const setColorTheme = (color) => {
     const htmlEl = document.documentElement;

kitchen-sink/svelte/components/App.svelte

@@ -1,13 +1,11 @@
 <script>
-  import { onMount, beforeUpdate } from 'svelte';
+  import { onMount, onDestroy, beforeUpdate } from 'svelte';
   import { App } from 'konsta/svelte';
-  import { Router, Route, createHistory } from 'svelte-navigator';
-  import createHashSource from '../hashHistory.js';
 
   import routes from '../routes.js';
   import HomePage from '../pages/Home.svelte';
 
-  let theme = 'ios';
+  let theme = window.location.search.includes('theme=material') ? 'material' : 'ios';
   const setTheme = (t) => {
     theme = t;
   };
@@ -42,29 +40,36 @@
     }
   };
 
+  let hash = window.location.hash || '';
+  function updateHash() {
+    hash = window.location.hash;
+  }
+
   onMount(() => {
     calcSafeAreas();
+    window.addEventListener('popstate', updateHash);
   });
 
   beforeUpdate(() => {
     calcSafeAreas();
   });
 
-  const hash = createHistory(createHashSource());
+  onDestroy(() => {
+    window.removeEventListener('popstate', updateHash);
+  });
+
+  $: component = routes.find(route => route.path === hash.slice(1))?.component;
 </script>
 
 <App {theme} safeAreas={!inIFrame}>
-  <Router history={hash} primary={false}>
-    <Route path="/">
-      <HomePage
-        {theme}
-        {setTheme}
-        colorTheme={currentColorTheme}
-        {setColorTheme}
-      />
-    </Route>
-    {#each routes as route}
-      <Route path={route.path} component={route.component} />
-    {/each}
-  </Router>
+  {#if component}
+    <svelte:component this={component} />
+  {:else}
+    <HomePage
+      {theme}
+      {setTheme}
+      colorTheme={currentColorTheme}
+      {setColorTheme}
+    />
+  {/if}
 </App>

kitchen-sink/svelte/hashHistory.js

@@ -12,7 +12,9 @@
       kApp,
     },
     setup() {
-      const theme = ref('ios');
+      const theme = ref(
+        window.location.search.includes('theme=material') ? 'material' : 'ios'
+      );
       const currentColorTheme = ref('');
       const setColorTheme = (color) => {
         const htmlEl = document.documentElement;

kitchen-sink/vue/components/App.vue

@@ -64,7 +64,6 @@
     "react-router-dom": "^6.26.1",
     "rollup": "^4.21.0",
     "svelte": "^5.0.0-next.241",
-    "svelte-navigator": "^3.2.2",
     "tailwindcss": "^3.4.10",
     "vite": "^5.4.2",
     "vue": "^3.4.38",
@@ -73,4 +72,4 @@
   "dependencies": {
     "konsta": "file:src"
   }
-}
+}