init

Author: tjzel

package.json

@@ -6,6 +6,7 @@
     "packages": [
       "packages/react-native-reanimated",
       "packages/eslint-plugin-reanimated",
+      "packages/react-native-reanimated/plugin",
       "apps/*"
     ]
   },

packages/react-native-reanimated/plugin/babel.config.js

@@ -0,0 +1,5 @@
+const reanimatedPlugin = require('./index.js');
+
+module.exports = {
+  plugins: [reanimatedPlugin],
+};

packages/react-native-reanimated/plugin/build/plugin.js

@@ -1,5 +1,10 @@
 {
   "devDependencies": {
+    "@babel/cli": "^7.20.0",
+    "@babel/core": "^7.20.0",
+    "@babel/plugin-transform-unicode-regex": "^7.24.7",
+    "@babel/traverse": "^7.20.0",
+    "@babel/types": "^7.20.0",
     "@react-native/eslint-config": "^0.72.1",
     "@types/node": "^18.15.11",
     "@typescript-eslint/eslint-plugin": "^7.0.2",

packages/react-native-reanimated/plugin/package.json

@@ -0,0 +1,81 @@
+import {
+  blockStatement,
+  directive,
+  directiveLiteral,
+  returnStatement,
+} from '@babel/types';
+
+import type {
+  Expression,
+  Program,
+  BlockStatement,
+  VariableDeclaration,
+} from '@babel/types';
+import type { NodePath } from '@babel/core';
+import type { ReanimatedPluginPass } from './types';
+
+export function processIfWorkletFile(
+  path: NodePath<Program>,
+  state: ReanimatedPluginPass
+) {
+  if (
+    path.node.directives.some(
+      (functionDirective) => functionDirective.value.value === 'worklet'
+    )
+  ) {
+    processWorkletFile(path, state);
+    // Remove 'worklet' directive from the file afterwards.
+    path.node.directives = path.node.directives.filter(
+      (functionDirective) => functionDirective.value.value !== 'worklet'
+    );
+  }
+}
+
+function processWorkletFile(
+  path: NodePath<Program>,
+  _state: ReanimatedPluginPass
+) {
+  path.get('body').forEach((bodyPath) => {
+    if (bodyPath.isVariableDeclaration()) {
+      processVariableDeclaration(bodyPath);
+    }
+    if (bodyPath.isFunctionDeclaration()) {
+      appendWorkletDirective(bodyPath.node.body);
+    }
+  });
+}
+
+function processVariableDeclaration(path: NodePath<VariableDeclaration>) {
+  path.get('declarations').forEach((declaration) => {
+    const initPath = declaration.get('init');
+    if (initPath.isFunctionExpression()) {
+      appendWorkletDirective(initPath.node.body);
+    } else if (initPath.isArrowFunctionExpression()) {
+      const bodyPath = initPath.get('body');
+
+      // In case of arrow function with no body, i.e. () => 1.
+      if (!bodyPath.isBlockStatement()) {
+        bodyPath.replaceWith(
+          blockStatement([returnStatement(bodyPath.node as Expression)])
+        );
+      }
+      appendWorkletDirective(bodyPath.node as BlockStatement);
+    } else if (initPath.isObjectExpression()) {
+      initPath.node.properties.forEach((property) => {
+        if (property.type === 'ObjectMethod') {
+          appendWorkletDirective(property.body);
+        }
+      });
+    }
+  });
+}
+
+function appendWorkletDirective(node: BlockStatement) {
+  if (
+    !node.directives.some(
+      (functionDirective) => functionDirective.value.value === 'worklet'
+    )
+  ) {
+    node.directives.push(directive(directiveLiteral('worklet')));
+  }
+}

packages/react-native-reanimated/plugin/src/file.ts

@@ -1,5 +1,5 @@
 import type { PluginItem, NodePath } from '@babel/core';
-import type { CallExpression } from '@babel/types';
+import type { CallExpression, JSXAttribute, Program } from '@babel/types';
 import {
   processIfAutoworkletizableCallback,
   processCalleesAutoworkletizableCallbacks,
@@ -11,6 +11,7 @@ import { processInlineStylesWarning } from './inlineStylesWarning';
 import { addCustomGlobals } from './utils';
 import { initializeGlobals } from './globals';
 import { substituteWebCallExpression } from './webOptimization';
+import { processIfWorkletFile } from './file';
 
 module.exports = function (): PluginItem {
   function runWithTaggedExceptions(fun: () => void) {
@@ -50,8 +51,15 @@ module.exports = function (): PluginItem {
           });
         },
       },
+      Program: {
+        enter(path: NodePath<Program>, state: ReanimatedPluginPass) {
+          runWithTaggedExceptions(() => {
+            processIfWorkletFile(path, state);
+          });
+        },
+      },
       JSXAttribute: {
-        enter(path, state) {
+        enter(path: NodePath<JSXAttribute>, state: ReanimatedPluginPass) {
           runWithTaggedExceptions(() =>
             processInlineStylesWarning(path, state)
           );