Fix duplicate links not being preloaded (#403)

- Index visible links by href first, by element second
- Fixes issue #387 where duplicate links with identical hrefs won't preload at all if one link is visible and another one isn't

Author: daun

src/index.mjs

@@ -103,7 +103,7 @@ export function listen(options = {}) {
   const allowed = options.origins || [location.hostname];
   const ignores = options.ignores || [];
   const delay = options.delay || 0;
-  const hrefsInViewport = [];
+  const hrefsInViewport = new Map();
   const specRulesInViewport = new Map();
 
   const timeoutFn = options.timeoutFn || requestIdleCallback;
@@ -123,16 +123,19 @@ export function listen(options = {}) {
 
   const observer = new IntersectionObserver(entries => {
     for (let entry of entries) {
+      const set = hrefsInViewport.get(entry.target.href) || new Set();
+      hrefsInViewport.set(entry.target.href, set);
+
       // On enter
       if (entry.isIntersecting) {
         entry = entry.target;
-        // Adding href to array of hrefsInViewport
-        hrefsInViewport.push(entry.href);
+        // Adding href to set of hrefsInViewport
+        set.add(entry);
 
         // Setting timeout
         setTimeoutIfDelay(() => {
           // Do not prefetch if not found in viewport
-          if (!hrefsInViewport.includes(entry.href)) return;
+          if (!set || !set.size) return;
 
           if (!shouldOnlyPrerender && !shouldPrerenderAndPrefetch) {
             observer.unobserve(entry);
@@ -185,11 +188,7 @@ export function listen(options = {}) {
         // On exit
       } else {
         entry = entry.target;
-        const index = hrefsInViewport.indexOf(entry.href);
-
-        if (index !== -1) {
-          hrefsInViewport.splice(index);
-        }
+        set.delete(entry);
 
         if (specRulesInViewport.has(entry.href)) {
           specRulesInViewport.set(removeSpeculationRule(specRulesInViewport, entry.href));

test/fixtures/test-basic-usage.html

@@ -16,6 +16,7 @@
     <a href="main.css">CSS</a>
   </section>
   <a href="4.html" style="position:absolute;margin-top:900px;">Link 4</a>
+  <a href="1.html" style="position:absolute;margin-top:1000px;">Link 1 again</a>
   <script src="../../dist/quicklink.umd.js"></script>
   <script>
     quicklink.listen();

test/quicklink.spec.js

@@ -40,6 +40,7 @@ mainSuite('should prefetch in-viewport links correctly (UMD)', async context =>
   assert.ok(responseURLs.includes(`${server}/1.html`));
   assert.ok(responseURLs.includes(`${server}/2.html`));
   assert.ok(responseURLs.includes(`${server}/3.html`));
+  assert.ok(!responseURLs.includes(`${server}/4.html`));
 });
 
 mainSuite('should prefetch in-viewport links correctly (ES Modules)', async context => {
@@ -53,6 +54,7 @@ mainSuite('should prefetch in-viewport links correctly (ES Modules)', async cont
   assert.ok(responseURLs.includes(`${server}/1.html`));
   assert.ok(responseURLs.includes(`${server}/2.html`));
   assert.ok(responseURLs.includes(`${server}/3.html`));
+  assert.ok(!responseURLs.includes(`${server}/4.html`));
 });
 
 mainSuite('should prefetch in-viewport links that scroll into view correctly (UMD)', async context => {