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

--

--

--

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

Love podcasts or audiobooks? Learn on the go with our new app.

Recommended from Medium

Hacking Oregon Eclipse — story of a side project

Recoilize 2.0

Commonly used built-in Directives in Angular

8 Things You Need to Learn Before Building Large-Scale Enterprise Applications

Ejecting from Expo

React Native meme

10 Reasons Why This Is The Right Time To Start Programming

Abstract Syntax Trees by example

Ship it, Next.js on AWS with Serverless Framework

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.

More from Medium

Yes it's a Confusing Operator 🤔

56. Merge Intervals

How to Detect a Letter Key on Key Events with Javascript

Solving IPv4 Exhaustion with JavaScript