@stencil/core

  • Version 3.0.0
  • Published
  • 17.4 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 synchronous and might perform the DOM render in the next frame.

    Parameter ref

    the node/element to force the re-render of

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.

    Parameter path

    the path to use in calculating the asset path. this value will be used in conjunction with the base asset path

    Returns

    the base path

function getElement

getElement: (ref: any) => HTMLStencilElement;
  • Retrieve a Stencil element for a given reference

    Parameter ref

    the ref to get the Stencil element for

    Returns

    a reference to the element

function getMode

getMode: <T = string>(ref: any) => T;
  • getMode() is used for libraries which provide multiple "modes" for styles.

    Parameter ref

    a reference to the node to get styles for

    Returns

    the current mode or undefined, if not found

function getRenderingRef

getRenderingRef: () => any;
  • getRenderingRef

    Returns

    the rendering ref

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

      Parameter task

      the DOM-read to schedule

    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 bundling, and where your assets can be loaded from. Additionally custom bundling will have to ensure the static assets are copied to its build directory.

      Parameter path

      the asset path to set

      Returns

      the set path

    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 setNonce

    setNonce: (nonce: string) => void;
    • Used to specify a nonce value that corresponds with an application's [Content Security Policy (CSP)](https://developer.mozilla.org/en-US/docs/Web/HTTP/CSP). When set, the nonce will be added to all dynamically created script and style tags at runtime. Alternatively, the nonce value can be set on a meta tag in the DOM head () and will result in the same behavior.

      Parameter nonce

      The value to be used for the nonce attribute.

    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

        Parameter task

        the DOM-write to schedule

      Interfaces

      interface ChildNode

      interface ChildNode {}
      • A Child VDOM node

        This has most of the same properties as VNode but friendlier names (i.e. vtag instead of $tag$, vchildren instead of $children$) in order to provide a friendlier public interface for users of the FunctionalUtilities).

      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.

                                                            Additionally, the globalStyle config 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 | null;
                                                          • 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 config 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 prefers 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 overridden.

                                                              property rollupPlugins

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

                                                                property sourceMap

                                                                sourceMap?: boolean;
                                                                • Generate js source map files for all bundles

                                                                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 unnecessary reflows in some cases, especially during startup. congestionAsync is ideal for apps running animations while also simultaneously executing intensive tasks which may lock-up the main thread.

                                                                        - immediate: Makes writeTask() and readTask() callbacks to be executed synchronously. 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 {}
                                                                                        • Utilities for working with functional Stencil components. An object conforming to this interface is passed by the Stencil runtime as the third argument to a functional component, allowing component authors to work with features like children.

                                                                                          The children of a functional component will be passed as the second argument, so a functional component which uses these utils to transform its children might look like the following:

                                                                                          export const AddClass: FunctionalComponent = (_, children, utils) => (
                                                                                          utils.map(children, child => ({
                                                                                          ...child,
                                                                                          vattrs: {
                                                                                          ...child.vattrs,
                                                                                          class: `${child.vattrs.class} add-class`
                                                                                          }
                                                                                          }))
                                                                                          );

                                                                                          For more see the Stencil documentation, here: https://stenciljs.com/docs/functional-components

                                                                                        property forEach

                                                                                        forEach: (
                                                                                        children: VNode[],
                                                                                        cb: (vnode: ChildNode, index: number, array: ChildNode[]) => void
                                                                                        ) => void;
                                                                                        • Utility for reading the children of a functional component at runtime. Since the Stencil runtime uses a different interface for children it is not recommendeded to read the children directly, and is preferable to use this utility to, for instance, perform a side effect for each child.

                                                                                        property map

                                                                                        map: (
                                                                                        children: VNode[],
                                                                                        cb: (vnode: ChildNode, index: number, array: ChildNode[]) => ChildNode
                                                                                        ) => VNode[];
                                                                                        • Utility for transforming the children of a functional component. Given an array of children and a callback this will return a list of the results of passing each child to the supplied callback.

                                                                                        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 {}
                                                                                                                      • A virtual DOM node

                                                                                                                      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 (68)

                                                                                                                                                                                                    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>