react-diff-viewer-continued 3.2.0

package/lib/styles.d.ts

@@ -0,0 +1,77 @@
+import { Interpolation } from 'emotion';
+export interface ReactDiffViewerStyles {
+    diffContainer?: string;
+    diffRemoved?: string;
+    diffAdded?: 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;
+    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?: Interpolation;
+    diffRemoved?: Interpolation;
+    diffAdded?: Interpolation;
+    marker?: Interpolation;
+    emptyGutter?: Interpolation;
+    highlightedLine?: Interpolation;
+    lineNumber?: Interpolation;
+    highlightedGutter?: Interpolation;
+    contentText?: Interpolation;
+    gutter?: Interpolation;
+    line?: Interpolation;
+    wordDiff?: Interpolation;
+    wordAdded?: Interpolation;
+    wordRemoved?: Interpolation;
+    codeFoldGutter?: Interpolation;
+    emptyLine?: Interpolation;
+    content?: Interpolation;
+    titleBlock?: Interpolation;
+    splitView?: Interpolation;
+}
+declare const _default: (styleOverride: ReactDiffViewerStylesOverride, useDarkTheme?: boolean) => ReactDiffViewerStyles;
+export default _default;

package/lib/styles.js

@@ -0,0 +1,276 @@
+"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;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const emotion_1 = require("emotion");
+// eslint-disable-next-line import/no-anonymous-default-export
+exports.default = (styleOverride, useDarkTheme = false) => {
+    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',
+            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',
+            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 content = (0, emotion_1.css)({
+        width: '100%',
+        label: 'content',
+    });
+    const splitView = (0, emotion_1.css)({
+        [`.${content}`]: {
+            width: '50%',
+        },
+        label: 'split-view',
+    });
+    const diffContainer = (0, emotion_1.css)({
+        width: '100%',
+        background: variables.diffViewerBackground,
+        pre: {
+            margin: 0,
+            whiteSpace: 'pre-wrap',
+            lineHeight: '25px',
+        },
+        label: 'diff-container',
+        borderCollapse: 'collapse',
+    });
+    const codeFoldContent = (0, emotion_1.css)({
+        color: variables.codeFoldContentColor,
+        label: 'code-fold-content',
+    });
+    const contentText = (0, emotion_1.css)({
+        color: variables.diffViewerColor,
+        label: 'content-text',
+    });
+    const titleBlock = (0, emotion_1.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 = (0, emotion_1.css)({
+        color: variables.gutterColor,
+        label: 'line-number',
+    });
+    const diffRemoved = (0, emotion_1.css)({
+        background: variables.removedBackground,
+        color: variables.removedColor,
+        pre: {
+            color: variables.removedColor,
+        },
+        [`.${lineNumber}`]: {
+            color: variables.removedGutterColor,
+        },
+        label: 'diff-removed',
+    });
+    const diffAdded = (0, emotion_1.css)({
+        background: variables.addedBackground,
+        color: variables.addedColor,
+        pre: {
+            color: variables.addedColor,
+        },
+        [`.${lineNumber}`]: {
+            color: variables.addedGutterColor,
+        },
+        label: 'diff-added',
+    });
+    const wordDiff = (0, emotion_1.css)({
+        padding: 2,
+        display: 'inline-flex',
+        borderRadius: 1,
+        label: 'word-diff',
+    });
+    const wordAdded = (0, emotion_1.css)({
+        background: variables.wordAddedBackground,
+        label: 'word-added',
+    });
+    const wordRemoved = (0, emotion_1.css)({
+        background: variables.wordRemovedBackground,
+        label: 'word-removed',
+    });
+    const codeFoldGutter = (0, emotion_1.css)({
+        backgroundColor: variables.codeFoldGutterBackground,
+        label: 'code-fold-gutter',
+    });
+    const codeFold = (0, emotion_1.css)({
+        backgroundColor: variables.codeFoldBackground,
+        height: 40,
+        fontSize: 14,
+        fontWeight: 700,
+        label: 'code-fold',
+        a: {
+            textDecoration: 'underline !important',
+            cursor: 'pointer',
+            pre: {
+                display: 'inline',
+            },
+        },
+    });
+    const emptyLine = (0, emotion_1.css)({
+        backgroundColor: variables.emptyLineBackground,
+        label: 'empty-line',
+    });
+    const marker = (0, emotion_1.css)({
+        width: 25,
+        paddingLeft: 10,
+        paddingRight: 10,
+        userSelect: 'none',
+        label: 'marker',
+        [`&.${diffAdded}`]: {
+            pre: {
+                color: variables.addedColor,
+            },
+        },
+        [`&.${diffRemoved}`]: {
+            pre: {
+                color: variables.removedColor,
+            },
+        },
+    });
+    const highlightedLine = (0, emotion_1.css)({
+        background: variables.highlightBackground,
+        label: 'highlighted-line',
+        [`.${wordAdded}, .${wordRemoved}`]: {
+            backgroundColor: 'initial',
+        },
+    });
+    const highlightedGutter = (0, emotion_1.css)({
+        label: 'highlighted-gutter',
+    });
+    const gutter = (0, emotion_1.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 = (0, emotion_1.css)({
+        '&:hover': {
+            background: variables.gutterBackground,
+            cursor: 'initial',
+        },
+        label: 'empty-gutter',
+    });
+    const line = (0, emotion_1.css)({
+        verticalAlign: 'baseline',
+        label: 'line',
+    });
+    const defaultStyles = {
+        diffContainer,
+        diffRemoved,
+        diffAdded,
+        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]: (0, emotion_1.css)(styles[key]),
+    })), {});
+    return Object.keys(defaultStyles).reduce((acc, key) => (Object.assign(Object.assign({}, acc), {
+        [key]: computerOverrideStyles[key]
+            ? (0, emotion_1.cx)(defaultStyles[key], computerOverrideStyles[key])
+            : defaultStyles[key],
+    })), {});
+};

package/package.json

@@ -0,0 +1,100 @@
+{
+  "name": "react-diff-viewer-continued",
+  "version": "3.2.0",
+  "private": false,
+  "description": "Continuation of a simple and beautiful text diff viewer component made with diff and React",
+  "keywords": [
+    "review",
+    "code-review",
+    "diff",
+    "diff-viewer",
+    "github",
+    "react",
+    "react-component",
+    "ui"
+  ],
+  "repository": "git@github.com:aeolun/react-diff-viewer-continued.git",
+  "license": "MIT",
+  "authors": [
+    "Pranesh Ravi<praneshpranesh@gmail.com>",
+    "Bart Riepe <bart@serial-experiments.com>"
+  ],
+  "main": "lib/index",
+  "typings": "lib/index",
+  "scripts": {
+    "build": "tsc --outDir lib/",
+    "build:examples": "webpack --progress",
+    "build:watch": "tsc --outDir lib/ -w",
+    "publish:examples": "NODE_ENV=production pnpm run build:examples && gh-pages -d examples/dist -r $GITHUB_REPO_URL",
+    "publish:examples:local": "NODE_ENV=production pnpm run build:examples && gh-pages -d examples/dist",
+    "start:examples": "webpack-dev-server --open --hot",
+    "test": "jest ./test/**",
+    "test:watch": "jest",
+    "lint": "eslint src/ test/",
+    "lint:fix": "eslint --fix src/ test/",
+    "prettier": "prettier --write ."
+  },
+  "dependencies": {
+    "@babel/core": "^7.18.6",
+    "@babel/preset-env": "^7.18.6",
+    "@babel/preset-react": "^7.18.6",
+    "@babel/preset-typescript": "^7.18.6",
+    "classnames": "^2.3.1",
+    "diff": "^5.1.0",
+    "emotion": "^10.0.27",
+    "jest": "^28.1.2",
+    "jest-environment-jsdom": "^28.1.2",
+    "memoize-one": "^6.0.0",
+    "prettier": "^2.7.1",
+    "prop-types": "^15.8.1",
+    "sass": "^1.53.0"
+  },
+  "devDependencies": {
+    "@semantic-release/changelog": "6.0.1",
+    "@semantic-release/git": "10.0.1",
+    "@testing-library/react": "^12.1.5",
+    "@types/diff": "^5.0.2",
+    "@types/expect": "^1.20.3",
+    "@types/memoize-one": "^4.1.1",
+    "@types/mocha": "^5.2.5",
+    "@types/node": "^12.0.12",
+    "@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",
+    "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-react-hooks": "^4.6.0",
+    "expect": "^28.1.1",
+    "file-loader": "^6.2.0",
+    "gh-pages": "^4.0.0",
+    "html-webpack-plugin": "^5.5.0",
+    "mini-css-extract-plugin": "^2.6.1",
+    "mocha": "^10.0.0",
+    "raw-loader": "^4.0.2",
+    "react": "^17.0.2",
+    "react-dom": "^17.0.2",
+    "sass-loader": "^13.0.2",
+    "semantic-release": "^19.0.3",
+    "spy": "^1.0.0",
+    "ts-loader": "^9.3.1",
+    "ts-node": "^10.8.2",
+    "typescript": "^4.7.4",
+    "webpack": "^5.73.0",
+    "webpack-cli": "^4.10.0",
+    "webpack-dev-server": "^4.9.3"
+  },
+  "peerDependencies": {
+    "react": "^15.3.0 || ^16.0.0 || ^17.0.0",
+    "react-dom": "^15.3.0 || ^16.0.0 || ^17.0.0"
+  },
+  "engines": {
+    "node": ">= 8"
+  }
+}

package/publish-examples.sh

@@ -0,0 +1,10 @@
+#!/bin/sh
+
+if [ -n "$TRAVIS_TAG" ]; then
+  echo "Publishing examples to Github pages...."
+  git config --global user.email "travis@travis-ci.org"
+  git config --global user.name "Travis CI"
+  yarn publish:examples
+else
+  echo "Skipping examples deployment..."
+fi

package/release.config.js

@@ -0,0 +1,18 @@
+module.exports = {
+  branches: ["master"],
+  plugins: [
+    "@semantic-release/commit-analyzer",
+    "@semantic-release/release-notes-generator",
+    "@semantic-release/npm",
+    "@semantic-release/changelog",
+    "@semantic-release/github",
+    "@semantic-release/npm",
+    [
+      "@semantic-release/git",
+      {
+        message: "chore(release): ${nextRelease.version} [skip ci]\n\n${nextRelease.notes}",
+        assets: ["CHANGELOG.md", "package.json", "package-lock.json", "pnpm-lock.yaml", "npm-shrinkwrap.json"],
+      },
+    ],
+  ],
+}

package/tsconfig.examples.json

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

package/tsconfig.json

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

package/webpack.config.js

@@ -0,0 +1,60 @@
+const path = require('path');
+const HtmlWebpackPlugin = require('html-webpack-plugin');
+const Css = require('mini-css-extract-plugin');
+
+module.exports = {
+  entry: {
+    main: './examples/src/index.tsx',
+  },
+  mode: process.env.NODE_ENV === 'production' ? 'production' : 'development',
+  resolve: {
+    extensions: ['.jsx', '.tsx', '.ts', '.scss', '.css', '.js'],
+  },
+  output: {
+    path: path.resolve(__dirname, 'examples/dist'),
+    filename: '[name].js',
+  },
+  devServer: {
+    static: {
+      directory: path.resolve(__dirname, 'examples/dist'),
+    },
+    port: 8000,
+    hot: true,
+  },
+  module: {
+    rules: [
+      {
+        test: /\.tsx?$/,
+        use: [
+          {
+            loader: 'ts-loader',
+            options: {
+              configFile: 'tsconfig.examples.json',
+            },
+          },
+        ],
+        exclude: /node_modules/,
+      },
+      {
+        test: /\.s?css$/,
+        use: [Css.loader, 'css-loader', 'sass-loader'],
+      },
+      {
+        test: /\.xml|.rjs|.java/,
+        use: 'raw-loader',
+      },
+      {
+        test: /\.svg|.png/,
+        use: 'file-loader',
+      },
+    ],
+  },
+  plugins: [
+    new HtmlWebpackPlugin({
+      template: './examples/src/index.ejs',
+    }),
+    new Css({
+      filename: 'main.css',
+    }),
+  ],
+};