Merge branch 'main' into hyphenation-normal-enum

docs/_markdown-new-architecture-warning.mdx

@@ -0,0 +1,7 @@
+:::caution
+
+This documentation is still **experimental** and details are subject to changes as we iterate. Feel free to share your feedback on the [discussion inside the working group](https://github.com/reactwg/react-native-new-architecture/discussions/8) for this page.
+
+Moreover, it contains several **manual steps**. Please note that this won't be representative of the final developer experience once the New Architecture is stable. We're working on tools, templates and libraries to help you get started fast on the New Architecture, without having to go through the whole setup.
+
+:::

docs/architecture-overview.md

@@ -3,4 +3,4 @@ id: architecture-overview
 title: Architecture Overview
 ---
 
-This section is a work in progress intended to share conceptual overviews of how React Native's architecture works. Its intended audience includes library authors, core contributors, and the exceptionally curious.
+This section is a work in progress intended to share conceptual overviews of how React Native's architecture works. Its intended audience includes library authors, core contributors, and the exceptionally curious. It is not a requirement to be familiar with this material to use React Native.

docs/new-architecture-app-intro.md

@@ -3,13 +3,9 @@ id: new-architecture-app-intro
 title: Prerequisites for Applications
 ---
 
-:::caution
-
-This documentation is still **experimental** and details are subject to changes as we iterate. Feel free to share your feedback on the [react-native-website PR](https://github.com/facebook/react-native-website) for this page.
+import NewArchitectureWarning from './\_markdown-new-architecture-warning.mdx';
 
-Moreover, it contains several **manual steps**. Please note that this won't be representative of the final developer experience once the New Architecture is stable. We're working on tools, templates and libraries to help you get started fast on the New Architecture, without having to go through the whole setup.
-
-:::
+<NewArchitectureWarning/>
 
 There’s a few prerequisites that should be addressed before the new architecture is enabled in your application.
 

docs/new-architecture-app-modules-android.md

@@ -3,13 +3,9 @@ id: new-architecture-app-modules-android
 title: Enabling TurboModule on Android
 ---
 
-:::caution
-
-This documentation is still **experimental** and details are subject to changes as we iterate. Feel free to share your feedback on the [react-native-website PR](https://github.com/facebook/react-native-website) for this page.
+import NewArchitectureWarning from './\_markdown-new-architecture-warning.mdx';
 
-Moreover, it contains several **manual steps**. Please note that this won't be representative of the final developer experience once the New Architecture is stable. We're working on tools, templates and libraries to help you get started fast on the New Architecture, without having to go through the whole setup.
-
-:::
+<NewArchitectureWarning/>
 
 Make sure your application meets all the [prerequisites](new-architecture-app-intro).
 

docs/new-architecture-app-modules-ios.md

@@ -3,13 +3,9 @@ id: new-architecture-app-modules-ios
 title: Enabling TurboModule on iOS
 ---
 
-:::caution
+import NewArchitectureWarning from './\_markdown-new-architecture-warning.mdx';
 
-This documentation is still **experimental** and details are subject to changes as we iterate. Feel free to share your feedback on the [react-native-website PR](https://github.com/facebook/react-native-website) for this page.
-
-Moreover, it contains several **manual steps**. Please note that this won't be representative of the final developer experience once the New Architecture is stable. We're working on tools, templates and libraries to help you get started fast on the New Architecture, without having to go through the whole setup.
-
-:::
+<NewArchitectureWarning/>
 
 Make sure your application meets all the [prerequisites](new-architecture-app-intro).
 

docs/new-architecture-app-renderer-android.md

@@ -3,13 +3,9 @@ id: new-architecture-app-renderer-android
 title: Enabling Fabric on Android
 ---
 
-:::caution
+import NewArchitectureWarning from './\_markdown-new-architecture-warning.mdx';
 
-This documentation is still **experimental** and details are subject to changes as we iterate. Feel free to share your feedback on the [react-native-website PR](https://github.com/facebook/react-native-website) for this page.
-
-Moreover, it contains several **manual steps**. Please note that this won't be representative of the final developer experience once the New Architecture is stable. We're working on tools, templates and libraries to help you get started fast on the New Architecture, without having to go through the whole setup.
-
-:::
+<NewArchitectureWarning/>
 
 Make sure your application meets all the [prerequisites](new-architecture-app-intro).
 

docs/new-architecture-app-renderer-ios.md

@@ -4,14 +4,9 @@ title: Enabling Fabric on iOS
 ---
 
 import M1Cocoapods from './\_markdown-m1-cocoapods.mdx';
+import NewArchitectureWarning from './\_markdown-new-architecture-warning.mdx';
 
-:::caution
-
-This documentation is still **experimental** and details are subject to changes as we iterate. Feel free to share your feedback on the [react-native-website PR](https://github.com/facebook/react-native-website) for this page.
-
-Moreover, it contains several **manual steps**. Please note that this won't be representative of the final developer experience once the New Architecture is stable. We're working on tools, templates and libraries to help you get started fast on the New Architecture, without having to go through the whole setup.
-
-:::
+<NewArchitectureWarning/>
 
 This section will go over how to enable the new renderer in your app. Make sure your application meets all the [prerequisites](new-architecture-app-intro).
 

docs/new-architecture-appendix.md

@@ -3,13 +3,9 @@ id: new-architecture-appendix
 title: Appendix
 ---
 
-:::caution
+import NewArchitectureWarning from './\_markdown-new-architecture-warning.mdx';
 
-This documentation is still **experimental** and details are subject to changes as we iterate. Feel free to share your feedback on the [react-native-website PR](https://github.com/facebook/react-native-website) for this page.
-
-Moreover, it contains several **manual steps**. Please note that this won't be representative of the final developer experience once the New Architecture is stable. We're working on tools, templates and libraries to help you get started fast on the New Architecture, without having to go through the whole setup.
-
-:::
+<NewArchitectureWarning/>
 
 ## I. Flow Type to Native Type Mapping
 

docs/new-architecture-intro.md

@@ -3,13 +3,9 @@ id: new-architecture-intro
 title: Adopting the New Architecture
 ---
 
-:::caution
+import NewArchitectureWarning from './\_markdown-new-architecture-warning.mdx';
 
-This documentation is still **experimental** and details are subject to changes as we iterate. Feel free to share your feedback on the [react-native-website PR](https://github.com/facebook/react-native-website) for this page.
-
-Moreover, it contains several **manual steps**. Please note that this won't be representative of the final developer experience once the New Architecture is stable. We're working on tools, templates and libraries to help you get started fast on the New Architecture, without having to go through the whole setup.
-
-:::
+<NewArchitectureWarning/>
 
 # Getting Started with the New Architecture
 

docs/new-architecture-library-android.md

@@ -3,13 +3,9 @@ id: new-architecture-library-android
 title: Enabling in Android Library
 ---
 
-:::caution
+import NewArchitectureWarning from './\_markdown-new-architecture-warning.mdx';
 
-This documentation is still **experimental** and details are subject to changes as we iterate. Feel free to share your feedback on the [react-native-website PR](https://github.com/facebook/react-native-website) for this page.
-
-Moreover, it contains several **manual steps**. Please note that this won't be representative of the final developer experience once the New Architecture is stable. We're working on tools, templates and libraries to help you get started fast on the New Architecture, without having to go through the whole setup.
-
-:::
+<NewArchitectureWarning/>
 
 Once you have defined the JavaScript specs for your native modules as part of the [prerequisites](new-architecture-library-intro) and followed the Android/Gradle setup, you are now ready to migrate your library to the new architecture. Here are the steps you can follow to accomplish this.
 

docs/new-architecture-library-intro.md

@@ -3,13 +3,9 @@ id: new-architecture-library-intro
 title: Prerequisites for Libraries
 ---
 
-:::caution
+import NewArchitectureWarning from './\_markdown-new-architecture-warning.mdx';
 
-This documentation is still **experimental** and details are subject to changes as we iterate. Feel free to share your feedback on the [react-native-website PR](https://github.com/facebook/react-native-website) for this page.
-
-Moreover, it contains several **manual steps**. Please note that this won't be representative of the final developer experience once the New Architecture is stable. We're working on tools, templates and libraries to help you get started fast on the New Architecture, without having to go through the whole setup.
-
-:::
+<NewArchitectureWarning/>
 
 The following steps will help ensure your modules and components are ready for the New Architecture.
 

docs/new-architecture-library-ios.md

@@ -4,14 +4,9 @@ title: Enabling in iOS Library
 ---
 
 import M1Cocoapods from './\_markdown-m1-cocoapods.mdx';
+import NewArchitectureWarning from './\_markdown-new-architecture-warning.mdx';
 
-:::caution
-
-This documentation is still **experimental** and details are subject to changes as we iterate. Feel free to share your feedback on the [react-native-website PR](https://github.com/facebook/react-native-website) for this page.
-
-Moreover, it contains several **manual steps**. Please note that this won't be representative of the final developer experience once the New Architecture is stable. We're working on tools, templates and libraries to help you get started fast on the New Architecture, without having to go through the whole setup.
-
-:::
+<NewArchitectureWarning/>
 
 You have defined the JavaScript specs for your native modules as part of the [prerequisites](new-architecture-library-intro) and you are now ready to migrate your library to the new architecture. Here are the steps you can follow to accomplish this.
 

docs/new-architecture-troubleshooting.md

@@ -3,13 +3,9 @@ id: new-architecture-troubleshooting
 title: Troubleshooting
 ---
 
-:::caution
+import NewArchitectureWarning from './\_markdown-new-architecture-warning.mdx';
 
-This documentation is still **experimental** and details are subject to changes as we iterate. Feel free to share your feedback on the [react-native-website PR](https://github.com/facebook/react-native-website) for this page.
-
-Moreover, it contains several **manual steps**. Please note that this won't be representative of the final developer experience once the New Architecture is stable. We're working on tools, templates and libraries to help you get started fast on the New Architecture, without having to go through the whole setup.
-
-:::
+<NewArchitectureWarning/>
 
 This page contains resolutions to common problem you might face when migrating to the New Architecture.
 

docs/render-pipeline.md

@@ -19,13 +19,16 @@ The render pipeline can be broken into three general phases:
 
 The render pipeline is executed in three different scenarios:
 
-1. [Initial Render](#initial-render)
-2. [React State Updates](#react-state-updates)
-3. [React Native Renderer State Updates](#react-native-renderer-state-updates)
+- [Initial Render](#initial-render)
+  - [Phase 1. Render](#phase-1-render)
+  - [Phase 2. Commit](#phase-2-commit)
+  - [Phase 3. Mount](#phase-3-mount)
+- [React State Updates](#react-state-updates)
+- [React Native Renderer State Updates](#react-native-renderer-state-updates)
 
 ---
 
-### Initial Render
+## Initial Render
 
 Imagine you want to render the following:
 
@@ -41,7 +44,9 @@ function MyComponent() {
 // <MyComponent />
 ```
 
-In the example above, `<MyComponent />` is a [React Element](architecture-glossary#react-element-tree-and-react-element). React recursively reduces this _React Element_ to a terminal [React Host Component](architecture-glossary#host-view-tree-and-host-view) by invoking it (or its `render` method if implemented with a JavaScript class) until every _React Element_ cannot be reduced any further. Now you have a _React Element Tree_ of [React Host Components](architecture-glossary#react-host-components-or-host-components).
+In the example above, `<MyComponent />` is a [React Element](architecture-glossary#react-element-tree-and-react-element). React recursively reduces this _React Element_ to a terminal [React Host Component](architecture-glossary#react-host-components-or-host-components) by invoking it (or its `render` method if implemented with a JavaScript class) until every _React Element_ cannot be reduced any further. Now you have a _React Element Tree_ of [React Host Components](architecture-glossary#react-host-components-or-host-components).
+
+### Phase 1. Render
 
 ![Phase one: render](/docs/assets/Architecture/renderer-pipeline/phase-one-render.png)
 
@@ -62,6 +67,8 @@ In the example above, the result of the render phase looks like this:
 
 After the _React Shadow Tree_ is complete, the renderer triggers a commit of the _React Element Tree_.
 
+### Phase 2. Commit
+
 ![Phase two: commit](/docs/assets/Architecture/renderer-pipeline/phase-two-commit.png)
 
 The commit phase consists of two operations: _Layout Calculation_ and _Tree Promotion_.
@@ -77,7 +84,9 @@ The commit phase consists of two operations: _Layout Calculation_ and _Tree Prom
 - These operations are asynchronously executed on a background thread.
 - Majority of layout calculation executes entirely within C++. However, the layout calculation of some components depend on the _host platform_ (e.g. `Text`, `TextInput`, etc.). Size and position of text is specific to each _host platform_ and needs to be calculated on the _host platform_ layer. For this purpose, Yoga invokes a function defined in the _host platform_ to calculate the component’s layout.
 
-![Phase two: commit](/docs/assets/Architecture/renderer-pipeline/phase-three-mount.png)
+### Phase 3. Mount
+
+![Phase three: mount](/docs/assets/Architecture/renderer-pipeline/phase-three-mount.png)
 
 The mount phase transforms the _React Shadow Tree_ (which now contains data from layout calculation) into a _Host_ _View Tree_ with rendered pixels on the screen. As a reminder, the _React Element Tree_ looks like this:
 
@@ -106,7 +115,7 @@ In more detail, the mounting phase consists of these three steps:
 
 ---
 
-### React State Updates
+## React State Updates
 
 Let’s explore each phase of the render pipeline when the state of a _React Element Tree_ is updated. Let’s say, you’ve rendered the following component in an initial render:
 
@@ -189,7 +198,7 @@ After React creates the new _React Element Tree_ and _React Shadow Tree_, it mus
 
 ---
 
-### React Native Renderer State Updates
+## React Native Renderer State Updates
 
 For most information in the _Shadow Tree_, React is the single owner and single source of truth. All data originates from React and there is a single-direction flow of data.
 

website/docusaurus.config.js

@@ -152,6 +152,14 @@ const lastVersion = versions[0];
   themeConfig:
     /** @type {import('@docusaurus/preset-classic').ThemeConfig} */
     ({
+      announcementBar: {
+        id: 'support_ukraine',
+        content:
+          'Support Ukraine 🇺🇦 <a target="_blank" rel="noopener noreferrer" href="https://opensource.facebook.com/support-ukraine"> Help Provide Humanitarian Aid to Ukraine</a>.',
+        backgroundColor: '#20232a',
+        textColor: '#fff',
+        isCloseable: false,
+      },
       prism: {
         defaultLanguage: 'jsx',
         theme: require('./core/PrismTheme'),

website/src/css/customTheme.scss

@@ -277,6 +277,11 @@ hr {
     background-color: var(--light);
   }
 
+  div[class^="codeBlockContent"] {
+    display: inline-grid;
+    min-width: 100%;
+  }
+
   div[class^="codeBlockLines"] {
     font-size: 80%;
   }

website/versioned_docs/version-0.66/render-pipeline.md

@@ -19,13 +19,16 @@ The render pipeline can be broken into three general phases:
 
 The render pipeline is executed in three different scenarios:
 
-1. [Initial Render](#initial-render)
-2. [React State Updates](#react-state-updates)
-3. [React Native Renderer State Updates](#react-native-renderer-state-updates)
+- [Initial Render](#initial-render)
+  - [Phase 1. Render](#phase-1-render)
+  - [Phase 2. Commit](#phase-2-commit)
+  - [Phase 3. Mount](#phase-3-mount)
+- [React State Updates](#react-state-updates)
+- [React Native Renderer State Updates](#react-native-renderer-state-updates)
 
 ---
 
-### Initial Render
+## Initial Render
 
 Imagine you want to render the following:
 
@@ -41,7 +44,9 @@ function MyComponent() {
 // <MyComponent />
 ```
 
-In the example above, `<MyComponent />` is a [React Element](architecture-glossary#react-element-tree-and-react-element). React recursively reduces this _React Element_ to a terminal [React Host Component](architecture-glossary#host-view-tree-and-host-view) by invoking it (or its `render` method if implemented with a JavaScript class) until every _React Element_ cannot be reduced any further. Now you have a _React Element Tree_ of [React Host Components](architecture-glossary#react-host-components-or-host-components).
+In the example above, `<MyComponent />` is a [React Element](architecture-glossary#react-element-tree-and-react-element). React recursively reduces this _React Element_ to a terminal [React Host Component](architecture-glossary#react-host-components-or-host-components) by invoking it (or its `render` method if implemented with a JavaScript class) until every _React Element_ cannot be reduced any further. Now you have a _React Element Tree_ of [React Host Components](architecture-glossary#react-host-components-or-host-components).
+
+### Phase 1. Render
 
 ![Phase one: render](/docs/assets/Architecture/renderer-pipeline/phase-one-render.png)
 
@@ -62,6 +67,8 @@ In the example above, the result of the render phase looks like this:
 
 After the _React Shadow Tree_ is complete, the renderer triggers a commit of the _React Element Tree_.
 
+### Phase 2. Commit
+
 ![Phase two: commit](/docs/assets/Architecture/renderer-pipeline/phase-two-commit.png)
 
 The commit phase consists of two operations: _Layout Calculation_ and _Tree Promotion_.
@@ -77,7 +84,9 @@ The commit phase consists of two operations: _Layout Calculation_ and _Tree Prom
 - These operations are asynchronously executed on a background thread.
 - Majority of layout calculation executes entirely within C++. However, the layout calculation of some components depend on the _host platform_ (e.g. `Text`, `TextInput`, etc.). Size and position of text is specific to each _host platform_ and needs to be calculated on the _host platform_ layer. For this purpose, Yoga invokes a function defined in the _host platform_ to calculate the component’s layout.
 
-![Phase two: commit](/docs/assets/Architecture/renderer-pipeline/phase-three-mount.png)
+### Phase 3. Mount
+
+![Phase three: mount](/docs/assets/Architecture/renderer-pipeline/phase-three-mount.png)
 
 The mount phase transforms the _React Shadow Tree_ (which now contains data from layout calculation) into a _Host_ _View Tree_ with rendered pixels on the screen. As a reminder, the _React Element Tree_ looks like this:
 
@@ -106,7 +115,7 @@ In more detail, the mounting phase consists of these three steps:
 
 ---
 
-### React State Updates
+## React State Updates
 
 Let’s explore each phase of the render pipeline when the state of a _React Element Tree_ is updated. Let’s say, you’ve rendered the following component in an initial render:
 
@@ -189,7 +198,7 @@ After React creates the new _React Element Tree_ and _React Shadow Tree_, it mus
 
 ---
 
-### React Native Renderer State Updates
+## React Native Renderer State Updates
 
 For most information in the _Shadow Tree_, React is the single owner and single source of truth. All data originates from React and there is a single-direction flow of data.