markstream-react 0.0.56-beta.3 → 0.1.0-beta.2

package/dist/types/types/component-props.d.ts

@@ -1,28 +1,12 @@
 import { CSSProperties } from 'react';
 import { CodeBlockNode } from 'stream-markdown-parser';
-export interface CodeBlockMonacoThemeObject {
-    name: string;
-    base?: string;
-    inherit?: boolean;
-    colors?: Record<string, string>;
-    rules?: Array<Record<string, unknown>>;
-    [key: string]: unknown;
-}
-export type CodeBlockMonacoTheme = string | CodeBlockMonacoThemeObject;
-export type CodeBlockMonacoLanguage = string | ((...args: unknown[]) => unknown);
+export type CodeBlockTheme = string;
+export type CodeBlockThemes = readonly [dark: string, light: string];
 export interface CommonCodeBlockProps {
     showHeader?: boolean;
     showCopyButton?: boolean;
     showExpandButton?: boolean;
 }
-export interface ShikiCodeBlockProps extends CommonCodeBlockProps {
-    themes?: readonly string[];
-    /**
-     * Shiki language preload request forwarded to stream-markdown's registerHighlight().
-     * This is not a rendering allow-list; already available Shiki languages may still highlight.
-     */
-    langs?: readonly string[];
-}
 export interface CodeBlockDiffHideUnchangedRegionsOptions {
     enabled?: boolean;
     contextLineCount?: number;
@@ -30,67 +14,71 @@ export interface CodeBlockDiffHideUnchangedRegionsOptions {
     revealLineCount?: number;
 }
 export type CodeBlockDiffHideUnchangedRegions = boolean | CodeBlockDiffHideUnchangedRegionsOptions;
-export type CodeBlockDiffLineStyle = 'background' | 'bar';
-export type CodeBlockDiffAppearance = 'auto' | 'light' | 'dark';
-export type CodeBlockDiffUnchangedRegionStyle = 'line-info' | 'line-info-basic' | 'metadata' | 'simple';
-export type CodeBlockDiffHunkActionKind = 'revert' | 'stage';
-export type CodeBlockDiffHunkSide = 'upper' | 'lower';
-export interface CodeBlockDiffHunkActionContext {
-    action: CodeBlockDiffHunkActionKind;
-    side: CodeBlockDiffHunkSide;
-    lineChange: unknown;
-    originalModel: unknown;
-    modifiedModel: unknown;
-}
-export interface CodeBlockMonacoOptions {
-    MAX_HEIGHT?: number | string;
+export interface CodeBlockOptions {
     fontSize?: number;
     lineHeight?: number;
     fontFamily?: string;
+    maxHeight?: number;
+    padding?: number;
     tabSize?: number;
-    readOnly?: boolean;
-    wordWrap?: 'off' | 'on' | 'wordWrapColumn' | 'bounded' | string;
-    wrappingIndent?: 'none' | 'same' | 'indent' | 'deepIndent' | string;
-    theme?: string;
-    themes?: CodeBlockMonacoTheme[];
-    languages?: CodeBlockMonacoLanguage[];
-    renderSideBySide?: boolean;
-    useInlineViewWhenSpaceIsLimited?: boolean;
-    enableSplitViewResizing?: boolean;
-    ignoreTrimWhitespace?: boolean;
-    maxComputationTime?: number;
-    diffAlgorithm?: string;
-    renderIndicators?: boolean;
-    originalEditable?: boolean;
-    revealDebounceMs?: number;
-    revealStrategy?: 'bottom' | 'centerIfOutside' | 'center';
-    revealBatchOnIdleMs?: number;
-    updateThrottleMs?: number;
-    diffUpdateThrottleMs?: number;
-    diffAutoScroll?: boolean;
-    diffHideUnchangedRegions?: CodeBlockDiffHideUnchangedRegions;
-    diffLineStyle?: CodeBlockDiffLineStyle;
-    diffAppearance?: CodeBlockDiffAppearance;
-    diffUnchangedRegionStyle?: CodeBlockDiffUnchangedRegionStyle;
-    diffHunkActionsOnHover?: boolean;
-    diffHunkHoverHideDelayMs?: number;
-    onDiffHunkAction?: (context: CodeBlockDiffHunkActionContext) => void | boolean | Promise<void | boolean>;
-    scrollbar?: Record<string, unknown>;
-    [key: string]: unknown;
+    disableLineNumbers?: boolean;
+    overflow?: 'scroll' | 'wrap';
+    disableVirtualizationBuffers?: boolean;
+    preferredHighlighter?: 'shiki-js' | 'shiki-wasm';
+    useCSSClasses?: boolean;
+    useTokenTransformer?: boolean;
+    tokenizeMaxLineLength?: number;
+    tokenizeMaxLength?: number;
+    unsafeCSS?: string;
+    diffStyle?: 'unified' | 'split';
+    diffIndicators?: 'classic' | 'bars' | 'none';
+    disableBackground?: boolean;
+    hunkSeparators?: 'simple' | 'metadata' | 'line-info' | 'line-info-basic';
+    expandUnchanged?: boolean;
+    collapsedContextThreshold?: number;
+    lineDiffType?: 'word-alt' | 'word' | 'char' | 'none';
+    maxLineDiffLength?: number;
+    expansionLineCount?: number;
+    parseDiffOptions?: Record<string, unknown>;
+    lineHoverHighlight?: 'disabled' | 'both' | 'number' | 'line';
+    enableTokenInteractionsOnWhitespace?: boolean;
+    enableGutterUtility?: boolean;
+    enableLineSelection?: boolean;
+    controlledSelection?: boolean;
+    onGutterUtilityClick?: (...args: any[]) => unknown;
+    onLineClick?: (...args: any[]) => unknown;
+    onLineNumberClick?: (...args: any[]) => unknown;
+    onLineEnter?: (...args: any[]) => unknown;
+    onLineLeave?: (...args: any[]) => unknown;
+    onTokenClick?: (...args: any[]) => unknown;
+    onTokenEnter?: (...args: any[]) => unknown;
+    onTokenLeave?: (...args: any[]) => unknown;
+    onLineSelected?: (...args: any[]) => unknown;
+    onLineSelectionStart?: (...args: any[]) => unknown;
+    onLineSelectionChange?: (...args: any[]) => unknown;
+    onLineSelectionEnd?: (...args: any[]) => unknown;
+    getLineIndex?: (...args: any[]) => unknown;
+    renderAnnotation?: (...args: any[]) => unknown;
+    renderGutterUtility?: (...args: any[]) => unknown;
+    onPostRender?: (...args: any[]) => unknown;
+    mergeConflict?: boolean;
+    lineAnnotations?: unknown[];
+    onController?: (controller: any) => void;
+    workerManager?: unknown;
 }
 export interface CodeBlockNodeProps extends CommonCodeBlockProps {
     node: CodeBlockNode;
+    codeBlockOptions?: CodeBlockOptions;
     isDark?: boolean;
     loading?: boolean;
     stream?: boolean;
-    darkTheme?: CodeBlockMonacoTheme;
-    lightTheme?: CodeBlockMonacoTheme;
+    darkTheme?: CodeBlockTheme;
+    lightTheme?: CodeBlockTheme;
     isShowPreview?: boolean;
-    monacoOptions?: CodeBlockMonacoOptions;
     enableFontSizeControl?: boolean;
     minWidth?: string | number;
     maxWidth?: string | number;
-    themes?: CodeBlockMonacoTheme[];
+    themes?: CodeBlockThemes;
     showPreviewButton?: boolean;
     showCollapseButton?: boolean;
     showFontSizeButtons?: boolean;
@@ -144,7 +132,6 @@ export interface PreCodeNodeProps {
     style?: CSSProperties;
     showLineNumbers?: boolean;
     diffInline?: boolean;
-    monacoOptions?: CodeBlockMonacoOptions;
 }
 export interface MermaidBlockNodeProps {
     node: CodeBlockNode;

package/dist/types/types.d.ts

@@ -2,10 +2,11 @@ import { default as React, ComponentType } from 'react';
 import { BaseNode, HtmlPolicy, MarkdownIt, ParsedNode, ParseOptions } from 'stream-markdown-parser';
 import { CustomComponentMap, HtmlComponentDefinitions, HtmlComponentMap, StreamingComponentDefinitions, StreamingComponentMap } from './customComponents';
 import { SmoothMarkdownStreamOptions } from './hooks/useSmoothMarkdownStream';
-import { CodeBlockMonacoOptions, CodeBlockMonacoTheme, CodeBlockNodeProps, CodeBlockPreviewPayload, D2BlockNodeProps, InfographicBlockNodeProps, MermaidBlockNodeProps, ShikiCodeBlockProps } from './types/component-props';
-type NodeRendererCodeBlockThemes = CodeBlockNodeProps['themes'] | ShikiCodeBlockProps['themes'];
-export type NodeRendererCodeBlockProps = Partial<Omit<CodeBlockNodeProps, 'node' | 'themes'>> & Partial<Omit<ShikiCodeBlockProps, 'themes'>> & {
+import { CodeBlockNodeProps, CodeBlockOptions, CodeBlockPreviewPayload, CodeBlockTheme, CodeBlockThemes, D2BlockNodeProps, InfographicBlockNodeProps, MermaidBlockNodeProps } from './types/component-props';
+type NodeRendererCodeBlockThemes = CodeBlockNodeProps['themes'];
+export type NodeRendererCodeBlockProps = Partial<Omit<CodeBlockNodeProps, 'node' | 'themes' | 'codeBlockOptions'>> & {
     themes?: NodeRendererCodeBlockThemes;
+    codeBlockOptions?: never;
 } & Record<string, unknown>;
 export interface NodeRendererProps<TStreamingComponents extends Record<string, ComponentType<any>> = StreamingComponentMap, THtmlComponents extends Record<string, any> = HtmlComponentMap> {
     content?: string;
@@ -29,30 +30,19 @@ export interface NodeRendererProps<TStreamingComponents extends Record<string, C
     htmlPolicy?: HtmlPolicy;
     viewportPriority?: boolean;
     codeBlockStream?: boolean;
-    codeBlockDarkTheme?: CodeBlockMonacoTheme;
-    codeBlockLightTheme?: CodeBlockMonacoTheme;
-    codeBlockMonacoOptions?: CodeBlockMonacoOptions;
+    codeBlockDarkTheme?: CodeBlockTheme;
+    codeBlockLightTheme?: CodeBlockTheme;
     renderCodeBlocksAsPre?: boolean;
     codeBlockMinWidth?: string | number;
     codeBlockMaxWidth?: string | number;
+    codeBlockOptions?: CodeBlockOptions;
     codeBlockProps?: NodeRendererCodeBlockProps;
     mermaidProps?: Partial<Omit<MermaidBlockNodeProps, 'node' | 'loading' | 'isDark'>>;
     d2Props?: Partial<Omit<D2BlockNodeProps, 'node' | 'loading' | 'isDark'>>;
     infographicProps?: Partial<Omit<InfographicBlockNodeProps, 'node' | 'loading' | 'isDark'>>;
     showTooltips?: boolean;
-    /**
-     * Theme names or theme objects preloaded for Monaco-backed code blocks.
-     * When Shiki code blocks are used, only string theme names are forwarded to
-     * MarkdownCodeBlockNode / stream-markdown; theme objects are ignored.
-     */
-    themes?: CodeBlockMonacoTheme[];
-    /**
-     * Shiki language preload list forwarded to MarkdownCodeBlockNode.
-     *
-     * The default React code block renderer is Monaco-backed. This prop is used
-     * when a custom `code_block` or language renderer uses MarkdownCodeBlockNode.
-     */
-    langs?: readonly string[];
+    /** Dark/light theme names used by stream-diffs backed code blocks. */
+    themes?: CodeBlockThemes;
     isDark?: boolean;
     customId?: string;
     indexKey?: number | string;
@@ -100,6 +90,7 @@ export interface RenderContext {
     htmlComponents?: HtmlComponentMap;
     customHtmlTags?: readonly string[];
     htmlPolicy?: HtmlPolicy;
+    codeBlockOptions?: CodeBlockOptions;
     codeBlockProps?: NodeRendererCodeBlockProps;
     mermaidProps?: Partial<Omit<MermaidBlockNodeProps, 'node' | 'loading' | 'isDark'>>;
     d2Props?: Partial<Omit<D2BlockNodeProps, 'node' | 'loading' | 'isDark'>>;
@@ -108,13 +99,11 @@ export interface RenderContext {
     codeBlockStream?: boolean;
     renderCodeBlocksAsPre?: boolean;
     codeBlockThemes?: {
-        themes?: CodeBlockMonacoTheme[];
-        darkTheme?: CodeBlockMonacoTheme;
-        lightTheme?: CodeBlockMonacoTheme;
-        monacoOptions?: CodeBlockMonacoOptions;
+        themes?: CodeBlockThemes;
+        darkTheme?: CodeBlockTheme;
+        lightTheme?: CodeBlockTheme;
         minWidth?: string | number;
         maxWidth?: string | number;
-        langs?: readonly string[];
     };
     events: {
         onCopy?: (code: string) => void;

package/dist/types/utils/languageIcon.d.ts

@@ -1,7 +1,7 @@
 export type LanguageIconResolver = (lang: string) => string | undefined | null;
 export declare function setLanguageIconResolver(resolver?: LanguageIconResolver | null): void;
 export declare function normalizeLanguageIdentifier(lang?: string | null): string;
-export declare function resolveMonacoLanguageId(lang?: string | null): string;
+export declare function resolveLanguageId(lang?: string | null): string;
 export declare function preloadExtendedLanguageIcons(): Promise<void>;
 export declare function subscribeLanguageIconsRevision(listener: () => void): () => void;
 export declare function getLanguageIcon(lang: string): string;

package/package.json

@@ -1,8 +1,8 @@
 {
   "name": "markstream-react",
   "type": "module",
-  "version": "0.0.56-beta.3",
-  "description": "React/Next.js streaming Markdown renderer for AI chat, LLM token streams, SSE/WebSocket output, incomplete Markdown, long documents, Mermaid, KaTeX, Shiki, Monaco, and custom React components.",
+  "version": "0.1.0-beta.2",
+  "description": "React/Next.js streaming Markdown renderer for AI chat, LLM token streams, SSE/WebSocket output, incomplete Markdown, long documents, Mermaid, KaTeX, stream-diffs powered code blocks, and custom React components.",
   "author": "Simon He",
   "license": "MIT",
   "homepage": "https://markstream.simonhe.me/frameworks/react",
@@ -39,9 +39,7 @@
     "streaming-mermaid",
     "katex",
     "streaming-katex",
-    "shiki",
-    "monaco",
-    "monaco-editor",
+    "stream-diffs",
     "streaming-code-blocks",
     "large-documents",
     "safe-html",
@@ -88,9 +86,7 @@
     "mermaid": ">=11",
     "react": ">=18",
     "react-dom": ">=18",
-    "stream-diffs": ">=0.0.2",
-    "stream-markdown": ">=0.0.16",
-    "stream-monaco": ">=0.0.48"
+    "stream-diffs": ">=0.0.2"
   },
   "peerDependenciesMeta": {
     "@antv/infographic": {
@@ -107,19 +103,13 @@
     },
     "stream-diffs": {
       "optional": true
-    },
-    "stream-markdown": {
-      "optional": true
-    },
-    "stream-monaco": {
-      "optional": true
     }
   },
   "dependencies": {
     "@floating-ui/dom": "^1.8.0",
     "clsx": "^2.1.1",
-    "markstream-core": "1.0.3",
-    "stream-markdown-parser": "1.2.1"
+    "markstream-core": "1.1.0-beta.1",
+    "stream-markdown-parser": "1.2.5-beta.1"
   },
   "devDependencies": {
     "@types/react": "^18.3.31",
@@ -136,7 +126,7 @@
   },
   "scripts": {
     "dev": "vite dev",
-    "build": "pnpm --dir ../markstream-core build && vite build --mode npm && node ../../scripts/cleanup-style-entry.mjs && node ./scripts/finalize-tailwind-export.mjs && vite build -c vite.config.tailwind.ts --mode npm && node ./scripts/copy-tailwind-css.mjs && node ../../scripts/generate-px-css.mjs && pnpm run build:dts && node ./scripts/ensure-next-client-directive.mjs",
+    "build": "pnpm --dir ../markdown-parser build && pnpm --dir ../markstream-core build && vite build --mode npm && node ../../scripts/cleanup-style-entry.mjs && node ./scripts/finalize-tailwind-export.mjs && vite build -c vite.config.tailwind.ts --mode npm && node ./scripts/copy-tailwind-css.mjs && node ../../scripts/generate-px-css.mjs && pnpm run build:dts && node ./scripts/ensure-next-client-directive.mjs",
     "build:analyze": "ANALYZE=true pnpm build",
     "build:dts": "rollup -c ./scripts/rollup.dts.config.mjs && node ./scripts/clean-dts.cjs",
     "check:exports": "node ../../scripts/check-react-package-exports.mjs",
@@ -145,6 +135,6 @@
     "size:check": "node ../../scripts/check-package-size.mjs",
     "check:core-published": "node ../../scripts/check-core-published.mjs --package-json package.json --core-package-json ../markstream-core/package.json",
     "check:workspace-deps-published": "node ../../scripts/check-workspace-deps-published.mjs --package-json package.json",
-    "release": "pnpm run check:workspace-deps-published && bumpp --all --commit --no-tag --no-push --execute 'pnpm --workspace-root run docs:llms:generate' && pnpm publish --access public $(node ../../scripts/dist-tag.mjs) && node ../../scripts/tag-package.mjs --package-json package.json --push"
+    "release": "pnpm run check:workspace-deps-published && bumpp --all --commit --no-tag --no-push --execute 'pnpm --workspace-root run docs:llms:generate' && DIST_TAG=\"$(node ../../scripts/dist-tag.mjs)\" && pnpm publish --access public --tag \"${DIST_TAG}\" && node ../../scripts/tag-package.mjs --package-json package.json --push"
   }
 }