feat(plugin-react): adding jsxPure option

[jpapini]

Description

Passing the pure option to @babel/plugin-transform-react-jsx in order to force pure annotation for custom JSX factory (like @emotion/react).

By default, Babel disable pure annotations if the jsx importSource is not react but we have the opportunity to force pure annotations by adding the pure option to the babel plugin like explained here:
babel/babel#11126 (comment)
This is useful in library mode and it improve treeshaking.

For example:

export default defineConfig({
    plugins: [
        react({
            jsxImportSource: "@emotion/react"
        }),
    ],
});

produce the following output:

import { jsx, jsxs, Fragment } from "@emotion/react/jsx-runtime";

const Component1 = ({
  prop1,
  prop2
}) => {
  return jsxs(Fragment, {
    children: [jsx(Component2, {
      children: prop1
    }), jsx(Component3, {
      prop2
    })]
  });
};

But with:

export default defineConfig({
    plugins: [
        react({
            jsxImportSource: "@emotion/react",
            jsxPure: true,
        }),
    ],
});

it produce the following output:

import { jsx, jsxs, Fragment } from "@emotion/react/jsx-runtime";

const Component1 = ({
  prop1,
  prop2
}) => {
  return /* @__PURE__ */ jsxs(Fragment, {
    children: [/* @__PURE__ */ jsx(Component2, {
      children: prop1
    }), /* @__PURE__ */ jsx(Component3, {
        prop2
    })]
  });
};

Additional context

Pure annotation explanation

---

What is the purpose of this pull request?

• Bug fix
• New Feature
• Documentation update
• Other

Before submitting the PR, please make sure you do the following

• Read the Contributing Guidelines.
• Read the Pull Request Guidelines and follow the Commit Convention.
• Check that there isn't already a PR that solves the problem the same way to avoid creating a duplicate.
• Provide a description in this PR that addresses what the PR is solving, or reference the issue that it solves (e.g. fixes #123).
• Ideally, include relevant tests that fail without this PR but pass with it.

[aleclarson]

I wonder if jsxPure: true should be the default?

[aleclarson]

If anything, we could resolve the jsxImportSource, find its package.json, and look for sideEffects field to see if the module has side effects. Not a perfect heuristic, but probably good enough. (eg: @emotion/react has sideEffects: false in its package.json)

Though I think I'm leaning toward jsxPure: true default, since JSX calls are supposed to be pure anyway

[jpapini]

Thanks for your review! I added a commit for making jsxPure true by default.
About looking for the sideEffects field in package.json, I think it's not a good way to determine if a custom runtime is side effect free. For example, preact/jsx-runtime didn't have this field in the package.json file.
https://github.com/preactjs/preact/blob/master/jsx-runtime/package.json