Use new Pagefind UI constructor

pagefind/features/ui/ui_base.feature

@@ -0,0 +1,26 @@
+Feature: Base UI Tests
+    Background:
+        Given I have the environment variables:
+            | PAGEFIND_SOURCE | public |
+        Given I have a "public/index.html" file with the body:
+            """
+            <div id="search"></div>
+            <script src="/_pagefind/pagefind-ui.js" type="text/javascript"></script>
+
+            <script>
+                new PagefindUI({ element: "#search" });
+            </script>
+            """
+
+    Scenario: Pagefind UI loads
+        Given I have a "public/cat/index.html" file with the body:
+            """
+            <h1>world</h1>
+            """
+        When I run my program
+        Then I should see "Running Pagefind" in stdout
+        Then I should see the file "public/_pagefind/pagefind.js"
+        When I serve the "public" directory
+        When I load "/"
+        Then There should be no logs
+        Then The selector ".pagefind-ui" should exist

pagefind/tests/browser.rs

@@ -83,6 +83,35 @@ impl BrowserTester {
         Ok(())
     }
 
+    pub async fn selector_exists(
+        &mut self,
+        selector: &str,
+    ) -> Result<(), Box<dyn std::error::Error>> {
+        let _ = self
+            .page
+            .as_mut()
+            .expect("No page launched")
+            .evaluate_function(format!(
+                "
+            async function() {{
+                const time = Date.now();
+                const timeout = 2000;
+                const selector = \"{}\";
+                while (!document.querySelector(selector) && (Date.now() - time) < timeout) {{
+                    await new Promise(r => setTimeout(r, 50));
+                }}
+                
+                if (!document.querySelector(selector)) {{
+                    throw new Error(`${{selector}} did not appear within ${{timeout}}ms`);
+                }}
+            }}",
+                selector
+            ))
+            .await?;
+
+        Ok(())
+    }
+
     pub async fn contents(&mut self, selector: &str) -> Result<String, Box<dyn std::error::Error>> {
         let el = self
             .page

pagefind/tests/steps/web_steps.rs

@@ -48,6 +48,12 @@ async fn eval_js(world: &mut TestWorld, step: &Step) {
     }
 }
 
+#[then(regex = "^The selector (?:\"|')(.*)(?:\"|') should exist$")]
+async fn selector_exists(world: &mut TestWorld, selector: String) {
+    let browser = world.ensure_browser().await;
+    browser.selector_exists(&selector).await;
+}
+
 #[then(regex = "^The selector (?:\"|')(.*)(?:\"|') should contain (?:\"|')(.*)(?:\"|')$")]
 async fn selector_contains(world: &mut TestWorld, selector: String, contents: String) {
     let browser = world.ensure_browser().await;

pagefind_ui/svelte/ui.svelte

@@ -2,6 +2,7 @@
     import Result from "./result.svelte";
 
     export let base_path = "/_pagefind/";
+    export let pagefind_options = {};
 
     let val = "";
     let pagefind;
@@ -21,6 +22,7 @@
         initializing = true;
         if (!pagefind) {
             pagefind = await import(`${base_path}pagefind.js`);
+            pagefind.options(pagefind_options || {});
         }
     };
 

pagefind_ui/ui.js

@@ -1,18 +1,37 @@
-import PagefindUi from './svelte/ui.svelte';
+import Pagefind from './svelte/ui.svelte';
 
-(() => {
-    let base_path = "/_pagefind/";
-    try {
-        base_path = new URL(document.currentScript.src).pathname.match(/^(.*\/)(?:pagefind-)?ui.js.*$/)[1];
-    } catch (e) {
-        console.warn("Pagefind couldn't determine the base of the bundle from the import path. Falling back to the default.");
-    }
+class PagefindUi {
+    constructor(opts) {
+        let selector = opts.element ?? "[data-pagefind-ui]";
+        let bundlePath = opts.bundlePath;
+
+        if (!bundlePath) {
+            try {
+                bundlePath = new URL(document.currentScript.src).pathname.match(/^(.*\/)(?:pagefind-)?ui.js.*$/)[1];
+            } catch (e) {
+                bundlePath = "/_pagefind/";
+                console.warn(`Pagefind couldn't determine the base of the bundle from the javascript import path. Falling back to the default of ${bundlePath}.`);
+                console.warn("You can configure this by passing a bundlePath option to PagefindUi");
+            }
+        }
 
-    const dom = document.querySelector("[data-pagefind-ui]");
-    new PagefindUi({
-        target: dom,
-        props: {
-            base_path
+        // Remove the UI-specific config before passing it along to the Pagefind backend
+        delete opts["element"];
+        delete opts["bundlePath"];
+
+        const dom = document.querySelector(selector);
+        if (dom) {
+            new Pagefind({
+                target: dom,
+                props: {
+                    base_path: bundlePath,
+                    pagefind_options: opts,
+                }
+            })
+        } else {
+            console.error(`Pagefind UI couldn't find the selector ${selector}`);
         }
-    })
-})();
+    }
+}
+
+window.PagefindUi = PagefindUi;