JSX parsing

[wichert]

i18next-scanner recently started using parse5 to process Trans element (see i18next/i18next-scanner#44). This is revealing something I had not taken into account: parse5 enforces some HTML behaviour that is not desirable for i18next-scanner. For example this input:

 <Trans i18nKey="custom.label">
  I agree with the
  <Link to="/terms-and-conditions">terms and conditions</Link>
</Trans>

The parsed DOM looks like this:

[
  {
    "nodeName": "#text",
    "value": "I agree to the "
  },
  {
    "nodeName": "link",
    "tagName": "link",
    "attrs": [],
    "namespaceURI": "http://www.w3.org/1999/xhtml",
    "childNodes": []
  },
  {
    "nodeName": "#text",
    "value": "terms."
  }
]

Since HTML requires <link> is a void element parse5 this certainly makes sense. It just happens to break our specific use case. Is there a way to tell parse5 to skip enforcing HTML rules?

[inikulin]

Hi, there is no way to make parse5 behave in any custom non-spec compliant mode and we don't have any plans to introduce one. However, feel free to fork it and implemented desired functionality in your custom fork.

[RReverser]

@wichert Since JSX is an extension of JS, you might want to use Acorn-JSX instead.

[wichert]

@RReverser I did look at it, but that unfortunately has other issues: many React application use a lot of new ES features such as object spread that break Acorn-JSX badly. A combination of acornjs/acorn-jsx#75, acornjs/acorn-jsx#32 and a bunch of plugins may work around, but the end result is still likely to be a bit fragile. And since for my use case I don't actually need to parse any JavaScript I would prefer to use a basic HTML(-like) parser and ignore all JS.