Совет - использование контекста Prop () в трафарете

Еще одна скрытая в настоящее время проблема в компиляторе Stencil - это контекст Prop (). В этой статье я постараюсь вкратце объяснить, что это такое и как им пользоваться.

Контекст Prop ()

В предыдущем посте я объяснил, как разделить состояние между компонентами в Stencil. В этом посте я объяснил, как использовать соединение Prop (). Контекст Prop () по синтаксису напоминает соединение Prop (), но был создан для другой цели. В Stencil есть объект CoreContext, который включает в себя различные полезные предустановленные свойства. Вот его текущий интерфейс:

export interface CoreContext {
    addListener?: AddEventListener;
    attr?: number;
    dom?: DomController;
    emit?: (elm: Element, eventName: string, data?: EventEmitterData) => void;
    enableListener?: EventListenerEnable;
    eventNameFn?: (eventName: string) => string;
    isClient?: boolean;
    isPrerender?: boolean;
    isServer?: boolean;
    window?: Window;
    location?: Location;
    document?: Document;
    mode?: string;
    [contextId: string]: any;
}

Примечание. Интерфейс CoreContext может измениться в будущем.

В составе свойств CoreContext вы можете найти флаги, которые помогут вам понять, работает ли код вашего компонента в режиме сервера или в режиме клиента / браузера. Другие свойства CoreContext представляют собой ссылку на местоположение, объекты документа и окна и многое другое. Данные контекста могут быть введены в компонент с помощью контекста Prop ():

@Prop({ context: 'isServer' }) private isServer: boolean;

Как видно из кода, вы передаете объект декоратору Prop () с элементом контекста и именем члена (из интерфейса, представленного ранее). Позже в компоненте вы сможете использовать данные контекста как обычное свойство вашего компонента:

componentWillLoad() {
    if (!this.isServer) {
        fetch('http://...').then(...)
    }
}

Резюме

Контекст Prop () может быть очень полезен для внедрения данных Stencil CoreContext в ваши компоненты. Это может пригодиться в основном в сценариях рендеринга на стороне сервера, но, возможно, в будущем это будет полезно и в других сценариях.