From d6460ccbf24c99da3f12577b8267e6e88a5cb12c Mon Sep 17 00:00:00 2001
From: Youssef Henna <58384527+YoussefHenna@users.noreply.github.com>
Date: Sun, 11 Feb 2024 11:38:17 +0200
Subject: [PATCH] Fix `@babel/runtime` issues (#836)

* Add `@babel/runtime` as dependancy

* Revert "Add `@babel/runtime` as dependancy"

This reverts commit 693d8c5b6410dacafd41c7c4e1825424b217edfd.

* `disableImportExportTransform` in babel config

* Fix to tests

* Change how reanimated is polyfilled
---
 packages/core/babel.config.js                 | 28 +++++++++++++++----
 packages/maps/babel.config.js                 | 20 +++++++++++--
 packages/native/babel.config.js               | 20 +++++++++++--
 packages/types/babel.config.js                | 20 +++++++++++--
 packages/ui/babel.config.js                   | 28 +++++++++++++++----
 packages/ui/package.json                      |  2 +-
 .../polyfillReanimatedWorkletInitForSnack.ts  | 25 -----------------
 packages/ui/src/index.tsx                     |  1 +
 .../ui/src/polyfillReanimatedWorkletInit.ts   | 16 +++++++++++
 9 files changed, 116 insertions(+), 44 deletions(-)
 delete mode 100644 packages/ui/scripts/polyfillReanimatedWorkletInitForSnack.ts
 create mode 100644 packages/ui/src/polyfillReanimatedWorkletInit.ts

diff --git a/packages/core/babel.config.js b/packages/core/babel.config.js
index e4827590a..8c8491c19 100644
--- a/packages/core/babel.config.js
+++ b/packages/core/babel.config.js
@@ -1,7 +1,23 @@
-module.exports = {
-  presets: ["module:metro-react-native-babel-preset"],
-  plugins: [
-    "@babel/plugin-proposal-export-namespace-from",
-    "react-native-reanimated/plugin",
-  ],
+module.exports = (api) => {
+  const isTest = api.env("test");
+
+  return {
+    presets: [
+      [
+        "module:metro-react-native-babel-preset",
+        {
+          /**
+           * Addresses issue caused on snack that leads to `Unable to resolve module 'app/node_modules/@babel/runtime/helpers/interopRequireDefault.js'`
+           * See: https://github.com/expo/snack/pull/302
+           * Always false for tests for jest to work
+           */
+          disableImportExportTransform: !isTest,
+        },
+      ],
+    ],
+    plugins: [
+      "@babel/plugin-proposal-export-namespace-from",
+      "react-native-reanimated/plugin",
+    ],
+  };
 };
diff --git a/packages/maps/babel.config.js b/packages/maps/babel.config.js
index 5ae49c32b..665868c1e 100644
--- a/packages/maps/babel.config.js
+++ b/packages/maps/babel.config.js
@@ -1,3 +1,19 @@
-module.exports = {
-  presets: ["module:metro-react-native-babel-preset"],
+module.exports = (api) => {
+  const isTest = api.env("test");
+
+  return {
+    presets: [
+      [
+        "module:metro-react-native-babel-preset",
+        {
+          /**
+           * Addresses issue caused on snack that leads to `Unable to resolve module 'app/node_modules/@babel/runtime/helpers/interopRequireDefault.js'`
+           * See: https://github.com/expo/snack/pull/302
+           * Always false for tests for jest to work
+           */
+          disableImportExportTransform: !isTest,
+        },
+      ],
+    ],
+  };
 };
diff --git a/packages/native/babel.config.js b/packages/native/babel.config.js
index 5ae49c32b..665868c1e 100644
--- a/packages/native/babel.config.js
+++ b/packages/native/babel.config.js
@@ -1,3 +1,19 @@
-module.exports = {
-  presets: ["module:metro-react-native-babel-preset"],
+module.exports = (api) => {
+  const isTest = api.env("test");
+
+  return {
+    presets: [
+      [
+        "module:metro-react-native-babel-preset",
+        {
+          /**
+           * Addresses issue caused on snack that leads to `Unable to resolve module 'app/node_modules/@babel/runtime/helpers/interopRequireDefault.js'`
+           * See: https://github.com/expo/snack/pull/302
+           * Always false for tests for jest to work
+           */
+          disableImportExportTransform: !isTest,
+        },
+      ],
+    ],
+  };
 };
diff --git a/packages/types/babel.config.js b/packages/types/babel.config.js
index 5ae49c32b..665868c1e 100644
--- a/packages/types/babel.config.js
+++ b/packages/types/babel.config.js
@@ -1,3 +1,19 @@
-module.exports = {
-  presets: ["module:metro-react-native-babel-preset"],
+module.exports = (api) => {
+  const isTest = api.env("test");
+
+  return {
+    presets: [
+      [
+        "module:metro-react-native-babel-preset",
+        {
+          /**
+           * Addresses issue caused on snack that leads to `Unable to resolve module 'app/node_modules/@babel/runtime/helpers/interopRequireDefault.js'`
+           * See: https://github.com/expo/snack/pull/302
+           * Always false for tests for jest to work
+           */
+          disableImportExportTransform: !isTest,
+        },
+      ],
+    ],
+  };
 };
diff --git a/packages/ui/babel.config.js b/packages/ui/babel.config.js
index e4827590a..8c8491c19 100644
--- a/packages/ui/babel.config.js
+++ b/packages/ui/babel.config.js
@@ -1,7 +1,23 @@
-module.exports = {
-  presets: ["module:metro-react-native-babel-preset"],
-  plugins: [
-    "@babel/plugin-proposal-export-namespace-from",
-    "react-native-reanimated/plugin",
-  ],
+module.exports = (api) => {
+  const isTest = api.env("test");
+
+  return {
+    presets: [
+      [
+        "module:metro-react-native-babel-preset",
+        {
+          /**
+           * Addresses issue caused on snack that leads to `Unable to resolve module 'app/node_modules/@babel/runtime/helpers/interopRequireDefault.js'`
+           * See: https://github.com/expo/snack/pull/302
+           * Always false for tests for jest to work
+           */
+          disableImportExportTransform: !isTest,
+        },
+      ],
+    ],
+    plugins: [
+      "@babel/plugin-proposal-export-namespace-from",
+      "react-native-reanimated/plugin",
+    ],
+  };
 };
diff --git a/packages/ui/package.json b/packages/ui/package.json
index 138c34767..de9cf510d 100644
--- a/packages/ui/package.json
+++ b/packages/ui/package.json
@@ -18,7 +18,7 @@
   "scripts": {
     "clean": "rimraf lib",
     "clean:modules": "rimraf node_modules",
-    "build:commonjs": "../../node_modules/.bin/babel src --out-dir lib/commonjs --extensions .tsx,.ts,.js,.jsx && ts-node scripts/polyfillReanimatedWorkletInitForSnack.ts",
+    "build:commonjs": "../../node_modules/.bin/babel src --out-dir lib/commonjs --extensions .tsx,.ts,.js,.jsx",
     "build": "yarn clean && yarn build:commonjs  && yarn tsc",
     "test": "jest",
     "test:coverage": "jest --coverage"
diff --git a/packages/ui/scripts/polyfillReanimatedWorkletInitForSnack.ts b/packages/ui/scripts/polyfillReanimatedWorkletInitForSnack.ts
deleted file mode 100644
index 5937e2694..000000000
--- a/packages/ui/scripts/polyfillReanimatedWorkletInitForSnack.ts
+++ /dev/null
@@ -1,25 +0,0 @@
-import fs from "fs/promises";
-
-/**
- * When the @draftbit/ui is used with snack, we run into the error: 'r.g.__reanimatedWorkletInit is not a function'
- * The solution is to add a polyfill for the global.__reanimatedWorkletInit function
- * https://forums.expo.dev/t/react-native-reanimated-error-r-g-reanimatedworkletinit-is-not-a-function/68222/3
- *
- * This polyfill needs to be done at the first point of execution, placing at the top of index.tsx does not guarantee that
- * since the babel build reorders the code around which results in it not being the top most call.
- *
- * This script modifies the built code to add the polyfill at the start
- */
-
-const INDEX_FILE = "./lib/commonjs/index.js";
-
-async function polyfillReanimatedWorkletInitForSnack() {
-  const indexFileContents = await fs.readFile(INDEX_FILE, "utf-8");
-  const newContents =
-    "if(!global.__reanimatedWorkletInit){global.__reanimatedWorkletInit=function(){};}" +
-    indexFileContents;
-
-  await fs.writeFile(INDEX_FILE, newContents);
-}
-
-polyfillReanimatedWorkletInitForSnack();
diff --git a/packages/ui/src/index.tsx b/packages/ui/src/index.tsx
index c976385f9..f1dcd618d 100644
--- a/packages/ui/src/index.tsx
+++ b/packages/ui/src/index.tsx
@@ -1,3 +1,4 @@
+import "./polyfillReanimatedWorkletInit";
 import { Icon } from "@draftbit/native";
 export { Icon, LinearGradient, WebView } from "@draftbit/native";
 
diff --git a/packages/ui/src/polyfillReanimatedWorkletInit.ts b/packages/ui/src/polyfillReanimatedWorkletInit.ts
new file mode 100644
index 000000000..662fd79e6
--- /dev/null
+++ b/packages/ui/src/polyfillReanimatedWorkletInit.ts
@@ -0,0 +1,16 @@
+/**
+ * When the @draftbit/ui is used with snack, we run into the error: 'r.g.__reanimatedWorkletInit is not a function'
+ * The solution is to add a polyfill for the global.__reanimatedWorkletInit function
+ * https://forums.expo.dev/t/react-native-reanimated-error-r-g-reanimatedworkletinit-is-not-a-function/68222/3
+ *
+ * This polyfill needs to be done at the first point of execution, placing at the top of index.tsx does not guarantee that
+ * since the build reorders the code around (such as hoisting imports/exports) which results in it not being the top most call. Having it as an import of
+ * a seperate file guarantees it's the first import
+ *
+ */
+
+//@ts-ignore
+if (!global.__reanimatedWorkletInit) {
+  //@ts-ignore
+  global.__reanimatedWorkletInit = function () {};
+}