feat: add loading=lazy

Author: keithamus

src/index.ts

@@ -1,12 +1,30 @@
 const privateData = new WeakMap()
 
+const observer = new IntersectionObserver(entries => {
+  for(const entry of entries) {
+    if (entry.isIntersecting) {
+      const {target} = entry 
+      observer.unobserve(target)
+      if (!(target instanceof IncludeFragmentElement)) return
+      if (target.loading === 'lazy') {
+        handleData(target)
+      }
+    }
+  }
+}, {
+  rootMargin: '0px 0px 256px 0px',
+  threshold: 0.01
+})
+
+
 function fire(name: string, target: Element) {
   setTimeout(function () {
     target.dispatchEvent(new Event(name))
   }, 0)
 }
 
 async function handleData(el: IncludeFragmentElement) {
+  observer.unobserve(el)
   // eslint-disable-next-line github/no-then
   return getData(el).then(
     function (html: string) {
@@ -47,7 +65,7 @@ function isWildcard(accept: string | null) {
 export default class IncludeFragmentElement extends HTMLElement {
 
   static get observedAttributes(): string[] {
-    return ['src']
+    return ['src', 'loading']
   }
 
   get src(): string {
@@ -65,6 +83,15 @@ export default class IncludeFragmentElement extends HTMLElement {
     this.setAttribute('src', val)
   }
 
+  get loading(): 'eager'|'lazy'  {
+    if (this.getAttribute('loading') === 'lazy') return 'lazy'
+    return 'eager'
+  }
+
+  set loading(value: 'eager'|'lazy') {
+    this.setAttribute('loading', value)
+  }
+
   get accept(): string {
     return this.getAttribute('accept') || ''
   }
@@ -77,19 +104,27 @@ export default class IncludeFragmentElement extends HTMLElement {
     return getData(this)
   }
 
-  attributeChangedCallback(attribute: string): void {
+  attributeChangedCallback(attribute: string, oldVal:string|null): void {
     if (attribute === 'src') {
       // Source changed after attached so replace element.
       if (this.isConnected) {
         handleData(this)
       }
+    } else if (attribute === 'loading') {
+      // Loading mode changed to Eager after attached so replace element.
+      if (this.isConnected && oldVal !== 'eager' && this.loading === 'eager') {
+        handleData(this)
+      }
     }
   }
 
   connectedCallback(): void {
-    if (this.src) {
+    if (this.src && this.loading === 'eager') {
       handleData(this)
     }
+    if (this.loading === 'lazy') {
+      observer.observe(this)
+    }
   }
 
   request(): Request {
@@ -108,6 +143,7 @@ export default class IncludeFragmentElement extends HTMLElement {
   }
 
   load(): Promise<string> {
+    observer.unobserve(this)
     return Promise.resolve()
       .then(() => {
         fire('loadstart', this)

test/test.js

@@ -10,6 +10,11 @@ const responses = {
       }
     })
   },
+  '/slow-hello': function() {
+    return new Promise(resolve => {
+      setTimeout(resolve, 100)
+    }).then(responses['/hello'])
+  },
   '/one-two': function() {
     return new Response('<p id="one">one</p><p id="two">two</p>', {
       status: 200,
@@ -372,7 +377,7 @@ suite('include-fragment-element', function() {
     })
   })
 
-  test.only('fires replaced event', function() {
+  test('fires replaced event', function() {
     const elem = document.createElement('include-fragment')
     document.body.appendChild(elem)
 
@@ -386,7 +391,7 @@ suite('include-fragment-element', function() {
     })
   })
 
-  test.only('fires events for include-fragment node replacement operations for fragment manipulation', function() {
+  test('fires events for include-fragment node replacement operations for fragment manipulation', function() {
     const elem = document.createElement('include-fragment')
     document.body.appendChild(elem)
 
@@ -404,7 +409,7 @@ suite('include-fragment-element', function() {
     })
   })
 
-  test.only('does not replace node if event was canceled ', function() {
+  test('does not replace node if event was canceled ', function() {
     const elem = document.createElement('include-fragment')
     document.body.appendChild(elem)
 
@@ -420,4 +425,112 @@ suite('include-fragment-element', function() {
       assert(document.querySelector('include-fragment'), 'Node should not be replaced')
     })
   })
+
+  test('sets loading to "eager" by default', function() {
+    const div = document.createElement('div')
+    div.innerHTML = '<include-fragment loading="lazy" src="/hello">loading</include-fragment>'
+    document.body.appendChild(div)
+
+    assert(div.firstChild.loading, 'eager')
+  })
+
+  test('loading will return "eager" even if set to junk value', function() {
+    const div = document.createElement('div')
+    div.innerHTML = '<include-fragment loading="junk" src="/hello">loading</include-fragment>'
+    document.body.appendChild(div)
+
+    assert(div.firstChild.loading, 'eager')
+  })
+
+  test('loading=lazy loads if already visible on page', function() {
+    const div = document.createElement('div')
+    div.innerHTML = '<include-fragment loading="lazy" src="/hello">loading</include-fragment>'
+    document.body.appendChild(div)
+    
+    return when(div.firstChild, 'include-fragment-replaced').then(() => {
+      assert.equal(document.querySelector('include-fragment'), null)
+      assert.equal(document.querySelector('#replaced').textContent, 'hello')
+    })
+  })
+
+  test('loading=lazy does not load if not visible on page', function() {
+    const div = document.createElement('div')
+    div.innerHTML = '<include-fragment loading="lazy" src="/hello">loading</include-fragment>'
+    div.hidden = true
+    document.body.appendChild(div)
+    return Promise.race([
+      when(div.firstChild, 'load').then(() => {
+        throw new Error('<include-fragment loading=lazy> loaded too early')
+      }),
+      new Promise(resolve => setTimeout(resolve, 100))
+    ])
+  })
+
+  test('loading=lazy loads as soon as element visible on page', function() {
+    const div = document.createElement('div')
+    div.innerHTML = '<include-fragment loading="lazy" src="/hello">loading</include-fragment>'
+    div.hidden = true
+    let failed = false
+    document.body.appendChild(div)
+    const fail = () => failed = true
+    div.firstChild.addEventListener('load', fail)
+
+    setTimeout(function() {
+      div.hidden = false
+      div.firstChild.removeEventListener('load', fail)
+    }, 100)
+
+    return when(div.firstChild, 'load').then(() => {
+      assert.ok(!failed, "Load occured too early")
+    })
+  })
+
+  test('loading=lazy does not observably change during load cycle', function() {
+    const div = document.createElement('div')
+    div.innerHTML = '<include-fragment loading="lazy" src="/hello">loading</include-fragment>'
+    const elem = div.firstChild
+    document.body.appendChild(div)
+
+    return when(elem, 'loadstart').then(() => {
+      assert.equal(elem.loading, 'lazy', "loading mode changed observably")
+    })
+  })
+
+  test('loading=lazy can be switched to eager to load', function() {
+    const div = document.createElement('div')
+    div.innerHTML = '<include-fragment loading="lazy" src="/hello">loading</include-fragment>'
+    div.hidden = true
+    let failed = false
+    document.body.appendChild(div)
+    const fail = () => failed = true
+    div.firstChild.addEventListener('load', fail)
+
+    setTimeout(function() {
+      div.firstChild.loading = 'eager'
+      div.firstChild.removeEventListener('load', fail)
+    }, 100)
+
+    return when(div.firstChild, 'load').then(() => {
+      assert.ok(!failed, "Load occured too early")
+    })
+  })
+
+  test('loading=lazy wont load twice even if load is manually called', function() {
+    const div = document.createElement('div')
+    div.innerHTML = '<include-fragment loading="lazy" src="/slow-hello">loading</include-fragment>'
+    div.hidden = true
+    document.body.appendChild(div)
+    let count = 0
+    div.firstChild.addEventListener('loadstart', () => count += 1)
+    const load = div.firstChild.load()
+    setTimeout(() => {
+      div.hidden = false
+    }, 0)
+
+    return load
+      .then(() => when(div.firstChild, 'loadend'))
+      .then(() => {
+        assert.equal(count, 1, "Load occured too many times")
+      })
+  })
 })