Merge pull request #383 from rtfpessoa/bump-dependencies

Bump dependencies

Author: rtfpessoa

.eslintrc.js

@@ -52,5 +52,7 @@ module.exports = {
     'sonarjs/no-duplicate-string': 'off',
     // Too verbose
     'sonarjs/cognitive-complexity': 'off',
+    // Too verbose
+    'sonarjs/no-nested-template-literals': 'off',
   },
 };

.husky/pre-commit

@@ -2,4 +2,3 @@
 . "$(dirname "$0")/_/husky.sh"
 
 npx lint-staged
-

package.json

@@ -85,61 +85,60 @@
     "hogan.js": "3.0.2"
   },
   "optionalDependencies": {
-    "highlight.js": "10.7.2"
+    "highlight.js": "11.1.0"
   },
   "devDependencies": {
-    "@types/clipboard": "2.0.1",
-    "@types/copy-webpack-plugin": "6.4.1",
-    "@types/diff": "5.0.0",
-    "@types/hogan.js": "3.0.0",
-    "@types/jest": "26.0.22",
-    "@types/mini-css-extract-plugin": "^1.2.2",
-    "@types/mkdirp": "1.0.1",
-    "@types/node": "14.14.37",
+    "@types/copy-webpack-plugin": "8.0.1",
+    "@types/diff": "5.0.1",
+    "@types/hogan.js": "3.0.1",
+    "@types/jest": "26.0.24",
+    "@types/mini-css-extract-plugin": "^2.0.1",
+    "@types/mkdirp": "1.0.2",
+    "@types/node": "16.4.1",
     "@types/nopt": "3.0.29",
-    "@typescript-eslint/eslint-plugin": "4.21.0",
-    "@typescript-eslint/parser": "4.21.0",
-    "autoprefixer": "10.2.5",
+    "@typescript-eslint/eslint-plugin": "4.28.4",
+    "@typescript-eslint/parser": "4.28.4",
+    "autoprefixer": "10.3.1",
     "bulma": "^0.9.2",
     "clipboard": "2.0.8",
-    "copy-webpack-plugin": "8.1.1",
-    "css-loader": "5.2.0",
-    "cssnano": "4.1.11",
-    "eslint": "7.23.0",
-    "eslint-config-prettier": "8.1.0",
-    "eslint-plugin-import": "2.22.1",
-    "eslint-plugin-jest": "24.3.4",
-    "eslint-plugin-json": "2.1.2",
+    "copy-webpack-plugin": "9.0.1",
+    "css-loader": "6.2.0",
+    "cssnano": "5.0.7",
+    "eslint": "7.31.0",
+    "eslint-config-prettier": "8.3.0",
+    "eslint-plugin-import": "2.23.4",
+    "eslint-plugin-jest": "24.4.0",
+    "eslint-plugin-json": "3.0.0",
     "eslint-plugin-node": "11.1.0",
     "eslint-plugin-optimize-regex": "1.2.0",
-    "eslint-plugin-promise": "4.3.1",
-    "eslint-plugin-sonarjs": "0.6.0",
+    "eslint-plugin-promise": "5.1.0",
+    "eslint-plugin-sonarjs": "0.9.1",
     "file-loader": "6.2.0",
     "handlebars": "4.7.7",
     "handlebars-loader": "1.7.1",
-    "html-webpack-plugin": "5.3.1",
-    "husky": "^6.0.0",
+    "html-webpack-plugin": "5.3.2",
+    "husky": "^7.0.1",
     "image-webpack-loader": "7.0.1",
     "is-ci-cli": "2.2.0",
-    "jest": "26.6.3",
-    "lint-staged": "10.5.4",
+    "jest": "27.0.6",
+    "lint-staged": "11.1.0",
     "markdown-toc": "^1.2.0",
-    "mini-css-extract-plugin": "1.4.1",
+    "mini-css-extract-plugin": "2.1.0",
     "mkdirp": "1.0.4",
     "nopt": "5.0.0",
-    "postcss": "8.2.10",
+    "postcss": "8.3.6",
     "postcss-cli": "8.3.1",
-    "postcss-import": "14.0.1",
-    "postcss-loader": "5.2.0",
+    "postcss-import": "14.0.2",
+    "postcss-loader": "6.1.1",
     "postcss-preset-env": "6.7.0",
-    "prettier": "2.2.1",
-    "ts-jest": "26.5.4",
-    "ts-loader": "8.1.0",
-    "ts-node": "9.1.1",
-    "typescript": "4.2.4",
+    "prettier": "2.3.2",
+    "ts-jest": "27.0.4",
+    "ts-loader": "9.2.3",
+    "ts-node": "10.1.0",
+    "typescript": "4.3.5",
     "url-loader": "4.1.1",
-    "webpack": "5.31.0",
-    "webpack-cli": "4.6.0",
+    "webpack": "5.46.0",
+    "webpack-cli": "4.7.2",
     "whatwg-fetch": "3.6.2"
   },
   "resolutions": {
@@ -149,8 +148,7 @@
     "autolinker": ">=3.14.1",
     "bl": ">=2.2.1",
     "decompress": ">=4.2.1",
-    "node-forge": ">=0.10.0",
-    "@types/webpack": ">=5.28.0"
+    "node-forge": ">=0.10.0"
   },
   "license": "MIT",
   "files": [

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

@@ -1,9 +1,8 @@
-import * as HighlightJS from 'highlight.js/lib/core';
-// import { CompiledMode, HighlightResult, AutoHighlightResult } from 'highlight.js/lib/core.js';
-import { nodeStream, mergeStreams } from './highlight.js-helpers';
+import { closeTags, nodeStream, mergeStreams } from './highlight.js-helpers';
 
 import { html, Diff2HtmlConfig, defaultDiff2HtmlConfig } from '../../diff2html';
 import { DiffFile } from '../../types';
+import { HighlightResult, HLJSApi } from 'highlight.js';
 
 export interface Diff2HtmlUIConfig extends Diff2HtmlConfig {
   synchronisedScroll?: boolean;
@@ -36,16 +35,11 @@ export class Diff2HtmlUI {
   readonly config: typeof defaultDiff2HtmlUIConfig;
   readonly diffHtml: string;
   readonly targetElement: HTMLElement;
-  readonly hljs: typeof HighlightJS | null = null;
+  readonly hljs: HLJSApi | null = null;
 
   currentSelectionColumnId = -1;
 
-  constructor(
-    target: HTMLElement,
-    diffInput?: string | DiffFile[],
-    config: Diff2HtmlUIConfig = {},
-    hljs?: typeof HighlightJS,
-  ) {
+  constructor(target: HTMLElement, diffInput?: string | DiffFile[], config: Diff2HtmlUIConfig = {}, hljs?: HLJSApi) {
     this.config = { ...defaultDiff2HtmlUIConfig, ...config };
     this.diffHtml = diffInput !== undefined ? html(diffInput, this.config) : target.innerHTML;
     this.targetElement = target;
@@ -145,8 +139,10 @@ export class Diff2HtmlUI {
     // Collect all the diff files and execute the highlight on their lines
     const files = this.targetElement.querySelectorAll('.d2h-file-wrapper');
     files.forEach(file => {
-      let oldLinesState: CompiledMode | Language | undefined;
-      let newLinesState: CompiledMode | Language | undefined;
+      // HACK: help Typescript know that `this.hljs` is defined since we already checked it
+      if (this.hljs === null) return;
+      const language = file.getAttribute('data-lang');
+      const hljsLanguage = language ? this.hljs.getLanguage(language) : undefined;
 
       // Collect all the code lines and execute the highlight on them
       const codeLines = file.querySelectorAll('.d2h-code-line-ctn');
@@ -159,24 +155,12 @@ export class Diff2HtmlUI {
 
         if (text === null || lineParent === null || !this.isElement(lineParent)) return;
 
-        const lineState = lineParent.classList.contains('d2h-del') ? oldLinesState : newLinesState;
-
-        const language = file.getAttribute('data-lang');
-        const result: HighlightResult =
-          language && this.hljs.getLanguage(language)
-            ? this.hljs.highlight(language, text, true, lineState)
-            : this.hljs.highlightAuto(text);
-
-        if (this.instanceOfHighlightResult(result)) {
-          if (lineParent.classList.contains('d2h-del')) {
-            oldLinesState = result.top;
-          } else if (lineParent.classList.contains('d2h-ins')) {
-            newLinesState = result.top;
-          } else {
-            oldLinesState = result.top;
-            newLinesState = result.top;
-          }
-        }
+        const result: HighlightResult = closeTags(
+          this.hljs.highlight(text, {
+            language: hljsLanguage?.name || 'plaintext',
+            ignoreIllegals: true,
+          }),
+        );
 
         const originalStream = nodeStream(line);
         if (originalStream.length) {
@@ -201,10 +185,6 @@ export class Diff2HtmlUI {
     console.warn('Smart selection is now enabled by default with CSS. No need to call this method anymore.');
   }
 
-  private instanceOfHighlightResult(object: HighlightResult | AutoHighlightResult): object is HighlightResult {
-    return 'top' in object;
-  }
-
   private getHashTag(): string | null {
     const docUrl = document.URL;
     const hashTagIndex = docUrl.indexOf('#');

src/ui/js/highlight.js-helpers.ts

@@ -3,6 +3,8 @@
  * Used to highlight selected html elements using context
  */
 
+import { HighlightResult } from 'highlight.js';
+
 /* Utility functions */
 
 function escapeHTML(value: string): string {
@@ -135,3 +137,24 @@ export function mergeStreams(original: NodeEvent[], highlighted: NodeEvent[], va
 
   return result + escapeHTML(value.substr(processed));
 }
+
+// https://github.com/hexojs/hexo-util/blob/979873b63a725377c2bd6ad834d790023496130d/lib/highlight.js#L123
+export function closeTags(res: HighlightResult): HighlightResult {
+  const tokenStack = new Array<string>();
+
+  res.value = res.value
+    .split('\n')
+    .map(line => {
+      const prepend = tokenStack.map(token => `<span class="${token}">`).join('');
+      const matches = line.matchAll(/(<span class="(.*?)">|<\/span>)/g);
+      Array.from(matches).forEach(match => {
+        if (match[0] === '</span>') tokenStack.shift();
+        else tokenStack.unshift(match[2]);
+      });
+      const append = '</span>'.repeat(tokenStack.length);
+      return prepend + line + append;
+    })
+    .join('\n');
+
+  return res;
+}

src/ui/js/highlight.js-slim.ts

@@ -14,7 +14,6 @@ import highlightJS from 'highlight.js/lib/core';
 // import apache from 'highlight.js/lib/languages/apache';
 // import applescript from 'highlight.js/lib/languages/applescript';
 // import arcade from 'highlight.js/lib/languages/arcade';
-import cLike from 'highlight.js/lib/languages/c-like';
 import cpp from 'highlight.js/lib/languages/cpp';
 // import arduino from 'highlight.js/lib/languages/arduino';
 // import armasm from 'highlight.js/lib/languages/armasm';
@@ -209,7 +208,6 @@ import typescript from 'highlight.js/lib/languages/typescript';
 // highlightJS.registerLanguage('apache', apache);
 // highlightJS.registerLanguage('applescript', applescript);
 // highlightJS.registerLanguage('arcade', arcade);
-highlightJS.registerLanguage('c-like', cLike);
 highlightJS.registerLanguage('cpp', cpp);
 // highlightJS.registerLanguage('arduino', arduino);
 // highlightJS.registerLanguage('armasm', armasm);

tsconfig.json

@@ -4,7 +4,7 @@
     "target": "es5",
     "module": "commonjs",
     "moduleResolution": "node",
-    "lib": ["es2015", "dom"],
+    "lib": ["es2020", "dom"],
     "allowJs": false,
     "declaration": true,
     "declarationMap": true,

website/templates/pages/demo/demo.ts

@@ -65,11 +65,14 @@ function prepareRequest(url: string): Request {
   let fetchUrl;
   const headers = new Headers();
 
-  const githubCommitUrl = /^https?:\/\/(?:www\.)?github\.com\/(.*?)\/(.*?)\/commit\/(.*?)(?:\.diff)?(?:\.patch)?(?:\/.*)?$/;
+  const githubCommitUrl =
+    /^https?:\/\/(?:www\.)?github\.com\/(.*?)\/(.*?)\/commit\/(.*?)(?:\.diff)?(?:\.patch)?(?:\/.*)?$/;
   const githubPrUrl = /^https?:\/\/(?:www\.)?github\.com\/(.*?)\/(.*?)\/pull\/(.*?)(?:\.diff)?(?:\.patch)?(?:\/.*)?$/;
 
-  const gitlabCommitUrl = /^https?:\/\/(?:www\.)?gitlab\.com\/(.*?)\/(.*?)\/commit\/(.*?)(?:\.diff)?(?:\.patch)?(?:\/.*)?$/;
-  const gitlabPrUrl = /^https?:\/\/(?:www\.)?gitlab\.com\/(.*?)\/(.*?)\/merge_requests\/(.*?)(?:\.diff)?(?:\.patch)?(?:\/.*)?$/;
+  const gitlabCommitUrl =
+    /^https?:\/\/(?:www\.)?gitlab\.com\/(.*?)\/(.*?)\/commit\/(.*?)(?:\.diff)?(?:\.patch)?(?:\/.*)?$/;
+  const gitlabPrUrl =
+    /^https?:\/\/(?:www\.)?gitlab\.com\/(.*?)\/(.*?)\/merge_requests\/(.*?)(?:\.diff)?(?:\.patch)?(?:\/.*)?$/;
 
   const bitbucketCommitUrl = /^https?:\/\/(?:www\.)?bitbucket\.org\/(.*?)\/(.*?)\/commits\/(.*?)(?:\/raw)?(?:\/.*)?$/;
   const bitbucketPrUrl = /^https?:\/\/(?:www\.)?bitbucket\.org\/(.*?)\/(.*?)\/pull-requests\/(.*?)(?:\/.*)?$/;