Usage question: where should the plugin be put in the configuration?

[SukkaW]

In my forgetti-loader's README, I mention that forgetti-loader should be put in a way that forgetti is executed before JSX transformation. But I am wondering if it is correct or not.

[lxsmnsyc]

It honestly can be put in either way, but I would recommend it putting before the JSX transform happens.

[SukkaW]

It honestly can be put in either way, but I would recommend it putting before the JSX transform happens.

There is a babel plugin @babel/plugin-transform-react-constant-elements that performs caching jsx call:

// In
const Hr = () => {
  return <hr className="hr" />;
};

const WithChildren = (props) => {
  return <div className={props.className}>
    <hr />
  </div>;
}

// out
var _hr, _hr2;

const Hr = () => {
  return _hr || (_hr = <hr className="hr" />);
};

const WithChildren = (props) => {
  return <div className={props.className}>
    {_hr2 || (_hr2 = <hr />)}
  </div>;
}

I am wondering if by putting the forgetti after the JSX transform, is it possible to achieve the same result (caching _jsx calls).

[lxsmnsyc]

It can cache either JSX itself or the transforms, which is why it doesn't matter.

[SukkaW]

It can cache either JSX itself or the transforms, which is why it doesn't matter.

Thanks!

... but I would recommend it putting before the JSX transform happens.

So is there any reason for that?

[lxsmnsyc]

So is there any reason for that?

because some frameworks handles the JSX transform itself that it isn't really the same as the normal JSX. Million is a good example. Forgetti must know not to touch the JSX unless the preset says so. A post-transform JSX from Forgetti might also be illegal for the framework using it.