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

jsxLoader: Less than operator assumed to be an open element #20

Closed
nifgraup opened this issue Oct 23, 2021 · 3 comments
Closed

jsxLoader: Less than operator assumed to be an open element #20

nifgraup opened this issue Oct 23, 2021 · 3 comments

Comments

@nifgraup
Copy link 

<html>
  <head>
    <script src="https://cdn.jsdelivr.net/npm/dataformsjs@5.10.4/js/react/jsxLoader.min.js"></script>
  </head>
<body>
    <script type="text/babel" data-type="module">
      const n = 2;
      1<n;
    </script>
  </body>
</html>

jsxLoader.min.js:5 Error: The number of opening elements (for example: "<div>") does not match the number closing elements ("</div>").
    at Object.parser (jsxLoader.min.js:5)
    at Object.compile (jsxLoader.min.js:5)
    at r (jsxLoader.min.js:5)
    at jsxLoader.min.js:5
    at new Promise (<anonymous>)
    at Object.loadScript (jsxLoader.min.js:5)
    at Object.setup (jsxLoader.min.js:5)
    at HTMLDocument.<anonymous> (jsxLoader.min.js:5)
r @ jsxLoader.min.js:5
(anonymous) @ jsxLoader.min.js:5
loadScript @ jsxLoader.min.js:5
setup @ jsxLoader.min.js:5
(anonymous) @ jsxLoader.min.js:5

Perhaps it's best to skip this test altogether?
@ConradSollitt
Copy link
Contributor

Hi Björgvin,

Thanks for trying out the JSX Loader and opening this issue with a simple example.

I will later look into improving how expressions are handled. Most likely I will work on this next week but it may take longer to fix.

// Adding a space before the variable would allow code to be compiled correctly
1 < n;
// Additionally if a character other than a letter
// is after [<] then code compiles correctly as well.
n<1;

The specific error message is to help with conditions like there where there are multiple opening elements but zero or fewer closing elements.

  // Error Example
  function App() {
    return <div>Hello World<div>
  }
  // Valid because of closing </div>
  function App() {
    return <div>Hello World</div>
  }

The actual issue is caused by the compiler checking for a letter after a < character and if found it assumes the start of an element is found. To fix this I'll have to add more logic to determine if position in code may be part of an expression. Here is an example from the compiler where it is checking the character and next character.

https://github.com/dataformsjs/dataformsjs/blob/master/js/react/jsxLoader.js#L787

  case '<':
    if (/[a-zA-Z>]/.test(input[c + 1])) {
      return c; // Start of Element found
    }

@nifgraup
Copy link
Author

You're welcome, it looks like JSX Loader has a lot of potential. I guess an approach would be to consider any < as potential start of element, enter tokenizeElement and then backtrack or invalidate the token when mismatch happens (instead of throwing an error).

@ConradSollitt
Copy link
Contributor

Fixed with the latest release 5.10.6.

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
@nifgraup @ConradSollitt