diff --git a/src/index.ts b/src/index.ts index bad1b3a..a9f3453 100644 --- a/src/index.ts +++ b/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 } } diff --git a/test/test.js b/test/test.js index 9c11688..c4c46d1 100644 --- a/test/test.js +++ b/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')