Merge pull request #92 from github/refetch

add refetch API

src/index.ts

@@ -125,6 +125,11 @@ export default class IncludeFragmentElement extends HTMLElement {
     return fetch(request)
   }
 
+  refetch() {
+    privateData.delete(this)
+    this.#handleData()
+  }
+
   #observer = new IntersectionObserver(
     entries => {
       for (const entry of entries) {
@@ -169,11 +174,17 @@ export default class IncludeFragmentElement extends HTMLElement {
       const canceled = !this.dispatchEvent(
         new CustomEvent('include-fragment-replace', {cancelable: true, detail: {fragment}})
       )
-      if (canceled) return
+      if (canceled) {
+        this.#busy = false
+        return
+      }
+
       this.replaceWith(fragment)
       this.dispatchEvent(new CustomEvent('include-fragment-replaced'))
     } catch {
       this.classList.add('is-error')
+    } finally {
+      this.#busy = false
     }
   }
 

test/test.js

@@ -97,6 +97,7 @@ suite('include-fragment-element', function () {
   teardown(() => {
     document.body.innerHTML = ''
   })
+
   test('create from document.createElement', function () {
     const el = document.createElement('include-fragment')
     assert.equal('INCLUDE-FRAGMENT', el.nodeName)
@@ -141,6 +142,19 @@ suite('include-fragment-element', function () {
     )
   })
 
+  test('skips cache when using refetch', async function () {
+    const el = document.createElement('include-fragment')
+    el.src = '/count'
+
+    let data = await el.data
+    assert.equal('1', data)
+
+    el.refetch()
+
+    data = await el.data
+    assert.equal('2', data)
+  })
+
   test('data with src attribute', function () {
     const el = document.createElement('include-fragment')
     el.setAttribute('src', '/hello')