Mark transpiled JSX elements as pure

[nicolo-ribaudo]

Q	A
Fixed Issues?	https://twitter.com/wSokra/status/1227163427879161857, closes #11105, fixes #11037
Patch: Bug Fix?
Major: Breaking Change?
Minor: New Feature?	Yes
Tests Added + Pass?	Yes
Documentation PR Link
Any Dependency Changes?
License	MIT

React.createElement (and often also for other JSX implementation, but it's not guaranteed) calls are pure: they are meant to produce an object which then is used by the React (or other lib) runtime to actually instantiate the component.

We can mark them as such to help minifiers strip unused JSX elements.
Adding it to every component might not seem ideal, but:

1. It can be easily gzipped, since it is exactly the same characters every time
2. It helps minifier remove "real" code, and if something can't be removed minifiers will remove the comment anyway.

If some props aren't pure, minifiers won't remove them even if there is the annotation:

import { Foo, Bar } from "components";

export default function Component() {
  <Foo className={getClass()} prop="xx" />;
  return <Bar className="xx"/>
}

// -> After Babel

import { Foo, Bar } from "components";

export default function Component() {
  /*#__PURE__*/ React.createElement(Foo, {
    className: getClass(),
    prop: "xx"
  });
  return /*#__PURE__*/ React.createElement(Bar, {
    className: "xx"
  });
}

// -> After Terser (and Prettier)

import { Foo, Bar } from "components";
export default function Component() {
  return getClass(), React.createElement(Bar, { className: "xx" });
}

This PR solves #11037 in a different way than #11105, because we mark JSX elements as pure no matter if they are hoisted or not.

The output from that issue would now be

/*#__PURE__*/ React.createElement("svg", null, /*#__PURE__*/ React.createElement("path", null))

Which can be tree-shaken.

[sokra]

Looks good to me. Here a few minor things:

[sokra]

Maybe babelHelpers.extends should get a pure annotation too?

[nicolo-ribaudo]

Maybe also other helpers are pure, I'll check 👍

[sokra]

The output code would be a little bit more readable and less verbose if the comment would not be in a separate line but in the same line:

var x =
/*#__PURE__*/
React.createElement(Composite, null,
/*#__PURE__*/
React.createElement(Composite2, null));

vs

var x = /*#__PURE__*/ React.createElement(Composite, null, /*#__PURE__*/ React.createElement(Composite2, null));

But this isn't important...

[nicolo-ribaudo]

I agree, I'll do it in a separate PR since it isn't strictly related to adding the annotation to JSX elements.

[devongovett]

I think it’s worth being careful about this. One could make a custom JSX pragma that is not pure and this would break that. Maybe only do it for the default React.createElement? Or have a whitelist (e.g. preact, etc.)?

[JLHwung]

Yeah, I agree on @devongovett , I think we should limit pure annotation when options.pragma === "React.createElement" and options.pragmaFrag === "React.Fragment".

We can offer limited whitelist and finally a pragmaIsPure: boolean option for custom pragmas.

[nicolo-ribaudo]

I don't think that we can have a whitelist, because the pragma isn't based on the imported module but on the variable name (for example, h for Preact).

@developit When this PR is merged, Preact can benefit from these changes if the pure: true option is added to https://preactjs.com/guide/v10/getting-started/#setting-up-jsx and https://preactjs.com/guide/v8/switching-to-preact/#via-babel.

@JLHwung I didn't add the check for pragmaFrag because fragments are transpiled as pragmaFn(PragmaFrag, { props }), so the function is still always the pragma.

[JLHwung]

cc @gaearon since you have commented at #11105 :)

[nicolo-ribaudo]

I was wondering if it would make sense to only add annotations to elements in the top level scope, since they are the ones preventing tree-shaking.

[JLHwung]

@nicolo-ribaudo Rollup can also shakes non top level functions, example is here.

[nicolo-ribaudo]

Yeah, I'm wondering how common it is to have unused elements inside functions.
env === "development" && <Foo /> would be removed even without the annotation.

[nicolo-ribaudo]

This is a breaking change from the "new JSX" PR, because that PR accepts runtime: false as an alias for runtime: "classic" while this one doesn't.

@lunaruan Do you think that this change is ok?

---

If this PR ends up being merged in a different release, I'll have to revert this line.

[lunaruan]

Yeah, this should be okay. No preference for whether runtime: false should alias to runtime: 'classic' as long as runtime: 'classic' is the default behavior

[nicolo-ribaudo]

I have finished adapting this PR after #11154 (I copied the same logic to the new transform)