WIP: Undefined system instance members if TypeScript has useDefineForClassFields activated and is transpiled with @babel/plugin-proposal-class-properties

[martinemmert]

tl;dr; The reason why this behavior is occurring is currently not known and I still investigate the issue.
It can be resolved by deactivating the useDefineForClassFields compiler option of Typescript.

---

Both this.view and this.displayObjectQuery are undefined when accessing them inside the update method and are undefined if the code is paused by the debugger. At the end of init both are defined.

I need to have a better understanding of the System class to go on with my investigations, but if by chance anyone else has an idea - I would be glad if we can resolve this.

Note: if placed some comments into the code as hints

import { Query, System, World } from 'ape-ecs';
import type { View } from '../components/View';

export class RenderSystem extends System {
  public view?: View;
  public displayObjectQuery!: Query;
 
  init() {
    this.view = this.world.getEntity('RenderView');
    this.displayObjectQuery = this.createQuery().fromAll('DisplayObject').persist();
    console.log(this.view) // output of the RenderView Entity object
  }

  update() {
    if (!this.view || !this.view.stage || !this.view.renderer) return;
    // is never executed beacue this.view is undefined
    this.displayObjectQuery.execute();
    this.view.renderer.render(this.view.stage);
  }
}

Typescript compiler compiles that to:

import { System } from 'ape-ecs';
export class RenderSystem extends System {
    view;
    displayObjectQuery;
    init() {
        this.view = this.world.getEntity('RenderView');
        this.displayObjectQuery = this.createQuery().fromAll('DisplayObject').persist();
        console.log(this.view); // output of the RenderView Entity object
    }
    update() {
        if (!this.view || !this.view.stage || !this.view.renderer)
            return;
        // is never executed beacue this.view is undefined
        this.displayObjectQuery.execute();
        this.view.renderer.render(this.view.stage);
    }
}

Babel transpiles that to:

function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }

import { System } from 'ape-ecs';
export class RenderSystem extends System {
  constructor(...args) {
    super(...args);

    // if I remove this by hand after transpiling, this.view is defined during update
    _defineProperty(this, "view", void 0);  
    // if I remove this by hand after transpiling, this.displayObjectQuery is defined during update
    _defineProperty(this, "displayObjectQuery", void 0);
  }

  init() {
    this.view = this.world.getEntity('RenderView');
    this.displayObjectQuery = this.createQuery().fromAll('DisplayObject').persist();
    console.log(this.view); // output of the RenderView Entity object
  }

  update() {
    if (!this.view || !this.view.stage || !this.view.renderer) return; // is never executed beacue this.view is undefined

    this.displayObjectQuery.execute();
    this.view.renderer.render(this.view.stage);
  }

}

[vegeta897]

I'm experiencing the same issue running Ape ECS in a Next.js project using the babel/next preset which includes @babel/plugin-proposal-class-properties.

Unfortunately, your workaround with disabling useDefineForClassFields is not working for me (it should be false by default anyway), so I'm pretty stuck.

Update:
Adding @babel/preset-typescript seems to fix the missing queries.