@stencil/react-output-target/dist/runtime/ssr.d.ts

React output target for @stencil/core components.

import { EventName, ReactWebComponent } from '@lit/react';
import { default as React, ReactNode } from 'react';

type EventNames = Record<string, EventName | string>;
export type { ReactWebComponent, WebComponentProps } from '@lit/react';
export type SerializeShadowRootOptions = 'declarative-shadow-dom' | 'scoped' | {
    'declarative-shadow-dom'?: string[];
    scoped?: string[];
    default: 'declarative-shadow-dom' | 'scoped';
} | boolean;
/**
 * Type that emulates Next.js dynamic import functionality without importing Next.js types
 */
export type DynamicImport<T = any> = () => Promise<T>;
export type DynamicOptions = {
    loading?: () => ReactNode;
    ssr?: boolean;
    suspense?: boolean;
};
export type DynamicFunction = <T = any>(dynamicImport: DynamicImport<T>, options?: DynamicOptions) => React.ComponentType<any>;
/**
 * these types are defined by a Stencil hydrate app so we have to copy the minimal types here
 */
export interface RenderToStringOptions {
    fullDocument?: boolean;
    prettyHtml?: 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?: SerializeShadowRootOptions;
}
interface HydrateStyle {
    href: string | null;
    id: string;
    content: string;
}
type RenderToString = (html: string, options: RenderToStringOptions) => Promise<{
    html: string | null;
    styles: HydrateStyle[];
}>;
export type HydrateModule = {
    renderToString: RenderToString;
    serializeProperty: (value: any) => string;
};
interface CreateComponentForServerSideRenderingOptions<I extends HTMLElement = HTMLElement, E extends EventNames = {}> {
    clientModule: ReactWebComponent<I, E>;
    tagName: string;
    properties: Record<string, string>;
    renderToString: RenderToString;
    serializeProperty: (value: any) => string;
    serializeShadowRoot?: SerializeShadowRootOptions;
}
type CreateComponentForSSROptions<I extends HTMLElement, E extends EventNames = {}> = Omit<CreateComponentForServerSideRenderingOptions<I, E>, 'renderToString' | 'serializeProperty'> & {
    hydrateModule: Promise<HydrateModule>;
};
/**
 * Defines a custom element and creates a React component for server side rendering.
 * @public
 */
export declare const createComponent: <I extends HTMLElement, E extends EventNames = {}>(options: CreateComponentForSSROptions<I, E>) => ReactWebComponent<I, E>;