Add hermes compilation target

[colinaaa]

Q	A
Fixed Issues?	Fixes #15612
Patch: Bug Fix?
Major: Breaking Change?
Minor: New Feature?	Yes
Tests Added + Pass?	Yes
Documentation PR Link	babel/website#2844
Any Dependency Changes?
License	MIT

The same as #14944, we add hermes as one of the compilation targets.

Now preset-env recognizes hermes as a compilation target:

{
  "presets": [["env", { "targets": { "hermes": "0.7" } }]]
}

Note that neither browserslist nor @mdn/browser-compat-data has compat data of hermes. So hermes is not added to browserNameMap at

babel/packages/babel-helper-compilation-targets/src/targets.ts

Lines 6 to 22 in c446ff8

	export const browserNameMap = {
	and_chr: "chrome",
	and_ff: "firefox",
	android: "android",
	chrome: "chrome",
	edge: "edge",
	firefox: "firefox",
	ie: "ie",
	ie_mob: "ie",
	ios_saf: "ios",
	node: "node",
	deno: "deno",
	op_mob: "opera_mobile",
	opera: "opera",
	safari: "safari",
	samsung: "samsung",
	} as const;

[babel-bot]

Build successful! You can test your changes in the REPL here: https://babeljs.io/repl/build/55730/

[nicolo-ribaudo]

Thanks! It looks like there is a TS error, you can debug it locally with make tscheck.

[colinaaa]

Thanks! It is fixed. Also, the documentation PR link is updated.

[zloirock]

I think that makes sense to add also react-native target for Hermes bundled with React Native. core-js-compat and compat-table also have data for this.

[colinaaa]

I think that makes sense to add also react-native target for Hermes bundled with React Native. core-js-compat and compat-table also have data for this.

I agree with adding react-native. But I took a look at the compat-table data, it seems there is only one version of react-native:

React Native 0.70.3 (Using bundled Hermes and metro-react-native babel preset)
https://github.com/compat-table/compat-table/blob/6b68e5109b47771581d47faba6d4c5077f72061e/environments.json#L7650-L7657

Is it a little weird to use preset-env with metro-react-native-babel-preset? According to its documentation:

React Native itself uses this Babel preset by default when transforming your app's source code.
https://www.npmjs.com/package/metro-react-native-babel-preset

I'm not familiar with react-native. For me, it looks like the metro-react-native-babel-preset works as the preset-env of react-native.

Is it correct to add react-native into preset-env with compat-data that is generated by using another babel preset?

[kungfooman]

I'm using the REPL from @babel-bot and testing via in F12/DevTools:

str = `
class Foo {
  #bar() {
    // Should be transpiled
  }
}
`;
options = {
  "targets": {
    "hermes": "0.7"
  }
};
ret = Babel.transform(str, options);
console.log(ret.code);

The output is same as input. Shouldn't it rewrite it? (sorry if stupid question, I'm new to this part of Babel)

[JLHwung]

@kungfooman By default Babel does not apply any transform, you will have to enable the env preset.

var options = {
  "presets": ["env"],
  "targets": {
    "hermes": "0.7"
  }
};

[zloirock]

I agree with adding react-native. But I took a look at the compat-table data, it seems there is only one version of react-native.

It's compat-table issue - core-js-compat contains data for all hermes versions to [email protected]. And it's compatibility results have improved significantly compared to the latest hermes version that was published separately - I don't see any such releases after August 2022.

About a year ago I received some messages that someone wanted such target, however, I can't find those messages to invite their author to this thread.

I'm also not familiar with react-native and facing hermes only for compatibility reasons, so if you think that I'm wrong feel free to fix me.

[liuxingbaoyu]

I don't know about react-native, but the CI failure here is relevant.

[nicolo-ribaudo]

@collinaa I rebased this PR and I'm taking a look at the CI failure. According to compat-table, hermes 0.7 supports all of optional chaining except for a?.(...spread). It's confusing, because as far as I know this was a V8-specific bug. Could you investigate whether it's correct or not?

https://github.com/compat-table/compat-table/blob/1a1ccdc02b8b2158ab39a6146d8a7308f43c830b/data-es2016plus.js#L4951

[nicolo-ribaudo]

@kelset I'm don't know much about the relationship between hermes and react-native either. Do you think it makes sense for us to add data for hermes independently by whether or not we have react-native compat data?

[kelset]

let me loop in some Meta folks: @huntie @robhogan @motiz88 @tmikov @neildhar so that they can talk about this

[robhogan]

it looks like the metro-react-native-babel-preset works as the preset-env of react-native.

This is basically right (in recent versions it's moved to @react-native/babel-preset). Note that preset supports targeting JavaScriptCore as well as Hermes - RN doesn't always run on Hermes, though it's now the default.

The react-native compat table data is meant to show developers what features/syntax they can use in their code before we downlevel it (with Babel) for Hermes/JSC. The transpilation target from Babel's perspective would be Hermes. (This is actually only an intermediate, as we then run it though the Hermes compiler at build time to generate Hermes bytecode - it's HBC that's bundled into RN apps)

Versioning gets a little messy. RN builds Hermes straight from main at RN release cut points, Hermes numbered versions aren't used and are quite out of date.

Hermes main itself is almost frozen while the team works on its successor, "Static Hermes", which will have a very different level of JS support, since the compiler will work best when provided fully type-annotated TS/Flow. It's unlikely Hermes "original" will gain any significant new syntax/feature support.

So, a hermes preset-env target makes sense in theory, but I'm not sure who'd use it given we have @react-native/babel-preset already, and it might be relatively short-lived with Static Hermes coming.

[nicolo-ribaudo]

@colinaaa Given the above points, we are currently deferring this PR to a future release. However, I'd be open to mentioning @react-native/babel-preset in our preset-env docs if you want to send a PR :)