Harden web helper loading and add regression tests

- webUtils.web.ts: load the react-native-web helpers in a single top-level
  try/catch and fall back to the dist/cjs build on any require() failure, so a
  partial load is repaired; collapse the duplicated preprocess require. Kept as
  a plain try/catch (no top-level if / IIFE) so the module stays tree-shakable.
- index.ts: presence test in the _touchableNode branch so a real falsy update
  (0 / '' / false) is applied instead of silently dropped.
- Add web regression tests for _updatePropsJS (no throw on a prop-less ref,
  #9854) and web helper loading plus the dist/cjs fallback specifiers (#9844).

Author: MatiPl01

packages/react-native-reanimated/src/ReanimatedModule/js-reanimated/__tests__/index.web.test.tsx

@@ -0,0 +1,48 @@
+'use strict';
+
+import { _updatePropsJS } from '../index';
+import * as webUtils from '../webUtils';
+
+describe('web style helpers (#9844)', () => {
+  test('react-native-web style helpers are loaded on web', () => {
+    expect(typeof webUtils.createReactDOMStyle).toBe('function');
+    expect(typeof webUtils.createTransformValue).toBe('function');
+    expect(typeof webUtils.createTextShadowValue).toBe('function');
+  });
+
+  test('the dist/cjs import() fallback specifiers resolve', () => {
+    const fallbackSpecifiers = [
+      'react-native-web/dist/cjs/exports/StyleSheet/compiler/createReactDOMStyle.js',
+      'react-native-web/dist/cjs/exports/StyleSheet/preprocess.js',
+    ];
+    for (const specifier of fallbackSpecifiers) {
+      expect(() => require.resolve(specifier)).not.toThrow();
+    }
+  });
+});
+
+describe('_updatePropsJS (#9854)', () => {
+  test('does not throw on a ref without setNativeProps, style or props', () => {
+    // Shape of a react-native-gifted-chat useAnimatedKeyboard ref on web.
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    expect(() => _updatePropsJS({ opacity: 1 }, {} as any)).not.toThrow();
+  });
+
+  test('applies animated styles to a DOM element', () => {
+    const element = document.createElement('div');
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    _updatePropsJS({ opacity: 0.5 } as any, element as any);
+    expect(element.style.opacity).toBe('0.5');
+  });
+
+  test('applies a falsy update (0) via _touchableNode instead of dropping it', () => {
+    const setAttribute = jest.fn();
+    const component = {
+      props: { opacity: 1 },
+      _touchableNode: { setAttribute },
+    };
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    _updatePropsJS({ opacity: 0 } as any, component as any);
+    expect(setAttribute).toHaveBeenCalledWith('opacity', 0);
+  });
+});

packages/react-native-reanimated/src/ReanimatedModule/js-reanimated/index.ts

@@ -69,7 +69,9 @@ export const _updatePropsJS = (
       updatePropsDOM(component, rawStyles, isAnimatedProps);
     } else if (component.props && Object.keys(component.props).length > 0) {
       Object.keys(component.props).forEach((key) => {
-        if (!rawStyles[key]) {
+        // Presence test, not truthiness - a real update of 0 / '' / false is
+        // still an update and must be applied.
+        if (!(key in rawStyles)) {
           return;
         }
         const dashedKey = key.replace(/[A-Z]/g, (m) => '-' + m.toLowerCase());

packages/react-native-reanimated/src/ReanimatedModule/js-reanimated/webUtils.web.ts

@@ -10,54 +10,40 @@ export let createTransformValue: (transform: any) => any;
 export let createTextShadowValue: (style: any) => void | string;
 
 // react-native-web exposes these style helpers only via internal modules. Metro
-// has require() so we load them synchronously (unchanged); strict-ESM bundlers
-// and SSR don't, which left them undefined and crashed _updatePropsJS (#9844), so
-// there we import() the dist/cjs build instead (dist/exports' extensionless
-// imports fail Node's ESM resolver). If neither resolves, the helpers stay
-// undefined and the DOM branch is skipped, as on native.
-
-let loadedSynchronously = false;
-
-if (typeof require === 'function') {
-  try {
-    createReactDOMStyle =
-      // eslint-disable-next-line @typescript-eslint/no-var-requires, @typescript-eslint/no-require-imports, n/no-unpublished-require
-      require('react-native-web/dist/exports/StyleSheet/compiler/createReactDOMStyle').default;
-    loadedSynchronously = createReactDOMStyle !== undefined;
-    // eslint-disable-next-line no-empty
-  } catch (_e) {}
-
-  try {
-    // React Native Web 0.19+
-    createTransformValue =
-      // eslint-disable-next-line @typescript-eslint/no-var-requires, @typescript-eslint/no-require-imports, n/no-unpublished-require
-      require('react-native-web/dist/exports/StyleSheet/preprocess').createTransformValue;
-    // eslint-disable-next-line no-empty
-  } catch (_e) {}
-
-  try {
-    createTextShadowValue =
-      // eslint-disable-next-line @typescript-eslint/no-var-requires, @typescript-eslint/no-require-imports, n/no-unpublished-require
-      require('react-native-web/dist/exports/StyleSheet/preprocess').createTextShadowValue;
-    // eslint-disable-next-line no-empty
-  } catch (_e) {}
-}
-
-if (!loadedSynchronously) {
-  // The cjs export may arrive as `.default` (bundler/Node interop) or as the
-  // namespace itself; handle both.
-  // eslint-disable-next-line @typescript-eslint/no-explicit-any
-  const interopDefault = (moduleExports: any) =>
-    moduleExports?.default ?? moduleExports;
-
+// has require() so we load them synchronously; strict-ESM bundlers and SSR don't,
+// so require() throws and we fall back to import()ing the dist/cjs build
+// (dist/exports' extensionless imports fail Node's ESM resolver). If neither
+// resolves, the helpers stay undefined and the DOM branch is skipped, as on native.
+//
+// Kept as a single top-level try/catch (no top-level `if` or IIFE) so the module
+// stays tree-shakable - see the is-tree-shakable check.
+try {
+  createReactDOMStyle =
+    // eslint-disable-next-line @typescript-eslint/no-var-requires, @typescript-eslint/no-require-imports, n/no-unpublished-require
+    require('react-native-web/dist/exports/StyleSheet/compiler/createReactDOMStyle').default;
+  // React Native Web 0.19+
+  const preprocess =
+    // eslint-disable-next-line @typescript-eslint/no-var-requires, @typescript-eslint/no-require-imports, n/no-unpublished-require
+    require('react-native-web/dist/exports/StyleSheet/preprocess');
+  createTransformValue = preprocess.createTransformValue;
+  createTextShadowValue = preprocess.createTextShadowValue;
+} catch (_e) {
+  // No require() (strict ESM / SSR), or a helper module was missing: load the
+  // helpers from the dist/cjs build instead.
   void (async () => {
+    // The cjs export may arrive as `.default` (bundler/Node interop) or as the
+    // namespace itself; handle both.
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    const interopDefault = (moduleExports: any) =>
+      moduleExports?.default ?? moduleExports;
+
     try {
       const styleModule = await import(
         // eslint-disable-next-line n/no-unpublished-import
         'react-native-web/dist/cjs/exports/StyleSheet/compiler/createReactDOMStyle.js'
       );
       createReactDOMStyle = interopDefault(styleModule);
-    } catch (_e) {
+    } catch (_e2) {
       // Unresolved: the DOM update branch stays disabled, as on native.
     }
 
@@ -70,7 +56,7 @@ if (!loadedSynchronously) {
       const preprocess = interopDefault(preprocessModule);
       createTransformValue = preprocess.createTransformValue;
       createTextShadowValue = preprocess.createTextShadowValue;
-    } catch (_e) {
+    } catch (_e2) {
       // Optional: leaving them undefined just skips transform/textShadow.
     }
   })();