Preact: Babel-react-optimize support [feature-request]

[matuscongrady]

Hello,

Before migrating to Preact, I've been using this babel-preset to optimize some React code.
https://github.com/thejameskyle/babel-react-optimize

It includes 3 problematic parts:

1. https://github.com/babel/babel/tree/master/packages/babel-plugin-transform-react-constant-elements

2. https://github.com/babel/babel/tree/master/packages/babel-plugin-transform-react-inline-elements
   I believe these two doesn't work because of their React.createElement() usage under the hood, which is not compatibile with Preact's h()

3. https://github.com/thejameskyle/babel-react-optimize/tree/master/packages/babel-plugin-transform-react-pure-class-to-function
   The problem is, it doesn't support Preact's render function's paramteres (props, state, context).

Even tho those 3 plugins aren't dealbreakers, they help a lot (both in terms of bundle size and runtime performance).

I think there are 3 possible solutions to this problem:

1. Ask babel's maintainers for preact support.
2. Fork those babel plugins.
3. Implement the same functionality in a whole new plugin. Something like babel-plugin-optimize-preact (possibly with other static optimizations).

What do you think about it?

[xtuc]

Babel maintainer here.

It might be simpler to create a new dedicated plugin for Preact with specific optimizations.

@developit what optimizations are possible in Preact and not in React?

[developit]

Agreed, a preact-specific preset would be best. As for the optimizations:

• The first optimization works fine for Preact and I recommend using it.
• The second will never work with Preact because it manually produces incompatible VNodes. Preact's h() function is very likely faster than Babel's semi-inlined version anyway, so I'd recommend just dropping that plugin from your config.
• The third plugin has no effect in Preact - classes and functional components are rendered identically and there is no performance difference between the two, so transforming from one to the other doesn't accomplish anything.

[marvinhagemeister]

The same is true for Preact X. Only the first plugin will actually improve performance. Just use it directly👍