Logo for jsDocs.io

@stencil/react-output-target

  • Version 1.1.0
  • Published
  • 202 kB
  • 4 dependencies
  • MIT license

Install

npm i @stencil/react-output-target
yarn add @stencil/react-output-target
pnpm add @stencil/react-output-target

Overview

React output target for @stencil/core components.

Index

Functions

Interfaces

Functions

function reactOutputTarget

reactOutputTarget: ({
    outDir,
    esModules,
    stencilPackageName,
    excludeComponents,
    customElementsDir: customElementsDirOverride,
    hydrateModule,
    excludeServerSideRenderingFor,
    serializeShadowRoot,
}: ReactOutputTargetOptions) => ReactOutputTarget;

  • Creates an output target for binding Stencil components to be used in a React context

    Parameter outputTarget

    the user-defined output target defined in a Stencil configuration file

    Returns

    an output target that can be used by the Stencil compiler

    Modifiers

    • @public

Interfaces

interface ReactOutputTargetOptions

interface ReactOutputTargetOptions {}

    property customElementsDir

    customElementsDir?: string;

    • The directory where the custom elements are saved.

      This value is automatically detected from the Stencil configuration file for the dist-custom-elements output target. If you are working in an environment that uses absolute paths, consider setting this value manually.

    property esModules

    esModules?: boolean;

    • If true, the output target will generate a separate ES module for each React component wrapper. Defaults to false. false

    property excludeComponents

    excludeComponents?: string[];

    • Specify the components that should be excluded from the React output target.

    property excludeServerSideRenderingFor

    excludeServerSideRenderingFor?: string[];

    • Specify the components that should be excluded from server side rendering.

    property hydrateModule

    hydrateModule?: string;

    • To enable server side rendering, provide the path to the hydrate module, e.g. my-component/hydrate. By default this value is undefined and server side rendering is disabled.

    property outDir

    outDir: string;

    • Specify the output directory or path where the generated React components will be saved.

    property serializeShadowRoot

    serializeShadowRoot?: RenderToStringOptions['serializeShadowRoot'];

    • Configure how Stencil serializes the components shadow root. - If set to declarative-shadow-dom the component will be rendered within a Declarative Shadow DOM. - If set to scoped Stencil will render the contents of the shadow root as a scoped: true component and the shadow DOM will be created during client-side hydration. - Alternatively you can mix and match the two by providing an object with declarative-shadow-dom and scoped keys, the value arrays containing the tag names of the components that should be rendered in that mode.

      Examples: - { 'declarative-shadow-dom': ['my-component-1', 'another-component'], default: 'scoped' } Render all components as scoped apart from my-component-1 and another-component - { 'scoped': ['an-option-component'], default: 'declarative-shadow-dom' } Render all components within declarative-shadow-dom apart from an-option-component - 'scoped' Render all components as scoped - false disables shadow root serialization

      *NOTE* true has been deprecated in favor of declarative-shadow-dom and scoped 'declarative-shadow-dom'

    property stencilPackageName

    stencilPackageName?: string;

    • The package name of the Stencil project.

      This value is automatically detected from the package.json file of the Stencil project. If the validation fails, you can manually assign the package name.

    Package Files (1)

    Dependencies (4)

    Dev Dependencies (9)

    Peer Dependencies (3)

    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/react-output-target.

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