Using recent TypeScript features (e.g. private fields)

[lgarron]

If I modify the demo to do the following:

class WithPrivateField {
  #privateField: number = 0;

  increment(): number {
    return this.#privateField++;
  }
}

const c = new WithPrivateField();
console.log(c.increment());

...this causes Uncaught SyntaxError: Private field '#privateField' must be declared in an enclosing class

If I try to use it for an existing project:

git clone https://github.com/cubing/cubing.js
cd cubing.js
git checkout wmr
npm install
npx wmr --public src/
# Open http://localhost:8080/demo/twisty/mkbhd.html or http://localhost:8080/cubing/twisty/dom/viewers/Twisty3DCanvas.ts

...I get errors like:

Error: Usage of undeclared private name (cubing/twisty/dom/viewers/Twisty3DCanvas.ts:168:14)
  166 |
  167 |     if (this.#invisible) {
---------------------^
  168 |       this.contentWrapper.classList.remove("invisible");
500 ./src/cubing/twisty/dom/viewers/Twisty3DCanvas.ts  - Usage of undeclared private name (cubing/twisty/dom/viewers/Twisty3DCanvas.ts:168:14)
  166 |

The project in question has a recent enough TypeScript as a dependency, but I gather that wmr is using something else. I'd love to try out wmr, but being able to use recent TypeScript without fuss is rather important. Is this something that is meant to be supported, and/or is there something simple I can do to enable it?

[developit]

Here's the upstream issue for fixing this in Sucrase: alangpierce/sucrase#560

[marvinhagemeister]

Fixed by #428

[lgarron]

Fixed by #428

I gave wmr another try, but it seems that private methods aren't working in wmr 3.1.1. But these were implemented by the same PR to sucrase, which indicates to me they should be working. Am I missing something?

EDIT: now filed at https://github.com/preactjs/wmr/issues/708