Add web support without a Babel/SWC Plugin (software-mansion#3997)

nandorojo · web-flow · commit ddd2fbb98227 · 2023-02-02T22:25:19.000+01:00
## Description This PR adds support for using Reanimated without a plugin on Web. ### Before 😢 Without a Babel plugin (or SWC on Next.js), animations do nothing. https://user-images.githubusercontent.com/13172299/214991524-0819fb9d-d72f-4a2c-b067-3adff7818a50.mp4 ### After ✅ Everything now works flawlessly and reactively on Web, including `useAnimatedStyle`, `useDerivedValue`, and `useAnimatedReaction`. https://user-images.githubusercontent.com/13172299/214991572-c3a355c2-1a54-43d2-965b-916463b0e281.mp4 The only requirement to make this work is explicitly using dependency arrays. ## Changes In places where the `._closure` is undefined, we set the `inputs` to equal the `dependencies` (so long as they have been explicitly set). This makes Reanimated work on Web, even if there is no Babel/SWC plugin set. Lastly, I added a simple check in `Mapper` to make sure we aren't trying to get object keys of DOM elements. ## Test code and steps to reproduce Let me know the best way to do this. I tested the code in a separate repo outside of this one, and it works well on Web. Native won't be affected, since all changes are behind a `shouldBeUseWeb()` flag.
diff --git a/WebExample/App.tsx b/WebExample/App.tsx
@@ -8,9 +8,8 @@ import {
   GestureDetector,
   enableExperimentalWebImplementation,
 } from 'react-native-gesture-handler';
-import { StyleSheet, View } from 'react-native';
-
-import { StatusBar } from 'expo-status-bar';
+import { StyleSheet, View, Text } from 'react-native';
+import { WithoutBabelTest } from './WithoutBabel';
 
 enableExperimentalWebImplementation(true);
 
@@ -53,10 +52,12 @@ export default function App() {
 
   return (
     <View style={styles.container}>
-      <StatusBar style="auto" />
       <GestureDetector gesture={gesture}>
-        <Animated.View style={[styles.ball, animatedStyle]} />
+        <Animated.View style={[styles.ball, animatedStyle]}>
+          <Text style={styles.text}>I need Babel plugin</Text>
+        </Animated.View>
       </GestureDetector>
+      <WithoutBabelTest />
     </View>
   );
 }
@@ -74,5 +75,11 @@ const styles = StyleSheet.create({
     borderRadius: 100,
     backgroundColor: 'blue',
     alignSelf: 'center',
+    justifyContent: 'center',
+    alignItems: 'center',
+  },
+  text: {
+    color: 'white',
+    textAlign: 'center',
   },
 });
diff --git a/WebExample/WithoutBabel.tsx b/WebExample/WithoutBabel.tsx
@@ -0,0 +1,90 @@
+import Animated, {
+  useAnimatedStyle,
+  useSharedValue,
+  withSpring,
+} from 'react-native-reanimated';
+import {
+  Gesture,
+  GestureDetector,
+  enableExperimentalWebImplementation,
+} from 'react-native-gesture-handler';
+import { StyleSheet, Text } from 'react-native';
+import { useEffect, useState } from 'react';
+
+enableExperimentalWebImplementation(true);
+
+export function WithoutBabelTest() {
+  const isPressed = useSharedValue(false);
+  const offset = useSharedValue({ x: 0, y: 0 });
+
+  const [stateObject, rerender] = useState({});
+
+  const stateNumber = Math.random();
+  const stateBoolean = stateNumber >= 0.5;
+
+  console.log('[without-babel][render]');
+
+  useEffect(function updateState() {
+    const interval = setInterval(() => {
+      rerender({});
+    }, 1000);
+    return () => clearInterval(interval);
+  }, []);
+
+  const animatedStyle = useAnimatedStyle(() => {
+    return {
+      transform: [
+        { translateX: offset.value.x },
+        { translateY: offset.value.y },
+        { scale: withSpring(isPressed.value ? 1.2 : 1) },
+      ],
+      backgroundColor: isPressed.value ? 'cyan' : 'hotpink',
+      cursor: isPressed.value ? 'grabbing' : 'grab',
+    };
+  }, [isPressed, offset, stateObject, stateBoolean, stateNumber]);
+
+  const gesture = Gesture.Pan()
+    .manualActivation(true)
+    .onBegin(() => {
+      'worklet';
+      isPressed.value = true;
+    })
+    .onChange((e) => {
+      'worklet';
+      offset.value = {
+        x: e.changeX + offset.value.x,
+        y: e.changeY + offset.value.y,
+      };
+    })
+    .onFinalize(() => {
+      'worklet';
+      isPressed.value = false;
+    })
+    .onTouchesMove((_, state) => {
+      state.activate();
+    });
+
+  return (
+    <GestureDetector gesture={gesture}>
+      <Animated.View style={[styles.ball, animatedStyle]}>
+        <Text style={styles.text}>I work without Babel</Text>
+      </Animated.View>
+    </GestureDetector>
+  );
+}
+
+const styles = StyleSheet.create({
+  ball: {
+    width: 100,
+    height: 100,
+    borderRadius: 100,
+    backgroundColor: 'hotpink',
+    alignSelf: 'center',
+    padding: 8,
+    justifyContent: 'center',
+    alignItems: 'center',
+  },
+  text: {
+    textAlign: 'center',
+  },
+});
diff --git a/WebExample/babel.config.js b/WebExample/babel.config.js
@@ -1,5 +1,10 @@
 module.exports = function (api) {
-  api.cache(true);
+  const disableBabelPlugin = process.env.DISABLE_BABEL_PLUGIN === '1';
+  // https://babeljs.io/docs/en/config-files#apicache
+  api.cache.invalidate(() => disableBabelPlugin);
+  if (disableBabelPlugin) {
+    console.log('Starting Web example without Babel plugin.');
+  }
   return {
     presets: ['babel-preset-expo'],
     plugins: [
@@ -15,7 +20,7 @@ module.exports = function (api) {
         },
       ],
       '@babel/plugin-proposal-export-namespace-from',
-      'react-native-reanimated/plugin',
-    ],
+      !disableBabelPlugin && 'react-native-reanimated/plugin',
+    ].filter(Boolean),
   };
 };
diff --git a/WebExample/package.json b/WebExample/package.json
@@ -6,7 +6,8 @@
     "start": "expo start",
     "android": "expo start --android",
     "ios": "expo start --ios",
-    "web": "expo start --web"
+    "web": "expo start --web",
+    "web:plugin": "DISABLE_BABEL_PLUGIN=1 expo start --web"
   },
   "dependencies": {
     "@expo/webpack-config": "^0.17.2",
diff --git a/WebExample/tsconfig.json b/WebExample/tsconfig.json
@@ -1,6 +1,10 @@
 {
   "extends": "expo/tsconfig.base",
   "compilerOptions": {
-    "strict": true
+    "strict": true,
+    "rootDir": "..",
+    "paths": {
+      "react-native-reanimated": ["./src"]
+    }
   }
 }
diff --git a/docs/docs/fundamentals/web-support.md b/docs/docs/fundamentals/web-support.md
@@ -86,3 +86,84 @@ module.exports = {
   },
 };
 ```
+
+## Web without a Babel plugin
+
+As of Reanimated `2.15`, the Babel plugin (`react-native-reanimated/plugin`) is optional on Web, with some additional configuration.
+
+Reanimated hooks all accept optional dependency arrays. Under the hood, the Reanimated Babel plugin inserts these for you.
+
+In order to use Reanimated without a Babel/SWC plugin, you need to explicitly pass the dependency array whenever you use a Reanimated hook.
+
+Passing a dependency array is valid on both Web and native. Adding them will not negatively impact iOS or Android.
+
+Make sure the following hooks have a dependency array as the last argument:
+
+- `useDerivedValue`
+- `useAnimatedStyle`
+- `useAnimatedProps`
+- `useAnimatedReaction`
+
+For example:
+
+```ts
+const sv = useSharedValue(0);
+const dv = useDerivedValue(
+  () => sv.value + 1, 
+  [sv] // dependency array here
+);
+```
+
+Be sure to pass the dependency itself (`sv`) and not `sv.value` to the dependency array.
+
+> Babel users will still need to install the `@babel/plugin-proposal-class-properties` plugin.
+
+
+### ESLint Support
+
+When you use hooks from React, they give you nice suggestions from ESLint to include all dependencies. In order to add this support to Reanimated hooks, add the following to your ESLint config:
+
+```json
+{
+  "rules": {
+    "react-hooks/exhaustive-deps": [
+      "error",
+      {
+        "additionalHooks": "(useAnimatedStyle|useDerivedValue|useAnimatedProps)"
+      }
+    ]
+  }
+}
+```
+
+This assumes you've already installed the `react-hooks` eslint [plugin](https://www.npmjs.com/package/eslint-plugin-react-hooks).
+
+If you're using ESLint autofix, the ESLint plugin may add `.value` to the dependency arrays, rather than the root dependency. In these cases, you should update the array yourself.
+
+```tsx
+const sv = useSharedValue(0)
+
+// 🚨 bad, sv.value is in the array
+const dv = useDerivedValue(() => sv.value, [sv.value]);
+
+// ✅ good, sv is in the array
+const dv = useDerivedValue(() => sv.value, [sv]);
+```
+
+## Solito / Next.js Compatibility
+
+There is an experimental SWC plugin in the works. However, given that this may not work properly, you can use the ["Web without a Babel plugin"](#web-without-a-babel-plugin) instructions above.
+
+### Next.js Polyfill
+
+In order to use Reanimated with Next.js / Solito, you'll need to add the `raf` polyfill for `requestAnimationFrame` to not throw on the server:
+
+```sh
+yarn add raf
+```
+
+Add the following to the top of your `_app.tsx`:
+
+```ts
+import 'raf/polyfill'
+```
diff --git a/src/reanimated2/hook/useAnimatedReaction.ts b/src/reanimated2/hook/useAnimatedReaction.ts
@@ -3,6 +3,7 @@ import { BasicWorkletFunction, WorkletFunction } from '../commonTypes';
 import { startMapper, stopMapper } from '../core';
 import { DependencyList } from './commonTypes';
 import { useSharedValue } from './useSharedValue';
+import { shouldBeUseWeb } from '../PlatformChecker';
 
 export interface AnimatedReactionWorkletFunction<T> extends WorkletFunction {
   (prepared: T, previous: T | null): void;
@@ -19,6 +20,16 @@ export function useAnimatedReaction<T>(
   dependencies: DependencyList
 ): void {
   const previous = useSharedValue<T | null>(null);
+
+  let inputs = Object.values(prepare._closure ?? {});
+
+  if (shouldBeUseWeb()) {
+    if (!inputs.length && dependencies?.length) {
+      // let web work without a Babel/SWC plugin
+      inputs = dependencies;
+    }
+  }
+
   if (dependencies === undefined) {
     dependencies = [
       Object.values(prepare._closure ?? {}),
@@ -37,11 +48,7 @@ export function useAnimatedReaction<T>(
       react(input, previous.value);
       previous.value = input;
     };
-    const mapperId = startMapper(
-      fun,
-      Object.values(prepare._closure ?? {}),
-      []
-    );
+    const mapperId = startMapper(fun, inputs, []);
     return () => {
       stopMapper(mapperId);
     };
diff --git a/src/reanimated2/hook/useAnimatedStyle.ts b/src/reanimated2/hook/useAnimatedStyle.ts
@@ -20,7 +20,7 @@ import {
   ViewDescriptorsSet,
   ViewRefSet,
 } from '../ViewDescriptorsSet';
-import { isJest } from '../PlatformChecker';
+import { isJest, shouldBeUseWeb } from '../PlatformChecker';
 import {
   AnimationObject,
   Timestamp,
@@ -400,7 +400,20 @@ export function useAnimatedStyle<T extends AnimatedStyle>(
 ): AnimatedStyleResult {
   const viewsRef: ViewRefSet<any> = makeViewsRefSet();
   const initRef = useRef<AnimationRef>();
-  const inputs = Object.values(updater._closure ?? {});
+  let inputs = Object.values(updater._closure ?? {});
+  if (shouldBeUseWeb()) {
+    if (!inputs.length && dependencies?.length) {
+      // let web work without a Babel/SWC plugin
+      inputs = dependencies;
+    }
+    if (__DEV__ && !inputs.length && !dependencies && !updater.__workletHash) {
+      throw new Error(
+        `useAnimatedStyle was used without a dependency array or Babel plugin. Please explicitly pass a dependency array, or enable the Babel/SWC plugin.
+        
+For more, see the docs: https://docs.swmansion.com/react-native-reanimated/docs/fundamentals/web-support#web-without-a-babel-plugin`
+      );
+    }
+  }
   const adaptersArray: AdapterWorkletFunction[] = adapters
     ? Array.isArray(adapters)
       ? adapters
diff --git a/src/reanimated2/hook/useDerivedValue.ts b/src/reanimated2/hook/useDerivedValue.ts
@@ -3,6 +3,7 @@ import { initialUpdaterRun } from '../animation';
 import { BasicWorkletFunction, SharedValue } from '../commonTypes';
 import { makeMutable, startMapper, stopMapper } from '../core';
 import { DependencyList } from './commonTypes';
+import { shouldBeUseWeb } from '../PlatformChecker';
 
 export type DerivedValue<T> = Readonly<SharedValue<T>>;
 
@@ -11,7 +12,13 @@ export function useDerivedValue<T>(
   dependencies: DependencyList
 ): DerivedValue<T> {
   const initRef = useRef<SharedValue<T> | null>(null);
-  const inputs = Object.values(processor._closure ?? {});
+  let inputs = Object.values(processor._closure ?? {});
+  if (shouldBeUseWeb()) {
+    if (!inputs.length && dependencies?.length) {
+      // let web work without a Babel/SWC plugin
+      inputs = dependencies;
+    }
+  }
 
   // build dependencies
   if (dependencies === undefined) {
diff --git a/src/reanimated2/js-reanimated/Mapper.ts b/src/reanimated2/js-reanimated/Mapper.ts
@@ -1,4 +1,5 @@
 import { NestedObjectValues } from '../commonTypes';
+import { shouldBeUseWeb } from '../PlatformChecker';
 import { JSReanimated } from './commonTypes';
 import MutableValue from './MutableValue';
 
@@ -49,6 +50,9 @@ export default class Mapper<T> {
         res.push(value);
       } else if (Array.isArray(value)) {
         value.forEach((v) => extractMutables(v));
+      } else if (isWebDomElement(value)) {
+        // do nothing on dom elements
+        // without this check, we get a "Maximum call size exceeded error"
       } else if (typeof value === 'object') {
         Object.keys(value).forEach((key) => {
           extractMutables(value[key]);
@@ -60,3 +64,31 @@ export default class Mapper<T> {
     return res;
   }
 }
+
+function isWebDomElement(value: any) {
+  if (!shouldBeUseWeb()) {
+    return false;
+  }
+
+  // https://stackoverflow.com/a/384380/7869175
+  function isWebNode(o: any) {
+    return typeof Node === 'object'
+      ? o instanceof Node
+      : o &&
+          typeof o === 'object' &&
+          typeof o.nodeType === 'number' &&
+          typeof o.nodeName === 'string';
+  }
+
+  function isWebElement(o: any) {
+    return typeof HTMLElement === 'object'
+      ? o instanceof HTMLElement // DOM2
+      : o &&
+          typeof o === 'object' &&
+          o !== null &&
+          o.nodeType === 1 &&
+          typeof o.nodeName === 'string';
+  }
+
+  return isWebNode(value) || isWebElement(value);
+}
diff --git a/src/reanimated2/threads.ts b/src/reanimated2/threads.ts

Original file line number	Diff line number	Diff line change
`@@ -1,6 +1,10 @@`
`1`	`1`	`{`
`2`	`2`	`"extends": "expo/tsconfig.base",`
`3`	`3`	`"compilerOptions": {`
`4`		`- "strict": true`
	`4`	`+ "strict": true,`
	`5`	`+ "rootDir": "..",`
	`6`	`+ "paths": {`
	`7`	`+ "react-native-reanimated": ["./src"]`
	`8`	`+ }`
`5`	`9`	`}`
`6`	`10`	`}`