[compiler][playground][tests] Standardize more pragmas (#33146)

(Almost) all pragmas are now one of the following:
- `@...TestOnly`: custom pragma for test fixtures
- `@<configName>` | `@<configName>:true`: enables with either true or a
default enabled value
- `@<configName>:<json value>`

compiler/apps/playground/__tests__/e2e/__snapshots__/page.spec.ts/compilationMode-all-output.txt

@@ -1,5 +1,5 @@
 import { c as _c } from "react/compiler-runtime"; // 
-        @compilationMode(all)
+        @compilationMode:"all"
 function nonReactFn() {
   const $ = _c(1);
   let t0;

compiler/apps/playground/__tests__/e2e/__snapshots__/page.spec.ts/compilationMode-infer-output.txt

@@ -1,4 +1,4 @@
-// @compilationMode(infer)
+// @compilationMode:"infer"
 function nonReactFn() {
   return {};
 }

compiler/apps/playground/__tests__/e2e/page.spec.ts

@@ -92,7 +92,7 @@ function useFoo(propVal: {+baz: number}) {
   },
   {
     name: 'compilationMode-infer',
-    input: `// @compilationMode(infer)
+    input: `// @compilationMode:"infer"
 function nonReactFn() {
   return {};
 }
@@ -101,7 +101,7 @@ function nonReactFn() {
   },
   {
     name: 'compilationMode-all',
-    input: `// @compilationMode(all)
+    input: `// @compilationMode:"all"
 function nonReactFn() {
   return {};
 }

compiler/packages/babel-plugin-react-compiler/src/Entrypoint/Options.ts

@@ -98,7 +98,7 @@ export type PluginOptions = {
    * provided rules will skip compilation. To disable this feature (never bailout of compilation
    * even if the default ESLint is suppressed), pass an empty array.
    */
-  eslintSuppressionRules?: Array<string> | null | undefined;
+  eslintSuppressionRules: Array<string> | null | undefined;
 
   flowSuppressions: boolean;
   /*
@@ -106,7 +106,7 @@ export type PluginOptions = {
    */
   ignoreUseNoForget: boolean;
 
-  sources?: Array<string> | ((filename: string) => boolean) | null;
+  sources: Array<string> | ((filename: string) => boolean) | null;
 
   /**
    * The compiler has customized support for react-native-reanimated, intended as a temporary workaround.

compiler/packages/babel-plugin-react-compiler/src/Utils/TestUtils.ts

@@ -10,7 +10,6 @@ import {CompilerError} from '../CompilerError';
 import {
   CompilationMode,
   defaultOptions,
-  PanicThresholdOptions,
   parsePluginOptions,
   PluginOptions,
 } from '../Entrypoint';
@@ -19,14 +18,24 @@ import {
   EnvironmentConfigSchema,
   PartialEnvironmentConfig,
 } from '../HIR/Environment';
+import {Err, Ok, Result} from './Result';
+import {hasOwnProperty} from './utils';
+
+function tryParseTestPragmaValue(val: string): Result<unknown, unknown> {
+  try {
+    let parsedVal: unknown;
+    const stringMatch = /^"([^"]*)"$/.exec(val);
+    if (stringMatch && stringMatch.length > 1) {
+      parsedVal = stringMatch[1];
+    } else {
+      parsedVal = JSON.parse(val);
+    }
+    return Ok(parsedVal);
+  } catch (e) {
+    return Err(e);
+  }
+}
 
-/**
- * For test fixtures and playground only.
- *
- * Pragmas are straightforward to parse for boolean options (`:true` and
- * `:false`). These are 'enabled' config values for non-boolean configs (i.e.
- * what is used when parsing `:true`).
- */
 const testComplexConfigDefaults: PartialEnvironmentConfig = {
   validateNoCapitalizedCalls: [],
   enableChangeDetectionForDebugging: {
@@ -84,34 +93,37 @@ const testComplexConfigDefaults: PartialEnvironmentConfig = {
     },
   ],
 };
-
 /**
  * For snap test fixtures and playground only.
  */
 function parseConfigPragmaEnvironmentForTest(
   pragma: string,
 ): EnvironmentConfig {
-  const maybeConfig: any = {};
+  const maybeConfig: Partial<Record<keyof EnvironmentConfig, unknown>> = {};
-  // Get the defaults to programmatically check for boolean properties
-  const defaultConfig = EnvironmentConfigSchema.parse({});
 
   for (const token of pragma.split(' ')) {
     if (!token.startsWith('@')) {
       continue;
     }
     const keyVal = token.slice(1);
-    let [key, val = undefined] = keyVal.split(':');
+    const valIdx = keyVal.indexOf(':');
+    const key = valIdx === -1 ? keyVal : keyVal.slice(0, valIdx);
+    const val = valIdx === -1 ? undefined : keyVal.slice(valIdx + 1);
     const isSet = val === undefined || val === 'true';
-
+    if (!hasOwnProperty(EnvironmentConfigSchema.shape, key)) {
-    if (isSet && key in testComplexConfigDefaults) {
-      maybeConfig[key] =
-        testComplexConfigDefaults[key as keyof PartialEnvironmentConfig];
       continue;
     }
 
-    if (key === 'customMacros' && val) {
+    if (isSet && key in testComplexConfigDefaults) {
-      const valSplit = val.split('.');
+      maybeConfig[key] = testComplexConfigDefaults[key];
-      if (valSplit.length > 0) {
+    } else if (isSet) {
+      maybeConfig[key] = true;
+    } else if (val === 'false') {
+      maybeConfig[key] = false;
+    } else if (val) {
+      const parsedVal = tryParseTestPragmaValue(val).unwrap();
+      if (key === 'customMacros' && typeof parsedVal === 'string') {
+        const valSplit = parsedVal.split('.');
         const props = [];
         for (const elt of valSplit.slice(1)) {
           if (elt === '*') {
@@ -121,21 +133,9 @@ function parseConfigPragmaEnvironmentForTest(
           }
         }
         maybeConfig[key] = [[valSplit[0], props]];
+        continue;
       }
-      continue;
+      maybeConfig[key] = parsedVal;
-    }
-
-    if (
-      key !== 'enableResetCacheOnSourceFileChanges' &&
-      typeof defaultConfig[key as keyof EnvironmentConfig] !== 'boolean'
-    ) {
-      // skip parsing non-boolean properties
-      continue;
-    }
-    if (val === undefined || val === 'true') {
-      maybeConfig[key] = true;
-    } else {
-      maybeConfig[key] = false;
     }
   }
   const config = EnvironmentConfigSchema.safeParse(maybeConfig);
@@ -156,6 +156,13 @@ function parseConfigPragmaEnvironmentForTest(
     suggestions: null,
   });
 }
+
+const testComplexPluginOptionDefaults: Partial<PluginOptions> = {
+  gating: {
+    source: 'ReactForgetFeatureFlag',
+    importSpecifierName: 'isForgetEnabled_Fixtures',
+  },
+};
 export function parseConfigPragmaForTests(
   pragma: string,
   defaults: {
@@ -163,44 +170,41 @@ export function parseConfigPragmaForTests(
   },
 ): PluginOptions {
   const environment = parseConfigPragmaEnvironmentForTest(pragma);
-  let compilationMode: CompilationMode = defaults.compilationMode;
+  const options: Record<keyof PluginOptions, unknown> = {
-  let panicThreshold: PanicThresholdOptions = 'all_errors';
+    ...defaultOptions,
-  let noEmit: boolean = defaultOptions.noEmit;
+    panicThreshold: 'all_errors',
+    compilationMode: defaults.compilationMode,
+    environment,
+  };
   for (const token of pragma.split(' ')) {
     if (!token.startsWith('@')) {
       continue;
     }
-    switch (token) {
+    const keyVal = token.slice(1);
-      case '@compilationMode(annotation)': {
+    const idx = keyVal.indexOf(':');
-        compilationMode = 'annotation';
+    const key = idx === -1 ? keyVal : keyVal.slice(0, idx);
-        break;
+    const val = idx === -1 ? undefined : keyVal.slice(idx + 1);
-      }
+    if (!hasOwnProperty(defaultOptions, key)) {
-      case '@compilationMode(infer)': {
+      continue;
-        compilationMode = 'infer';
+    }
-        break;
+    const isSet = val === undefined || val === 'true';
-      }
+    if (isSet && key in testComplexPluginOptionDefaults) {
-      case '@compilationMode(all)': {
+      options[key] = testComplexPluginOptionDefaults[key];
-        compilationMode = 'all';
+    } else if (isSet) {
-        break;
+      options[key] = true;
-      }
+    } else if (val === 'false') {
-      case '@compilationMode(syntax)': {
+      options[key] = false;
-        compilationMode = 'syntax';
+    } else if (val != null) {
-        break;
+      const parsedVal = tryParseTestPragmaValue(val).unwrap();
-      }
+      if (key === 'target' && parsedVal === 'donotuse_meta_internal') {
-      case '@panicThreshold(none)': {
+        options[key] = {
-        panicThreshold = 'none';
+          kind: parsedVal,
-        break;
+          runtimeModule: 'react',
-      }
+        };
-      case '@noEmit': {
+      } else {
-        noEmit = true;
+        options[key] = parsedVal;
-        break;
       }
     }
   }
-  return parsePluginOptions({
+  return parsePluginOptions(options);
-    environment,
-    compilationMode,
-    panicThreshold,
-    noEmit,
-  });
 }

compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/arrow-function-with-implicit-return.expect.md

@@ -2,7 +2,7 @@
 ## Input
 
 ```javascript
-// @compilationMode(infer)
+// @compilationMode:"infer"
 const Test = () => <div />;
 
 export const FIXTURE_ENTRYPOINT = {
@@ -15,7 +15,7 @@ export const FIXTURE_ENTRYPOINT = {
 ## Code
 
 ```javascript
-import { c as _c } from "react/compiler-runtime"; // @compilationMode(infer)
+import { c as _c } from "react/compiler-runtime"; // @compilationMode:"infer"
 const Test = () => {
   const $ = _c(1);
   let t0;

compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/arrow-function-with-implicit-return.js

@@ -1,4 +1,4 @@
-// @compilationMode(infer)
+// @compilationMode:"infer"
 const Test = () => <div />;
 
 export const FIXTURE_ENTRYPOINT = {

compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/class-component-with-render-helper.expect.md

@@ -2,7 +2,7 @@
 ## Input
 
 ```javascript
-// @compilationMode(infer)
+// @compilationMode:"infer"
 class Component {
   _renderMessage = () => {
     const Message = () => {
@@ -22,7 +22,7 @@ class Component {
 ## Code
 
 ```javascript
-// @compilationMode(infer)
+// @compilationMode:"infer"
 class Component {
   _renderMessage = () => {
     const Message = () => {

compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/class-component-with-render-helper.js

@@ -1,4 +1,4 @@
-// @compilationMode(infer)
+// @compilationMode:"infer"
 class Component {
   _renderMessage = () => {
     const Message = () => {

compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/codegen-instrument-forget-test.expect.md

@@ -2,7 +2,7 @@
 ## Input
 
 ```javascript
-// @enableEmitInstrumentForget @compilationMode(annotation)
+// @enableEmitInstrumentForget @compilationMode:"annotation"
 
 function Bar(props) {
   'use forget';
@@ -24,7 +24,7 @@ function Foo(props) {
 
 ```javascript
 import { shouldInstrument, useRenderCounter } from "react-compiler-runtime";
-import { c as _c } from "react/compiler-runtime"; // @enableEmitInstrumentForget @compilationMode(annotation)
+import { c as _c } from "react/compiler-runtime"; // @enableEmitInstrumentForget @compilationMode:"annotation"
 
 function Bar(props) {
   "use forget";

compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/codegen-instrument-forget-test.js

@@ -1,4 +1,4 @@
-// @enableEmitInstrumentForget @compilationMode(annotation)
+// @enableEmitInstrumentForget @compilationMode:"annotation"
 
 function Bar(props) {
   'use forget';

compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/component-declaration-basic.flow.expect.md

@@ -2,7 +2,7 @@
 ## Input
 
 ```javascript
-// @flow @compilationMode(infer)
+// @flow @compilationMode:"infer"
 export default component Foo(bar: number) {
   return <Bar bar={bar} />;
 }

compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/component-declaration-basic.flow.js

@@ -1,4 +1,4 @@
-// @flow @compilationMode(infer)
+// @flow @compilationMode:"infer"
 export default component Foo(bar: number) {
   return <Bar bar={bar} />;
 }

compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/conflict-codegen-instrument-forget.expect.md

@@ -2,7 +2,7 @@
 ## Input
 
 ```javascript
-// @enableEmitInstrumentForget @compilationMode(annotation)
+// @enableEmitInstrumentForget @compilationMode:"annotation"
 
 import {identity} from 'shared-runtime';
 
@@ -35,7 +35,7 @@ import {
   shouldInstrument as _shouldInstrument3,
   useRenderCounter,
 } from "react-compiler-runtime";
-import { c as _c } from "react/compiler-runtime"; // @enableEmitInstrumentForget @compilationMode(annotation)
+import { c as _c } from "react/compiler-runtime"; // @enableEmitInstrumentForget @compilationMode:"annotation"
 
 import { identity } from "shared-runtime";
 

compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/conflict-codegen-instrument-forget.js

@@ -1,4 +1,4 @@
-// @enableEmitInstrumentForget @compilationMode(annotation)
+// @enableEmitInstrumentForget @compilationMode:"annotation"
 
 import {identity} from 'shared-runtime';
 

compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.bailout-on-suppression-of-custom-rule.expect.md

@@ -2,7 +2,7 @@
 ## Input
 
 ```javascript
-// @eslintSuppressionRules(my-app/react-rule)
+// @eslintSuppressionRules:["my-app","react-rule"]
 
 /* eslint-disable my-app/react-rule */
 function lowercasecomponent() {
@@ -19,7 +19,7 @@ function lowercasecomponent() {
 ## Error
 
 ```
-  1 | // @eslintSuppressionRules(my-app/react-rule)
+  1 | // @eslintSuppressionRules:["my-app","react-rule"]
   2 |
 > 3 | /* eslint-disable my-app/react-rule */
     | ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ InvalidReact: React Compiler has skipped optimizing this component because one or more React ESLint rules were disabled. React Compiler only works when your components follow all the rules of React, disabling them may result in unexpected or incorrect behavior. eslint-disable my-app/react-rule (3:3)

compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.bailout-on-suppression-of-custom-rule.js

@@ -1,4 +1,4 @@
-// @eslintSuppressionRules(my-app/react-rule)
+// @eslintSuppressionRules:["my-app","react-rule"]
 
 /* eslint-disable my-app/react-rule */
 function lowercasecomponent() {

compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.invalid-read-ref-prop-in-render-destructure.expect.md

@@ -2,7 +2,7 @@
 ## Input
 
 ```javascript
-// @validateRefAccessDuringRender @compilationMode(infer)
+// @validateRefAccessDuringRender @compilationMode:"infer"
 function Component({ref}) {
   const value = ref.current;
   return <div>{value}</div>;
@@ -14,7 +14,7 @@ function Component({ref}) {
 ## Error
 
 ```
-  1 | // @validateRefAccessDuringRender @compilationMode(infer)
+  1 | // @validateRefAccessDuringRender @compilationMode:"infer"
   2 | function Component({ref}) {
 > 3 |   const value = ref.current;
     |                 ^^^^^^^^^^^ InvalidReact: Ref values (the `current` property) may not be accessed during render. (https://react.dev/reference/react/useRef) (3:3)

compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.invalid-read-ref-prop-in-render-destructure.js

@@ -1,4 +1,4 @@
-// @validateRefAccessDuringRender @compilationMode(infer)
+// @validateRefAccessDuringRender @compilationMode:"infer"
 function Component({ref}) {
   const value = ref.current;
   return <div>{value}</div>;

compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.invalid-read-ref-prop-in-render-property-load.expect.md

@@ -2,7 +2,7 @@
 ## Input
 
 ```javascript
-// @validateRefAccessDuringRender @compilationMode(infer)
+// @validateRefAccessDuringRender @compilationMode:"infer"
 function Component(props) {
   const value = props.ref.current;
   return <div>{value}</div>;
@@ -14,7 +14,7 @@ function Component(props) {
 ## Error
 
 ```
-  1 | // @validateRefAccessDuringRender @compilationMode(infer)
+  1 | // @validateRefAccessDuringRender @compilationMode:"infer"
   2 | function Component(props) {
 > 3 |   const value = props.ref.current;
     |                 ^^^^^^^^^^^^^^^^^ InvalidReact: Ref values (the `current` property) may not be accessed during render. (https://react.dev/reference/react/useRef) (3:3)

compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.invalid-read-ref-prop-in-render-property-load.js

@@ -1,4 +1,4 @@
-// @validateRefAccessDuringRender @compilationMode(infer)
+// @validateRefAccessDuringRender @compilationMode:"infer"
 function Component(props) {
   const value = props.ref.current;
   return <div>{value}</div>;

compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.invalid-write-ref-prop-in-render.expect.md

@@ -2,7 +2,7 @@
 ## Input
 
 ```javascript
-// @validateRefAccessDuringRender @compilationMode(infer)
+// @validateRefAccessDuringRender @compilationMode:"infer"
 function Component(props) {
   const ref = props.ref;
   ref.current = true;

compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.invalid-write-ref-prop-in-render.js

@@ -1,4 +1,4 @@
-// @validateRefAccessDuringRender @compilationMode(infer)
+// @validateRefAccessDuringRender @compilationMode:"infer"
 function Component(props) {
   const ref = props.ref;
   ref.current = true;

compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.todo-hoisted-function-in-unreachable-code.expect.md

@@ -2,7 +2,7 @@
 ## Input
 
 ```javascript
-// @compilationMode(infer)
+// @compilationMode:"infer"
 function Component() {
   return <Foo />;
 

compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.todo-hoisted-function-in-unreachable-code.js

@@ -1,4 +1,4 @@
-// @compilationMode(infer)
+// @compilationMode:"infer"
 function Component() {
   return <Foo />;
 

compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.validate-blocklisted-imports.expect.md

@@ -2,7 +2,7 @@
 ## Input
 
 ```javascript
-// @validateBlocklistedImports(DangerousImport)
+// @validateBlocklistedImports:["DangerousImport"]
 import {foo} from 'DangerousImport';
 import {useIdentity} from 'shared-runtime';
 
@@ -17,7 +17,7 @@ function useHook() {
 ## Error
 
 ```
-  1 | // @validateBlocklistedImports(DangerousImport)
+  1 | // @validateBlocklistedImports:["DangerousImport"]
 > 2 | import {foo} from 'DangerousImport';
     | ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ Todo: Bailing out due to blocklisted import. Import from module DangerousImport (2:2)
   3 | import {useIdentity} from 'shared-runtime';

compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.validate-blocklisted-imports.ts

@@ -1,4 +1,4 @@
-// @validateBlocklistedImports(DangerousImport)
+// @validateBlocklistedImports:["DangerousImport"]
 import {foo} from 'DangerousImport';
 import {useIdentity} from 'shared-runtime';
 

compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/fast-refresh-dont-refresh-const-changes-prod.expect.md

@@ -2,7 +2,7 @@
 ## Input
 
 ```javascript
-// @compilationMode(infer)
+// @compilationMode:"infer"
 import {useEffect, useMemo, useState} from 'react';
 import {ValidateMemoization} from 'shared-runtime';
 
@@ -43,7 +43,7 @@ export const FIXTURE_ENTRYPOINT = {
 ## Code
 
 ```javascript
-import { c as _c } from "react/compiler-runtime"; // @compilationMode(infer)
+import { c as _c } from "react/compiler-runtime"; // @compilationMode:"infer"
 import { useEffect, useMemo, useState } from "react";
 import { ValidateMemoization } from "shared-runtime";
 

compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/fast-refresh-dont-refresh-const-changes-prod.js

@@ -1,4 +1,4 @@
-// @compilationMode(infer)
+// @compilationMode:"infer"
 import {useEffect, useMemo, useState} from 'react';
 import {ValidateMemoization} from 'shared-runtime';
 

compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/fast-refresh-refresh-on-const-changes-dev.expect.md

@@ -2,7 +2,7 @@
 ## Input
 
 ```javascript
-// @compilationMode(infer) @enableResetCacheOnSourceFileChanges
+// @compilationMode:"infer" @enableResetCacheOnSourceFileChanges
 import {useEffect, useMemo, useState} from 'react';
 import {ValidateMemoization} from 'shared-runtime';
 
@@ -46,7 +46,7 @@ export const FIXTURE_ENTRYPOINT = {
 ## Code
 
 ```javascript
-import { c as _c } from "react/compiler-runtime"; // @compilationMode(infer) @enableResetCacheOnSourceFileChanges
+import { c as _c } from "react/compiler-runtime"; // @compilationMode:"infer" @enableResetCacheOnSourceFileChanges
 import { useEffect, useMemo, useState } from "react";
 import { ValidateMemoization } from "shared-runtime";
 
@@ -63,12 +63,12 @@ function unsafeUpdateConst() {
 function Component() {
   const $ = _c(3);
   if (
-    $[0] !== "8d7015668f857996c3d895a7a90e3e16b8a791d5b9cd13f2c76e1c254aeedebb"
+    $[0] !== "a585d27423c1181e7b6305ff909458183d284658c3c3d2e3764e1128be302fd7"
   ) {
     for (let $i = 0; $i < 3; $i += 1) {
       $[$i] = Symbol.for("react.memo_cache_sentinel");
     }
-    $[0] = "8d7015668f857996c3d895a7a90e3e16b8a791d5b9cd13f2c76e1c254aeedebb";
+    $[0] = "a585d27423c1181e7b6305ff909458183d284658c3c3d2e3764e1128be302fd7";
   }
   useState(_temp);
 

compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/fast-refresh-refresh-on-const-changes-dev.js

@@ -1,4 +1,4 @@
-// @compilationMode(infer) @enableResetCacheOnSourceFileChanges
+// @compilationMode:"infer" @enableResetCacheOnSourceFileChanges
 import {useEffect, useMemo, useState} from 'react';
 import {ValidateMemoization} from 'shared-runtime';
 

compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/gating/codegen-instrument-forget-gating-test.expect.md

@@ -2,7 +2,7 @@
 ## Input
 
 ```javascript
-// @enableEmitInstrumentForget @compilationMode(annotation) @gating
+// @enableEmitInstrumentForget @compilationMode:"annotation" @gating
 
 function Bar(props) {
   'use forget';
@@ -38,7 +38,7 @@ export const FIXTURE_ENTRYPOINT = {
 ```javascript
 import { shouldInstrument, useRenderCounter } from "react-compiler-runtime";
 import { c as _c } from "react/compiler-runtime";
-import { isForgetEnabled_Fixtures } from "ReactForgetFeatureFlag"; // @enableEmitInstrumentForget @compilationMode(annotation) @gating
+import { isForgetEnabled_Fixtures } from "ReactForgetFeatureFlag"; // @enableEmitInstrumentForget @compilationMode:"annotation" @gating
 const Bar = isForgetEnabled_Fixtures()
   ? function Bar(props) {
       "use forget";

compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/gating/codegen-instrument-forget-gating-test.js

@@ -1,4 +1,4 @@
-// @enableEmitInstrumentForget @compilationMode(annotation) @gating
+// @enableEmitInstrumentForget @compilationMode:"annotation" @gating
 
 function Bar(props) {
   'use forget';

compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/gating/gating-test-export-default-function.expect.md

@@ -2,7 +2,7 @@
 ## Input
 
 ```javascript
-// @gating @compilationMode(annotation)
+// @gating @compilationMode:"annotation"
 export default function Bar(props) {
   'use forget';
   return <div>{props.bar}</div>;
@@ -28,7 +28,7 @@ export const FIXTURE_ENTRYPOINT = {
 
 ```javascript
 import { c as _c } from "react/compiler-runtime";
-import { isForgetEnabled_Fixtures } from "ReactForgetFeatureFlag"; // @gating @compilationMode(annotation)
+import { isForgetEnabled_Fixtures } from "ReactForgetFeatureFlag"; // @gating @compilationMode:"annotation"
 const Bar = isForgetEnabled_Fixtures()
   ? function Bar(props) {
       "use forget";

compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/gating/gating-test-export-default-function.js

@@ -1,4 +1,4 @@
-// @gating @compilationMode(annotation)
+// @gating @compilationMode:"annotation"
 export default function Bar(props) {
   'use forget';
   return <div>{props.bar}</div>;

compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/gating/gating-test-export-function-and-default.expect.md

@@ -2,7 +2,7 @@
 ## Input
 
 ```javascript
-// @gating @compilationMode(annotation)
+// @gating @compilationMode:"annotation"
 export default function Bar(props) {
   'use forget';
   return <div>{props.bar}</div>;
@@ -35,7 +35,7 @@ export const FIXTURE_ENTRYPOINT = {
 
 ```javascript
 import { c as _c } from "react/compiler-runtime";
-import { isForgetEnabled_Fixtures } from "ReactForgetFeatureFlag"; // @gating @compilationMode(annotation)
+import { isForgetEnabled_Fixtures } from "ReactForgetFeatureFlag"; // @gating @compilationMode:"annotation"
 const Bar = isForgetEnabled_Fixtures()
   ? function Bar(props) {
       "use forget";

compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/gating/gating-test-export-function-and-default.js

@@ -1,4 +1,4 @@
-// @gating @compilationMode(annotation)
+// @gating @compilationMode:"annotation"
 export default function Bar(props) {
   'use forget';
   return <div>{props.bar}</div>;

compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/gating/gating-test-export-function.expect.md

@@ -2,7 +2,7 @@
 ## Input
 
 ```javascript
-// @gating @compilationMode(annotation)
+// @gating @compilationMode:"annotation"
 export function Bar(props) {
   'use forget';
   return <div>{props.bar}</div>;
@@ -28,7 +28,7 @@ export const FIXTURE_ENTRYPOINT = {
 
 ```javascript
 import { c as _c } from "react/compiler-runtime";
-import { isForgetEnabled_Fixtures } from "ReactForgetFeatureFlag"; // @gating @compilationMode(annotation)
+import { isForgetEnabled_Fixtures } from "ReactForgetFeatureFlag"; // @gating @compilationMode:"annotation"
 export const Bar = isForgetEnabled_Fixtures()
   ? function Bar(props) {
       "use forget";

compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/gating/gating-test-export-function.js

@@ -1,4 +1,4 @@
-// @gating @compilationMode(annotation)
+// @gating @compilationMode:"annotation"
 export function Bar(props) {
   'use forget';
   return <div>{props.bar}</div>;

compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/gating/gating-test.expect.md

@@ -2,7 +2,7 @@
 ## Input
 
 ```javascript
-// @gating @compilationMode(annotation)
+// @gating @compilationMode:"annotation"
 function Bar(props) {
   'use forget';
   return <div>{props.bar}</div>;
@@ -28,7 +28,7 @@ export const FIXTURE_ENTRYPOINT = {
 
 ```javascript
 import { c as _c } from "react/compiler-runtime";
-import { isForgetEnabled_Fixtures } from "ReactForgetFeatureFlag"; // @gating @compilationMode(annotation)
+import { isForgetEnabled_Fixtures } from "ReactForgetFeatureFlag"; // @gating @compilationMode:"annotation"
 const Bar = isForgetEnabled_Fixtures()
   ? function Bar(props) {
       "use forget";

compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/gating/gating-test.js

@@ -1,4 +1,4 @@
-// @gating @compilationMode(annotation)
+// @gating @compilationMode:"annotation"
 function Bar(props) {
   'use forget';
   return <div>{props.bar}</div>;

compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/gating/infer-function-expression-React-memo-gating.expect.md

@@ -2,7 +2,7 @@
 ## Input
 
 ```javascript
-// @gating @compilationMode(infer)
+// @gating @compilationMode:"infer"
 import React from 'react';
 export default React.forwardRef(function notNamedLikeAComponent(props) {
   return <div />;
@@ -14,7 +14,7 @@ export default React.forwardRef(function notNamedLikeAComponent(props) {
 
 ```javascript
 import { c as _c } from "react/compiler-runtime";
-import { isForgetEnabled_Fixtures } from "ReactForgetFeatureFlag"; // @gating @compilationMode(infer)
+import { isForgetEnabled_Fixtures } from "ReactForgetFeatureFlag"; // @gating @compilationMode:"infer"
 import React from "react";
 export default React.forwardRef(
   isForgetEnabled_Fixtures()

compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/gating/infer-function-expression-React-memo-gating.js

@@ -1,4 +1,4 @@
-// @gating @compilationMode(infer)
+// @gating @compilationMode:"infer"
 import React from 'react';
 export default React.forwardRef(function notNamedLikeAComponent(props) {
   return <div />;

compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/hook-declaration-basic.flow.expect.md

@@ -2,7 +2,7 @@
 ## Input
 
 ```javascript
-// @flow @compilationMode(infer)
+// @flow @compilationMode:"infer"
 export default hook useFoo(bar: number) {
   return [bar];
 }

compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/hook-declaration-basic.flow.js

@@ -1,4 +1,4 @@
-// @flow @compilationMode(infer)
+// @flow @compilationMode:"infer"
 export default hook useFoo(bar: number) {
   return [bar];
 }

compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/idx-method-no-outlining-wildcard.expect.md

@@ -2,7 +2,7 @@
 ## Input
 
 ```javascript
-// @customMacros(idx.*.b)
+// @customMacros:"idx.*.b"
 
 function Component(props) {
   // outlined
@@ -31,7 +31,7 @@ function Component(props) {
 ## Code
 
 ```javascript
-import { c as _c } from "react/compiler-runtime"; // @customMacros(idx.*.b)
+import { c as _c } from "react/compiler-runtime"; // @customMacros:"idx.*.b"
 
 function Component(props) {
   const $ = _c(16);

compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/idx-method-no-outlining-wildcard.js

@@ -1,4 +1,4 @@
-// @customMacros(idx.*.b)
+// @customMacros:"idx.*.b"
 
 function Component(props) {
   // outlined

compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/idx-method-no-outlining.expect.md

@@ -2,7 +2,7 @@
 ## Input
 
 ```javascript
-// @customMacros(idx.a)
+// @customMacros:"idx.a"
 
 function Component(props) {
   // outlined
@@ -25,7 +25,7 @@ function Component(props) {
 ## Code
 
 ```javascript
-import { c as _c } from "react/compiler-runtime"; // @customMacros(idx.a)
+import { c as _c } from "react/compiler-runtime"; // @customMacros:"idx.a"
 
 function Component(props) {
   const $ = _c(10);

compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/idx-method-no-outlining.js

@@ -1,4 +1,4 @@
-// @customMacros(idx.a)
+// @customMacros:"idx.a"
 
 function Component(props) {
   // outlined

compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/idx-no-outlining.expect.md

@@ -2,7 +2,7 @@
 ## Input
 
 ```javascript
-// @customMacros(idx)
+// @customMacros:"idx"
 import idx from 'idx';
 
 function Component(props) {
@@ -21,7 +21,7 @@ export const FIXTURE_ENTRYPOINT = {
 ## Code
 
 ```javascript
-import { c as _c } from "react/compiler-runtime"; // @customMacros(idx)
+import { c as _c } from "react/compiler-runtime"; // @customMacros:"idx"
 
 function Component(props) {
   var _ref2;

compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/idx-no-outlining.js

@@ -1,4 +1,4 @@
-// @customMacros(idx)
+// @customMacros:"idx"
 import idx from 'idx';
 
 function Component(props) {

compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/infer-compile-hooks-with-multiple-params.expect.md

@@ -2,7 +2,7 @@
 ## Input
 
 ```javascript
-// @compilationMode(infer)
+// @compilationMode:"infer"
 import {useNoAlias} from 'shared-runtime';
 
 // This should be compiled by Forget
@@ -22,7 +22,7 @@ export const FIXTURE_ENTRYPOINT = {
 ## Code
 
 ```javascript
-import { c as _c } from "react/compiler-runtime"; // @compilationMode(infer)
+import { c as _c } from "react/compiler-runtime"; // @compilationMode:"infer"
 import { useNoAlias } from "shared-runtime";
 
 // This should be compiled by Forget

compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/infer-compile-hooks-with-multiple-params.js

@@ -1,4 +1,4 @@
-// @compilationMode(infer)
+// @compilationMode:"infer"
 import {useNoAlias} from 'shared-runtime';
 
 // This should be compiled by Forget

compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/infer-dont-compile-components-with-multiple-params.expect.md

@@ -2,7 +2,7 @@
 ## Input
 
 ```javascript
-// @compilationMode(infer)
+// @compilationMode:"infer"
 // Takes multiple parameters - not a component!
 function Component(foo, bar) {
   return <div />;
@@ -18,7 +18,7 @@ export const FIXTURE_ENTRYPOINT = {
 ## Code
 
 ```javascript
-// @compilationMode(infer)
+// @compilationMode:"infer"
 // Takes multiple parameters - not a component!
 function Component(foo, bar) {
   return <div />;

compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/infer-dont-compile-components-with-multiple-params.js

@@ -1,4 +1,4 @@
-// @compilationMode(infer)
+// @compilationMode:"infer"
 // Takes multiple parameters - not a component!
 function Component(foo, bar) {
   return <div />;

compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/infer-effect-dependencies/bailout-retry/error.callsite-in-non-react-fn-default-import.expect.md

@@ -2,7 +2,7 @@
 ## Input
 
 ```javascript
-// @inferEffectDependencies @compilationMode(infer) @panicThreshold(none)
+// @inferEffectDependencies @compilationMode:"infer" @panicThreshold:"none"
 import useMyEffect from 'useEffectWrapper';
 
 function nonReactFn(arg) {

compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/infer-effect-dependencies/bailout-retry/error.callsite-in-non-react-fn-default-import.js

@@ -1,4 +1,4 @@
-// @inferEffectDependencies @compilationMode(infer) @panicThreshold(none)
+// @inferEffectDependencies @compilationMode:"infer" @panicThreshold:"none"
 import useMyEffect from 'useEffectWrapper';
 
 function nonReactFn(arg) {

compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/infer-effect-dependencies/bailout-retry/error.callsite-in-non-react-fn.expect.md

@@ -2,7 +2,7 @@
 ## Input
 
 ```javascript
-// @inferEffectDependencies @compilationMode(infer) @panicThreshold(none)
+// @inferEffectDependencies @compilationMode:"infer" @panicThreshold:"none"
 import {useEffect} from 'react';
 
 function nonReactFn(arg) {

compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/infer-effect-dependencies/bailout-retry/error.callsite-in-non-react-fn.js

@@ -1,4 +1,4 @@
-// @inferEffectDependencies @compilationMode(infer) @panicThreshold(none)
+// @inferEffectDependencies @compilationMode:"infer" @panicThreshold:"none"
 import {useEffect} from 'react';
 
 function nonReactFn(arg) {

compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/infer-effect-dependencies/bailout-retry/error.non-inlined-effect-fn.expect.md

@@ -2,7 +2,7 @@
 ## Input
 
 ```javascript
-// @inferEffectDependencies @panicThreshold(none)
+// @inferEffectDependencies @panicThreshold:"none"
 import {useEffect} from 'react';
 
 /**

compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/infer-effect-dependencies/bailout-retry/error.non-inlined-effect-fn.js

@@ -1,4 +1,4 @@
-// @inferEffectDependencies @panicThreshold(none)
+// @inferEffectDependencies @panicThreshold:"none"
 import {useEffect} from 'react';
 
 /**

compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/infer-effect-dependencies/bailout-retry/error.todo-import-default-property-useEffect.expect.md

@@ -2,7 +2,7 @@
 ## Input
 
 ```javascript
-// @inferEffectDependencies @panicThreshold(none)
+// @inferEffectDependencies @panicThreshold:"none"
 import React from 'react';
 
 function NonReactiveDepInEffect() {

compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/infer-effect-dependencies/bailout-retry/error.todo-import-default-property-useEffect.js

@@ -1,4 +1,4 @@
-// @inferEffectDependencies @panicThreshold(none)
+// @inferEffectDependencies @panicThreshold:"none"
 import React from 'react';
 
 function NonReactiveDepInEffect() {

compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/infer-effect-dependencies/bailout-retry/error.todo-syntax.expect.md

@@ -2,7 +2,7 @@
 ## Input
 
 ```javascript
-// @inferEffectDependencies @panicThreshold(none)
+// @inferEffectDependencies @panicThreshold:"none"
 import {useSpecialEffect} from 'shared-runtime';
 
 /**

compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/infer-effect-dependencies/bailout-retry/error.todo-syntax.js

@@ -1,4 +1,4 @@
-// @inferEffectDependencies @panicThreshold(none)
+// @inferEffectDependencies @panicThreshold:"none"
 import {useSpecialEffect} from 'shared-runtime';
 
 /**

compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/infer-effect-dependencies/bailout-retry/error.use-no-memo.expect.md

@@ -2,7 +2,7 @@
 ## Input
 
 ```javascript
-// @inferEffectDependencies @panicThreshold(none)
+// @inferEffectDependencies @panicThreshold:"none"
 import {useEffect} from 'react';
 
 function Component({propVal}) {

compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/infer-effect-dependencies/bailout-retry/error.use-no-memo.js

@@ -1,4 +1,4 @@
-// @inferEffectDependencies @panicThreshold(none)
+// @inferEffectDependencies @panicThreshold:"none"
 import {useEffect} from 'react';
 
 function Component({propVal}) {

compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/infer-effect-dependencies/bailout-retry/mutate-after-useeffect-granular-access.expect.md

@@ -2,7 +2,7 @@
 ## Input
 
 ```javascript
-// @inferEffectDependencies @panicThreshold(none)
+// @inferEffectDependencies @panicThreshold:"none"
 import {useEffect} from 'react';
 import {print} from 'shared-runtime';
 
@@ -20,7 +20,7 @@ function Component({foo}) {
 ## Code
 
 ```javascript
-// @inferEffectDependencies @panicThreshold(none)
+// @inferEffectDependencies @panicThreshold:"none"
 import { useEffect } from "react";
 import { print } from "shared-runtime";
 

compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/infer-effect-dependencies/bailout-retry/mutate-after-useeffect-granular-access.js

@@ -1,4 +1,4 @@
-// @inferEffectDependencies @panicThreshold(none)
+// @inferEffectDependencies @panicThreshold:"none"
 import {useEffect} from 'react';
 import {print} from 'shared-runtime';
 

compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/infer-effect-dependencies/bailout-retry/mutate-after-useeffect-ref-access.expect.md

@@ -2,7 +2,7 @@
 ## Input
 
 ```javascript
-// @inferEffectDependencies @panicThreshold(none)
+// @inferEffectDependencies @panicThreshold:"none"
 
 import {useEffect, useRef} from 'react';
 import {print} from 'shared-runtime';
@@ -19,7 +19,7 @@ function Component({arrRef}) {
 ## Code
 
 ```javascript
-// @inferEffectDependencies @panicThreshold(none)
+// @inferEffectDependencies @panicThreshold:"none"
 
 import { useEffect, useRef } from "react";
 import { print } from "shared-runtime";

compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/infer-effect-dependencies/bailout-retry/mutate-after-useeffect-ref-access.js

@@ -1,4 +1,4 @@
-// @inferEffectDependencies @panicThreshold(none)
+// @inferEffectDependencies @panicThreshold:"none"
 
 import {useEffect, useRef} from 'react';
 import {print} from 'shared-runtime';

compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/infer-effect-dependencies/bailout-retry/mutate-after-useeffect.expect.md

@@ -2,7 +2,7 @@
 ## Input
 
 ```javascript
-// @inferEffectDependencies @panicThreshold(none)
+// @inferEffectDependencies @panicThreshold:"none"
 import {useEffect} from 'react';
 
 function Component({foo}) {
@@ -17,7 +17,7 @@ function Component({foo}) {
 ## Code
 
 ```javascript
-// @inferEffectDependencies @panicThreshold(none)
+// @inferEffectDependencies @panicThreshold:"none"
 import { useEffect } from "react";
 
 function Component(t0) {

compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/infer-effect-dependencies/bailout-retry/mutate-after-useeffect.js

@@ -1,4 +1,4 @@
-// @inferEffectDependencies @panicThreshold(none)
+// @inferEffectDependencies @panicThreshold:"none"
 import {useEffect} from 'react';
 
 function Component({foo}) {

compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/infer-function-React-memo.expect.md

@@ -2,7 +2,7 @@
 ## Input
 
 ```javascript
-// @compilationMode(infer)
+// @compilationMode:"infer"
 React.memo(props => {
   return <div />;
 });
@@ -12,7 +12,7 @@ React.memo(props => {
 ## Code
 
 ```javascript
-import { c as _c } from "react/compiler-runtime"; // @compilationMode(infer)
+import { c as _c } from "react/compiler-runtime"; // @compilationMode:"infer"
 React.memo((props) => {
   const $ = _c(1);
   let t0;

compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/infer-function-React-memo.js

@@ -1,4 +1,4 @@
-// @compilationMode(infer)
+// @compilationMode:"infer"
 React.memo(props => {
   return <div />;
 });

compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/infer-function-assignment.expect.md

@@ -2,7 +2,7 @@
 ## Input
 
 ```javascript
-// @compilationMode(infer)
+// @compilationMode:"infer"
 const Component = props => {
   return <div />;
 };
@@ -12,7 +12,7 @@ const Component = props => {
 ## Code
 
 ```javascript
-import { c as _c } from "react/compiler-runtime"; // @compilationMode(infer)
+import { c as _c } from "react/compiler-runtime"; // @compilationMode:"infer"
 const Component = (props) => {
   const $ = _c(1);
   let t0;

compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/infer-function-assignment.js

@@ -1,4 +1,4 @@
-// @compilationMode(infer)
+// @compilationMode:"infer"
 const Component = props => {
   return <div />;
 };

compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/infer-function-expression-component.expect.md

@@ -2,7 +2,7 @@
 ## Input
 
 ```javascript
-// @compilationMode(infer)
+// @compilationMode:"infer"
 
 const Component = function ComponentName(props) {
   return <Foo />;
@@ -13,7 +13,7 @@ const Component = function ComponentName(props) {
 ## Code
 
 ```javascript
-import { c as _c } from "react/compiler-runtime"; // @compilationMode(infer)
+import { c as _c } from "react/compiler-runtime"; // @compilationMode:"infer"
 
 const Component = function ComponentName(props) {
   const $ = _c(1);

compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/infer-function-expression-component.js

@@ -1,4 +1,4 @@
-// @compilationMode(infer)
+// @compilationMode:"infer"
 
 const Component = function ComponentName(props) {
   return <Foo />;

compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/infer-function-forwardRef.expect.md

@@ -2,7 +2,7 @@
 ## Input
 
 ```javascript
-// @compilationMode(infer)
+// @compilationMode:"infer"
 React.forwardRef(props => {
   return <div />;
 });
@@ -12,7 +12,7 @@ React.forwardRef(props => {
 ## Code
 
 ```javascript
-import { c as _c } from "react/compiler-runtime"; // @compilationMode(infer)
+import { c as _c } from "react/compiler-runtime"; // @compilationMode:"infer"
 React.forwardRef((props) => {
   const $ = _c(1);
   let t0;

compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/infer-function-forwardRef.js

@@ -1,4 +1,4 @@
-// @compilationMode(infer)
+// @compilationMode:"infer"
 React.forwardRef(props => {
   return <div />;
 });

compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/infer-functions-component-with-hook-call.expect.md

@@ -2,7 +2,7 @@
 ## Input
 
 ```javascript
-// @compilationMode(infer)
+// @compilationMode:"infer"
 function Component(props) {
   const [state, _] = useState(null);
   return [state];
@@ -13,7 +13,7 @@ function Component(props) {
 ## Code
 
 ```javascript
-import { c as _c } from "react/compiler-runtime"; // @compilationMode(infer)
+import { c as _c } from "react/compiler-runtime"; // @compilationMode:"infer"
 function Component(props) {
   const $ = _c(2);
   const [state] = useState(null);

compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/infer-functions-component-with-hook-call.js

@@ -1,4 +1,4 @@
-// @compilationMode(infer)
+// @compilationMode:"infer"
 function Component(props) {
   const [state, _] = useState(null);
   return [state];

compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/infer-functions-component-with-jsx.expect.md

@@ -2,7 +2,7 @@
 ## Input
 
 ```javascript
-// @compilationMode(infer)
+// @compilationMode:"infer"
 function Component(props) {
   return <div />;
 }
@@ -12,7 +12,7 @@ function Component(props) {
 ## Code
 
 ```javascript
-import { c as _c } from "react/compiler-runtime"; // @compilationMode(infer)
+import { c as _c } from "react/compiler-runtime"; // @compilationMode:"infer"
 function Component(props) {
   const $ = _c(1);
   let t0;

compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/infer-functions-component-with-jsx.js

@@ -1,4 +1,4 @@
-// @compilationMode(infer)
+// @compilationMode:"infer"
 function Component(props) {
   return <div />;
 }

compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/infer-functions-component-with-ref-arg.expect.md

@@ -2,7 +2,7 @@
 ## Input
 
 ```javascript
-// @compilationMode(infer)
+// @compilationMode:"infer"
 
 function Foo({}, ref) {
   return <div ref={ref} />;
@@ -18,7 +18,7 @@ export const FIXTURE_ENTRYPOINT = {
 ## Code
 
 ```javascript
-import { c as _c } from "react/compiler-runtime"; // @compilationMode(infer)
+import { c as _c } from "react/compiler-runtime"; // @compilationMode:"infer"
 
 function Foo(t0, ref) {
   const $ = _c(2);

compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/infer-functions-component-with-ref-arg.js

@@ -1,4 +1,4 @@
-// @compilationMode(infer)
+// @compilationMode:"infer"
 
 function Foo({}, ref) {
   return <div ref={ref} />;

compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/infer-functions-hook-with-hook-call.expect.md

@@ -2,7 +2,7 @@
 ## Input
 
 ```javascript
-// @compilationMode(infer)
+// @compilationMode:"infer"
 function useStateValue(props) {
   const [state, _] = useState(null);
   return [state];
@@ -13,7 +13,7 @@ function useStateValue(props) {
 ## Code
 
 ```javascript
-import { c as _c } from "react/compiler-runtime"; // @compilationMode(infer)
+import { c as _c } from "react/compiler-runtime"; // @compilationMode:"infer"
 function useStateValue(props) {
   const $ = _c(2);
   const [state] = useState(null);

compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/infer-functions-hook-with-hook-call.js

@@ -1,4 +1,4 @@
-// @compilationMode(infer)
+// @compilationMode:"infer"
 function useStateValue(props) {
   const [state, _] = useState(null);
   return [state];

compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/infer-functions-hook-with-jsx.expect.md

@@ -2,7 +2,7 @@
 ## Input
 
 ```javascript
-// @compilationMode(infer)
+// @compilationMode:"infer"
 function useDiv(props) {
   return <div />;
 }
@@ -12,7 +12,7 @@ function useDiv(props) {
 ## Code
 
 ```javascript
-import { c as _c } from "react/compiler-runtime"; // @compilationMode(infer)
+import { c as _c } from "react/compiler-runtime"; // @compilationMode:"infer"
 function useDiv(props) {
   const $ = _c(1);
   let t0;

compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/infer-functions-hook-with-jsx.js

@@ -1,4 +1,4 @@
-// @compilationMode(infer)
+// @compilationMode:"infer"
 function useDiv(props) {
   return <div />;
 }

compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/infer-nested-object-method.expect.md

@@ -2,7 +2,7 @@
 ## Input
 
 ```javascript
-// @compilationMode(infer)
+// @compilationMode:"infer"
 
 import {Stringify} from 'shared-runtime';
 
@@ -27,7 +27,7 @@ export const FIXTURE_ENTRYPOINT = {
 ## Code
 
 ```javascript
-import { c as _c } from "react/compiler-runtime"; // @compilationMode(infer)
+import { c as _c } from "react/compiler-runtime"; // @compilationMode:"infer"
 
 import { Stringify } from "shared-runtime";
 

compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/infer-nested-object-method.jsx

@@ -1,4 +1,4 @@
-// @compilationMode(infer)
+// @compilationMode:"infer"
 
 import {Stringify} from 'shared-runtime';
 

compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/infer-no-component-annot.expect.md

@@ -2,7 +2,7 @@
 ## Input
 
 ```javascript
-// @compilationMode(infer)
+// @compilationMode:"infer"
 import {useIdentity, identity} from 'shared-runtime';
 
 function Component(fakeProps: number) {
@@ -20,7 +20,7 @@ export const FIXTURE_ENTRYPOINT = {
 ## Code
 
 ```javascript
-// @compilationMode(infer)
+// @compilationMode:"infer"
 import { useIdentity, identity } from "shared-runtime";
 
 function Component(fakeProps: number) {

compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/infer-no-component-annot.ts

@@ -1,4 +1,4 @@
-// @compilationMode(infer)
+// @compilationMode:"infer"
 import {useIdentity, identity} from 'shared-runtime';
 
 function Component(fakeProps: number) {

compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/infer-no-component-nested-jsx.expect.md

@@ -2,7 +2,7 @@
 ## Input
 
 ```javascript
-// @compilationMode(infer)
+// @compilationMode:"infer"
 function Component(props) {
   const result = f(props);
   function helper() {
@@ -26,7 +26,7 @@ export const FIXTURE_ENTRYPOINT = {
 ## Code
 
 ```javascript
-// @compilationMode(infer)
+// @compilationMode:"infer"
 function Component(props) {
   const result = f(props);
   function helper() {

compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/infer-no-component-nested-jsx.js

@@ -1,4 +1,4 @@
-// @compilationMode(infer)
+// @compilationMode:"infer"
 function Component(props) {
   const result = f(props);
   function helper() {

compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/infer-no-component-obj-return.expect.md

@@ -2,7 +2,7 @@
 ## Input
 
 ```javascript
-// @compilationMode(infer)
+// @compilationMode:"infer"
 function Component(props) {
   const ignore = <foo />;
   return {foo: f(props)};
@@ -22,7 +22,7 @@ export const FIXTURE_ENTRYPOINT = {
 ## Code
 
 ```javascript
-// @compilationMode(infer)
+// @compilationMode:"infer"
 function Component(props) {
   const ignore = <foo />;
   return { foo: f(props) };

compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/infer-no-component-obj-return.js

@@ -1,4 +1,4 @@
-// @compilationMode(infer)
+// @compilationMode:"infer"
 function Component(props) {
   const ignore = <foo />;
   return {foo: f(props)};

compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/infer-skip-components-without-hooks-or-jsx.expect.md

@@ -2,7 +2,7 @@
 ## Input
 
 ```javascript
-// @compilationMode(infer)
+// @compilationMode:"infer"
 // This component is skipped bc it doesn't call any hooks or
 // use JSX:
 function Component(props) {
@@ -14,7 +14,7 @@ function Component(props) {
 ## Code
 
 ```javascript
-// @compilationMode(infer)
+// @compilationMode:"infer"
 // This component is skipped bc it doesn't call any hooks or
 // use JSX:
 function Component(props) {