feat(prefetch): ✨ limit the number of prefetched links

This close #708.
barbajs · May 12, 2023 · 68c8914 · 68c8914
2 parents 59acc45 + 779936a
commit 68c8914
Show file tree

Hide file tree

Showing 3 changed files with 46 additions and 28 deletions.
diff --git a/packages/prefetch/__tests__/prefetch.init.test.ts b/packages/prefetch/__tests__/prefetch.init.test.ts
@@ -31,6 +31,7 @@ it('init with defaults', () => {
 
   expect(prefetch.root).toBe(document.body);
   expect(prefetch.timeout).toBe(2e3);
+  expect(prefetch.limit).toBe(0);
   expect(prefetch.observe).toHaveBeenCalled();
 });
 
@@ -40,11 +41,13 @@ it('init with options', () => {
   barba.use(prefetch, {
     root: wrapper,
     timeout: 0,
+    limit: 0
   });
   barba.init();
 
   expect(prefetch.root).toBe(wrapper);
   expect(prefetch.timeout).toBe(0);
+  expect(prefetch.limit).toBe(0);
 });
 
 it('registers hooks', () => {

diff --git a/packages/prefetch/src/defs/index.ts b/packages/prefetch/src/defs/index.ts
@@ -5,4 +5,5 @@
 export interface IPrefetchOptions {
   root?: HTMLElement | HTMLDocument;
   timeout?: number;
+  limit?: number;
 }
diff --git a/packages/prefetch/src/prefetch.ts b/packages/prefetch/src/prefetch.ts
@@ -28,20 +28,22 @@ class Prefetch implements IBarbaPlugin<IPrefetchOptions> {
   public observer: IntersectionObserver;
   public root: HTMLElement | HTMLDocument;
   public timeout: number;
+  public limit: number;
   public toPrefetch: Set<string> = new Set();
 
   /**
    * Plugin installation.
    */
   public install(
     barba: Core,
-    { root = document.body, timeout = 2e3 }: IPrefetchOptions = {}
+    { root = document.body, timeout = 2e3, limit = 0 }: IPrefetchOptions = {}
   ) {
     this.logger = new barba.Logger(this.name);
     this.logger.info(this.version);
     this.barba = barba;
     this.root = root;
     this.timeout = timeout;
+    this.limit = limit;
   }
 
   /**
@@ -68,38 +70,44 @@ class Prefetch implements IBarbaPlugin<IPrefetchOptions> {
     /* istanbul ignore next */
     this.observer = new IntersectionObserver(entries => {
       entries.forEach(entry => {
-        if (entry.isIntersecting) {
-          const link = entry.target as Link;
-          const href = this.barba.dom.getHref(link);
+        if (!entry.isIntersecting) {
+          return;
+        }
+
+        const link = entry.target as Link;
+        const href = this.barba.dom.getHref(link);
+
+        if (!this.toPrefetch.has(href)) {
+          return;
+        }
+
+        this.observer.unobserve(link);
 
-          if (this.toPrefetch.has(href)) {
-            this.observer.unobserve(link);
-            // Prefetch and cache
-            if (!this.barba.cache.has(href)) {
-              this.barba.cache.set(
+        // Prefetch and cache
+        if (!this.barba.cache.has(href)) {
+          this.barba.cache.set(
+            href,
+            this.barba
+              .request(
                 href,
-                this.barba
-                  .request(
-                    href,
-                    this.barba.timeout,
-                    this.barba['onRequestError'].bind(this.barba, 'barba'), // tslint:disable-line:no-string-literal
-                    this.barba.cache,
-                    this.barba.headers
-                  )
-                  .catch(error => {
-                    this.logger.error(error);
-                  }),
-                'prefetch',
-                'pending'
-              );
-            } else {
-              this.barba.cache.update(href, { action: 'prefetch' });
-            }
-          }
+                this.barba.timeout,
+                this.barba['onRequestError'].bind(this.barba, 'barba'), // tslint:disable-line:no-string-literal
+                this.barba.cache,
+                this.barba.headers
+              )
+              .catch(error => {
+                this.logger.error(error);
+              }),
+            'prefetch',
+            'pending'
+          );
+        } else {
+          this.barba.cache.update(href, { action: 'prefetch' });
         }
       });
     });
     this.observe();
+
     // Register hooks
     this.barba.hooks.after(this.observe, this);
   }
@@ -110,8 +118,14 @@ class Prefetch implements IBarbaPlugin<IPrefetchOptions> {
 
     requestIdleCallback(
       () => {
+        let links = Array.from(this.root.querySelectorAll('a'));
+
+        if (this.limit > 0) {
+          links = links.slice(0, this.limit);
+        }
+
         // If not, find all links and use IntersectionObserver.
-        this.root.querySelectorAll('a').forEach(el => {
+        links.forEach(el => {
           const link = (el as unknown) as Link;
           const href = this.barba.dom.getHref(link);