Preload only one <include-fragment>

dgraham · dgraham · commit ee7d21a8909e · 2019-02-05T14:16:21.000-07:00
When preloading menu content with an `&lt;include-fragment&gt;`, ignore
any additional `&lt;include-fragment&gt;` children included in the server
response.
diff --git a/index.js b/index.js
@@ -44,7 +44,7 @@ class DetailsMenuElement extends HTMLElement {
     }
 
     const subscriptions = [focusOnOpen(details)]
-    states.set(this, {details, subscriptions})
+    states.set(this, {details, subscriptions, preloaded: false})
   }
 
   disconnectedCallback() {
@@ -78,6 +78,12 @@ function loadFragment(event: Event) {
   const src = menu.getAttribute('src')
   if (!src) return
 
+  const state = states.get(menu)
+  if (!state) return
+
+  if (state.preloaded) return
+  state.preloaded = true
+
   const loader = menu.querySelector('include-fragment')
   if (loader && !loader.hasAttribute('src')) {
     loader.addEventListener('loadend', () => autofocus(details))
diff --git a/test/test.js b/test/test.js
@@ -456,5 +456,21 @@ describe('details-menu element', function() {
 
       assert.equal('/test', loader.getAttribute('src'))
     })
+
+    it('does not fetch nested include-fragment', function() {
+      const details = document.querySelector('details')
+      const loader = details.querySelector('include-fragment')
+
+      details.dispatchEvent(new CustomEvent('mouseover'))
+      assert.equal('/test', loader.getAttribute('src'), 'mouse hover should trigger fetch')
+
+      // Simulate include-fragment fetch.
+      const response = document.createElement('include-fragment')
+      loader.replaceWith(response)
+
+      details.open = true
+      details.dispatchEvent(new CustomEvent('toggle'))
+      assert(!response.hasAttribute('src'), 'toggle should not trigger second fetch')
+    })
   })
 })
