Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Cannot use lib locally, SyntaxError: Invalid regular expression: range out of order in character class #380

Closed
kintarowins opened this issue Apr 10, 2021 · 3 comments
Closed

Cannot use lib locally, SyntaxError: Invalid regular expression: range out of order in character class #380

kintarowins opened this issue Apr 10, 2021 · 3 comments

Comments

@kintarowins
Copy link

Step 0: Describe your environment

  • OS: MacOS Big Sur 11.2.3
  • diff2html version: current as of today
  • Using diff2html directly or using diff2html-ui helper: diff2html-ui
  • Extra flags: _

Step 1: Describe the problem:

When using the CDN link for diff2html-ui.min.js, it works, but when used locally, it fails with

SyntaxError: Invalid regular expression: range out of order in character class
  RegExp - diff2html-ui.min.js:1481

Steps to reproduce:

<!DOCTYPE html>
<html>
<head>
  <title>Report</title>
  <link rel="stylesheet" type="text/css" href="diff2html.min.css" />
  <script type="text/javascript" src="diff2html-ui.min.js"></script>
  <!-- this will work using full CDN url
    <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/diff2html/bundles/js/diff2html-ui.min.js"></script>
  /-->
</head>
<body>
<script>
  document.addEventListener('DOMContentLoaded', () => {
        let targetElement = document.getElementById("drawHere");
        let configuration = { outputFormat: 'side-by-side', drawFileList: true, matching: 'lines' };
        let diffString = JSON.parse(document.getElementById("the_diff").innerText);
        let diff2htmlUi = new Diff2HtmlUI(targetElement, diffString, configuration);
        diff2htmlUi.draw();
  })
</script>

<div id="drawHere"></div>
<div style="display:none" id="the_diff">"diff --git a/Dockerfile b/Dockerfile\nindex a68f578..42c99ec 100644\n--- a/Dockerfile\n+++ b/Dockerfile\n@@ -1,4 +1,4 @@\n-FROM docker.myorg.com/gala:3.4.6\n+FROM docker.myorg.com/gala:3.4.7\n \n COPY datatools/.out/libs/datatools*.jar /data/box/datatools/\n COPY datatools/.dist/lib/solr-configs*.jar /data/box/solr-configs/"</div>
</body>
</html>
  1. Save the file above as local.html
  2. Open it with Safari
  3. Inspect the console log for the error

Observed Results:

Encountered the error above and any further rendering does not work

Expected Results:

no error
@rtfpessoa
Copy link
Owner

Cannot replicate.
If I open the contents bellow with the css and js urls fixed it works.

<!DOCTYPE html>
<html>
<head>
  <title>Report</title>
  <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>
<body>
<script>
  document.addEventListener('DOMContentLoaded', () => {
        let targetElement = document.getElementById("drawHere");
        let configuration = { outputFormat: 'side-by-side', drawFileList: true, matching: 'lines' };
        let diffString = JSON.parse(document.getElementById("the_diff").innerText);
        let diff2htmlUi = new Diff2HtmlUI(targetElement, diffString, configuration);
        diff2htmlUi.draw();
  })
</script>

<div id="drawHere"></div>
<div style="display:none" id="the_diff">"diff --git a/Dockerfile b/Dockerfile\nindex a68f578..42c99ec 100644\n--- a/Dockerfile\n+++ b/Dockerfile\n@@ -1,4 +1,4 @@\n-FROM docker.myorg.com/gala:3.4.6\n+FROM docker.myorg.com/gala:3.4.7\n \n COPY datatools/.out/libs/datatools*.jar /data/box/datatools/\n COPY datatools/.dist/lib/solr-configs*.jar /data/box/solr-configs/"</div>
</body>
</html>

@rtfpessoa rtfpessoa reopened this Apr 19, 2021
@rtfpessoa
Copy link
Owner

rtfpessoa commented Apr 19, 2021 •
edited

Ahh, I see what you meant and I just replicated it. But I have no idea why.

@rtfpessoa
Copy link
Owner

rtfpessoa commented Apr 25, 2021 •
edited

@kintarowins, after some investigation, it was a charset issue.
You need to explicitly say the script is in UTF-8.
This one works fine

<!DOCTYPE html>
<html>
<head>
  <title>Report</title>
  <link rel="stylesheet" type="text/css" charset="utf-8" href="./diff2html.min.css" />
  <script type="text/javascript" charset="utf-8" src="./diff2html-ui.min.js"></script>
</head>
<body>
<script>
  document.addEventListener('DOMContentLoaded', () => {
        let targetElement = document.getElementById("drawHere");
        let configuration = { outputFormat: 'side-by-side', drawFileList: true, matching: 'lines' };
        let diffString = JSON.parse(document.getElementById("the_diff").innerText);
        let diff2htmlUi = new Diff2HtmlUI(targetElement, diffString, configuration);
        diff2htmlUi.draw();
  })
</script>

<div id="drawHere"></div>
<div style="display:none" id="the_diff">"diff --git a/Dockerfile b/Dockerfile\nindex a68f578..42c99ec 100644\n--- a/Dockerfile\n+++ b/Dockerfile\n@@ -1,4 +1,4 @@\n-FROM docker.myorg.com/gala:3.4.6\n+FROM docker.myorg.com/gala:3.4.7\n \n COPY datatools/.out/libs/datatools*.jar /data/box/datatools/\n COPY datatools/.dist/lib/solr-configs*.jar /data/box/solr-configs/"</div>
</body>
</html>

@rtfpessoa rtfpessoa mentioned this issue Apr 25, 2021
Open
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
2 participants
@rtfpessoa @kintarowins