facebook / metro

🚇 The JavaScript bundler for React Native
https://metrobundler.dev
MIT License
5.25k stars 626 forks source link

Add React JSX runtime to default exceptions for inline requires #1126

Closed gaearon closed 1 year ago

gaearon commented 1 year ago

Summary

JSX runtime calls are all over the place in every components. When using inline requires, it doesn't make sense to go through the method call + array access + property access just to call the JSX factory.

Test plan

Before (with inline requires on):

  Object.defineProperty(exports, '__esModule', {
    value: true,
  });
  var _reactNative = _$$_REQUIRE(_dependencyMap[0], "react-native"),
    View = _reactNative.View,
    Text = _reactNative.Text;
  function App() {
    return /*#__PURE__*/_$$_REQUIRE(_dependencyMap[1], "react/jsx-runtime").jsx(View, {
      style: {
        flex: 1,
        backgroundColor: 'green'
      },
      children: /*#__PURE__*/_$$_REQUIRE(_dependencyMap[1], "react/jsx-runtime").jsxs(Text, {
        style: {
          flex: 1
        },
        children: ["whatever ", _$$_IMPORT_ALL(_dependencyMap[2], "./test").A]
      })
    });
  }

After (with inline requires on):

  Object.defineProperty(exports, '__esModule', {
    value: true,
    lol: true
  });
  var _reactNative = _$$_REQUIRE(_dependencyMap[0], "react-native"),
    View = _reactNative.View,
    Text = _reactNative.Text;
  var _jsxs = _$$_REQUIRE(_dependencyMap[1], "react/jsx-runtime").jsxs;
  var _jsx = _$$_REQUIRE(_dependencyMap[1], "react/jsx-runtime").jsx;
  function App() {
    return /*#__PURE__*/_jsx(View, {
      style: {
        flex: 1,
        backgroundColor: 'green'
      },
      children: /*#__PURE__*/_jsxs(Text, {
        style: {
          flex: 1
        },
        children: ["whatever ", _$$_IMPORT_ALL(_dependencyMap[2], "./test").A]
      })
    });
  }

I added both react/jsx-runtime and react/jsx-dev-runtime even though currently RN only uses the former.

facebook-github-bot commented 1 year ago

@robhogan has imported this pull request. If you are a Meta employee, you can view this diff on Phabricator.

gaearon commented 1 year ago

We also ideally need to do this for @babel/runtime helpers. But there are a lot of those. Ideally it would be nice to be able to blocklist an entire package from inline requires. How do we feel about that?

gaearon commented 1 year ago

Chose a different approach for the other change: https://github.com/facebook/metro/pull/1127

facebook-github-bot commented 1 year ago

@robhogan merged this pull request in facebook/metro@c463b6446f2a7666e21bd540711fddffb1e80779.