feat: docs update (#8631)

## Summary

Updating docs in Reanimated and Worklets to fix outdated info about
Reanimated Babel Plugin and the like.

## Test plan

🚀

Author: tjzel

.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
 

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

@@ -48,18 +48,15 @@ Install `react-native-reanimated` and `react-native-worklets` packages from npm:
 #### Dependencies
 
 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 +66,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>
 
@@ -107,26 +100,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,14 +139,10 @@ 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>
 

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
 

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

@@ -6,11 +6,11 @@ sidebar_position: 1
 
 # Worklets
 
-Worklets are short-running JavaScript functions that can run on the [UI thread](/docs/fundamentals/glossary#ui-thread). Reanimated uses worklets to calculate view styles and react to events on the UI thread.
+Worklet is a short-running JavaScript function that can be moved and executed across different Javascript Runtimes. Reanimated uses worklets to calculate view styles and react to events on the UI thread.
 
 ## Defining worklets
 
-You can create your own worklets using the `'worklet';` directive at the top of a function.
+You can create your own worklets using the `'worklet'` directive at the top of a function.
 
 ```javascript
 function myWorklet() {
@@ -21,7 +21,7 @@ function myWorklet() {
 
 ## Workletization
 
-The [Reanimated Babel Plugin](https://github.com/software-mansion/react-native-reanimated/blob/main/packages/react-native-worklets/plugin/README-dev.md#basics) looks for functions marked with the `'worklet'` directive and converts them into serializable objects. We call this process [workletization](/docs/fundamentals/glossary#to-workletize). These objects can then be copied and run over on the UI thread.
+The [Worklets Babel plugin](https://docs.swmansion.com/react-native-worklets/docs/worklets-babel-plugin/about) looks for functions marked with the `'worklet'` directive and converts them into serializable objects. We call this process [workletization](/docs/fundamentals/glossary#to-workletize). These objects can then be copied and run over on the UI thread.
 
 Most of the time when working with Reanimated and [Gesture Handler](https://docs.swmansion.com/react-native-gesture-handler/) the code is automatically workletized and run on the UI thread by default.
 
@@ -36,9 +36,9 @@ function App() {
 }
 ```
 
-## Running worklets on the UI thread
+## Running worklets on the UI Runtime (UI Thread)
 
-You can use [`runOnUI`](https://docs.swmansion.com/react-native-worklets/docs/threading/runOnUI) to manually schedule worklet execution on the UI thread:
+You can use [`scheduleOnUI`](https://docs.swmansion.com/react-native-worklets/docs/threading/scheduleOnUI) to manually schedule worklet execution on the UI Runtime:
 
 ```javascript
 function myWorklet() {
@@ -47,7 +47,7 @@ function myWorklet() {
 }
 
 function onPress() {
-  runOnUI(myWorklet)();
+  scheduleOnUI(myWorklet);
 }
 ```
 
@@ -60,13 +60,13 @@ function myWorklet(greeting) {
 }
 
 function onPress() {
-  runOnUI(myWorklet)('Howdy');
+  scheduleOnUI(myWorklet, 'Howdy');
 }
 ```
 
 ## Running functions from worklets
 
-You can run functions on the JS thread from the UI thread with [`runOnJS`](https://docs.swmansion.com/react-native-worklets/docs/threading/runOnJS). Most frequently used to call functions that aren't marked with a `'worklet';` directive (i.e. most third-party libraries) or to update the React state.
+You can run functions on the RN Runtime (JS thread) from the UI Runtime (UI thread) with [`scheduleOnRN`](https://docs.swmansion.com/react-native-worklets/docs/threading/scheduleOnRN). Most frequently used to call functions that aren't marked with a `'worklet';` directive (i.e. most third-party libraries) or to update the React state.
 
 ```javascript
 import { router } from 'expo-router';
@@ -76,26 +76,26 @@ function App() {
   const tap = Gesture.Tap().onEnd(() => {
     // i'm a worklet too!
     // highlight-next-line
-    runOnJS(router.back)();
+    scheduleOnRN(router.back);
   });
 }
 ```
 
-Functions passed to `runOnJS` must be defined in the [JavaScript thread](/docs/fundamentals/glossary#javascript-thread) scope, i.e. in the component body or the global scope. This code won't work because `myFunction` is defined in the `withTiming` callback, which is only executed in the [UI thread](/docs/fundamentals/glossary#ui-thread):
+Functions passed to `scheduleOnRN` must be defined in the [JavaScript thread](/docs/fundamentals/glossary#javascript-thread) scope, i.e. in the component body or the global scope. This code won't work because `myFunction` is defined in the `withTiming` callback, which is only executed in the [UI Runtime](https://docs.swmansion.com/react-native-worklets/docs/fundamentals/glossary#ui-runtime):
 
 ```javascript
 function App() {
   const tap = Gesture.Tap().onEnd(() => {
-    // myFunction is defined on the UI thread 🚨
+    // myFunction is defined on the UI runtime 🚨
     const myFunction = () => {};
-    runOnJS(myFunction)(); // 💥
+    scheduleOnRN(myFunction); // 💥
   });
 }
 ```
 
 ## Hoisting
 
-Functions marked with `'worklet';` aren't [hoisted](https://developer.mozilla.org/en-US/docs/Glossary/Hoisting). Besides affecting hoisting, the `'worklet';` directive has no effect on the [JavaScript thread](/docs/fundamentals/glossary#javascript-thread).
+Functions marked with `'worklet'` aren't [hoisted](https://developer.mozilla.org/en-US/docs/Glossary/Hoisting). Besides affecting hoisting, the `'worklet'` directive has no effect on the [RN Runtime](https://docs.swmansion.com/react-native-worklets/docs/fundamentals/glossary#react-native-runtime-rn-runtime).
 
 ## Capturing closure
 
@@ -173,10 +173,10 @@ function App() {
 
 There's no separate UI thread available on the Web. Because of that, when Reanimated runs in the browser, worklets are resolved to plain JavaScript functions.
 
-However, the `'worklet';` directive is still necessary on the Web, because Reanimated relies on the Babel plugin to capture dependencies inside worklet functions.
+However, the `'worklet'` directive is still necessary on the Web, because Reanimated relies on the Worklets Babel plugin to capture dependencies inside worklet functions.
 
 ## Other worklet runtimes
 
-Worklets can run in other runtimes than the one provided by Reanimated. For example [VisionCamera](https://github.com/mrousavy/react-native-vision-camera) and [LiveMarkdown](https://github.com/Expensify/react-native-live-markdown) create their own worklet runtimes.
+Worklets can run in other runtimes than the one provided by React Native Worklets. For example [VisionCamera](https://github.com/mrousavy/react-native-vision-camera) and [LiveMarkdown](https://github.com/Expensify/react-native-live-markdown) create their own worklet runtimes.
 
 You can create your own worklet runtimes with [`createWorkletRuntime`](https://docs.swmansion.com/react-native-worklets/docs/threading/createWorkletRuntime) function.