@defra/interactive-map 0.0.29-alpha → 0.0.31-alpha

package/src/App/hooks/useEvaluateProp.js

@@ -23,25 +23,25 @@ export function useEvaluateProp () {
     iconRegistry: getIconRegistry()
   }
 
-  function evaluateProp (prop, pluginId) {
-    let pluginConfig
-    let pluginState
-
-    if (pluginId) {
-      const pluginEntry = appConfig.pluginRegistry.registeredPlugins.find(p => p.id === pluginId)
-      pluginConfig = pluginEntry
-        ? {
-            pluginId: pluginEntry.id,
-            ...pluginEntry.config
-          }
-        : {}
-      // Only include this plugin's state + dispatch
+  function buildPluginContext (pluginId) {
+    if (!pluginId) { return { pluginStates: pluginContext?.state ?? {} } }
+
+    const pluginEntry = appConfig.pluginRegistry.registeredPlugins.find(p => p.id === pluginId)
+    const pluginConfig = pluginEntry ? { pluginId: pluginEntry.id, ...pluginEntry.config } : {}
+
+    // Only include isolated plugin state when the plugin has registered a reducer.
+    // Framework entries like 'appConfig' have no reducer so their buttons get pluginStates instead.
+    if (Object.hasOwn(pluginContext?.state ?? {}, pluginId)) {
       const stateForPlugin = pluginContext?.state?.[pluginId] ?? {}
-      pluginState = { ...stateForPlugin, dispatch: pluginContext?.dispatch }
+      const pluginState = { ...stateForPlugin, dispatch: pluginContext?.dispatch }
+      return { pluginConfig, pluginState }
     }
 
-    const fullContext = { ...ctx, pluginConfig, pluginState }
+    return { pluginConfig, pluginStates: pluginContext?.state ?? {} }
+  }
 
+  function evaluateProp (prop, pluginId) {
+    const fullContext = { ...ctx, ...buildPluginContext(pluginId) }
     return typeof prop === 'function' ? prop(fullContext) : prop
   }
 

package/src/App/hooks/useEvaluateProp.test.js

@@ -8,57 +8,50 @@ import * as serviceStore from '../store/serviceContext.js'
 import { PluginContext } from '../store/PluginProvider.jsx'
 import * as iconRegistryModule from '../registry/iconRegistry.js'
 
-// --- Mock the dependencies ---
 jest.mock('../store/configContext.js', () => ({ useConfig: jest.fn() }))
 jest.mock('../store/appContext.js', () => ({ useApp: jest.fn() }))
 jest.mock('../store/mapContext.js', () => ({ useMap: jest.fn() }))
 jest.mock('../store/serviceContext.js', () => ({ useService: jest.fn() }))
 jest.mock('../registry/iconRegistry.js', () => ({ getIconRegistry: jest.fn() }))
 
-describe('useEvaluateProp hook', () => {
-  const pluginDispatch = jest.fn()
-  const mockPluginRegistry = {
-    registeredPlugins: [],
-    registerPlugin: jest.fn(),
-    clear: jest.fn()
-  }
-
-  const pluginContextValue = {
-    state: { myPlugin: { foo: 'bar' } },
-    dispatch: pluginDispatch
-  }
-
-  beforeEach(() => {
-    jest.clearAllMocks()
-    mockPluginRegistry.registeredPlugins = []
-    configStore.useConfig.mockReturnValue({
-      mapProvider: { name: 'leaflet' },
-      pluginRegistry: mockPluginRegistry
-    })
-    appStore.useApp.mockReturnValue({ user: 'alice' })
-    mapStore.useMap.mockReturnValue({ zoom: 5 })
-    serviceStore.useService.mockReturnValue({ reverseGeocode: jest.fn() })
-    iconRegistryModule.getIconRegistry.mockReturnValue({ close: '<svg/>' })
-  })
+const RAW_VALUE = 'raw-test-value'
+const pluginDispatch = jest.fn()
+const pluginContextValue = {
+  state: { myPlugin: { foo: 'bar' } },
+  dispatch: pluginDispatch
+}
+const mockPluginRegistry = {
+  registeredPlugins: [],
+  registerPlugin: jest.fn(),
+  clear: jest.fn()
+}
+
+const withPluginContext = ({ children }) => (
+  <PluginContext.Provider value={pluginContextValue}>
+    {children}
+  </PluginContext.Provider>
+)
+
+beforeEach(() => {
+  jest.clearAllMocks()
+  mockPluginRegistry.registeredPlugins = []
+  configStore.useConfig.mockReturnValue({ mapProvider: { name: 'leaflet' }, pluginRegistry: mockPluginRegistry })
+  appStore.useApp.mockReturnValue({ user: 'alice' })
+  mapStore.useMap.mockReturnValue({ zoom: 5 })
+  serviceStore.useService.mockReturnValue({ reverseGeocode: jest.fn() })
+  iconRegistryModule.getIconRegistry.mockReturnValue({ close: '<svg/>' })
+})
 
+describe('useEvaluateProp — basic evaluation', () => {
   it('returns the raw prop if it is not a function', () => {
     const { result } = renderHook(() => useEvaluateProp())
-    const evaluate = result.current
-    const value = evaluate(42)
-    expect(value).toBe(42)
+    expect(result.current(RAW_VALUE)).toBe(RAW_VALUE)
   })
 
   it('calls prop function with full context when no pluginId provided', () => {
     const { result } = renderHook(() => useEvaluateProp())
-    const evaluate = result.current
-
     const fn = jest.fn(ctx => ctx.appState.user)
-
-    const value = evaluate(fn)
-
-    expect(fn).toHaveBeenCalled()
-    expect(value).toBe('alice')
-
+    expect(result.current(fn)).toBe('alice')
     expect(fn.mock.calls[0][0]).toMatchObject({
       appConfig: { mapProvider: { name: 'leaflet' } },
       appState: { user: 'alice' },
@@ -69,56 +62,67 @@ describe('useEvaluateProp hook', () => {
     })
   })
 
-  it('includes pluginConfig and pluginState when pluginId provided', () => {
-    mockPluginRegistry.registeredPlugins.push({ id: 'myPlugin', config: { includeModes: ['edit'], excludeModes: ['view'] } })
+  it('exposes ctx property on the returned evaluateProp function', () => {
+    const { result } = renderHook(() => useEvaluateProp())
+    expect(result.current.ctx).toMatchObject({
+      appConfig: { mapProvider: { name: 'leaflet' } },
+      appState: { user: 'alice' },
+      mapState: { zoom: 5 },
+      services: { reverseGeocode: expect.any(Function) },
+      mapProvider: { name: 'leaflet' },
+      iconRegistry: { close: '<svg/>' }
+    })
+  })
+})
 
-    const wrapper = ({ children }) => (
-      <PluginContext.Provider value={pluginContextValue}>
-        {children}
-      </PluginContext.Provider>
-    )
+describe('useEvaluateProp — pluginStates (core/framework buttons)', () => {
+  it('includes pluginStates in context when no pluginId provided', () => {
+    const { result } = renderHook(() => useEvaluateProp(), { wrapper: withPluginContext })
+    expect(result.current(ctx => ctx.pluginStates)).toEqual({ myPlugin: { foo: 'bar' } })
+  })
 
-    const { result } = renderHook(() => useEvaluateProp(), { wrapper })
-    const evaluate = result.current
+  it('includes pluginStates for appConfig plugin (no reducer, not in state)', () => {
+    mockPluginRegistry.registeredPlugins.push({ id: 'appConfig', config: {} })
+    const { result } = renderHook(() => useEvaluateProp(), { wrapper: withPluginContext })
+    expect(result.current(ctx => ctx.pluginStates, 'appConfig')).toEqual({ myPlugin: { foo: 'bar' } })
+  })
 
-    const fn = jest.fn(ctx => ctx.pluginState.foo)
-    const value = evaluate(fn, 'myPlugin')
+  it('falls back to empty pluginStates when PluginContext is not provided', () => {
+    mockPluginRegistry.registeredPlugins.push({ id: 'appConfig', config: {} })
+    const { result } = renderHook(() => useEvaluateProp())
+    expect(result.current(ctx => ctx.pluginStates, 'appConfig')).toEqual({})
+  })
+})
 
-    expect(fn).toHaveBeenCalled()
-    expect(value).toBe('bar')
-    const ctxPassed = fn.mock.calls[0][0]
-    expect(ctxPassed.pluginConfig).toEqual({
-      pluginId: 'myPlugin',
-      includeModes: ['edit'],
-      excludeModes: ['view']
-    })
-    expect(ctxPassed.pluginState).toMatchObject({ foo: 'bar', dispatch: pluginDispatch })
+describe('useEvaluateProp — plugin state isolation', () => {
+  it('includes pluginConfig and pluginState for real plugin buttons', () => {
+    mockPluginRegistry.registeredPlugins.push({ id: 'myPlugin', config: { includeModes: ['edit'], excludeModes: ['view'] } })
+    const { result } = renderHook(() => useEvaluateProp(), { wrapper: withPluginContext })
+    const ctx = result.current(c => c, 'myPlugin')
+    expect(ctx.pluginConfig).toEqual({ pluginId: 'myPlugin', includeModes: ['edit'], excludeModes: ['view'] })
+    expect(ctx.pluginState).toMatchObject({ foo: 'bar', dispatch: pluginDispatch })
+  })
+
+  it('does not include pluginStates for real plugin buttons', () => {
+    mockPluginRegistry.registeredPlugins.push({ id: 'myPlugin', config: {} })
+    const { result } = renderHook(() => useEvaluateProp(), { wrapper: withPluginContext })
+    expect(result.current(ctx => ctx.pluginStates, 'myPlugin')).toBeUndefined()
   })
 
   it('returns empty pluginConfig if plugin not registered', () => {
+    const { result } = renderHook(() => useEvaluateProp(), { wrapper: withPluginContext })
+    expect(result.current(ctx => ctx.pluginConfig, 'unknownPlugin')).toEqual({})
+  })
+
+  it('falls back to empty object when plugin state entry is null', () => {
+    mockPluginRegistry.registeredPlugins.push({ id: 'myPlugin', config: {} })
     const wrapper = ({ children }) => (
-      <PluginContext.Provider value={pluginContextValue}>
+      <PluginContext.Provider value={{ state: { myPlugin: null }, dispatch: pluginDispatch }}>
         {children}
       </PluginContext.Provider>
     )
     const { result } = renderHook(() => useEvaluateProp(), { wrapper })
-    const evaluate = result.current
-
-    const fn = jest.fn(ctx => ctx.pluginConfig)
-    const value = evaluate(fn, 'unknownPlugin')
-    expect(value).toEqual({})
-  })
-
-  it('exposes ctx property on the returned evaluateProp function', () => {
-    const { result } = renderHook(() => useEvaluateProp())
-    const evaluate = result.current
-    expect(evaluate.ctx).toMatchObject({
-      appConfig: { mapProvider: { name: 'leaflet' } },
-      appState: { user: 'alice' },
-      mapState: { zoom: 5 },
-      services: { reverseGeocode: expect.any(Function) },
-      mapProvider: { name: 'leaflet' },
-      iconRegistry: { close: '<svg/>' }
-    })
+    const ctx = result.current(c => c, 'myPlugin')
+    expect(ctx.pluginState).toMatchObject({ dispatch: pluginDispatch })
   })
 })

package/src/App/hooks/useLayoutMeasurements.js

@@ -154,8 +154,6 @@ export function useLayoutMeasurements () {
   //    that is Effect 2's responsibility.
   // --------------------------------
   useResizeObserver([bannerRef, mainRef, topRef, topLeftColRef, topRightColRef, actionsRef, bottomRef, bottomRightRef, leftTopRef, leftBottomRef, rightTopRef, rightBottomRef, drawerRef], () => {
-    requestAnimationFrame(() => {
-      calculateLayout(layoutRefs)
-    })
+    calculateLayout(layoutRefs)
   })
 }

package/src/App/hooks/useResizeObserver.js

@@ -13,6 +13,8 @@ export function useResizeObserver (targetRefs, callback) {
     }
 
     const observer = new window.ResizeObserver(entries => {
+      const changedEntries = []
+
       for (const entry of entries) {
         const { width, height } = entry.contentRect
         const prev = prevSizes.current.get(entry.target) || {}
@@ -22,8 +24,17 @@ export function useResizeObserver (targetRefs, callback) {
         }
 
         prevSizes.current.set(entry.target, { width, height })
+        changedEntries.push(entry)
+      }
 
-        callback(entry)
+      if (changedEntries.length) {
+        // Batch all entries into a single RAF — prevents multiple simultaneous
+        // resize events (e.g. panel open) from queueing separate callbacks and
+        // causing a ResizeObserver loop under synchronous renderers like preact.
+        cancelAnimationFrame(frameRef.current)
+        frameRef.current = requestAnimationFrame(() => {
+          for (const entry of changedEntries) { callback(entry) }
+        })
       }
     })
 

package/src/App/hooks/useResizeObserver.test.js

@@ -26,6 +26,7 @@ describe('useResizeObserver', () => {
       this.trigger = (entries) => cb(entries) // helper to simulate resize
     })
 
+    jest.spyOn(global, 'requestAnimationFrame').mockImplementation(cb => { cb(); return 0 })
     jest.spyOn(global, 'cancelAnimationFrame').mockImplementation(() => {})
   })
 

package/src/App/renderer/PluginInits.jsx

@@ -7,6 +7,7 @@ import { useApp } from '../store/appContext.js'
 import { useConfig } from '../store/configContext.js'
 import { useEvaluateProp } from '../hooks/useEvaluateProp.js'
 import { useButtonStateEvaluator } from '../hooks/useButtonStateEvaluator.js'
+import { useContinueEnabledEvaluator } from '../hooks/useContinueEnabledEvaluator.js'
 
 // Create a component for each plugin to handle its hooks properly
 const PluginInit = ({ plugin, mode }) => {
@@ -55,6 +56,7 @@ export const PluginInits = () => {
   // Evaluate reactive button states globally
   const evaluateProp = useEvaluateProp()
   useButtonStateEvaluator(evaluateProp)
+  useContinueEnabledEvaluator()
 
   return (
     <>

package/src/App/renderer/mapButtons.js

@@ -116,6 +116,24 @@ function resolveGroupOrder (group) {
   return group.order ?? 0
 }
 
+function applySlotExclusivity (matching, appState) {
+  let exclusivePluginId = null
+
+  for (const [id, config] of matching) {
+    if (config.exclusiveSlot && !appState.hiddenButtons.has(id) && config.pluginId) {
+      if (exclusivePluginId !== null && exclusivePluginId !== config.pluginId) {
+        logger.warn(`Slot exclusivity conflict: plugins [${exclusivePluginId}, ${config.pluginId}] are both claiming exclusive slot ownership. Showing all buttons.`)
+        return matching
+      }
+      exclusivePluginId = config.pluginId
+    }
+  }
+
+  if (exclusivePluginId === null) { return matching }
+
+  return matching.filter(([_, config]) => config.pluginId === exclusivePluginId)
+}
+
 function renderButton ({ btn, appState, appConfig, evaluateProp }) {
   const [buttonId, config] = btn
   const bpConfig = config[appState.breakpoint] ?? {}
@@ -148,7 +166,8 @@ function renderButton ({ btn, appState, appConfig, evaluateProp }) {
 function mapButtons ({ slot, appState, appConfig, evaluateProp }) {
   const { buttonConfig, breakpoint } = appState
 
-  const matching = getMatchingButtons({ appState, appConfig, buttonConfig, slot, evaluateProp })
+  const raw = getMatchingButtons({ appState, appConfig, buttonConfig, slot, evaluateProp })
+  const matching = applySlotExclusivity(raw, appState)
 
   if (!matching.length) {
     return []
@@ -243,6 +262,7 @@ function mapButtons ({ slot, appState, appConfig, evaluateProp }) {
 export {
   mapButtons,
   getMatchingButtons,
+  applySlotExclusivity,
   renderButton,
   resolveGroupName,
   resolveGroupLabel,

package/src/App/renderer/mapButtons.test.js

@@ -1,7 +1,9 @@
 import React from 'react'
-import { mapButtons, getMatchingButtons, renderButton, resolveGroupName, resolveGroupLabel, resolveGroupOrder } from './mapButtons.js'
+import { mapButtons, getMatchingButtons, applySlotExclusivity, renderButton, resolveGroupName, resolveGroupLabel, resolveGroupOrder } from './mapButtons.js'
+import { logger } from '../../services/logger.js'
 import { getPanelConfig } from '../registry/panelRegistry.js'
 
+jest.mock('../../services/logger.js', () => ({ logger: { warn: jest.fn() } }))
 jest.mock('../registry/buttonRegistry.js')
 jest.mock('../registry/panelRegistry.js')
 jest.mock('../components/MapButton/MapButton.jsx', () => ({
@@ -350,6 +352,49 @@ describe('mapButtons module', () => {
       expect(map()[0].order).toBe(0)
     })
 
+    it('filters to exclusive plugin when one plugin has a visible exclusiveSlot button', () => {
+      appState.buttonConfig = {
+        drawCancel: { ...baseBtn, pluginId: 'draw', exclusiveSlot: true },
+        journeyBack: { ...baseBtn }
+      }
+      const matching = [['drawCancel', appState.buttonConfig.drawCancel], ['journeyBack', appState.buttonConfig.journeyBack]]
+      const result = applySlotExclusivity(matching, appState)
+      expect(result).toHaveLength(1)
+      expect(result[0][0]).toBe('drawCancel')
+    })
+
+    it('returns all buttons when no exclusiveSlot buttons are visible', () => {
+      appState.buttonConfig = {
+        drawCancel: { ...baseBtn, pluginId: 'draw', exclusiveSlot: true },
+        journeyBack: { ...baseBtn }
+      }
+      appState.hiddenButtons = new Set(['drawCancel'])
+      const matching = [['drawCancel', appState.buttonConfig.drawCancel], ['journeyBack', appState.buttonConfig.journeyBack]]
+      const result = applySlotExclusivity(matching, appState)
+      expect(result).toHaveLength(2)
+    })
+
+    it('returns all buttons when no buttons have exclusiveSlot', () => {
+      const matching = [['b1', { ...baseBtn }], ['b2', { ...baseBtn }]]
+      expect(applySlotExclusivity(matching, appState)).toHaveLength(2)
+    })
+
+    it('ignores exclusiveSlot on buttons without a pluginId', () => {
+      const matching = [['hostBtn', { ...baseBtn, exclusiveSlot: true }]]
+      expect(applySlotExclusivity(matching, appState)).toHaveLength(1)
+    })
+
+    it('warns and returns all when multiple plugins claim exclusivity', () => {
+      const matching = [
+        ['drawCancel', { ...baseBtn, pluginId: 'draw', exclusiveSlot: true }],
+        ['otherBtn', { ...baseBtn, pluginId: 'other', exclusiveSlot: true }]
+      ]
+      const result = applySlotExclusivity(matching, appState)
+      expect(result).toHaveLength(2)
+      expect(logger.warn).toHaveBeenCalledWith(expect.stringContaining('draw'))
+      expect(logger.warn).toHaveBeenCalledWith(expect.stringContaining('other'))
+    })
+
     it('excludes menu items from slot rendering even when they have a matching slot', () => {
       appState.buttonConfig = ({
         parent: baseBtn,

package/src/App/store/appReducer.js

@@ -40,7 +40,7 @@ export const initialState = (config) => {
     mode: mode || null,
     previousMode: null,
     safeZoneInset: null,
-    disabledButtons: new Set(),
+    disabledButtons: config.backAndContinue?.continueLabel ? new Set(['journeyContinue']) : new Set(),
     hiddenButtons: new Set(),
     pressedButtons: new Set(),
     expandedButtons: new Set(),

package/src/App/store/appReducer.test.js

@@ -70,6 +70,43 @@ describe('initialState', () => {
     expect(result.prefersReducedMotion).toBe(false)
   })
 
+  test('pre-disables journeyContinue when backAndContinue has a continueLabel', () => {
+    mockMedia()
+    mockPanels({})
+    mockFullscreen(false)
+
+    const config = {
+      behaviour: 'buttonFirst',
+      initialBreakpoint: 'md',
+      initialInterfaceType: 'desktop',
+      appColorScheme: 'light',
+      autoColorScheme: false,
+      backAndContinue: { continueLabel: 'Continue' },
+      ...createMockRegistries()
+    }
+
+    const result = initialState(config)
+    expect(result.disabledButtons.has('journeyContinue')).toBe(true)
+  })
+
+  test('does not pre-disable journeyContinue when backAndContinue is null', () => {
+    mockMedia()
+    mockPanels({})
+    mockFullscreen(false)
+
+    const config = {
+      behaviour: 'buttonFirst',
+      initialBreakpoint: 'md',
+      initialInterfaceType: 'desktop',
+      appColorScheme: 'light',
+      autoColorScheme: false,
+      ...createMockRegistries()
+    }
+
+    const result = initialState(config)
+    expect(result.disabledButtons.has('journeyContinue')).toBe(false)
+  })
+
   test('defaults mode to null when missing', () => {
     mockMedia({ prefersReducedMotion: false })
     mockPanels({})

package/src/InteractiveMap/InteractiveMap.js

@@ -415,6 +415,16 @@ export default class InteractiveMap {
     this.eventBus.emit(events.APP_TOGGLE_BUTTON_STATE, { id, prop, value })
   }
 
+  /**
+   * Enable or disable the journey continue button.
+   * Only has effect when backAndContinue is configured.
+   *
+   * @param {boolean} enabled
+   */
+  setContinueEnabled (enabled) {
+    this.toggleButtonState('journeyContinue', 'disabled', !enabled)
+  }
+
   /**
    * Add a panel to the UI.
    *

package/src/InteractiveMap/InteractiveMap.test.js

@@ -563,6 +563,14 @@ describe('InteractiveMap — Public API Methods', () => {
     expect(map.eventBus.emit).toHaveBeenCalledWith('app:togglebuttonstate', { id: 'btn-1', prop: 'disabled', value: true })
   })
 
+  it('setContinueEnabled enables and disables the journey continue button', () => {
+    map.setContinueEnabled(true)
+    expect(map.eventBus.emit).toHaveBeenCalledWith('app:togglebuttonstate', { id: 'journeyContinue', prop: 'disabled', value: false })
+
+    map.setContinueEnabled(false)
+    expect(map.eventBus.emit).toHaveBeenCalledWith('app:togglebuttonstate', { id: 'journeyContinue', prop: 'disabled', value: true })
+  })
+
   it('fitToBounds and setView emit correct events', () => {
     const bbox = [-0.489, 51.28, 0.236, 51.686]
     const center = [-0.1276, 51.5074]

package/src/InteractiveMap/polyfills.js

@@ -10,6 +10,12 @@ if (typeof crypto !== 'undefined' && !crypto.randomUUID) {
   }
 }
 
+// Object.hasOwn — capture before polyfilling so the worker injection condition below is correct
+const needsHasOwn = !Object.hasOwn
+if (needsHasOwn) {
+  Object.hasOwn = (obj, key) => Object.prototype.hasOwnProperty.call(obj, key) // NOSONAR
+}
+
 // AbortSignal.throwIfAborted
 const needsThrowIfAborted = typeof AbortController !== 'undefined' &&
   !Object.getPrototypeOf(new AbortController().signal).throwIfAborted
@@ -25,15 +31,40 @@ if (needsThrowIfAborted) {
   }
 }
 
-// Inject polyfill into web workers created from blob URLs (e.g. MapLibre GL)
-// Workers have their own global scope so main thread polyfills don't apply
-if (needsThrowIfAborted && typeof URL !== 'undefined' && URL.createObjectURL) {
+// Inject polyfills into web workers — workers have their own global scope so
+// main thread polyfills don't apply. Two cases:
+//   1. Blob URL workers (MapLibre default): intercept URL.createObjectURL
+//   2. String URL workers (MapLibre workerUrl, used in CSP environments): intercept Worker constructor
+const needsWorkerPolyfills = (needsThrowIfAborted || needsHasOwn) && typeof URL !== 'undefined' && URL.createObjectURL
+
+if (needsWorkerPolyfills) {
+  const JS_MIME = 'text/javascript'
+  const workerPolyfillCode = [
+    'if(!Object.hasOwn){Object.hasOwn=function(o,k){return Object.prototype.hasOwnProperty.call(o,k)}}\n',
+    needsThrowIfAborted ? 'if(typeof AbortController!=="undefined"){var _p=Object.getPrototypeOf(new AbortController().signal);if(!_p.throwIfAborted){_p.throwIfAborted=function(){if(this.aborted){var e=new Error("The operation was aborted.");e.name="AbortError";throw e}}}}\n' : ''
+  ].join('')
+
+  // Save original before overriding, so the Worker override below can use it directly
+  // and avoid double-injecting the polyfill code
   const _createObjectURL = URL.createObjectURL.bind(URL)
+
   URL.createObjectURL = (blob) => {
-    if (blob instanceof Blob && blob.type === 'text/javascript') {
-      const p = 'if(typeof AbortController!=="undefined"){var _p=Object.getPrototypeOf(new AbortController().signal);if(!_p.throwIfAborted){_p.throwIfAborted=function(){if(this.aborted){var e=new Error("The operation was aborted.");e.name="AbortError";throw e}}}}\n'
-      blob = new Blob([p, blob], { type: 'text/javascript' })
+    if (blob instanceof Blob && blob.type === JS_MIME) {
+      blob = new Blob([workerPolyfillCode, blob], { type: JS_MIME })
     }
     return _createObjectURL(blob)
   }
+
+  if (typeof Worker !== 'undefined') {
+    const NativeWorker = Worker
+    // eslint-disable-next-line no-global-assign
+    Worker = function (url, options) {
+      if (typeof url === 'string' && !url.startsWith('blob:')) {
+        const blob = new Blob([`${workerPolyfillCode}importScripts(${JSON.stringify(url)})`], { type: JS_MIME })
+        url = _createObjectURL(blob)
+      }
+      return new NativeWorker(url, options)
+    }
+    Worker.prototype = NativeWorker.prototype
+  }
 }