feat(Worklets): web implementation for Worklets

apps/common-app/src/apps/reanimated/App.tsx

@@ -5,6 +5,7 @@ import type { StackNavigationProp } from '@react-navigation/stack';
 import React, { memo } from 'react';
 import {
   FlatList,
+  Platform,
   Pressable,
   ScrollView,
   StyleSheet,
@@ -77,7 +78,7 @@ function HomeScreen({ navigation }: HomeScreenProps) {
               setTimeout(() => setWasClicked([...wasClicked, name]), 500);
             }
           }}
-          missingOnFabric={EXAMPLES[name].missingOnFabric}
+          disabled={EXAMPLES[name].disabledPlatforms?.includes(Platform.OS)}
           wasClicked={wasClicked.includes(name)}
         />
       )}
@@ -91,29 +92,22 @@ function HomeScreen({ navigation }: HomeScreenProps) {
 interface ItemProps {
   icon?: string;
   title: string;
+  disabled?: boolean;
   onPress: () => void;
-  missingOnFabric?: boolean;
   wasClicked?: boolean;
 }
 
-function Item({
-  icon,
-  title,
-  onPress,
-  missingOnFabric,
-  wasClicked,
-}: ItemProps) {
-  const isDisabled = missingOnFabric;
+function Item({ icon, title, onPress, disabled, wasClicked }: ItemProps) {
   const Button = IS_MACOS ? Pressable : RectButton;
   return (
     <Button
       style={[
         styles.button,
-        isDisabled && styles.disabledButton,
+        disabled && styles.disabledButton,
         wasClicked && styles.visitedItem,
       ]}
       onPress={onPress}
-      enabled={!isDisabled}>
+      enabled={!disabled}>
       {icon && <Text style={styles.title}>{icon + '  '}</Text>}
       <Text style={styles.title}>{title}</Text>
     </Button>

apps/common-app/src/apps/reanimated/examples/index.ts

@@ -135,14 +135,28 @@ import WorkletExample from './WorkletExample';
 import WorkletFactoryCrash from './WorkletFactoryCrashExample';
 import WorkletRuntimeExample from './WorkletRuntimeExample';
 
-interface Example {
+export const REAPlatform = {
+  IOS: 'ios',
+  ANDROID: 'android',
+  MACOS: 'macos',
+  WEB: 'web',
+};
+
+export interface Example {
   icon?: string;
   title: string;
   screen: React.FC;
-  missingOnFabric?: boolean;
+  disabledPlatforms?: (typeof REAPlatform)[keyof typeof REAPlatform][];
 }
 
 export const EXAMPLES: Record<string, Example> = {
+  // About
+  AboutExample: {
+    icon: 'ℹ️',
+    title: 'About',
+    screen: AboutExample,
+  },
+
   // Empty example for test purposes
   EmptyExample: {
     icon: '👻',
@@ -163,11 +177,13 @@ export const EXAMPLES: Record<string, Example> = {
     icon: '⚙️',
     title: 'RuntimeTestsExample',
     screen: RuntimeTestsExample,
+    disabledPlatforms: [REAPlatform.WEB],
   },
   Synchronizable: {
     icon: '🔄',
     title: 'Synchronizable performance',
     screen: SynchronizablePerformanceExample,
+    disabledPlatforms: [REAPlatform.WEB],
   },
   ReactFreeze: {
     icon: '❄️',
@@ -183,6 +199,7 @@ export const EXAMPLES: Record<string, Example> = {
     icon: '🏃‍♂️',
     title: 'Worklet runtime',
     screen: WorkletRuntimeExample,
+    disabledPlatforms: [REAPlatform.WEB],
   },
   ModifyExample: {
     icon: '🪛',
@@ -203,6 +220,7 @@ export const EXAMPLES: Record<string, Example> = {
     icon: '🥶',
     title: 'Serializable freezing',
     screen: SerializableFreezingExample,
+    disabledPlatforms: [REAPlatform.WEB],
   },
   InvalidReadWriteExample: {
     icon: '🔒',
@@ -218,21 +236,14 @@ export const EXAMPLES: Record<string, Example> = {
     icon: '🔄',
     title: 'Copy serializable performance test',
     screen: CopySerializablePerformanceTest,
+    disabledPlatforms: [REAPlatform.WEB],
   },
   FlatListWithLayoutAnimations: {
     icon: '🎻',
     title: 'FlatList with layout animations',
     screen: FlatListWithLayoutAnimations,
   },
 
-  // About
-
-  AboutExample: {
-    icon: 'ℹ️',
-    title: 'About',
-    screen: AboutExample,
-  },
-
   // Showcase
 
   BokehExample: {
@@ -299,6 +310,7 @@ export const EXAMPLES: Record<string, Example> = {
     icon: '📺',
     title: 'Screen transition',
     screen: ScreenTransitionExample,
+    disabledPlatforms: [REAPlatform.WEB],
   },
 
   // Basic examples
@@ -496,6 +508,11 @@ export const EXAMPLES: Record<string, Example> = {
     icon: '🔌',
     title: 'Without Babel plugin',
     screen: WithoutBabelPluginExample,
+    disabledPlatforms: [
+      REAPlatform.ANDROID,
+      REAPlatform.IOS,
+      REAPlatform.MACOS,
+    ],
   },
   MatrixExample: {
     icon: '🧮',
@@ -531,7 +548,12 @@ export const EXAMPLES: Record<string, Example> = {
     icon: '🔎',
     title: 'getViewProp',
     screen: GetViewPropExample,
-    missingOnFabric: true,
+    disabledPlatforms: [
+      REAPlatform.WEB,
+      REAPlatform.ANDROID,
+      REAPlatform.IOS,
+      REAPlatform.MACOS,
+    ],
   },
   LogExample: {
     icon: '⌨',
@@ -582,6 +604,7 @@ export const EXAMPLES: Record<string, Example> = {
     title: 'DynamicColorIOS',
     screen: DynamicColorIOSExample,
     icon: '🌗',
+    disabledPlatforms: [REAPlatform.ANDROID, REAPlatform.WEB],
   },
 
   // Old examples

apps/fabric-example/ios/Podfile.lock

@@ -3190,10 +3190,10 @@ SPEC CHECKSUMS:
   RNReanimated: 3b47c33660454c6f9700b463e92daa282030866a
   RNScreens: 6ced6ae8a526512a6eef6e28c2286e1fc2d378c3
   RNSVG: 287504b73fa0e90a605225aa9f852a86d5461e84
-  RNWorklets: 7119ae08263033c456c80d90794a312f2f88c956
+  RNWorklets: 991f94e4fa31fc20853e74d5d987426f8580cb0d
   SocketRocket: d4aabe649be1e368d1318fdf28a022d714d65748
   Yoga: e80c5fabbc3e26311152fa20404cdfa14f16a11f
 
-PODFILE CHECKSUM: 5d8c04f461eed0f22e86610877d94f2b8b838b8b
+PODFILE CHECKSUM: db099f48c6dadedd8fc0a430129b75e561867ab9
 
 COCOAPODS: 1.15.2

packages/react-native-reanimated/jest-setup.js

@@ -2,6 +2,10 @@ delete global.MessageChannel;
 require('react-native-worklets/jestSetup');
 require('./src/jestUtils').setUpTests();
 
+jest.mock('react-native-worklets', () =>
+  require('react-native-worklets/src/mock')
+);
+
 global.__reanimatedLoggerConfig = {
   logFunction: (data) => {
     switch (data.level) {

packages/react-native-worklets/__tests__/API.test.ts

@@ -0,0 +1,46 @@
+import * as Worklets from '../src/index';
+
+describe('web API', () => {
+  it('should have all exports available', () => {
+    const WorkletAPI = [
+      'isShareableRef',
+      'makeShareable',
+      'makeShareableCloneOnUIRecursive',
+      'makeShareableCloneRecursive',
+      'shareableMappingCache',
+      'getStaticFeatureFlag',
+      'setDynamicFeatureFlag',
+      'isSynchronizable',
+      'getRuntimeKind',
+      'RuntimeKind',
+      'createWorkletRuntime',
+      'runOnRuntime',
+      'scheduleOnRuntime',
+      'createSerializable',
+      'isSerializableRef',
+      'serializableMappingCache',
+      'createSynchronizable',
+      'callMicrotasks',
+      'executeOnUIRuntimeSync',
+      'runOnJS',
+      'runOnUI',
+      'runOnUIAsync',
+      'runOnUISync',
+      'scheduleOnRN',
+      'scheduleOnUI',
+      'unstable_eventLoopTask',
+      'isWorkletFunction',
+      'WorkletsModule',
+    ];
+
+    // Check if all exports are available.
+    expect(WorkletAPI.sort()).toEqual(Object.keys(Worklets).sort());
+
+    const definedWorklets = WorkletAPI.filter((api) => {
+      return Worklets[api as keyof typeof Worklets] !== undefined;
+    }).map((api) => api);
+
+    // Check if all exports are defined.
+    expect(WorkletAPI.sort()).toEqual(definedWorklets.sort());
+  });
+});

packages/react-native-worklets/jest.config.js

@@ -4,4 +4,14 @@ module.exports = {
   modulePathIgnorePatterns: ['lib'],
   testEnvironment: 'node',
   transformIgnorePatterns: [],
+  moduleFileExtensions: [
+    'web.ts',
+    'web.tsx',
+    'web.js',
+    'ts',
+    'tsx',
+    'js',
+    'jsx',
+    'json',
+  ],
 };

packages/react-native-worklets/src/PlatformChecker/index.ts

@@ -1,30 +1,6 @@
 'use strict';
 
-import { getRuntimeKind, RuntimeKind } from '../runtimeKind';
-import {
-  IS_JEST as RN_IS_JEST,
-  IS_WEB as RN_IS_WEB,
-  IS_WINDOWS as RN_IS_WINDOWS,
-  SHOULD_BE_USE_WEB as RN_SHOULD_BE_USE_WEB,
-} from './PlatformChecker';
-
-let IS_JEST = false;
-let IS_WEB = false;
-let IS_WINDOWS = false;
-let SHOULD_BE_USE_WEB = false;
-
-if (getRuntimeKind() === RuntimeKind.ReactNative) {
-  IS_JEST = RN_IS_JEST;
-  IS_WEB = RN_IS_WEB;
-  IS_WINDOWS = RN_IS_WINDOWS;
-  SHOULD_BE_USE_WEB = RN_SHOULD_BE_USE_WEB;
-}
-
-export {
-  IS_JEST,
-  /** @knipIgnore */
-  IS_WEB,
-  /** @knipIgnore */
-  IS_WINDOWS,
-  SHOULD_BE_USE_WEB,
-};
+export const IS_JEST = false;
+export const IS_WEB = false;
+export const IS_WINDOWS = false;
+export const SHOULD_BE_USE_WEB = false;

packages/react-native-worklets/src/PlatformChecker/index.web.ts

@@ -0,0 +1,8 @@
+'use strict';
+
+export {
+  IS_JEST,
+  IS_WEB,
+  IS_WINDOWS,
+  SHOULD_BE_USE_WEB,
+} from './PlatformChecker';

packages/react-native-worklets/src/WorkletsError.web.ts

@@ -0,0 +1,12 @@
+'use strict';
+
+function WorkletsErrorConstructor(message?: string) {
+  const prefix = '[Worklets]';
+
+  // eslint-disable-next-line reanimated/use-worklets-error
+  const errorInstance = new Error(message ? `${prefix} ${message}` : prefix);
+  errorInstance.name = `WorkletsError`;
+  return errorInstance;
+}
+
+export const WorkletsError = WorkletsErrorConstructor;