From 657b701a229a169d75b5e1fcdaedc5e913a1c7b8 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Tomasz=20=C5=BBelawski?= Date: Tue, 5 Nov 2024 12:56:35 +0100 Subject: [PATCH 1/5] fix: Allow TypeScript in worklet classes --- .../tests/plugin/recursion.test.tsx | 18 +++++----- .../tests/plugin/workletClasses.test.tsx | 4 +-- .../__tests__/plugin.test.ts | 17 ++++++++++ .../react-native-reanimated/plugin/index.js | 4 +-- .../plugin/src/class.ts | 6 ++-- .../plugin/src/transform.ts | 34 +++++++++++++++++++ .../plugin/src/workletFactory.ts | 22 ++---------- .../plugin/src/workletStringCode.ts | 12 +++---- 8 files changed, 75 insertions(+), 42 deletions(-) create mode 100644 packages/react-native-reanimated/plugin/src/transform.ts diff --git a/apps/common-app/src/examples/RuntimeTests/tests/plugin/recursion.test.tsx b/apps/common-app/src/examples/RuntimeTests/tests/plugin/recursion.test.tsx index d9ec95bbc8f..9ab0a39408d 100644 --- a/apps/common-app/src/examples/RuntimeTests/tests/plugin/recursion.test.tsx +++ b/apps/common-app/src/examples/RuntimeTests/tests/plugin/recursion.test.tsx @@ -1,6 +1,6 @@ import React, { useEffect } from 'react'; import { View } from 'react-native'; -import { useSharedValue, runOnUI, runOnJS } from 'react-native-reanimated'; +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'; @@ -85,15 +85,13 @@ describe('Test recursion in worklets', () => { const output = useSharedValue(null); registerValue(SHARED_VALUE_REF, output); function recursiveWorklet(a: number) { - if (a === 2) { + if (a === 1) { output.value = a; - } else if (a === 1) { - try { - // TODO: Such case isn't supported at the moment - - // a function can't be a Worklet and a Remote function at the same time. - // Consider supporting it in the future. - runOnJS(recursiveWorklet)(a + 1); - } catch {} + } else if (a === 2) { + // TODO: Such case isn't supported at the moment - + // a function can't be a Worklet and a Remote function at the same time. + // Consider supporting it in the future. + // runOnJS(recursiveWorklet)(a + 1); } else { recursiveWorklet(a + 1); } @@ -108,6 +106,6 @@ describe('Test recursion in worklets', () => { await render(); await wait(100); const sharedValue = await getRegisteredValue(SHARED_VALUE_REF); - expect(sharedValue.onJS).toBe(null); + expect(sharedValue.onJS).toBe(1); }); }); diff --git a/apps/common-app/src/examples/RuntimeTests/tests/plugin/workletClasses.test.tsx b/apps/common-app/src/examples/RuntimeTests/tests/plugin/workletClasses.test.tsx index bd4d0244ecb..0cbd3cde1e3 100644 --- a/apps/common-app/src/examples/RuntimeTests/tests/plugin/workletClasses.test.tsx +++ b/apps/common-app/src/examples/RuntimeTests/tests/plugin/workletClasses.test.tsx @@ -6,8 +6,8 @@ import { render, wait, describe, getRegisteredValue, registerValue, test, expect const SHARED_VALUE_REF = 'SHARED_VALUE_REF'; class WorkletClass { - __workletClass = true; - value = 0; + __workletClass: boolean = true; + value: number = 0; getOne() { return 1; } diff --git a/packages/react-native-reanimated/__tests__/plugin.test.ts b/packages/react-native-reanimated/__tests__/plugin.test.ts index 3427f225caf..a265b62b26a 100644 --- a/packages/react-native-reanimated/__tests__/plugin.test.ts +++ b/packages/react-native-reanimated/__tests__/plugin.test.ts @@ -2627,5 +2627,22 @@ describe('babel plugin', () => { expect(code).toHaveWorkletData(6); expect(code).toMatchSnapshot(); }); + + it('workletizes TypeScript classes', () => { + const input = html`