Merge pull request #498 from CloudCannon/feat/reinitialize

Add a pagefind.destroy() API for the JS and Default UI
CloudCannon · Nov 15, 2023 · 5e1ac51 · 5e1ac51
2 parents 3571dec + 9d901bd
commit 5e1ac51
Show file tree

Hide file tree

Showing 7 changed files with 110 additions and 3 deletions.
diff --git a/docs/content/docs/api.md b/docs/content/docs/api.md
@@ -238,3 +238,31 @@ const search = await pagefind.search("static", {
 {{< /diffcode >}}
 
 See [Sorting using the Pagefind JavaScript API](/docs/js-api-sorting/) for more details and functionality.
+
+## Re-initializing the search API
+
+In some cases you might need to re-initialize Pagefind. For example, if you dynamically change the language of the page without reloading, Pagefind will need to be re-initialized to reflect this langauge change.
+
+The currently loaded Pagefind can be destroyed by running `pagefind.destroy()`:
+
+{{< diffcode >}}
+```js
+const pagefind = await import("/pagefind/pagefind.js");
+
+await pagefind.init();
+await pagefind.search( /* ... */ );
+
+/**
+ * Some action that changes the language of the page, for example
+ **/
+
++await pagefind.destroy();
++await pagefind.init();
+
+await pagefind.search( /* ... */ );
+```
+{{< /diffcode >}}
+
+Calling `pagefind.destroy()` will unload the active Pagefind, and also forget anything that was passed through `pagefind.options()`, resetting to the blank state after the script was first imported.
+
+After being destroyed, initializing Pagefind will look again at the active language, and use any new options you might pass in.
diff --git a/docs/content/docs/ui-usage.md b/docs/content/docs/ui-usage.md
@@ -97,6 +97,22 @@ The Pagefind UI will look for values under the metadata keys `title`, `image`, a
 ```
 {{< /diffcode >}}
 
+## Re-initializing the Pagefind UI
+
+In some cases you might need to re-initialize Pagefind. For example, if you dynamically change the language of the page without reloading, Pagefind will need to be re-initialized to reflect this langauge change.
+
+Pagefind UI can be destroyed by running `.destroy()` on the returned object. Doing so will also tear down the initialized Pagefind instance:
+
+{{< diffcode >}}
+```js
+let search = new PagefindUI({ element: "#search", showSubResults: true });
++search.destroy();
++search = new PagefindUI({ element: "#search", /* new options */ });
+```
+{{< /diffcode >}}
+
+After being destroyed, initializing the Pagefind UI will look again at the active language, and use any new options you might pass in.
+
 ## Further customization
 
 See the [Pagefind UI Configuration Reference](/docs/ui/) for all available options.
diff --git a/pagefind/features/multilingual.feature b/pagefind/features/multilingual.feature
@@ -274,4 +274,54 @@ Feature: Multilingual
             }
             """
         Then There should be no logs
-        Then The selector "[data-result]" should contain "1 — /mystery/ — 0"
+        Then The selector "[data-result]" should contain "1 — /mystery/ — 0"
+
+    Scenario: Pagefind can be destroyed and re-initialized
+        Given I have a "public/index.html" file with the content:
+            """
+            <!DOCTYPE html>
+            <html lang="en">
+                <head>
+                    <title>Generic Page</title>
+                </head>
+                <body>
+                    <p data-result-a>Nothing</p>
+                    <p data-result-b>Nothing</p>
+                </body>
+            </html>
+            """
+        When I run my program
+        Then I should see "Running Pagefind" in stdout
+        Then I should see the file "public/pagefind/pagefind.js"
+        Then I should see the file "public/pagefind/wasm.unknown.pagefind"
+        Then I should see the file "public/pagefind/wasm.en.pagefind"
+        Then I should see the file "public/pagefind/wasm.pt-br.pagefind"
+        Then I should see "en" in "public/pagefind/pagefind-entry.json"
+        Then I should see "pt-br" in "public/pagefind/pagefind-entry.json"
+        When I serve the "public" directory
+        When I load "/"
+        When I evaluate:
+            """
+            async function() {
+                let pagefind = await import("/pagefind/pagefind.js");
+
+                await pagefind.init();
+                let en_search = await pagefind.search("documenting");
+
+                let en_data = en_search.results[0] ? await en_search.results[0].data() : "None";
+                document.querySelector('[data-result-a]').innerText = `${en_search.results.length} — ${en_data.url}`;
+
+                await pagefind.destroy();
+
+                document.querySelector('html').setAttribute("lang", "pt-br");
+
+                await pagefind.init();
+                let pt_search = await pagefind.search("quilométricos");
+
+                let pt_data = pt_search.results[0] ? await pt_search.results[0].data() : "None";
+                document.querySelector('[data-result-b]').innerText = `${pt_search.results.length} — ${pt_data.url}`;
+            }
+            """
+        Then There should be no logs
+        Then The selector "[data-result-a]" should contain "1 — /en/"
+        Then The selector "[data-result-b]" should contain "1 — /pt-br/"
diff --git a/pagefind_ui/default/_dev_files/index.html b/pagefind_ui/default/_dev_files/index.html
@@ -19,7 +19,7 @@ <h1>Hello World from the local dev suite</h1>
     <div id="search"></div>
     <script src="/pagefind/ui.js"></script>
     <script>
-        new PagefindUI({ element: "#search", showSubResults: true });
+        window.test_pagefind = new PagefindUI({ element: "#search", showSubResults: true });
     </script>
 </body>
 </html>
diff --git a/pagefind_ui/default/svelte/ui.svelte b/pagefind_ui/default/svelte/ui.svelte
@@ -1,5 +1,5 @@
 <script>
-  import { onMount } from "svelte";
+  import { onMount, onDestroy } from "svelte";
   import { parse as parseBCP47 } from "bcp-47";
 
   import Result from "./result.svelte";
@@ -89,6 +89,11 @@
       availableTranslations["en"];
   });
 
+  onDestroy(() => {
+    pagefind?.destroy?.();
+    pagefind = null;
+  });
+
   $: debouncedSearch(val, selected_filters);
 
   const init = async () => {

diff --git a/pagefind_ui/default/ui-core.js b/pagefind_ui/default/ui-core.js
@@ -79,4 +79,8 @@ export class PagefindUI {
   triggerSearch(term) {
     this._pfs.$$set({ trigger_search_term: term });
   }
+
+  destroy() {
+    this._pfs.$destroy();
+  }
 }
diff --git a/pagefind_web_js/lib/coupled_search.ts b/pagefind_web_js/lib/coupled_search.ts
@@ -596,6 +596,10 @@ export const options = async (new_options: PagefindIndexOptions) => {
 export const init = async () => {
     init_pagefind();
 }
+export const destroy = async () => {
+    pagefind = undefined;
+    initial_options = undefined;
+}
 
 export const mergeIndex = async (indexPath: string, options: PagefindIndexOptions) => {
     init_pagefind();