react-diff-viewer-continued/scripts/build-worker.js

Continuation of a simple and beautiful text diff viewer component made with diff and React

#!/usr/bin/env node

/**
 * This script bundles the compute worker with all its dependencies
 * into a single string that can be used to create a Blob URL at runtime.
 */

import * as esbuild from 'esbuild';
import * as fs from 'fs';
import * as path from 'path';
import { fileURLToPath } from 'url';

const __dirname = path.dirname(fileURLToPath(import.meta.url));
const srcDir = path.join(__dirname, '..', 'src');

// Plugin to stub out workerBundle import - the worker doesn't need it
// (it's only used by the main thread to load the worker)
const stubWorkerBundlePlugin = {
  name: 'stub-worker-bundle',
  setup(build) {
    build.onResolve({ filter: /\.\/workerBundle(\.js)?$/ }, () => ({
      path: 'workerBundle-stub',
      namespace: 'stub',
    }));
    build.onLoad({ filter: /.*/, namespace: 'stub' }, () => ({
      contents: 'export const WORKER_CODE = "";',
      loader: 'ts',
    }));
  },
};

async function buildWorker() {
  // Bundle the worker with all dependencies
  const result = await esbuild.build({
    entryPoints: [path.join(srcDir, 'computeWorker.ts')],
    bundle: true,
    format: 'iife',
    minify: true,
    write: false,
    target: 'es2020',
    plugins: [stubWorkerBundlePlugin],
  });

  const workerCode = result.outputFiles[0].text;

  // Generate a TypeScript file that exports the bundled code
  const output = `// AUTO-GENERATED FILE - DO NOT EDIT
// Generated by scripts/build-worker.js

/**
 * Bundled worker code as a string.
 * This allows us to create a Blob URL at runtime without needing a separate file.
 */
export const WORKER_CODE = ${JSON.stringify(workerCode)};
`;

  fs.writeFileSync(path.join(srcDir, 'workerBundle.ts'), output);
  console.log('Worker bundle generated successfully');
}

buildWorker().catch((err) => {
  console.error('Failed to build worker:', err);
  process.exit(1);
});