Web workers

Vev provides full support for Web Workers in CLI components.

You can import a Web Worker script directly by appending ?worker to your import path. The default export will be a worker constructor:

import Worker from './my-worker?worker';
 
const myWorker = new Worker();

Inside the worker, you can use standard ES module imports — no need for importScripts.

Example

A common use case for Web Workers in Vev is to preload and process multiple images in the background — for example, when building a video scroll component that uses images instead of an actual video file.

import { useEffect, useRef } from "react";
import ImageWorker from "./image-load-worker?worker"; 
 
export function useVideoImageWorker(images: string[]) {
  const imagesRef = useRef<HTMLImageElement[]>([]);
 
  useEffect(() => {
    const worker = new ImageWorker(); 
    
    worker.addEventListener('message', async (e: any) => {
      const { url, index } = e.data as { index: number; url: string };
      const img = await resolveImage(url);
      const images = imagesRef.current;
      if (images && img) images[index] = img;
    });
 
    worker.postMessage({ 
      images, 
      parentLocation: `${self.location.origin}${self.location.pathname}`, 
    }); 
 
    return () => worker.terminate(); 
  }, [images]);
 
  return imagesRef;
}

In this setup, the worker handles loading and caching of image sequences efficiently, allowing smooth scrubbing and playback on scroll without blocking the main UI thread.

Full code for Video Scroll component