Issue with using this inside afterLoad static method

[lb-]

Problem

The afterLoad method is confusingly not called with a this context of the controller constructor but is instead undefined.

TypeScript is advising that this will be the controller constructor but at runtime it is failing.

Steps to reproduce

Create a controller

export class LoaderController extends Controller {
  static values = {
    durationSeconds: { type: Number, default: 30 },
  };

  static afterLoad(identifier: string, application: Application) {
    const { controllerAttribute } = application.schema;
    console.log('afterLoad test', this); // this is undefined
    console.log('afterLoad stuff', {identifier, controllerAttribute });
    console.assert(this.values.durationSeconds.default, 30); // errors as this is undefined
  }
}

Expect that the this will be the controller constructor. Instead it is undefined.

Potential solution

stimulus/src/core/router.ts

Line 58 in 8217e9b

const afterLoad = (definition.controllerConstructor as any).afterLoad

 const afterLoad = (definition.controllerConstructor as any).afterLoad?.bind(controllerConstructor)

[ippeiukai]

bitten by this bug. hope to have a patch release.

[marcoroth]

@ippeiukai this fix is shipping in the next release.

If you don't want to wait you can use the latest dev-build from main using:

yarn add @hotwired/stimulus@https://github.com/hotwired/dev-builds/archive/refs/tags/@hotwired/stimulus/eda0f9d.tar.gz