fix: add babel plugins to support Hermes (#617)

Author: tido64

packages/haul-babel-preset-react-native/package.json

@@ -26,14 +26,17 @@
     "@babel/plugin-syntax-dynamic-import": "^7.2.0",
     "@babel/plugin-syntax-export-default-from": "^7.2.0",
     "@babel/plugin-transform-async-to-generator": "^7.4.4",
+    "@babel/plugin-transform-classes": "^7.0.0",
     "@babel/plugin-transform-exponentiation-operator": "^7.2.0",
     "@babel/plugin-transform-flow-strip-types": "^7.4.4",
     "@babel/plugin-transform-literals": "^7.2.0",
     "@babel/plugin-transform-modules-commonjs": "^7.4.4",
     "@babel/plugin-transform-react-display-name": "^7.2.0",
     "@babel/plugin-transform-react-jsx": "^7.3.0",
     "@babel/plugin-transform-react-jsx-source": "^7.2.0",
+    "@babel/plugin-transform-shorthand-properties": "^7.0.0",
     "@babel/plugin-transform-sticky-regex": "^7.2.0",
+    "@babel/plugin-transform-template-literals": "^7.0.0",
     "@babel/plugin-transform-typescript": "^7.4.4",
     "@babel/plugin-transform-unicode-regex": "^7.4.4",
     "@babel/template": "^7.4.4",

packages/haul-babel-preset-react-native/src/index.ts

@@ -1,5 +1,5 @@
 const defaultPlugins = [
-  [require('@babel/plugin-proposal-class-properties')],
+  [require('@babel/plugin-proposal-class-properties'), { loose: true }],
   [require('@babel/plugin-proposal-optional-catch-binding')],
   [require('@babel/plugin-syntax-dynamic-import')],
   [require('@babel/plugin-syntax-export-default-from')],
@@ -13,6 +13,13 @@ const defaultPlugins = [
   [require('@babel/plugin-transform-async-to-generator')],
 ];
 
+// Additional plugins for Hermes because it doesn't support ES6 yet
+const hermesPlugins = [
+  [require('@babel/plugin-transform-classes')],
+  [require('@babel/plugin-transform-shorthand-properties')],
+  [require('@babel/plugin-transform-template-literals'), { loose: true }],
+];
+
 function isTypeScriptSource(fileName: string) {
   return !!fileName && fileName.endsWith('.ts');
 }
@@ -21,7 +28,7 @@ function isTSXSource(fileName: string) {
   return !!fileName && fileName.endsWith('.tsx');
 }
 
-export default function getHaulBabelPreset() {
+export default function getHaulBabelPreset(options: { hermes: boolean }) {
   return {
     compact: false,
     overrides: [
@@ -30,16 +37,18 @@ export default function getHaulBabelPreset() {
         plugins: [require('@babel/plugin-transform-flow-strip-types')],
       },
       {
-        plugins: defaultPlugins.concat(
-          process.env.HAUL_PLATFORM
+        plugins: [
+          ...defaultPlugins,
+          ...(options.hermes ? hermesPlugins : []),
+          ...(process.env.HAUL_PLATFORM
             ? [
                 [
                   require('./transforms/stripDeadPlatformSelect'),
                   { platform: process.env.HAUL_PLATFORM },
                 ],
               ]
-            : []
-        ),
+            : []),
+        ],
       },
       {
         test: /node_modules\/react-native/,