From c9152222e67686f52f7b9e9318a30c6eaa413c7e Mon Sep 17 00:00:00 2001
From: Tomek Zawadzki <tomekzawadzki98@gmail.com>
Date: Tue, 18 Jun 2024 07:30:12 +0200
Subject: [PATCH] Fix tree shaking in JSReanimated

---
 .../src/js-reanimated/index.ts                | 34 +++----------------
 .../src/js-reanimated/webUtils.ts             |  8 +++++
 .../src/js-reanimated/webUtils.web.ts         | 27 +++++++++++++++
 3 files changed, 40 insertions(+), 29 deletions(-)
 create mode 100644 packages/react-native-reanimated/src/js-reanimated/webUtils.ts
 create mode 100644 packages/react-native-reanimated/src/js-reanimated/webUtils.web.ts

diff --git a/packages/react-native-reanimated/src/js-reanimated/index.ts b/packages/react-native-reanimated/src/js-reanimated/index.ts
index 82ffb2d484a..e750c25736a 100644
--- a/packages/react-native-reanimated/src/js-reanimated/index.ts
+++ b/packages/react-native-reanimated/src/js-reanimated/index.ts
@@ -2,37 +2,13 @@
 import JSReanimated from './JSReanimated';
 import type { StyleProps } from '../commonTypes';
 import type { AnimatedStyle } from '../helperTypes';
-import { isWeb } from '../PlatformChecker';
+import {
+  createReactDOMStyle,
+  createTransformValue,
+  createTextShadowValue,
+} from './webUtils';
 import { PropsAllowlists } from '../propsAllowlists';
 
-// eslint-disable-next-line @typescript-eslint/no-explicit-any
-let createReactDOMStyle: (style: any) => any;
-// eslint-disable-next-line @typescript-eslint/no-explicit-any
-let createTransformValue: (transform: any) => any;
-// eslint-disable-next-line @typescript-eslint/no-explicit-any
-let createTextShadowValue: (style: any) => void | string;
-
-if (isWeb()) {
-  try {
-    createReactDOMStyle =
-      // eslint-disable-next-line @typescript-eslint/no-var-requires
-      require('react-native-web/dist/exports/StyleSheet/compiler/createReactDOMStyle').default;
-  } catch (e) {}
-
-  try {
-    // React Native Web 0.19+
-    createTransformValue =
-      // eslint-disable-next-line @typescript-eslint/no-var-requires
-      require('react-native-web/dist/exports/StyleSheet/preprocess').createTransformValue;
-  } catch (e) {}
-
-  try {
-    createTextShadowValue =
-      // eslint-disable-next-line @typescript-eslint/no-var-requires
-      require('react-native-web/dist/exports/StyleSheet/preprocess').createTextShadowValue;
-  } catch (e) {}
-}
-
 const reanimatedJS = new JSReanimated();
 
 global._makeShareableClone = () => {
diff --git a/packages/react-native-reanimated/src/js-reanimated/webUtils.ts b/packages/react-native-reanimated/src/js-reanimated/webUtils.ts
new file mode 100644
index 00000000000..d568831159c
--- /dev/null
+++ b/packages/react-native-reanimated/src/js-reanimated/webUtils.ts
@@ -0,0 +1,8 @@
+'use strict';
+
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+export let createReactDOMStyle: (style: any) => any;
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+export let createTransformValue: (transform: any) => any;
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+export let createTextShadowValue: (style: any) => void | string;
diff --git a/packages/react-native-reanimated/src/js-reanimated/webUtils.web.ts b/packages/react-native-reanimated/src/js-reanimated/webUtils.web.ts
new file mode 100644
index 00000000000..957dd6b0eb6
--- /dev/null
+++ b/packages/react-native-reanimated/src/js-reanimated/webUtils.web.ts
@@ -0,0 +1,27 @@
+'use strict';
+
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+export let createReactDOMStyle: (style: any) => any;
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+export let createTransformValue: (transform: any) => any;
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+export let createTextShadowValue: (style: any) => void | string;
+
+try {
+  createReactDOMStyle =
+    // eslint-disable-next-line @typescript-eslint/no-var-requires
+    require('react-native-web/dist/exports/StyleSheet/compiler/createReactDOMStyle').default;
+} catch (e) {}
+
+try {
+  // React Native Web 0.19+
+  createTransformValue =
+    // eslint-disable-next-line @typescript-eslint/no-var-requires
+    require('react-native-web/dist/exports/StyleSheet/preprocess').createTransformValue;
+} catch (e) {}
+
+try {
+  createTextShadowValue =
+    // eslint-disable-next-line @typescript-eslint/no-var-requires
+    require('react-native-web/dist/exports/StyleSheet/preprocess').createTextShadowValue;
+} catch (e) {}