react-diff-viewer-continued 4.0.1 → 4.0.3

package/lib/esm/src/styles.js

@@ -0,0 +1,348 @@
+import createEmotion from '@emotion/css/create-instance';
+// eslint-disable-next-line import/no-anonymous-default-export
+export default (styleOverride, useDarkTheme = false, nonce = '') => {
+    const { variables: overrideVariables = {}, ...styles } = styleOverride;
+    const themeVariables = {
+        light: {
+            ...{
+                diffViewerBackground: '#fff',
+                diffViewerColor: '#212529',
+                addedBackground: '#e6ffed',
+                addedColor: '#24292e',
+                removedBackground: '#ffeef0',
+                removedColor: '#24292e',
+                changedBackground: '#fffbdd',
+                wordAddedBackground: '#acf2bd',
+                wordRemovedBackground: '#fdb8c0',
+                addedGutterBackground: '#cdffd8',
+                removedGutterBackground: '#ffdce0',
+                gutterBackground: '#f7f7f7',
+                gutterBackgroundDark: '#f3f1f1',
+                highlightBackground: '#fffbdd',
+                highlightGutterBackground: '#fff5b1',
+                codeFoldGutterBackground: '#dbedff',
+                codeFoldBackground: '#f1f8ff',
+                emptyLineBackground: '#fafbfc',
+                gutterColor: '#212529',
+                addedGutterColor: '#212529',
+                removedGutterColor: '#212529',
+                codeFoldContentColor: '#212529',
+                diffViewerTitleBackground: '#fafbfc',
+                diffViewerTitleColor: '#212529',
+                diffViewerTitleBorderColor: '#eee',
+            },
+            ...(overrideVariables.light || {}),
+        },
+        dark: {
+            ...{
+                diffViewerBackground: '#2e303c',
+                diffViewerColor: '#FFF',
+                addedBackground: '#044B53',
+                addedColor: 'white',
+                removedBackground: '#632F34',
+                removedColor: 'white',
+                changedBackground: '#3e302c',
+                wordAddedBackground: '#055d67',
+                wordRemovedBackground: '#7d383f',
+                addedGutterBackground: '#034148',
+                removedGutterBackground: '#632b30',
+                gutterBackground: '#2c2f3a',
+                gutterBackgroundDark: '#262933',
+                highlightBackground: '#2a3967',
+                highlightGutterBackground: '#2d4077',
+                codeFoldGutterBackground: '#262831',
+                codeFoldBackground: '#262831',
+                emptyLineBackground: '#363946',
+                gutterColor: '#666c87',
+                addedGutterColor: '#8c8c8c',
+                removedGutterColor: '#8c8c8c',
+                codeFoldContentColor: '#656a8b',
+                diffViewerTitleBackground: '#2f323e',
+                diffViewerTitleColor: '#757a9b',
+                diffViewerTitleBorderColor: '#353846',
+            },
+            ...(overrideVariables.dark || {}),
+        },
+    };
+    const variables = useDarkTheme ? themeVariables.dark : themeVariables.light;
+    const { css, cx } = createEmotion({ key: 'react-diff', nonce });
+    const content = css({
+        width: 'auto',
+        label: 'content',
+    });
+    const splitView = css({
+        label: 'split-view',
+    });
+    const summary = css({
+        background: variables.diffViewerTitleBackground,
+        color: variables.diffViewerTitleColor,
+        padding: '0.5em 1em',
+        display: 'flex',
+        alignItems: 'center',
+        gap: '0.5em',
+        fontFamily: "monospace",
+        fill: variables.diffViewerTitleColor,
+    });
+    const diffContainer = css({
+        width: '100%',
+        minWidth: '1000px',
+        overflowX: 'auto',
+        tableLayout: 'fixed',
+        background: variables.diffViewerBackground,
+        pre: {
+            margin: 0,
+            whiteSpace: 'pre-wrap',
+            lineHeight: '1.6em',
+            width: 'fit-content'
+        },
+        label: 'diff-container',
+        borderCollapse: 'collapse',
+    });
+    const lineContent = css({
+        overflow: 'hidden',
+        width: '100%'
+    });
+    const contentText = css({
+        color: variables.diffViewerColor,
+        whiteSpace: 'pre-wrap',
+        fontFamily: 'monospace',
+        textDecoration: 'none',
+        label: 'content-text',
+    });
+    const unselectable = css({
+        userSelect: 'none',
+        label: 'unselectable',
+    });
+    const titleBlock = css({
+        background: variables.diffViewerTitleBackground,
+        padding: '0.5em',
+        lineHeight: '1.4em',
+        height: "2.4em",
+        overflow: 'hidden',
+        width: '50%',
+        borderBottom: `1px solid ${variables.diffViewerTitleBorderColor}`,
+        label: 'title-block',
+        ':last-child': {
+            borderLeft: `1px solid ${variables.diffViewerTitleBorderColor}`,
+        },
+        [`.${contentText}`]: {
+            color: variables.diffViewerTitleColor,
+        },
+    });
+    const lineNumber = css({
+        color: variables.gutterColor,
+        label: 'line-number',
+    });
+    const diffRemoved = css({
+        background: variables.removedBackground,
+        color: variables.removedColor,
+        pre: {
+            color: variables.removedColor,
+        },
+        [`.${lineNumber}`]: {
+            color: variables.removedGutterColor,
+        },
+        label: 'diff-removed',
+    });
+    const diffAdded = css({
+        background: variables.addedBackground,
+        color: variables.addedColor,
+        pre: {
+            color: variables.addedColor,
+        },
+        [`.${lineNumber}`]: {
+            color: variables.addedGutterColor,
+        },
+        label: 'diff-added',
+    });
+    const diffChanged = css({
+        background: variables.changedBackground,
+        [`.${lineNumber}`]: {
+            color: variables.gutterColor,
+        },
+        label: 'diff-changed',
+    });
+    const wordDiff = css({
+        padding: 2,
+        display: 'inline-flex',
+        borderRadius: 4,
+        wordBreak: 'break-all',
+        label: 'word-diff',
+    });
+    const wordAdded = css({
+        background: variables.wordAddedBackground,
+        textDecoration: 'none',
+        label: 'word-added',
+    });
+    const wordRemoved = css({
+        background: variables.wordRemovedBackground,
+        textDecoration: 'none',
+        label: 'word-removed',
+    });
+    const codeFoldGutter = css({
+        backgroundColor: variables.codeFoldGutterBackground,
+        label: 'code-fold-gutter',
+        minWidth: '50px',
+        width: '50px'
+    });
+    const codeFoldContentContainer = css({
+        padding: '8px 16px'
+    });
+    const codeFoldContent = css({
+        color: variables.codeFoldContentColor,
+        label: 'code-fold-content',
+    });
+    const block = css({
+        display: 'block',
+        width: '10px',
+        height: '10px',
+        backgroundColor: '#ddd',
+        borderWidth: '1px',
+        borderStyle: 'solid',
+        borderColor: variables.diffViewerTitleBorderColor
+    });
+    const blockAddition = css({
+        backgroundColor: variables.wordAddedBackground
+    });
+    const blockDeletion = css({
+        backgroundColor: variables.wordRemovedBackground
+    });
+    const codeFold = css({
+        backgroundColor: variables.codeFoldBackground,
+        height: 40,
+        fontSize: 14,
+        alignItems: 'center',
+        userSelect: 'none',
+        fontWeight: 700,
+        label: 'code-fold',
+        a: {
+            textDecoration: 'underline !important',
+            cursor: 'pointer',
+            pre: {
+                display: 'inline',
+            },
+        },
+    });
+    const emptyLine = css({
+        backgroundColor: variables.emptyLineBackground,
+        label: 'empty-line',
+    });
+    const marker = css({
+        width: 28,
+        paddingLeft: 10,
+        paddingRight: 10,
+        userSelect: 'none',
+        label: 'marker',
+        [`&.${diffAdded}`]: {
+            pre: {
+                color: variables.addedColor,
+            },
+        },
+        [`&.${diffRemoved}`]: {
+            pre: {
+                color: variables.removedColor,
+            },
+        },
+    });
+    const highlightedLine = css({
+        background: variables.highlightBackground,
+        label: 'highlighted-line',
+        [`.${wordAdded}, .${wordRemoved}`]: {
+            backgroundColor: 'initial',
+        },
+    });
+    const highlightedGutter = css({
+        label: 'highlighted-gutter',
+    });
+    const gutter = css({
+        userSelect: 'none',
+        minWidth: 50,
+        width: '50px',
+        padding: '0 10px',
+        whiteSpace: 'nowrap',
+        label: 'gutter',
+        textAlign: 'right',
+        background: variables.gutterBackground,
+        '&:hover': {
+            cursor: 'pointer',
+            background: variables.gutterBackgroundDark,
+            pre: {
+                opacity: 1,
+            },
+        },
+        pre: {
+            opacity: 0.5,
+        },
+        [`&.${diffAdded}`]: {
+            background: variables.addedGutterBackground,
+        },
+        [`&.${diffRemoved}`]: {
+            background: variables.removedGutterBackground,
+        },
+        [`&.${highlightedGutter}`]: {
+            background: variables.highlightGutterBackground,
+            '&:hover': {
+                background: variables.highlightGutterBackground,
+            },
+        },
+    });
+    const emptyGutter = css({
+        '&:hover': {
+            background: variables.gutterBackground,
+            cursor: 'initial',
+        },
+        label: 'empty-gutter',
+    });
+    const line = css({
+        verticalAlign: 'baseline',
+        label: 'line',
+        textDecoration: 'none'
+    });
+    const column = css({});
+    const defaultStyles = {
+        diffContainer,
+        diffRemoved,
+        diffAdded,
+        diffChanged,
+        splitView,
+        marker,
+        highlightedGutter,
+        highlightedLine,
+        gutter,
+        line,
+        lineContent,
+        wordDiff,
+        wordAdded,
+        summary,
+        block,
+        blockAddition,
+        blockDeletion,
+        wordRemoved,
+        noSelect: unselectable,
+        codeFoldGutter,
+        codeFoldContentContainer,
+        codeFold,
+        emptyGutter,
+        emptyLine,
+        lineNumber,
+        contentText,
+        content,
+        column,
+        codeFoldContent,
+        titleBlock,
+    };
+    const computerOverrideStyles = Object.keys(styles).reduce((acc, key) => ({
+        ...acc,
+        ...{
+            [key]: css(styles[key]),
+        },
+    }), {});
+    return Object.keys(defaultStyles).reduce((acc, key) => ({
+        ...acc,
+        ...{
+            [key]: computerOverrideStyles[key]
+                ? cx(defaultStyles[key], computerOverrideStyles[key])
+                : defaultStyles[key],
+        },
+    }), {});
+};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-diff-viewer-continued",
-  "version": "4.0.1",
+  "version": "4.0.3",
   "private": false,
   "description": "Continuation of a simple and beautiful text diff viewer component made with diff and React",
   "keywords": [
@@ -19,76 +19,46 @@
     "Pranesh Ravi<praneshpranesh@gmail.com>",
     "Bart Riepe <bart@serial-experiments.com>"
   ],
-  "main": "lib/src/index",
-  "typings": "lib/src/index",
+  "main": "lib/cjs/src/index",
+  "module": "lib/esm/src/index",
+  "typings": "lib/cjs/src/index",
   "scripts": {
-    "build": "tsc --outDir lib/",
-    "build:examples": "webpack --progress",
-    "build:watch": "tsc --outDir lib/ -w",
+    "build": "tsc --project tsconfig.json && tsc --project tsconfig.esm.json",
+    "build:examples": "vite build examples",
     "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/",
+    "start:examples": "vite examples",
+    "test": "vitest",
+    "lint": "biome lint src/ test/",
+    "lint:fix": "biome lint --apply-unsafe src/ test/",
     "prettier": "prettier --write ."
   },
   "dependencies": {
     "@emotion/css": "^11.11.2",
     "classnames": "^2.3.2",
-    "diff": "^5.1.0",
-    "memoize-one": "^6.0.0",
-    "prop-types": "^15.8.1"
+    "diff": "^5.2.0",
+    "memoize-one": "^6.0.0"
   },
   "devDependencies": {
-    "@babel/core": "^7.23.2",
-    "@babel/preset-env": "^7.23.2",
-    "@babel/preset-react": "^7.22.15",
-    "@babel/preset-typescript": "^7.23.2",
+    "@biomejs/biome": "^1.5.3",
     "@semantic-release/changelog": "6.0.1",
     "@semantic-release/git": "10.0.1",
     "@testing-library/react": "^13.4.0",
     "@types/diff": "^5.0.6",
-    "@types/expect": "^1.20.4",
-    "@types/memoize-one": "^4.1.1",
-    "@types/mocha": "^5.2.7",
-    "@types/node": "^12.20.55",
-    "@types/prop-types": "15.7.5",
-    "@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.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.3",
-    "file-loader": "^6.2.0",
-    "gh-pages": "^4.0.0",
-    "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",
+    "@types/memoize-one": "^5.1.2",
+    "@types/node": "^20.11.17",
+    "@types/react": "^18.2.55",
+    "@types/react-dom": "^18.2.19",
+    "gh-pages": "^5.0.0",
+    "happy-dom": "^13.3.8",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
-    "sass": "^1.69.3",
-    "sass-loader": "^13.3.2",
+    "sass": "^1.70.0",
     "semantic-release": "^19.0.5",
-    "spy": "^1.0.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.15.1"
+    "vite": "^5.1.1",
+    "vitest": "^1.2.2"
   },
   "peerDependencies": {
     "react": "^15.3.0 || ^16.0.0 || ^17.0.0 || ^18.0.0",

package/tsconfig.esm.json

@@ -0,0 +1,11 @@
+{
+  "extends": "./tsconfig.json",
+  "compilerOptions": {
+    "module": "esnext",
+    "target": "esnext",
+    "outDir": "lib/esm",
+    "declaration": false
+  },
+  "include": ["src/", "examples/"],
+  "exclude": ["node_modules"]
+}

package/tsconfig.json

@@ -6,11 +6,15 @@
     "moduleResolution": "node",
     "noImplicitAny": true,
     "esModuleInterop": true,
+    "isolatedModules": true,
+    "resolveJsonModule": true,
+    "skipLibCheck": true,
     "target": "es2015",
     "declaration": true,
     "downlevelIteration": true,
     "lib": ["es2017", "dom"],
-    "types": ["jest", "node"]
+    "types": ["node"],
+    "outDir": "lib/cjs"
   },
   "include": ["src/", "examples/"],
   "exclude": ["node_modules"]

package/vitest.config.ts

@@ -0,0 +1,5 @@
+import { defineConfig } from 'vitest/config'
+
+export default defineConfig({
+  environment: 'jsdom'
+})

package/.eslintrc

@@ -1,13 +0,0 @@
-{
-  "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/test.yml

@@ -1,25 +0,0 @@
-name: Test
-on:
-  push:
-  pull_request:
-
-jobs:
-  release:
-    name: Unit tests
-    runs-on: ubuntu-latest
-    steps:
-      - name: Checkout
-        uses: actions/checkout@v3
-        with:
-          fetch-depth: 0
-      - name: Setup Node.js
-        uses: actions/setup-node@v3
-        with:
-          node-version: 'lts/*'
-      - uses: pnpm/action-setup@v2.2.4
-        with:
-          version: latest
-      - name: Install dependencies
-        run: pnpm i
-      - name: Run unit tests
-        run: pnpm run test

package/.prettierrc

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

package/jest.config.js

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

package/lib/src/expand.d.ts

@@ -1 +0,0 @@
-export declare function Expand(): JSX.Element;

package/lib/src/fold.d.ts

@@ -1 +0,0 @@
-export declare function Fold(): JSX.Element;

package/webpack.config.js

@@ -1,60 +0,0 @@
-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.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',
-    }),
-  ],
-};