self.addEventListener(
  'message',
  function (event) {
    self.postMessage(runBigTask(event.data, 'vanilla-worker'))
  },
  false
)

export const Button = () => (
  <button
    onClick={async () => {
      setData('loading')
      const worker = new Worker(
        new URL('../utils/vanilla-worker', import.meta.url),
        {
          name: 'vanilla-worker',
          type: 'module',
        }
      )

      worker.postMessage(TASK_SIZE)

      worker.addEventListener('message', function (evt) {
        setData(evt.data)
      })
    }}
  >
    Run Vanilla-WebWorker
  </button>
)

import { expose } from 'comlink'
import { runBigTask } from './big-task'

const worker = {
  runBigTask: async (int: number) => (
    await runBigTask(int, 'comlink-worker')
  ),
}

export type ComlinkWorker = typeof worker

expose(worker)

export const Button = () => (
  <button
    onClick={async () => {
      setData('loading')
      const worker = new Worker(
        new URL('../utils/comlink-worker', import.meta.url),
          {
            name: 'runBigTaskWorker',
            type: 'module',
          }
        )

      const { runBigTask } = wrap<ComlinkWorker>(worker)
      setData(await runBigTask(TASK_SIZE))
    }}
   >
    Comlink WebWorker
  </button>
)