Fix: transpiling React.createElement into Preact h behavior

[Shinyaigeek]

↪️ Pull Request

Hi team 👋

Fixes: #7433

jsxImportSource will be determined with reactLib variable, but reactLib variable is always “react” string literal if alias.react is setted. I think jsx-runtime (and automatic transformation) is not related.

I fixed this

💻 Examples

package.json

{
  "alias": {
    "react": "preact/compat"
  }
}

🚨 Test instructions

I made a test case to check jsx runtime transformation with preact with alias.react package.json.

✔️ PR Todo

• Added/updated unit tests for this change
• Filled out test instructions (In case there aren't any unit tests)
• Included links to related issues/PRs

[height]

Link Height tasks by mentioning a task ID in the pull request title or commit messages, or description and comments with the keyword link (e.g. "Link T-123").

💡Tip: You can also use "Close T-X" to automatically close a task when the pull request is merged.

[Shinyaigeek]

In order to convert preact/compat into preact pragma, I made a function to do it, but I feel this approach is a little muddy. If you have another idea to implement this, I will be happy if you comment on it.

[Shinyaigeek]

I think this approach is wrong. I thought #7433 behavior is caused by this line(https://github.com/parcel-bundler/parcel/blob/v2/packages/transformers/js/src/JSTransformer.js#L160) in which reactLib is fixed to react when aliased . However, As this comment (#7435 (comment)), reactLib should be fixed to react when aliased.

I think the cause is not this line, but these line(https://github.com/parcel-bundler/parcel/blob/v2/packages/transformers/js/src/JSTransformer.js#L201). In these line, JSTransformer decides whether parcel (and backend swc) should automatically transform createElement to new JSX Runtime API, and decides which JSXImportSource should be used.
The cause for this issue is that reactLib is fixed to react so this processing runs in the case only react. I feel I should fix these line to insert the specific processing when pkg.alias is configured.

It's 3am in my timezone, so once I back this PR to draft and sleep, and I’ll work tomorrow 🙇.

[Shinyaigeek]

I fixed 👍

[mischnic]

Does the current version still have the problem that reactLib (and therefore jsxImportSource) is set to "preact" even though it should be "react"?

I think something like this should work. The other react-like libraries don't support this automatic runtime anyway

--- packages/transformers/js/src/JSTransformer.js
+++ packages/transformers/js/src/JSTransformer.js
@@ -199,11 +199,15 @@ export default (new Transformer({
         jsxImportSource = compilerOptions?.jsxImportSource;
         automaticJSXRuntime = true;
       } else if (reactLib) {
-        let automaticVersion = JSX_PRAGMA[reactLib]?.automatic;
+        let effectiveReactLib =
+          (pkg?.alias && pkg.alias['react']) === 'preact/compat'
+            ? 'preact'
+            : reactLib;
+        let automaticVersion = JSX_PRAGMA[effectiveReactLib]?.automatic;
         let reactLibVersion =
-          pkg?.dependencies?.[reactLib] ||
-          pkg?.devDependencies?.[reactLib] ||
-          pkg?.peerDependencies?.[reactLib];
+          pkg?.dependencies?.[effectiveReactLib] ||
+          pkg?.devDependencies?.[effectiveReactLib] ||
+          pkg?.peerDependencies?.[effectiveReactLib];
         let minReactLibVersion =
           reactLibVersion != null && reactLibVersion !== '*'
             ? semver.minVersion(reactLibVersion)?.toString()

[Shinyaigeek]

As you say, it's not JSTransformation's responsibility to resolve the alias, I overlooked it. There are many libraries that support jsxRuntime, but only "preact" supports {reactLib}/jsx-runtime alias, and I feel that even if more library support that alias and parcel supports it in the future, It's enough to abstract it to at that time. I fixed it in e05804a 👍

Thank you for helping!

[mischnic]

I think we should also add this to make sure it's actually importing from React (using a Regex because react/jsx-runtime is a substring of preact/jsx-runtime).

Suggested change

	let file = await outputFS.readFile(b.getBundles()[0].filePath, 'utf8');
	assert(file.includes('_jsxRuntime.jsx("div"'));
	let file = await outputFS.readFile(b.getBundles()[0].filePath, 'utf8');
	assert(/\Wreact\/jsx-runtime\W/.test(file));
	assert(file.includes('_jsxRuntime.jsx("div"'));

[Shinyaigeek]

Sure. I fixed in 4efec78 👍 Thanks!