Decorators

Sugar, never a requirement. No engine ships stage-3 decorators, so every decorator here is a thin wrapper over a function API that works without it.

Decorator	Wraps
@component(config)	static config + registerComponent()
@on(target, type)	the on<Child><Event> names
@provide(key)	$provide()
@inject(key)	$inject()
@children(nameOrClass, cb?)	$watchChildren()
@read / @write	$read() / $write()

The service mixins have a decorator form too — see Mixins.

A page with no build step keeps everything

registerComponent, $provide, $watchChildren, $read, $write and the on<Child><Event> method names are all there is. A page loaded from an ESM CDN uses the same framework with none of this file's contents.

Each value decorator works on a plain field or an accessor

@component({ name: 'Demo' })
class Demo extends Base {
  @inject(Key) a?: number;
  @inject(Key) accessor b: number | undefined;
}

Build setup

Vite 8 transforms TypeScript with Oxc, which passes decorators through untouched, so a transform has to compile them. TypeScript 5 needs experimentalDecorators: false. See Installation.

The package itself compiles them with @rollup/plugin-swc and decoratorVersion: '2023-11', filtered to the files that contain a decorator.

Read next

Decorators walks the whole set, including how they stack and why the phase decorators are leaf-method sugar.