fix: Run Babel after OXC to fix React source locations

@rolldown/plugin-babel has enforce:'pre' by default, making it run
before @vitejs/plugin-react (OXC). When the source location Babel
plugin inserts lines, OXC sees modified line numbers and embeds
wrong source positions in jsxDEV() calls. Override enforce to
undefined so Babel runs after OXC, preserving correct source maps.

Author: Artur-

flow-build-tools/src/main/resources/plugins/react-function-location-plugin/react-function-location-plugin.js

@@ -1,24 +1,84 @@
 import * as t from '@babel/types';
+import { readFileSync } from 'fs';
 
 export function addFunctionComponentSourceLocationBabel() {
   function isReactFunctionName(name) {
     // A React component function always starts with a Capital letter
     return name && name.match(/^[A-Z].*/);
   }
 
+  // Cache original file contents for finding correct line numbers.
+  // When running after OXC (enforce: 'post'), Babel's AST positions
+  // refer to the transformed code, not the original source. We read
+  // the original file to get correct positions.
+  const originalSources = {};
+
+  function getOriginalLines(filename) {
+    if (!originalSources[filename]) {
+      try {
+        originalSources[filename] = readFileSync(filename, 'utf-8').split('\n');
+      } catch {
+        originalSources[filename] = [];
+      }
+    }
+    return originalSources[filename];
+  }
+
+  function findFunctionLine(filename, functionName) {
+    const lines = getOriginalLines(filename);
+    for (let i = 0; i < lines.length; i++) {
+      // Match "function FunctionName(" or "const/let/var FunctionName ="
+      const funcMatch = lines[i].match(new RegExp(`\\bfunction\\s+${functionName}\\s*\\(`));
+      const constMatch = lines[i].match(new RegExp(`\\b(?:const|let|var)\\s+${functionName}\\s*=`));
+      if (funcMatch) {
+        // Find the opening brace of the function body
+        const braceCol = lines[i].indexOf('{', funcMatch.index + funcMatch[0].length);
+        if (braceCol >= 0) {
+          return { line: i + 1, column: braceCol + 1 };
+        }
+        // Brace might be on a following line
+        for (let j = i + 1; j < lines.length; j++) {
+          const bc = lines[j].indexOf('{');
+          if (bc >= 0) return { line: j + 1, column: bc + 1 };
+        }
+      }
+      if (constMatch) {
+        // Find arrow function body: look for => and then { or (
+        for (let j = i; j < Math.min(i + 5, lines.length); j++) {
+          const arrowIdx = lines[j].indexOf('=>');
+          if (arrowIdx >= 0) {
+            const after = lines[j].substring(arrowIdx + 2).trim();
+            if (after.startsWith('{') || after.startsWith('(')) {
+              return { line: j + 1, column: arrowIdx + 3 };
+            }
+            if (j + 1 < lines.length) {
+              return { line: j + 2, column: 1 };
+            }
+          }
+        }
+      }
+    }
+    return null;
+  }
+
   /**
    * Writes debug info as Name.__debugSourceDefine={...} after the given statement ("path").
-   * This is used to make the source location of the function (defined by the loc parameter) available in the browser in development mode.
+   * This is used to make the source location of the function available in the browser in development mode.
    * The name __debugSourceDefine is prefixed by __ to mark this is not a public API.
+   *
+   * Uses the original source file to determine correct line numbers,
+   * since Babel may be running on OXC-transformed code with different positions.
    */
-  function addDebugInfo(path, name, filename, loc) {
-    const lineNumber = loc.start.line;
-    const columnNumber = loc.start.column + 1;
+  function addDebugInfo(path, name, filename) {
+    const loc = findFunctionLine(filename, name);
+    if (!loc) {
+      return;
+    }
     const debugSourceMember = t.memberExpression(t.identifier(name), t.identifier('__debugSourceDefine'));
     const debugSourceDefine = t.objectExpression([
       t.objectProperty(t.identifier('fileName'), t.stringLiteral(filename)),
-      t.objectProperty(t.identifier('lineNumber'), t.numericLiteral(lineNumber)),
-      t.objectProperty(t.identifier('columnNumber'), t.numericLiteral(columnNumber))
+      t.objectProperty(t.identifier('lineNumber'), t.numericLiteral(loc.line)),
+      t.objectProperty(t.identifier('columnNumber'), t.numericLiteral(loc.column))
     ]);
     const assignment = t.expressionStatement(t.assignmentExpression('=', debugSourceMember, debugSourceDefine));
     const condition = t.binaryExpression(
@@ -48,15 +108,13 @@ export function addFunctionComponentSourceLocationBabel() {
           }
 
           const filename = state.file.opts.filename;
-          if (declaration?.init?.body?.loc) {
-            addDebugInfo(path, name, filename, declaration.init.body.loc);
-          }
+          addDebugInfo(path, name, filename);
         });
       },
 
       FunctionDeclaration(path, state) {
         // Finds declarations such as
-        // functio Foo() { return <div/>; }
+        // function Foo() { return <div/>; }
         // export function Bar() { return <span>Hello</span>;}
 
         // and writes a Foo.__debugSourceDefine= {..} after it, referring to the start of the function body
@@ -66,9 +124,7 @@ export function addFunctionComponentSourceLocationBabel() {
           return;
         }
         const filename = state.file.opts.filename;
-        if (node.body.loc) {
-          addDebugInfo(path, name, filename, node.body.loc);
-        }
+        addDebugInfo(path, name, filename);
       }
     }
   };

flow-server/src/main/resources/vite.generated.ts

@@ -32,7 +32,7 @@ export { default as useLocalWebComponents } from '#buildFolder#/plugins/vite-plu
 
 import { visualizer } from 'rollup-plugin-visualizer';
 import reactPlugin from '@vitejs/plugin-react';
-import babel from '@rolldown/plugin-babel';
+import { transformSync } from '@babel/core';
 //#tailwindcssVitePluginImport#
 
 //#vitePluginFileSystemRouterImport#
@@ -533,20 +533,33 @@ export const vaadinConfig: UserConfigFn = (env) => {
         include: '**/*.tsx',
         jsxImportSource: productionMode ? 'react' : 'Frontend/generated/jsx-dev-transform',
       }),
-      // Babel plugins for source location info and signals transform
-      // (separate from reactPlugin since v6 uses OXC instead of Babel for JSX)
-      babel({
-        include: '**/*.tsx',
-        plugins: [
-          !productionMode && addFunctionComponentSourceLocationBabel(),
-          [
-            'module:@preact/signals-react-transform',
-            {
-              mode: 'all' // Needed to include translations which do not use something.value
-            }
-          ]
-        ].filter(Boolean)
-      }),
+      // Babel plugins for source location info and signals transform.
+      // Must run AFTER reactPlugin (OXC) so that source locations are correct.
+      // Uses a custom plugin instead of @rolldown/plugin-babel because that
+      // plugin hardcodes enforce:'pre' which cannot be overridden.
+      {
+        name: 'vaadin-babel-post',
+        enforce: 'post' as const,
+        transform(code: string, id: string) {
+          if (!id.endsWith('.tsx')) return null;
+          const result = transformSync(code, {
+            filename: id,
+            plugins: [
+              !productionMode && addFunctionComponentSourceLocationBabel(),
+              [
+                'module:@preact/signals-react-transform',
+                {
+                  mode: 'all' // Needed to include translations which do not use something.value
+                }
+              ]
+            ].filter(Boolean),
+            sourceMaps: true,
+            sourceFileName: id,
+          });
+          if (!result?.code) return null;
+          return { code: result.code, map: result.map };
+        },
+      },
       //#tailwindcssVitePlugin#
       productionMode && vaadinI18n({
         cwd: __dirname,