[📖 Design Decision] Not preserving this on calls to external functions

[iwoplaza]

Let's consider the following code:

const Tracker = {
  count: 0,
  tick() {
    this.count++;
    return this.count;
  },
};

function main() {
  'use gpu';
  const value = Tracker.tick();
  return value + Tracker.tick();
}

This code fails, as tick is not marked to run at comptime. There's nothing stopping TypeGPU to execute tick on a technical level, but for the sake of clarity, we require users to explicitly decide whether they want a function to be executable on the GPU ('use gpu'), or at comptime (tgpu.comptime(...)).

To fix this, we can attempt to wrap the function in tgpu.comptime, and explicitly tell it that this will be bound to Tracker.

const Tracker = {
  count: 0,
  tick: tgpu.comptime(function (this: typeof Tracker) {
    this.count++;
    return this.count;
  }),
};

function main() {
  'use gpu';
  const value = Tracker.tick();
  return value + Tracker.tick();
}

main(); // ❌ TypeError: Cannot read properties of undefined (reading 'count')

This however fails, both at runtime and during shader generation:

1. tgpu.comptime calls the target function directly, without binding the object it's called on. Therefore this is undefined in the body of tick.
2. Our shader generator currently doesn't bind this to anything, so it also leads to the same error.

There are workaround to this, things we could do to support this way of writing code, but it greatly complicates the code that has to be emitted by unplugin-typegpu, for little to no gain.

If we always assume that this is undefined inside function () {} functions, then we can be free to expand property access in externals without handling this particular edge-case.

Workaround

If you really want to put functions on objects and use them in shader functions, then don't rely on this.

const Tracker = {
  count: 0,
  tick: tgpu.comptime(() => {
    Tracker.count++;
    return Tracker.count;
  }),
};

function main() {
  'use gpu';
  const value = Tracker.tick();
  return value + Tracker.tick();
}

[aleksanderkatan]

There is also another workaround, it is to use classes instead of pojos.

import tgpu from 'typegpu';

class Tracker {
  count = 0;
  tick = tgpu.comptime(() => {
    this.count++;
    return this.count;
  });
}

const tracker = new Tracker();

function main() {
  'use gpu';
  const value = tracker.tick();
  return value + tracker.tick();
}

console.log(main()); // 3
console.log(tgpu.resolve([main])); // 3 + 4

I think it would be fine to not handle dynamic this. We could mention it in the docs, and maybe also lint this (POJO && tgpu.comptime && this).