@stream-mdx/react 0.3.0 → 0.5.0

package/dist/server.d.cts

@@ -0,0 +1,254 @@
+import { InlineNode, TokenLineV1, CompiledMdxModule, InlineHtmlDescriptor, FormatAnticipationConfig, CodeHighlightingMode, CodeHighlightOutputMode, Block, Patch, CoalescingMetrics } from '@stream-mdx/core';
+import React from 'react';
+
+type GenericComponent = React.ComponentType<any>;
+interface TableElements {
+    Table: GenericComponent;
+    Thead: GenericComponent;
+    Tbody: GenericComponent;
+    Tr: GenericComponent;
+    Th: GenericComponent;
+    Td: GenericComponent;
+}
+type HtmlElements = Record<string, GenericComponent>;
+type InlineHtmlRenderer = (descriptor: InlineHtmlDescriptor, context: {
+    key?: React.Key;
+    defaultRender: () => React.ReactElement | null;
+}) => React.ReactElement | null;
+type InlineHtmlRendererMap = Record<string, InlineHtmlRenderer>;
+interface BlockComponents {
+    paragraph: React.FC<{
+        inlines: InlineNode[];
+        raw?: string;
+        meta?: Record<string, unknown>;
+        children?: React.ReactNode;
+    }>;
+    heading: React.FC<{
+        level: 1 | 2 | 3 | 4 | 5 | 6;
+        inlines: InlineNode[];
+        text?: string;
+        meta?: Record<string, unknown>;
+    }>;
+    code: React.FC<{
+        html: string;
+        meta?: Record<string, unknown>;
+        lines?: ReadonlyArray<{
+            id: string;
+            index: number;
+            text: string;
+            html?: string | null;
+            tokens?: TokenLineV1 | null;
+        }>;
+        lang?: string;
+        preAttrs?: Record<string, string>;
+        codeAttrs?: Record<string, string>;
+    }>;
+    blockquote: React.FC<{
+        inlines: InlineNode[];
+        renderedContent?: React.ReactNode;
+    }>;
+    list: React.FC<{
+        ordered: boolean;
+        items: InlineNode[][];
+    }>;
+    html: React.FC<{
+        __trustedHtml: TrustedHTML | string;
+        elements?: Record<string, GenericComponent>;
+    }>;
+    mdx: React.FC<{
+        compiledRef?: {
+            id: string;
+        };
+        compiledModule?: CompiledMdxModule | null;
+        status?: "pending" | "compiled" | "error";
+        errorMessage?: string;
+        raw?: string;
+    }>;
+    hr: React.FC<React.HTMLAttributes<HTMLHRElement>>;
+    table: React.FC<{
+        header?: InlineNode[][];
+        rows: InlineNode[][][];
+        align?: Array<"left" | "center" | "right" | null>;
+        elements?: Partial<TableElements>;
+    }>;
+    [k: string]: GenericComponent;
+}
+type InlineComponents = Record<string, GenericComponent> & {
+    text: React.FC<{
+        text: string;
+    }>;
+    strong: React.FC<{
+        children: React.ReactNode;
+    }>;
+    em: React.FC<{
+        children: React.ReactNode;
+    }>;
+    strike?: React.FC<{
+        children: React.ReactNode;
+    }>;
+    code: React.FC<{
+        text: string;
+    }>;
+    link: React.FC<{
+        href?: string;
+        title?: string;
+        children: React.ReactNode;
+    }>;
+    image: React.FC<{
+        src: string;
+        alt?: string;
+        title?: string;
+    }>;
+    br: React.FC<Record<string, never>>;
+};
+interface RendererConfig {
+    themes?: {
+        light: string;
+        dark: string;
+    };
+    highlight?: {
+        browserEngine?: "js" | "wasm";
+        serverEngine?: "wasm";
+        langs?: string[];
+    };
+    sanitization?: {
+        schemaId?: string;
+    };
+    mdx?: {
+        enabled?: boolean;
+        compileEndpoint?: string;
+        compileStrategy?: "server" | "worker";
+        components?: Record<string, GenericComponent>;
+    };
+    plugins?: {
+        footnotes?: boolean;
+        html?: boolean;
+        mdx?: boolean;
+        tables?: boolean;
+        callouts?: boolean;
+        math?: boolean;
+        formatAnticipation?: FormatAnticipationConfig;
+        codeHighlighting?: CodeHighlightingMode;
+        outputMode?: CodeHighlightOutputMode;
+        liveCodeHighlighting?: boolean;
+        liveTokenization?: boolean;
+        emitHighlightTokens?: boolean;
+        emitDiffBlocks?: boolean;
+    };
+    performance?: {
+        frameBudgetMs?: number;
+        flushTimeoutMs?: number;
+        maxBatchesPerFlush?: number;
+        maxLowPriorityBatchesPerFlush?: number;
+        lowPriorityFrameBudgetMs?: number;
+        urgentQueueThreshold?: number;
+        batch?: "rAF" | "microtask" | "timeout";
+        historyLimit?: number;
+        startupMicrotaskFlushes?: number;
+        adaptiveBudgeting?: boolean;
+    };
+}
+
+/**
+ * Component registry that allows customization
+ */
+declare class ComponentRegistry {
+    private blockComponents;
+    private inlineComponents;
+    private htmlElements;
+    private tableElements;
+    private blockComponentMapCache;
+    private inlineComponentMapCache;
+    constructor(blockComponents?: Partial<BlockComponents>, inlineComponents?: Partial<InlineComponents>);
+    /**
+     * Update block components
+     */
+    setBlockComponents(components: Partial<BlockComponents>): void;
+    /**
+     * Update inline components
+     */
+    setInlineComponents(components: Partial<InlineComponents>): void;
+    /** Update HTML element mapping for html blocks */
+    setHtmlElements(map: Partial<HtmlElements>): void;
+    /** Update table element mapping for table blocks */
+    setTableElements(map: Partial<TableElements>): void;
+    /**
+     * Get block component
+     */
+    getBlockComponent(type: string): React.ComponentType<Record<string, unknown>>;
+    /**
+     * Get inline components
+     */
+    getInlineComponents(): InlineComponents;
+    getBlockComponentMap(): BlockComponents;
+    getInlineComponentMap(): InlineComponents;
+    getTableElements(): TableElements;
+    /**
+     * Render a block
+     */
+    renderBlock(block: Block): React.ReactElement;
+    /**
+     * Get props for a block based on its type
+     */
+    private getBlockProps;
+    /**
+     * Extract heading level from raw markdown
+     */
+    private extractHeadingLevel;
+}
+
+interface NodeRecord {
+    id: string;
+    type: string;
+    parentId: string | null;
+    children: string[];
+    props: Record<string, unknown>;
+    meta?: Record<string, unknown>;
+    range?: {
+        from: number;
+        to: number;
+    };
+    version: number;
+    blockEpoch: number;
+    block?: Block;
+}
+interface ApplyPatchesOptions {
+    coalesced?: boolean;
+    metrics?: CoalescingMetrics | null;
+    captureMetrics?: boolean;
+    allowEmpty?: boolean;
+}
+interface RendererStore {
+    reset(blocks: Block[]): void;
+    applyPatches(patches: Patch[], options?: ApplyPatchesOptions): Set<string>;
+    getBlocks(): ReadonlyArray<Block>;
+    getVersion(): number;
+    getNode(id: string): NodeRecord | undefined;
+    getNodeWithVersion(id: string): {
+        version: number;
+        node?: NodeRecord;
+    };
+    getChildren(id: string): ReadonlyArray<string>;
+    getChildrenWithVersion(id: string): {
+        version: number;
+        children: ReadonlyArray<string>;
+    };
+    getInvariantViolations(): string[];
+    getDebugCounters(): Readonly<Record<string, number>>;
+    subscribe(listener: () => void): () => void;
+    getLastCoalescingMetrics(): CoalescingMetrics | null;
+}
+declare function createRendererStore(initialBlocks?: Block[]): RendererStore;
+
+/**
+ * React component for rendering markdown blocks
+ */
+declare const MarkdownBlocksRenderer: React.NamedExoticComponent<{
+    blocks: ReadonlyArray<Block>;
+    componentRegistry: ComponentRegistry;
+    className?: string;
+    style?: React.CSSProperties;
+    store?: ReturnType<typeof createRendererStore>;
+}>;
+
+export { type BlockComponents, ComponentRegistry, type HtmlElements, type InlineComponents, type InlineHtmlRenderer, type InlineHtmlRendererMap, MarkdownBlocksRenderer, type RendererConfig, type TableElements, createRendererStore };

package/dist/server.d.ts

@@ -0,0 +1,254 @@
+import { InlineNode, TokenLineV1, CompiledMdxModule, InlineHtmlDescriptor, FormatAnticipationConfig, CodeHighlightingMode, CodeHighlightOutputMode, Block, Patch, CoalescingMetrics } from '@stream-mdx/core';
+import React from 'react';
+
+type GenericComponent = React.ComponentType<any>;
+interface TableElements {
+    Table: GenericComponent;
+    Thead: GenericComponent;
+    Tbody: GenericComponent;
+    Tr: GenericComponent;
+    Th: GenericComponent;
+    Td: GenericComponent;
+}
+type HtmlElements = Record<string, GenericComponent>;
+type InlineHtmlRenderer = (descriptor: InlineHtmlDescriptor, context: {
+    key?: React.Key;
+    defaultRender: () => React.ReactElement | null;
+}) => React.ReactElement | null;
+type InlineHtmlRendererMap = Record<string, InlineHtmlRenderer>;
+interface BlockComponents {
+    paragraph: React.FC<{
+        inlines: InlineNode[];
+        raw?: string;
+        meta?: Record<string, unknown>;
+        children?: React.ReactNode;
+    }>;
+    heading: React.FC<{
+        level: 1 | 2 | 3 | 4 | 5 | 6;
+        inlines: InlineNode[];
+        text?: string;
+        meta?: Record<string, unknown>;
+    }>;
+    code: React.FC<{
+        html: string;
+        meta?: Record<string, unknown>;
+        lines?: ReadonlyArray<{
+            id: string;
+            index: number;
+            text: string;
+            html?: string | null;
+            tokens?: TokenLineV1 | null;
+        }>;
+        lang?: string;
+        preAttrs?: Record<string, string>;
+        codeAttrs?: Record<string, string>;
+    }>;
+    blockquote: React.FC<{
+        inlines: InlineNode[];
+        renderedContent?: React.ReactNode;
+    }>;
+    list: React.FC<{
+        ordered: boolean;
+        items: InlineNode[][];
+    }>;
+    html: React.FC<{
+        __trustedHtml: TrustedHTML | string;
+        elements?: Record<string, GenericComponent>;
+    }>;
+    mdx: React.FC<{
+        compiledRef?: {
+            id: string;
+        };
+        compiledModule?: CompiledMdxModule | null;
+        status?: "pending" | "compiled" | "error";
+        errorMessage?: string;
+        raw?: string;
+    }>;
+    hr: React.FC<React.HTMLAttributes<HTMLHRElement>>;
+    table: React.FC<{
+        header?: InlineNode[][];
+        rows: InlineNode[][][];
+        align?: Array<"left" | "center" | "right" | null>;
+        elements?: Partial<TableElements>;
+    }>;
+    [k: string]: GenericComponent;
+}
+type InlineComponents = Record<string, GenericComponent> & {
+    text: React.FC<{
+        text: string;
+    }>;
+    strong: React.FC<{
+        children: React.ReactNode;
+    }>;
+    em: React.FC<{
+        children: React.ReactNode;
+    }>;
+    strike?: React.FC<{
+        children: React.ReactNode;
+    }>;
+    code: React.FC<{
+        text: string;
+    }>;
+    link: React.FC<{
+        href?: string;
+        title?: string;
+        children: React.ReactNode;
+    }>;
+    image: React.FC<{
+        src: string;
+        alt?: string;
+        title?: string;
+    }>;
+    br: React.FC<Record<string, never>>;
+};
+interface RendererConfig {
+    themes?: {
+        light: string;
+        dark: string;
+    };
+    highlight?: {
+        browserEngine?: "js" | "wasm";
+        serverEngine?: "wasm";
+        langs?: string[];
+    };
+    sanitization?: {
+        schemaId?: string;
+    };
+    mdx?: {
+        enabled?: boolean;
+        compileEndpoint?: string;
+        compileStrategy?: "server" | "worker";
+        components?: Record<string, GenericComponent>;
+    };
+    plugins?: {
+        footnotes?: boolean;
+        html?: boolean;
+        mdx?: boolean;
+        tables?: boolean;
+        callouts?: boolean;
+        math?: boolean;
+        formatAnticipation?: FormatAnticipationConfig;
+        codeHighlighting?: CodeHighlightingMode;
+        outputMode?: CodeHighlightOutputMode;
+        liveCodeHighlighting?: boolean;
+        liveTokenization?: boolean;
+        emitHighlightTokens?: boolean;
+        emitDiffBlocks?: boolean;
+    };
+    performance?: {
+        frameBudgetMs?: number;
+        flushTimeoutMs?: number;
+        maxBatchesPerFlush?: number;
+        maxLowPriorityBatchesPerFlush?: number;
+        lowPriorityFrameBudgetMs?: number;
+        urgentQueueThreshold?: number;
+        batch?: "rAF" | "microtask" | "timeout";
+        historyLimit?: number;
+        startupMicrotaskFlushes?: number;
+        adaptiveBudgeting?: boolean;
+    };
+}
+
+/**
+ * Component registry that allows customization
+ */
+declare class ComponentRegistry {
+    private blockComponents;
+    private inlineComponents;
+    private htmlElements;
+    private tableElements;
+    private blockComponentMapCache;
+    private inlineComponentMapCache;
+    constructor(blockComponents?: Partial<BlockComponents>, inlineComponents?: Partial<InlineComponents>);
+    /**
+     * Update block components
+     */
+    setBlockComponents(components: Partial<BlockComponents>): void;
+    /**
+     * Update inline components
+     */
+    setInlineComponents(components: Partial<InlineComponents>): void;
+    /** Update HTML element mapping for html blocks */
+    setHtmlElements(map: Partial<HtmlElements>): void;
+    /** Update table element mapping for table blocks */
+    setTableElements(map: Partial<TableElements>): void;
+    /**
+     * Get block component
+     */
+    getBlockComponent(type: string): React.ComponentType<Record<string, unknown>>;
+    /**
+     * Get inline components
+     */
+    getInlineComponents(): InlineComponents;
+    getBlockComponentMap(): BlockComponents;
+    getInlineComponentMap(): InlineComponents;
+    getTableElements(): TableElements;
+    /**
+     * Render a block
+     */
+    renderBlock(block: Block): React.ReactElement;
+    /**
+     * Get props for a block based on its type
+     */
+    private getBlockProps;
+    /**
+     * Extract heading level from raw markdown
+     */
+    private extractHeadingLevel;
+}
+
+interface NodeRecord {
+    id: string;
+    type: string;
+    parentId: string | null;
+    children: string[];
+    props: Record<string, unknown>;
+    meta?: Record<string, unknown>;
+    range?: {
+        from: number;
+        to: number;
+    };
+    version: number;
+    blockEpoch: number;
+    block?: Block;
+}
+interface ApplyPatchesOptions {
+    coalesced?: boolean;
+    metrics?: CoalescingMetrics | null;
+    captureMetrics?: boolean;
+    allowEmpty?: boolean;
+}
+interface RendererStore {
+    reset(blocks: Block[]): void;
+    applyPatches(patches: Patch[], options?: ApplyPatchesOptions): Set<string>;
+    getBlocks(): ReadonlyArray<Block>;
+    getVersion(): number;
+    getNode(id: string): NodeRecord | undefined;
+    getNodeWithVersion(id: string): {
+        version: number;
+        node?: NodeRecord;
+    };
+    getChildren(id: string): ReadonlyArray<string>;
+    getChildrenWithVersion(id: string): {
+        version: number;
+        children: ReadonlyArray<string>;
+    };
+    getInvariantViolations(): string[];
+    getDebugCounters(): Readonly<Record<string, number>>;
+    subscribe(listener: () => void): () => void;
+    getLastCoalescingMetrics(): CoalescingMetrics | null;
+}
+declare function createRendererStore(initialBlocks?: Block[]): RendererStore;
+
+/**
+ * React component for rendering markdown blocks
+ */
+declare const MarkdownBlocksRenderer: React.NamedExoticComponent<{
+    blocks: ReadonlyArray<Block>;
+    componentRegistry: ComponentRegistry;
+    className?: string;
+    style?: React.CSSProperties;
+    store?: ReturnType<typeof createRendererStore>;
+}>;
+
+export { type BlockComponents, ComponentRegistry, type HtmlElements, type InlineComponents, type InlineHtmlRenderer, type InlineHtmlRendererMap, MarkdownBlocksRenderer, type RendererConfig, type TableElements, createRendererStore };