diff2html - npm Package Compare versions

Comparing version 3.4.1 to 3.4.2-bumpdependencies.4.fb66c8f

lib-esm/diff-parser.js

@@ -1,7 +0,5 @@
-var __spreadArrays = (this && this.__spreadArrays) || function () {
-    for (var s = 0, i = 0, il = arguments.length; i < il; i++) s += arguments[i].length;
-    for (var r = Array(s), k = 0, i = 0; i < il; i++)
-        for (var a = arguments[i], j = 0, jl = a.length; j < jl; j++, k++)
-            r[k] = a[j];
-    return r;
+var __spreadArray = (this && this.__spreadArray) || function (to, from) {
+    for (var i = 0, il = from.length, j = to.length; i < il; i++, j++)
+        to[j] = from[i];
+    return to;
 };
@@ -19,3 +17,3 @@ import { LineType } from './types';
 function getFilename(line, linePrefix, extraPrefix) {
-    var prefixes = extraPrefix !== undefined ? __spreadArrays(baseDiffFilenamePrefixes, [extraPrefix]) : baseDiffFilenamePrefixes;
+    var prefixes = extraPrefix !== undefined ? __spreadArray(__spreadArray([], baseDiffFilenamePrefixes), [extraPrefix]) : baseDiffFilenamePrefixes;
     var FilenameRegExp = linePrefix
@@ -22,0 +20,0 @@ ? new RegExp("^" + escapeForRegExp(linePrefix) + " \"?(.+?)\"?$")

lib-esm/ui/js/diff2html-ui-slim.js

@@ -9,2 +9,4 @@ var __extends = (this && this.__extends) || (function () {
     return function (d, b) {
+        if (typeof b !== "function" && b !== null)
+            throw new TypeError("Class extends value " + String(b) + " is not a constructor or null");
         extendStatics(d, b);
@@ -11,0 +13,0 @@ function __() { this.constructor = d; }

lib-esm/ui/js/diff2html-ui.js

@@ -9,2 +9,4 @@ var __extends = (this && this.__extends) || (function () {
     return function (d, b) {
+        if (typeof b !== "function" && b !== null)
+            throw new TypeError("Class extends value " + String(b) + " is not a constructor or null");
         extendStatics(d, b);
@@ -11,0 +13,0 @@ function __() { this.constructor = d; }

lib/diff-parser.js

 "use strict";
-var __spreadArrays = (this && this.__spreadArrays) || function () {
-    for (var s = 0, i = 0, il = arguments.length; i < il; i++) s += arguments[i].length;
-    for (var r = Array(s), k = 0, i = 0; i < il; i++)
-        for (var a = arguments[i], j = 0, jl = a.length; j < jl; j++, k++)
-            r[k] = a[j];
-    return r;
+var __spreadArray = (this && this.__spreadArray) || function (to, from) {
+    for (var i = 0, il = from.length, j = to.length; i < il; i++, j++)
+        to[j] = from[i];
+    return to;
 };
@@ -22,3 +20,3 @@ Object.defineProperty(exports, "__esModule", { value: true });
 function getFilename(line, linePrefix, extraPrefix) {
-    var prefixes = extraPrefix !== undefined ? __spreadArrays(baseDiffFilenamePrefixes, [extraPrefix]) : baseDiffFilenamePrefixes;
+    var prefixes = extraPrefix !== undefined ? __spreadArray(__spreadArray([], baseDiffFilenamePrefixes), [extraPrefix]) : baseDiffFilenamePrefixes;
     var FilenameRegExp = linePrefix
@@ -25,0 +23,0 @@ ? new RegExp("^" + utils_1.escapeForRegExp(linePrefix) + " \"?(.+?)\"?$")

lib/ui/js/diff2html-ui-slim.js

@@ -10,2 +10,4 @@ "use strict";
     return function (d, b) {
+        if (typeof b !== "function" && b !== null)
+            throw new TypeError("Class extends value " + String(b) + " is not a constructor or null");
         extendStatics(d, b);
@@ -12,0 +14,0 @@ function __() { this.constructor = d; }

lib/ui/js/diff2html-ui.js

@@ -10,2 +10,4 @@ "use strict";
     return function (d, b) {
+        if (typeof b !== "function" && b !== null)
+            throw new TypeError("Class extends value " + String(b) + " is not a constructor or null");
         extendStatics(d, b);
@@ -12,0 +14,0 @@ function __() { this.constructor = d; }

package.json

 {
   "name": "diff2html",
-  "version": "3.4.1",
+  "version": "3.4.2-bumpdependencies.4.fb66c8f",
   "homepage": "https://diff2html.xyz",
@@ -35,3 +35,3 @@ "description": "Fast Diff to colorized HTML",
   "engines": {
-    "node": ">=10"
+    "node": ">=12"
   },
@@ -48,6 +48,6 @@ "scripts": {
     "build:esm": "rm -rf lib-esm; tsc -p tsconfig.json -m es6 --outDir lib-esm",
-    "build:bundles": "rm -rf ./bundles/js; webpack ---display-reasons --display-modules --mode production --config webpack.bundles.ts",
+    "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 ---display-reasons --display-modules --mode production --config webpack.website.ts",
+    "build:website": "rm -rf docs; webpack --mode production --config webpack.website.ts",
     "gen": "yarn run gen:toc",
@@ -67,3 +67,6 @@ "gen:toc-base": "markdown-toc --maxdepth 3 --bullets='-' -i",
     "preversion": "yarn run validate",
-    "version": "git add -A package.json"
+    "version": "git add -A package.json",
+    "_postinstall": "husky install",
+    "prepublishOnly": "pinst --disable",
+    "postpublish": "pinst --enable"
   },
@@ -73,7 +76,2 @@ "main": "./lib/diff2html.js",
   "types": "./lib/diff2html.d.ts",
-  "husky": {
-    "hooks": {
-      "pre-commit": "lint-staged"
-    }
-  },
   "lint-staged": {
@@ -92,64 +90,63 @@ "**/*.+(js|jsx|ts|tsx|json)": [
   "dependencies": {
-    "diff": "4.0.2",
+    "diff": "5.0.0",
     "hogan.js": "3.0.2"
   },
   "optionalDependencies": {
-    "highlight.js": "10.4.1"
+    "highlight.js": "10.7.1"
   },
   "devDependencies": {
     "@types/clipboard": "2.0.1",
-    "@types/copy-webpack-plugin": "6.0.0",
-    "@types/diff": "4.0.2",
+    "@types/copy-webpack-plugin": "6.4.1",
+    "@types/diff": "5.0.0",
     "@types/hogan.js": "3.0.0",
-    "@types/html-webpack-plugin": "3.2.3",
-    "@types/jest": "26.0.14",
-    "@types/mini-css-extract-plugin": "0.9.1",
+    "@types/jest": "26.0.22",
+    "@types/mini-css-extract-plugin": "^1.2.2",
     "@types/mkdirp": "1.0.1",
-    "@types/node": "14.11.10",
+    "@types/node": "14.14.37",
     "@types/nopt": "3.0.29",
-    "@typescript-eslint/eslint-plugin": "4.4.1",
-    "@typescript-eslint/parser": "4.4.1",
-    "autoprefixer": "10.0.1",
-    "bulma": "^0.9.0",
-    "clipboard": "2.0.6",
-    "copy-webpack-plugin": "6.1.0",
-    "css-loader": "5.0.0",
+    "@typescript-eslint/eslint-plugin": "4.20.0",
+    "@typescript-eslint/parser": "4.20.0",
+    "autoprefixer": "10.2.5",
+    "bulma": "^0.9.2",
+    "clipboard": "2.0.8",
+    "copy-webpack-plugin": "8.1.0",
+    "css-loader": "5.2.0",
     "cssnano": "4.1.10",
-    "eslint": "7.11.0",
-    "eslint-config-prettier": "6.13.0",
+    "eslint": "7.23.0",
+    "eslint-config-prettier": "8.1.0",
     "eslint-plugin-import": "2.22.1",
-    "eslint-plugin-jest": "24.1.0",
+    "eslint-plugin-jest": "24.3.3",
     "eslint-plugin-json": "2.1.2",
     "eslint-plugin-node": "11.1.0",
     "eslint-plugin-optimize-regex": "1.2.0",
-    "eslint-plugin-promise": "4.2.1",
-    "eslint-plugin-sonarjs": "0.5.0",
-    "file-loader": "6.1.1",
-    "handlebars": "4.7.6",
+    "eslint-plugin-promise": "4.3.1",
+    "eslint-plugin-sonarjs": "0.6.0",
+    "file-loader": "6.2.0",
+    "handlebars": "4.7.7",
     "handlebars-loader": "1.7.1",
-    "html-webpack-plugin": "4.4.1",
-    "husky": "4.3.0",
-    "image-webpack-loader": "6.0.0",
-    "is-ci-cli": "2.1.2",
-    "jest": "26.5.3",
-    "lint-staged": "10.4.1",
+    "html-webpack-plugin": "5.3.1",
+    "husky": "^6.0.0",
+    "image-webpack-loader": "7.0.1",
+    "is-ci-cli": "2.2.0",
+    "jest": "26.6.3",
+    "lint-staged": "10.5.4",
     "markdown-toc": "^1.2.0",
-    "mini-css-extract-plugin": "0.11.0",
+    "mini-css-extract-plugin": "1.4.0",
     "mkdirp": "1.0.4",
     "nopt": "5.0.0",
-    "postcss": "8.1.1",
-    "postcss-cli": "8.1.0",
-    "postcss-import": "12.0.1",
-    "postcss-loader": "4.0.4",
+    "pinst": "^2.1.4",
+    "postcss": "8.2.9",
+    "postcss-cli": "8.3.1",
+    "postcss-import": "14.0.1",
+    "postcss-loader": "5.2.0",
     "postcss-preset-env": "6.7.0",
-    "prettier": "2.1.2",
-    "ts-jest": "26.4.1",
-    "ts-loader": "8.0.5",
-    "ts-node": "9.0.0",
-    "typescript": "4.0.3",
+    "prettier": "2.2.1",
+    "ts-jest": "26.5.4",
+    "ts-loader": "8.1.0",
+    "ts-node": "9.1.1",
+    "typescript": "4.2.3",
     "url-loader": "4.1.1",
-    "webpack": "4.44.1",
-    "webpack-cli": "3.3.12",
-    "webpack-dev-server": "3.11.0",
-    "whatwg-fetch": "3.4.1"
+    "webpack": "5.30.0",
+    "webpack-cli": "4.6.0",
+    "whatwg-fetch": "3.6.2"
   },
@@ -163,3 +160,4 @@ "resolutions": {
     "decompress": ">=4.2.1",
-    "node-forge": ">=0.10.0"
+    "node-forge": ">=0.10.0",
+    "@types/webpack": ">=5.28.0"
   },
@@ -166,0 +164,0 @@ "license": "MIT",

README.md

@@ -7,3 +7,3 @@ # diff2html
 
-[![npm](https://img.shields.io/npm/v/diff2html.svg)](https://www.npmjs.com/package/diff2html)
+[![npm](https://img.shields.io/npm/v/diff2html?style=flat)](https://www.npmjs.com/package/diff2html)
 [![Dependency Status](https://david-dm.org/rtfpessoa/diff2html.svg)](https://david-dm.org/rtfpessoa/diff2html)
@@ -30,2 +30,7 @@ [![devDependency Status](https://david-dm.org/rtfpessoa/diff2html/dev-status.svg)](https://david-dm.org/rtfpessoa/diff2html#info=devDependencies)
 - [Usage](#usage)
+- [Diff2HtmlUI Usage](#diff2htmlui-usage)
+  - [Diff2HtmlUI API](#diff2htmlui-api)
+  - [Diff2HtmlUI Configuration](#diff2htmlui-configuration)
+  - [Diff2HtmlUI Browser](#diff2htmlui-browser)
+  - [Diff2HtmlUI Examples](#diff2htmlui-examples)
 - [Diff2Html Usage](#diff2html-usage)
@@ -37,6 +42,2 @@ - [Diff2Html API](#diff2html-api)
   - [Diff2Html Examples](#diff2html-examples)
-- [Diff2HtmlUI Usage](#diff2htmlui-usage)
-  - [Diff2HtmlUI API](#diff2htmlui-api)
-  - [Diff2HtmlUI Configuration](#diff2htmlui-configuration)
-  - [Diff2HtmlUI Browser](#diff2htmlui-browser)
 - [Troubleshooting](#troubleshooting)
@@ -116,20 +117,186 @@ - [1. Out of memory or Slow execution](#1-out-of-memory-or-slow-execution)
 
+- [Diff2HtmlUI](#diff2htmlui-usage): using this wrapper makes it easy to inject the html in the DOM and adds some nice
+  features to the diff, like syntax highlight.
 - [Diff2Html](#diff2html-usage): using the parser and html generator directly from the library gives you complete
   control about what you can do with the json or html generated.
-- [Diff2HtmlUI](#diff2htmlui-usage): using this wrapper makes it easy to inject the html in the DOM and adds some nice
-  features to the diff, like syntax highlight.
 
 Bellow you can find more details and examples about each option.
 
-## Diff2Html Usage
+## Diff2HtmlUI Usage
 
-To load correctly in the Browser you always need to include the stylesheet in the final HTML.
+> Simple wrapper to ease simple tasks in the browser such as: code highlight and js effects
 
-Import the stylesheet
+- Invoke Diff2html
+- Inject output in DOM element
+- Enable collapsible file summary list
+- Enable syntax highlight of the code in the diffs
 
+### Diff2HtmlUI API
+
+> Create a Diff2HtmlUI instance
+
+```ts
+constructor(target: HTMLElement, diffInput?: string | DiffFile[]) // diff2html-ui, diff2html-ui-slim
+constructor(target: HTMLElement, diffInput?: string | DiffFile[], config: Diff2HtmlUIConfig = {}, hljs?: HighlightJS) // diff2html-ui-base
+```
+
+> Generate and inject in the document the Pretty HTML representation of the diff
+
+```ts
+draw(): void
+```
+
+> Enable extra features
+
+```ts
+synchronisedScroll(): void
+fileListToggle(startVisible: boolean): void
+highlightCode(): void
+```
+
+### Diff2HtmlUI Configuration
+
+- `synchronisedScroll`: scroll both panes in side-by-side mode: `true` or `false`, default is `true`
+- `highlight`: syntax highlight the code on the diff: `true` or `false`, default is `true`
+- `fileListToggle`: allow the file summary list to be toggled: `true` or `false`, default is `true`
+- `fileListStartVisible`: choose if the file summary list starts visible: `true` or `false`, default is `false`
+- `fileContentToggle`: allow each file contents to be toggled: `true` or `false`, default is `true`
+- [All the options](#diff2html-configuration) from Diff2Html are also valid configurations in Diff2HtmlUI
+
+### Diff2HtmlUI Browser
+
+#### Mandatory HTML resource imports
+
 ```html
 <!-- CSS -->
 <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/diff2html/bundles/css/diff2html.min.css" />
+
+<!-- Javascripts -->
+<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/diff2html/bundles/js/diff2html-ui.min.js"></script>
 ```
 
+#### Init
+
+```js
+const targetElement = document.getElementById('destination-elem-id');
+const configuration = { drawFileList: true, matching: 'lines' };
+
+const diff2htmlUi = new Diff2HtmlUI(targetElement, diffString, configuration);
+// or
+const diff2htmlUi = new Diff2HtmlUI(targetElement, diffJson, configuration);
+```
+
+#### Draw
+
+```js
+diff2htmlUi.draw();
+```
+
+#### Syntax Highlight
+
+**NOTE:** The highlight.js css should come before the diff2html css
+
+```html
+<!-- Stylesheet -->
+<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.13.1/styles/github.min.css" />
+<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/diff2html/bundles/css/diff2html.min.css" />
+
+<!-- Javascripts -->
+<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/diff2html/bundles/js/diff2html-ui.min.js"></script>
+```
+
+> Pass the option `highlight` with value true or invoke `diff2htmlUi.highlightCode()` after `diff2htmlUi.draw()`.
+
+```js
+document.addEventListener('DOMContentLoaded', () => {
+  const diffString = `diff --git a/sample.js b/sample.js
+  index 0000001..0ddf2ba
+  --- a/sample.js
+  +++ b/sample.js
+  @@ -1 +1 @@
+  -console.log("Hello World!")
+  +console.log("Hello from Diff2Html!")`;
+  const targetElement = document.getElementById('myDiffElement');
+  const configuration = { inputFormat: 'json', drawFileList: true, matching: 'lines', highlight: true };
+  const diff2htmlUi = new Diff2HtmlUI(targetElement, diffString, configuration);
+  diff2htmlUi.draw();
+  diff2htmlUi.highlightCode();
+});
+```
+
+#### Collapsable File Summary List
+
+> Add the dependencies.
+
+```html
+<!-- Javascripts -->
+<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/diff2html/bundles/js/diff2html-ui.min.js"></script>
+```
+
+> Invoke the Diff2HtmlUI helper Pass the option `fileListToggle` with value true or invoke
+> `diff2htmlUi.fileListToggle()` after `diff2htmlUi.draw()`.
+
+```js
+document.addEventListener('DOMContentLoaded', () => {
+  const targetElement = document.getElementById('myDiffElement');
+  var diff2htmlUi = new Diff2HtmlUI(targetElement, lineDiffExample, { drawFileList: true, matching: 'lines' });
+  diff2htmlUi.draw();
+  diff2htmlUi.fileListToggle(false);
+});
+```
+
+### Diff2HtmlUI Examples
+
+#### Example with plain HTML+CSS+JS
+
+```html
+<!DOCTYPE html>
+<html lang="en-us">
+  <head>
+    <meta charset="utf-8" />
+    <!-- Make sure to load the highlight.js CSS file before the Diff2Html CSS file -->
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/10.7.1/styles/github.min.css" />
+    <link
+      rel="stylesheet"
+      type="text/css"
+      href="https://cdn.jsdelivr.net/npm/diff2html/bundles/css/diff2html.min.css"
+    />
+    <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/diff2html/bundles/js/diff2html-ui.min.js"></script>
+  </head>
+  <script>
+    const diffString = `diff --git a/sample.js b/sample.js
+      index 0000001..0ddf2ba
+      --- a/sample.js
+      +++ b/sample.js
+      @@ -1 +1 @@
+      -console.log("Hello World!")
+      +console.log("Hello from Diff2Html!")`;
+
+    document.addEventListener('DOMContentLoaded', function () {
+      var targetElement = document.getElementById('myDiffElement');
+      var configuration = {
+        inputFormat: 'json',
+        drawFileList: true,
+        fileListToggle: false,
+        fileListStartVisible: false,
+        fileContentToggle: false,
+        matching: 'lines',
+        outputFormat: 'side-by-side',
+        synchronisedScroll: true,
+        highlight: true,
+        renderNothingWhenEmpty: false,
+      };
+      var diff2htmlUi = new Diff2HtmlUI(targetElement, diffString, configuration);
+      diff2htmlUi.draw();
+      diff2htmlUi.highlightCode();
+    });
+  </script>
+  <body>
+    <div id="myDiffElement"></div>
+  </body>
+</html>
+```
+
+## Diff2Html Usage
+
 ### Diff2Html API
@@ -179,4 +346,6 @@
 
-Import the stylesheet and the library code
+Import the stylesheet and the library code.
 
+To load correctly in the Browser you need to include the stylesheet in the final HTML.
+
 ```html
@@ -194,3 +363,3 @@ <!-- CSS -->
 document.addEventListener('DOMContentLoaded', () => {
-  var diffHtml = global.Diff2Html.html('<Unified Diff String>', {
+  var diffHtml = Diff2Html.html('<Unified Diff String>', {
     drawFileList: true,
@@ -210,3 +379,3 @@ matching: 'lines',
 const diffHtml = Diff2html.html(diffJson, { drawFileList: true });
-document.getElementById('destination-elem-id').innerHTML = diffHtml;
+console.log(diffHtml);
 ```
@@ -216,3 +385,3 @@
 
-#### Diff2Html Angular Example
+#### Example with Angular
 
@@ -264,3 +433,3 @@ - Typescript
 
-#### Diff2Html Vue.js Example
+#### Example with Vue.js
 
@@ -296,124 +465,2 @@ ```vue
 
-## Diff2HtmlUI Usage
-
-> Simple wrapper to ease simple tasks in the browser such as: code highlight and js effects
-
-- Invoke Diff2html
-- Inject output in DOM element
-- Enable collapsible file summary list
-- Enable syntax highlight of the code in the diffs
-
-### Diff2HtmlUI API
-
-> Create a Diff2HtmlUI instance
-
-```ts
-constructor(target: HTMLElement, diffInput?: string | DiffFile[]) // diff2html-ui, diff2html-ui-slim
-constructor(target: HTMLElement, diffInput?: string | DiffFile[], config: Diff2HtmlUIConfig = {}, hljs?: HighlightJS) // diff2html-ui-base
-```
-
-> Generate and inject in the document the Pretty HTML representation of the diff
-
-```ts
-draw(): void
-```
-
-> Enable extra features
-
-```ts
-synchronisedScroll(): void
-fileListToggle(startVisible: boolean): void
-highlightCode(): void
-```
-
-### Diff2HtmlUI Configuration
-
-- `synchronisedScroll`: scroll both panes in side-by-side mode: `true` or `false`, default is `true`
-- `highlight`: syntax highlight the code on the diff: `true` or `false`, default is `true`
-- `fileListToggle`: allow the file summary list to be toggled: `true` or `false`, default is `true`
-- `fileListStartVisible`: choose if the file summary list starts visible: `true` or `false`, default is `false`
-- `fileContentToggle`: allow each file contents to be toggled: `true` or `false`, default is `true`
-
-> NOTE: All the options from Diff2Html are also valid configurations in Diff2HtmlUI
-
-### Diff2HtmlUI Browser
-
-#### Mandatory HTML resource imports
-
-```html
-<!-- CSS -->
-<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/diff2html/bundles/css/diff2html.min.css" />
-
-<!-- Javascripts -->
-<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/diff2html/bundles/js/diff2html-ui.min.js"></script>
-```
-
-#### Init
-
-```js
-const targetElement = document.getElementById('destination-elem-id');
-const configuration = { drawFileList: true, matching: 'lines' };
-
-const diff2htmlUi = new Diff2HtmlUI(targetElement, diffString, configuration);
-// or
-const diff2htmlUi = new Diff2HtmlUI(targetElement, diffJson, configuration);
-```
-
-#### Draw
-
-```js
-diff2htmlUi.draw();
-```
-
-#### Syntax Highlight
-
-```html
-<!-- Stylesheet -->
-<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.13.1/styles/github.min.css" />
-<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/diff2html/bundles/css/diff2html.min.css" />
-
-<!-- Javascripts -->
-<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/diff2html/bundles/js/diff2html-ui.min.js"></script>
-```
-
-> Pass the option `highlight` with value true or invoke `diff2htmlUi.highlightCode()` after `diff2htmlUi.draw()`.
-
-```js
-document.addEventListener('DOMContentLoaded', () => {
-  const diffString = `diff --git a/sample.js b/sample.js
-index 0000001..0ddf2ba
---- a/sample.js
-+++ b/sample.js
-@@ -1 +1 @@
--console.log("Hello World!")
-+console.log("Hello from Diff2Html!")`;
-  const targetElement = document.getElementById('myDiffElement');
-  const configuration = { inputFormat: 'json', drawFileList: true, matching: 'lines', highlight: true };
-  const diff2htmlUi = new Diff2HtmlUI(targetElement, diffString, configuration);
-  diff2htmlUi.draw();
-  diff2htmlUi.highlightCode();
-});
-```
-
-#### Collapsable File Summary List
-
-> Add the dependencies.
-
-```html
-<!-- Javascripts -->
-<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/diff2html/bundles/js/diff2html-ui.min.js"></script>
-```
-
-> Invoke the Diff2HtmlUI helper Pass the option `fileListToggle` with value true or invoke
-> `diff2htmlUi.fileListToggle()` after `diff2htmlUi.draw()`.
-
-```js
-document.addEventListener('DOMContentLoaded', () => {
-  const targetElement = document.getElementById('myDiffElement');
-  var diff2htmlUi = new Diff2HtmlUI(targetElement, lineDiffExample, { drawFileList: true, matching: 'lines' });
-  diff2htmlUi.draw();
-  diff2htmlUi.fileListToggle(false);
-});
-```
-
 ## Troubleshooting
@@ -420,0 +467,0 @@

New alerts

No v1

Quality

Package is not semver >=1. This means it is not stable and does not support ^ ranges.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

1788834

increased by3.53%

Dev dependency count

54

decreased by-1.82%

Number of lines in readme file

536

increased by9.61%

Worsened metrics

Lines of code

4280

decreased by-49.51%

Number of low quality alerts

1

increased byInfinity%

Dependency changes

• + Addeddiff@5.0.0(transitive)

• + Addedhighlight.js@10.7.1(transitive)

• - Removeddiff@4.0.2(transitive)

• - Removedhighlight.js@10.4.1(transitive)

• Updateddiff@5.0.0