[Question] Plugin-injected imports renamed by hygiene pass - how to preserve identifier names?

[pedrofcarvalho]

Establishing Context

I am migrating our internal build tool from Babel to SWC, and internally, we have our own UI framework, and we need to support both our renderers for React and the internal framework.

Practically speaking, I need some arbitrary Pragma to be called for the JSX transformation and add an import statement like so:
import { createElement as jsxPragma_createElement } from "either-react-or-internal-renderer";

Currently, I am adding this import statement with a custom Rust-based SWC plugin. Now let me explain what is my problem below.
Note: Having 2 frameworks is not part of the question, the final goal is to add support for both.

Problem Statement

My SWC plugin injects the JSX pragma imports, but the hygiene pass automatically renames the imported identifiers by adding numeric suffixes (e.g., jsxPragma_createElement → jsxPragma_createElement1).

This breaks the JSX transformation, since the pragma configuration expects the original identifier name.

Broken transformation example

Original source code:

import styles from './styles.scss';

const componentView = () => (
	<div>
		<h1>Nani</h1>
	</div>
);

Expected transformed code:

import { createElement as jsxPragma_createElement } from "my-renderer-library";
import styles from './styles.scss';
const componentView = ()=>{
    return /*#__PURE__*/ jsxPragma_createElement("div", null, /*#__PURE__*/ jsxPragma_createElement("h1", null, "Nani"));
};

Actual transformed code:

import { createElement as jsxPragma_createElement1 } from "my-renderer-library";
import styles from './styles.scss';
const componentView = ()=>{
    return /*#__PURE__*/ jsxPragma_createElement("div", null, /*#__PURE__*/ jsxPragma_createElement("h1", null, "Nani"));
};

Current Setup

SWC Config:

{
  jsc: {
    parser: {
      syntax: hasTS ? "typescript" : "ecmascript",
      ...(hasTS ? { tsx: true } : { jsx: true }),
      externalHelpers: true,
    },
    transform: {
      react: {
        runtime: "classic",
        pragma: "jsxPragma_createElement",
        pragmaFrag: "jsxPragma_Fragment",
      },
    },
    experimental: {
      plugins: [["my-jsx-plugin", { /* config */ }]],
    },
    module: {
      type: "es6"
    }
  },
}

Final Question

Is there any known way to go around this problem?
Am I doing this the wrong way?

I'm new to compilers, Babel and SWC, so I'm learning along the way.
I would love some pointers from the community, thank yall so much in advance!!!

[kdy1]

If you want to override how JSX classic runtime works, you need top_level_mark.

https://swc.rs/docs/contributing/es-commons/variable-management#syntax-context

But not sure if the top-level mark is passed to the Wasm plugin.

[pedrofcarvalho]

As far as I understand, a WASM plugin on SWC only receives 2 arguments: a Program and a TransformPluginProgramMetadata.
From the TransformPluginProgramMetadata docs, it only receives a unresolved_mark.

What I was thinking is to create some wrapper around TransformPluginProgramMetadata containing a top_level_mark, but I think that new field will either be ignored or throw some error at some point.

What do you think? @kdy1

[kdy1]

I think you should rather apply jsx pass by yourself from the plugin.
Adding top_level_mark is a ABI-breaking change.

[pedrofcarvalho]

Ok, sounds good, I will attempt that and update this thread with my results.
Thanks for the help and quick responses!