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.

[johnjenkins]

hi! I don't think a babel plugin will work because the transpillation is performed by typescript, so you'd need a typescript plugin (which Stencil has no public interface for at present).

I think you might be able to achieve something similar just by augmenting the stencil JSX pragma ... something like:

// ./utils/custom-renderer.ts 

import { h as defaultStencilRender } from '@stencil/core';

export function h(...args: any[]): ReturnType<typeof defaultStencilRender> {
  // args should contain the jsx you want to transform
  // do what you want, then....

  return defaultStencilRender(...args);
}

Then in your components:

import { Component, ComponentInterface } from '@stencil/core';
import { h } from '../utils/custom-renderer';

@Component({
  tag: 'my-component',
  styleUrl: 'my-component.css',
  shadow: true,
})
export class MyComponent implements ComponentInterface {
  
  ...

  render() {
    return (
      <div>...</div>
    );
  }
}