A class method decorator which emits custom events.
The decorator supports the latest (stage: 3) TC39 proposal - which is not yet implemented by browser vendors. However with TypeScript 5 we can use those already.
Some notes:
- An event name has to be set
- The emitted event bubbles by default
- using both
experimentalDecoratorsand stage 3 decorators in the same file is not possible. In the same project for separate files this could work, but that needs some work and several tsconfig files. - This is experimental and may not work in every environment or framework
Feel free to contribute and giving feedback
import { eventEmitter } from './event-emitter.js';
class EmitterClass {
// listen to: 'sum-event'
@eventEmitter({ name: 'sum-event' })
sum(a: number, b: number): number {
return a + b;
}
}The decorated method's return value is stored in the custom event's detail property (if not otherwise specified).
EmitterConfig adds two properties to CustomEventInit:
interface EmitterConfig extends CustomEventInit {
/**
* The event name you can listen to
*/
name: string;
/**
* The emitter for your events,
* by default the class instance itself (this)
*/
emitter?: Window | Document;
}Which includes:
interface CustomEventInit<T = any> extends EventInit {
detail?: T;
}
interface EventInit {
bubbles?: boolean;
cancelable?: boolean;
composed?: boolean;
}After writing the @queryAssignedElementContent decorator, I thought about what other ways there are to use decorators for web components. One way is to emit custom events so that consumers can react to this data. This could be a slider's position after moving it or anything else. Although motivated by it, it's not limited to be used with web components.
npm i event-emitter-class-method-decoratorInstall project dependencies
npm iRun the next two commands in parallel:
# Build with TS:
npm run build:watch
# Start a webserver:
npm run wds:serve