From 9d901bd2b3a6a7edfa68865c2f1496b4a0c71ded Mon Sep 17 00:00:00 2001
From: Liam Bigelow <40188355+bglw@users.noreply.github.com>
Date: Wed, 15 Nov 2023 22:12:39 +1300
Subject: [PATCH] Add a pagefind.destroy() API for the JS and Default UI
---
docs/content/docs/api.md | 28 ++++++++++++
docs/content/docs/ui-usage.md | 16 +++++++
pagefind/features/multilingual.feature | 52 ++++++++++++++++++++++-
pagefind_ui/default/_dev_files/index.html | 2 +-
pagefind_ui/default/svelte/ui.svelte | 7 ++-
pagefind_ui/default/ui-core.js | 4 ++
pagefind_web_js/lib/coupled_search.ts | 4 ++
7 files changed, 110 insertions(+), 3 deletions(-)
diff --git a/docs/content/docs/api.md b/docs/content/docs/api.md
index f0de55b7..8436df0e 100644
--- 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
index d51034fb..f32aeedb 100644
--- 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
index b634256b..1a7cea4f 100644
--- 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"
\ No newline at end of file
+ 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:
+ """
+
+
+
+ Generic Page
+
+
+ Nothing
+ Nothing
+
+
+ """
+ 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
index f9f4331f..7a946577 100644
--- a/pagefind_ui/default/_dev_files/index.html
+++ b/pagefind_ui/default/_dev_files/index.html
@@ -19,7 +19,7 @@ Hello World from the local dev suite