build: Ship components optimized with React Compiler (#992)

* Add React Compiler dependencies

* Add React Compiler to Babel config

* Target React 17 and above with the compiler runtime

* Build js with babel; use typescript for declarations only

* Add rollup bundle visualizer

* Specify babel runtime version to prevent babel helpers from being inlined

* Simplify react compiler logs

Author: frankieyan

.gitignore

@@ -11,3 +11,4 @@ docs/
 /styles/
 coverage/
 .vscode/
+stats.html

babel.config.js

@@ -11,5 +11,45 @@ module.exports = {
         '@babel/preset-react',
         '@babel/preset-typescript',
     ],
-    plugins: ['@babel/proposal-object-rest-spread'],
+    plugins: [
+        [
+            'babel-plugin-react-compiler',
+            {
+                // Support React 17 as a minimum
+                target: '17',
+                logger: {
+                    /**
+                     * @param {string | null} filename
+                     * @param {import('babel-plugin-react-compiler').LoggerEvent} event
+                     */
+                    logEvent(filename, event) {
+                        if (
+                            event.kind === 'CompileError' ||
+                            event.kind === 'CompileSkip' ||
+                            event.kind === 'PipelineError'
+                        ) {
+                            if (event.kind === 'CompileError') {
+                                console.warn(
+                                    `\n[React Compiler] \x1b[33m${event.kind}\x1b[0m: ${filename}`,
+                                )
+                            }
+
+                            if (event.detail?.reason) {
+                                console.error(`Reason: ${event.detail.reason}`)
+                            }
+                        }
+                    },
+                },
+            },
+        ],
+        '@babel/proposal-object-rest-spread',
+        [
+            '@babel/plugin-transform-runtime',
+            {
+                // Prevent helpers from being inlined in the output code
+                // https://babeljs.io/docs/babel-plugin-transform-runtime#version
+                version: '^7.28.4',
+            },
+        ],
+    ],
 }