fix artifacts

Bump dependencies

.eslintrc.js

@@ -1,58 +0,0 @@
-module.exports = {
-  parser: '@typescript-eslint/parser',
-  parserOptions: {
-    ecmaVersion: 2018,
-    sourceType: 'module',
-  },
-  env: {
-    browser: true,
-    es6: true,
-    node: true,
-  },
-  globals: {
-    Atomics: 'readonly',
-    SharedArrayBuffer: 'readonly',
-    document: 'readonly',
-    navigator: 'readonly',
-    window: 'readonly',
-  },
-  extends: [
-    'eslint:recommended',
-    'plugin:@typescript-eslint/eslint-recommended',
-    'plugin:@typescript-eslint/recommended',
-    'plugin:json/recommended',
-    'plugin:promise/recommended',
-    'plugin:import/errors',
-    'plugin:import/warnings',
-    'plugin:import/typescript',
-    'plugin:node/recommended',
-    'plugin:sonarjs/recommended',
-    'plugin:jest/recommended',
-    'plugin:jest/style',
-    'prettier',
-  ],
-  plugins: ['@typescript-eslint', 'json', 'promise', 'import', 'node', 'sonarjs', 'jest', 'optimize-regex'],
-  rules: {
-    // Enable
-    'optimize-regex/optimize-regex': 'error',
-    // Hack: For some reason we need pass again the extensions
-    'node/no-missing-import': [
-      'error',
-      {
-        tryExtensions: ['.js', '.jsx', '.ts', '.tsx', '.json'],
-      },
-    ],
-    // Disable
-    // https://github.com/benmosher/eslint-plugin-import/issues/1446
-    'import/named': 'off',
-    // We don't need this since we are using transpilation
-    'node/no-unsupported-features/es-syntax': 'off',
-    'no-process-exit': 'off',
-    // Too verbose
-    'sonarjs/no-duplicate-string': 'off',
-    // Too verbose
-    'sonarjs/cognitive-complexity': 'off',
-    // Too verbose
-    'sonarjs/no-nested-template-literals': 'off',
-  },
-};

.github/workflows/release.yml

@@ -19,7 +19,7 @@ jobs:
     environment: 'production'
     steps:
       - name: Download docs
-        uses: actions/download-artifact@v3
+        uses: actions/download-artifact@v4
         with:
           name: docs
           path: docs/

.github/workflows/test-and-publish.yml

@@ -25,7 +25,7 @@ jobs:
         run: |
           export NEXT_VERSION="$(/bin/git-version --folder=$PWD --release-branch=master)"
           echo "Next version is ${NEXT_VERSION}"
-          echo "${NEXT_VERSION}" > .version
+          echo "${NEXT_VERSION}" > next-version.txt
           echo "version=${NEXT_VERSION}" >> $GITHUB_ENV
       - name: Get next npm tag name
         run: |
@@ -37,22 +37,22 @@ jobs:
             export PUBLISH_TAG="pr"
           fi
           echo "Next tag is ${PUBLISH_TAG}"
-          echo "${PUBLISH_TAG}" > .tag
+          echo "${PUBLISH_TAG}" > publish-tag.txt
       - name: Upload versions
-        uses: actions/upload-artifact@v3
+        uses: actions/upload-artifact@v4
         with:
           name: versions
           if-no-files-found: error
           path: |
-            .version
+            next-version.txt
-            .tag
+            publish-tag.txt
 
   build:
     runs-on: ubuntu-latest
     needs: [version]
     strategy:
       matrix:
-        node-version: [16.x, 18.x, 20.x]
+        node-version: [16.x, 18.x, 20.x, 22.x]
     steps:
       - uses: actions/checkout@v3
         with:
@@ -61,17 +61,17 @@ jobs:
         uses: actions/setup-node@v3
         with:
           node-version: ${{ matrix.node-version }}
-          cache: 'yarn'
+          cache: 'npm'
       - name: Log environment setup
         run: |
-            node -v
+          node -v
-            yarn -v
+          npm -v
       - name: Install dependencies
-        run: yarn install --ignore-engines
+        run: npm install
       - name: Build templates
-        run: yarn run build:templates
+        run: npm run build:templates
       - name: Build library
-        run: yarn run build
+        run: npm run build
 
   publish:
     runs-on: ubuntu-latest
@@ -82,74 +82,66 @@ jobs:
         with:
           fetch-depth: 0
       - name: Download versions
-        uses: actions/download-artifact@v3
+        uses: actions/download-artifact@v4
         with:
           name: versions
       - name: Store version
-        run: echo "version=$(cat .version)" >> $GITHUB_ENV
+        run: echo "version=$(cat next-version.txt)" >> $GITHUB_ENV
       - name: Configure Git
         run: |
-            git config user.email "gh-actions@users.noreply.github.com"
+          git config user.email "gh-actions@users.noreply.github.com"
-            git config user.name "GitHub Actions"
+          git config user.name "GitHub Actions"
       - name: Tag commit
         uses: tvdias/github-tagger@v0.0.1
         with:
-          repo-token: "${{ secrets.GITHUB_TOKEN }}"
+          repo-token: '${{ secrets.GITHUB_TOKEN }}'
-          tag: "${{ env.version }}"
+          tag: '${{ env.version }}'
       - name: Install dependencies
-        run: yarn
+        run: npm install
       - uses: actions/setup-node@v3
         with:
           registry-url: 'https://registry.npmjs.org'
-          node-version: '18.x'
+          node-version: '22.x'
-      - name: Configure Yarn version
+      - name: Configure NPM version
         env:
           NODE_AUTH_TOKEN: ${{ secrets.NPM_TOKEN }}
         run: |
-            rm -f .npmrc
+          rm -f .npmrc
-            touch .npmrc
+          touch .npmrc
-            echo "//registry.npmjs.org/:_authToken=${NODE_AUTH_TOKEN}" >> .npmrc
+          echo "//registry.npmjs.org/:_authToken=${NODE_AUTH_TOKEN}" >> .npmrc
-            echo "registry=https://registry.npmjs.org/" >> .npmrc
+          echo "registry=https://registry.npmjs.org/" >> .npmrc
-            echo "access=public" >> .npmrc
+          echo "access=public" >> .npmrc
-            echo "save-exact=true" >> .npmrc
+          echo "save-exact=true" >> .npmrc
-            yarn config set version-tag-prefix ""
-            yarn config set version-git-message "Release version %s"
       - name: Version package
         run: |
-            # Update version in packages to publish
+          # Update version in packages to publish
-            yarn version --non-interactive --new-version $(cat .version)
+          npm version $(cat next-version.txt) -m "Release version %s"
       - name: Publish to NPM
-        run: yarn publish --tag $(cat .tag) --non-interactive --new-version $(cat .version)
+        run: npm publish --tag $(cat publish-tag.txt)
       - uses: actions/setup-node@v3
         with:
-          node-version: '18.x'
+          node-version: '22.x'
           registry-url: 'https://npm.pkg.github.com'
-      - name: Configure Yarn version
+      - name: Configure NPM version
         env:
           NODE_AUTH_TOKEN: ${{ secrets.GITHUB_TOKEN }}
         run: |
-            rm -f .npmrc
+          rm -f .npmrc
-            touch .npmrc
+          touch .npmrc
-            echo "//npm.pkg.github.com/:_authToken=${NODE_AUTH_TOKEN}" >> .npmrc
+          echo "//npm.pkg.github.com/:_authToken=${NODE_AUTH_TOKEN}" >> .npmrc
-            echo "@rtfpessoa:registry=https://npm.pkg.github.com/" >> .npmrc
+          echo "@rtfpessoa:registry=https://npm.pkg.github.com/" >> .npmrc
-            echo "access=public" >> .npmrc
+          echo "access=public" >> .npmrc
-            echo "save-exact=true" >> .npmrc
+          echo "save-exact=true" >> .npmrc
-            yarn config set version-tag-prefix ""
-            yarn config set version-git-message "Release version %s"
-      - name: Version package
-        run: |
-            # Update version in packages to publish
-            yarn version --non-interactive --new-version $(cat .version)
       - name: Publish to GPR
         run: |
-            # HACK: Override npm package name to be able to publish in GitHub
+          # HACK: Override npm package name to be able to publish in GitHub
-            sed -i 's/^  "name":.*/  "name": "@rtfpessoa\/diff2html",/g' package.json
+          sed -i 's/^  "name":.*/  "name": "@rtfpessoa\/diff2html",/g' package.json
-            echo "Going to publish version $(cat .version) to GitHub"
+          echo "Going to publish version $(cat next-version.txt) to GitHub"
-            yarn publish --tag $(cat .tag) --non-interactive --new-version $(cat .version)
+          npm publish --tag $(cat publish-tag.txt)
-            # HACK: Restore npm package name
+          # HACK: Restore npm package name
-            sed -i 's/^  "name":.*/  "name": "diff2html",/g' package.json
+          sed -i 's/^  "name":.*/  "name": "diff2html",/g' package.json
       - name: Upload docs
-        uses: actions/upload-artifact@v3
+        uses: actions/upload-artifact@v4
         with:
           name: docs
           if-no-files-found: error

.gitignore

@@ -29,8 +29,18 @@ bower_components/
 # Terraform
 /terraform/.terraform
 
+# Compiled templates
 /src/diff2html-templates.*
+
+# Compiled website
 /docs/
+
+# Bundles temporary typescript files compiled by webpack
+/bundles-out/
+
+# Web bundles
 /bundles/
+# CommonJS library
 /lib/
+# ESNext library
 /lib-esm/

.husky/pre-commit

@@ -1,4 +1,3 @@
 #!/bin/sh
-. "$(dirname "$0")/_/husky.sh"
 
-npx lint-staged
+npm run lint:staged

CONTRIBUTING.md

@@ -10,9 +10,9 @@
 
 - Before sending a pull request make sure your code is tested.
 
-- Before sending a pull request for a feature, be sure to run tests with `yarn test`.
+- Before sending a pull request for a feature, be sure to run tests with `npm run test`.
 
-- Use the same coding style as the rest of the codebase, most of the check can be performed with `yarn run lint`.
+- Use the same coding style as the rest of the codebase, most of the check can be performed with `npm run run lint`.
 
 - Use `git rebase` (not `git merge`) to sync your work from time to time with the master branch.
 

README.md

@@ -321,7 +321,7 @@ import { Controller } from '@hotwired/stimulus';
 
 import { Diff2HtmlUI, Diff2HtmlUIConfig } from 'diff2html/lib/ui/js/diff2html-ui-slim.js';
 
-// Requires `yarn add highlight.js`
+// Requires `npm install highlight.js`
 import 'highlight.js/styles/github.css';
 import 'diff2html/bundles/css/diff2html.min.css';
 

eslint.config.mjs

@@ -0,0 +1,77 @@
+import globals from 'globals';
+import eslint from '@eslint/js';
+import tseslint from 'typescript-eslint';
+import pluginJest from 'eslint-plugin-jest';
+import json from '@eslint/json';
+import pluginPromise from 'eslint-plugin-promise';
+
+export default [
+  { ...eslint.configs.recommended, files: ['src/**/*.{js,mjs,cjs,ts}'] },
+  ...tseslint.configs.recommended,
+  // ...tseslint.configs.recommendedTypeChecked,
+  // ...tseslint.configs.strict,
+  // ...tseslint.configs.stylistic,
+  // ...tseslint.configs.strictTypeChecked,
+  // ...tseslint.configs.stylisticTypeChecked,
+  {
+    rules: {
+      '@typescript-eslint/no-unused-vars': [
+        'error',
+        {
+          args: 'all',
+          argsIgnorePattern: '^_',
+          caughtErrors: 'all',
+          caughtErrorsIgnorePattern: '^_',
+          destructuredArrayIgnorePattern: '^_',
+          varsIgnorePattern: '^_',
+          ignoreRestSiblings: true,
+        },
+      ],
+    },
+  },
+  pluginPromise.configs['flat/recommended'],
+  {
+    plugins: {
+      json,
+    },
+    files: ['**/*.json'],
+    language: 'json/json',
+    rules: {
+      'json/no-duplicate-keys': 'error',
+    },
+  },
+  {
+    ...pluginJest.configs['flat/recommended'],
+    ...pluginJest.configs['flat/style'],
+    files: ['src/__tests__/**/*tests.ts'],
+    plugins: { jest: pluginJest },
+    languageOptions: {
+      globals: pluginJest.environments.globals.globals,
+    },
+  },
+  {
+    languageOptions: {
+      globals: {
+        ...globals.browser,
+        ...globals.node,
+        ...globals.es2025,
+        Atomics: 'readonly',
+        SharedArrayBuffer: 'readonly',
+        document: 'readonly',
+        navigator: 'readonly',
+        window: 'readonly',
+      },
+      parserOptions: {
+        project: './tsconfig.eslint.json',
+        tsconfigRootDir: './',
+      },
+    },
+  },
+  {
+    ignores: ['src/diff2html-templates.*', 'coverage/', 'docs/', 'bundles-out/', 'bundles/', 'lib/', 'lib-esm/'],
+  },
+  {
+    ...tseslint.configs.disableTypeChecked,
+    files: ['**/*.{js,mjs,cjs}'],
+  },
+];

jest.config.js

@@ -19,4 +19,5 @@ module.exports = {
       lines: 93,
     },
   },
+  prettierPath: require.resolve('prettier-2'),
 };

package.json

@@ -35,35 +35,35 @@
     "node": ">=12"
   },
   "scripts": {
-    "eslint": "eslint --ignore-path .gitignore \"**/*.{js,jsx,ts,tsx,json}\"",
+    "lint:staged": "lint-staged",
-    "lint:check": "yarn run eslint",
+    "lint:check": "eslint",
-    "lint:fix": "yarn run eslint --fix",
+    "lint:fix": "eslint --fix",
     "prettier": "prettier --ignore-path .gitignore '**/*.+(js|jsx|ts|tsx|json|css|html|md|mdx)'",
-    "format:check": "yarn run prettier --check",
+    "format:check": "npm run prettier --check",
-    "format:fix": "yarn run prettier --write",
+    "format:fix": "npm run prettier --write",
-    "build": "yarn run build:css && yarn run build:templates && yarn run build:commonjs && yarn run build:esm && yarn run build:bundles && yarn run build:website",
+    "build": "npm run build:css && npm run build:templates && npm run build:commonjs && npm run build:esm && npm run build:bundles && npm run build:website",
-    "build:commonjs": "rm -rf lib; tsc -p tsconfig.json --outDir lib",
+    "build:commonjs": "rm -rf lib; tsc -p tsconfig.json -m CommonJS --outDir lib",
     "build:esm": "rm -rf lib-esm; tsc -p tsconfig.json -m ESNext --outDir lib-esm",
     "build:bundles": "rm -rf ./bundles/js; webpack --mode production --config webpack.bundles.ts",
     "build:css": "rm -rf ./bundles/css; postcss --config ./postcss.config.js --no-map -o ./bundles/css/diff2html.min.css ./src/ui/css/diff2html.css",
     "build:templates": "ts-node ./scripts/hulk.ts --wrapper ts --variable 'defaultTemplates' ./src/templates/*.mustache > ./src/diff2html-templates.ts",
     "build:website": "rm -rf docs; webpack --mode production --config webpack.website.ts",
-    "gen": "yarn run gen:toc",
+    "gen": "npm run gen:toc",
     "gen:toc-base": "markdown-toc --maxdepth 3 --bullets='-' -i",
-    "gen:toc": "yarn run gen:toc-base README.md",
+    "gen:toc": "npm run gen:toc-base README.md",
     "test": "is-ci 'test:coverage' 'test:watch'",
     "test:coverage": "jest --coverage",
     "test:watch": "jest --watch",
     "test:debug": "node --inspect-brk ./node_modules/jest/bin/jest.js --runInBand --watch",
-    "coverage:open": "yarn run test:coverage && open ./coverage/index.html",
+    "coverage:open": "npm run test:coverage && open ./coverage/index.html",
     "coverage:push": "curl -Ls https://coverage.codacy.com/get.sh | bash",
-    "validate": "yarn run build:templates && yarn run format:check && yarn run lint:check && yarn run build && yarn run test:coverage",
+    "validate": "npm run build:templates && npm run format:check && npm run lint:check && npm run build && npm run test:coverage",
-    "fix": "yarn run format:fix && yarn run lint:fix",
+    "fix": "npm run format:fix && npm run lint:fix",
-    "start": "yarn run start:website",
+    "start": "npm run start:website",
     "start:website": "webpack serve --mode development --config webpack.website.ts",
-    "preversion": "yarn run validate",
+    "preversion": "npm run validate",
     "version": "git add -A package.json",
-    "prepare": "husky install"
+    "prepare": "husky"
   },
   "main": "./lib/diff2html.js",
   "module": "./lib-esm/diff2html.js",
@@ -77,68 +77,65 @@
       "prettier --write"
     ],
     "README.md": [
-      "yarn run gen:toc-base"
+      "npm run gen:toc-base"
     ]
   },
   "dependencies": {
-    "diff": "5.1.0",
+    "diff": "^7.0.0",
     "hogan.js": "3.0.2"
   },
   "optionalDependencies": {
-    "highlight.js": "11.8.0"
+    "highlight.js": "11.9.0"
   },
   "devDependencies": {
-    "@types/diff": "5.0.3",
+    "prettier-2": "npm:prettier@^2",
-    "@types/hogan.js": "3.0.1",
+    "@eslint/js": "^9.17.0",
-    "@types/jest": "29.5.3",
+    "@eslint/json": "^0.9.0",
-    "@types/node": "20.4.8",
+    "@types/diff": "^6.0.0",
-    "@types/nopt": "3.0.29",
+    "@types/hogan.js": "3.0.5",
-    "@typescript-eslint/eslint-plugin": "6.2.1",
+    "@types/jest": "^29.5.14",
-    "@typescript-eslint/parser": "6.2.1",
+    "@types/node": "^22.10.2",
+    "@types/nopt": "3.0.32",
     "all-contributors-cli": "^6.24.0",
-    "autoprefixer": "10.4.14",
+    "autoprefixer": "^10.4.20",
-    "bulma": "^0.9.4",
+    "bulma": "^1.0.2",
     "clipboard": "2.0.11",
-    "copy-webpack-plugin": "11.0.0",
+    "copy-webpack-plugin": "^12.0.2",
-    "css-loader": "6.8.1",
+    "css-loader": "^7.1.2",
-    "cssnano": "6.0.1",
+    "cssnano": "^7.0.6",
-    "eslint": "8.46.0",
+    "eslint": "^9.17.0",
-    "eslint-config-prettier": "9.0.0",
+    "eslint-plugin-jest": "28.10.0",
-    "eslint-plugin-import": "2.28.0",
+    "eslint-plugin-promise": "^7.2.1",
-    "eslint-plugin-jest": "27.2.3",
-    "eslint-plugin-json": "3.1.0",
-    "eslint-plugin-node": "11.1.0",
-    "eslint-plugin-optimize-regex": "1.2.1",
-    "eslint-plugin-promise": "6.1.1",
-    "eslint-plugin-sonarjs": "0.20.0",
     "file-loader": "6.2.0",
+    "globals": "^15.14.0",
     "handlebars": "4.7.8",
     "handlebars-loader": "1.7.3",
-    "html-webpack-plugin": "5.5.3",
+    "html-webpack-plugin": "^5.6.3",
-    "husky": "^8.0.1",
+    "husky": "^9.1.7",
     "image-webpack-loader": "8.1.0",
     "is-ci-cli": "2.2.0",
-    "jest": "29.6.2",
+    "jest": "29.7.0",
-    "lint-staged": "13.2.3",
+    "lint-staged": "^15.2.11",
     "markdown-toc": "^1.2.0",
-    "mini-css-extract-plugin": "2.7.6",
+    "mini-css-extract-plugin": "^2.9.2",
     "mkdirp": "3.0.1",
-    "nopt": "7.2.0",
+    "nopt": "^8.0.0",
-    "postcss": "8.4.27",
+    "postcss": "^8.4.49",
-    "postcss-cli": "10.1.0",
+    "postcss-cli": "11.0.0",
-    "postcss-import": "15.1.0",
+    "postcss-import": "^16.1.0",
-    "postcss-loader": "7.3.3",
+    "postcss-loader": "^8.1.1",
-    "postcss-preset-env": "9.1.1",
+    "postcss-preset-env": "^10.1.2",
-    "prettier": "3.0.1",
+    "prettier": "^3.4.2",
-    "ts-jest": "29.1.1",
+    "ts-jest": "^29.2.5",
-    "ts-loader": "9.4.4",
+    "ts-loader": "9.5.1",
-    "ts-node": "10.9.1",
+    "ts-node": "10.9.2",
-    "typescript": "5.1.6",
+    "typescript": "^5.7.2",
+    "typescript-eslint": "^8.18.2",
     "url-loader": "4.1.1",
-    "webpack": "5.88.2",
+    "webpack": "^5.97.1",
-    "webpack-cli": "5.1.4",
+    "webpack-cli": "^6.0.1",
-    "webpack-dev-server": "4.15.1",
+    "webpack-dev-server": "^5.2.0",
-    "whatwg-fetch": "3.6.17"
+    "whatwg-fetch": "3.6.20"
   },
   "resolutions": {
     "lodash": ">=4.17.20",

scripts/hulk.ts

@@ -67,7 +67,7 @@ function extractFiles(files: string[]): string[] {
   `;
 
   if (options.version) {
-    // eslint-disable-next-line @typescript-eslint/no-var-requires
+    // eslint-disable-next-line @typescript-eslint/no-require-imports
     console.log(require('../package.json').version);
     process.exit(0);
   }

src/__tests__/diff-parser-tests.ts

@@ -2,7 +2,6 @@ import { parse } from '../diff-parser';
 
 describe('DiffParser', () => {
   describe('generateDiffJson', () => {
-    // eslint-disable-next-line jest/expect-expect
     it('should parse unix with \n diff', () => {
       const diff =
         'diff --git a/sample b/sample\n' +
@@ -52,7 +51,6 @@ describe('DiffParser', () => {
       `);
     });
 
-    // eslint-disable-next-line jest/expect-expect
     it('should parse windows with \r\n diff', () => {
       const diff =
         'diff --git a/sample b/sample\r\n' +
@@ -102,7 +100,6 @@ describe('DiffParser', () => {
       `);
     });
 
-    // eslint-disable-next-line jest/expect-expect
     it('should parse old os x with \r diff', () => {
       const diff =
         'diff --git a/sample b/sample\r' +
@@ -152,7 +149,6 @@ describe('DiffParser', () => {
       `);
     });
 
-    // eslint-disable-next-line jest/expect-expect
     it('should parse mixed eols diff', () => {
       const diff =
         'diff --git a/sample b/sample\n' +

src/__tests__/diff2html-tests.ts

@@ -928,7 +928,7 @@ describe('Diff2Html', () => {
             <td class="d2h-del d2h-change">
                 <div class="d2h-code-line">
                     <span class="d2h-code-line-prefix">-</span>
-                    <span class="d2h-code-line-ctn"><del>&lt;!-- commented code --&gt;</del></span>
+                    <span class="d2h-code-line-ctn">&lt;<del>!-- commented code --</del>&gt;</span>
                 </div>
             </td>
         </tr><tr>
@@ -939,7 +939,7 @@ describe('Diff2Html', () => {
             <td class="d2h-del d2h-change">
                 <div class="d2h-code-line">
                     <span class="d2h-code-line-prefix">-</span>
-                    <span class="d2h-code-line-ctn"><del>&lt;&#x2F;div</del>&gt;</span>
+                    <span class="d2h-code-line-ctn">&lt;<del>&#x2F;div</del>&gt;</span>
                 </div>
             </td>
         </tr><tr>
@@ -950,7 +950,7 @@ describe('Diff2Html', () => {
             <td class="d2h-ins d2h-change">
                 <div class="d2h-code-line">
                     <span class="d2h-code-line-prefix">+</span>
-                    <span class="d2h-code-line-ctn"><ins>&lt;html&gt;</ins></span>
+                    <span class="d2h-code-line-ctn">&lt;<ins>html</ins>&gt;</span>
                 </div>
             </td>
         </tr><tr>
@@ -961,7 +961,7 @@ describe('Diff2Html', () => {
             <td class="d2h-ins d2h-change">
                 <div class="d2h-code-line">
                     <span class="d2h-code-line-prefix">+</span>
-                    <span class="d2h-code-line-ctn"><ins>&lt;body</ins>&gt;</span>
+                    <span class="d2h-code-line-ctn">&lt;<ins>body</ins>&gt;</span>
                 </div>
             </td>
         </tr>
@@ -1326,78 +1326,78 @@ describe('Diff2Html', () => {
           colorScheme: ColorSchemeType.AUTO,
         });
         expect(result).toMatchInlineSnapshot(`
-        "<div class="d2h-file-list-wrapper d2h-auto-color-scheme">
+                  "<div class="d2h-file-list-wrapper d2h-auto-color-scheme">
-            <div class="d2h-file-list-header">
+                      <div class="d2h-file-list-header">
-                <span class="d2h-file-list-title">Files changed (1)</span>
+                          <span class="d2h-file-list-title">Files changed (1)</span>
-                <a class="d2h-file-switch d2h-hide">hide</a>
+                          <a class="d2h-file-switch d2h-hide">hide</a>
-                <a class="d2h-file-switch d2h-show">show</a>
+                          <a class="d2h-file-switch d2h-show">show</a>
-            </div>
+                      </div>
-            <ol class="d2h-file-list">
+                      <ol class="d2h-file-list">
-            <li class="d2h-file-list-line">
+                      <li class="d2h-file-list-line">
-            <span class="d2h-file-name-wrapper">
+                      <span class="d2h-file-name-wrapper">
-              <svg aria-hidden="true" class="d2h-icon d2h-changed" height="16" title="modified" version="1.1"
+                        <svg aria-hidden="true" class="d2h-icon d2h-changed" height="16" title="modified" version="1.1"
-                   viewBox="0 0 14 16" width="14">
+                             viewBox="0 0 14 16" width="14">
-                  <path d="M13 1H1C0.45 1 0 1.45 0 2v12c0 0.55 0.45 1 1 1h12c0.55 0 1-0.45 1-1V2c0-0.55-0.45-1-1-1z m0 13H1V2h12v12zM4 8c0-1.66 1.34-3 3-3s3 1.34 3 3-1.34 3-3 3-3-1.34-3-3z"></path>
+                            <path d="M13 1H1C0.45 1 0 1.45 0 2v12c0 0.55 0.45 1 1 1h12c0.55 0 1-0.45 1-1V2c0-0.55-0.45-1-1-1z m0 13H1V2h12v12zM4 8c0-1.66 1.34-3 3-3s3 1.34 3 3-1.34 3-3 3-3-1.34-3-3z"></path>
-              </svg>      <a href="#d2h-675094" class="d2h-file-name">sample</a>
+                        </svg>      <a href="#d2h-675094" class="d2h-file-name">sample</a>
-              <span class="d2h-file-stats">
+                        <span class="d2h-file-stats">
-                  <span class="d2h-lines-added">+1</span>
+                            <span class="d2h-lines-added">+1</span>
-                  <span class="d2h-lines-deleted">-1</span>
+                            <span class="d2h-lines-deleted">-1</span>
-              </span>
+                        </span>
-            </span>
+                      </span>
-        </li>
+                  </li>
-            </ol>
+                      </ol>
-        </div><div class="d2h-wrapper d2h-auto-color-scheme">
+                  </div><div class="d2h-wrapper d2h-auto-color-scheme">
-            <div id="d2h-675094" class="d2h-file-wrapper" data-lang="">
+                      <div id="d2h-675094" class="d2h-file-wrapper" data-lang="">
-            <div class="d2h-file-header">
+                      <div class="d2h-file-header">
-            <span class="d2h-file-name-wrapper">
+                      <span class="d2h-file-name-wrapper">
-            <svg aria-hidden="true" class="d2h-icon" height="16" version="1.1" viewBox="0 0 12 16" width="12">
+                      <svg aria-hidden="true" class="d2h-icon" height="16" version="1.1" viewBox="0 0 12 16" width="12">
-                <path d="M6 5H2v-1h4v1zM2 8h7v-1H2v1z m0 2h7v-1H2v1z m0 2h7v-1H2v1z m10-7.5v9.5c0 0.55-0.45 1-1 1H1c-0.55 0-1-0.45-1-1V2c0-0.55 0.45-1 1-1h7.5l3.5 3.5z m-1 0.5L8 2H1v12h10V5z"></path>
+                          <path d="M6 5H2v-1h4v1zM2 8h7v-1H2v1z m0 2h7v-1H2v1z m0 2h7v-1H2v1z m10-7.5v9.5c0 0.55-0.45 1-1 1H1c-0.55 0-1-0.45-1-1V2c0-0.55 0.45-1 1-1h7.5l3.5 3.5z m-1 0.5L8 2H1v12h10V5z"></path>
-            </svg>    <span class="d2h-file-name">sample</span>
+                      </svg>    <span class="d2h-file-name">sample</span>
-            <span class="d2h-tag d2h-changed d2h-changed-tag">CHANGED</span></span>
+                      <span class="d2h-tag d2h-changed d2h-changed-tag">CHANGED</span></span>
-        <label class="d2h-file-collapse">
+                  <label class="d2h-file-collapse">
-            <input class="d2h-file-collapse-input" type="checkbox" name="viewed" value="viewed">
+                      <input class="d2h-file-collapse-input" type="checkbox" name="viewed" value="viewed">
-            Viewed
+                      Viewed
-        </label>
+                  </label>
-            </div>
+                      </div>
-            <div class="d2h-file-diff">
+                      <div class="d2h-file-diff">
-                <div class="d2h-code-wrapper">
+                          <div class="d2h-code-wrapper">
-                    <table class="d2h-diff-table">
+                              <table class="d2h-diff-table">
-                        <tbody class="d2h-diff-tbody">
+                                  <tbody class="d2h-diff-tbody">
-                        <tr>
+                                  <tr>
-            <td class="d2h-code-linenumber d2h-info"></td>
+                      <td class="d2h-code-linenumber d2h-info"></td>
-            <td class="d2h-info">
+                      <td class="d2h-info">
-                <div class="d2h-code-line">@@ -1 +1 @@</div>
+                          <div class="d2h-code-line">@@ -1 +1 @@</div>
-            </td>
+                      </td>
-        </tr><tr>
+                  </tr><tr>
-            <td class="d2h-code-linenumber d2h-del d2h-change">
+                      <td class="d2h-code-linenumber d2h-del d2h-change">
-              <div class="line-num1">1</div>
+                        <div class="line-num1">1</div>
-        <div class="line-num2"></div>
+                  <div class="line-num2"></div>
-            </td>
+                      </td>
-            <td class="d2h-del d2h-change">
+                      <td class="d2h-del d2h-change">
-                <div class="d2h-code-line">
+                          <div class="d2h-code-line">
-                    <span class="d2h-code-line-prefix">-</span>
+                              <span class="d2h-code-line-prefix">-</span>
-                    <span class="d2h-code-line-ctn"><del>test</del></span>
+                              <span class="d2h-code-line-ctn"><del>test</del></span>
-                </div>
+                          </div>
-            </td>
+                      </td>
-        </tr><tr>
+                  </tr><tr>
-            <td class="d2h-code-linenumber d2h-ins d2h-change">
+                      <td class="d2h-code-linenumber d2h-ins d2h-change">
-              <div class="line-num1"></div>
+                        <div class="line-num1"></div>
-        <div class="line-num2">1</div>
+                  <div class="line-num2">1</div>
-            </td>
+                      </td>
-            <td class="d2h-ins d2h-change">
+                      <td class="d2h-ins d2h-change">
-                <div class="d2h-code-line">
+                          <div class="d2h-code-line">
-                    <span class="d2h-code-line-prefix">+</span>
+                              <span class="d2h-code-line-prefix">+</span>
-                    <span class="d2h-code-line-ctn"><ins>test1</ins></span>
+                              <span class="d2h-code-line-ctn"><ins>test1</ins></span>
-                </div>
+                          </div>
-            </td>
+                      </td>
-        </tr>
+                  </tr>
-                        </tbody>
+                                  </tbody>
-                    </table>
+                              </table>
-                </div>
+                          </div>
-            </div>
+                      </div>
-        </div>
+                  </div>
-        </div>"
+                  </div>"
-        `);
+                `);
       });
     });
 
@@ -1468,78 +1468,78 @@ describe('Diff2Html', () => {
           colorScheme: ColorSchemeType.DARK,
         });
         expect(result).toMatchInlineSnapshot(`
-        "<div class="d2h-file-list-wrapper d2h-dark-color-scheme">
+                  "<div class="d2h-file-list-wrapper d2h-dark-color-scheme">
-            <div class="d2h-file-list-header">
+                      <div class="d2h-file-list-header">
-                <span class="d2h-file-list-title">Files changed (1)</span>
+                          <span class="d2h-file-list-title">Files changed (1)</span>
-                <a class="d2h-file-switch d2h-hide">hide</a>
+                          <a class="d2h-file-switch d2h-hide">hide</a>
-                <a class="d2h-file-switch d2h-show">show</a>
+                          <a class="d2h-file-switch d2h-show">show</a>
-            </div>
+                      </div>
-            <ol class="d2h-file-list">
+                      <ol class="d2h-file-list">
-            <li class="d2h-file-list-line">
+                      <li class="d2h-file-list-line">
-            <span class="d2h-file-name-wrapper">
+                      <span class="d2h-file-name-wrapper">
-              <svg aria-hidden="true" class="d2h-icon d2h-changed" height="16" title="modified" version="1.1"
+                        <svg aria-hidden="true" class="d2h-icon d2h-changed" height="16" title="modified" version="1.1"
-                   viewBox="0 0 14 16" width="14">
+                             viewBox="0 0 14 16" width="14">
-                  <path d="M13 1H1C0.45 1 0 1.45 0 2v12c0 0.55 0.45 1 1 1h12c0.55 0 1-0.45 1-1V2c0-0.55-0.45-1-1-1z m0 13H1V2h12v12zM4 8c0-1.66 1.34-3 3-3s3 1.34 3 3-1.34 3-3 3-3-1.34-3-3z"></path>
+                            <path d="M13 1H1C0.45 1 0 1.45 0 2v12c0 0.55 0.45 1 1 1h12c0.55 0 1-0.45 1-1V2c0-0.55-0.45-1-1-1z m0 13H1V2h12v12zM4 8c0-1.66 1.34-3 3-3s3 1.34 3 3-1.34 3-3 3-3-1.34-3-3z"></path>
-              </svg>      <a href="#d2h-675094" class="d2h-file-name">sample</a>
+                        </svg>      <a href="#d2h-675094" class="d2h-file-name">sample</a>
-              <span class="d2h-file-stats">
+                        <span class="d2h-file-stats">
-                  <span class="d2h-lines-added">+1</span>
+                            <span class="d2h-lines-added">+1</span>
-                  <span class="d2h-lines-deleted">-1</span>
+                            <span class="d2h-lines-deleted">-1</span>
-              </span>
+                        </span>
-            </span>
+                      </span>
-        </li>
+                  </li>
-            </ol>
+                      </ol>
-        </div><div class="d2h-wrapper d2h-dark-color-scheme">
+                  </div><div class="d2h-wrapper d2h-dark-color-scheme">
-            <div id="d2h-675094" class="d2h-file-wrapper" data-lang="">
+                      <div id="d2h-675094" class="d2h-file-wrapper" data-lang="">
-            <div class="d2h-file-header">
+                      <div class="d2h-file-header">
-            <span class="d2h-file-name-wrapper">
+                      <span class="d2h-file-name-wrapper">
-            <svg aria-hidden="true" class="d2h-icon" height="16" version="1.1" viewBox="0 0 12 16" width="12">
+                      <svg aria-hidden="true" class="d2h-icon" height="16" version="1.1" viewBox="0 0 12 16" width="12">
-                <path d="M6 5H2v-1h4v1zM2 8h7v-1H2v1z m0 2h7v-1H2v1z m0 2h7v-1H2v1z m10-7.5v9.5c0 0.55-0.45 1-1 1H1c-0.55 0-1-0.45-1-1V2c0-0.55 0.45-1 1-1h7.5l3.5 3.5z m-1 0.5L8 2H1v12h10V5z"></path>
+                          <path d="M6 5H2v-1h4v1zM2 8h7v-1H2v1z m0 2h7v-1H2v1z m0 2h7v-1H2v1z m10-7.5v9.5c0 0.55-0.45 1-1 1H1c-0.55 0-1-0.45-1-1V2c0-0.55 0.45-1 1-1h7.5l3.5 3.5z m-1 0.5L8 2H1v12h10V5z"></path>
-            </svg>    <span class="d2h-file-name">sample</span>
+                      </svg>    <span class="d2h-file-name">sample</span>
-            <span class="d2h-tag d2h-changed d2h-changed-tag">CHANGED</span></span>
+                      <span class="d2h-tag d2h-changed d2h-changed-tag">CHANGED</span></span>
-        <label class="d2h-file-collapse">
+                  <label class="d2h-file-collapse">
-            <input class="d2h-file-collapse-input" type="checkbox" name="viewed" value="viewed">
+                      <input class="d2h-file-collapse-input" type="checkbox" name="viewed" value="viewed">
-            Viewed
+                      Viewed
-        </label>
+                  </label>
-            </div>
+                      </div>
-            <div class="d2h-file-diff">
+                      <div class="d2h-file-diff">
-                <div class="d2h-code-wrapper">
+                          <div class="d2h-code-wrapper">
-                    <table class="d2h-diff-table">
+                              <table class="d2h-diff-table">
-                        <tbody class="d2h-diff-tbody">
+                                  <tbody class="d2h-diff-tbody">
-                        <tr>
+                                  <tr>
-            <td class="d2h-code-linenumber d2h-info"></td>
+                      <td class="d2h-code-linenumber d2h-info"></td>
-            <td class="d2h-info">
+                      <td class="d2h-info">
-                <div class="d2h-code-line">@@ -1 +1 @@</div>
+                          <div class="d2h-code-line">@@ -1 +1 @@</div>
-            </td>
+                      </td>
-        </tr><tr>
+                  </tr><tr>
-            <td class="d2h-code-linenumber d2h-del d2h-change">
+                      <td class="d2h-code-linenumber d2h-del d2h-change">
-              <div class="line-num1">1</div>
+                        <div class="line-num1">1</div>
-        <div class="line-num2"></div>
+                  <div class="line-num2"></div>
-            </td>
+                      </td>
-            <td class="d2h-del d2h-change">
+                      <td class="d2h-del d2h-change">
-                <div class="d2h-code-line">
+                          <div class="d2h-code-line">
-                    <span class="d2h-code-line-prefix">-</span>
+                              <span class="d2h-code-line-prefix">-</span>
-                    <span class="d2h-code-line-ctn"><del>test</del></span>
+                              <span class="d2h-code-line-ctn"><del>test</del></span>
-                </div>
+                          </div>
-            </td>
+                      </td>
-        </tr><tr>
+                  </tr><tr>
-            <td class="d2h-code-linenumber d2h-ins d2h-change">
+                      <td class="d2h-code-linenumber d2h-ins d2h-change">
-              <div class="line-num1"></div>
+                        <div class="line-num1"></div>
-        <div class="line-num2">1</div>
+                  <div class="line-num2">1</div>
-            </td>
+                      </td>
-            <td class="d2h-ins d2h-change">
+                      <td class="d2h-ins d2h-change">
-                <div class="d2h-code-line">
+                          <div class="d2h-code-line">
-                    <span class="d2h-code-line-prefix">+</span>
+                              <span class="d2h-code-line-prefix">+</span>
-                    <span class="d2h-code-line-ctn"><ins>test1</ins></span>
+                              <span class="d2h-code-line-ctn"><ins>test1</ins></span>
-                </div>
+                          </div>
-            </td>
+                      </td>
-        </tr>
+                  </tr>
-                        </tbody>
+                                  </tbody>
-                    </table>
+                              </table>
-                </div>
+                          </div>
-            </div>
+                      </div>
-        </div>
+                  </div>
-        </div>"
+                  </div>"
-        `);
+                `);
       });
     });
   });

src/diff-parser.ts

@@ -458,18 +458,16 @@ export function parse(diffInput: string, config: DiffParserConfig = {}): DiffFil
     } else if ((values = index.exec(line))) {
       currentFile.checksumBefore = values[1];
       currentFile.checksumAfter = values[2];
-      values[3] && (currentFile.mode = values[3]);
+      if (values[3]) currentFile.mode = values[3];
     } else if ((values = combinedIndex.exec(line))) {
       currentFile.checksumBefore = [values[2], values[3]];
       currentFile.checksumAfter = values[1];
     } else if ((values = combinedMode.exec(line))) {
       currentFile.oldMode = [values[2], values[3]];
       currentFile.newMode = values[1];
-      // eslint-disable-next-line sonarjs/no-duplicated-branches
     } else if ((values = combinedNewFile.exec(line))) {
       currentFile.newFileMode = values[1];
       currentFile.isNew = true;
-      // eslint-disable-next-line sonarjs/no-duplicated-branches
     } else if ((values = combinedDeletedFile.exec(line))) {
       currentFile.deletedFileMode = values[1];
       currentFile.isDeleted = true;

src/hoganjs-utils.ts

@@ -39,7 +39,7 @@ export default class HoganJsUtils {
     try {
       const template = this.preCompiledTemplates[templateKey];
       return template.render(params, partials, indent);
-    } catch (e) {
+    } catch (_e) {
       throw new Error(`Could not find template to render '${templateKey}'`);
     }
   }

src/ui/css/diff2html.css

@@ -5,7 +5,8 @@
  *
  */
 
-:root {
+:root,
+:host {
   --d2h-bg-color: #fff;
   --d2h-border-color: #ddd;
 

src/ui/js/diff2html-ui-base.ts

@@ -153,11 +153,10 @@ export class Diff2HtmlUI {
 
       let hljsLanguage =
         language && this.config.highlightLanguages.has(language)
-          ? // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+          ? this.config.highlightLanguages.get(language)!
-            this.config.highlightLanguages.get(language)!
           : language
-          ? getLanguage(language)
+            ? getLanguage(language)
-          : 'plaintext';
+            : 'plaintext';
 
       // Fallback to plaintext in case language is not loaded
       if (hljs.getLanguage(hljsLanguage) === undefined) {

tsconfig.eslint.json

@@ -0,0 +1,5 @@
+{
+  "extends": "./tsconfig.json",
+  "exclude": ["node_modules"],
+  "include": ["./**/*"]
+}

tsconfig.json

@@ -1,8 +1,8 @@
 {
-  "include": ["*env.d.ts", "src/**/*", "./typings/**/*"],
+  "include": ["src/**/*", "typings/**/*"],
   "exclude": ["node_modules", "src/__tests__/**"],
   "compilerOptions": {
-    "outDir": "lib",
+    "outDir": "bundles-out",
     "module": "CommonJS",
     "moduleResolution": "Node",
     "target": "ES6",

typings/merge.d.ts

@@ -1,4 +1,3 @@
 declare module 'merge' {
-  // eslint-disable-next-line @typescript-eslint/ban-types
   export function recursive(clone: boolean, ...items: object[]): object;
 }

webpack.website.ts

@@ -3,7 +3,6 @@ import path from 'path';
 import webpack from 'webpack';
 import HtmlWebpackPlugin from 'html-webpack-plugin';
 import MiniCssExtractPlugin from 'mini-css-extract-plugin';
-// eslint-disable-next-line import/default
 import CopyPlugin from 'copy-webpack-plugin';
 
 const pages = ['index', 'demo'];

website/templates/pages/demo/demo.ts

@@ -123,10 +123,16 @@ function prepareRequest(url: string): Request {
 
 function getConfiguration(urlParams: URLParams): Diff2HtmlUIConfig {
   // Removing `diff` and `diffTooBigMessage` form `urlParams` to avoid being inserted
-  // eslint-disable-next-line @typescript-eslint/no-unused-vars
   const { diff, diffTooBigMessage, ...urlParamsRest } = urlParams;
+
+  const defaultColorScheme: ColorSchemeType =
+    window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches
+      ? ColorSchemeType.DARK
+      : ColorSchemeType.LIGHT;
+
   const config: URLParams = {
     ...defaultDiff2HtmlUIConfig,
+    colorScheme: defaultColorScheme,
     ...urlParamsRest,
   };
 
@@ -134,8 +140,8 @@ function getConfiguration(urlParams: URLParams): Diff2HtmlUIConfig {
     const newObject = !Number.isNaN(Number(v))
       ? { [k]: Number(v) }
       : v === 'true' || v === 'false'
-      ? { [k]: Boolean(v) }
+        ? { [k]: Boolean(v) }
-      : { [k]: v };
+        : { [k]: v };
     return { ...object, ...newObject };
   }, {});
 }
@@ -245,6 +251,7 @@ function getHTMLElementById(id: string): HTMLElement {
 
 document.addEventListener('DOMContentLoaded', async () => {
   // Improves browser compatibility
+  // eslint-disable-next-line @typescript-eslint/no-require-imports
   require('whatwg-fetch');
 
   const drawAndUpdateUrl = async (
@@ -282,13 +289,13 @@ document.addEventListener('DOMContentLoaded', async () => {
   let [config, diffString] = await prepareInitialState(elements);
 
   // Update HTML inputs from any changes in URL
-  config.outputFormat && (elements.options.outputFormat.value = config.outputFormat);
+  if (config.outputFormat) elements.options.outputFormat.value = config.outputFormat;
-  config.colorScheme && (elements.options.colorScheme.value = config.colorScheme);
+  if (config.colorScheme) elements.options.colorScheme.value = config.colorScheme;
-  config.drawFileList && (elements.checkboxes.drawFileList.checked = config.drawFileList);
+  if (config.drawFileList) elements.checkboxes.drawFileList.checked = config.drawFileList;
-  config.matching && (elements.options.matching.value = config.matching);
+  if (config.matching) elements.options.matching.value = config.matching;
-  config.matchWordsThreshold && (elements.options.wordsThreshold.value = config.matchWordsThreshold.toString());
+  if (config.matchWordsThreshold) elements.options.wordsThreshold.value = config.matchWordsThreshold.toString();
-  config.matchingMaxComparisons &&
+  if (config.matchingMaxComparisons)
-    (elements.options.matchingMaxComparisons.value = config.matchingMaxComparisons.toString());
+    elements.options.matchingMaxComparisons.value = config.matchingMaxComparisons.toString();
 
   Object.entries(elements.options).forEach(([option, element]) =>
     element.addEventListener('change', () => {

website/templates/pages/index/index.ts

@@ -4,5 +4,4 @@ import '../../../main.ts';
 import '../../../main.css';
 import './index.css';
 
-// eslint-disable-next-line no-new
 new Clipboard(document.getElementsByClassName('clipboard')[0]);