### Install and Run Local Development
Source: https://github.com/aeolun/react-diff-viewer-continued/blob/main/README.md
Use these commands to install dependencies, build the project, and start the development server for local development. Check package.json for additional build scripts.
```bash
pnpm install
pnpm build # or use yarn build:watch
pnpm start:examples
```
--------------------------------
### Install React Diff Viewer Continued
Source: https://github.com/aeolun/react-diff-viewer-continued/blob/main/README.md
Use yarn, npm, or pnpm to add the package to your project dependencies.
```bash
yarn add react-diff-viewer-continued
```
```bash
npm i react-diff-viewer-continued
```
```bash
pnpm add react-diff-viewer-continued
```
--------------------------------
### Load Prism JS and CSS for Syntax Highlighting
Source: https://github.com/aeolun/react-diff-viewer-continued/blob/main/README.md
To enable syntax highlighting, load the Prism JS and CSS files from a CDN. This setup is required before using the `renderContent` prop for custom syntax highlighting.
```html
// Load Prism CSS
```
```html
// Load Prism JS
```
--------------------------------
### Setup Stream with Flush Callback
Source: https://github.com/aeolun/react-diff-viewer-continued/blob/main/playwright-report/index.html
Pipes a stream through another TransformStream and attaches a flush callback. Used to capture final stream state or signatures.
```javascript
function u0(l,s,r){s=Lt(s,new TransformStream({flush:r})),Object.defineProperty(l,"readable",{get(){return s}})}
```
--------------------------------
### Implement Custom Syntax Highlighting with Prism JS
Source: https://github.com/aeolun/react-diff-viewer-continued/blob/main/README.md
Use the `renderContent` prop with a custom highlighting function to integrate syntax highlighting. This example uses Prism JS to highlight JavaScript code within the diff view.
```javascript
import React, { PureComponent } from 'react';
import ReactDiffViewer from 'react-diff-viewer-continued';
const oldCode = "
const a = 10
const b = 10
const c = () => console.log('foo')
if(a > 10) {
console.log('bar')
}
console.log('done')
";
const newCode = "
const a = 10
const boo = 10
if(a === 10) {
console.log('bar')
}
";
class Diff extends PureComponent {
highlightSyntax = (str) => (
);
render = () => {
return (
);
};
}
```
--------------------------------
### linesOffset
Source: https://github.com/aeolun/react-diff-viewer-continued/blob/main/README.md
Sets the starting number for code line counts. Defaults to 0.
```APIDOC
## Prop: linesOffset
### Description
Number to start count code lines from.
### Type
`number`
### Default
`0`
```
--------------------------------
### Initialize Crypto State
Source: https://github.com/aeolun/react-diff-viewer-continued/blob/main/playwright-report/index.html
Initializes the cryptographic state, including keys and CRC calculators. This is called during the stream's start.
```javascript
function l0(l,s){const r=\[305419896,591751049,878082192\];Object.assign(l,{keys:r,crcKey0:new Gl(r\[0\]),crcKey2:new Gl(r\[2\])});for(let a=0;a console.log('foo')
if(a > 10) {
console.log('bar')
}
console.log('done')
`;
const newCode = `
const a = 10
const boo = 10
if(a === 10) {
console.log('bar')
}
`;
class Diff extends PureComponent {
highlightSyntax = (str) => (
);
render = () => {
const newStyles = {
variables: {
dark: {
highlightBackground: '#fefed5',
highlightGutterBackground: '#ffcd3c',
},
},
line: {
padding: '10px 2px',
'&:hover': {
background: '#a26ea1',
},
},
};
return (
);
};
}
```
--------------------------------
### kd Function for Handling HEAD Requests
Source: https://github.com/aeolun/react-diff-viewer-continued/blob/main/playwright-report/index.html
Handles HEAD requests to determine resource size, falling back to a GET request if necessary or if HEAD is prevented.
```javascript
async function kd(l,s,r){
if(l.preventHeadRequest)await r(l,l.options);
else{
const c=(await s(Q2,l,Oa(l))).headers.get(M2);
c?l.size=Number(c):await r(l,l.options)}}
```
--------------------------------
### Reading Uint8Array from Multi-Disk Source
Source: https://github.com/aeolun/react-diff-viewer-continued/blob/main/playwright-report/index.html
Reads a specified number of bytes from a multi-disk source, handling data that might span across different disks. Supports specifying a starting disk.
```javascript
async readUint8Array(s,r,a=0){const c=this,{readers:f}=this;let d,m=a;m==-1&&(m=f.length-1);let g=s;for(;g>=f[m].size;)g-=f[m].size,m++;const A=f[m],E=A.size;if(g+r<=E)d=await ze(A,g,r);else{const k=E-g;d=new Uint8Array(r),d.set(await ze(A,g,k)),d.set(await c.readUint8Array(s+k,r-k,a),k)}return c.lastDiskNumber=Math.max(m,c.lastDiskNumber),d}}
```
--------------------------------
### Get Current Cipher Byte
Source: https://github.com/aeolun/react-diff-viewer-continued/blob/main/playwright-report/index.html
Calculates and returns the current byte to be used for XORing in the cipher.
```javascript
function s0(l){const s=l.keys\[2\]|2;return o0(Math.imul(s,s^1)>>>8)}
```
--------------------------------
### Multi-Disk Reader Initialization
Source: https://github.com/aeolun/react-diff-viewer-continued/blob/main/playwright-report/index.html
Initializes a reader that can access data across multiple disks. It calculates the total size and sets up individual disk readers.
```javascript
class Da extends Pn{constructor(s){super(),this.readers=s}async init(){const s=this,{readers:r}=s;s.lastDiskNumber=0,s.lastDiskOffset=0,await Promise.all(r.map(async(a,c)=>{await a.init(),c!=r.length-1&&(s.lastDiskOffset+=a.size),s.size+=a.size})),super.init()}}
```
--------------------------------
### Basic Word Diff with Split View
Source: https://github.com/aeolun/react-diff-viewer-continued/blob/main/README.md
Demonstrates using the WORDS comparison method for code or text files. Requires importing ReactDiffViewer and DiffMethod. Ensure splitView is set to true for side-by-side comparison.
```javascript
import React, { PureComponent } from 'react';
import ReactDiffViewer, { DiffMethod } from 'react-diff-viewer-continued';
const oldCode = `
const a = 10
const b = 10
`;
const newCode = `
const a = 10
const boo = 10
`;
class Diff extends PureComponent {
render = () => {
return (
);
};
}
```
--------------------------------
### A0 Function for Creating Range Header Value
Source: https://github.com/aeolun/react-diff-viewer-continued/blob/main/playwright-report/index.html
Constructs the value for the 'Range' HTTP header based on start and end byte positions.
```javascript
function A0(l,s=0,r=1){
return Object.assign({},Oa(l),{
[L2]:g0+"="+(s<0?s:s+"-"+(s+r-1))})}
```
--------------------------------
### Enable Virtualization for Large Diffs
Source: https://github.com/aeolun/react-diff-viewer-continued/blob/main/README.md
Use the `infiniteLoading` prop to enable virtualization for large files, rendering only visible rows and computing word-level diffs on demand. Configure `pageSize`, `containerHeight`, and `overscan` for optimal performance. A `loadingElement` can be provided to display while the diff is computed.
```javascript
(
Computing diff...
)}
/>
```
--------------------------------
### x0 Function for Initializing Request Headers
Source: https://github.com/aeolun/react-diff-viewer-continued/blob/main/playwright-report/index.html
Asynchronously initializes request headers, potentially fetching size information or EOCD cache based on options.
```javascript
async function x0(l,s,r){
const{url:a,preventHeadRequest:c,useRangeHeader:f,forceRangeRequests:d,combineSizeEocd:m}=l;
if(J2(a)&&(f||d)&&(typeof c>"u"||c)){
const g=await s(Ra,l,A0(l,m?-22:void 0));
if(!d&&g.headers.get(H2)!=g0)throw new Error(Ri);
{
m&&(l.eocdCache=new Uint8Array(await g.arrayBuffer()));
let A;
const E=g.headers.get(B2);
if(E){
const k=E.trim().split(/\s*\/\s*/);
if(k.length){const I=k[1];I&&I!="*"&&(A=Number(I))}}
A===qe?await kd(l,s,r):l.size=A}}
else await kd(l,s,r)}
```
--------------------------------
### Parse and Linkify Text
Source: https://github.com/aeolun/react-diff-viewer-continued/blob/main/playwright-report/index.html
Parses a string to identify and wrap URLs in anchor tags. Handles URLs starting with 'www.' by prepending 'https://'.
```javascript
function Ci(l){
const s=[]
let r=0,
a
for(;(a=zm.exec(l))!==null){
const f=l.substring(r,a.index);
f&&s.push(f)
const d=a[0]
s.push(Gm(d))
r=a.index+d.length
}
const c=l.substring(r)
c&&s.push(c)
return s
}
function Gm(l){
let s=l
s.startsWith("www.")&&(s="https://"+s)
return h.jsx("a",{href:s,target:"_blank",rel:"noopener noreferrer",children:l})
}
```
--------------------------------
### Configuration Management for Compression Streams
Source: https://github.com/aeolun/react-diff-viewer-continued/blob/main/playwright-report/index.html
Allows updating the global configuration for compression streams. It validates input parameters and merges them with the existing configuration.
```javascript
function Gd(l){const{baseURL:s,chunkSize:r,maxWorkers:a,terminateWorkerTimeout:c,useCompressionStream:f,useWebWorkers:d,Deflate:m,Inflate:g,CompressionStream:A,DecompressionStream:E,workerScripts:k}=l;if(An("baseURL",s),An("chunkSize",r),An("maxWorkers",a),An("terminateWorkerTimeout",c),An("useCompressionStream",f),An("useWebWorkers",d),m&&(kn.CompressionStream=new fd(m)),g&&(kn.DecompressionStream=new fd(g)),An("CompressionStream",A),An("DecompressionStream",E),k!==qe){const{deflate:I,inflate:T}=k;if((I||T)&&(kn.workerScripts||(kn.workerScripts={})),I){if(!Array.isArray(I))throw new Error("workerScripts.deflate must be an array");kn.workerScripts.deflate=I}if(T){if(!Array.isArray(T))throw new Error("workerScripts.inflate must be an array");kn.workerScripts.inflate=T}}}function An(l,s){s!==qe&&(kn[l]=s)}
```
--------------------------------
### URL Regular Expression
Source: https://github.com/aeolun/react-diff-viewer-continued/blob/main/playwright-report/index.html
Defines a regular expression for matching URLs, including those starting with 'www.' or common protocols. It excludes certain whitespace and control characters.
```javascript
const Ld="\\u0000-\\u0020\\u007f-\\u009f",zm=new RegExp("(?:\[a-zA-Z\]\[a-zA-Z0-9+.-\]{2,}:\\/\\/|www\\.)\[^\\s"
+Ld+'"']{2,}\[^\\s"
+Ld+\`')}\\\\],:;.!?\]`,"ug")
```
--------------------------------
### y0 Function for Initializing Request Options
Source: https://github.com/aeolun/react-diff-viewer-continued/blob/main/playwright-report/index.html
A helper function to initialize request options, including URL and various flags for controlling request behavior.
```javascript
function y0(l,s,r){
const{preventHeadRequest:a,useRangeHeader:c,forceRangeRequests:f,combineSizeEocd:d}=r;
r=Object.assign({},r),
delete r.preventHeadRequest,
delete r.useRangeHeader,
delete r.forceRangeRequests,
delete r.combineSizeEocd,
delete r.useXHR,
Object.assign(l,{url:s,options:r,preventHeadRequest:a,useRangeHeader:c,forceRangeRequests:f,combineSizeEocd:d})}
```
--------------------------------
### codeFoldMessageRenderer
Source: https://github.com/aeolun/react-diff-viewer-continued/blob/main/README.md
Render Prop API to render code fold message. It receives total folded lines and start line numbers for left and right panes.
```APIDOC
## codeFoldMessageRenderer
### Description
Render Prop API to render code fold message. `(totalFoldedLines: number, leftStartLineNumber: number, rightStartLineNumber: number) => ReactElement`
### Type
`function`
### Default
`undefined`
```
--------------------------------
### Inflate Initialization and Management
Source: https://github.com/aeolun/react-diff-viewer-continued/blob/main/playwright-report/index.html
Provides methods for initializing, inflating, ending, and synchronizing data using the inflate process. Manages the inflate state internally.
```javascript
function Yd(){}Yd.prototype={inflateInit(l){const s=this;return s.istate=new k1,l||(l=o1),s.istate.inflateInit(s,l)},inflate(l){const s=this;return s.istate?s.istate.inflate(s,l):at},inflateEnd(){const l=this;if(!l.istate)return at;const s=l.istate.inflateEnd(l);return l.istate=null,s},inflateSync(){const l=this;return l.istate?l.istate.inflateSync(l):at},inflateSetDictionary(l,s){const r=this;return r.istate?r.istate.inflateSetDictionary(r,l,s):at},read_byte(l){return this.next_in[l]},read_buf(l,s){return this.next_in.subarray(l,l+s)}}
```
--------------------------------
### Zip File Entry Object Constructor
Source: https://github.com/aeolun/react-diff-viewer-continued/blob/main/playwright-report/index.html
Constructor for a Zip file entry object, initializing properties from a provided data object based on a predefined list of field names.
```javascript
class Id{constructor(s){mm.forEach(r=>this[r]=s[r])}}
```
--------------------------------
### Local Storage Utility Class
Source: https://github.com/aeolun/react-diff-viewer-continued/blob/main/playwright-report/index.html
Provides a class for interacting with `localStorage`, including methods to get/set strings and objects, with event emission on changes. Includes a fallback for `window.saveSettings`.
```javascript
class Ym{
constructor(){
this.onChangeEmitter=new EventTarget
}
getString(s,r){
return localStorage[s]||r
}
setString(s,r){
var a;
localStorage[s]=r,
this.onChangeEmitter.dispatchEvent(new Event(s)),
(a=window.saveSettings)==null||a.call(window)
}
getObject(s,r){
if(!localStorage[s])return r;
try{
return JSON.parse(localStorage[s])
}
catch{
return r
}
}
setObject(s,r){
var a;
localStorage[s]=JSON.stringify(r),
this.onChangeEmitter.dispatchEvent(new Event(s)),
(a=window.saveSettings)==null||a.call(window)
}
}
new Ym
```
--------------------------------
### Zip File Reader Initialization
Source: https://github.com/aeolun/react-diff-viewer-continued/blob/main/playwright-report/index.html
Initializes a Zip file reader with a given source and options. It sets up configuration and prepares for reading entries.
```javascript
class b0{constructor(s,r={}){Object.assign(this,{reader:C0(s),options:r,config:Xd()})}}
```
--------------------------------
### Z2 Class for Initializing and Writing Data
Source: https://github.com/aeolun/react-diff-viewer-continued/blob/main/playwright-report/index.html
Initializes a data buffer and provides a method to write Uint8Array data into it, managing an offset.
```javascript
class Z2 extends ja{
init(s=0){
Object.assign(this,{offset:0,array:new Uint8Array(s)}),
super.init()}
writeUint8Array(s){
const r=this}}
```
--------------------------------
### Compare YAML Strings with DiffMethod.YAML
Source: https://github.com/aeolun/react-diff-viewer-continued/blob/main/README.md
Demonstrates how to compare YAML strings using `DiffMethod.YAML`. Pass the YAML strings directly to `oldValue` and `newValue` props.
```javascript
// For YAML - pass as strings
const oldYaml = "
name: Original
items:
- 1
- 2
";
const newYaml = "
name: Updated
items:
- 1
- 2
- 3
";
function YamlDiff() {
return (
);
}
```
--------------------------------
### infiniteLoading
Source: https://github.com/aeolun/react-diff-viewer-continued/blob/main/README.md
Enables virtualization for large diffs, rendering only visible rows. Requires `pageSize` and `containerHeight`. Optionally accepts `overscan` for extra rows. Defaults to undefined.
```APIDOC
## Prop: infiniteLoading
### Description
Enable virtualization for large diffs. When enabled, only visible rows are rendered. `containerHeight` sets the scrollable container height (e.g., `'500px'` or `'80vh'`). `overscan` controls how many extra rows to render above and below the viewport (default `20`).
### Type
`{ pageSize: number, containerHeight: string, overscan?: number }`
### Default
`undefined`
```
--------------------------------
### Asynchronous Initialization Helper
Source: https://github.com/aeolun/react-diff-viewer-continued/blob/main/playwright-report/index.html
Ensures that an object with an `init` method is initialized asynchronously if it hasn't been already. Handles cases where `init` might not exist.
```javascript
async function Ei(l,s){if(l.init&&!l.initialized)await l.init(s);else return Promise.resolve()}
```
--------------------------------
### Use Optimized Diff Methods for JSON and YAML
Source: https://github.com/aeolun/react-diff-viewer-continued/blob/main/README.md
For JSON and YAML files, use the `DiffMethod.JSON` or `DiffMethod.YAML` compare methods for significantly faster and more accurate comparisons. These methods parse the data structure and perform structural comparisons before falling back to text diffing.
```javascript
// For JSON files - up to 100x faster for large files
```
```javascript
// For YAML files
```
--------------------------------
### Default Configuration for Compression Utilities
Source: https://github.com/aeolun/react-diff-viewer-continued/blob/main/playwright-report/index.html
Defines the default configuration settings for compression utilities, including chunk size, maximum workers, and timeouts. These can be overridden.
```javascript
const Y1={chunkSize:512*1024,maxWorkers:zd,terminateWorkerTimeout:5e3,useWebWorkers:!0,useCompressionStream:!0,workerScripts:qe,CompressionStreamNative:typeof CompressionStream!=Tn&&CompressionStream,DecompressionStreamNative:typeof DecompressionStream!=Tn&&DecompressionStream},kn=Object.assign({},Y1);
```
--------------------------------
### Compare JSON Objects with DiffMethod.JSON
Source: https://github.com/aeolun/react-diff-viewer-continued/blob/main/README.md
Demonstrates how to compare JSON objects using `DiffMethod.JSON`. Pass the JSON objects directly to `oldValue` and `newValue` props.
```javascript
import React from 'react';
import ReactDiffViewer, { DiffMethod } from 'react-diff-viewer-continued';
// For JSON - can pass objects directly
const oldJson = { name: "Original", items: [1, 2, 3] };
const newJson = { name: "Updated", items: [1, 2, 3, 4] };
function JsonDiff() {
return (
);
}
```
--------------------------------
### React Hooks for Legacy Rendering
Source: https://github.com/aeolun/react-diff-viewer-continued/blob/main/playwright-report/index.html
Provides the implementation of React hooks for legacy rendering paths.
```javascript
var Rh={readContext:gt,useCallback:Pc,useContext:gt,useEffect:po,useImperativeHandle:jc,useInsertionEffect:Ic,useLayoutEffect:Rc,useMemo:Oc,useReducer:co,useRef:Cc,useState:function(){return co(oi)},useDebugValue:ho,useDeferredValue:function(e){var t=vt();return Dc(t,He.memoizedState,e)},useTransition:function(){var e=co(oi)[0],t=vt().memoizedState;return[e,t]},useMutableSource:gc,useSyncExternalStore:vc,useId:Nc,unstable_isNewReconciler:!1}
```
--------------------------------
### Stack Trace Formatting Utility
Source: https://github.com/aeolun/react-diff-viewer-continued/blob/main/playwright-report/index.html
Provides a utility function to format stack traces, potentially for debugging purposes. It attempts to capture and prepend a consistent prefix to stack trace lines.
```javascript
var W=Object.assign,R;function L(e){if(R===void 0)try{throw Error()}catch(n){var t=n.stack.trim().match(/\n( \*(at )?)/);R=t&&t[1]||""}return`
`+R+e}var $=!1;function pe(e,t){if(!e||$)return"";$=!0;var n=Error.prepareStackTrace;Error.prepareStackTrace=void 0;try{if(t)if(t=function(){throw Error()},Object.defineProperty(t.prototype,"props",{set:function(){throw Error()}}),typeof Reflect=="object"&&Re
```
--------------------------------
### Basic Usage of React Diff Viewer
Source: https://github.com/aeolun/react-diff-viewer-continued/blob/main/README.md
Import and render the ReactDiffViewer component with old and new code values. Set splitView to true for a side-by-side comparison.
```javascript
import React, { PureComponent } from 'react';
import ReactDiffViewer from 'react-diff-viewer-continued';
const oldCode = `
const a = 10
const b = 10
const c = () => console.log('foo')
if(a > 10) {
console.log('bar')
}
console.log('done')
`;
const newCode = `
const a = 10
const boo = 10
if(a === 10) {
console.log('bar')
}
`;
class Diff extends PureComponent {
render = () => {
return (
);
};
}
```
--------------------------------
### useMemo Hook Implementation
Source: https://github.com/aeolun/react-diff-viewer-continued/blob/main/playwright-report/index.html
Implements the useMemo hook for memoizing expensive calculations.
```javascript
function Oc(e,t){var n=vt();t=t===void 0?null:t;var i=n.memoizedState;return i!==null&&t!==null&&oo(t,i[1])?i[0]:(e=e(),n.memoizedState=[e,t],e)}
```
--------------------------------
### useId Hook Implementation
Source: https://github.com/aeolun/react-diff-viewer-continued/blob/main/playwright-report/index.html
Generates unique IDs for components, useful for accessibility.
```javascript
function Nc(){return vt().memoizedState}
```
--------------------------------
### Cryptographic Key Derivation and Initialization
Source: https://github.com/aeolun/react-diff-viewer-continued/blob/main/playwright-report/index.html
Asynchronously derives cryptographic keys (encryption, authentication) and password verification data using PBKDF2. It initializes the AES-CTR and HMAC-SHA1 instances required for secure data processing.
```javascript
async function r0(l,s,r,a){l.password=null;const c=await u2(J1,r,$1,!1,e2),f=await c2(Object.assign({salt:a},fa),c,8*(vi[s]*2+2)),d=new Uint8Array(f),m=Ai(Ht,wt(d,0,vi[s])),g=Ai(Ht,wt(d,vi[s],vi[s]*2)),A=wt(d,vi[s]*2);return Object.assign(l,{keys:{key:m,authentication:g,passwordVerification:A},ctr:new r2(new n2(m),Array.from(t2)),hmac:new i2(g)}),A}
```
--------------------------------
### Manage DOM Rect with ResizeObserver
Source: https://github.com/aeolun/react-diff-viewer-continued/blob/main/playwright-report/index.html
Uses `useRef` and `useState` to track the dimensions of a DOM element and updates them using `ResizeObserver`. Includes cleanup for the observer.
```javascript
function q0(){
const l=Ft.useRef(null),
[s,r]=Ft.useState(new DOMRect(0,0,10,10));
return Ft.useLayoutEffect(()=>{
const a=l.current;
if(!a)return;
const c=a.getBoundingClientRect();
r(new DOMRect(0,0,c.width,c.height));
const f=new ResizeObserver(d=>{
const m=d[d.length-1];
m&&m.contentRect&&r(m.contentRect)
});
return f.observe(a),
()=>f.disconnect()
},[l])
,[
s,
l
]
}
```
--------------------------------
### summary
Source: https://github.com/aeolun/react-diff-viewer-continued/blob/main/README.md
Displays custom text or a React element in the summary bar, often used for filenames. Defaults to undefined.
```APIDOC
## Prop: summary
### Description
Text or element to display in the summary bar (e.g., filename).
### Type
`string | ReactElement`
### Default
`undefined`
```
--------------------------------
### renderContent
Source: https://github.com/aeolun/react-diff-viewer-continued/blob/main/README.md
Render Prop API to render code in the diff viewer. Helpful for syntax highlighting.
```APIDOC
## renderContent
### Description
Render Prop API to render code in the diff viewer. Helpful for syntax highlighting.
### Type
`function`
### Default
`undefined`
```
--------------------------------
### React Hooks for Concurrent Rendering (Alternative)
Source: https://github.com/aeolun/react-diff-viewer-continued/blob/main/playwright-report/index.html
Alternative implementation of React hooks for concurrent rendering.
```javascript
var Th={readContext:gt,useCallback:Pc,useContext:gt,useEffect:po,useImperativeHandle:jc,useInsertionEffect:Ic,useLayoutEffect:Rc,useMemo:Oc,useReducer:fo,useRef:Cc,useState:function(){return fo(oi)},useDebugValue:ho,useDeferredValue:function(e){var t=vt();return He===null?t.memoizedState=e:Dc(t,He.memoizedState,e)},useTransition:function(){var e=fo(oi)[0],t=vt().memoizedState;return[e,t]},useMutableSource:gc,useSyncExternalStore:vc,useId:Nc,unstable_isNewReconciler:!1}
```
--------------------------------
### InflateSync with State Management
Source: https://github.com/aeolun/react-diff-viewer-continued/blob/main/playwright-report/index.html
Handles synchronous inflation of data, managing the inflate state and processing input until completion or an error occurs. Requires an inflate state object.
```javascript
l.inflateSync=function(r){let a,c,f,d,m;if(!r||!r.istate)return at;const g=r.istate;if(g.mode!=wn&&(g.mode=wn,g.marker=0),(a=r.avail_in)===0)return Jt;for(c=r.next_in_index,f=g.marker;a!==0&&f<4;)r.read_byte(c)==C1[f]?f++:r.read_byte(c)!==0?f=0:f=4-f,c++,a--;return r.total_in+=c-r.next_in_index,r.next_in_index=c,r.avail_in=a,g.marker=f,f!=4?Re:(d=r.total_in,m=r.total_out,s(r),r.total_in=d,r.total_out=m,g.mode=gi,ye)}
```
--------------------------------
### useDarkTheme
Source: https://github.com/aeolun/react-diff-viewer-continued/blob/main/README.md
Enables or disables the dark theme for the diff viewer.
```APIDOC
## useDarkTheme
### Description
To enable/disable dark theme.
### Type
`boolean`
### Default
`false`
```
--------------------------------
### Password Verification Helper
Source: https://github.com/aeolun/react-diff-viewer-continued/blob/main/playwright-report/index.html
Asynchronously verifies the provided password against a given salt and encryption parameters. It uses Web Crypto API or a fallback for key derivation and password checking.
```javascript
async function o2(l,s,r,a){const c=await r0(l,s,r,wt(a,0,xi[s]));const f=wt(a,xi[s]);if(c[0]!=f[0]||c[1]!=f[1])throw new Error(Ea)}
```
--------------------------------
### z2 Class for Network Requests with Range Headers
Source: https://github.com/aeolun/react-diff-viewer-continued/blob/main/playwright-report/index.html
Handles network requests, specifically supporting Range headers for partial content retrieval. Uses fetch API.
```javascript
class z2 extends Pn{
constructor(s,r){
super(),y0(this,s,r)}
async init(){
await x0(this,pa,Sd),super.init()}
readUint8Array(s,r){return w0(this,s,r,pa,Sd)}}
```
--------------------------------
### Key and Salt Generation for Decryption
Source: https://github.com/aeolun/react-diff-viewer-continued/blob/main/playwright-report/index.html
Generates a random salt and derives cryptographic keys and verification data using PBKDF2. This is used during the decryption process to establish the necessary cryptographic context.
```javascript
async function a2(l,s,r){const a=$d(new Uint8Array(xi[s]));const c=await r0(l,s,r,a);return ka(a,c)}
```
--------------------------------
### Writable Stream with Disk Management
Source: https://github.com/aeolun/react-diff-viewer-continued/blob/main/playwright-report/index.html
A WritableStream that manages data writing across potentially multiple disks or storage units. It handles disk switching and size tracking.
```javascript
class Zl extends _l{constructor(s,r=4294967295){super();const a=this;Object.assign(a,{diskNumber:0,diskOffset:0,size:0,maxSize:r,availableSize:r});let c,f,d;const m=new WritableStream({async write(E){const{availableSize:k}=a;if(d)E.length>=k?(await g(E.slice(0,k)),await A(),a.diskOffset+=c.size,a.diskNumber++,d=null,await this.write(E.slice(k))):await g(E);else{const{value:I,done:T}=await s.next();if(T&&!I)throw new Error(m0);c=I,c.size=0,c.maxSize&&(a.maxSize=c.maxSize),a.availableSize=a.maxSize,await Ei(c),f=I.writable,d=f.getWriter(),await this.write(E)}},async close(){await d.ready,await A()}});Object.defineProperty(a,Ta,{get(){return m}});async function g(E){const k=E.length;k&&(await d.ready,await d.write(E),c.size+=k,a.size+=k,a.availableSize-=k)}async function A(){f.size=c.size,await d.close()}}}
```
--------------------------------
### Image Loading Utility
Source: https://github.com/aeolun/react-diff-viewer-continued/blob/main/playwright-report/index.html
An asynchronous utility function to preload an image. It returns an Image object and waits for the image to load before resolving.
```javascript
async function oa(l){const s=new Image;return l&&(s.src=l,await new Promise((r,a)=>{s.onload=r,s.onerror=r})),s}
```
--------------------------------
### Project Link Component
Source: https://github.com/aeolun/react-diff-viewer-continued/blob/main/playwright-report/index.html
Renders a link to a specific project, formatting the project name for the URL query parameter. Assigns a color based on the project's index.
```javascript
const _m=({projectNames:l,projectName:s})=>{
const r=encodeURIComponent(s),
a=s===r?s:
`"${r.replace(/%22/g,"%5C%5C%22")}"`
return h.jsx(jn,{href:
`#?q=p:${a}`
,children:h.jsx(Ma,{label:s,colorIndex:l.indexOf(s)%6})})
}
```
--------------------------------
### Web Worker Integration for Compression
Source: https://github.com/aeolun/react-diff-viewer-continued/blob/main/playwright-report/index.html
A factory class for creating TransformStream instances that utilize web workers for compression/decompression. It allows configuration of chunk size and worker count.
```javascript
class fd{constructor(s){return class extends TransformStream{constructor(r,a){const c=new s(a);super({transform(f,d){d.enqueue(c.append(f))},flush(f){const d=c.flush();d&&f.enqueue(d)}})}}}}
```
--------------------------------
### Readable Stream Implementation
Source: https://github.com/aeolun/react-diff-viewer-continued/blob/main/playwright-report/index.html
Implements a readable stream with configurable chunk size and offset. Useful for reading data in manageable chunks.
```javascript
class _l{constructor(){this.size=0}init(){this.initialized=!0}}
```
```javascript
class Pn extends _l{get readable(){const s=this,{chunkSize:r=U2}=s,a=new ReadableStream({start(){this.chunkOffset=0},async pull(c){const{offset:f=0,size:d,diskNumberStart:m}=a,{chunkOffset:g}=this;c.enqueue(await ze(s,f+g,Math.min(r,d-g),m)),g+r>d?c.close():this.chunkOffset+=r}});return a}}
```
--------------------------------
### Label Component with Color
Source: https://github.com/aeolun/react-diff-viewer-continued/blob/main/playwright-report/index.html
Renders a label with a color-coded background based on a provided color index. Supports optional links and trimming of '@' prefixes.
```javascript
const Ma=({label:l,href:s,onClick:r,colorIndex:a,trimAtSymbolPrefix:c})=>{
const f=h.jsx("span",{className:At("label","label-color-"+(a!==void 0?a:Zm(l))),onClick:r?d=>r(d,l):void 0,children:c&&l.startsWith("@")?l.slice(1):l})
return s?h.jsx("a",{className:"label-anchor",href:s,children:f}):f
}
```
--------------------------------
### showDiffOnly
Source: https://github.com/aeolun/react-diff-viewer-continued/blob/main/README.md
Shows only the diffed lines and folds the unchanged lines.
```APIDOC
## showDiffOnly
### Description
Shows only the diffed lines and folds the unchanged lines.
### Type
`boolean`
### Default
`true`
```
--------------------------------
### Web Crypto API Key Import
Source: https://github.com/aeolun/react-diff-viewer-continued/blob/main/playwright-report/index.html
Imports a cryptographic key using the Web Crypto API if available. Provides a fallback to a custom implementation if the API is not accessible or fails.
```javascript
async function u2(l,s,r,a,c){if(dd)try{return await Ii.importKey(l,s,r,a,c)}catch{return dd=!1,Zn.importKey(s)}else return Zn.importKey(s)}
```
--------------------------------
### useState Hook Implementation
Source: https://github.com/aeolun/react-diff-viewer-continued/blob/main/playwright-report/index.html
Handles the useState hook, managing state updates and memoization.
```javascript
function Sc(e,t){var n=Nt();return t=n.memoizedState=t===void 0?null:t,n.baseState=t,e=e(t),n.queue={pending:null,interleaved:null,lanes:0,dispatch:null,lastRenderedReducer:e,lastRenderedState:t},e=e.dispatch=Ch.bind(null,Pe,n.queue),n.memoizedState=n.baseState=t,e=e,n.queue.dispatch=e,e}
```
--------------------------------
### Default Style Variables and Keys
Source: https://github.com/aeolun/react-diff-viewer-continued/blob/main/README.md
Lists the default style variables and object keys available for customizing the appearance of the diff viewer in both light and dark themes. These can be extended or overridden.
```javascript
// Default variables and style keys
const defaultStyles = {
variables: {
light: {
diffViewerBackground: '#fff',
diffViewerColor: '#212529',
addedBackground: '#e6ffed',
addedColor: '#24292e',
removedBackground: '#ffeef0',
removedColor: '#242929',
wordAddedBackground: '#acf2bd',
wordRemovedBackground: '#fdb8c0',
addedGutterBackground: '#cdffd8',
removedGutterBackground: '#ffdce0',
gutterBackground: '#f7f7f7',
gutterBackgroundDark: '#f3f1f1',
highlightBackground: '#fffbdd',
highlightGutterBackground: '#fff5b1',
codeFoldGutterBackground: '#dbedff',
codeFoldBackground: '#f1f8ff',
emptyLineBackground: '#fafbfc',
gutterColor: '#212529',
addedGutterColor: '#212529',
removedGutterColor: '#212529',
codeFoldContentColor: '#212529',
diffViewerTitleBackground: '#fafbfc',
diffViewerTitleColor: '#212529',
diffViewerTitleBorderColor: '#eee',
},
dark: {
diffViewerBackground: '#2e303c',
diffViewerColor: '#FFF',
addedBackground: '#044B53',
addedColor: 'white',
removedBackground: '#632F34',
removedColor: 'white',
wordAddedBackground: '#055d67',
wordRemovedBackground: '#7d383f',
addedGutterBackground: '#034148',
removedGutterBackground: '#632b30',
gutterBackground: '#2c2f3a',
gutterBackgroundDark: '#262933',
highlightBackground: '#2a3967',
highlightGutterBackground: '#2d4077',
codeFoldGutterBackground: '#21232b',
codeFoldBackground: '#262831',
emptyLineBackground: '#363946',
gutterColor: '#464c67',
addedGutterColor: '#8c8c8c',
removedGutterColor: '#8c8c8c',
codeFoldContentColor: '#555a7b',
diffViewerTitleBackground: '#2f323e',
diffViewerTitleColor: '#555a7b',
diffViewerTitleBorderColor: '#353846',
}
},
diffContainer?: {},
diffRemoved?: {},
diffAdded?: {},
marker?: {},
emptyGutter?: {},
highlightedLine?: {},
lineNumber?: {},
highlightedGutter?: {},
contentText?: {},
gutter?: {},
line?: {},
wordDiff?: {},
wordAdded?: {},
wordRemoved?: {},
codeFoldGutter?: {},
codeFold?: {},
emptyLine?: {},
content?: {},
titleBlock?: {},
splitView?: {}
}
```
--------------------------------
### Web Worker Integration
Source: https://github.com/aeolun/react-diff-viewer-continued/blob/main/playwright-report/index.html
Initializes a task, potentially using Web Workers for background processing. Manages worker lifecycle and task status.
```javascript
let d0=typeof Worker!=Tn;class ea{constructor(s,{readable:r,writable:a},{options:c,config:f,streamOptions:d,useWebWorkers:m,transferStreams:g,scripts:A},E){const{signal:k}=d;return Object.assign(s,{busy:!0,readable:r.pipeThrough(new E2(f.chunkSize)).pipeThrough(new S2(r,d),{signal:k}),writable:a,options:Object.assign({},c),scripts:A,transferStreams:g,terminate(){return new Promise(I=>{const{worker:T,busy:F}=s;T?(F?s.resolveTerminated=I:(T.terminate(),I()),s.interface=null):I()})},onTaskFinished(){const{resolveTerminated:I}=s;I&&(s.resolveTerminated=null,s.terminated=!0,s.worker.terminate(),I()),s.busy=!1,E(s)}}),(m&&d0?C2:p0)(s,f)}}
```
--------------------------------
### Inflate Fixed Trees Function
Source: https://github.com/aeolun/react-diff-viewer-continued/blob/main/playwright-report/index.html
Sets the pointers for fixed Huffman trees.
```javascript
ca.inflate_trees_fixed=function(l,s,r,a){return l[0]=f1,s[0]=d1,r[0]=p1,a[0]=h1,ye}
```
--------------------------------
### React Hooks for Concurrent Rendering
Source: https://github.com/aeolun/react-diff-viewer-continued/blob/main/playwright-report/index.html
Provides the implementation of React hooks optimized for concurrent rendering.
```javascript
var Ih={readContext:gt,useCallback:function(e,t){return Nt().memoizedState=[e,t===void 0?null:t],e},useContext:gt,useEffect:kc,useImperativeHandle:function(e,t,n){return n=n!=null?n.concat([e]):null,dl(4194308,4,Tc.bind(null,t,e),n)},useLayoutEffect:function(e,t){return dl(4194308,4,e,t)},useInsertionEffect:function(e,t){return dl(4,2,e,t)},useMemo:function(e,t){var n=Nt();return t=t===void 0?null:t,e=e(),n.memoizedState=[e,t],e},useReducer:function(e,t,n){var i=Nt();return t=n!==void 0?n(t):t,i.memoizedState=i.baseState=t,e={pending:null,interleaved:null,lanes:0,dispatch:null,lastRenderedReducer:e,lastRenderedState:t},i.queue=e,e=e.dispatch=Ch.bind(null,Pe,e),i.memoizedState=t,e},useRef:function(e){var t=Nt();return e={current:e},t.memoizedState=e},useState:Sc,useDebugValue:ho,useDeferredValue:function(e){return Nt().memoizedState=e},useTransition:function(){var e=Sc(!1),t=e[0];return e=Sh.bind(null,e[1]),Nt().memoizedState=e,[t,e]},useMutableSource:function(){},useSyncExternalStore:function(e,t,n){var i=Pe,o=Nt();if(Te){if(n===void 0)throw Error(r(407));n=n()}else{if(n=t(),Qe===null)throw Error(r(349));(Wn&30)!==0||yc(i,t,n)}o.memoizedState=n;var u={value:n,getSnapshot:t};return o.queue=u,kc(wc.bind(null,i,u,e), [e]),i.flags|=2048,ai(9,xc.bind(null,i,u,n,t),void 0,null),n},useId:function(){var e=Nt(),t=Qe.identifierPrefix;if(Te){var n=Vt,i=Wt;n=(i&~(1<<32-St(i)-1)).toString(32)+n,t=
```
--------------------------------
### Stream Transformation and Flushing
Source: https://github.com/aeolun/react-diff-viewer-continued/blob/main/playwright-report/index.html
Handles stream transformation and flushing, including tracking data length and updating size. Useful for processing large data streams efficiently.
```javascript
async function ta(l,...s){try{await l(...s)}catch{}}
```
```javascript
function p0(l,s){return{run:()=>k2(l,s)}}
```
```javascript
async function k2({options:l,readable:s,writable:r,onTaskFinished:a},c){try{const f=new A2(l,c);await s.pipeThrough(f).pipeTo(r,{preventClose:!0,preventAbort:!0});const{signature:d,inputSize:m,outputSize:g}=f;return{signature:d,inputSize:m,outputSize:g}}finally{a()}}
```
--------------------------------
### useContext Hook Implementation
Source: https://github.com/aeolun/react-diff-viewer-continued/blob/main/playwright-report/index.html
Provides the useContext hook for consuming context values.
```javascript
function gt(e){var t=Pe;if(Te)return gt(e);var n=e.contextType;if(n!==void 0)return n===null?vt().context:n.Consumer.context;n=vt().memoizedContext;if(n!==null){for(var i=0;i