\n\n\n Computing diff...\n
\n )}\n/>\n```\n\nWhen `infiniteLoading` is enabled:\n- Only visible rows are rendered (virtualization)\n- Word-level diffs are computed on-demand as lines become visible\n- A loading element can be shown while the initial diff is computed\n\n### Use optimized diff methods for structured data\n\nFor JSON and YAML files, always use the dedicated diff methods:\n\n```javascript\n// For JSON files - up to 100x faster for large files\n![\"Eric](\"https://avatars.githubusercontent.com/u/10346191?v=4?s=100\") Eric M. 💻 | \n ![\"Andrei](\"https://avatars.githubusercontent.com/u/844495?v=4?s=100\") Andrei Kovalevsky 💻 | \n ![\"Chang](\"https://avatars.githubusercontent.com/u/59679962?v=4?s=100\") Chang Hyun Kim 💻 | \n
\n \n
\n );\n }\n}\n\nconst root = createRoot(document.getElementById('app')!);\nroot.render(\n
\n \n 
\n
\n \n A simple and beautiful text diff viewer made with{' '}\n \n Diff{' '}\n \n and{' '}\n \n React.{' '}\n \n Featuring split view, inline view, word diff, line highlight and\n more.\n
\n\n This documentation is for the `next` release branch, e.g. v4.x\n
\n\n \n \n \n
\n\n \n
\n \n \n Dark theme\n
\n \n \n Split pane\n
\n \n \n Syntax highlighting\n
\n \n \n Show Summary\n
\n \n \n Column Headers\n
\n \n \n Custom gutter\n
\n \n \n Line Numbers\n
\n \n \n Infinite Loading\n
\n \n \n Show Loading Text\n
\n \n \n Disable Worker\n
\n \n \n Data\n
\n \n \n Diff method\n
\n \n {\n return (\n \n
\n \n \n {diffData.type == 3\n ? 'CHG'\n : diffData.type == 2\n ? 'DEL'\n : diffData.type == 1\n ? 'ADD'\n : diffData.type\n ? '==='\n : undefined}\n \n \n );\n }\n : undefined\n }\n renderContent={\n this.state.enableSyntaxHighlighting\n ? this.syntaxHighlight\n : undefined\n }\n useDarkTheme={this.state.theme === 'dark'}\n hideSummary={this.state.hideSummary}\n summary={this.state.compareMethod === DiffMethod.JSON ? 'package.json' : 'webpack.config.js'}\n leftTitle={this.state.columnHeaders ? `master@2178133 - pushed 2 hours ago.` : undefined}\n rightTitle={this.state.columnHeaders ? `master@64207ee - pushed 13 hours ago.` : undefined}\n infiniteLoading={this.state.infiniteLoading ? {\n pageSize: 20,\n containerHeight: '70vh'\n } : undefined}\n disableWorker={this.state.disableWorker}\n loadingElement={this.state.loadingElement ? (() => (\n \n
\n )) : undefined}\n />\n \n Loading diff...\n
\n{lineNumber}\n \n )}\n {!this.props.splitView && !this.props.hideLineNumbers && (\n {additionalLineNumber}\n \n )}\n {this.props.renderGutter\n ? this.props.renderGutter({\n lineNumber: lineNumber ?? 0,\n type: type ?? DiffType.DEFAULT,\n prefix,\n value: value ?? \"\",\n additionalLineNumber: additionalLineNumber ?? undefined,\n additionalPrefix,\n styles: this.styles,\n })\n : null}\n \n {added && \"+\"}\n {removed && \"-\"}\n \n \n \n {showLoadingOverlay && (\n \n {(!this.props.hideSummary || leftTitle || rightTitle) && (\n M\n {/* Debug overlay */}\n {this.props.infiniteLoading && this.props.showDebugInfo && (\n \n
\n )}\n \n \n );\n };\n}\n\nexport default DiffViewer;\nexport { DiffMethod };\nexport { default as computeStyles } from \"./styles.js\";\nexport {\n defaultLightThemeVariables,\n defaultDarkThemeVariables,\n} from \"./styles.js\";\nexport type { ReactDiffViewerStylesOverride, ReactDiffViewerStyles, ReactDiffViewerStylesVariables };\n"
},
{
"path": "src/styles.ts",
"content": "import createEmotion from \"@emotion/css/create-instance\";\nimport type { Interpolation } from \"@emotion/react\";\n\nexport interface ReactDiffViewerStyles {\n diffContainer: string;\n diffRemoved: string;\n diffAdded: string;\n diffChanged: string;\n line: string;\n highlightedGutter: string;\n contentText: string;\n lineContent: string;\n gutter: string;\n highlightedLine: string;\n lineNumber: string;\n marker: string;\n wordDiff: string;\n wordAdded: string;\n wordRemoved: string;\n codeFoldGutter: string;\n codeFoldExpandButton: string;\n summary: string;\n codeFoldContentContainer: string;\n emptyGutter: string;\n emptyLine: string;\n codeFold: string;\n codeFoldContent: string;\n stickyHeader: string;\n columnHeaders: string;\n titleBlock: string;\n content: string;\n column: string;\n noSelect: string;\n noWrap: string;\n splitView: string;\n allExpandButton: string;\n block: string;\n blockAddition: string;\n blockDeletion: string;\n [key: string]: string;\n}\n\nexport interface ReactDiffViewerStylesVariables {\n diffViewerBackground?: string;\n diffViewerTitleBackground?: string;\n diffViewerColor?: string;\n diffViewerTitleColor?: string;\n diffViewerTitleBorderColor?: string;\n addedBackground?: string;\n addedColor?: string;\n removedBackground?: string;\n removedColor?: string;\n changedBackground?: string;\n wordAddedBackground?: string;\n wordRemovedBackground?: string;\n addedGutterBackground?: string;\n removedGutterBackground?: string;\n gutterBackground?: string;\n gutterBackgroundDark?: string;\n highlightBackground?: string;\n highlightGutterBackground?: string;\n codeFoldGutterBackground?: string;\n codeFoldBackground?: string;\n emptyLineBackground?: string;\n gutterColor?: string;\n addedGutterColor?: string;\n removedGutterColor?: string;\n codeFoldContentColor?: string;\n}\n\nexport interface ReactDiffViewerStylesOverride {\n variables?: {\n dark?: ReactDiffViewerStylesVariables;\n light?: ReactDiffViewerStylesVariables;\n };\n diffContainer?: Interpolation;\n diffRemoved?: Interpolation;\n diffAdded?: Interpolation;\n diffChanged?: Interpolation;\n marker?: Interpolation;\n emptyGutter?: Interpolation;\n highlightedLine?: Interpolation;\n lineNumber?: Interpolation;\n highlightedGutter?: Interpolation;\n contentText?: Interpolation;\n gutter?: Interpolation;\n lineContent?: Interpolation;\n line?: Interpolation;\n wordDiff?: Interpolation;\n wordAdded?: Interpolation;\n wordRemoved?: Interpolation;\n codeFoldGutter?: Interpolation;\n codeFoldExpandButton?: Interpolation;\n summary?: Interpolation;\n codeFoldContentContainer?: Interpolation;\n codeFold?: Interpolation;\n emptyLine?: Interpolation;\n content?: Interpolation;\n noSelect?: Interpolation;\n column?: Interpolation;\n titleBlock?: Interpolation;\n splitView?: Interpolation;\n allExpandButton?: Interpolation;\n}\n\nexport const defaultLightThemeVariables: Readonly<\n Required\n
\n )}\n \n {!this.props.hideSummary && (\n
\n )}\n {this.props.infiniteLoading ? (\n \n {\n this.setState(\n {\n expandedBlocks: allExpanded\n ? []\n : nodes.blocks.map((b) => b.index),\n },\n () => this.recalculateOffsets()\n );\n }}\n >\n {allExpanded ?
\n )}\n {(leftTitle || rightTitle) && (\n {blocks}
\n {this.props.summary ? {this.props.summary} : null}\n \n
\n )}\n \n {leftTitle ? (\n
\n {splitView && (\n {leftTitle}\n ) : null}\n \n {rightTitle ? (\n
\n )}\n {rightTitle}\n ) : null}\n \n
\n ) : (\n tableElement\n )}\n {/* Hidden element for measuring character width */}\n \n {tableElement}\n
\n Debug Info
\n scrollTop: {nodes.debug.scrollTop}
\n headerHeight: {nodes.debug.headerHeight}
\n contentScrollTop: {nodes.debug.contentScrollTop}
\n clientHeight: {nodes.debug.clientHeight}
\n \n
\n visibleRowStart: {nodes.debug.visibleRowStart}
\n visibleRowEnd: {nodes.debug.visibleRowEnd}
\n \n
\n totalRows: {nodes.debug.totalRows}
\n offsetsLength: {nodes.debug.offsetsLength}
\n renderedCount: {nodes.debug.renderedCount}
\n \n
\n topPadding: {nodes.topPadding.toFixed(0)}
\n bottomPadding: {nodes.bottomPadding.toFixed(0)}
\n totalContentHeight: {nodes.totalContentHeight.toFixed(0)}
\n \n
\n {this.state.cumulativeOffsets && (\n cumulativeOffsets: {this.state.cumulativeOffsets ? 'SET' : 'NULL'}
\n columnWidth: {this.state.contentColumnWidth?.toFixed(0) ?? 'N/A'}px
\n charWidth: {this.state.charWidth?.toFixed(2) ?? 'N/A'}px
\n charsPerRow: {this.state.contentColumnWidth && this.state.charWidth ? Math.floor(this.state.contentColumnWidth / this.state.charWidth) : 'N/A'}
\n \n
\n )}\n offsets[{nodes.debug.visibleRowEnd}]: {this.state.cumulativeOffsets[nodes.debug.visibleRowEnd]?.toFixed(0) ?? 'N/A'}
\n offsets[{nodes.debug.totalRows - 1}]: {this.state.cumulativeOffsets[nodes.debug.totalRows - 1]?.toFixed(0) ?? 'N/A'}
\n offsets[{nodes.debug.totalRows}]: {this.state.cumulativeOffsets[nodes.debug.totalRows]?.toFixed(0) ?? 'N/A'}
\n viewportEnd: {(nodes.debug.contentScrollTop + nodes.debug.clientHeight).toFixed(0)}
\n \n scrollHeight: {this.state.scrollableContainerRef.current?.scrollHeight ?? 'N/A'}\n
\n maxScrollTop: {(this.state.scrollableContainerRef.current?.scrollHeight ?? 0) - nodes.debug.clientHeight}
\n