@pagefind/component-ui 1.5.0-alpha.3

package/README.md

@@ -0,0 +1,66 @@
+# @pagefind/component-ui
+
+Modular web components for Pagefind search.
+
+## Installation
+
+### Via npm
+
+```bash
+npm install @pagefind/component-ui
+```
+
+Import the components and styles:
+
+```javascript
+import '@pagefind/component-ui';
+import '@pagefind/component-ui/css';
+```
+
+If your bundler doesn't support the `/css` export, import the CSS file directly:
+
+```javascript
+import '@pagefind/component-ui/css/pagefind-component-ui.css';
+```
+
+### Via Pagefind's bundled files
+
+After running Pagefind, include the generated files from your output directory:
+
+```html
+<link href="/pagefind/pagefind-component-ui.css" rel="stylesheet">
+<script src="/pagefind/pagefind-component-ui.js" type="module"></script>
+```
+
+## Quick Start
+
+Add a modal search to your site:
+
+```html
+<pagefind-modal-trigger></pagefind-modal-trigger>
+<pagefind-modal></pagefind-modal>
+```
+
+Or use a searchbox dropdown:
+
+```html
+<pagefind-searchbox></pagefind-searchbox>
+```
+
+Or build your own layout with individual components:
+
+```html
+<pagefind-input></pagefind-input>
+<pagefind-summary></pagefind-summary>
+<pagefind-results></pagefind-results>
+```
+
+## Documentation
+
+For full documentation, component references, styling guides, and examples, visit:
+
+**https://ui.pagefind.app/**
+
+## License
+
+MIT

package/components/base-element.ts

@@ -0,0 +1,110 @@
+import { getInstanceManager } from "./instance-manager";
+import { Instance } from "../core/instance";
+
+export interface ErrorInfo {
+  message: string;
+  details?: string;
+}
+
+/**
+ * Base class for all Pagefind web components
+ */
+export class PagefindElement extends HTMLElement {
+  instance: Instance | null = null;
+  protected _initialized: boolean = false;
+
+  constructor() {
+    super();
+  }
+
+  connectedCallback(): void {
+    if (this._initialized) return;
+    this._initialized = true;
+
+    const instanceName = this.getAttribute("instance") || "default";
+    const manager = getInstanceManager();
+    this.instance = manager.getInstance(instanceName);
+
+    this.init();
+
+    if (this.register && typeof this.register === "function") {
+      this.register(this.instance);
+    }
+  }
+
+  disconnectedCallback(): void {
+    if (this.cleanup && typeof this.cleanup === "function") {
+      this.cleanup();
+    }
+    this._initialized = false;
+  }
+
+  attributeChangedCallback(
+    name: string,
+    oldValue: string | null,
+    newValue: string | null,
+  ): void {
+    if (!this._initialized || oldValue === newValue) return;
+
+    const prop = this.kebabToCamel(name);
+
+    if (newValue === "false") {
+      (this as Record<string, unknown>)[prop] = false;
+    } else if (newValue === "true") {
+      (this as Record<string, unknown>)[prop] = true;
+    } else if (newValue === null || newValue === undefined) {
+      (this as Record<string, unknown>)[prop] = false;
+    } else {
+      (this as Record<string, unknown>)[prop] = newValue;
+    }
+
+    if (this.update && typeof this.update === "function") {
+      this.update();
+    }
+  }
+
+  protected kebabToCamel(str: string): string {
+    return str.replace(/-([a-z])/g, (g) => g[1].toUpperCase());
+  }
+
+  protected ensureId(prefix = "pagefind"): string {
+    if (!this.id && this.instance) {
+      this.id = this.instance.generateId(prefix);
+    }
+    return this.id;
+  }
+
+  init(): void {}
+
+  reconcileAria(): void {}
+
+  register(_instance: Instance): void {}
+
+  cleanup(): void {}
+
+  update(): void {}
+
+  showError(error: ErrorInfo): void {
+    const errorEl = document.createElement("div");
+    errorEl.className = "pf-error";
+    errorEl.innerHTML = `
+            <strong>Pagefind Error:</strong> ${this.escapeHtml(error.message || "Unknown error")}
+            ${error.details ? `<br><small>${this.escapeHtml(error.details)}</small>` : ""}
+        `;
+    this.appendChild(errorEl);
+
+    this.dispatchEvent(
+      new CustomEvent("pagefind-error", {
+        detail: error,
+        bubbles: true,
+        composed: true,
+      }),
+    );
+  }
+
+  protected escapeHtml(text: string): string {
+    const div = document.createElement("div");
+    div.textContent = text;
+    return div.innerHTML;
+  }
+}

package/components/index.ts

@@ -0,0 +1,31 @@
+export { getInstanceManager, configureInstance } from "./instance-manager";
+
+import "./pagefind-config";
+import "./pagefind-input";
+import "./pagefind-summary";
+import "./pagefind-results";
+import "./pagefind-filter-pane";
+import "./pagefind-filter-dropdown";
+import "./pagefind-modal";
+import "./pagefind-modal-trigger";
+import "./pagefind-modal-header";
+import "./pagefind-modal-body";
+import "./pagefind-modal-footer";
+import "./pagefind-keyboard-hints";
+import "./pagefind-searchbox";
+
+export { PagefindConfig } from "./pagefind-config";
+export { PagefindInput } from "./pagefind-input";
+export { PagefindSummary } from "./pagefind-summary";
+export { PagefindResults } from "./pagefind-results";
+export { PagefindFilterPane } from "./pagefind-filter-pane";
+export { PagefindFilterDropdown } from "./pagefind-filter-dropdown";
+export { PagefindModal } from "./pagefind-modal";
+export { PagefindModalTrigger } from "./pagefind-modal-trigger";
+export { PagefindModalHeader } from "./pagefind-modal-header";
+export { PagefindModalBody } from "./pagefind-modal-body";
+export { PagefindModalFooter } from "./pagefind-modal-footer";
+export { PagefindKeyboardHints } from "./pagefind-keyboard-hints";
+export { PagefindSearchbox } from "./pagefind-searchbox";
+
+export { PagefindElement } from "./base-element";

package/components/instance-manager.ts

@@ -0,0 +1,91 @@
+import { Instance } from "../core/instance";
+import type { InstanceOptions } from "../types";
+
+class InstanceManager {
+  private instances: Map<string, Instance> = new Map();
+  private defaultOptions: InstanceOptions;
+
+  constructor() {
+    this.defaultOptions = {
+      bundlePath: this.detectBundlePath(),
+    };
+  }
+
+  private detectBundlePath(): string {
+    try {
+      // Important: Check that the element is indeed a <script> node, to avoid a DOM clobbering vulnerability
+      if (
+        document?.currentScript &&
+        document.currentScript.tagName.toUpperCase() === "SCRIPT"
+      ) {
+        const scriptPath = new URL(
+          (document.currentScript as HTMLScriptElement).src,
+        ).pathname.match(/^(.*\/)(?:pagefind[-_])?.*\.js.*$/);
+        if (scriptPath) {
+          return scriptPath[1];
+        }
+      }
+    } catch (e) {}
+    return "/pagefind/";
+  }
+
+  getInstance(
+    name: string = "default",
+    options: InstanceOptions = {},
+  ): Instance {
+    const existing = this.instances.get(name);
+    if (existing) {
+      return existing;
+    }
+
+    const instanceOptions: InstanceOptions = {
+      ...this.defaultOptions,
+      ...options,
+    };
+
+    const instance = new Instance(name, instanceOptions);
+    this.instances.set(name, instance);
+
+    return instance;
+  }
+
+  hasInstance(name: string): boolean {
+    return this.instances.has(name);
+  }
+
+  removeInstance(name: string): void {
+    this.instances.delete(name);
+  }
+
+  getInstanceNames(): string[] {
+    return Array.from(this.instances.keys());
+  }
+}
+
+let instanceManager: InstanceManager | null = null;
+
+export function getInstanceManager(): InstanceManager {
+  if (!instanceManager) {
+    instanceManager = new InstanceManager();
+  }
+  return instanceManager;
+}
+
+/**
+ * Configure options for a named instance
+ */
+export function configureInstance(
+  name: string,
+  options: InstanceOptions,
+): Instance {
+  const manager = getInstanceManager();
+
+  if (manager.hasInstance(name)) {
+    console.warn(
+      `[Pagefind Component UI]: Instance "${name}" already exists, configuration ignored`,
+    );
+    return manager.getInstance(name);
+  }
+
+  return manager.getInstance(name, options);
+}

package/components/pagefind-config.ts

@@ -0,0 +1,44 @@
+import { PagefindElement } from "./base-element";
+import { Instance } from "../core/instance";
+
+export class PagefindConfig extends PagefindElement {
+  init(): void {
+    this.setAttribute("hidden", "");
+  }
+
+  register(instance: Instance): void {
+    instance.registerUtility(this);
+
+    const bundlePath = this.getAttribute("bundle-path");
+    if (bundlePath) {
+      instance.options.bundlePath = bundlePath;
+    }
+
+    const baseUrl = this.getAttribute("base-url");
+    if (baseUrl) {
+      instance.pagefindOptions.baseUrl = baseUrl;
+    }
+
+    const excerptLength = this.getAttribute("excerpt-length");
+    if (excerptLength) {
+      instance.pagefindOptions.excerptLength = parseInt(excerptLength, 10);
+    }
+
+    const lang = this.getAttribute("lang");
+    if (lang) {
+      instance.setLanguage(lang);
+    }
+
+    if (this.hasAttribute("faceted")) {
+      instance.faceted = true;
+    }
+
+    if (this.hasAttribute("preload")) {
+      instance.triggerLoad();
+    }
+  }
+}
+
+if (!customElements.get("pagefind-config")) {
+  customElements.define("pagefind-config", PagefindConfig);
+}