react-diff-viewer-continued 3.3.0 → 3.3.1

package/CHANGELOG.md

@@ -1,3 +1,10 @@
+## [3.3.1](https://github.com/aeolun/react-diff-viewer-continued/compare/v3.3.0...v3.3.1) (2023-10-18)
+
+
+### Bug Fixes
+
+* correct imports (fixes [#31](https://github.com/aeolun/react-diff-viewer-continued/issues/31)) ([64a05a9](https://github.com/aeolun/react-diff-viewer-continued/commit/64a05a99e4cbde494597d923b73b9740cb1661cb))
+
 # [3.3.0](https://github.com/aeolun/react-diff-viewer-continued/compare/v3.2.6...v3.3.0) (2023-10-17)
 
 

package/lib/src/compute-hidden-blocks.d.ts

@@ -0,0 +1,13 @@
+import { LineInformation } from "./compute-lines";
+interface Block {
+    index: number;
+    startLine: number;
+    endLine: number;
+    lines: number;
+}
+interface HiddenBlocks {
+    lineBlocks: Record<number, number>;
+    blocks: Block[];
+}
+export declare function computeHiddenBlocks(lineInformation: LineInformation[], diffLines: number[], extraLines: number): HiddenBlocks;
+export {};

package/lib/src/compute-hidden-blocks.js

@@ -0,0 +1,39 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.computeHiddenBlocks = void 0;
+function computeHiddenBlocks(lineInformation, diffLines, extraLines) {
+    let newBlockIndex = 0;
+    let currentBlock;
+    let lineBlocks = {};
+    let blocks = [];
+    lineInformation.forEach((line, lineIndex) => {
+        const isDiffLine = diffLines.some(diffLine => diffLine >= lineIndex - extraLines && diffLine <= lineIndex + extraLines);
+        if (!isDiffLine && currentBlock == undefined) {
+            // block begins
+            currentBlock = {
+                index: newBlockIndex,
+                startLine: lineIndex,
+                endLine: lineIndex,
+                lines: 1
+            };
+            blocks.push(currentBlock);
+            lineBlocks[lineIndex] = currentBlock.index;
+            newBlockIndex++;
+        }
+        else if (!isDiffLine) {
+            // block continues
+            currentBlock.endLine = lineIndex;
+            currentBlock.lines++;
+            lineBlocks[lineIndex] = currentBlock.index;
+        }
+        else {
+            // not a block anymore
+            currentBlock = undefined;
+        }
+    });
+    return {
+        lineBlocks,
+        blocks: blocks
+    };
+}
+exports.computeHiddenBlocks = computeHiddenBlocks;

package/lib/src/compute-lines.d.ts

@@ -0,0 +1,55 @@
+export declare enum DiffType {
+    DEFAULT = 0,
+    ADDED = 1,
+    REMOVED = 2,
+    CHANGED = 3
+}
+export declare enum DiffMethod {
+    CHARS = "diffChars",
+    WORDS = "diffWords",
+    WORDS_WITH_SPACE = "diffWordsWithSpace",
+    LINES = "diffLines",
+    TRIMMED_LINES = "diffTrimmedLines",
+    SENTENCES = "diffSentences",
+    CSS = "diffCss",
+    JSON = "diffJson"
+}
+export interface DiffInformation {
+    value?: string | DiffInformation[];
+    lineNumber?: number;
+    type?: DiffType;
+}
+export interface LineInformation {
+    left?: DiffInformation;
+    right?: DiffInformation;
+}
+export interface ComputedLineInformation {
+    lineInformation: LineInformation[];
+    diffLines: number[];
+}
+export interface ComputedDiffInformation {
+    left?: DiffInformation[];
+    right?: DiffInformation[];
+}
+export interface JsDiffChangeObject {
+    added?: boolean;
+    removed?: boolean;
+    value?: string;
+}
+/**
+ * [TODO]: Think about moving common left and right value assignment to a
+ * common place. Better readability?
+ *
+ * Computes line wise information based in the js diff information passed. Each
+ * line contains information about left and right section. Left side denotes
+ * deletion and right side denotes addition.
+ *
+ * @param oldString Old string to compare.
+ * @param newString New string to compare with old string.
+ * @param disableWordDiff Flag to enable/disable word diff.
+ * @param lineCompareMethod JsDiff text diff method from https://github.com/kpdecker/jsdiff/tree/v4.0.1#api
+ * @param linesOffset line number to start counting from
+ * @param showLines lines that are always shown, regardless of diff
+ */
+declare const computeLineInformation: (oldString: string | Object, newString: string | Object, disableWordDiff?: boolean, lineCompareMethod?: string, linesOffset?: number, showLines?: string[]) => ComputedLineInformation;
+export { computeLineInformation };

package/lib/src/compute-lines.js

@@ -0,0 +1,228 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.computeLineInformation = exports.DiffMethod = exports.DiffType = void 0;
+const diff = __importStar(require("diff"));
+const jsDiff = diff;
+var DiffType;
+(function (DiffType) {
+    DiffType[DiffType["DEFAULT"] = 0] = "DEFAULT";
+    DiffType[DiffType["ADDED"] = 1] = "ADDED";
+    DiffType[DiffType["REMOVED"] = 2] = "REMOVED";
+    DiffType[DiffType["CHANGED"] = 3] = "CHANGED";
+})(DiffType || (exports.DiffType = DiffType = {}));
+// See https://github.com/kpdecker/jsdiff/tree/v4.0.1#api for more info on the below JsDiff methods
+var DiffMethod;
+(function (DiffMethod) {
+    DiffMethod["CHARS"] = "diffChars";
+    DiffMethod["WORDS"] = "diffWords";
+    DiffMethod["WORDS_WITH_SPACE"] = "diffWordsWithSpace";
+    DiffMethod["LINES"] = "diffLines";
+    DiffMethod["TRIMMED_LINES"] = "diffTrimmedLines";
+    DiffMethod["SENTENCES"] = "diffSentences";
+    DiffMethod["CSS"] = "diffCss";
+    DiffMethod["JSON"] = "diffJson";
+})(DiffMethod || (exports.DiffMethod = DiffMethod = {}));
+/**
+ * Splits diff text by new line and computes final list of diff lines based on
+ * conditions.
+ *
+ * @param value Diff text from the js diff module.
+ */
+const constructLines = (value) => {
+    if (value === '')
+        return [];
+    const lines = value.replace(/\n$/, '').split('\n');
+    return lines;
+};
+/**
+ * Computes word diff information in the line.
+ * [TODO]: Consider adding options argument for JsDiff text block comparison
+ *
+ * @param oldValue Old word in the line.
+ * @param newValue New word in the line.
+ * @param compareMethod JsDiff text diff method from https://github.com/kpdecker/jsdiff/tree/v4.0.1#api
+ */
+const computeDiff = (oldValue, newValue, compareMethod = DiffMethod.CHARS) => {
+    const diffArray = jsDiff[compareMethod](oldValue, newValue);
+    const computedDiff = {
+        left: [],
+        right: [],
+    };
+    diffArray.forEach(({ added, removed, value }) => {
+        const diffInformation = {};
+        if (added) {
+            diffInformation.type = DiffType.ADDED;
+            diffInformation.value = value;
+            computedDiff.right.push(diffInformation);
+        }
+        if (removed) {
+            diffInformation.type = DiffType.REMOVED;
+            diffInformation.value = value;
+            computedDiff.left.push(diffInformation);
+        }
+        if (!removed && !added) {
+            diffInformation.type = DiffType.DEFAULT;
+            diffInformation.value = value;
+            computedDiff.right.push(diffInformation);
+            computedDiff.left.push(diffInformation);
+        }
+        return diffInformation;
+    });
+    return computedDiff;
+};
+/**
+ * [TODO]: Think about moving common left and right value assignment to a
+ * common place. Better readability?
+ *
+ * Computes line wise information based in the js diff information passed. Each
+ * line contains information about left and right section. Left side denotes
+ * deletion and right side denotes addition.
+ *
+ * @param oldString Old string to compare.
+ * @param newString New string to compare with old string.
+ * @param disableWordDiff Flag to enable/disable word diff.
+ * @param lineCompareMethod JsDiff text diff method from https://github.com/kpdecker/jsdiff/tree/v4.0.1#api
+ * @param linesOffset line number to start counting from
+ * @param showLines lines that are always shown, regardless of diff
+ */
+const computeLineInformation = (oldString, newString, disableWordDiff = false, lineCompareMethod = DiffMethod.CHARS, linesOffset = 0, showLines = []) => {
+    let diffArray = [];
+    // Use diffLines for strings, and diffJson for objects...
+    if (typeof oldString === 'string' && typeof newString === 'string') {
+        diffArray = diff.diffLines(oldString.trimRight(), newString.trimRight(), {
+            newlineIsToken: false,
+            ignoreWhitespace: false,
+            ignoreCase: false,
+        });
+    }
+    else {
+        diffArray = diff.diffJson(oldString, newString);
+    }
+    let rightLineNumber = linesOffset;
+    let leftLineNumber = linesOffset;
+    let lineInformation = [];
+    let counter = 0;
+    const diffLines = [];
+    const ignoreDiffIndexes = [];
+    const getLineInformation = (value, diffIndex, added, removed, evaluateOnlyFirstLine) => {
+        const lines = constructLines(value);
+        return lines
+            .map((line, lineIndex) => {
+            const left = {};
+            const right = {};
+            if (ignoreDiffIndexes.includes(`${diffIndex}-${lineIndex}`) ||
+                (evaluateOnlyFirstLine && lineIndex !== 0)) {
+                return undefined;
+            }
+            if (added || removed) {
+                let countAsChange = true;
+                if (removed) {
+                    leftLineNumber += 1;
+                    left.lineNumber = leftLineNumber;
+                    left.type = DiffType.REMOVED;
+                    left.value = line || ' ';
+                    // When the current line is of type REMOVED, check the next item in
+                    // the diff array whether it is of type ADDED. If true, the current
+                    // diff will be marked as both REMOVED and ADDED. Meaning, the
+                    // current line is a modification.
+                    const nextDiff = diffArray[diffIndex + 1];
+                    if (nextDiff && nextDiff.added) {
+                        const nextDiffLines = constructLines(nextDiff.value)[lineIndex];
+                        if (nextDiffLines) {
+                            const nextDiffLineInfo = getLineInformation(nextDiffLines, diffIndex, true, false, true);
+                            const { value: rightValue, lineNumber, type, } = nextDiffLineInfo[0].right;
+                            // When identified as modification, push the next diff to ignore
+                            // list as the next value will be added in this line computation as
+                            // right and left values.
+                            ignoreDiffIndexes.push(`${diffIndex + 1}-${lineIndex}`);
+                            right.lineNumber = lineNumber;
+                            if (left.value === rightValue) {
+                                // The new value is exactly the same as the old
+                                countAsChange = false;
+                                right.type = 0;
+                                left.type = 0;
+                                right.value = rightValue;
+                            }
+                            else {
+                                right.type = type;
+                                // Do char level diff and assign the corresponding values to the
+                                // left and right diff information object.
+                                if (disableWordDiff) {
+                                    right.value = rightValue;
+                                }
+                                else {
+                                    const computedDiff = computeDiff(line, rightValue, lineCompareMethod);
+                                    right.value = computedDiff.right;
+                                    left.value = computedDiff.left;
+                                }
+                            }
+                        }
+                    }
+                }
+                else {
+                    rightLineNumber += 1;
+                    right.lineNumber = rightLineNumber;
+                    right.type = DiffType.ADDED;
+                    right.value = line;
+                }
+                if (countAsChange && !evaluateOnlyFirstLine) {
+                    if (!diffLines.includes(counter)) {
+                        diffLines.push(counter);
+                    }
+                }
+            }
+            else {
+                leftLineNumber += 1;
+                rightLineNumber += 1;
+                left.lineNumber = leftLineNumber;
+                left.type = DiffType.DEFAULT;
+                left.value = line;
+                right.lineNumber = rightLineNumber;
+                right.type = DiffType.DEFAULT;
+                right.value = line;
+            }
+            if ((showLines === null || showLines === void 0 ? void 0 : showLines.includes(`L-${left.lineNumber}`)) || (showLines === null || showLines === void 0 ? void 0 : showLines.includes(`R-${right.lineNumber}`)) && !diffLines.includes(counter)) {
+                diffLines.push(counter);
+            }
+            if (!evaluateOnlyFirstLine) {
+                counter += 1;
+            }
+            return { right, left };
+        })
+            .filter(Boolean);
+    };
+    diffArray.forEach(({ added, removed, value }, index) => {
+        lineInformation = [
+            ...lineInformation,
+            ...getLineInformation(value, index, added, removed),
+        ];
+    });
+    return {
+        lineInformation,
+        diffLines,
+    };
+};
+exports.computeLineInformation = computeLineInformation;

package/lib/src/index.d.ts

@@ -0,0 +1,135 @@
+import * as React from 'react';
+import { DiffInformation, DiffMethod, DiffType, LineInformation } from './compute-lines';
+import { ReactDiffViewerStyles, ReactDiffViewerStylesOverride } from './styles';
+import { ReactElement } from "react";
+export declare enum LineNumberPrefix {
+    LEFT = "L",
+    RIGHT = "R"
+}
+export interface ReactDiffViewerProps {
+    oldValue: string | Object;
+    newValue: string | Object;
+    splitView?: boolean;
+    linesOffset?: number;
+    disableWordDiff?: boolean;
+    compareMethod?: DiffMethod;
+    extraLinesSurroundingDiff?: number;
+    hideLineNumbers?: boolean;
+    /**
+     * Show the lines indicated here. Specified as L20 or R18 for respectively line 20 on the left or line 18 on the right.
+     */
+    alwaysShowLines?: string[];
+    showDiffOnly?: boolean;
+    renderContent?: (source: string) => ReactElement;
+    codeFoldMessageRenderer?: (totalFoldedLines: number, leftStartLineNumber: number, rightStartLineNumber: number) => ReactElement;
+    onLineNumberClick?: (lineId: string, event: React.MouseEvent<HTMLTableCellElement>) => void;
+    renderGutter?: (data: {
+        lineNumber: number;
+        type: DiffType;
+        prefix: LineNumberPrefix;
+        value: string | DiffInformation[];
+        additionalLineNumber: number;
+        additionalPrefix: LineNumberPrefix;
+        styles: ReactDiffViewerStyles;
+    }) => ReactElement;
+    highlightLines?: string[];
+    styles?: ReactDiffViewerStylesOverride;
+    useDarkTheme?: boolean;
+    leftTitle?: string | ReactElement;
+    rightTitle?: string | ReactElement;
+    nonce?: string;
+}
+export interface ReactDiffViewerState {
+    expandedBlocks?: number[];
+}
+declare class DiffViewer extends React.Component<ReactDiffViewerProps, ReactDiffViewerState> {
+    private styles;
+    static defaultProps: ReactDiffViewerProps;
+    constructor(props: ReactDiffViewerProps);
+    /**
+     * Resets code block expand to the initial stage. Will be exposed to the parent component via
+     * refs.
+     */
+    resetCodeBlocks: () => boolean;
+    /**
+     * Pushes the target expanded code block to the state. During the re-render,
+     * this value is used to expand/fold unmodified code.
+     */
+    private onBlockExpand;
+    /**
+     * Computes final styles for the diff viewer. It combines the default styles with the user
+     * supplied overrides. The computed styles are cached with performance in mind.
+     *
+     * @param styles User supplied style overrides.
+     */
+    private computeStyles;
+    /**
+     * Returns a function with clicked line number in the closure. Returns an no-op function when no
+     * onLineNumberClick handler is supplied.
+     *
+     * @param id Line id of a line.
+     */
+    private onLineNumberClickProxy;
+    /**
+     * Maps over the word diff and constructs the required React elements to show word diff.
+     *
+     * @param diffArray Word diff information derived from line information.
+     * @param renderer Optional renderer to format diff words. Useful for syntax highlighting.
+     */
+    private renderWordDiff;
+    /**
+     * Maps over the line diff and constructs the required react elements to show line diff. It calls
+     * renderWordDiff when encountering word diff. This takes care of both inline and split view line
+     * renders.
+     *
+     * @param lineNumber Line number of the current line.
+     * @param type Type of diff of the current line.
+     * @param prefix Unique id to prefix with the line numbers.
+     * @param value Content of the line. It can be a string or a word diff array.
+     * @param additionalLineNumber Additional line number to be shown. Useful for rendering inline
+     *  diff view. Right line number will be passed as additionalLineNumber.
+     * @param additionalPrefix Similar to prefix but for additional line number.
+     */
+    private renderLine;
+    /**
+     * Generates lines for split view.
+     *
+     * @param obj Line diff information.
+     * @param obj.left Life diff information for the left pane of the split view.
+     * @param obj.right Life diff information for the right pane of the split view.
+     * @param index React key for the lines.
+     */
+    private renderSplitView;
+    /**
+     * Generates lines for inline view.
+     *
+     * @param obj Line diff information.
+     * @param obj.left Life diff information for the added section of the inline view.
+     * @param obj.right Life diff information for the removed section of the inline view.
+     * @param index React key for the lines.
+     */
+    renderInlineView: ({ left, right }: LineInformation, index: number) => ReactElement;
+    /**
+     * Returns a function with clicked block number in the closure.
+     *
+     * @param id Cold fold block id.
+     */
+    private onBlockClickProxy;
+    /**
+     * Generates cold fold block. It also uses the custom message renderer when available to show
+     * cold fold messages.
+     *
+     * @param num Number of skipped lines between two blocks.
+     * @param blockNumber Code fold block id.
+     * @param leftBlockLineNumber First left line number after the current code fold block.
+     * @param rightBlockLineNumber First right line number after the current code fold block.
+     */
+    private renderSkippedLineIndicator;
+    /**
+     * Generates the entire diff view.
+     */
+    private renderDiff;
+    render: () => ReactElement;
+}
+export default DiffViewer;
+export { ReactDiffViewerStylesOverride, DiffMethod };

package/lib/src/index.js

@@ -0,0 +1,298 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.DiffMethod = exports.LineNumberPrefix = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const React = __importStar(require("react"));
+const classnames_1 = __importDefault(require("classnames"));
+const compute_lines_1 = require("./compute-lines");
+Object.defineProperty(exports, "DiffMethod", { enumerable: true, get: function () { return compute_lines_1.DiffMethod; } });
+const styles_1 = __importDefault(require("./styles"));
+const compute_hidden_blocks_1 = require("./compute-hidden-blocks");
+const m = require('memoize-one');
+const memoize = m.default || m;
+var LineNumberPrefix;
+(function (LineNumberPrefix) {
+    LineNumberPrefix["LEFT"] = "L";
+    LineNumberPrefix["RIGHT"] = "R";
+})(LineNumberPrefix || (exports.LineNumberPrefix = LineNumberPrefix = {}));
+class DiffViewer extends React.Component {
+    constructor(props) {
+        super(props);
+        /**
+         * Resets code block expand to the initial stage. Will be exposed to the parent component via
+         * refs.
+         */
+        this.resetCodeBlocks = () => {
+            if (this.state.expandedBlocks.length > 0) {
+                this.setState({
+                    expandedBlocks: [],
+                });
+                return true;
+            }
+            return false;
+        };
+        /**
+         * Pushes the target expanded code block to the state. During the re-render,
+         * this value is used to expand/fold unmodified code.
+         */
+        this.onBlockExpand = (id) => {
+            const prevState = this.state.expandedBlocks.slice();
+            prevState.push(id);
+            this.setState({
+                expandedBlocks: prevState,
+            });
+        };
+        /**
+         * Computes final styles for the diff viewer. It combines the default styles with the user
+         * supplied overrides. The computed styles are cached with performance in mind.
+         *
+         * @param styles User supplied style overrides.
+         */
+        this.computeStyles = memoize(styles_1.default);
+        /**
+         * Returns a function with clicked line number in the closure. Returns an no-op function when no
+         * onLineNumberClick handler is supplied.
+         *
+         * @param id Line id of a line.
+         */
+        this.onLineNumberClickProxy = (id) => {
+            if (this.props.onLineNumberClick) {
+                return (e) => this.props.onLineNumberClick(id, e);
+            }
+            return () => { };
+        };
+        /**
+         * Maps over the word diff and constructs the required React elements to show word diff.
+         *
+         * @param diffArray Word diff information derived from line information.
+         * @param renderer Optional renderer to format diff words. Useful for syntax highlighting.
+         */
+        this.renderWordDiff = (diffArray, renderer) => {
+            return diffArray.map((wordDiff, i) => {
+                return ((0, jsx_runtime_1.jsx)("span", { className: (0, classnames_1.default)(this.styles.wordDiff, {
+                        [this.styles.wordAdded]: wordDiff.type === compute_lines_1.DiffType.ADDED,
+                        [this.styles.wordRemoved]: wordDiff.type === compute_lines_1.DiffType.REMOVED,
+                    }), children: renderer ? renderer(wordDiff.value) : wordDiff.value }, i));
+            });
+        };
+        /**
+         * Maps over the line diff and constructs the required react elements to show line diff. It calls
+         * renderWordDiff when encountering word diff. This takes care of both inline and split view line
+         * renders.
+         *
+         * @param lineNumber Line number of the current line.
+         * @param type Type of diff of the current line.
+         * @param prefix Unique id to prefix with the line numbers.
+         * @param value Content of the line. It can be a string or a word diff array.
+         * @param additionalLineNumber Additional line number to be shown. Useful for rendering inline
+         *  diff view. Right line number will be passed as additionalLineNumber.
+         * @param additionalPrefix Similar to prefix but for additional line number.
+         */
+        this.renderLine = (lineNumber, type, prefix, value, additionalLineNumber, additionalPrefix) => {
+            const lineNumberTemplate = `${prefix}-${lineNumber}`;
+            const additionalLineNumberTemplate = `${additionalPrefix}-${additionalLineNumber}`;
+            const highlightLine = this.props.highlightLines.includes(lineNumberTemplate) ||
+                this.props.highlightLines.includes(additionalLineNumberTemplate);
+            const added = type === compute_lines_1.DiffType.ADDED;
+            const removed = type === compute_lines_1.DiffType.REMOVED;
+            const changed = type === compute_lines_1.DiffType.CHANGED;
+            let content;
+            if (Array.isArray(value)) {
+                content = this.renderWordDiff(value, this.props.renderContent);
+            }
+            else if (this.props.renderContent) {
+                content = this.props.renderContent(value);
+            }
+            else {
+                content = value;
+            }
+            return ((0, jsx_runtime_1.jsxs)(React.Fragment, { children: [!this.props.hideLineNumbers && ((0, jsx_runtime_1.jsx)("td", { onClick: lineNumber && this.onLineNumberClickProxy(lineNumberTemplate), className: (0, classnames_1.default)(this.styles.gutter, {
+                            [this.styles.emptyGutter]: !lineNumber,
+                            [this.styles.diffAdded]: added,
+                            [this.styles.diffRemoved]: removed,
+                            [this.styles.diffChanged]: changed,
+                            [this.styles.highlightedGutter]: highlightLine,
+                        }), children: (0, jsx_runtime_1.jsx)("pre", { className: this.styles.lineNumber, children: lineNumber }) })), !this.props.splitView && !this.props.hideLineNumbers && ((0, jsx_runtime_1.jsx)("td", { onClick: additionalLineNumber &&
+                            this.onLineNumberClickProxy(additionalLineNumberTemplate), className: (0, classnames_1.default)(this.styles.gutter, {
+                            [this.styles.emptyGutter]: !additionalLineNumber,
+                            [this.styles.diffAdded]: added,
+                            [this.styles.diffRemoved]: removed,
+                            [this.styles.diffChanged]: changed,
+                            [this.styles.highlightedGutter]: highlightLine,
+                        }), children: (0, jsx_runtime_1.jsx)("pre", { className: this.styles.lineNumber, children: additionalLineNumber }) })), this.props.renderGutter
+                        ? this.props.renderGutter({
+                            lineNumber,
+                            type,
+                            prefix,
+                            value,
+                            additionalLineNumber,
+                            additionalPrefix,
+                            styles: this.styles,
+                        })
+                        : null, (0, jsx_runtime_1.jsx)("td", { className: (0, classnames_1.default)(this.styles.marker, {
+                            [this.styles.emptyLine]: !content,
+                            [this.styles.diffAdded]: added,
+                            [this.styles.diffRemoved]: removed,
+                            [this.styles.diffChanged]: changed,
+                            [this.styles.highlightedLine]: highlightLine,
+                        }), children: (0, jsx_runtime_1.jsxs)("pre", { children: [added && '+', removed && '-'] }) }), (0, jsx_runtime_1.jsx)("td", { className: (0, classnames_1.default)(this.styles.content, {
+                            [this.styles.emptyLine]: !content,
+                            [this.styles.diffAdded]: added,
+                            [this.styles.diffRemoved]: removed,
+                            [this.styles.diffChanged]: changed,
+                            [this.styles.highlightedLine]: highlightLine,
+                        }), children: (0, jsx_runtime_1.jsx)("pre", { className: this.styles.contentText, children: content }) })] }));
+        };
+        /**
+         * Generates lines for split view.
+         *
+         * @param obj Line diff information.
+         * @param obj.left Life diff information for the left pane of the split view.
+         * @param obj.right Life diff information for the right pane of the split view.
+         * @param index React key for the lines.
+         */
+        this.renderSplitView = ({ left, right }, index) => {
+            return ((0, jsx_runtime_1.jsxs)("tr", { className: this.styles.line, children: [this.renderLine(left.lineNumber, left.type, LineNumberPrefix.LEFT, left.value), this.renderLine(right.lineNumber, right.type, LineNumberPrefix.RIGHT, right.value)] }, index));
+        };
+        /**
+         * Generates lines for inline view.
+         *
+         * @param obj Line diff information.
+         * @param obj.left Life diff information for the added section of the inline view.
+         * @param obj.right Life diff information for the removed section of the inline view.
+         * @param index React key for the lines.
+         */
+        this.renderInlineView = ({ left, right }, index) => {
+            let content;
+            if (left.type === compute_lines_1.DiffType.REMOVED && right.type === compute_lines_1.DiffType.ADDED) {
+                return ((0, jsx_runtime_1.jsxs)(React.Fragment, { children: [(0, jsx_runtime_1.jsx)("tr", { className: this.styles.line, children: this.renderLine(left.lineNumber, left.type, LineNumberPrefix.LEFT, left.value, null) }), (0, jsx_runtime_1.jsx)("tr", { className: this.styles.line, children: this.renderLine(null, right.type, LineNumberPrefix.RIGHT, right.value, right.lineNumber) })] }, index));
+            }
+            if (left.type === compute_lines_1.DiffType.REMOVED) {
+                content = this.renderLine(left.lineNumber, left.type, LineNumberPrefix.LEFT, left.value, null);
+            }
+            if (left.type === compute_lines_1.DiffType.DEFAULT) {
+                content = this.renderLine(left.lineNumber, left.type, LineNumberPrefix.LEFT, left.value, right.lineNumber, LineNumberPrefix.RIGHT);
+            }
+            if (right.type === compute_lines_1.DiffType.ADDED) {
+                content = this.renderLine(null, right.type, LineNumberPrefix.RIGHT, right.value, right.lineNumber);
+            }
+            return ((0, jsx_runtime_1.jsx)("tr", { className: this.styles.line, children: content }, index));
+        };
+        /**
+         * Returns a function with clicked block number in the closure.
+         *
+         * @param id Cold fold block id.
+         */
+        this.onBlockClickProxy = (id) => () => this.onBlockExpand(id);
+        /**
+         * Generates cold fold block. It also uses the custom message renderer when available to show
+         * cold fold messages.
+         *
+         * @param num Number of skipped lines between two blocks.
+         * @param blockNumber Code fold block id.
+         * @param leftBlockLineNumber First left line number after the current code fold block.
+         * @param rightBlockLineNumber First right line number after the current code fold block.
+         */
+        this.renderSkippedLineIndicator = (num, blockNumber, leftBlockLineNumber, rightBlockLineNumber) => {
+            const { hideLineNumbers, splitView } = this.props;
+            const message = this.props.codeFoldMessageRenderer ? (this.props.codeFoldMessageRenderer(num, leftBlockLineNumber, rightBlockLineNumber)) : ((0, jsx_runtime_1.jsxs)("pre", { className: this.styles.codeFoldContent, children: ["Expand ", num, " lines ..."] }));
+            const content = ((0, jsx_runtime_1.jsx)("td", { children: (0, jsx_runtime_1.jsx)("a", { onClick: this.onBlockClickProxy(blockNumber), tabIndex: 0, children: message }) }));
+            const isUnifiedViewWithoutLineNumbers = !splitView && !hideLineNumbers;
+            return ((0, jsx_runtime_1.jsxs)("tr", { className: this.styles.codeFold, children: [!hideLineNumbers && (0, jsx_runtime_1.jsx)("td", { className: this.styles.codeFoldGutter }), this.props.renderGutter ? ((0, jsx_runtime_1.jsx)("td", { className: this.styles.codeFoldGutter })) : null, (0, jsx_runtime_1.jsx)("td", { className: (0, classnames_1.default)({
+                            [this.styles.codeFoldGutter]: isUnifiedViewWithoutLineNumbers,
+                        }) }), isUnifiedViewWithoutLineNumbers ? ((0, jsx_runtime_1.jsxs)(React.Fragment, { children: [(0, jsx_runtime_1.jsx)("td", {}), content] })) : ((0, jsx_runtime_1.jsxs)(React.Fragment, { children: [content, this.props.renderGutter ? (0, jsx_runtime_1.jsx)("td", {}) : null, (0, jsx_runtime_1.jsx)("td", {})] })), (0, jsx_runtime_1.jsx)("td", {}), (0, jsx_runtime_1.jsx)("td", {})] }, `${leftBlockLineNumber}-${rightBlockLineNumber}`));
+        };
+        /**
+         * Generates the entire diff view.
+         */
+        this.renderDiff = () => {
+            const { oldValue, newValue, splitView, disableWordDiff, compareMethod, linesOffset, } = this.props;
+            const { lineInformation, diffLines } = (0, compute_lines_1.computeLineInformation)(oldValue, newValue, disableWordDiff, compareMethod, linesOffset, this.props.alwaysShowLines);
+            const extraLines = this.props.extraLinesSurroundingDiff < 0
+                ? 0
+                : Math.round(this.props.extraLinesSurroundingDiff);
+            const { lineBlocks, blocks } = (0, compute_hidden_blocks_1.computeHiddenBlocks)(lineInformation, diffLines, extraLines);
+            return lineInformation.map((line, lineIndex) => {
+                if (this.props.showDiffOnly) {
+                    const blockIndex = lineBlocks[lineIndex];
+                    if (blockIndex !== undefined) {
+                        const lastLineOfBlock = blocks[blockIndex].endLine === lineIndex;
+                        if (!this.state.expandedBlocks.includes(blockIndex) && lastLineOfBlock) {
+                            return ((0, jsx_runtime_1.jsx)(React.Fragment, { children: this.renderSkippedLineIndicator(blocks[blockIndex].lines, blockIndex, line.left.lineNumber, line.right.lineNumber) }, lineIndex));
+                        }
+                        else if (!this.state.expandedBlocks.includes(blockIndex)) {
+                            return null;
+                        }
+                    }
+                }
+                const diffNodes = splitView
+                    ? this.renderSplitView(line, lineIndex)
+                    : this.renderInlineView(line, lineIndex);
+                return diffNodes;
+            });
+        };
+        this.render = () => {
+            const { oldValue, newValue, useDarkTheme, leftTitle, rightTitle, splitView, hideLineNumbers, nonce, } = this.props;
+            if (this.props.compareMethod !== compute_lines_1.DiffMethod.JSON) {
+                if (typeof oldValue !== 'string' || typeof newValue !== 'string') {
+                    throw Error('"oldValue" and "newValue" should be strings');
+                }
+            }
+            this.styles = this.computeStyles(this.props.styles, useDarkTheme, nonce);
+            const nodes = this.renderDiff();
+            const colSpanOnSplitView = hideLineNumbers ? 2 : 3;
+            const colSpanOnInlineView = hideLineNumbers ? 2 : 4;
+            let columnExtension = this.props.renderGutter ? 1 : 0;
+            const title = (leftTitle || rightTitle) && ((0, jsx_runtime_1.jsxs)("tr", { children: [(0, jsx_runtime_1.jsx)("td", { colSpan: (splitView ? colSpanOnSplitView : colSpanOnInlineView) +
+                            columnExtension, className: this.styles.titleBlock, children: (0, jsx_runtime_1.jsx)("pre", { className: this.styles.contentText, children: leftTitle }) }), splitView && ((0, jsx_runtime_1.jsx)("td", { colSpan: colSpanOnSplitView + columnExtension, className: this.styles.titleBlock, children: (0, jsx_runtime_1.jsx)("pre", { className: this.styles.contentText, children: rightTitle }) }))] }));
+            return ((0, jsx_runtime_1.jsx)("table", { className: (0, classnames_1.default)(this.styles.diffContainer, {
+                    [this.styles.splitView]: splitView,
+                }), children: (0, jsx_runtime_1.jsxs)("tbody", { children: [title, nodes] }) }));
+        };
+        this.state = {
+            expandedBlocks: [],
+        };
+    }
+}
+DiffViewer.defaultProps = {
+    oldValue: '',
+    newValue: '',
+    splitView: true,
+    highlightLines: [],
+    disableWordDiff: false,
+    compareMethod: compute_lines_1.DiffMethod.CHARS,
+    styles: {},
+    hideLineNumbers: false,
+    extraLinesSurroundingDiff: 3,
+    showDiffOnly: true,
+    useDarkTheme: false,
+    linesOffset: 0,
+    nonce: '',
+};
+exports.default = DiffViewer;

package/lib/src/styles.d.ts

@@ -0,0 +1,81 @@
+import { CSSInterpolation } from '@emotion/css';
+export interface ReactDiffViewerStyles {
+    diffContainer?: string;
+    diffRemoved?: string;
+    diffAdded?: string;
+    diffChanged?: string;
+    line?: string;
+    highlightedGutter?: string;
+    contentText?: string;
+    gutter?: string;
+    highlightedLine?: string;
+    lineNumber?: string;
+    marker?: string;
+    wordDiff?: string;
+    wordAdded?: string;
+    wordRemoved?: string;
+    codeFoldGutter?: string;
+    emptyGutter?: string;
+    emptyLine?: string;
+    codeFold?: string;
+    titleBlock?: string;
+    content?: string;
+    splitView?: string;
+    [key: string]: string | undefined;
+}
+export interface ReactDiffViewerStylesVariables {
+    diffViewerBackground?: string;
+    diffViewerTitleBackground?: string;
+    diffViewerColor?: string;
+    diffViewerTitleColor?: string;
+    diffViewerTitleBorderColor?: string;
+    addedBackground?: string;
+    addedColor?: string;
+    removedBackground?: string;
+    removedColor?: string;
+    changedBackground?: string;
+    wordAddedBackground?: string;
+    wordRemovedBackground?: string;
+    addedGutterBackground?: string;
+    removedGutterBackground?: string;
+    gutterBackground?: string;
+    gutterBackgroundDark?: string;
+    highlightBackground?: string;
+    highlightGutterBackground?: string;
+    codeFoldGutterBackground?: string;
+    codeFoldBackground?: string;
+    emptyLineBackground?: string;
+    gutterColor?: string;
+    addedGutterColor?: string;
+    removedGutterColor?: string;
+    codeFoldContentColor?: string;
+}
+export interface ReactDiffViewerStylesOverride {
+    variables?: {
+        dark?: ReactDiffViewerStylesVariables;
+        light?: ReactDiffViewerStylesVariables;
+    };
+    diffContainer?: CSSInterpolation;
+    diffRemoved?: CSSInterpolation;
+    diffAdded?: CSSInterpolation;
+    diffChanged?: CSSInterpolation;
+    marker?: CSSInterpolation;
+    emptyGutter?: CSSInterpolation;
+    highlightedLine?: CSSInterpolation;
+    lineNumber?: CSSInterpolation;
+    highlightedGutter?: CSSInterpolation;
+    contentText?: CSSInterpolation;
+    gutter?: CSSInterpolation;
+    line?: CSSInterpolation;
+    wordDiff?: CSSInterpolation;
+    wordAdded?: CSSInterpolation;
+    wordRemoved?: CSSInterpolation;
+    codeFoldGutter?: CSSInterpolation;
+    codeFold?: CSSInterpolation;
+    emptyLine?: CSSInterpolation;
+    content?: CSSInterpolation;
+    titleBlock?: CSSInterpolation;
+    splitView?: CSSInterpolation;
+}
+declare const _default: (styleOverride: ReactDiffViewerStylesOverride, useDarkTheme?: boolean, nonce?: string) => ReactDiffViewerStyles;
+export default _default;

package/lib/src/styles.js

@@ -0,0 +1,291 @@
+"use strict";
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const create_instance_1 = __importDefault(require("@emotion/css/create-instance"));
+// eslint-disable-next-line import/no-anonymous-default-export
+exports.default = (styleOverride, useDarkTheme = false, nonce = '') => {
+    const { variables: overrideVariables = {} } = styleOverride, styles = __rest(styleOverride, ["variables"]);
+    const themeVariables = {
+        light: Object.assign({
+            diffViewerBackground: '#fff',
+            diffViewerColor: '#212529',
+            addedBackground: '#e6ffed',
+            addedColor: '#24292e',
+            removedBackground: '#ffeef0',
+            removedColor: '#24292e',
+            changedBackground: '#fffbdd',
+            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',
+        }, (overrideVariables.light || {})),
+        dark: Object.assign({
+            diffViewerBackground: '#2e303c',
+            diffViewerColor: '#FFF',
+            addedBackground: '#044B53',
+            addedColor: 'white',
+            removedBackground: '#632F34',
+            removedColor: 'white',
+            changedBackground: '#3e302c',
+            wordAddedBackground: '#055d67',
+            wordRemovedBackground: '#7d383f',
+            addedGutterBackground: '#034148',
+            removedGutterBackground: '#632b30',
+            gutterBackground: '#2c2f3a',
+            gutterBackgroundDark: '#262933',
+            highlightBackground: '#2a3967',
+            highlightGutterBackground: '#2d4077',
+            codeFoldGutterBackground: '#21232b',
+            codeFoldBackground: '#262831',
+            emptyLineBackground: '#363946',
+            gutterColor: '#666c87',
+            addedGutterColor: '#8c8c8c',
+            removedGutterColor: '#8c8c8c',
+            codeFoldContentColor: '#656a8b',
+            diffViewerTitleBackground: '#2f323e',
+            diffViewerTitleColor: '#555a7b',
+            diffViewerTitleBorderColor: '#353846',
+        }, (overrideVariables.dark || {})),
+    };
+    const variables = useDarkTheme ? themeVariables.dark : themeVariables.light;
+    const { css, cx } = (0, create_instance_1.default)({ key: 'react-diff', nonce });
+    const content = css({
+        width: '100%',
+        label: 'content',
+    });
+    const splitView = css({
+        [`.${content}`]: {
+            width: '50%',
+        },
+        label: 'split-view',
+    });
+    const diffContainer = css({
+        width: '100%',
+        background: variables.diffViewerBackground,
+        pre: {
+            margin: 0,
+            whiteSpace: 'pre-wrap',
+            lineHeight: '25px',
+        },
+        label: 'diff-container',
+        borderCollapse: 'collapse',
+    });
+    const codeFoldContent = css({
+        color: variables.codeFoldContentColor,
+        label: 'code-fold-content',
+    });
+    const contentText = css({
+        color: variables.diffViewerColor,
+        label: 'content-text',
+    });
+    const titleBlock = css({
+        background: variables.diffViewerTitleBackground,
+        padding: 10,
+        borderBottom: `1px solid ${variables.diffViewerTitleBorderColor}`,
+        label: 'title-block',
+        ':last-child': {
+            borderLeft: `1px solid ${variables.diffViewerTitleBorderColor}`,
+        },
+        [`.${contentText}`]: {
+            color: variables.diffViewerTitleColor,
+        },
+    });
+    const lineNumber = css({
+        color: variables.gutterColor,
+        label: 'line-number',
+    });
+    const diffRemoved = css({
+        background: variables.removedBackground,
+        color: variables.removedColor,
+        pre: {
+            color: variables.removedColor,
+        },
+        [`.${lineNumber}`]: {
+            color: variables.removedGutterColor,
+        },
+        label: 'diff-removed',
+    });
+    const diffAdded = css({
+        background: variables.addedBackground,
+        color: variables.addedColor,
+        pre: {
+            color: variables.addedColor,
+        },
+        [`.${lineNumber}`]: {
+            color: variables.addedGutterColor,
+        },
+        label: 'diff-added',
+    });
+    const diffChanged = css({
+        background: variables.changedBackground,
+        [`.${lineNumber}`]: {
+            color: variables.gutterColor,
+        },
+        label: 'diff-changed',
+    });
+    const wordDiff = css({
+        padding: 2,
+        display: 'inline-flex',
+        borderRadius: 4,
+        wordBreak: 'break-all',
+        label: 'word-diff',
+    });
+    const wordAdded = css({
+        background: variables.wordAddedBackground,
+        label: 'word-added',
+    });
+    const wordRemoved = css({
+        background: variables.wordRemovedBackground,
+        label: 'word-removed',
+    });
+    const codeFoldGutter = css({
+        backgroundColor: variables.codeFoldGutterBackground,
+        label: 'code-fold-gutter',
+    });
+    const codeFold = css({
+        backgroundColor: variables.codeFoldBackground,
+        height: 40,
+        fontSize: 14,
+        fontWeight: 700,
+        label: 'code-fold',
+        a: {
+            textDecoration: 'underline !important',
+            cursor: 'pointer',
+            pre: {
+                display: 'inline',
+            },
+        },
+    });
+    const emptyLine = css({
+        backgroundColor: variables.emptyLineBackground,
+        label: 'empty-line',
+    });
+    const marker = css({
+        width: 25,
+        paddingLeft: 10,
+        paddingRight: 10,
+        userSelect: 'none',
+        label: 'marker',
+        [`&.${diffAdded}`]: {
+            pre: {
+                color: variables.addedColor,
+            },
+        },
+        [`&.${diffRemoved}`]: {
+            pre: {
+                color: variables.removedColor,
+            },
+        },
+    });
+    const highlightedLine = css({
+        background: variables.highlightBackground,
+        label: 'highlighted-line',
+        [`.${wordAdded}, .${wordRemoved}`]: {
+            backgroundColor: 'initial',
+        },
+    });
+    const highlightedGutter = css({
+        label: 'highlighted-gutter',
+    });
+    const gutter = css({
+        userSelect: 'none',
+        minWidth: 50,
+        padding: '0 10px',
+        whiteSpace: 'nowrap',
+        label: 'gutter',
+        textAlign: 'right',
+        background: variables.gutterBackground,
+        '&:hover': {
+            cursor: 'pointer',
+            background: variables.gutterBackgroundDark,
+            pre: {
+                opacity: 1,
+            },
+        },
+        pre: {
+            opacity: 0.5,
+        },
+        [`&.${diffAdded}`]: {
+            background: variables.addedGutterBackground,
+        },
+        [`&.${diffRemoved}`]: {
+            background: variables.removedGutterBackground,
+        },
+        [`&.${highlightedGutter}`]: {
+            background: variables.highlightGutterBackground,
+            '&:hover': {
+                background: variables.highlightGutterBackground,
+            },
+        },
+    });
+    const emptyGutter = css({
+        '&:hover': {
+            background: variables.gutterBackground,
+            cursor: 'initial',
+        },
+        label: 'empty-gutter',
+    });
+    const line = css({
+        verticalAlign: 'baseline',
+        label: 'line',
+    });
+    const defaultStyles = {
+        diffContainer,
+        diffRemoved,
+        diffAdded,
+        diffChanged,
+        splitView,
+        marker,
+        highlightedGutter,
+        highlightedLine,
+        gutter,
+        line,
+        wordDiff,
+        wordAdded,
+        wordRemoved,
+        codeFoldGutter,
+        codeFold,
+        emptyGutter,
+        emptyLine,
+        lineNumber,
+        contentText,
+        content,
+        codeFoldContent,
+        titleBlock,
+    };
+    const computerOverrideStyles = Object.keys(styles).reduce((acc, key) => (Object.assign(Object.assign({}, acc), {
+        [key]: css(styles[key]),
+    })), {});
+    return Object.keys(defaultStyles).reduce((acc, key) => (Object.assign(Object.assign({}, acc), {
+        [key]: computerOverrideStyles[key]
+            ? cx(defaultStyles[key], computerOverrideStyles[key])
+            : defaultStyles[key],
+    })), {});
+};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-diff-viewer-continued",
-  "version": "3.3.0",
+  "version": "3.3.1",
   "private": false,
   "description": "Continuation of a simple and beautiful text diff viewer component made with diff and React",
   "keywords": [
@@ -19,8 +19,8 @@
     "Pranesh Ravi<praneshpranesh@gmail.com>",
     "Bart Riepe <bart@serial-experiments.com>"
   ],
-  "main": "lib/index",
-  "typings": "lib/index",
+  "main": "lib/src/index",
+  "typings": "lib/src/index",
   "scripts": {
     "build": "tsc --outDir lib/",
     "build:examples": "webpack --progress",