Add JSX Runtime and React Native support & QOL features

[vftable]

ready to merge. tested on swc, babel and react native

[vftable]

add few minor bugfixes

[MeguminSama]

Sorry for taking so long to test this. This is looking really good - just two files are having issues currently.

fbe36283158e1bc2c8b3.js
error: SyntaxError: Unexpected token (17682:20)
  17680 |
  17681 |             return (
> 17682 |                 <Mh()
        |                    ^
  17683 |                     {...function(e) {
  17684 |                         for (var t = 1; t < arguments.length; t++) {
  17685 |                             var n = null != arguments[t] ? arguments[t] : {}, r = Object.keys(n);

^ I believe the above is the code that can be found by searching "dark":"light" (unbeautified) or "dark" : "light" (beautified) in fbe36283158e1bc2c8b3.js

f4dcf7ce77fdbe29e095.js
error: TypeError: Cannot read properties of undefined (reading 'endsWith')

[MeguminSama]

For the 2nd error:

With an input of var t=(Ae++).toString() We get an AST of

{
  "type": "VariableDeclaration",
  "start": 1690847,
  "end": 1690871,
  "declarations": [
    {
      "type": "VariableDeclarator",
      "start": 1690851,
      "end": 1690870,
      "id": {
        "type": "Identifier",
        "start": 1690851,
        "end": 1690852,
        "name": "t"
      },
      "init": {
        "type": "CallExpression",
        "start": 1690853,
        "end": 1690870,
        "callee": {
          "type": "MemberExpression",
          "start": 1690853,
          "end": 1690868,
          "object": {
            "type": "UpdateExpression",
            "start": 1690854,
            "end": 1690858,
            "operator": "++",
            "prefix": false,
            "argument": {
              "type": "Identifier",
              "start": 1690854,
              "end": 1690856,
              "name": "Ae"
            }
          },
          "property": {
            "type": "Identifier",
            "start": 1690860,
            "end": 1690868,
            "name": "toString"
          },
          "computed": false,
          "optional": false
        },
        "arguments": [],
        "optional": false
      }
    }
  ],
  "kind": "var"
}

Which for some reason gets converted to var t = Ae++.toString() by recast.

If you enter var t = (Ae++).toString() into https://astexplorer.net/ it produces the exact same AST so I will put this down to an issue with recast.

Looking into fixes now

[MeguminSama]

Issue opened on recast repo https://github.com/benjamn/recast/issues/1362

[MeguminSama]

Finally, before completing the PR, could you please

pnpm i acorn@^8.10.0
pnpm i recast@^0.23.4

[vftable]

all seems to be okay now, i've updated dependencies and merged your suggestions.

[MeguminSama]

Noooooo

seems there's a few more problems 🥲

d4d4ba38d55fc3a7106f.js
error: SyntaxError: Unexpected token (1357:26)
  1355 |         var w = function(e) {
  1356 |                 var t = e.level, r = e.children, n = e.className, c = void 0 === n ? null : n, l = e.styleSheet, i = void 0 === l ? {} : l, u = (0, s.usePrivateHeadingLevel)(), f = parseInt(t, 10), p = u + (isNaN(f) ? 1 : f) - 1;
> 1357 |                 return <h".concat className={a().apply(void 0, m(v(i, c)))}>{r}</h".concat>;
       |                          ^
  1358 |             },
  1359 |             x = f.Z.defaultRules,
  1360 |             P = {

^ locatable with classname:a().apply (SOLVED)

b80347916eb89f676733.js
error: SyntaxError: Unexpected token (2422:29)
  2420 |             var l = function(t) {
  2421 |                 try {
> 2422 |                     return <<iframe name=\"" + t + "\"> />;
       |                             ^
  2423 |                 } catch (r) {
  2424 |                     var e = n.g.document.createElement("iframe");
  2425 |                     e.name = t;

^ locatable with var e=n.g.document.createElement("iframe") (SOLVED)

89c6b10bc7dcb8c1313d.js
error: SyntaxError: Unexpected token, expected "}" (777:61)
  775 |                                 onTouchMove={this.handleChange}
  776 |                                 onTouchStart={this.handleChange}>{<style>.hue-horizontal {
> 777 |                                                   background: linear-gradient(to right, #f00 0%, #ff0 17%, #0f0
      |                                                             ^
  778 |                                                     33%, #0ff 50%, #00f 67%, #f0f 83%, #f00 100%);
  779 |                                                   background: -webkit-linear-gradient(to right, #f00 0%, #ff0
  780 |                                                     17%, #0f0 33%, #0ff 50%, #00f 67%, #f0f 83%, #f00 100%);

^ locatable with linear-gradient(to right, #f00 0%, #ff0 17%, #0f0 (SOLVED)

[MeguminSama]

Thanks so much!