fix: guarantee order of load events

Fixes #21

Author: keithamus

src/index.ts

@@ -21,10 +21,13 @@ const observer = new IntersectionObserver(entries => {
 })
 
 
-function fire(name: string, target: Element) {
-  setTimeout(function () {
-    target.dispatchEvent(new Event(name))
-  }, 0)
+function fire(name: string, target: Element): Promise<void> {
+  return new Promise(resolve => {
+    setTimeout(function () {
+      target.dispatchEvent(new Event(name))
+      resolve()
+    }, 0)
+  })
 }
 
 async function handleData(el: IncludeFragmentElement) {
@@ -149,10 +152,8 @@ export default class IncludeFragmentElement extends HTMLElement {
   load(): Promise<string> {
     observer.unobserve(this)
     return Promise.resolve()
-      .then(() => {
-        fire('loadstart', this)
-        return this.fetch(this.request())
-      })
+      .then(() => fire('loadstart', this))
+      .then(() => this.fetch(this.request()))
       .then(response => {
         if (response.status !== 200) {
           throw new Error(`Failed to load resource: the server responded with a status of ${response.status}`)
@@ -161,21 +162,15 @@ export default class IncludeFragmentElement extends HTMLElement {
         if (!isWildcard(this.accept) && (!ct || !ct.includes(this.accept ? this.accept : 'text/html'))) {
           throw new Error(`Failed to load resource: expected ${this.accept || 'text/html'} but was ${ct}`)
         }
-        return response
+        return response.text()
+      })
+      .then(data => {
+        fire('load', this).then(() => fire('loadend', this))
+        return Promise.resolve(data)
+      }, error => {
+        fire('error', this).then(() => fire('loadend', this))
+        throw error
       })
-      .then(response => response.text())
-      .then(
-        data => {
-          fire('load', this)
-          fire('loadend', this)
-          return data
-        },
-        error => {
-          fire('error', this)
-          fire('loadend', this)
-          throw error
-        }
-      )
   }
 
   fetch(request: RequestInfo): Promise<Response> {

test/test.js

@@ -426,6 +426,25 @@ suite('include-fragment-element', function() {
     })
   })
 
+  test('loading events fire in guaranteed order', function() {
+    const elem = document.createElement('include-fragment')
+    const order = []
+    const events = [
+      when(elem, 'loadend').then(() => order.push('loadend')),
+      when(elem, 'load').then(() => order.push('load')),
+      when(elem, 'loadstart').then(() => order.push('loadstart'))
+    ]
+    elem.src = '/hello'
+    const originalSetTimeout = window.setTimeout
+    let i = 60
+    window.setTimeout = (fn, ms, ...rest) => originalSetTimeout.call(window, fn, ms + (i -= 20), ...rest)
+    elem.load()
+    return Promise.all(events).then(() => {
+      window.setTimeout = originalSetTimeout
+      assert.deepStrictEqual(order, ['loadstart', 'load', 'loadend'])
+    })
+  })
+
   test('sets loading to "eager" by default', function() {
     const div = document.createElement('div')
     div.innerHTML = '<include-fragment loading="lazy" src="/hello">loading</include-fragment>'