How to add a babel plugin

[fortesp]

Hi,
I am trying to create a rollup plugin that gets JSX components (as JSX) before they are transpiled to .js in order to add "data-testid" attribute for each HTML element of sub component in each stencil component.
I already tried to add something like this:

...

function myBabelPlugin() {
  return {
    visitor: {
      JSXOpeningElement(path) {
        console.log('myBabelPlugin visitor called for:', path.node.name);
        // Example: always add data-testid="test"
        const hasTestId = path.node.attributes.some(
          (attr) => t.isJSXAttribute(attr) && attr.name.name === 'data-testid'
        );
        if (!hasTestId) {
          path.node.attributes.push(
            t.jsxAttribute(
              t.jsxIdentifier('data-testid'),
              t.stringLiteral('test')
            )
          );
        }
      }
    }
  };
}


export function dataTestIdPlugin() {
  return {
    name: "data-test-id-plugin",
    transform(code, id) {
      if (!id.endsWith(".tsx")) return null;
      console.log("[dataTestIdPlugin] Transforming:", id);

      const result = transformSync(code, {
        filename: id,
        plugins: [myBabelPlugin()],
        sourceMaps: false,
      });

      if (result?.code) {
        return { code: result.code, map: null };
      }
      return null;
    },
  };
}

The rollup is called, but the code that comes out its not in JSX anymore and because of that i think the babel plugin does not do anything. How to get before and not after this phase?

Thank you.