fix: web exports on prepare file (#2430)

# Summary

Fixes
#2401

Fixes error in `prepare.ts` file that imports `hasTouchableProperty`
from a '.' file.

It's probably related to the way ESM works, I'm not sure. I base it on
[PR](#2312)

```
(0 , _.hasTouchableProperty) is not a function 
TypeError: (0 , _.hasTouchableProperty) is not a function 
at prepare
```

<img width="860" alt="image"
src="https://github.com/user-attachments/assets/43f91d13-115c-4daf-9269-92ae49b44972">

## Test Plan

Should work without error on web


https://github.com/user-attachments/assets/4f7143bf-06f8-4684-844c-d5a147837adb

## Compatibility

| OS      | Implemented |
| ------- | :---------: |
| Web     |    ✅     |

## Checklist

- [X] I have tested this on a web project

---------

Co-authored-by: Jakub Grzywacz <[email protected]>

Author: migueldaipre

src/web/WebShape.ts

@@ -8,7 +8,8 @@ import {
 import { BaseProps } from './types';
 import { prepare } from './utils/prepare';
 import { convertInt32ColorToRGBA } from './utils/convertInt32Color';
-import { camelCaseToDashed, hasTouchableProperty, remeasure } from './utils';
+import { camelCaseToDashed, remeasure } from './utils';
+import { hasTouchableProperty } from './utils/hasProperty';
 import SvgTouchableMixin from '../lib/SvgTouchableMixin';
 
 export class WebShape<

src/web/utils/hasProperty.ts

@@ -0,0 +1,10 @@
+import type { BaseProps } from '../types';
+
+export function hasTouchableProperty(props: BaseProps): boolean {
+  return !!(
+    props.onPress ||
+    props.onPressIn ||
+    props.onPressOut ||
+    props.onLongPress
+  );
+}

src/web/utils/index.ts

@@ -1,75 +1,7 @@
-import { BaseProps } from '../types';
-import type { TransformProps } from '../../lib/extract/types';
-import {
-  transformsArrayToProps,
-  TransformsStyleArray,
-} from '../../lib/extract/extractTransform';
-
-export const hasTouchableProperty = (props: BaseProps) =>
-  props.onPress || props.onPressIn || props.onPressOut || props.onLongPress;
-
 export const camelCaseToDashed = (camelCase: string) => {
   return camelCase.replace(/[A-Z]/g, (m) => '-' + m.toLowerCase());
 };
 
-function stringifyTransformProps(transformProps: TransformProps) {
-  const transformArray = [];
-  if (transformProps.translate != null) {
-    transformArray.push(`translate(${transformProps.translate})`);
-  }
-  if (transformProps.translateX != null || transformProps.translateY != null) {
-    transformArray.push(
-      `translate(${transformProps.translateX || 0}, ${
-        transformProps.translateY || 0
-      })`
-    );
-  }
-  if (transformProps.scale != null) {
-    transformArray.push(`scale(${transformProps.scale})`);
-  }
-  if (transformProps.scaleX != null || transformProps.scaleY != null) {
-    transformArray.push(
-      `scale(${transformProps.scaleX || 1}, ${transformProps.scaleY || 1})`
-    );
-  }
-  // rotation maps to rotate, not to collide with the text rotate attribute (which acts per glyph rather than block)
-  if (transformProps.rotation != null) {
-    transformArray.push(`rotate(${transformProps.rotation})`);
-  }
-  if (transformProps.skewX != null) {
-    transformArray.push(`skewX(${transformProps.skewX})`);
-  }
-  if (transformProps.skewY != null) {
-    transformArray.push(`skewY(${transformProps.skewY})`);
-  }
-  return transformArray;
-}
-
-export function parseTransformProp(
-  transform: TransformProps['transform'],
-  props?: BaseProps
-) {
-  const transformArray: string[] = [];
-
-  props && transformArray.push(...stringifyTransformProps(props));
-
-  if (Array.isArray(transform)) {
-    if (typeof transform[0] === 'number') {
-      transformArray.push(`matrix(${transform.join(' ')})`);
-    } else {
-      const stringifiedProps = transformsArrayToProps(
-        // @ts-expect-error FIXME
-        transform as TransformsStyleArray
-      );
-      transformArray.push(...stringifyTransformProps(stringifiedProps));
-    }
-  } else if (typeof transform === 'string') {
-    transformArray.push(transform);
-  }
-
-  return transformArray.length ? transformArray.join(' ') : undefined;
-}
-
 export const getBoundingClientRect = (node: SVGElement) => {
   if (node) {
     const isElement = node.nodeType === 1; /* Node.ELEMENT_NODE */

src/web/utils/parseTransform.ts

@@ -0,0 +1,64 @@
+import type { TransformProps } from '../../lib/extract/types';
+import {
+  transformsArrayToProps,
+  TransformsStyleArray,
+} from '../../lib/extract/extractTransform';
+import type { BaseProps } from '../types';
+
+export function parseTransformProp(
+  transform: TransformProps['transform'],
+  props?: BaseProps
+) {
+  const transformArray: string[] = [];
+
+  props && transformArray.push(...stringifyTransformProps(props));
+
+  if (Array.isArray(transform)) {
+    if (typeof transform[0] === 'number') {
+      transformArray.push(`matrix(${transform.join(' ')})`);
+    } else {
+      const stringifiedProps = transformsArrayToProps(
+        // @ts-expect-error FIXME
+        transform as TransformsStyleArray
+      );
+      transformArray.push(...stringifyTransformProps(stringifiedProps));
+    }
+  } else if (typeof transform === 'string') {
+    transformArray.push(transform);
+  }
+
+  return transformArray.length ? transformArray.join(' ') : undefined;
+}
+
+export function stringifyTransformProps(transformProps: TransformProps) {
+  const transformArray = [];
+  if (transformProps.translate != null) {
+    transformArray.push(`translate(${transformProps.translate})`);
+  }
+  if (transformProps.translateX != null || transformProps.translateY != null) {
+    transformArray.push(
+      `translate(${transformProps.translateX || 0}, ${
+        transformProps.translateY || 0
+      })`
+    );
+  }
+  if (transformProps.scale != null) {
+    transformArray.push(`scale(${transformProps.scale})`);
+  }
+  if (transformProps.scaleX != null || transformProps.scaleY != null) {
+    transformArray.push(
+      `scale(${transformProps.scaleX || 1}, ${transformProps.scaleY || 1})`
+    );
+  }
+  // rotation maps to rotate, not to collide with the text rotate attribute (which acts per glyph rather than block)
+  if (transformProps.rotation != null) {
+    transformArray.push(`rotate(${transformProps.rotation})`);
+  }
+  if (transformProps.skewX != null) {
+    transformArray.push(`skewX(${transformProps.skewX})`);
+  }
+  if (transformProps.skewY != null) {
+    transformArray.push(`skewY(${transformProps.skewY})`);
+  }
+  return transformArray;
+}

src/web/utils/prepare.ts

@@ -4,7 +4,8 @@ import {
 } from 'react-native';
 import { BaseProps } from '../types';
 import { WebShape } from '../WebShape';
-import { hasTouchableProperty, parseTransformProp } from '.';
+import { hasTouchableProperty } from './hasProperty';
+import { parseTransformProp } from './parseTransform';
 import { resolve } from '../../lib/resolve';
 import { NumberProp } from '../../lib/extract/types';
 import { resolveAssetUri } from '../../lib/resolveAssetUri';