pagefind: new ui.globalVariable option

CHANGELOG.md

@@ -13,6 +13,7 @@ Go to the `v1` branch to see the changelog of Lume 1.
 - `google_fonts`: Added `subset` option to filter character ranges. [#692]
 - `prism` plugin: Added `cssFile` and `placeholder` option to themes.
 - `code_highlight` plugin: Added `cssFile` and `placeholder` option to themes.
+- `pagefind` plugin: New `ui.globalVariable` option.
 
 ### Changed
 - Files with extension `.d.ts` are ignored by default [#707].

plugins/pagefind.ts

@@ -97,6 +97,12 @@ export interface UIOptions {
    * Configure the query parameter name.
    */
   highlightParam?: string;
+
+  /**
+   * The global variable name to use for the Pagefind UI instance.
+   * This is useful if you need to interact with the UI programmatically.
+   */
+  globalVariable?: string;
 }
 
 export interface Options {
@@ -196,7 +202,7 @@ export function pagefind(userOptions?: Options) {
     });
 
     if (options.ui) {
-      const { containerId, ...ui } = options.ui;
+      const { containerId, globalVariable, ...ui } = options.ui;
 
       site.process([".html"], (pages) => {
         for (const page of pages) {
@@ -249,12 +255,14 @@ export function pagefind(userOptions?: Options) {
                 ? ui.processResult.toString()
                 : undefined,
             };
+            let code = `new PagefindUI(${JSON.stringify(uiSettings)});`;
+            if (globalVariable) {
+              code = `window["${globalVariable}"] = ${code}`;
+            }
             const init = document.createElement("script");
             init.setAttribute("type", "text/javascript");
             init.innerHTML =
-              `window.addEventListener('DOMContentLoaded',()=>{new PagefindUI(${
-                JSON.stringify(uiSettings)
-              });});`;
+              `window.addEventListener('DOMContentLoaded',()=>{${code}});`;
             document.head.append(init);
 
             if (ui.highlightParam) {