feat(cli): react compiler lint only setting (#10761)

This PR adds to the TOML configuration for the experimental react
compiler. It adds a `lintOnly` option which when set to true will enable
linting rules but not include the compiler during code compilation.

.changesets/10761.md

@@ -0,0 +1,3 @@
+- feat(cli): react compiler lint only setting (#10761) by @Josh-Walker-GM
+
+You can now add `lintOnly = true` within your `[experimental.reactCompiler]` TOML settings to enable the react compiler linting rules without the compiler itself enabled during code compilation. See [here](https://community.redwoodjs.com/t/react-compiler-setup-experimental/7128) for more details.

packages/babel-config/src/web.ts

@@ -31,8 +31,12 @@ export const getWebSideBabelPlugins = (
   // Need the project config to know if trusted graphql documents is being used and decide to use
   // the gql tag import or the trusted document gql function generated by code gen client preset
   const config = getConfig()
-  const reactCompilerEnabled =
-    config.experimental?.reactCompiler?.enabled ?? false
+
+  // The compiler config has both an enabled and lintOnly setting so we have to ensure
+  // the user wants to do more than simply lint before enabling the plugin
+  const useReactCompiler =
+    config.experimental?.reactCompiler?.enabled &&
+    config.experimental?.reactCompiler?.lintOnly === false
 
   const useTrustedDocumentsGqlTag = config.graphql.trustedDocuments
 
@@ -44,7 +48,7 @@ export const getWebSideBabelPlugins = (
   const commonPlugins = forVite ? [] : getCommonPlugins()
   const plugins = [
     // It is important that this plugin run first, as noted here: https://react.dev/learn/react-compiler
-    reactCompilerEnabled && [
+    useReactCompiler && [
       'babel-plugin-react-compiler',
       {
         // No specific config at this time...

packages/cli/src/commands/experimental/setupReactCompilerHandler.js

@@ -56,7 +56,7 @@ export const handler = async ({ force, verbose }) => {
             writeFile(
               redwoodTomlPath,
               configContent.concat(
-                '\n[experimental.reactCompiler]\n  enabled = true\n',
+                '\n[experimental.reactCompiler]\n  enabled = true\n  lintOnly = false\n',
               ),
               {
                 overwriteExisting: true, // redwood.toml always exists

packages/project-config/src/__tests__/config.test.ts

@@ -64,6 +64,7 @@ describe('getConfig', () => {
           },
           "reactCompiler": {
             "enabled": false,
+            "lintOnly": false,
           },
           "realtime": {
             "enabled": false,

packages/project-config/src/config.ts

@@ -120,6 +120,7 @@ export interface Config {
     }
     reactCompiler: {
       enabled: boolean
+      lintOnly: boolean
     }
   }
 }
@@ -207,6 +208,7 @@ const DEFAULT_CONFIG: Config = {
     },
     reactCompiler: {
       enabled: false,
+      lintOnly: false,
     },
   },
 }