feat: enable onload callbacks (#414)

* refactor(examples): run ssr example from server * chore: switch to babel for build buble complains too much * feat: enable loaded callbacks feat: add skip option * examples: add async-callback browser example * examples: fix server * examples(ssr): add reactive script with callback * fix: also skip on ssr * chore: remove unused var * feat: only add mutationobserver if DOM is still loading feat: disconnect mutation observer once DOM has loaded * examples: pass vmid to loadCallback instead of el * feat: also support load callbacks for link/style tags * test: add unit tests for load * test: add load e2e test * chore: fix lint * chore: remove unused files * test: fix e2e load callback test * test: fix attempt * examples: ie9 compatiblity destructuring doesnt work in ie9 * fix: add onload attribute on ssr dont rely on mutationobserver * chore: lint ci conf * refactor: remove loadCallbackAttribute config option test: fix coverage for load * test: improve coverage * fix: only use console when it exists (for ie9) * chore: fix coverage
2026-06-18 10:00:34 +03:00 · 2019-07-24 10:18:40 +02:00
parent 05163a77a8
commit fc71e1f1c4
49 changed files with 963 additions and 632 deletions
@@ -0,0 +1,213 @@
+import { pTick, createDOM } from '../utils'
+
+const onLoadAttribute = {
+  k: 'onload',
+  v: 'this.__vm_l=1'
+}
+
+const getLoadAttribute = () => `${onLoadAttribute.k}="${onLoadAttribute.v}"`
+
+describe('load callbacks', () => {
+  let load
+  beforeEach(async () => {
+    jest.resetModules()
+    load = await import('../../src/client/load')
+  })
+
+  afterEach(() => {
+    jest.restoreAllMocks()
+  })
+
+  test('isDOMLoaded', async () => {
+    jest.useRealTimers()
+    const { document } = createDOM()
+    await pTick()
+
+    jest.spyOn(document, 'readyState', 'get').mockReturnValue('loading')
+    expect(load.isDOMLoaded(document)).toBe(false)
+
+    jest.spyOn(document, 'readyState', 'get').mockReturnValue('interactive')
+    expect(load.isDOMLoaded(document)).toBe(true)
+
+    jest.spyOn(document, 'readyState', 'get').mockReturnValue('complete')
+    expect(load.isDOMLoaded(document)).toBe(true)
+  })
+
+  test('isDOMComplete', async () => {
+    jest.useRealTimers()
+    const { document } = createDOM()
+    await pTick()
+
+    jest.spyOn(document, 'readyState', 'get').mockReturnValue('loading')
+    expect(load.isDOMComplete(document)).toBe(false)
+
+    jest.spyOn(document, 'readyState', 'get').mockReturnValue('interactive')
+    expect(load.isDOMComplete(document)).toBe(false)
+
+    jest.spyOn(document, 'readyState', 'get').mockReturnValue('complete')
+    expect(load.isDOMComplete(document)).toBe(true)
+  })
+
+  test('waitDOMLoaded', async () => {
+    expect(load.waitDOMLoaded()).toBe(true)
+
+    jest.spyOn(document, 'readyState', 'get').mockReturnValue('loading')
+    const waitPromise = load.waitDOMLoaded()
+    expect(waitPromise).toEqual(expect.any(Promise))
+
+    const domLoaded = new Event('DOMContentLoaded')
+    document.dispatchEvent(domLoaded)
+
+    await expect(waitPromise).resolves.toEqual(expect.any(Object))
+  })
+
+  test('addCallback (no query)', () => {
+    const callback = () => {}
+    load.addCallback(callback)
+
+    const matches = jest.fn(() => false)
+    load.applyCallbacks({ matches })
+
+    expect(matches).toHaveBeenCalledTimes(1)
+    expect(matches).toHaveBeenCalledWith(`[${getLoadAttribute()}]`)
+  })
+
+  test('addCallback (query)', () => {
+    const callback = () => {}
+    load.addCallback('script', callback)
+
+    const matches = jest.fn(() => false)
+    load.applyCallbacks({ matches })
+
+    expect(matches).toHaveBeenCalledTimes(1)
+    expect(matches).toHaveBeenCalledWith(`script[${getLoadAttribute()}]`)
+  })
+
+  test('addCallbacks', () => {
+    const addListeners = jest.spyOn(document, 'querySelectorAll').mockReturnValue(false)
+
+    const config = { tagIDKeyName: 'test-id' }
+
+    const tags = [
+      { [config.tagIDKeyName]: 'test1', callback: false },
+      { [config.tagIDKeyName]: false, callback: () => {} },
+      { [config.tagIDKeyName]: 'test1', callback: () => {} },
+      { [config.tagIDKeyName]: 'test2', callback: () => {} }
+    ]
+
+    load.addCallbacks(config, 'link', tags)
+
+    const matches = jest.fn(() => false)
+    load.applyCallbacks({ matches })
+
+    expect(matches).toHaveBeenCalledTimes(2)
+    expect(matches).toHaveBeenCalledWith(`link[data-${config.tagIDKeyName}="test1"][${getLoadAttribute()}]`)
+    expect(matches).toHaveBeenCalledWith(`link[data-${config.tagIDKeyName}="test2"][${getLoadAttribute()}]`)
+
+    expect(addListeners).not.toHaveBeenCalled()
+  })
+
+  test('addCallbacks (auto add listeners)', () => {
+    const addListeners = jest.spyOn(document, 'querySelectorAll').mockReturnValue(false)
+
+    const config = { tagIDKeyName: 'test-id', loadCallbackAttribute: 'test-load' }
+
+    const tags = [
+      { [config.tagIDKeyName]: 'test1', callback: () => {} }
+    ]
+
+    load.addCallbacks(config, 'style', tags, true)
+
+    const matches = jest.fn(() => false)
+    load.applyCallbacks({ matches })
+
+    expect(matches).toHaveBeenCalledTimes(1)
+    expect(matches).toHaveBeenCalledWith(`style[data-${config.tagIDKeyName}="test1"][${getLoadAttribute()}]`)
+
+    expect(addListeners).toHaveBeenCalled()
+  })
+
+  test('callback trigger', () => {
+    const { window, document } = createDOM()
+
+    const callback = jest.fn()
+
+    const el = document.createElement('script')
+    el.setAttribute(onLoadAttribute.k, onLoadAttribute.v)
+    document.body.appendChild(el)
+
+    load.addCallback(callback)
+    load.applyCallbacks(el)
+
+    const loadEvent = new window.Event('load')
+    el.dispatchEvent(loadEvent)
+
+    expect(callback).toHaveBeenCalled()
+  })
+
+  test('callback trigger (loaded before adding)', () => {
+    const { document } = createDOM()
+
+    const callback = jest.fn()
+
+    const el = document.createElement('script')
+    el.setAttribute(onLoadAttribute.k, onLoadAttribute.v)
+    el.__vm_l = 1
+    document.body.appendChild(el)
+
+    load.addCallback(callback)
+    load.applyCallbacks(el)
+
+    expect(callback).toHaveBeenCalled()
+  })
+
+  test('callback trigger (only once)', () => {
+    const { window, document } = createDOM()
+
+    const callback = jest.fn()
+
+    const el = document.createElement('script')
+    el.setAttribute(onLoadAttribute.k, onLoadAttribute.v)
+    document.body.appendChild(el)
+
+    el.__vm_l = 1
+
+    load.addCallback(callback)
+    load.applyCallbacks(el)
+
+    el.__vm_cb = true
+
+    const loadEvent = new window.Event('load')
+    el.dispatchEvent(loadEvent)
+
+    expect(callback).toHaveBeenCalledTimes(1)
+  })
+
+  test('only one event listener added', () => {
+    const { window, document } = createDOM()
+
+    const el = document.createElement('script')
+    const addEventListener = el.addEventListener.bind(el)
+    const addEventListenerSpy = jest.spyOn(el, 'addEventListener').mockImplementation((...args) => {
+      return addEventListener(...args)
+    })
+    el.setAttribute(onLoadAttribute.k, onLoadAttribute.v)
+    document.body.appendChild(el)
+
+    load.addCallback(() => {})
+    load.applyCallbacks(el)
+
+    const loadEvent1 = new window.Event('load')
+    el.dispatchEvent(loadEvent1)
+
+    expect(addEventListenerSpy).toHaveBeenCalledTimes(1)
+
+    el.setAttribute(onLoadAttribute.k, onLoadAttribute.v)
+    load.applyCallbacks(el)
+
+    const loadEvent2 = new window.Event('load')
+    el.dispatchEvent(loadEvent2)
+
+    expect(addEventListenerSpy).toHaveBeenCalledTimes(1)
+  })
+})