react-diff-viewer-continued 3.2.0

package/.eslintrc

@@ -0,0 +1,13 @@
+{
+  "extends": ["airbnb-base", "plugin:@typescript-eslint/recommended"],
+  "rules": {
+    "@typescript-eslint/indent": ["error", 2],
+    "arrow-body-style": "off",
+    "import/extensions": "off"
+  },
+  "env": {
+    "mocha": true,
+    "node": true,
+    "browser": true
+  }
+}

package/.github/workflows/release.yml

@@ -0,0 +1,30 @@
+name: Release
+on:
+  push:
+    branches:
+      - master
+jobs:
+  release:
+    name: Release
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v2
+        with:
+          fetch-depth: 0
+      - name: Setup Node.js
+        uses: actions/setup-node@v2
+        with:
+          node-version: "lts/*"
+      - uses: pnpm/action-setup@v2.2.2
+        with:
+          version: latest
+      - name: Install dependencies
+        run: pnpm i
+      - name: Build application
+        run: pnpm run build
+      - name: Release
+        env:
+          GITHUB_TOKEN: ${{ secrets.GH_TOKEN }}
+          NPM_TOKEN: ${{ secrets.NPM_TOKEN }}
+        run: pnpm dlx semantic-release

package/.idea/modules.xml

@@ -0,0 +1,8 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<project version="4">
+  <component name="ProjectModuleManager">
+    <modules>
+      <module fileurl="file://$PROJECT_DIR$/.idea/react-diff-viewer-continued.iml" filepath="$PROJECT_DIR$/.idea/react-diff-viewer-continued.iml" />
+    </modules>
+  </component>
+</project>

package/.idea/react-diff-viewer-continued.iml

@@ -0,0 +1,8 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<module type="WEB_MODULE" version="4">
+  <component name="NewModuleRootManager">
+    <content url="file://$MODULE_DIR$" />
+    <orderEntry type="inheritedJdk" />
+    <orderEntry type="sourceFolder" forTests="false" />
+  </component>
+</module>

package/.prettierrc

@@ -0,0 +1,4 @@
+{
+  "singleQuote": true,
+  "trailingComma": "all"
+}

package/.travis.yml

@@ -0,0 +1,13 @@
+language: node_js
+node_js: 12
+before_script: yarn build
+after_success: './publish-examples.sh'
+deploy:
+  skip_cleanup: true
+  provider: npm
+  email: praneshpranesh@gmail.com
+  api_key:
+    secure: ytHogDV6wWZKY3eCgdJ5TFCz57llxTe6W1EuLBbg3TvHfpAmcL5XzT77T0lNTYY95XmABwGpf4qvqui1fXVoFqqSXVPSVt9I1aQ4gxBzxPKHGPV++wwgVOBfZErIlYPW4kcYJQvfemBDBfAMQS2u/0si5mZbeyVkvlnhHLnylsc1sJUGGnq9PJxwCagBd/DAhYYCU5d4a9psOwo6GnAwzs37rgVIb5oNhbtex0r1u5D4irweVz4V1TkwhMczw3v8t0d+I2REqjGkqLdKJOt9Q/Uqc7v34wIAy4Xng8zla7PKlzVNDlsA19en4DezJ/YRU3o6JxsMICRDyIRcwaebX2S7S35cif2gJRSF+LRCq2XdHvDAXPt6trQoeo9mSdq6+dL4/uYbhliUOyhzw84CRdY3+VrST1h7h8LAGODQzYJbQs20PkVL2527Bk+eS+tNCNpr/jSWG/iDO477j9jTGNVloF2IRHikbnZDFcF4ZrKE5RHEWSbQzyHkOOTgo5k+p6Doyv4jSgdLlnck2+f5n4Ocs/xh1c0UAphdW/mw/8lAv0+gpoL8f3rfN4AD5LYjjQ7xK5yO6RfIzsmAOqs7WCyY0ewXaPaP6Nz+Ne5Q2CKwVZiqj3qvd4o3aJodnquJ1iKzxbNHd/LFScEQxYSslyRluHrM+7DASPfccA7ePnE=
+  on:
+    tags: true
+    repo: praneshr/react-diff-viewer

package/CHANGELOG.md

@@ -0,0 +1,6 @@
+# [3.2.0](https://github.com/aeolun/react-diff-viewer-continued/compare/v3.1.1...v3.2.0) (2022-07-07)
+
+
+### Features
+
+* update library for react 17, and add custom gutters ([7193350](https://github.com/aeolun/react-diff-viewer-continued/commit/7193350187ed5b13989e6d5e5ade40f3a45c943b))

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2018 Pranesh Ravi
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,365 @@
+<img src='https://github.com/Aeolun/react-diff-viewer-continued/raw/master/logo_dark.png' width="100%" alt='React Diff Viewer' />
+<br/>
+
+[![npm version](https://badge.fury.io/js/react-diff-viewer-continued.svg)](https://badge.fury.io/js/react-diff-viewer-continued)
+[![GitHub license](https://img.shields.io/github/license/aeolun/react-diff-viewer-continued.svg)](https://github.com/aeolun/react-diff-viewer-continued/blob/master/LICENSE)
+
+A simple and beautiful text diff viewer component made with [Diff](https://github.com/kpdecker/jsdiff) and [React](https://reactjs.org).
+
+Inspired from Github diff viewer, it includes features like split view, inline view, word diff, line highlight and more. It is highly customizable and it supports almost all languages.
+
+## Install
+
+```bash
+yarn add react-diff-viewer-continued
+
+# or
+
+npm i react-diff-viewer-continued
+
+# or
+
+pnpm add react-diff-viewer-continued
+```
+
+## Usage
+
+```javascript
+import React, { PureComponent } from 'react';
+import ReactDiffViewer from 'react-diff-viewer-continued';
+
+const oldCode = `
+const a = 10
+const b = 10
+const c = () => console.log('foo')
+
+if(a > 10) {
+  console.log('bar')
+}
+
+console.log('done')
+`;
+const newCode = `
+const a = 10
+const boo = 10
+
+if(a === 10) {
+  console.log('bar')
+}
+`;
+
+class Diff extends PureComponent {
+  render = () => {
+    return (
+      <ReactDiffViewer oldValue={oldCode} newValue={newCode} splitView={true} />
+    );
+  };
+}
+```
+
+## Props
+
+| Prop                      | Type                      | Default                        | Description                                                                                                                                                                                                                                                                                                                                                                                                      |
+|---------------------------|---------------------------|--------------------------------|------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|
+| oldValue                  | `string`                  | `''`                           | Old value as string.                                                                                                                                                                                                                                                                                                                                                                                             |
+| newValue                  | `string`                  | `''`                           | New value as string.                                                                                                                                                                                                                                                                                                                                                                                             |
+| 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.                                                                                                                                                                                                                                                                                                                                                                                      |
+| 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. |
+| 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.                                                                                                                                                                                                                                                                                                                                                                     |
+| styles                    | `object`                  | `{}`                           | To override style variables and styles. Learn more about [overriding styles](#overriding-styles)                                                                                                                                                                                                                                                                                                                 |
+| useDarkTheme              | `boolean`                 | `true`                         | To enable/disable dark theme.                                                                                                                                                                                                                                                                                                                                                                                    |
+| leftTitle                 | `string`                  | `undefined`                    | Column title for left section of the diff in split view. This will be used as the only title in inline view.                                                                                                                                                                                                                                                                                                     |
+| rightTitle                | `string`                  | `undefined`                    | Column title for right section of the diff in split view. This will be ignored in inline view.                                                                                                                                                                                                                                                                                                                   |
+| linesOffset               | `number`                  | `0`                            | Number to start count code lines from.                                                                                                                                                                                                                                                                                                                                                                           |
+
+## Instance Methods
+
+`resetCodeBlocks()` - Resets the expanded code blocks to it's initial state. Return `true` on successful reset and `false` during unsuccessful reset.
+
+## Syntax Highlighting
+
+Syntax highlighting is a bit tricky when combined with diff. Here, React Diff Viewer provides a simple render prop API to handle syntax highlighting. Use `renderContent(content: string) => JSX.Element` and your favorite syntax highlighting library to achieve this.
+
+An example using [Prism JS](https://prismjs.com)
+
+```html
+// Load Prism CSS
+<link
+  href="https://cdnjs.cloudflare.com/ajax/libs/prism/1.15.0/prism.min.css"
+/>
+
+// Load Prism JS
+<script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.15.0/prism.min.js"></script>
+```
+
+```javascript
+import React, { PureComponent } from 'react';
+import ReactDiffViewer from 'react-diff-viewer';
+
+const oldCode = `
+const a = 10
+const b = 10
+const c = () => console.log('foo')
+
+if(a > 10) {
+  console.log('bar')
+}
+
+console.log('done')
+`;
+const newCode = `
+const a = 10
+const boo = 10
+
+if(a === 10) {
+  console.log('bar')
+}
+`;
+
+class Diff extends PureComponent {
+  highlightSyntax = (str) => (
+    <pre
+      style={{ display: 'inline' }}
+      dangerouslySetInnerHTML={{
+        __html: Prism.highlight(str, Prism.languages.javascript),
+      }}
+    />
+  );
+
+  render = () => {
+    return (
+      <ReactDiffViewer
+        oldValue={oldCode}
+        newValue={newCode}
+        splitView={true}
+        renderContent={this.highlightSyntax}
+      />
+    );
+  };
+}
+```
+
+## Text block diff comparison
+
+Different styles of text block diffing are possible by using the enums corresponding to variou JsDiff methods ([learn more](https://github.com/kpdecker/jsdiff/tree/v4.0.1#api)). The supported methods are as follows.
+
+```javascript
+enum DiffMethod {
+  CHARS = 'diffChars',
+  WORDS = 'diffWords',
+  WORDS_WITH_SPACE = 'diffWordsWithSpace',
+  LINES = 'diffLines',
+  TRIMMED_LINES = 'diffTrimmedLines',
+  SENTENCES = 'diffSentences',
+  CSS = 'diffCss',
+}
+```
+
+```javascript
+import React, { PureComponent } from 'react';
+import ReactDiffViewer, { DiffMethod } from 'react-diff-viewer';
+
+const oldCode = `
+{
+  "name": "Original name",
+  "description": null
+}
+`;
+const newCode = `
+{
+  "name": "My updated name",
+  "description": "Brand new description",
+  "status": "running"
+}
+`;
+
+class Diff extends PureComponent {
+  render = () => {
+    return (
+      <ReactDiffViewer
+        oldValue={oldCode}
+        newValue={newCode}
+        compareMethod={DiffMethod.WORDS}
+        splitView={true}
+      />
+    );
+  };
+}
+```
+
+## Overriding Styles
+
+React Diff Viewer uses [emotion](https://emotion.sh/) for styling. It also offers a simple way to override styles and style variables. You can supply different variables for both light and dark themes. Styles will be common for both themes.
+
+Below are the default style variables and style object keys.
+
+```javascript
+
+// Default variables and style keys
+
+const defaultStyles = {
+  variables: {
+    light: {
+      diffViewerBackground: '#fff',
+      diffViewerColor: '#212529',
+      addedBackground: '#e6ffed',
+      addedColor: '#24292e',
+      removedBackground: '#ffeef0',
+      removedColor: '#24292e',
+      wordAddedBackground: '#acf2bd',
+      wordRemovedBackground: '#fdb8c0',
+      addedGutterBackground: '#cdffd8',
+      removedGutterBackground: '#ffdce0',
+      gutterBackground: '#f7f7f7',
+      gutterBackgroundDark: '#f3f1f1',
+      highlightBackground: '#fffbdd',
+      highlightGutterBackground: '#fff5b1',
+      codeFoldGutterBackground: '#dbedff',
+      codeFoldBackground: '#f1f8ff',
+      emptyLineBackground: '#fafbfc',
+      gutterColor: '#212529',
+      addedGutterColor: '#212529',
+      removedGutterColor: '#212529',
+      codeFoldContentColor: '#212529',
+      diffViewerTitleBackground: '#fafbfc',
+      diffViewerTitleColor: '#212529',
+      diffViewerTitleBorderColor: '#eee',
+    },
+    dark: {
+      diffViewerBackground: '#2e303c',
+      diffViewerColor: '#FFF',
+      addedBackground: '#044B53',
+      addedColor: 'white',
+      removedBackground: '#632F34',
+      removedColor: 'white',
+      wordAddedBackground: '#055d67',
+      wordRemovedBackground: '#7d383f',
+      addedGutterBackground: '#034148',
+      removedGutterBackground: '#632b30',
+      gutterBackground: '#2c2f3a',
+      gutterBackgroundDark: '#262933',
+      highlightBackground: '#2a3967',
+      highlightGutterBackground: '#2d4077',
+      codeFoldGutterBackground: '#21232b',
+      codeFoldBackground: '#262831',
+      emptyLineBackground: '#363946',
+      gutterColor: '#464c67',
+      addedGutterColor: '#8c8c8c',
+      removedGutterColor: '#8c8c8c',
+      codeFoldContentColor: '#555a7b',
+      diffViewerTitleBackground: '#2f323e',
+      diffViewerTitleColor: '#555a7b',
+      diffViewerTitleBorderColor: '#353846',
+    }
+  },
+  diffContainer?: {}, // style object
+  diffRemoved?: {}, // style object
+  diffAdded?: {}, // style object
+  marker?: {}, // style object
+  emptyGutter?: {}, // style object
+  highlightedLine?: {}, // style object
+  lineNumber?: {}, // style object
+  highlightedGutter?: {}, // style object
+  contentText?: {}, // style object
+  gutter?: {}, // style object
+  line?: {}, // style object
+  wordDiff?: {}, // style object
+  wordAdded?: {}, // style object
+  wordRemoved?: {}, // style object
+  codeFoldGutter?: {}, // style object
+  codeFold?: {}, // style object
+  emptyLine?: {}, // style object
+  content?: {}, // style object
+  titleBlock?: {}, // style object
+  splitView?: {}, // style object
+}
+```
+
+To override any style, just pass the new style object to the `styles` prop. New style will be computed using `Object.assign(default, override)`.
+
+For keys other than `variables`, the value can either be an object or string interpolation.
+
+```javascript
+import React, { PureComponent } from 'react';
+import ReactDiffViewer from 'react-diff-viewer';
+
+const oldCode = `
+const a = 10
+const b = 10
+const c = () => console.log('foo')
+
+if(a > 10) {
+  console.log('bar')
+}
+
+console.log('done')
+`;
+const newCode = `
+const a = 10
+const boo = 10
+
+if(a === 10) {
+  console.log('bar')
+}
+`;
+
+class Diff extends PureComponent {
+  highlightSyntax = (str) => (
+    <span
+      style={{ display: 'inline' }}
+      dangerouslySetInnerHTML={{
+        __html: Prism.highlight(str, Prism.languages.javascript),
+      }}
+    />
+  );
+
+  render = () => {
+    const newStyles = {
+      variables: {
+        dark: {
+          highlightBackground: '#fefed5',
+          highlightGutterBackground: '#ffcd3c',
+        },
+      },
+      line: {
+        padding: '10px 2px',
+        '&:hover': {
+          background: '#a26ea1',
+        },
+      },
+    };
+
+    return (
+      <ReactDiffViewer
+        styles={newStyles}
+        oldValue={oldCode}
+        newValue={newCode}
+        splitView={true}
+        renderContent={this.highlightSyntax}
+      />
+    );
+  };
+}
+```
+
+## Local Development
+
+```bash
+pnpm install
+pnpm build # or use yarn build:watch
+pnpm start:examples
+```
+
+Check package.json for more build scripts.
+
+## License
+
+MIT

package/babel.config.js

@@ -0,0 +1,7 @@
+module.exports = {
+  presets: [
+    ['@babel/preset-env', { targets: { node: 'current' } }],
+    '@babel/preset-typescript',
+    '@babel/preset-react',
+  ],
+};

package/jest.config.js

@@ -0,0 +1,5 @@
+const config = {
+  testEnvironment: 'jsdom',
+};
+
+module.exports = config;

package/lib/compute-lines.d.ts

@@ -0,0 +1,52 @@
+export declare enum DiffType {
+    DEFAULT = 0,
+    ADDED = 1,
+    REMOVED = 2
+}
+export declare enum DiffMethod {
+    CHARS = "diffChars",
+    WORDS = "diffWords",
+    WORDS_WITH_SPACE = "diffWordsWithSpace",
+    LINES = "diffLines",
+    TRIMMED_LINES = "diffTrimmedLines",
+    SENTENCES = "diffSentences",
+    CSS = "diffCss"
+}
+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 compareMethod JsDiff text diff method from https://github.com/kpdecker/jsdiff/tree/v4.0.1#api
+ * @param linesOffset line number to start counting from
+ */
+declare const computeLineInformation: (oldString: string, newString: string, disableWordDiff?: boolean, compareMethod?: string, linesOffset?: number) => ComputedLineInformation;
+export { computeLineInformation };