Class transpilation example

This RSG 2.0 SDK app runs TypeScript class syntax on Roku devices with Hermes bytecode.

Summary

This example shows that you can use TypeScript class syntax in app runtime code and still run on Roku devices when the build pipeline targets Hermes bytecode.

The CounterModel class is in src/model/counter-model.ts.
The anchor node ClassTranspilationDemo creates and uses that class at runtime.
Pressing the button calls a class method (increment) and updates the UI state.

Why class transpilation is now supported

The tooling build settings configure esbuild with supported.class = false, which lowers class declarations before the bundle is compiled to Hermes bytecode.

This approach avoids relying on native class syntax support in the Hermes runtime on the device and keeps behavior consistent for Roku OS 15.0 and later targets.

Caveats

Class syntax has the following limitations:

This demo uses only standard class syntax and the TypeScript private modifier.
This demo does not use JavaScript private fields and methods (#field, #method) or static {} blocks.
If your app uses #private members or static class blocks, you must include the corresponding esbuild supported flags in the build settings.

Manual verification

To verify the example manually, follow these steps:

From this directory, build the example: pnpm build
Deploy to your device in development mode: npx rk dev
On the device, open the app and press Increment class count.

The count increases on each press, which shows that the class-backed runtime logic runs correctly.