webpack

@boperators/webpack-loader

Webpack loader for boperators that transforms operator overloads during the webpack build. Runs as a pre-loader before your TypeScript loader, replacing operator expressions with function calls and generating source maps.

Installation

npm install -D boperators @boperators/webpack-loader ts-loader webpack

Configuration

Add the boperators loader as an enforce: "pre" rule in your webpack.config.js, alongside your TypeScript loader:

module.exports = {
  devtool: "source-map",
  module: {
    rules: [
      {
        test: /\.ts$/,
        loader: "ts-loader",
        options: { transpileOnly: true },
        exclude: /node_modules/,
      },
      {
        test: /\.ts$/,
        enforce: "pre",
        loader: "@boperators/webpack-loader",
        exclude: /node_modules/,
      },
    ],
  },
};

The enforce: "pre" ensures boperators transforms your source before ts-loader compiles it.

Options

Option	Type	Default	Description
project	string	"tsconfig.json"	Path to tsconfig.json, relative to webpack's root context
errorOnWarning	boolean	false	Treat conflicting overload warnings as errors

Options are passed via the loader options:

{
  test: /\.ts$/,
  enforce: "pre",
  loader: "@boperators/webpack-loader",
  options: {
    project: "./tsconfig.build.json",
  },
  exclude: /node_modules/,
}

Next.js

Webpack (default)

Next.js exposes webpack config via next.config.js. Add boperators as a pre-loader before ts-loader handles your TypeScript:

// next.config.js
/** @type {import('next').NextConfig} */
const nextConfig = {
  webpack(config) {
    config.module.rules.push({
      test: /\.tsx?$/,
      enforce: "pre",
      loader: "@boperators/webpack-loader",
      exclude: /node_modules/,
    });
    return config;
  },
};

module.exports = nextConfig;

You don't need to add a separate ts-loader rule — Next.js already configures TypeScript compilation internally.

Turbopack (Next.js 15+)

Turbopack supports webpack loaders via turbopack.rules. The boperators loader is likely compatible, but note that Turbopack's webpack loader API is partial and this.rootContext (used for tsconfig discovery) may not be populated. Use the project option to specify the tsconfig path explicitly:

// next.config.js
/** @type {import('next').NextConfig} */
const nextConfig = {
  turbopack: {
    rules: {
      "*.{ts,tsx}": {
        loaders: [
          {
            loader: "@boperators/webpack-loader",
            options: { project: "./tsconfig.json" },
          },
        ],
        as: "*.tsx",
      },
    },
  },
};

module.exports = nextConfig;

Note: Turbopack support is best-effort. If you encounter issues, fall back to the webpack config above (removing the --turbopack flag from your next dev command).

How It Works

The loader runs as a webpack pre-loader, executing before TypeScript compilation:

1. Creates a ts-morph Project from your tsconfig
2. Scans all source files for operator overload definitions
3. Transforms expressions in the current file (e.g. v1 + v2 becomes Vector3["+"](v1, v2))
4. Generates a V3 source map so stack traces and debugger breakpoints map back to your original source
5. Passes the transformed code to the next loader (e.g. ts-loader)

Comparison with Other Approaches

Approach	When it runs	Use case
@boperators/cli	Before compilation	Batch transform to disk, then compile normally
@boperators/plugin-tsc	During compilation	Seamless tsc integration, no intermediate files
@boperators/webpack-loader	During bundling	Webpack projects, integrates into existing build pipeline
@boperators/plugin-vite	During bundling	Vite projects, integrates into Rollup-based pipeline
@boperators/plugin-esbuild	During bundling	ESBuild projects, fast bundler integration
@boperators/plugin-bun	At runtime	Bun-only, transforms on module load

License

MIT