feat(Worklets): JS code duplication

.gitattributes

@@ -1,3 +1,5 @@
-/.yarn/**            linguist-vendored
-/.yarn/releases/*    binary
-/.yarn/plugins/**/*  binary
+/.yarn/** linguist-vendored=true
+/.yarn/releases/* binary=true
+/.yarn/plugins/**/* binary=true
+/packages/eslint-plugin-reanimated/index.js linguist-generated=true
+/packages/eslint-plugin-reanimated/types linguist-generated=true

.github/workflows/example-android-build-check.yml

@@ -69,11 +69,6 @@ jobs:
         working-directory: ${{ env.COMMON_APP_DIR }}
         run: yarn add react-native-worklets@workspace:"*"
 
-      - name: Use external worklets
-        if: ${{ inputs.use-external-worklets == 'true' }}
-        working-directory: ${{ env.COMMON_APP_DIR }}
-        run: yarn add react-native-worklets@workspace:"*"
-
       - name: Build app
         working-directory: ${{ env.WORKING_DIRECTORY }}/android
         run: ./gradlew assembleDebug --build-cache -PreactNativeArchitectures=arm64-v8a

.github/workflows/example-macos-build-check.yml

@@ -73,11 +73,6 @@ jobs:
         working-directory: ${{ env.COMMON_APP_DIR }}
         run: yarn add react-native-worklets@workspace:"*"
 
-      - name: Use external worklets
-        if: ${{ inputs.use-external-worklets == 'true' }}
-        working-directory: ${{ env.COMMON_APP_DIR }}
-        run: yarn add react-native-worklets@workspace:"*"
-
       - name: Install Pods
         working-directory: ${{ env.WORKING_DIRECTORY }}/macos
         run: |

.github/workflows/example-tvos-build-check.yml

@@ -66,11 +66,6 @@ jobs:
         working-directory: ${{ env.COMMON_APP_DIR }}
         run: yarn add react-native-worklets@workspace:"*"
 
-      - name: Use external worklets
-        if: ${{ inputs.use-external-worklets == 'true' }}
-        working-directory: ${{ env.COMMON_APP_DIR }}
-        run: yarn add react-native-worklets@workspace:"*"
-
       - name: Install Pods
         working-directory: ${{ env.WORKING_DIRECTORY }}/ios
         run: |

apps/common-app/index.ts

@@ -1,3 +1,34 @@
-import App from '@/App';
+/* eslint-disable no-var */
+/* eslint-disable no-inner-declarations */
+/* eslint-disable @typescript-eslint/no-unsafe-member-access */
+/* eslint-disable @typescript-eslint/no-var-requires */
+/* eslint-disable @typescript-eslint/no-unsafe-assignment */
+/* eslint-disable no-underscore-dangle */
+
+// This detection mechanism is necessary for the time being for dynamic
+// resolution of worklets. `react-native-worklets` is present in monorepo's
+// node_modules therefore allowed to be imported though it's not a dependency.
+let hasExternalWorklets = false;
+try {
+  const packageJson = require('./package.json') as Record<
+    string,
+    Record<string, unknown>
+  >;
+  hasExternalWorklets =
+    packageJson?.dependencies?.['react-native-worklets'] !== undefined ||
+    packageJson?.devDependencies?.['react-native-worklets'] !== undefined;
+} catch (_e) {
+  // Do nothing.
+}
+
+declare global {
+  var __DISALLOW_WORKLETS_IMPORT: boolean | undefined;
+}
+
+globalThis.__DISALLOW_WORKLETS_IMPORT = !hasExternalWorklets;
+
+// Has to be imported dynamically to inject __DISALLOW_WORKLETS_IMPORT before
+// any other code is executed.
+const App = require('@/App').default;
 
 export default App;

packages/eslint-plugin-reanimated/src/index.ts

@@ -1,9 +1,11 @@
 import type { TSESLint } from '@typescript-eslint/utils';
 import noAnimatedStyleToNonAnimatedComponent from './noAnimatedStyleToNonAnimatedComponent';
 import useReanimatedError from './useReanimatedError';
+import useWorkletsResolver from './useWorkletsResolver';
 
 export const rules = {
   'animated-style-non-animated-component':
     noAnimatedStyleToNonAnimatedComponent,
   'use-reanimated-error': useReanimatedError,
+  'use-worklets-resolver': useWorkletsResolver,
 } satisfies Record<string, TSESLint.RuleModule<string, Array<unknown>>>;

packages/eslint-plugin-reanimated/src/useWorkletsResolver.ts

@@ -0,0 +1,41 @@
+import type { TSESLint, TSESTree } from '@typescript-eslint/utils';
+
+const rule: TSESLint.RuleModule<'useWorkletsResolver', []> = {
+  create: function (context) {
+    return {
+      ImportDeclaration(node: TSESTree.ImportDeclaration) {
+        const workletsRegex = /\/worklets[/.*]?/;
+        if (node.source.value.match(workletsRegex)) {
+          const replacement = node.source.value.replace(
+            workletsRegex,
+            '/WorkletsResolver'
+          );
+
+          context.report({
+            node,
+            messageId: 'useWorkletsResolver',
+            fix: function (fixer) {
+              return fixer.replaceText(node.source, `'${replacement}'`);
+            },
+          });
+        }
+      },
+    };
+  },
+  meta: {
+    docs: {
+      recommended: 'recommended',
+      description:
+        "Warns when `react-native-reanimated` doesn't use `WorkletsResolver` to import worklets' files`.",
+    },
+    messages: {
+      useWorkletsResolver: "Import worklets' files via WorkletsResolver.",
+    },
+    type: 'suggestion',
+    schema: [],
+    fixable: 'code',
+  },
+  defaultOptions: [],
+};
+
+export default rule;

packages/eslint-plugin-reanimated/types/index.d.ts

@@ -10,4 +10,9 @@ export declare const rules: {
     [],
     TSESLint.RuleListener
   >;
+  'use-worklets-resolver': TSESLint.RuleModule<
+    'useWorkletsResolver',
+    [],
+    TSESLint.RuleListener
+  >;
 };

packages/eslint-plugin-reanimated/types/useWorkletsResolver.d.ts

@@ -0,0 +1,3 @@
+import type { TSESLint } from '@typescript-eslint/utils';
+declare const rule: TSESLint.RuleModule<'useWorkletsResolver', []>;
+export default rule;

packages/react-native-reanimated/.eslintrc.js

@@ -4,9 +4,16 @@ module.exports = {
   overrides: [
     {
       files: ['./src/**/*.ts', './src/**/*.tsx'],
+      excludedFiles: [
+        './src/worklets/**/*.ts',
+        './src/worklets/**/*.tsx',
+        './src/WorkletsResolver/**/*.ts',
+        './src/WorkletsResolver/**/*.tsx',
+      ],
       plugins: ['reanimated'],
       rules: {
         'reanimated/use-reanimated-error': 'error',
+        'reanimated/use-worklets-resolver': 'error',
       },
     },
   ],

packages/react-native-reanimated/.gitignore

@@ -77,3 +77,4 @@ apple/worklets
 Common/cpp/worklets
 android/src/worklets
 android/src/main/cpp/worklets
+src/worklets

packages/react-native-reanimated/package.json

@@ -19,7 +19,7 @@
     "format:android:cpp": "find android/src -iname \"*.h\" -o -iname \"*.cpp\" | xargs clang-format -i",
     "format:android:cmake": "find ./android -type d \\( -name build -o -name .cxx \\) -prune -o -type f -name 'CMakeLists.txt' -print | xargs ./scripts/format-cmake.sh",
     "format:common": "find Common -iname \"*.h\" -o -iname \"*.cpp\" | xargs clang-format -i",
-    "find-unused-code:js": "yarn ts-prune --ignore \"index|.web.\" --error",
+    "find-unused-code:js": "yarn ts-prune --ignore \"index|.web.|src/worklets\" --error",
     "type:check": "yarn type:check:src && yarn type:check:plugin && yarn type:check:app && ./scripts/test-ts.sh __typetests__/common",
     "type:check:src": "yarn tsc --noEmit",
     "type:check:plugin": "cd plugin && yarn type:check:src",

packages/react-native-reanimated/scripts/duplicate-worklets-code.sh

@@ -18,17 +18,28 @@ copy_files_recursively() {
   done
 }
 
+WORKLETS_DIR="../react-native-worklets"
+
+if [ ! -d "$WORKLETS_DIR" ]; then
+  echo "Please run this script from react-native-reanimated package"
+  exit 1
+fi
+
+# Worklets TypeScript files
+# Note that we only duplicate "worklets" subdirectory
+copy_files_recursively "src/worklets" "$WORKLETS_DIR/src/worklets"
+
 # Worklets iOS files
-copy_files_recursively "apple/worklets" "../react-native-worklets/apple/worklets"
+copy_files_recursively "apple/worklets" "$WORKLETS_DIR/apple/worklets"
 
 # Worklets Android files
 # Note that we don't duplicate "android/src/main"
-copy_files_recursively "android/src/worklets" "../react-native-worklets/android/src/worklets"
+copy_files_recursively "android/src/worklets" "$WORKLETS_DIR/android/src/worklets"
 
 # Worklets Android-specific cpp files
-copy_files_recursively "android/src/main/cpp/worklets" "../react-native-worklets/android/src/main/cpp/worklets"
+copy_files_recursively "android/src/main/cpp/worklets" "$WORKLETS_DIR/android/src/main/cpp/worklets"
 
 # Worklets Common cpp files
-copy_files_recursively "Common/cpp/worklets" "../react-native-worklets/Common/cpp/worklets"
+copy_files_recursively "Common/cpp/worklets" "$WORKLETS_DIR/Common/cpp/worklets"
 
 echo "Done duplicating Worklets in Reanimated"

packages/react-native-reanimated/src/ReanimatedModule/NativeReanimated.ts

@@ -1,31 +1,35 @@
 'use strict';
+import type React from 'react';
 import type {
-  Value3D,
-  ValueRotation,
-  ShareableRef,
   LayoutAnimationBatchItem,
-  IReanimatedModule,
-  IWorkletsModule,
-  WorkletFunction,
   ShadowNodeWrapper,
   StyleProps,
+  Value3D,
+  ValueRotation,
 } from '../commonTypes';
-import { checkCppVersion } from '../platform-specific/checkCppVersion';
-import { jsVersion } from '../platform-specific/jsVersion';
-import { isFabric, isWeb } from '../PlatformChecker';
-import type React from 'react';
-import { getShadowNodeWrapperFromRef } from '../fabricUtils';
-import { ReanimatedTurboModule } from '../specs';
-import { ReanimatedError } from '../errors';
-import { WorkletsModule } from '../worklets';
-import type { ReanimatedModuleProxy } from './reanimatedModuleProxy';
 import type {
   NormalizedCSSTransitionConfig,
   NormalizedSingleCSSAnimationConfig,
   NormalizedSingleCSSAnimationSettings,
 } from '../css/platform/native';
+import { ReanimatedError } from '../errors';
+import { getShadowNodeWrapperFromRef } from '../fabricUtils';
+import { checkCppVersion } from '../platform-specific/checkCppVersion';
+import { jsVersion } from '../platform-specific/jsVersion';
+import { isFabric, shouldBeUseWeb } from '../PlatformChecker';
+import { ReanimatedTurboModule } from '../specs';
+import type {
+  ShareableRef,
+  WorkletFunction,
+  IWorkletsModule,
+} from '../WorkletsResolver';
+import { WorkletsModule } from '../WorkletsResolver';
+import type {
+  IReanimatedModule,
+  ReanimatedModuleProxy,
+} from './reanimatedModuleProxy';
 
-const IS_WEB = isWeb();
+const IS_WEB = shouldBeUseWeb();
 
 export function createNativeReanimatedModule(): IReanimatedModule {
   return new NativeReanimatedModule();

packages/react-native-reanimated/src/ReanimatedModule/index.ts

@@ -1,4 +1,7 @@
 'use strict';
 
 export { ReanimatedModule } from './reanimatedModuleInstance';
-export type { ReanimatedModuleProxy } from './reanimatedModuleProxy';
+export type {
+  IReanimatedModule,
+  ReanimatedModuleProxy,
+} from './reanimatedModuleProxy';

packages/react-native-reanimated/src/ReanimatedModule/index.web.ts

@@ -2,3 +2,7 @@
 // this file was created to prevent NativeReanimated from being included in the web bundle
 import { createJSReanimatedModule } from './js-reanimated';
 export const ReanimatedModule = createJSReanimatedModule();
+export type {
+  IReanimatedModule,
+  ReanimatedModuleProxy,
+} from './reanimatedModuleProxy';

packages/react-native-reanimated/src/ReanimatedModule/js-reanimated/JSReanimated.ts

@@ -1,30 +1,32 @@
 'use strict';
-import {
-  isChromeDebugger,
-  isJest,
-  isWeb,
-  isWindowAvailable,
-} from '../../PlatformChecker';
-import { SensorType } from '../../commonTypes';
 import type {
-  IReanimatedModule,
-  IWorkletsModule,
   ShadowNodeWrapper,
-  ShareableRef,
   StyleProps,
   Value3D,
   ValueRotation,
-  WorkletFunction,
 } from '../../commonTypes';
-import type { WebSensor } from './WebSensor';
-import { logger } from '../../logger';
-import { ReanimatedError } from '../../errors';
-import { WorkletsModule } from '../../worklets';
+import { SensorType } from '../../commonTypes';
 import type {
   NormalizedCSSTransitionConfig,
   NormalizedSingleCSSAnimationConfig,
   NormalizedSingleCSSAnimationSettings,
 } from '../../css/platform/native';
+import { ReanimatedError } from '../../errors';
+import { logger } from '../../logger';
+import {
+  isChromeDebugger,
+  isJest,
+  isWeb,
+  isWindowAvailable,
+} from '../../PlatformChecker';
+import type {
+  IWorkletsModule,
+  ShareableRef,
+  WorkletFunction,
+} from '../../WorkletsResolver';
+import { WorkletsModule } from '../../WorkletsResolver';
+import type { IReanimatedModule } from '../reanimatedModuleProxy';
+import type { WebSensor } from './WebSensor';
 
 export function createJSReanimatedModule(): IReanimatedModule {
   return new JSReanimated();