Getting to Know Stencil Decorators

Stencil Logo

Decorators

  • Class
declare type ClassDecorator = <TFunction extends Function>(target: TFunction) => TFunction | void;
  • Property
declare type PropertyDecorator = (target: Object, propertyKey: string | symbol) => void;
  • Method
declare type MethodDecorator = <T>(target: Object, propertyKey: string | symbol, descriptor: TypedPropertyDescriptor<T>) => TypedPropertyDescriptor<T> | void;
  • Parameter
declare type ParameterDecorator = (target: Object, propertyKey: string | symbol, parameterIndex: number) => void;
@Component()

Stencil Decorators

export declare const Component: ComponentDecorator;
export declare const Element: ElementDecorator;
export declare const Event: EventDecorator;
export declare const Listen: ListenDecorator;
export declare const Method: MethodDecorator;
export declare const Prop: PropDecorator;
export declare const PropWillChange: PropChangeDecorator;
export declare const PropDidChange: PropChangeDecorator;
export declare const State: StateDecorator;
styleUrl?: string;
styleUrls?: string[] | ModeStyles;
styles?: string;
shadow?: boolean;
host?: HostMeta;
assetsDir?: string;
assetsDirs?: string[];
import { Component } from '@stencil/core';@Component({
tag: 'st-toaster',
styleUrl: 'toaster.scss',
shadow: true
})
export class Toaster {
...
}
import { Component, Element } from '@stencil/core';@Component({
...
})
export class Toaster {
@Element() toasterDiv: HTMLElement;

showToast() {
this.toasterDiv.style.display = 'block';
};
}
import { Event, EventEmitter } from '@stencil/core';@Component({
...
})
export class Toaster {
@Event() toasterFadeOut: EventEmitter;
toasterFadeOutHandler() {
this.toasterFadeOut.emit();
}
}
import { Listen } from '@stencil/core';export class ToasterApp {
@Listen('toasterFadeOut')
toasterFadeOutHandler(event: CustomEvent) {
console.log('Received event: ', event.detail);
}
}
import { Component, Element } from '@stencil/core';@Component({
...
})
export class Toaster {
@Element() toasterDiv: HTMLElement;
@Method()
showToast(notification) {
this.toasterDiv.textContent = notification;
this.toasterDiv.style.display = 'block';
};
}
context?: string;
connect?: string;
mutable?: boolean;
import {Component, Prop, State} from '@stencil/core';

@Component({
tag: 'collapsible-panel',
styleUrl: 'collapsible-panel.css'
})
export class CollapsiblePanel {
@Prop() title: string;
...
}
import { Prop, PropDidChange, PropWillChange } from '@stencil/core';

export class CollapsiblePanel {
@Prop() title: string;

@PropWillChange('title')
willChangeHandler(newValue: boolean) {
console.log('The old title is:', this.title, 'The new title is: ', newValue);
}
@PropDidChange('title')
didChangeHandler(newValue: boolean) {
console.log('The new title is: ', newValue);
}
}
import {Component, Prop, State} from '@stencil/core';

@Component({
tag: 'collapsible-panel',
styleUrl: 'collapsible-panel.css'
})
export class CollapsiblePanel {
@Prop() title: string;
@State() collapsed: boolean;
...
}

Summary

--

--

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Gil Fink

Gil Fink

Hardcore web developer, @sparXys CEO, Google Web Technologies GDE, Microsoft MVP, Pro SPA Development co-author, husband, dad and a geek.