drab 6.5.1 → 7.0.0

package/dist/prefetch/index.js

@@ -1,4 +1,4 @@
-import { Base } from "../base/index.js";
+import { Lifecycle, Trigger } from "../base/index.js";
 /**
  * The `Prefetch` element can prefetch a url, or enhance the `HTMLAnchorElement` by loading the HTML for a page before it is navigated to. This element speeds up the navigation for multi-page applications (MPAs).
  *
@@ -29,14 +29,14 @@ import { Base } from "../base/index.js";
  *
  * This element can be deprecated once the Speculation Rules API is supported across browsers. The API will be able to prefetch assets in a similar way with the `source: "document"` and `eagerness` features, and will work without JavaScript.
  */
-export class Prefetch extends Base {
-    #prefetchedUrls = [];
+export class Prefetch extends Lifecycle(Trigger()) {
+    #prefetchedUrls = new Set();
     constructor() {
         super();
     }
     /** When to prefetch the url. */
     get #strategy() {
-        return (this.getAttribute("strategy") ?? "hover");
+        return this.getAttribute("strategy");
     }
     /** Prerender with the Speculation Rules API. */
     get #prerender() {
@@ -47,16 +47,16 @@ export class Prefetch extends Base {
         return this.getAttribute("url");
     }
     /**
-     * Appends `<link rel="prefetch">` or `<script type="speculationrules">` to the head of the document.
+     * Appends `<link rel="prefetch">` or `<script type="speculationrules">`
+     * to the head of the document.
      *
      * @param options Configuration options.
      */
-    appendTag(options) {
-        const { url, prerender } = options;
+    prefetch(options) {
+        const { url } = options;
         // if not the current page and not already prefetched
-        if (!(url === window.location.href) &&
-            !this.#prefetchedUrls.includes(url)) {
-            this.#prefetchedUrls.push(url);
+        if (!(url === window.location.href) && !this.#prefetchedUrls.has(url)) {
+            this.#prefetchedUrls.add(url);
             if (HTMLScriptElement.supports &&
                 HTMLScriptElement.supports("speculationrules")) {
                 const rules = {
@@ -65,9 +65,8 @@ export class Prefetch extends Base {
                     // https://github.com/WICG/nav-speculation/issues/162#issuecomment-1977818473
                     prefetch: [{ source: "list", urls: [url] }],
                 };
-                if (prerender) {
+                if (options.prerender)
                     rules.prerender = rules.prefetch;
-                }
                 const script = document.createElement("script");
                 script.type = "speculationrules";
                 script.textContent = JSON.stringify(rules);
@@ -82,35 +81,25 @@ export class Prefetch extends Base {
             }
         }
     }
-    /**
-     * Use to prefetch/prerender HTML.
-     *
-     * Can be used more than once with different options for different selectors.
-     *
-     * @param options Prefetch options.
-     */
-    prefetch(options = {
-        anchors: this.getTrigger(HTMLAnchorElement),
-        prerender: this.#prerender,
-        strategy: this.#strategy,
-    }) {
-        // defaults if partially defined
-        const { anchors = this.getTrigger(HTMLAnchorElement), prerender = this.#prerender, strategy = this.#strategy, } = options;
+    mount() {
+        // immediately prefetch the `url` attribute if it exists
+        if (this.#url)
+            this.prefetch({ url: this.#url, prerender: this.#prerender });
+        // prefetch the `trigger` elements
+        const anchors = this.triggers(HTMLAnchorElement);
+        const prerender = this.#prerender;
+        const strategy = this.#strategy;
         let prefetchTimer;
-        /**
-         * @param delay ms delay - for `hover`
-         * @returns the event listener with delay
-         */
         const listener = (delay = 200) => (e) => {
             const { href } = e.currentTarget;
-            prefetchTimer = setTimeout(() => this.appendTag({ url: href, prerender }), delay);
+            prefetchTimer = setTimeout(() => this.prefetch({ url: href, prerender }), delay);
         };
         const reset = () => clearTimeout(prefetchTimer);
         const observer = new IntersectionObserver((entries) => {
-            for (const e of entries) {
-                if (e.isIntersecting) {
-                    this.appendTag({
-                        url: e.target.href,
+            for (const entry of entries) {
+                if (entry.isIntersecting) {
+                    this.prefetch({
+                        url: entry.target.href,
                         prerender,
                     });
                 }
@@ -118,7 +107,7 @@ export class Prefetch extends Base {
         });
         for (const anchor of anchors) {
             if (strategy === "load") {
-                this.appendTag({ url: anchor.href, prerender });
+                this.prefetch({ url: anchor.href, prerender });
             }
             else if (strategy === "visible") {
                 observer.observe(anchor);
@@ -135,12 +124,4 @@ export class Prefetch extends Base {
             }
         }
     }
-    mount() {
-        // immediately prefetch the `url` attribute if it exists
-        if (this.#url) {
-            this.appendTag({ url: this.#url, prerender: this.#prerender });
-        }
-        // prefetch the `trigger` elements
-        this.prefetch();
-    }
 }