Redux Bundler Web Worker Utilities

Common errors

• ReferenceError: Worker is not defined

  cause Attempting to instantiate a `Worker` object in a Node.js environment or a non-browser context.
  fix Web Workers are a browser-specific API. Ensure your code runs in a browser environment. If testing, use a browser-like testing environment (e.g., JSDOM with Web Worker polyfills if absolutely necessary, but generally avoided for worker-specific logic).

• Uncaught TypeError: storeProxy.select... is not a function

  cause The `storeProxy` has not yet fully initialized or established communication with the worker, or the `redux-bundler` store inside the worker hasn't finished composing its bundles and exposing selectors.
  fix Ensure that the Web Worker is fully loaded and `setUpWorker` has been called successfully within it. Add logging to both main and worker threads to track initialization status. Also, verify that the selector name (`select...`) actually exists in your bundles.

• Failed to load module script: Expected a JavaScript module script but the server responded with a MIME type of "text/html".

  cause The browser failed to load the worker script (`/build/worker.js`) because the server returned an HTML page (e.g., a 404 error page) instead of a JavaScript module, or the server is not configured to serve `.js` files with the correct `application/javascript` MIME type for module workers.
  fix Verify the path to your `worker.js` file is correct and accessible at runtime. Check your web server or bundler configuration to ensure `worker.js` is served with the correct MIME type (e.g., `application/javascript` or `text/javascript`) and that the file exists at the specified URL. For ES Modules in workers, ensure `new Worker('/path/to/worker.js', { type: 'module' })` is used.

• Error: Worker is not a constructor

  cause Trying to use `new Worker()` in an environment where the global `Worker` object is not available or is not a constructible function, possibly due to strict Content Security Policy (CSP) or an unusual execution environment.
  fix Check your Content Security Policy (CSP) for `worker-src` or `script-src` directives that might be blocking Web Workers. Ensure you are running in a standard browser environment. Some older browser versions or highly restricted environments might not fully support Web Workers or ESM workers.

Warnings

• breaking The author explicitly states this library is 'largely for demonstration purposes' and has not been used in production. It is not recommended for production environments due to potential instability, lack of active maintenance, and its experimental nature.
  Fix: Consider `redux-bundler` directly for production apps. If Web Worker offloading is critical, thoroughly test and consider the implications of using an experimental library.
• gotcha Debugging state and actions within a Web Worker can be significantly more complex than in the main thread. Standard Redux DevTools might not work out-of-the-box without additional custom integration for message passing.
  Fix: Utilize `console.log` within the worker, set up custom message logging, or explore specialized browser extensions/tools for Web Worker debugging.
• gotcha Interacting with the DOM, browser APIs (like `localStorage`, `indexedDB` directly, or `geolocation`), or global event listeners from within the Web Worker is not possible. Operations requiring main thread access must be explicitly marshalled back.
  Fix: Implement explicit message passing between the worker and main thread for any operations that require main thread context or browser APIs. `redux-bundler` itself mentions supporting this via 'reactor' patterns.
• gotcha The overhead of serializing and deserializing state and actions for message passing between the main thread and the worker can impact performance, especially with large or frequently updated state objects.
  Fix: Optimize state structure, send only necessary deltas, and carefully consider what data needs to be passed between threads. Profile performance to identify bottlenecks.
• gotcha Web Worker module resolution (importing other modules within the worker script) can be tricky and requires proper bundler configuration (e.g., Webpack's worker-loader or modern bundlers supporting ESM workers) to ensure all dependencies are correctly included and paths are resolved.
  Fix: Ensure your build tooling is configured to handle ES Modules within Web Workers. Verify the `worker.js` file and its imports are correctly bundled and served with the `type: 'module'` option for the Worker constructor.

Install

• npm install redux-bundler-worker npm
• yarn add redux-bundler-worker yarn
• pnpm add redux-bundler-worker pnpm

Imports

• getStoreProxy
  wrong:

  const getStoreProxy = require('redux-bundler-worker').getStoreProxy

  correct:

  import { getStoreProxy } from 'redux-bundler-worker'

  Used in the main thread to create a proxy that communicates with the worker-based Redux store. This library is designed for ESM imports.
• setUpWorker
  wrong:

  const setUpWorker = require('redux-bundler-worker').setUpWorker

  correct:

  import { setUpWorker } from 'redux-bundler-worker'

  Used inside the Web Worker script to initialize the actual redux-bundler store and establish communication with the main thread. This library is designed for ESM imports.

Quickstart

This example demonstrates how to set up `redux-bundler-worker` by initializing a Web Worker in the main thread and establishing a proxied Redux store for communication. It shows how to use `getStoreProxy` in the main thread with a UI library like Preact and `setUpWorker` inside the Web Worker to host the actual `redux-bundler` instance, including a basic bundle with actions and selectors.

/* --- main.js (Main Thread) --- */
import { render, h } from 'preact';
import { Provider } from 'redux-bundler-preact';
import { getStoreProxy } from 'redux-bundler-worker';

// A dummy RootComponent for demonstration
const RootComponent = ({ children }) => h('div', null, h('h1', null, 'App Running in Worker'), children);

// Create the Web Worker instance, pointing to your bundled worker script
// Ensure '/build/worker.js' is correctly served by your web server/bundler
const worker = new Worker('/build/worker.js', { type: 'module' });

// Get a store proxy that mimics the redux-bundler store API
// All actions dispatched and selectors called on this proxy will be marshalled to the worker
const storeProxy = getStoreProxy(worker);

// Render your Preact app, passing the store proxy to the Provider
render(
  h(Provider, { store: storeProxy }, h(RootComponent)),
  document.getElementById('app-root')
);

console.log('Main thread initialized with worker-proxied Redux store.');

/* --- worker.js (Web Worker Thread) --- */
import { composeBundles } from 'redux-bundler';
import { setUpWorker } from 'redux-bundler-worker';

// Define a simple Redux Bundler bundle inside the worker
const appBundle = {
  name: 'app',
  reducer: (state = { count: 0 }, action) => {
    if (action.type === 'INCREMENT') {
      return { ...state, count: state.count + 1 };
    }
    return state;
  },
  doIncrement: () => ({ dispatch }) => {
    dispatch({ type: 'INCREMENT' });
  },
  selectCount: (state) => state.app.count,
};

// Compose the bundles to create the main Redux Bundler store function
const getWorkerStore = (initialData = {}) => composeBundles(appBundle)(initialData);

// Set up the worker, passing the function that returns the composed store
setUpWorker(getWorkerStore);

console.log('Web Worker initialized with Redux Bundler store.');

// Example of interacting from the main thread after setup (e.g., in browser console)
// window.store = storeProxy; // expose for debugging
// storeProxy.doIncrement();
// storeProxy.selectCount();