@stencil/core

  • Version 2.8.0
  • Published
  • 15.3 MB
  • No dependencies
  • MIT license

Install

npm i @stencil/core
yarn add @stencil/core
pnpm add @stencil/core

Overview

A Compiler for Web Components and Progressive Web Apps

Index

Variables

Functions

Interfaces

Type Aliases

Namespaces

Variables

variable Build

const Build: UserBuildConditionals;
  • The Build object provides many build conditionals that can be used to include or exclude code depending on the build.

variable Component

const Component: ComponentDecorator;
  • The @Component() decorator is used to provide metadata about the component class. https://stenciljs.com/docs/component

variable Element

const Element: ElementDecorator;
  • The @Element() decorator is a reference to the actual host element once it has rendered.

variable Env

const Env: { [prop: string]: string };
  • The Env object provides access to the "env" object declared in the project's stencil.config.ts.

variable Event

const Event: EventDecorator;
  • Components can emit data and events using the Event Emitter decorator. To dispatch Custom DOM events for other components to handle, use the @Event() decorator. The Event decorator also makes it easier for Stencil to automatically build types and documentation for the event data. https://stenciljs.com/docs/events

variable Fragment

const Fragment: FunctionalComponent<{}>;
  • Fragment

variable Host

const Host: FunctionalComponent<HostAttributes>;
  • Host is a functional component can be used at the root of the render function to set attributes and event listeners to the host element itself.

    For further information: https://stenciljs.com/docs/host-element

variable Listen

const Listen: ListenDecorator;
  • The Listen() decorator is for listening DOM events, including the ones dispatched from @Events(). https://stenciljs.com/docs/events#listen-decorator

variable Method

const Method: MethodDecorator;
  • The @Method() decorator is used to expose methods on the public API. Class methods decorated with the @Method() decorator can be called directly from the element, meaning they are intended to be callable from the outside. https://stenciljs.com/docs/methods

variable Prop

const Prop: PropDecorator;
  • Props are custom attribute/properties exposed publicly on the element that developers can provide values for. Children components do not need to know about or reference parent components, so Props can be used to pass data down from the parent to the child. Components need to explicitly declare the Props they expect to receive using the @Prop() decorator. Any value changes to a Prop will cause a re-render. https://stenciljs.com/docs/properties

variable State

const State: StateDecorator;
  • The @State() decorator can be used to manage internal data for a component. This means that a user cannot modify this data from outside the component, but the component can modify it however it sees fit. Any value changes to a @State() property will cause the components render function to be called again. https://stenciljs.com/docs/state

variable Watch

const Watch: WatchDecorator;
  • When a property's value has changed, a method decorated with @Watch() will be called and passed the new value of the prop along with the old value. Watch is useful for validating props or handling side effects. Watch decorator does not fire when a component initially loads. https://stenciljs.com/docs/reactive-data#watch-decorator

Functions

function forceUpdate

forceUpdate: (ref: any) => void;
  • Schedules a new render of the given instance or element even if no state changed.

    Notice forceUpdate() is not syncronous and might perform the DOM render in the next frame.

function getAssetPath

getAssetPath: (path: string) => string;
  • Get the base path to where the assets can be found. Use setAssetPath(path) if the path needs to be customized.

function getElement

getElement: (ref: any) => HTMLStencilElement;
  • getElement

function getMode

getMode: <T = string>(ref: any) => T;
  • getMode

function getRenderingRef

getRenderingRef: () => any;
  • getRenderingRef

function h

h: typeof h;

    function readTask

    readTask: (task: RafCallback) => void;
    • Schedules a DOM-read task. The provided callback will be executed in the best moment to perform DOM reads without causing layout thrashing.

      For further information: https://developers.google.com/web/fundamentals/performance/rendering/avoid-large-complex-layouts-and-layout-thrashing

    function setAssetPath

    setAssetPath: (path: string) => string;
    • Used to manually set the base path where assets can be found. For lazy-loaded builds the asset path is automatically set and assets copied to the correct build directory. However, for custom elements builds, the setAssetPath(path) could be used to customize the asset path depending on how the script file is consumed. If the script is used as "module", it's recommended to use "import.meta.url", such as setAssetPath(import.meta.url). Other options include setAssetPath(document.currentScript.src), or using a bundler's replace plugin to dynamically set the path at build time, such as setAssetPath(process.env.ASSET_PATH). But do note that this configuration depends on how your script is bundled, or lack of bunding, and where your assets can be loaded from. Additionally custom bundling will have to ensure the static assets are copied to its build directory.

    function setErrorHandler

    setErrorHandler: (handler: ErrorHandler) => void;
    • setErrorHandler() can be used to inject a custom global error handler. Unhandled exception raised while rendering, during event handling, or lifecycles will trigger the custom event handler.

    function setMode

    setMode: (handler: ResolutionHandler) => void;
    • setMode() is used for libraries which provide multiple "modes" for styles.

    function setPlatformHelpers

    setPlatformHelpers: (helpers: {
    jmp?: (c: any) => any;
    raf?: (c: any) => number;
    ael?: (el: any, eventName: string, listener: any, options: any) => void;
    rel?: (el: any, eventName: string, listener: any, options: any) => void;
    ce?: (eventName: string, opts?: any) => any;
    }) => void;

      function writeTask

      writeTask: (task: RafCallback) => void;
      • Schedules a DOM-write task. The provided callback will be executed in the best moment to perform DOM mutation without causing layout thrashing.

        For further information: https://developers.google.com/web/fundamentals/performance/rendering/avoid-large-complex-layouts-and-layout-thrashing

      Interfaces

      interface ChildNode

      interface ChildNode {}

        property vattrs

        vattrs?: any;

          property vchildren

          vchildren?: VNode[];

            property vkey

            vkey?: string | number;

              property vname

              vname?: string;

                property vtag

                vtag?: string | number | Function;

                  property vtext

                  vtext?: string;

                    interface ComponentDidLoad

                    interface ComponentDidLoad {}

                      method componentDidLoad

                      componentDidLoad: () => void;
                      • The component has loaded and has already rendered.

                        Updating data in this method will cause the component to re-render.

                        componentDidLoad will only be called once.

                      interface ComponentDidUpdate

                      interface ComponentDidUpdate {}

                        method componentDidUpdate

                        componentDidUpdate: () => void;
                        • The component has just re-rendered.

                          Called multiple times throughout the life of the component as it updates.

                          componentWillUpdate is not called on the first render.

                        interface ComponentInterface

                        interface ComponentInterface {}

                          method componentDidLoad

                          componentDidLoad: () => void;
                          • The component has loaded and has already rendered.

                            Updating data in this method will cause the component to re-render.

                            componentDidLoad will only be called once.

                          method componentDidRender

                          componentDidRender: () => void;

                            method componentDidUpdate

                            componentDidUpdate: () => void;
                            • The component has just re-rendered.

                              Called multiple times throughout the life of the component as it updates.

                              componentWillUpdate is not called on the first render.

                            method componentShouldUpdate

                            componentShouldUpdate: (
                            newVal: any,
                            oldVal: any,
                            propName: string
                            ) => boolean | void;
                            • A @Prop or @State property changed and a rerender is about to be requested.

                              Called multiple times throughout the life of the component as its properties change.

                              componentShouldUpdate is not called on the first render.

                            method componentWillLoad

                            componentWillLoad: () => Promise<void> | void;
                            • The component is about to load and it has not rendered yet.

                              This is the best place to make any data updates before the first render.

                              componentWillLoad will only be called once.

                            method componentWillRender

                            componentWillRender: () => Promise<void> | void;

                              method componentWillUpdate

                              componentWillUpdate: () => Promise<void> | void;
                              • The component is about to update and re-render.

                                Called multiple times throughout the life of the component as it updates.

                                componentWillUpdate is not called on the first render.

                              method connectedCallback

                              connectedCallback: () => void;

                                method disconnectedCallback

                                disconnectedCallback: () => void;

                                  method render

                                  render: () => any;

                                    index signature

                                    [memberName: string]: any;

                                      interface ComponentOptions

                                      interface ComponentOptions {}

                                        property assetsDirs

                                        assetsDirs?: string[];
                                        • Array of relative links to folders of assets required by the component.

                                        property scoped

                                        scoped?: boolean;
                                        • If true, the component will use scoped stylesheets. Similar to shadow-dom, but without native isolation. Defaults to false.

                                        property shadow

                                        shadow?: boolean | ShadowRootOptions;
                                        • If true, the component will use native shadow-dom encapsulation, it will fallback to scoped if the browser does not support shadow-dom natively. Defaults to false. Additionally, shadow can also be given options when attaching the shadow root.

                                        property styles

                                        styles?:
                                        | string
                                        | {
                                        [modeName: string]: any;
                                        };
                                        • String that contains inlined CSS instead of using an external stylesheet. The performance characteristics of this feature are the same as using an external stylesheet.

                                          Notice, you can't use sass, or less, only css is allowed using styles, use styleUrl is you need more advanced features.

                                        property styleUrl

                                        styleUrl?: string;
                                        • Relative URL to some external stylesheet file. It should be a .css file unless some external plugin is installed like @stencil/sass.

                                        property styleUrls

                                        styleUrls?: string[] | ModeStyles;
                                        • Similar as styleUrl but allows to specify different stylesheets for different modes.

                                        property tag

                                        tag: string;
                                        • Tag name of the web component. Ideally, the tag name must be globally unique, so it's recommended to choose an unique prefix for all your components within the same collection.

                                          In addition, tag name must contain a '-'

                                        interface ComponentWillLoad

                                        interface ComponentWillLoad {}
                                        • This file gets copied to all distributions of stencil component collections. - no imports

                                        method componentWillLoad

                                        componentWillLoad: () => Promise<void> | void;
                                        • The component is about to load and it has not rendered yet.

                                          This is the best place to make any data updates before the first render.

                                          componentWillLoad will only be called once.

                                        interface ComponentWillUpdate

                                        interface ComponentWillUpdate {}

                                          method componentWillUpdate

                                          componentWillUpdate: () => Promise<void> | void;
                                          • The component is about to update and re-render.

                                            Called multiple times throughout the life of the component as it updates.

                                            componentWillUpdate is not called on the first render.

                                          interface Config

                                          interface StencilConfig {}
                                          • https://stenciljs.com/docs/config/

                                          property allowInlineScripts

                                          allowInlineScripts?: boolean;
                                          • By default, Stencil will attempt to optimize small scripts by inlining them in HTML. Setting this flag to false will prevent this optimization and keep all scripts separate from HTML.

                                          property autoprefixCss

                                          autoprefixCss?: boolean | any;
                                          • By setting autoprefixCss to true, Stencil will use the appropriate config to automatically prefix css. For example, developers can write modern and standard css properties, such as "transform", and Stencil will automatically add in the prefixed version, such as "-webkit-transform". As of Stencil v2, autoprefixing CSS is no longer the default. Defaults to false

                                          property buildDist

                                          buildDist?: boolean;

                                            property buildEs5

                                            buildEs5?: boolean | 'prod';
                                            • Sets if the ES5 build should be generated or not. Stencil generates a modern build without ES5, whereas this setting to true will also create es5 builds for both dev and prod modes. Setting buildEs5 to prod will only build ES5 in prod mode. Basically if the app does not need to run on legacy browsers (IE11 and Edge 18 and below), it's safe to not build ES5, which will also speed up build times. Defaults to false.

                                            property buildLogFilePath

                                            buildLogFilePath?: string;

                                              property bundles

                                              bundles?: ConfigBundle[];
                                              • By default, Stencil will statically analyze the application and generate a component graph of how all the components are interconnected.

                                                From the component graph it is able to best decide how components should be grouped depending on their usage with one another within the app. By doing so it's able to bundle components together in order to reduce network requests. However, bundles can be manually generated using the bundles config.

                                                The bundles config is an array of objects that represent how components are grouped together in lazy-loaded bundles. This config is rarely needed as Stencil handles this automatically behind the scenes.

                                              property cacheDir

                                              cacheDir?: string;

                                                property commonjs

                                                commonjs?: BundlingConfig;
                                                • Passes custom configuration down to the "@rollup/plugin-commonjs" that Stencil uses under the hood. For further information: https://stenciljs.com/docs/module-bundling

                                                property devInspector

                                                devInspector?: boolean;

                                                  property devMode

                                                  devMode?: boolean;
                                                  • Forces Stencil to run in dev mode if the value is true and production mode if it's false.

                                                    Defaults to false (ie. production) unless the --dev flag is used in the CLI.

                                                  property devServer

                                                  devServer?: StencilDevServerConfig;

                                                    property enableCache

                                                    enableCache?: boolean;
                                                    • Stencil will cache build results in order to speed up rebuilds. To disable this feature, set enableCache to false.

                                                    property enableCacheStats

                                                    enableCacheStats?: boolean;

                                                      property entryComponentsHint

                                                      entryComponentsHint?: string[];

                                                        property env

                                                        env?: {
                                                        [prop: string]: string | undefined;
                                                        };
                                                        • Provide a object of key/values accessible within the app, using the Env object.

                                                        property excludeUnusedDependencies

                                                        excludeUnusedDependencies?: boolean;

                                                          property extras

                                                          extras?: ConfigExtras;
                                                          • Config to add extra runtime for DOM features that require more polyfills. Note that not all DOM APIs are fully polyfilled when using the slot polyfill. These are opt-in since not all users will require the additional runtime.

                                                          property globalScript

                                                          globalScript?: string;

                                                            property globalStyle

                                                            globalStyle?: string;
                                                            • Stencil is traditionally used to compile many components into an app, and each component comes with its own compartmentalized styles. However, it's still common to have styles which should be "global" across all components and the website. A global CSS file is often useful to set CSS Variables.

                                                              Additonally, the globalStyle config is can be used to precompile styles with Sass, PostCss, etc. Below is an example folder structure containing a webapp's global sass file, named app.css.

                                                            property hashedFileNameLength

                                                            hashedFileNameLength?: number;
                                                            • When the hashFileNames config is set to true, and it is a production build, the hashedFileNameLength config is used to determine how many characters the file name's hash should be.

                                                            property hashFileNames

                                                            hashFileNames?: boolean;
                                                            • During production builds, the content of each generated file is hashed to represent the content, and the hashed value is used as the filename. If the content isn't updated between builds, then it receives the same filename. When the content is updated, then the filename is different.

                                                              By doing this, deployed apps can "forever-cache" the build directory and take full advantage of content delivery networks (CDNs) and heavily caching files for faster apps.

                                                            property hydratedFlag

                                                            hydratedFlag?: HydratedFlag;
                                                            • The hydrated flag identifies if a component and all of its child components have finished hydrating. This helps prevent any flash of unstyled content (FOUC) as various components are asynchronously downloaded and rendered. By default it will add the hydrated CSS class to the element. The hydratedFlag confg can be used to change the name of the CSS class, change it to an attribute, or change which type of CSS properties and values are assigned before and after hydrating. This config can also be used to not include the hydrated flag at all by setting it to null.

                                                            property invisiblePrehydration

                                                            invisiblePrehydration?: boolean;
                                                            • Ionic perfers to hide all components prior to hydration with a style tag appended to the head of the document containing some visibility: hidden; css rules.

                                                              Disabling this will remove the style tag that sets visibility: hidden; on all unhydrated web components. This more closely follows the HTML spec, and allows you to set your own fallback content.

                                                            property logger

                                                            logger?: Logger;
                                                            • Object to provide a custom logger. By default a logger is already provided for the platform the compiler is running on, such as NodeJS or a browser.

                                                            property maxConcurrentWorkers

                                                            maxConcurrentWorkers?: number;

                                                              property minifyCss

                                                              minifyCss?: boolean;
                                                              • Sets if the CSS is minified or not. Defaults to false in dev mode and true in production mode.

                                                              property minifyJs

                                                              minifyJs?: boolean;
                                                              • Sets if the JS browser files are minified or not. Stencil uses terser under the hood. Defaults to false in dev mode and true in production mode.

                                                              property namespace

                                                              namespace?: string;
                                                              • The namespace config is a string representing a namespace for the app. For apps that are not meant to be a library of reusable components, the default of App is just fine. However, if the app is meant to be consumed as a third-party library, such as Ionic, a unique namespace is required.

                                                              property nodeResolve

                                                              nodeResolve?: NodeResolveConfig;
                                                              • Passes custom configuration down to the "@rollup/plugin-node-resolve" that Stencil uses under the hood. For further information: https://stenciljs.com/docs/module-bundling

                                                              property outputTargets

                                                              outputTargets?: OutputTarget[];
                                                              • Stencil is able to take an app's source and compile it to numerous targets, such as an app to be deployed on an http server, or as a third-party library to be distributed on npm. By default, Stencil apps have an output target type of www.

                                                                The outputTargets config is an array of objects, with types of www and dist.

                                                              property plugins

                                                              plugins?: any[];
                                                              • The plugins config can be used to add your own rollup plugins. By default, Stencil does not come with Sass or PostCss support. However, either can be added using the plugin array.

                                                              property preamble

                                                              preamble?: string;

                                                                property rollupConfig

                                                                rollupConfig?: RollupConfig;
                                                                • Passes custom configuration down to rollup itself, not all rollup options can be overriden.

                                                                property rollupPlugins

                                                                rollupPlugins?: {
                                                                before?: any[];
                                                                after?: any[];
                                                                };

                                                                  property srcDir

                                                                  srcDir?: string;
                                                                  • The srcDir config specifies the directory which should contain the source typescript files for each component. The standard for Stencil apps is to use src, which is the default.

                                                                  property srcIndexHtml

                                                                  srcIndexHtml?: string;

                                                                    property stencilCoreResolvedId

                                                                    stencilCoreResolvedId?: string;

                                                                      property sys

                                                                      sys?: CompilerSystem;

                                                                        property taskQueue

                                                                        taskQueue?: 'async' | 'immediate' | 'congestionAsync';
                                                                        • Sets the task queue used by stencil's runtime. The task queue schedules DOM read and writes across the frames to efficiently render and reduce layout thrashing. By default, async is used. It's recommended to also try each setting to decide which works best for your use-case. In all cases, if your app has many CPU intensive tasks causing the main thread to periodically lock-up, it's always recommended to try [Web Workers](https://stenciljs.com/docs/web-workers) for those tasks.

                                                                          - async: DOM read and writes are scheduled in the next frame to prevent layout thrashing. During intensive CPU tasks it will not reschedule rendering to happen in the next frame. async is ideal for most apps, and if the app has many intensive tasks causing the main thread to lock-up, it's recommended to try [Web Workers](https://stenciljs.com/docs/web-workers) rather than the congestion async queue.

                                                                          - congestionAsync: DOM reads and writes are scheduled in the next frame to prevent layout thrashing. When the app is heavily tasked and the queue becomes congested it will then split the work across multiple frames to prevent blocking the main thread. However, it can also introduce unnecesary reflows in some cases, especially during startup. congestionAsync is ideal for apps running animations while also simultaniously executing intesive tasks which may lock-up the main thread.

                                                                          - immediate: Makes writeTask() and readTask() callbacks to be executed syncronously. Tasks are not scheduled to run in the next frame, but do note there is at least one microtask. The immediate setting is ideal for apps that do not provide long running and smooth animations. Like the async setting, if the app has intensive tasks causing the main thread to lock-up, it's recommended to try [Web Workers](https://stenciljs.com/docs/web-workers).

                                                                        property testing

                                                                        testing?: TestingConfig;

                                                                          property tsconfig

                                                                          tsconfig?: string;

                                                                            property validateTypes

                                                                            validateTypes?: boolean;

                                                                              property watch

                                                                              watch?: boolean;

                                                                                property watchIgnoredRegex

                                                                                watchIgnoredRegex?: RegExp | RegExp[];
                                                                                • An array of RegExp patterns that are matched against all source files before adding to the watch list in watch mode. If the file path matches any of the patterns, when it is updated, it will not trigger a re-run of tests.

                                                                                interface EventEmitter

                                                                                interface EventEmitter<T = any> {}

                                                                                  property emit

                                                                                  emit: (data?: T) => CustomEvent<T>;

                                                                                    interface EventOptions

                                                                                    interface EventOptions {}

                                                                                      property bubbles

                                                                                      bubbles?: boolean;
                                                                                      • A Boolean indicating whether the event bubbles up through the DOM or not.

                                                                                      property cancelable

                                                                                      cancelable?: boolean;
                                                                                      • A Boolean indicating whether the event is cancelable.

                                                                                      property composed

                                                                                      composed?: boolean;
                                                                                      • A Boolean value indicating whether or not the event can bubble across the boundary between the shadow DOM and the regular DOM.

                                                                                      property eventName

                                                                                      eventName?: string;
                                                                                      • A string custom event name to override the default.

                                                                                      interface FunctionalComponent

                                                                                      interface FunctionalComponent<T = {}> {}

                                                                                        call signature

                                                                                        (props: T, children: VNode[], utils: FunctionalUtilities): VNode | VNode[];

                                                                                          interface FunctionalUtilities

                                                                                          interface FunctionalUtilities {}

                                                                                            property forEach

                                                                                            forEach: (
                                                                                            children: VNode[],
                                                                                            cb: (vnode: ChildNode, index: number, array: ChildNode[]) => void
                                                                                            ) => void;

                                                                                              property map

                                                                                              map: (
                                                                                              children: VNode[],
                                                                                              cb: (vnode: ChildNode, index: number, array: ChildNode[]) => ChildNode
                                                                                              ) => VNode[];

                                                                                                interface ListenOptions

                                                                                                interface ListenOptions {}

                                                                                                  property capture

                                                                                                  capture?: boolean;
                                                                                                  • Event listener attached with @Listen does not "capture" by default, When a event listener is set to "capture", means the event will be dispatched during the "capture phase". Please see https://www.quirksmode.org/js/events_order.html for further information.

                                                                                                  property passive

                                                                                                  passive?: boolean;
                                                                                                  • By default, Stencil uses several heuristics to determine if it must attach a passive event listener or not.

                                                                                                    Using the passive option can be used to change the default behaviour. Please see https://developers.google.com/web/updates/2016/06/passive-event-listeners for further information.

                                                                                                  property target

                                                                                                  target?: ListenTargetOptions;
                                                                                                  • Handlers can also be registered for an event other than the host itself. The target option can be used to change where the event listener is attached, this is useful for listening to application-wide events.

                                                                                                  interface MethodOptions

                                                                                                  interface MethodOptions {}

                                                                                                    interface ModeStyles

                                                                                                    interface ModeStyles {}

                                                                                                      index signature

                                                                                                      [modeName: string]: string | string[];

                                                                                                        interface PrerenderConfig

                                                                                                        interface PrerenderConfig {}
                                                                                                        • The prerender config is used when prerendering a www output target. Within stencil.config.ts, set the path to the prerendering config file path using the prerenderConfig property, such as:

                                                                                                          import { Config } from '@stencil/core';
                                                                                                          export const config: Config = {
                                                                                                          outputTargets: [
                                                                                                          {
                                                                                                          type: 'www',
                                                                                                          baseUrl: 'https://stenciljs.com/',
                                                                                                          prerenderConfig: './prerender.config.ts',
                                                                                                          }
                                                                                                          ]
                                                                                                          };

                                                                                                          The prerender.config.ts should export a config object using the PrerenderConfig interface.

                                                                                                          import { PrerenderConfig } from '@stencil/core';
                                                                                                          export const config: PrerenderConfig = {
                                                                                                          ...
                                                                                                          };

                                                                                                          For more info: https://stenciljs.com/docs/static-site-generation

                                                                                                        property crawlUrls

                                                                                                        crawlUrls?: boolean;
                                                                                                        • While prerendering, crawl same-origin URLs found within <a href> elements. Defaults to true.

                                                                                                        property entryUrls

                                                                                                        entryUrls?: string[];
                                                                                                        • URLs to start the prerendering from. By default the root URL of / is used.

                                                                                                        property staticSite

                                                                                                        staticSite?: boolean;
                                                                                                        • Static Site Generated (SSG). Does not include Stencil's clientside JavaScript, custom elements or preload modules.

                                                                                                        property trailingSlash

                                                                                                        trailingSlash?: boolean;
                                                                                                        • If the prerenndered URLs should have a trailing "/"" or not. Defaults to false.

                                                                                                        method afterHydrate

                                                                                                        afterHydrate: (
                                                                                                        document: Document,
                                                                                                        url: URL,
                                                                                                        results: PrerenderUrlResults
                                                                                                        ) => any | Promise<any>;
                                                                                                        • Run after each document is hydrated, but before it is serialized into an HTML string. Hook is passed the document and its URL.

                                                                                                        method afterSerializeTemplate

                                                                                                        afterSerializeTemplate: (html: string) => string | Promise<string>;
                                                                                                        • Runs after the template Document object has serialize into an HTML formatted string. Returns an HTML string to be used as the base template for all prerendered pages.

                                                                                                        method beforeHydrate

                                                                                                        beforeHydrate: (document: Document, url: URL) => any | Promise<any>;
                                                                                                        • Run before each document is hydrated. Hook is passed the document it's URL.

                                                                                                        method beforeSerializeTemplate

                                                                                                        beforeSerializeTemplate: (document: Document) => Document | Promise<Document>;
                                                                                                        • Runs before the template Document object is serialize into an HTML formatted string. Returns the Document to be serialized which will become the base template html for all prerendered pages.

                                                                                                        method canonicalUrl

                                                                                                        canonicalUrl: (url: URL) => string | null;
                                                                                                        • A hook to be used to generate the canonical <link> tag which goes in the <head> of every prerendered page. Returning null will not add a canonical url tag to the page.

                                                                                                        method filePath

                                                                                                        filePath: (url: URL, filePath: string) => string;
                                                                                                        • Returns the file path which the prerendered HTML content should be written to.

                                                                                                        method filterAnchor

                                                                                                        filterAnchor: (attrs: { [attrName: string]: string }, base?: URL) => boolean;
                                                                                                        • Return true the given <a> element should be crawled or not.

                                                                                                        method filterUrl

                                                                                                        filterUrl: (url: URL, base: URL) => boolean;
                                                                                                        • Return true if the given URL should be prerendered or not.

                                                                                                        method hydrateOptions

                                                                                                        hydrateOptions: (url: URL) => PrerenderHydrateOptions;
                                                                                                        • Returns the hydrate options to use for each individual prerendered page.

                                                                                                        method loadTemplate

                                                                                                        loadTemplate: (filePath: string) => string | Promise<string>;
                                                                                                        • Returns the template file's content. The template is the base HTML used for all prerendered pages.

                                                                                                        method normalizeUrl

                                                                                                        normalizeUrl: (href: string, base: URL) => URL;
                                                                                                        • Used to normalize the page's URL from a given a string and the current page's base URL. Largely used when reading an anchor's href attribute value and normalizing it into a URL.

                                                                                                        method robotsTxt

                                                                                                        robotsTxt: (opts: RobotsTxtOpts) => string | RobotsTxtResults;

                                                                                                          method sitemapXml

                                                                                                          sitemapXml: (opts: SitemapXmpOpts) => string | SitemapXmpResults;

                                                                                                            interface PropOptions

                                                                                                            interface PropOptions {}

                                                                                                              property attribute

                                                                                                              attribute?: string | null;
                                                                                                              • The name of the associated DOM attribute. Stencil uses different heuristics to determine the default name of the attribute, but using this property, you can override the default behaviour.

                                                                                                              property mutable

                                                                                                              mutable?: boolean;
                                                                                                              • A Prop is _by default_ immutable from inside the component logic. Once a value is set by a user, the component cannot update it internally. However, it's possible to explicitly allow a Prop to be mutated from inside the component, by setting this mutable option to true.

                                                                                                              property reflect

                                                                                                              reflect?: boolean;
                                                                                                              • In some cases it may be useful to keep a Prop in sync with an attribute. In this case you can set the reflect option to true, since it defaults to false:

                                                                                                              interface QueueApi

                                                                                                              interface QueueApi {}

                                                                                                                property clear

                                                                                                                clear?: () => void;

                                                                                                                  property flush

                                                                                                                  flush?: (cb?: () => void) => void;

                                                                                                                    property read

                                                                                                                    read: (cb: RafCallback) => void;

                                                                                                                      property tick

                                                                                                                      tick: (cb: RafCallback) => void;

                                                                                                                        property write

                                                                                                                        write: (cb: RafCallback) => void;

                                                                                                                          interface RafCallback

                                                                                                                          interface RafCallback {}

                                                                                                                            call signature

                                                                                                                            (timeStamp: number): void;

                                                                                                                              interface VNode

                                                                                                                              interface VNode {}

                                                                                                                                property $attrs$

                                                                                                                                $attrs$?: any;

                                                                                                                                  property $children$

                                                                                                                                  $children$: VNode[];

                                                                                                                                    property $elm$

                                                                                                                                    $elm$: any;

                                                                                                                                      property $flags$

                                                                                                                                      $flags$: number;

                                                                                                                                        property $key$

                                                                                                                                        $key$?: string | number;

                                                                                                                                          property $name$

                                                                                                                                          $name$?: string;

                                                                                                                                            property $tag$

                                                                                                                                            $tag$: string | number | Function;

                                                                                                                                              property $text$

                                                                                                                                              $text$: string;

                                                                                                                                                interface VNodeData

                                                                                                                                                interface VNodeData {}

                                                                                                                                                  property class

                                                                                                                                                  class?: {
                                                                                                                                                  [className: string]: boolean;
                                                                                                                                                  };

                                                                                                                                                    property style

                                                                                                                                                    style?: any;

                                                                                                                                                      index signature

                                                                                                                                                      [attrName: string]: any;

                                                                                                                                                        Type Aliases

                                                                                                                                                        type ListenTargetOptions

                                                                                                                                                        type ListenTargetOptions = 'body' | 'document' | 'window';

                                                                                                                                                          Namespaces

                                                                                                                                                          namespace *?format=text

                                                                                                                                                          module '*?format=text' {}

                                                                                                                                                            variable content

                                                                                                                                                            const content: string;

                                                                                                                                                              namespace *?format=url

                                                                                                                                                              module '*?format=url' {}

                                                                                                                                                                variable src

                                                                                                                                                                const src: string;

                                                                                                                                                                  namespace *?worker

                                                                                                                                                                  module '*?worker' {}

                                                                                                                                                                    variable worker

                                                                                                                                                                    const worker: Worker;

                                                                                                                                                                      variable workerMsgId

                                                                                                                                                                      const workerMsgId: string;

                                                                                                                                                                        variable workerName

                                                                                                                                                                        const workerName: string;

                                                                                                                                                                          variable workerPath

                                                                                                                                                                          const workerPath: string;

                                                                                                                                                                            namespace *.css

                                                                                                                                                                            module '*.css' {}

                                                                                                                                                                              variable src

                                                                                                                                                                              const src: string;

                                                                                                                                                                                namespace *.frag

                                                                                                                                                                                module '*.frag' {}

                                                                                                                                                                                  variable src

                                                                                                                                                                                  const src: string;

                                                                                                                                                                                    namespace *.svg

                                                                                                                                                                                    module '*.svg' {}

                                                                                                                                                                                      variable src

                                                                                                                                                                                      const src: string;

                                                                                                                                                                                        namespace *.txt

                                                                                                                                                                                        module '*.txt' {}

                                                                                                                                                                                          variable src

                                                                                                                                                                                          const src: string;

                                                                                                                                                                                            namespace *.vert

                                                                                                                                                                                            module '*.vert' {}

                                                                                                                                                                                              variable src

                                                                                                                                                                                              const src: string;

                                                                                                                                                                                                namespace h

                                                                                                                                                                                                namespace h {}
                                                                                                                                                                                                • The "h" namespace is used to import JSX types for elements and attributes. It is imported in order to avoid conflicting global JSX issues.

                                                                                                                                                                                                function h

                                                                                                                                                                                                h: {
                                                                                                                                                                                                (sel: any): VNode;
                                                                                                                                                                                                (sel: Node, data: VNodeData): VNode;
                                                                                                                                                                                                (sel: any, data: VNodeData): VNode;
                                                                                                                                                                                                (sel: any, text: string): VNode;
                                                                                                                                                                                                (sel: any, children: VNode[]): VNode;
                                                                                                                                                                                                (sel: any, data: VNodeData, text: string): VNode;
                                                                                                                                                                                                (sel: any, data: VNodeData, children: VNode[]): VNode;
                                                                                                                                                                                                (sel: any, data: VNodeData, children: VNode): VNode;
                                                                                                                                                                                                };

                                                                                                                                                                                                  namespace h.JSX

                                                                                                                                                                                                  namespace h.JSX {}

                                                                                                                                                                                                    interface IntrinsicElements

                                                                                                                                                                                                    interface IntrinsicElements
                                                                                                                                                                                                    extends LocalJSX.IntrinsicElements,
                                                                                                                                                                                                    JSXBase.IntrinsicElements {}

                                                                                                                                                                                                      index signature

                                                                                                                                                                                                      [tagName: string]: any;

                                                                                                                                                                                                        namespace JSX

                                                                                                                                                                                                        namespace JSX {}

                                                                                                                                                                                                          interface Element

                                                                                                                                                                                                          interface Element {}

                                                                                                                                                                                                            interface IntrinsicElements

                                                                                                                                                                                                            interface IntrinsicElements {}

                                                                                                                                                                                                              Package Files (4)

                                                                                                                                                                                                              Dependencies (0)

                                                                                                                                                                                                              No dependencies.

                                                                                                                                                                                                              Dev Dependencies (67)

                                                                                                                                                                                                              Peer Dependencies (0)

                                                                                                                                                                                                              No peer dependencies.

                                                                                                                                                                                                              Badge

                                                                                                                                                                                                              To add a badge like this onejsDocs.io badgeto your package's README, use the codes available below.

                                                                                                                                                                                                              You may also use Shields.io to create a custom badge linking to https://www.jsdocs.io/package/@stencil/core.

                                                                                                                                                                                                              • Markdown
                                                                                                                                                                                                                [![jsDocs.io](https://img.shields.io/badge/jsDocs.io-reference-blue)](https://www.jsdocs.io/package/@stencil/core)
                                                                                                                                                                                                              • HTML
                                                                                                                                                                                                                <a href="https://www.jsdocs.io/package/@stencil/core"><img src="https://img.shields.io/badge/jsDocs.io-reference-blue" alt="jsDocs.io"></a>