Babel: transpile class properties for wider browser support

[belgattitude]

According to caniuse.com, support of public class fields is around 92%, see https://caniuse.com/?search=class%20fields.

Enable transpilation of public class properties in babel.

See https://babel.dev/docs/en/babel-plugin-proposal-class-properties

Linked to #2748

Before

Class properties in the dist

After

Class properties are transpiled

Sizes

Seems a very small size increase: 76505 vs 76444 bytes (in the esm build)

ls -la ./dist

// with class properties in babel
-rw-rw-r-- 1 sebastien sebastien 78461 févr.  4 14:43 index-455b51ca.cjs.prod.js
-rw-rw-r-- 1 sebastien sebastien 78504 févr.  4 14:43 index-6442a2a3.cjs.dev.js
-rw-rw-r-- 1 sebastien sebastien 76505 févr.  4 14:43 index-7dbf758c.esm.js
-rw-rw-r-- 1 sebastien sebastien  9186 févr.  4 14:43 react-three-fiber.cjs.dev.js
-rw-rw-r-- 1 sebastien sebastien    42 févr.  4 14:43 react-three-fiber.cjs.d.ts
-rw-rw-r-- 1 sebastien sebastien   196 févr.  4 14:43 react-three-fiber.cjs.js
-rw-rw-r-- 1 sebastien sebastien  9187 févr.  4 14:43 react-three-fiber.cjs.prod.js
-rw-rw-r-- 1 sebastien sebastien  7708 févr.  4 14:43 react-three-fiber.esm.js



// Without class properties in babel
-rw-rw-r-- 1 sebastien sebastien 78400 févr.  4 14:52 index-661b9d11.cjs.prod.js
-rw-rw-r-- 1 sebastien sebastien 78443 févr.  4 14:52 index-bf8a2906.cjs.dev.js
-rw-rw-r-- 1 sebastien sebastien 76444 févr.  4 14:52 index-fb77d67d.esm.js
-rw-rw-r-- 1 sebastien sebastien  9186 févr.  4 14:52 react-three-fiber.cjs.dev.js
-rw-rw-r-- 1 sebastien sebastien    42 févr.  4 14:52 react-three-fiber.cjs.d.ts
-rw-rw-r-- 1 sebastien sebastien   196 févr.  4 14:52 react-three-fiber.cjs.js
-rw-rw-r-- 1 sebastien sebastien  9187 févr.  4 14:52 react-three-fiber.cjs.prod.js
-rw-rw-r-- 1 sebastien sebastien  7708 févr.  4 14:52 react-three-fiber.esm.js
sebastien@sebastien-ThinkPad-P1-Gen-3:~/github/react-three-fiber/packages/fiber/dist$ 

[codesandbox-ci]

This pull request is automatically built and testable in CodeSandbox.

To see build info of the built libraries, click here or the icon next to each commit SHA.

Latest deployment of this branch, based on commit b664423:

Sandbox	Source
example	Configuration

[belgattitude]

See also #2748 (comment)

[CodyJasonBennett]

Everything looks good here. This is all I'm seeing changing in the build (without the code change from #2748). The static transform looks a little weird, but it doesn't look to break tree-shaking.

class ErrorBoundary extends React.Component {
  constructor(...props) {
    super(...props)
    this.state = {
      error: false,
    }
  }
  componentDidCatch(err) {
    this.props.set(err)
  }
  render() {
    return this.state.error ? null : this.props.children
  }
- static getDerivedStateFromError = () => ({
-   error: true
- });
}
+ErrorBoundary.getDerivedStateFromError = () => ({
+  error: true,
+})

Thanks, I'll keep an eye out on bettering transpilation here. We target es2018 rather than use a browserslist in repos that use Vite/Rollup.

[belgattitude]

The static transform looks a little weird.

Yep, old times :)

But it doesn't look to break tree-shaking.

Good to know.