react-diff-viewer-continued 3.2.6 → 3.3.1

package/CHANGELOG.md

@@ -1,3 +1,22 @@
+## [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)
+
+
+### Bug Fixes
+
+* update dependencies and correct zero width extraLines (fixes [#29](https://github.com/aeolun/react-diff-viewer-continued/issues/29)) ([c4b317a](https://github.com/aeolun/react-diff-viewer-continued/commit/c4b317af31935740dd9fe8ac526ceb8fd63db6a9))
+
+
+### Features
+
+* add ability to always show certain lines ([896eb32](https://github.com/aeolun/react-diff-viewer-continued/commit/896eb323389cec2055abc7dede40adcbcbf6b506))
+
 ## [3.2.6](https://github.com/aeolun/react-diff-viewer-continued/compare/v3.2.5...v3.2.6) (2023-03-02)
 
 

package/README.md

@@ -68,17 +68,18 @@ class Diff extends PureComponent {
 ## Props
 
 | Prop                      | Type                      | Default                        | Description                                                                                                                                                                                                                                                                                                                                                                                                      |
-| ------------------------- | ------------------------- | ------------------------------ | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| oldValue                  | `string | Object`                  | `''`                           | Old value as string (or Object if using `diffJson`).                                                                                                                                                                                                                                                                                                                                                                                             |
-| newValue                  | `string | Object`                  | `''`                           | New value as string (or Object if using `diffJson`).                                                                                                                                                                                                                                                                                                                                                                                             |
+|---------------------------|---------------------------|--------------------------------|------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|
+| oldValue                  | `string                   | Object`                        | `''`                                                                                                                                                                                                                                                                                                                                                                                                             | Old value as string (or Object if using `diffJson`).                                                                                                                                                                                                                                                                                                                                                                                             |
+| newValue                  | `string                   | Object`                        | `''`                                                                                                                                                                                                                                                                                                                                                                                                             | New value as string (or Object if using `diffJson`).                                                                                                                                                                                                                                                                                                                                                                                             |
 | splitView                 | `boolean`                 | `true`                         | Switch between `unified` and `split` view.                                                                                                                                                                                                                                                                                                                                                                       |
 | disableWordDiff           | `boolean`                 | `false`                        | Show and hide word diff in a diff line.                                                                                                                                                                                                                                                                                                                                                                          |
 | compareMethod             | `DiffMethod`              | `DiffMethod.CHARS`             | JsDiff text diff method used for diffing strings. Check out the [guide](https://github.com/praneshr/react-diff-viewer/tree/v3.0.0#text-block-diff-comparison) to use different methods.                                                                                                                                                                                                                          |
 | renderGutter              | `(diffData) => ReactNode` | `undefined`                    | Function that can be used to render an extra gutter with various information next to the line number.                                                                                                                                                                                                                                                                                                            |
 | hideLineNumbers           | `boolean`                 | `false`                        | Show and hide line numbers.                                                                                                                                                                                                                                                                                                                                                                                      |
+| alwaysShowLines           | `string[]`                | `[]`                          | List of lines to always be shown, regardless of diff status. Line number are prefixed with `L` and `R` for the left and right section of the diff viewer, respectively. For example, `L-20` means 20th line in the left pane. `extraLinesSurroundingDiff` applies to these lines as well.                                                                                                                        |
 | renderContent             | `function`                | `undefined`                    | Render Prop API to render code in the diff viewer. Helpful for [syntax highlighting](#syntax-highlighting)                                                                                                                                                                                                                                                                                                       |
 | onLineNumberClick         | `function`                | `undefined`                    | Event handler for line number click. `(lineId: string) => void`                                                                                                                                                                                                                                                                                                                                                  |
-| highlightLines            | `array[string]`           | `[]`                           | List of lines to be highlighted. Works together with `onLineNumberClick`. Line number are prefixed with `L` and `R` for the left and right section of the diff viewer, respectively. For example, `L-20` means 20th line in the left pane. To highlight a range of line numbers, pass the prefixed line number as an array. For example, `[L-2, L-3, L-4, L-5]` will highlight the lines `2-5` in the left pane. |
+| highlightLines            | `string[]`                | `[]`                           | List of lines to be highlighted. Works together with `onLineNumberClick`. Line number are prefixed with `L` and `R` for the left and right section of the diff viewer, respectively. For example, `L-20` means 20th line in the left pane. To highlight a range of line numbers, pass the prefixed line number as an array. For example, `[L-2, L-3, L-4, L-5]` will highlight the lines `2-5` in the left pane. |
 | showDiffOnly              | `boolean`                 | `true`                         | Shows only the diffed lines and folds the unchanged lines                                                                                                                                                                                                                                                                                                                                                        |
 | extraLinesSurroundingDiff | `number`                  | `3`                            | Number of extra unchanged lines surrounding the diff. Works along with `showDiffOnly`.                                                                                                                                                                                                                                                                                                                           |
 | codeFoldMessageRenderer   | `function`                | `Expand {number} of lines ...` | Render Prop API to render code fold message.                                                                                                                                                                                                                                                                                                                                                                     |

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/{compute-lines.d.ts → src/compute-lines.d.ts}

@@ -49,6 +49,7 @@ export interface JsDiffChangeObject {
  * @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) => ComputedLineInformation;
+declare const computeLineInformation: (oldString: string | Object, newString: string | Object, disableWordDiff?: boolean, lineCompareMethod?: string, linesOffset?: number, showLines?: string[]) => ComputedLineInformation;
 export { computeLineInformation };

package/lib/{compute-lines.js → src/compute-lines.js}

@@ -1,7 +1,30 @@
 "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 = require("diff");
+const diff = __importStar(require("diff"));
 const jsDiff = diff;
 var DiffType;
 (function (DiffType) {
@@ -9,7 +32,7 @@ var DiffType;
     DiffType[DiffType["ADDED"] = 1] = "ADDED";
     DiffType[DiffType["REMOVED"] = 2] = "REMOVED";
     DiffType[DiffType["CHANGED"] = 3] = "CHANGED";
-})(DiffType = exports.DiffType || (exports.DiffType = {}));
+})(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) {
@@ -21,7 +44,7 @@ var DiffMethod;
     DiffMethod["SENTENCES"] = "diffSentences";
     DiffMethod["CSS"] = "diffCss";
     DiffMethod["JSON"] = "diffJson";
-})(DiffMethod = exports.DiffMethod || (exports.DiffMethod = {}));
+})(DiffMethod || (exports.DiffMethod = DiffMethod = {}));
 /**
  * Splits diff text by new line and computes final list of diff lines based on
  * conditions.
@@ -83,8 +106,9 @@ const computeDiff = (oldValue, newValue, compareMethod = DiffMethod.CHARS) => {
  * @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) => {
+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') {
@@ -180,6 +204,9 @@ const computeLineInformation = (oldString, newString, disableWordDiff = false, l
                 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;
             }

package/lib/{index.d.ts → src/index.d.ts}

@@ -1,7 +1,7 @@
 import * as React from 'react';
-import * as PropTypes from 'prop-types';
 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"
@@ -15,9 +15,13 @@ export interface ReactDiffViewerProps {
     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) => JSX.Element;
-    codeFoldMessageRenderer?: (totalFoldedLines: number, leftStartLineNumber: number, rightStartLineNumber: number) => JSX.Element;
+    renderContent?: (source: string) => ReactElement;
+    codeFoldMessageRenderer?: (totalFoldedLines: number, leftStartLineNumber: number, rightStartLineNumber: number) => ReactElement;
     onLineNumberClick?: (lineId: string, event: React.MouseEvent<HTMLTableCellElement>) => void;
     renderGutter?: (data: {
         lineNumber: number;
@@ -27,12 +31,13 @@ export interface ReactDiffViewerProps {
         additionalLineNumber: number;
         additionalPrefix: LineNumberPrefix;
         styles: ReactDiffViewerStyles;
-    }) => JSX.Element;
+    }) => ReactElement;
     highlightLines?: string[];
     styles?: ReactDiffViewerStylesOverride;
     useDarkTheme?: boolean;
-    leftTitle?: string | JSX.Element;
-    rightTitle?: string | JSX.Element;
+    leftTitle?: string | ReactElement;
+    rightTitle?: string | ReactElement;
+    nonce?: string;
 }
 export interface ReactDiffViewerState {
     expandedBlocks?: number[];
@@ -40,24 +45,6 @@ export interface ReactDiffViewerState {
 declare class DiffViewer extends React.Component<ReactDiffViewerProps, ReactDiffViewerState> {
     private styles;
     static defaultProps: ReactDiffViewerProps;
-    static propTypes: {
-        oldValue: PropTypes.Validator<any>;
-        newValue: PropTypes.Validator<any>;
-        splitView: PropTypes.Requireable<boolean>;
-        disableWordDiff: PropTypes.Requireable<boolean>;
-        compareMethod: PropTypes.Requireable<DiffMethod>;
-        renderContent: PropTypes.Requireable<(...args: any[]) => any>;
-        renderGutter: PropTypes.Requireable<(...args: any[]) => any>;
-        onLineNumberClick: PropTypes.Requireable<(...args: any[]) => any>;
-        extraLinesSurroundingDiff: PropTypes.Requireable<number>;
-        styles: PropTypes.Requireable<object>;
-        hideLineNumbers: PropTypes.Requireable<boolean>;
-        showDiffOnly: PropTypes.Requireable<boolean>;
-        highlightLines: PropTypes.Requireable<string[]>;
-        leftTitle: PropTypes.Requireable<string | PropTypes.ReactElementLike>;
-        rightTitle: PropTypes.Requireable<string | PropTypes.ReactElementLike>;
-        linesOffset: PropTypes.Requireable<number>;
-    };
     constructor(props: ReactDiffViewerProps);
     /**
      * Resets code block expand to the initial stage. Will be exposed to the parent component via
@@ -121,7 +108,7 @@ declare class DiffViewer extends React.Component<ReactDiffViewerProps, ReactDiff
      * @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) => JSX.Element;
+    renderInlineView: ({ left, right }: LineInformation, index: number) => ReactElement;
     /**
      * Returns a function with clicked block number in the closure.
      *
@@ -142,7 +129,7 @@ declare class DiffViewer extends React.Component<ReactDiffViewerProps, ReactDiff
      * Generates the entire diff view.
      */
     private renderDiff;
-    render: () => JSX.Element;
+    render: () => ReactElement;
 }
 export default DiffViewer;
 export { ReactDiffViewerStylesOverride, DiffMethod };

package/lib/{index.js → src/index.js}

@@ -1,19 +1,46 @@
 "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 React = require("react");
-const PropTypes = require("prop-types");
-const classnames_1 = require("classnames");
+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 = require("./styles");
+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 || (exports.LineNumberPrefix = {}));
+})(LineNumberPrefix || (exports.LineNumberPrefix = LineNumberPrefix = {}));
 class DiffViewer extends React.Component {
     constructor(props) {
         super(props);
@@ -68,10 +95,10 @@ class DiffViewer extends React.Component {
          */
         this.renderWordDiff = (diffArray, renderer) => {
             return diffArray.map((wordDiff, i) => {
-                return (React.createElement("span", { key: i, className: (0, classnames_1.default)(this.styles.wordDiff, {
+                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,
-                    }) }, renderer ? renderer(wordDiff.value) : wordDiff.value));
+                    }), children: renderer ? renderer(wordDiff.value) : wordDiff.value }, i));
             });
         };
         /**
@@ -105,53 +132,42 @@ class DiffViewer extends React.Component {
             else {
                 content = value;
             }
-            return (React.createElement(React.Fragment, null,
-                !this.props.hideLineNumbers && (React.createElement("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,
-                    }) },
-                    React.createElement("pre", { className: this.styles.lineNumber }, lineNumber))),
-                !this.props.splitView && !this.props.hideLineNumbers && (React.createElement("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,
-                    }) },
-                    React.createElement("pre", { className: this.styles.lineNumber }, additionalLineNumber))),
-                this.props.renderGutter
-                    ? this.props.renderGutter({
-                        lineNumber,
-                        type,
-                        prefix,
-                        value,
-                        additionalLineNumber,
-                        additionalPrefix,
-                        styles: this.styles,
-                    })
-                    : null,
-                React.createElement("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,
-                    }) },
-                    React.createElement("pre", null,
-                        added && '+',
-                        removed && '-')),
-                React.createElement("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,
-                    }) },
-                    React.createElement("pre", { className: this.styles.contentText }, content))));
+            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.
@@ -162,9 +178,7 @@ class DiffViewer extends React.Component {
          * @param index React key for the lines.
          */
         this.renderSplitView = ({ left, right }, index) => {
-            return (React.createElement("tr", { key: index, className: this.styles.line },
-                this.renderLine(left.lineNumber, left.type, LineNumberPrefix.LEFT, left.value),
-                this.renderLine(right.lineNumber, right.type, LineNumberPrefix.RIGHT, right.value)));
+            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.
@@ -177,9 +191,7 @@ class DiffViewer extends React.Component {
         this.renderInlineView = ({ left, right }, index) => {
             let content;
             if (left.type === compute_lines_1.DiffType.REMOVED && right.type === compute_lines_1.DiffType.ADDED) {
-                return (React.createElement(React.Fragment, { key: index },
-                    React.createElement("tr", { className: this.styles.line }, this.renderLine(left.lineNumber, left.type, LineNumberPrefix.LEFT, left.value, null)),
-                    React.createElement("tr", { className: this.styles.line }, this.renderLine(null, right.type, LineNumberPrefix.RIGHT, right.value, right.lineNumber))));
+                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);
@@ -190,7 +202,7 @@ class DiffViewer extends React.Component {
             if (right.type === compute_lines_1.DiffType.ADDED) {
                 content = this.renderLine(null, right.type, LineNumberPrefix.RIGHT, right.value, right.lineNumber);
             }
-            return (React.createElement("tr", { key: index, className: this.styles.line }, content));
+            return ((0, jsx_runtime_1.jsx)("tr", { className: this.styles.line, children: content }, index));
         };
         /**
          * Returns a function with clicked block number in the closure.
@@ -209,98 +221,59 @@ class DiffViewer extends React.Component {
          */
         this.renderSkippedLineIndicator = (num, blockNumber, leftBlockLineNumber, rightBlockLineNumber) => {
             const { hideLineNumbers, splitView } = this.props;
-            const message = this.props.codeFoldMessageRenderer ? (this.props.codeFoldMessageRenderer(num, leftBlockLineNumber, rightBlockLineNumber)) : (React.createElement("pre", { className: this.styles.codeFoldContent },
-                "Expand ",
-                num,
-                " lines ..."));
-            const content = (React.createElement("td", null,
-                React.createElement("a", { onClick: this.onBlockClickProxy(blockNumber), tabIndex: 0 }, message)));
+            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 (React.createElement("tr", { key: `${leftBlockLineNumber}-${rightBlockLineNumber}`, className: this.styles.codeFold },
-                !hideLineNumbers && React.createElement("td", { className: this.styles.codeFoldGutter }),
-                this.props.renderGutter ? (React.createElement("td", { className: this.styles.codeFoldGutter })) : null,
-                React.createElement("td", { className: (0, classnames_1.default)({
-                        [this.styles.codeFoldGutter]: isUnifiedViewWithoutLineNumbers,
-                    }) }),
-                isUnifiedViewWithoutLineNumbers ? (React.createElement(React.Fragment, null,
-                    React.createElement("td", null),
-                    content)) : (React.createElement(React.Fragment, null,
-                    content,
-                    this.props.renderGutter ? React.createElement("td", null) : null,
-                    React.createElement("td", null))),
-                React.createElement("td", null),
-                React.createElement("td", null)));
+            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);
+            const { lineInformation, diffLines } = (0, compute_lines_1.computeLineInformation)(oldValue, newValue, disableWordDiff, compareMethod, linesOffset, this.props.alwaysShowLines);
             const extraLines = this.props.extraLinesSurroundingDiff < 0
                 ? 0
-                : this.props.extraLinesSurroundingDiff;
-            let skippedLines = [];
-            return lineInformation.map((line, i) => {
-                const diffBlockStart = diffLines[0];
-                const currentPosition = diffBlockStart - i;
+                : 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) {
-                    if (currentPosition === -extraLines) {
-                        skippedLines = [];
-                        diffLines.shift();
-                    }
-                    if (line.left.type === compute_lines_1.DiffType.DEFAULT &&
-                        (currentPosition > extraLines ||
-                            typeof diffBlockStart === 'undefined') &&
-                        !this.state.expandedBlocks.includes(diffBlockStart)) {
-                        skippedLines.push(i + 1);
-                        // show skipped line indicator only if there is more than one line to hide
-                        if (i === lineInformation.length - 1 && skippedLines.length > 1) {
-                            return this.renderSkippedLineIndicator(skippedLines.length, diffBlockStart, line.left.lineNumber, line.right.lineNumber);
-                            // if we are trying to hide the last line, just show it
+                    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 (i < lineInformation.length - 1) {
+                        else if (!this.state.expandedBlocks.includes(blockIndex)) {
                             return null;
                         }
                     }
                 }
                 const diffNodes = splitView
-                    ? this.renderSplitView(line, i)
-                    : this.renderInlineView(line, i);
-                if (currentPosition === extraLines && skippedLines.length > 0) {
-                    const { length } = skippedLines;
-                    skippedLines = [];
-                    return (React.createElement(React.Fragment, { key: i },
-                        this.renderSkippedLineIndicator(length, diffBlockStart, line.left.lineNumber, line.right.lineNumber),
-                        diffNodes));
-                }
+                    ? this.renderSplitView(line, lineIndex)
+                    : this.renderInlineView(line, lineIndex);
                 return diffNodes;
             });
         };
         this.render = () => {
-            const { oldValue, newValue, useDarkTheme, leftTitle, rightTitle, splitView, hideLineNumbers, } = this.props;
+            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);
+            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) && (React.createElement("tr", null,
-                React.createElement("td", { colSpan: (splitView ? colSpanOnSplitView : colSpanOnInlineView) +
-                        columnExtension, className: this.styles.titleBlock },
-                    React.createElement("pre", { className: this.styles.contentText }, leftTitle)),
-                splitView && (React.createElement("td", { colSpan: colSpanOnSplitView + columnExtension, className: this.styles.titleBlock },
-                    React.createElement("pre", { className: this.styles.contentText }, rightTitle)))));
-            return (React.createElement("table", { className: (0, classnames_1.default)(this.styles.diffContainer, {
+            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,
-                }) },
-                React.createElement("tbody", null,
-                    title,
-                    nodes)));
+                }), children: (0, jsx_runtime_1.jsxs)("tbody", { children: [title, nodes] }) }));
         };
         this.state = {
             expandedBlocks: [],
@@ -320,23 +293,6 @@ DiffViewer.defaultProps = {
     showDiffOnly: true,
     useDarkTheme: false,
     linesOffset: 0,
-};
-DiffViewer.propTypes = {
-    oldValue: PropTypes.any.isRequired,
-    newValue: PropTypes.any.isRequired,
-    splitView: PropTypes.bool,
-    disableWordDiff: PropTypes.bool,
-    compareMethod: PropTypes.oneOf(Object.values(compute_lines_1.DiffMethod)),
-    renderContent: PropTypes.func,
-    renderGutter: PropTypes.func,
-    onLineNumberClick: PropTypes.func,
-    extraLinesSurroundingDiff: PropTypes.number,
-    styles: PropTypes.object,
-    hideLineNumbers: PropTypes.bool,
-    showDiffOnly: PropTypes.bool,
-    highlightLines: PropTypes.arrayOf(PropTypes.string),
-    leftTitle: PropTypes.oneOfType([PropTypes.string, PropTypes.element]),
-    rightTitle: PropTypes.oneOfType([PropTypes.string, PropTypes.element]),
-    linesOffset: PropTypes.number,
+    nonce: '',
 };
 exports.default = DiffViewer;

package/lib/{styles.d.ts → src/styles.d.ts}

@@ -77,5 +77,5 @@ export interface ReactDiffViewerStylesOverride {
     titleBlock?: CSSInterpolation;
     splitView?: CSSInterpolation;
 }
-declare const _default: (styleOverride: ReactDiffViewerStylesOverride, useDarkTheme?: boolean) => ReactDiffViewerStyles;
+declare const _default: (styleOverride: ReactDiffViewerStylesOverride, useDarkTheme?: boolean, nonce?: string) => ReactDiffViewerStyles;
 export default _default;

package/lib/{styles.js → src/styles.js}

@@ -10,10 +10,13 @@ var __rest = (this && this.__rest) || function (s, e) {
         }
     return t;
 };
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
 Object.defineProperty(exports, "__esModule", { value: true });
-const css_1 = require("@emotion/css");
+const create_instance_1 = __importDefault(require("@emotion/css/create-instance"));
 // eslint-disable-next-line import/no-anonymous-default-export
-exports.default = (styleOverride, useDarkTheme = false) => {
+exports.default = (styleOverride, useDarkTheme = false, nonce = '') => {
     const { variables: overrideVariables = {} } = styleOverride, styles = __rest(styleOverride, ["variables"]);
     const themeVariables = {
         light: Object.assign({
@@ -72,17 +75,18 @@ exports.default = (styleOverride, useDarkTheme = false) => {
         }, (overrideVariables.dark || {})),
     };
     const variables = useDarkTheme ? themeVariables.dark : themeVariables.light;
-    const content = (0, css_1.css)({
+    const { css, cx } = (0, create_instance_1.default)({ key: 'react-diff', nonce });
+    const content = css({
         width: '100%',
         label: 'content',
     });
-    const splitView = (0, css_1.css)({
+    const splitView = css({
         [`.${content}`]: {
             width: '50%',
         },
         label: 'split-view',
     });
-    const diffContainer = (0, css_1.css)({
+    const diffContainer = css({
         width: '100%',
         background: variables.diffViewerBackground,
         pre: {
@@ -93,15 +97,15 @@ exports.default = (styleOverride, useDarkTheme = false) => {
         label: 'diff-container',
         borderCollapse: 'collapse',
     });
-    const codeFoldContent = (0, css_1.css)({
+    const codeFoldContent = css({
         color: variables.codeFoldContentColor,
         label: 'code-fold-content',
     });
-    const contentText = (0, css_1.css)({
+    const contentText = css({
         color: variables.diffViewerColor,
         label: 'content-text',
     });
-    const titleBlock = (0, css_1.css)({
+    const titleBlock = css({
         background: variables.diffViewerTitleBackground,
         padding: 10,
         borderBottom: `1px solid ${variables.diffViewerTitleBorderColor}`,
@@ -113,11 +117,11 @@ exports.default = (styleOverride, useDarkTheme = false) => {
             color: variables.diffViewerTitleColor,
         },
     });
-    const lineNumber = (0, css_1.css)({
+    const lineNumber = css({
         color: variables.gutterColor,
         label: 'line-number',
     });
-    const diffRemoved = (0, css_1.css)({
+    const diffRemoved = css({
         background: variables.removedBackground,
         color: variables.removedColor,
         pre: {
@@ -128,7 +132,7 @@ exports.default = (styleOverride, useDarkTheme = false) => {
         },
         label: 'diff-removed',
     });
-    const diffAdded = (0, css_1.css)({
+    const diffAdded = css({
         background: variables.addedBackground,
         color: variables.addedColor,
         pre: {
@@ -139,33 +143,33 @@ exports.default = (styleOverride, useDarkTheme = false) => {
         },
         label: 'diff-added',
     });
-    const diffChanged = (0, css_1.css)({
+    const diffChanged = css({
         background: variables.changedBackground,
         [`.${lineNumber}`]: {
             color: variables.gutterColor,
         },
         label: 'diff-changed',
     });
-    const wordDiff = (0, css_1.css)({
+    const wordDiff = css({
         padding: 2,
         display: 'inline-flex',
         borderRadius: 4,
         wordBreak: 'break-all',
         label: 'word-diff',
     });
-    const wordAdded = (0, css_1.css)({
+    const wordAdded = css({
         background: variables.wordAddedBackground,
         label: 'word-added',
     });
-    const wordRemoved = (0, css_1.css)({
+    const wordRemoved = css({
         background: variables.wordRemovedBackground,
         label: 'word-removed',
     });
-    const codeFoldGutter = (0, css_1.css)({
+    const codeFoldGutter = css({
         backgroundColor: variables.codeFoldGutterBackground,
         label: 'code-fold-gutter',
     });
-    const codeFold = (0, css_1.css)({
+    const codeFold = css({
         backgroundColor: variables.codeFoldBackground,
         height: 40,
         fontSize: 14,
@@ -179,11 +183,11 @@ exports.default = (styleOverride, useDarkTheme = false) => {
             },
         },
     });
-    const emptyLine = (0, css_1.css)({
+    const emptyLine = css({
         backgroundColor: variables.emptyLineBackground,
         label: 'empty-line',
     });
-    const marker = (0, css_1.css)({
+    const marker = css({
         width: 25,
         paddingLeft: 10,
         paddingRight: 10,
@@ -200,17 +204,17 @@ exports.default = (styleOverride, useDarkTheme = false) => {
             },
         },
     });
-    const highlightedLine = (0, css_1.css)({
+    const highlightedLine = css({
         background: variables.highlightBackground,
         label: 'highlighted-line',
         [`.${wordAdded}, .${wordRemoved}`]: {
             backgroundColor: 'initial',
         },
     });
-    const highlightedGutter = (0, css_1.css)({
+    const highlightedGutter = css({
         label: 'highlighted-gutter',
     });
-    const gutter = (0, css_1.css)({
+    const gutter = css({
         userSelect: 'none',
         minWidth: 50,
         padding: '0 10px',
@@ -241,14 +245,14 @@ exports.default = (styleOverride, useDarkTheme = false) => {
             },
         },
     });
-    const emptyGutter = (0, css_1.css)({
+    const emptyGutter = css({
         '&:hover': {
             background: variables.gutterBackground,
             cursor: 'initial',
         },
         label: 'empty-gutter',
     });
-    const line = (0, css_1.css)({
+    const line = css({
         verticalAlign: 'baseline',
         label: 'line',
     });
@@ -277,11 +281,11 @@ exports.default = (styleOverride, useDarkTheme = false) => {
         titleBlock,
     };
     const computerOverrideStyles = Object.keys(styles).reduce((acc, key) => (Object.assign(Object.assign({}, acc), {
-        [key]: (0, css_1.css)(styles[key]),
+        [key]: css(styles[key]),
     })), {});
     return Object.keys(defaultStyles).reduce((acc, key) => (Object.assign(Object.assign({}, acc), {
         [key]: computerOverrideStyles[key]
-            ? (0, css_1.cx)(defaultStyles[key], computerOverrideStyles[key])
+            ? cx(defaultStyles[key], computerOverrideStyles[key])
             : defaultStyles[key],
     })), {});
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-diff-viewer-continued",
-  "version": "3.2.6",
+  "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",
@@ -35,60 +35,60 @@
     "prettier": "prettier --write ."
   },
   "dependencies": {
-    "@emotion/css": "^11.10.5",
-    "classnames": "^2.3.1",
+    "@emotion/css": "^11.11.2",
+    "classnames": "^2.3.2",
     "diff": "^5.1.0",
     "memoize-one": "^6.0.0",
     "prop-types": "^15.8.1"
   },
   "devDependencies": {
-    "@babel/core": "^7.18.6",
-    "@babel/preset-env": "^7.18.6",
-    "@babel/preset-react": "^7.18.6",
-    "@babel/preset-typescript": "^7.18.6",
+    "@babel/core": "^7.23.2",
+    "@babel/preset-env": "^7.23.2",
+    "@babel/preset-react": "^7.22.15",
+    "@babel/preset-typescript": "^7.23.2",
     "@semantic-release/changelog": "6.0.1",
     "@semantic-release/git": "10.0.1",
     "@testing-library/react": "^13.4.0",
-    "@types/diff": "^5.0.2",
-    "@types/expect": "^1.20.3",
+    "@types/diff": "^5.0.6",
+    "@types/expect": "^1.20.4",
     "@types/memoize-one": "^4.1.1",
-    "@types/mocha": "^5.2.5",
-    "@types/node": "^12.0.12",
+    "@types/mocha": "^5.2.7",
+    "@types/node": "^12.20.55",
     "@types/prop-types": "15.7.5",
-    "@types/react": "^16.4.14",
-    "@types/react-dom": "^16.0.8",
-    "@types/webpack": "^4.4.13",
-    "@typescript-eslint/eslint-plugin": "^5.30.5",
-    "@typescript-eslint/parser": "^5.30.5",
-    "css-loader": "^6.7.1",
-    "eslint": "^8.19.0",
+    "@types/react": "^16.14.49",
+    "@types/react-dom": "^16.9.20",
+    "@types/webpack": "^4.41.34",
+    "@typescript-eslint/eslint-plugin": "^5.62.0",
+    "@typescript-eslint/parser": "^5.62.0",
+    "css-loader": "^6.8.1",
+    "eslint": "^8.51.0",
     "eslint-config-airbnb": "^19.0.4",
-    "eslint-plugin-import": "^2.26.0",
-    "eslint-plugin-jsx-a11y": "^6.6.0",
-    "eslint-plugin-react": "^7.30.1",
+    "eslint-plugin-import": "^2.28.1",
+    "eslint-plugin-jsx-a11y": "^6.7.1",
+    "eslint-plugin-react": "^7.33.2",
     "eslint-plugin-react-hooks": "^4.6.0",
-    "expect": "^28.1.1",
+    "expect": "^28.1.3",
     "file-loader": "^6.2.0",
     "gh-pages": "^4.0.0",
-    "html-webpack-plugin": "^5.5.0",
-    "jest": "^28.1.2",
-    "jest-environment-jsdom": "^28.1.2",
-    "mini-css-extract-plugin": "^2.6.1",
-    "mocha": "^10.0.0",
-    "prettier": "^2.7.1",
+    "html-webpack-plugin": "^5.5.3",
+    "jest": "^28.1.3",
+    "jest-environment-jsdom": "^28.1.3",
+    "mini-css-extract-plugin": "^2.7.6",
+    "mocha": "^10.2.0",
+    "prettier": "^2.8.8",
     "raw-loader": "^4.0.2",
-    "react": "^18.0.0",
-    "react-dom": "^18.0.0",
-    "sass": "^1.53.0",
-    "sass-loader": "^13.0.2",
-    "semantic-release": "^19.0.3",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
+    "sass": "^1.69.3",
+    "sass-loader": "^13.3.2",
+    "semantic-release": "^19.0.5",
     "spy": "^1.0.0",
-    "ts-loader": "^9.3.1",
-    "ts-node": "^10.8.2",
-    "typescript": "^4.7.4",
-    "webpack": "^5.73.0",
+    "ts-loader": "^9.5.0",
+    "ts-node": "^10.9.1",
+    "typescript": "^5.2.2",
+    "webpack": "^5.89.0",
     "webpack-cli": "^4.10.0",
-    "webpack-dev-server": "^4.9.3"
+    "webpack-dev-server": "^4.15.1"
   },
   "peerDependencies": {
     "react": "^15.3.0 || ^16.0.0 || ^17.0.0 || ^18.0.0",

package/tsconfig.json

@@ -1,16 +1,17 @@
 {
   "compilerOptions": {
     "experimentalDecorators": true,
-    "jsx": "react",
+    "jsx": "react-jsx",
     "module": "commonjs",
     "moduleResolution": "node",
     "noImplicitAny": true,
+    "esModuleInterop": true,
     "target": "es2015",
     "declaration": true,
     "downlevelIteration": true,
     "lib": ["es2017", "dom"],
     "types": ["jest", "node"]
   },
-  "include": ["./src/*"],
+  "include": ["src/", "examples/"],
   "exclude": ["node_modules"]
 }

package/webpack.config.js

@@ -29,7 +29,7 @@ module.exports = {
           {
             loader: 'ts-loader',
             options: {
-              configFile: 'tsconfig.examples.json',
+              configFile: 'tsconfig.json',
             },
           },
         ],

package/tsconfig.examples.json

@@ -1,14 +0,0 @@
-{
-  "compilerOptions": {
-    "experimentalDecorators": true,
-    "jsx": "react-jsx",
-    "module": "es6",
-    "moduleResolution": "node",
-    "allowSyntheticDefaultImports": true,
-    "noImplicitAny": true,
-    "target": "es5",
-    "downlevelIteration": true,
-    "lib": ["es2017", "dom"]
-  },
-  "exclude": ["node_modules"]
-}