fix: Allow TypeScript in worklet classes (software-mansion#6667)

## Summary

Turns out `@babel/preset-typescript` always has to be included when
calling `transformSync` from `babel` (it cannot be included in a later
call). Due to that I made all `transformSync` calls into a wrapper call
that uses a required set of plugins and presets.

Fixes 
- software-mansion#6642

## Test plan

- [x] Plugin unit tests pass
- [x] Runtime tests pass

Author: tjzel

plugin/index.js

@@ -1,5 +1,4 @@
 import type { NodePath } from '@babel/core';
-import { transformSync } from '@babel/core';
 import generate from '@babel/generator';
 import traverse from '@babel/traverse';
 import type {
@@ -36,6 +35,7 @@ import { strict as assert } from 'assert';
 import type { ReanimatedPluginPass } from './types';
 import { workletClassFactorySuffix } from './types';
 import { replaceWithFactoryCall } from './utils';
+import { workletTransformSync } from './transform';
 
 const classWorkletMarker = '__workletClass';
 
@@ -96,8 +96,8 @@ function getPolyfilledAst(
 ) {
   const classCode = generate(classNode).code;
 
-  const classWithPolyfills = transformSync(classCode, {
-    plugins: [
+  const classWithPolyfills = workletTransformSync(classCode, {
+    extraPlugins: [
       '@babel/plugin-transform-class-properties',
       '@babel/plugin-transform-classes',
       '@babel/plugin-transform-unicode-regex',

plugin/src/class.ts

@@ -0,0 +1,28 @@
+import { transformSync } from '@babel/core';
+import type { PluginItem, TransformOptions } from '@babel/core';
+
+export function workletTransformSync(
+  code: string,
+  opts: WorkletTransformOptions
+) {
+  const { extraPlugins = [], extraPresets = [], ...rest } = opts;
+
+  return transformSync(code, {
+    ...rest,
+    plugins: [...defaultPlugins, ...extraPlugins],
+    presets: [...defaultPresets, ...extraPresets],
+  });
+}
+
+const defaultPresets: PluginItem[] = [
+  require.resolve('@babel/preset-typescript'),
+];
+
+const defaultPlugins: PluginItem[] = [];
+
+interface WorkletTransformOptions
+  extends Omit<TransformOptions, 'plugins' | 'presets'> {
+  extraPlugins?: PluginItem[];
+  extraPresets?: PluginItem[];
+  filename: TransformOptions['filename'];
+}

plugin/src/transform.ts

@@ -1,6 +1,6 @@
 /* eslint-disable @typescript-eslint/no-var-requires */
 import type { NodePath } from '@babel/core';
-import { transformSync, traverse } from '@babel/core';
+import { traverse } from '@babel/core';
 import generate from '@babel/generator';
 import type {
   File as BabelFile,
@@ -44,25 +44,11 @@ import type { ReanimatedPluginPass, WorkletizableFunction } from './types';
 import { workletClassFactorySuffix } from './types';
 import { isRelease } from './utils';
 import { buildWorkletString } from './workletStringCode';
+import { workletTransformSync } from './transform';
 
 const REAL_VERSION = require('../../package.json').version;
 const MOCK_VERSION = 'x.y.z';
 
-const workletStringTransformPresets = [
-  require.resolve('@babel/preset-typescript'),
-];
-
-const workletStringTransformPlugins = [
-  require.resolve('@babel/plugin-transform-shorthand-properties'),
-  require.resolve('@babel/plugin-transform-arrow-functions'),
-  require.resolve('@babel/plugin-transform-optional-chaining'),
-  require.resolve('@babel/plugin-transform-nullish-coalescing-operator'),
-  [
-    require.resolve('@babel/plugin-transform-template-literals'),
-    { loose: true },
-  ],
-];
-
 export function makeWorkletFactory(
   fun: NodePath<WorkletizableFunction>,
   state: ReanimatedPluginPass
@@ -91,10 +77,9 @@ export function makeWorkletFactory(
   codeObject.code =
     '(' + (fun.isObjectMethod() ? 'function ' : '') + codeObject.code + '\n)';
 
-  const transformed = transformSync(codeObject.code, {
+  const transformed = workletTransformSync(codeObject.code, {
+    extraPlugins,
     filename: state.file.opts.filename,
-    presets: workletStringTransformPresets,
-    plugins: workletStringTransformPlugins,
     ast: true,
     babelrc: false,
     configFile: false,
@@ -469,3 +454,14 @@ function makeArrayFromCapturedBindings(
 
   return Array.from(closure.values());
 }
+
+const extraPlugins = [
+  require.resolve('@babel/plugin-transform-shorthand-properties'),
+  require.resolve('@babel/plugin-transform-arrow-functions'),
+  require.resolve('@babel/plugin-transform-optional-chaining'),
+  require.resolve('@babel/plugin-transform-nullish-coalescing-operator'),
+  [
+    require.resolve('@babel/plugin-transform-template-literals'),
+    { loose: true },
+  ],
+];

plugin/src/workletFactory.ts

@@ -1,5 +1,5 @@
 import type { BabelFileResult, NodePath, PluginItem } from '@babel/core';
-import { transformSync, traverse } from '@babel/core';
+import { traverse } from '@babel/core';
 import generate from '@babel/generator';
 import type {
   File as BabelFile,
@@ -34,6 +34,7 @@ import * as fs from 'fs';
 import type { ReanimatedPluginPass, WorkletizableFunction } from './types';
 import { workletClassFactorySuffix } from './types';
 import { isRelease } from './utils';
+import { workletTransformSync } from './transform';
 
 const MOCK_SOURCE_MAP = 'mock source map';
 
@@ -130,8 +131,9 @@ export function buildWorkletString(
     }
   }
 
-  const transformed = transformSync(code, {
-    plugins: [prependClosureVariablesIfNecessary(closureVariables)],
+  const transformed = workletTransformSync(code, {
+    filename: state.file.opts.filename,
+    extraPlugins: [getClosurePlugin(closureVariables)],
     compact: true,
     sourceMaps: includeSourceMap,
     inputSourceMap: inputMap,
@@ -222,9 +224,8 @@ function prependRecursiveDeclaration(path: NodePath<WorkletizableFunction>) {
   }
 }
 
-function prependClosureVariablesIfNecessary(
-  closureVariables: Array<Identifier>
-): PluginItem {
+/** Prepends necessary closure variables to the worklet function. */
+function getClosurePlugin(closureVariables: Array<Identifier>): PluginItem {
   const closureDeclaration = variableDeclaration('const', [
     variableDeclarator(
       objectPattern(