@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.
     *
     * This option is required unless `nativeTypesPath` is specified. When only generating
     * native type definitions for React 19+, this option can be omitted.
     */
    outDir?: string;
    /**
     * Path to generate a TypeScript declaration file (.d.ts) that provides type definitions
     * for using Stencil web components as native custom elements in React 19+.
     *
     * This can be either:
     * - A full file path ending in `.d.ts` (e.g., `'dist/types/my-types.d.ts'`) or
     * - A directory path (e.g., `'dist/types'`), which will generate `react-native-types.d.ts` in that directory
     *
     * **Important:** Your component library's `package.json` should include `@types/react` as an
     * optional peer dependency to ensure proper TypeScript module resolution:
     * ```json
     * {
     *   "peerDependencies": { "@types/react": ">=18" },
     *   "peerDependenciesMeta": { "@types/react": { "optional": true } }
     * }
     * ```
     *
     * Example usage in your React app:
     * ```tsx
     * // Import the generated types (side-effect import)
     * import 'my-library/react-native-types';
     *
     * // use your web components in jsx
     * ```
     */
    nativeTypesPath?: 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 (better for tree-shaking).
     * @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'];
    /**
     * Use `transformTag` to enable runtime tag name transformation for your components.
     * When enabled, the output target will import `transformTag` from your component library
     * and apply it when rendering components.
     *
     * You must export `transformTag` from the root entry of your component library:
     * ```ts
     * // src/index.ts
     * export { transformTag } from '@stencil/core';
     * ```
     *
     * @default false
     */
    transformTag?: boolean;
}
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, nativeTypesPath, esModules, stencilPackageName, excludeComponents, customElementsDir: customElementsDirOverride, hydrateModule, clientModule, excludeServerSideRenderingFor, serializeShadowRoot, transformTag, }: ReactOutputTargetOptions) => ReactOutputTarget;
export {};