@stencil/react-output-target/dist/index.d.ts

React output target for @stencil/core components.

import { OutputTargetCustom } from '@stencil/core/internal';
import { RenderToStringOptions } from './runtime/ssr.js';

export interface ReactOutputTargetOptions {
    /**
     * Specify the output directory or path where the generated React components will be saved.
     */
    outDir: string;
    /**
     * Specify the components that should be excluded from the React output target.
     */
    excludeComponents?: 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.
     */
    stencilPackageName?: 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.
     */
    customElementsDir?: 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.
     */
    hydrateModule?: string;
    /**
     * The name of the package that exports all React wrapped Stencil components for client side rendering.
     * This options is required when `hydrateModule` is set for server side rendering to work.
     */
    clientModule?: string;
    /**
     * Specify the components that should be excluded from server side rendering.
     */
    excludeServerSideRenderingFor?: string[];
    /**
     * If `true`, the output target will generate a separate ES module for each React component wrapper. Defaults to `false`.
     * @default false
     */
    esModules?: boolean;
    /**
     * 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`
     * @default 'declarative-shadow-dom'
     */
    serializeShadowRoot?: RenderToStringOptions['serializeShadowRoot'];
}
interface ReactOutputTarget extends OutputTargetCustom {
    __internal_getCustomElementsDir: () => string;
}
/**
 * Creates an output target for binding Stencil components to be used in a React context
 * @public
 * @param outputTarget the user-defined output target defined in a Stencil configuration file
 * @returns an output target that can be used by the Stencil compiler
 */
export declare const reactOutputTarget: ({ outDir, esModules, stencilPackageName, excludeComponents, customElementsDir: customElementsDirOverride, hydrateModule, clientModule, excludeServerSideRenderingFor, serializeShadowRoot, }: ReactOutputTargetOptions) => ReactOutputTarget;
export {};