feat: introduce routing

README.md

@@ -28,7 +28,7 @@ npm install svelte-algolia-instantsearch algoliasearch
   const searchClient = algoliasearch("<YOUR_API_KEY>", "<YOUR_SEARCH_KEY>");
 </script>
 
-<InstantSearch indexName="<YOUR_INDEX_NAME>" {searchClient}>
+<InstantSearch indexName="<YOUR_INDEX_NAME>" routing {searchClient}>
   <SearchBox />
 
   <Hits let:hit>
@@ -60,7 +60,7 @@ import { getServerState } from "svelte-algolia-instantsearch";
 
 import Page from "./+page.svelte";
 
-export const load = () => getServerState(Page);
+export const load = ({ url }) => getServerState(Page, url);
 ```
 
 Now you can check in your network tab that the page containing hits and facets is fully rendered on the server 😁

src/lib/InstantSearch.svelte

@@ -1,6 +1,7 @@
 <script lang="ts">
   import type { SearchClient } from "algoliasearch/lite";
   import InstantSearch from "instantsearch.js/es/lib/InstantSearch";
+  import { history } from "instantsearch.js/es/lib/routers";
   import { setInstantSearchContext } from "./instantSearchContext";
   import { tick } from "svelte";
   import { getServerContext } from "./getServerState";
@@ -11,6 +12,7 @@
   export let indexName: string;
   export let searchClient: SearchClient;
   export let stalledSearchDelay: number | undefined = undefined;
+  export let routing = false;
 
   let search: InstantSearch;
 
@@ -21,6 +23,24 @@
       indexName,
       searchClient,
       stalledSearchDelay,
+      routing: routing && {
+        router: history({
+          getLocation() {
+            if (typeof window === "undefined") {
+              if (serverContext) {
+                return new URL(serverContext.serverUrl) as unknown as Location;
+              } else {
+                let serverUrl;
+                page.subscribe(({ url }) => {
+                  serverUrl = url;
+                });
+                return new URL(serverUrl!) as unknown as Location;
+              }
+            }
+            return window.location;
+          },
+        }),
+      },
     });
 
     setInstantSearchContext(search);

src/lib/getServerState.ts

@@ -5,17 +5,17 @@ import { getContext } from "svelte";
 const serverContext = Symbol("InstantSearch:serverContext");
 
 export const getServerContext = () =>
-  getContext<{ notifyServer: (search: InstantSearch) => void }>(serverContext);
+  getContext<{ notifyServer: (search: InstantSearch) => void; serverUrl: URL }>(serverContext);
 
 // eslint-disable-next-line @typescript-eslint/no-explicit-any
-export function getServerState(component: any): Promise<Record<string, any>> {
+export function getServerState(component: any, serverUrl: URL): Promise<Record<string, any>> {
   return new Promise((resolve) => {
     const notifyServer = async (search: InstantSearch) => {
       await waitForResults(search);
       const results = getInitialResults(search.mainIndex);
       search.dispose();
       resolve(results);
     };
-    component.render({}, { context: new Map([[serverContext, { notifyServer }]]) });
+    component.render({}, { context: new Map([[serverContext, { notifyServer, serverUrl }]]) });
   });
 }

src/routes/+page.server.ts

@@ -1,4 +1,5 @@
 import Page from "./+page.svelte";
 import { getServerState } from "$lib";
+import type { PageServerLoad } from "./$types";
 
-export const load = () => getServerState(Page);
+export const load: PageServerLoad = ({ url }) => getServerState(Page, url);

src/routes/+page.svelte

@@ -29,7 +29,7 @@
   <title>svelte-algolia-instantsearch | Demo</title>
 </svelte:head>
 
-<InstantSearch indexName="instant_search" {searchClient}>
+<InstantSearch indexName="instant_search" routing {searchClient}>
   <div class="Container">
     <div>
       <Panel header="Brands"