From 2713ff6d49650bf80d52df6c6c9779c83e99fa68 Mon Sep 17 00:00:00 2001
From: Aymeric Giraudet <aymeric.giraudet@algolia.com>
Date: Sun, 10 Sep 2023 19:03:22 +0200
Subject: [PATCH] feat: introduce routing

---
 README.md                    |  4 ++--
 src/lib/InstantSearch.svelte | 20 ++++++++++++++++++++
 src/lib/getServerState.ts    |  6 +++---
 src/routes/+page.server.ts   |  3 ++-
 src/routes/+page.svelte      |  2 +-
 5 files changed, 28 insertions(+), 7 deletions(-)

diff --git a/README.md b/README.md
index 3724283..385e16e 100644
--- a/README.md
+++ b/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 😁
diff --git a/src/lib/InstantSearch.svelte b/src/lib/InstantSearch.svelte
index c52cc22..23ee331 100644
--- a/src/lib/InstantSearch.svelte
+++ b/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);
diff --git a/src/lib/getServerState.ts b/src/lib/getServerState.ts
index 1277180..62197b4 100644
--- a/src/lib/getServerState.ts
+++ b/src/lib/getServerState.ts
@@ -5,10 +5,10 @@ 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);
@@ -16,6 +16,6 @@ export function getServerState(component: any): Promise<Record<string, any>> {
       search.dispose();
       resolve(results);
     };
-    component.render({}, { context: new Map([[serverContext, { notifyServer }]]) });
+    component.render({}, { context: new Map([[serverContext, { notifyServer, serverUrl }]]) });
   });
 }
diff --git a/src/routes/+page.server.ts b/src/routes/+page.server.ts
index caf5e30..0ec0e07 100644
--- a/src/routes/+page.server.ts
+++ b/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);
diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte
index 5ebce61..abed481 100644
--- a/src/routes/+page.svelte
+++ b/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"