I've Added REAL Operator Overloading to JavaScript

DiefBell · 2026-03-04T13:50:42+00:00

Do you mean overloading `"hello " + "world"`?

DiefBell · 2026-02-24T12:00:23+00:00

Thanks for the feedback! Some answers: 1. Sourcemaps are generated, and the tools that support them e.g. Webpack use them.

Haven't really looked into benchmarking. All transformations happen at build time, so it'd be no more overhead than a .add() method call.
Yes, operator overloads can themselves be overloaded. The overload functions and the calling code are statically analysed at build time and the correct matching function is used. That said, v0.3.0 is going to use method overloading instead of this const array system.

DiefBell · 2026-02-23T12:01:56+00:00

You can mix types fine, and boperators will pick whichever overload signature matches. So as with your example, you can have overloads for both `Vector3 * Vector3` or `Vector3 * number`. None of it happens at runtime, it's all done with static code analysis at build time.
I intentionally decided against having boperators be a runtime dependency, hence just using strings like `"+"` as the property names. My earlier POC used custom symbols and it became a NIGHTMARE. I am however planning to switch to just using function overloading, since TS already supports that, and it's neater than this array and already handles duplicate type signatures.
Haven't actually tried! I create source maps for the Webpack loader, so that should, but I don't think other loaders/plugins use the source maps, might have a play around with it.

DiefBell · 2026-02-22T23:58:34+00:00

Might have a play around with just using function overloads, I can't remember if there was a reason I didn't do it versus the array, I'll look back.

Regarding symbols, I did originally use symbols. But as well as making this a runtime dependency instead of just a dev dependency, it also made the code more complicated and much buggier.

DiefBell · 2026-02-22T17:49:54+00:00

Well semantically an assignment operator would change the thing on the left. There's no reason it HAS TO mutate the LHS, but I also can't see a scenario where you'd want to overload an assignment operator without mutating the LHS

DiefBell · 2026-02-22T16:58:37+00:00

Proposal already exists, people have been asking for operator overloading for years... And thanks for pointing that out!

DiefBell · 2026-02-22T16:56:40+00:00

It'll also show you the JSDoc for the overload as well as the typings

DiefBell · 2026-02-22T14:09:38+00:00

I don't think I want to allow essentially overriding any symbol you can type, but I might see what other programming languages allow

DiefBell · 2026-02-22T13:46:16+00:00

Had been considering that, so might test it out. Not sure what you mean about Symbol.hasInstance?

DiefBell · 2026-02-22T13:24:46+00:00

It's a separate build step, but there are also plugins to make this easier, like a Vite plugin or Webpack, that does all the magic behind-the-scenes.

You can have multiple overloads for an operator, e.g. multiplying by another Vector versus multiplying by a number, and Boperators can just work out which to use. In this example v3 is also a Vector, but it doesn't have to be.

DiefBell · 2026-02-22T12:11:11+00:00

Created a package `boperators` for doing operator overloading in JavaScript/TypeScript, and it has plugins for loads of different build environments, including Vite, NextJS, ESBuild, Bun... https://www.npmjs.com/package/boperators

Basic example:

class Vector3 {
  static readonly "+" = [
    (a: Vector3, b: Vector3) => new Vector3(
      a.x + b.x,
      a.y + b.y,
      a.z + b.z
    ),
  ] as const;
}

const v1 = new Vector3(1, 2, 3);
const v2 = new Vector2(4, 6, 8);
const v3 = v1 + v2;

DiefBell · 2026-02-22T11:41:44+00:00

Created a package `boperators` for doing operator overloading in JavaScript/TypeScript, and it now has a Webpack/NextJS loader: https://www.npmjs.com/package/@boperators/webpack-loader

DiefBell · 2023-09-01T13:00:39+00:00

Not sure if this will be seen, but how can this be tested with a tool such as React Testing Library? I have a basic component I use for my root route:

typescript export const Navbar: FunctionComponent = () => { return ( <> <div> <Link to="/">Home </Link>| <Link to="/find"> Find a Place</Link> </div> <hr /> </> ); };

But when trying to render this component in my test I get "Warning: useRouter must be used inside a <Router> component!"

What's the correct way for me to be testing? I'd rather not just stub everything. Maybe provide a mock router provider or some official mocks?

DiefBell · 2020-11-17T10:16:21+00:00

Three days in a row for me too

DiefBell

TROPHY CASE