Workletizable Classes

.eslintrc.js

@@ -87,5 +87,6 @@ module.exports = {
     'jest/no-identical-title': 'error',
     'jest/prefer-to-have-length': 'warn',
     'jest/valid-expect': 'error',
+    'react/react-in-jsx-scope': 'off',
   },
 };

apps/common-app/src/examples/RuntimeTests/RuntimeTestsExample.tsx

@@ -73,6 +73,7 @@ export default function RuntimeTestsExample() {
           importTest: () => {
             require('./tests/plugin/fileWorkletization.test');
             require('./tests/plugin/contextObjects.test');
+            require('./tests/plugin/workletClasses.test');
           },
         },
         {

apps/common-app/src/examples/RuntimeTests/tests/plugin/fileWorkletization.test.tsx

@@ -2,7 +2,7 @@ import React, { useEffect } from 'react';
 import { View } from 'react-native';
 import { useSharedValue, runOnUI } from 'react-native-reanimated';
 import { render, wait, describe, getRegisteredValue, registerValue, test, expect } from '../../ReJest/RuntimeTestsApi';
-import { getThree, implicitContextObject } from './fileWorkletization';
+import { ImplicitWorkletClass, getThree, implicitContextObject } from './fileWorkletization';
 
 const SHARED_VALUE_REF = 'SHARED_VALUE_REF';
 
@@ -44,4 +44,23 @@ describe('Test file workletization', () => {
     const sharedValue = await getRegisteredValue(SHARED_VALUE_REF);
     expect(sharedValue.onUI).toBe(5);
   });
+
+  test('WorkletClasses are workletized', async () => {
+    const ExampleComponent = () => {
+      const output = useSharedValue<number | null>(null);
+      registerValue(SHARED_VALUE_REF, output);
+
+      useEffect(() => {
+        runOnUI(() => {
+          output.value = new ImplicitWorkletClass().getSeven();
+        })();
+      });
+
+      return <View />;
+    };
+    await render(<ExampleComponent />);
+    await wait(100);
+    const sharedValue = await getRegisteredValue(SHARED_VALUE_REF);
+    expect(sharedValue.onUI).toBe(7);
+  });
 });

apps/common-app/src/examples/RuntimeTests/tests/plugin/fileWorkletization.ts

@@ -22,3 +22,13 @@ export const implicitContextObject = {
     return this.getFour() + 1;
   },
 };
+
+export class ImplicitWorkletClass {
+  getSix() {
+    return 6;
+  }
+
+  getSeven() {
+    return this.getSix() + 1;
+  }
+}

apps/common-app/src/examples/RuntimeTests/tests/plugin/workletClasses.test.tsx

@@ -0,0 +1,138 @@
+import React, { useEffect } from 'react';
+import { View } from 'react-native';
+import { useSharedValue, runOnUI } from 'react-native-reanimated';
+import { render, wait, describe, getRegisteredValue, registerValue, test, expect } from '../../ReJest/RuntimeTestsApi';
+
+const SHARED_VALUE_REF = 'SHARED_VALUE_REF';
+
+class WorkletClass {
+  __workletClass = true;
+  value = 0;
+  getOne() {
+    return 1;
+  }
+
+  getTwo() {
+    return this.getOne() + 1;
+  }
+
+  getIncremented() {
+    return ++this.value;
+  }
+}
+
+describe('Test worklet classes', () => {
+  test('class works on React runtime', async () => {
+    const ExampleComponent = () => {
+      const output = useSharedValue<number | null>(null);
+      registerValue(SHARED_VALUE_REF, output);
+      const clazz = new WorkletClass();
+
+      output.value = clazz.getTwo() + clazz.getIncremented() + clazz.getIncremented();
+
+      return <View />;
+    };
+    await render(<ExampleComponent />);
+    await wait(100);
+    const sharedValue = await getRegisteredValue(SHARED_VALUE_REF);
+    expect(sharedValue.onJS).toBe(5);
+  });
+
+  test('constructor works on Worklet runtime', async () => {
+    const ExampleComponent = () => {
+      useEffect(() => {
+        runOnUI(() => {
+          const clazz = new WorkletClass();
+          clazz.getOne();
+        })();
+      });
+
+      return <View />;
+    };
+    await render(<ExampleComponent />);
+    await wait(100);
+    // TODO: assert no crash here
+  });
+
+  test('class methods work on Worklet runtime', async () => {
+    const ExampleComponent = () => {
+      const output = useSharedValue<number | null>(null);
+      registerValue(SHARED_VALUE_REF, output);
+
+      useEffect(() => {
+        runOnUI(() => {
+          const clazz = new WorkletClass();
+          output.value = clazz.getOne();
+        })();
+      });
+
+      return <View />;
+    };
+    await render(<ExampleComponent />);
+    await wait(100);
+    const sharedValue = await getRegisteredValue(SHARED_VALUE_REF);
+    expect(sharedValue.onUI).toBe(1);
+  });
+
+  test('class instance methods preserve binding', async () => {
+    const ExampleComponent = () => {
+      const output = useSharedValue<number | null>(null);
+      registerValue(SHARED_VALUE_REF, output);
+
+      useEffect(() => {
+        runOnUI(() => {
+          const clazz = new WorkletClass();
+          output.value = clazz.getTwo();
+        })();
+      });
+
+      return <View />;
+    };
+    await render(<ExampleComponent />);
+    await wait(100);
+    const sharedValue = await getRegisteredValue(SHARED_VALUE_REF);
+    expect(sharedValue.onUI).toBe(2);
+  });
+
+  test('class instances preserve state', async () => {
+    const ExampleComponent = () => {
+      const output = useSharedValue<number | null>(null);
+      registerValue(SHARED_VALUE_REF, output);
+
+      useEffect(() => {
+        runOnUI(() => {
+          const clazz = new WorkletClass();
+          output.value = clazz.getIncremented() + clazz.getIncremented();
+        })();
+      });
+
+      return <View />;
+    };
+    await render(<ExampleComponent />);
+    await wait(100);
+    const sharedValue = await getRegisteredValue(SHARED_VALUE_REF);
+    expect(sharedValue.onUI).toBe(3);
+  });
+
+  test('instanceof operator works on Worklet runtime', async () => {
+    const ExampleComponent = () => {
+      const output = useSharedValue<boolean | null>(null);
+      registerValue(SHARED_VALUE_REF, output);
+
+      useEffect(() => {
+        runOnUI(() => {
+          const clazz = new WorkletClass();
+          output.value = clazz instanceof WorkletClass;
+        })();
+      });
+
+      return <View />;
+    };
+    await render(<ExampleComponent />);
+    await wait(100);
+    const sharedValue = await getRegisteredValue(SHARED_VALUE_REF);
+    expect(sharedValue.onUI).toBe(true);
+  });
+
+  // TODO: Add a test that throws when class is sent from React to Worklet runtime.
+});