feat(Worklets): docs for plugin types

.husky/pre-commit

@@ -65,13 +65,13 @@ for DOCS in docs-reanimated docs-worklets; do
   check_and_lint_docs "$STAGED_FILES" "$DOCS_PATH" "$DOCS"
 done
 
-# This automatically builds Reanimated Babel plugin JavaScript files if their
+# This automatically builds Worklets Babel plugin JavaScript files if their
 # TypeScript counterparts were changed. It also adds the output file to the commit
 # if the built file differs from currently staged one.
-print "Checking for changes in Reanimated Babel plugin source files..."
+print "Checking for changes in Worklets Babel plugin source files..."
 PLUGIN_PATH="packages/react-native-worklets/plugin"
 if echo "$STAGED_FILES" | grep -E "$PLUGIN_PATH" >/dev/null; then
-  print "Changes spotted. Building Reanimated Babel plugin files..."
+  print "Changes spotted. Building Worklets Babel plugin files..."
 
   yarn workspace babel-plugin-worklets build
 

apps/fabric-example/babel.config.js

@@ -1,14 +1,14 @@
+/** @type {import('react-native-worklets/plugin').PluginOptions} */
+const workletOptions = {
+  // Uncomment the next line to enable bundle mode.
+  // bundleMode: true,
+};
+
 /** @type {import('@babel/core').TransformOptions} */
 module.exports = {
   presets: ['module:@react-native/babel-preset'],
   plugins: [
-    [
-      'react-native-worklets/plugin',
-      {
-        // Uncomment the next line to enable bundle mode.
-        // bundleMode: true,
-      },
-    ],
+    ['react-native-worklets/plugin', workletOptions],
     [
       'module-resolver',
       {

apps/macos-example/babel.config.js

@@ -1,3 +1,6 @@
+/** @type {import('react-native-worklets/plugin').PluginOptions} */
+const workletOptions = {};
+
 /** @type {import('@babel/core').TransformOptions} */
 module.exports = {
   presets: ['module:@react-native/babel-preset'],
@@ -12,6 +15,6 @@ module.exports = {
         extensions: ['.js', '.jsx', '.ts', '.tsx'],
       },
     ],
-    'react-native-worklets/plugin',
+    ['react-native-worklets/plugin', workletOptions],
   ],
 };

apps/next-example/babel.config.js

@@ -1,3 +1,6 @@
+/** @type {import('react-native-worklets/plugin').PluginOptions} */
+const workletOptions = {};
+
 /** @type {import('@babel/core').TransformOptions} */
 module.exports = {
   presets: ['next/babel'],
@@ -13,6 +16,6 @@ module.exports = {
         },
       },
     ],
-    'react-native-worklets/plugin',
+    ['react-native-worklets/plugin', workletOptions],
   ],
 };

apps/tvos-example/babel.config.js

@@ -1,5 +1,8 @@
+/** @type {import('react-native-worklets/plugin').PluginOptions} */
+const workletOptions = {};
+
 /** @type {import('@babel/core').TransformOptions} */
 module.exports = {
   presets: ['module:@react-native/babel-preset'],
-  plugins: ['react-native-worklets/plugin'],
+  plugins: [['react-native-worklets/plugin', workletOptions]],
 };

apps/web-example/babel.config.js

@@ -1,3 +1,6 @@
+/** @type {import('react-native-worklets/plugin').PluginOptions} */
+const workletOptions = {};
+
 /** @type {import('@babel/core').ConfigFunction} */
 module.exports = function (api) {
   const plugins = [
@@ -18,7 +21,7 @@ module.exports = function (api) {
   if (disableBabelPlugin) {
     console.log('Starting Web example without Babel plugin.');
   } else {
-    plugins.push('react-native-worklets/plugin');
+    plugins.push(['react-native-worklets/plugin', workletOptions]);
   }
 
   return {

docs/docs-reanimated/docs/fundamentals/getting-started.mdx

@@ -49,17 +49,15 @@ Install `react-native-reanimated` and `react-native-worklets` packages from npm:
 
 This library requires an installation of the `react-native-worklets` dependency. It was separated from `react-native-reanimated` for better modularity and must be installed separately.
 
+You can read more about Worklets in the [Worklets documentation](https://docs.swmansion.com/react-native-worklets/).
+
 <Tabs groupId="package-managers">
   <TabItem value="npm" label="NPM">
     {/* TODO - add information about the necessity to specify a proper version of the library compatible with reanimated */}
-    ```bash
-    npm install react-native-worklets
-    ```
+    ```bash npm install react-native-worklets ```
   </TabItem>
   <TabItem value="yarn" label="YARN">
-    ```bash
-    yarn add react-native-worklets
-    ```
+    ```bash yarn add react-native-worklets ```
   </TabItem>
 </Tabs>
 
@@ -69,14 +67,10 @@ Run prebuild to update the native code in the `ios` and `android` directories.
 
 <Tabs groupId="package-managers">
   <TabItem value="npm" label="NPM">
-    ```bash
-    npx expo prebuild
-    ```
+    ```bash npx expo prebuild ```
   </TabItem>
   <TabItem value="yarn" label="YARN">
-    ```bash
-    yarn expo prebuild
-    ```
+    ```bash yarn expo prebuild ```
   </TabItem>
 </Tabs>
 
@@ -87,13 +81,18 @@ And that's it! Reanimated 4 is now configured in your Expo project.
 When using [React Native Community CLI](https://github.com/react-native-community/cli), you also need to manually add the `react-native-worklets/plugin` plugin to your `babel.config.js`.
 
 ```js {7}
+  /** @type {import('react-native-worklets/plugin').PluginOptions} */
+  const workletsPluginOptions = {
+    // Your custom options.
+  }
+
   module.exports = {
     presets: [
       ... // don't add it here :)
     ],
     plugins: [
       ...
-      'react-native-worklets/plugin',
+      ['react-native-worklets/plugin', workletsPluginOptions],
     ],
   };
 ```
@@ -107,26 +106,22 @@ When using [React Native Community CLI](https://github.com/react-native-communit
 <details>
 <summary>Why do I need this?</summary>
 
-In short, the Reanimated babel plugin automatically converts special JavaScript functions (called [worklets](/docs/fundamentals/glossary#worklet)) to allow them to be passed and run on the UI thread.
+In short, the Worklets Babel plugin automatically converts special JavaScript functions (called [worklets](/docs/fundamentals/glossary#worklet)) to allow them to be passed and run on the UI thread.
 
-Since [Expo SDK 50](https://expo.dev/changelog/2024/01-18-sdk-50), the Expo starter template includes the Reanimated babel plugin by default.
+Since [Expo SDK 50](https://expo.dev/changelog/2024/01-18-sdk-50), the Expo starter template includes the Worklets Babel plugin by default.
 
-To learn more about the plugin head onto to [Reanimated babel plugin](/docs/fundamentals/glossary#reanimated-babel-plugin) section.
+To learn more about the plugin head onto to [Worklets Babel plugin docs page](https://docs.swmansion.com/react-native-worklets/docs/worklets-babel-plugin/about).
 
 </details>
 
 #### Clear Metro bundler cache (recommended)
 
 <Tabs groupId="package-managers">
   <TabItem value="npm" label="NPM">
-    ```bash
-    npm start -- --reset-cache
-    ```
+    ```bash npm start -- --reset-cache ```
   </TabItem>
   <TabItem value="yarn" label="YARN">
-    ```bash
-    yarn start --reset-cache
-    ```
+    ```bash yarn start --reset-cache ```
   </TabItem>
 </Tabs>
 
@@ -150,26 +145,27 @@ To use Reanimated on the web all you need to do is to install and add [`@babel/p
 
 <Tabs groupId="package-managers">
   <TabItem value="npm" label="NPM">
-    ```bash
-    npm install @babel/plugin-proposal-export-namespace-from
-    ```
+    ```bash npm install @babel/plugin-proposal-export-namespace-from ```
   </TabItem>
   <TabItem value="yarn" label="YARN">
-    ```bash
-    yarn add @babel/plugin-proposal-export-namespace-from
-    ```
+    ```bash yarn add @babel/plugin-proposal-export-namespace-from ```
   </TabItem>
 </Tabs>
 
 ```js {7}
+  /** @type {import('react-native-worklets/plugin').PluginOptions} */
+  const workletsPluginOptions = {
+    // Your custom options.
+  }
+
   module.exports = {
       presets: [
         ... // don't add it here :)
       ],
       plugins: [
           ...
           '@babel/plugin-proposal-export-namespace-from',
-          'react-native-worklets/plugin',
+          ['react-native-worklets/plugin', workletsPluginOptions],
       ],
   };
 ```

docs/docs-reanimated/docs/fundamentals/glossary.mdx

@@ -170,7 +170,7 @@ function onPress() {
 
 To convert a JavaScript function into a serializable object which can be copied and run over on [UI thread](/docs/fundamentals/glossary#ui-thread).
 
-Functions marked with `"worklet";` directive are automatically picked up and workletized by the Reanimated Babel plugin.
+Functions marked with `"worklet"` directive are automatically picked up and workletized by the Worklets Babel plugin.
 
 ## JavaScript thread
 
@@ -184,8 +184,8 @@ UI thread is responsible for handling user interface updates. Also known as Main
 
 You can learn more about it by reading the [Threading model](https://reactnative.dev/architecture/threading-model) article in the official React Native docs.
 
-## Reanimated Babel plugin
+## Worklets Babel plugin
 
 The plugin performs automatic [workletization](/docs/fundamentals/glossary#to-workletize) of certain functions used with Reanimated to reduce the amount of boilerplate code.
 
-You can learn the details by reading the [Reanimated Babel plugin README](https://github.com/software-mansion/react-native-reanimated/blob/main/packages/react-native-worklets/plugin/README-dev.md).
+You can learn the details by reading the [Worklets docs](https://docs.swmansion.com/react-native-worklets/docs/worklets-babel-plugin/about).

docs/docs-reanimated/docs/guides/debugging-worklets.mdx

@@ -181,7 +181,7 @@ _Warnings about mismatched patch versions can be safely ignored if the patch was
 You may choose either `Reanimated Runtime` or `Reanimated Runtime experimental
 (Improved Chrome Reloads)`, but we recommend the latter.
 
-_Debugging relies on source maps that are generated by the Reanimated Babel plugin, so you
+_Debugging relies on source maps that are generated by the Worklets Babel plugin, so you
 might have to run `yarn start --reset-cache` for those changes to take effect.
 In case it still doesn't work after that please reinstall the app and reset metro
 cache once again._
@@ -247,7 +247,7 @@ _Warnings about mismatched patch versions can be safely ignored if the patch was
 
 ![Screenshot showing the plugin working](/img/debugging/flipper3.png)
 
-_Debugging relies on source maps that are generated by the Reanimated Babel plugin, so you
+_Debugging relies on source maps that are generated by the Worklets Babel plugin, so you
 might have to run `yarn start --reset-cache` for those changes to take effect.
 In case it still doesn't work after that please reinstall the app and reset metro
 cache once again._

docs/docs-reanimated/docs/guides/troubleshooting.mdx

@@ -8,20 +8,21 @@ sidebar_label: Troubleshooting
 
 ## Initialization issues
 
-Reanimated has four core components that compose its code:
+Reanimated has three core components that compose its code:
 
 - C++,
 - Java,
-- JavaScript,
-- Reanimated Babel plugin.
+- JavaScript.
+
+It also depends on React Native Worklets and its Worklets Babel plugin.
 
 All of them are supposed to work correctly only within the same minor version. Therefore, having any of those pieces in your code - directly or indirectly - separate from `react-native-reanimated`, especially having any code transpiled with a different version of the aforementioned plugin will result in undefined behavior and errors.
 
 ### Failed to create a worklet
 
-**Problem:** This usually happens when Reanimated is not properly installed, e.g. forgetting to include the Reanimated Babel plugin in `babel.config.js`.
+**Problem:** This usually happens when Reanimated is not properly installed, e.g. forgetting to include the Worklets Babel plugin in `babel.config.js`.
 
-**Solution:** See installation docs at https://docs.swmansion.com/react-native-reanimated/docs/fundamentals/getting-started/#step-2-add-reanimateds-babel-plugin for more information.
+**Solution:** See installation docs at https://docs.swmansion.com/react-native-reanimated/docs/fundamentals/getting-started/#react-native-community-cli for more information.
 
 ### Native part of Reanimated doesn't seem to be initialized
 
@@ -63,7 +64,7 @@ See [Couldn't determine the version of the native part of Reanimated](#couldnt-d
 
 ### Mismatch between C++ code version and JavaScript code version
 
-See [Mismatch between JavaScript part and native part of Reanimated](#mismatch-between-javascript-part-and-native-part-of-reanimated) and [Mismatch between JavaScript code version and Reanimated Babel plugin version](https://docs.swmansion.com/react-native-worklets/docs/guides/troubleshooting#mismatch-between-javascript-code-version-and-worklets-babel-plugin-version).
+See [Mismatch between JavaScript part and native part of Reanimated](#mismatch-between-javascript-part-and-native-part-of-reanimated) and [Mismatch between JavaScript code version and Worklets Babel plugin version](https://docs.swmansion.com/react-native-worklets/docs/guides/troubleshooting#mismatch-between-javascript-code-version-and-worklets-babel-plugin-version).
 
 ### C++ side failed to resolve Java code version