Merge remote-tracking branch 'upstream/main' into production

Author: sunnylqm

docs/debugging-native-code.md

@@ -50,7 +50,7 @@ adb logcat "*:S" ReactNative:V ReactNativeJS:V YourModuleName:D
 
 In your native module, use `NSLog` for custom logs:
 
-```objective-c
+```objectivec
 NSLog(@"YourModuleName: %@", message);
 ```
 

docs/images.md

@@ -30,7 +30,7 @@ You can use the `@2x` and `@3x` suffixes to provide images for different screen
 <Image source={require('./img/check.png')} />
 ```
 
-...the bundler will bundle and serve the image corresponding to device's screen density. For example, `check@2x.png`, will be used on an iPhone 7, while`check@3x.png` will be used on an iPhone 7 Plus or a Nexus 5. If there is no image matching the screen density, the closest best option will be selected.
+...the bundler will bundle and serve the image corresponding to device's screen density. For example, `check@2x.png`, will be used on an iPhone 7, while `check@3x.png` will be used on an iPhone 7 Plus or a Nexus 5. If there is no image matching the screen density, the closest best option will be selected.
 
 On Windows, you might need to restart the bundler if you add new images to your project.
 

docs/intro-react.md

@@ -22,7 +22,6 @@ If you want to dig deeper, we encourage you to check out [React’s official doc
 The rest of this introduction to React uses cats in its examples: friendly, approachable creatures that need names and a cafe to work in. Here is your very first Cat component:
 
 ```SnackPlayer name=Your%20Cat
-import React from 'react';
 import {Text} from 'react-native';
 
 const Cat = () => {
@@ -32,10 +31,9 @@ const Cat = () => {
 export default Cat;
 ```
 
-Here is how you do it: To define your `Cat` component, first use JavaScript’s [`import`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/import) to import React and React Native’s [`Text`](/docs/next/text) Core Component:
+Here is how you do it: To define your `Cat` component, first use JavaScript’s [`import`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/import) to import React Native’s [`Text`](/docs/next/text) Core Component:
 
 ```tsx
-import React from 'react';
 import {Text} from 'react-native';
 ```
 
@@ -76,7 +74,6 @@ Now take a closer look at that `return` statement. `<Text>Hello, I am your cat!<
 React and React Native use **JSX,** a syntax that lets you write elements inside JavaScript like so: `<Text>Hello, I am your cat!</Text>`. The React docs have [a comprehensive guide to JSX](https://react.dev/learn/writing-markup-with-jsx) you can refer to learn even more. Because JSX is JavaScript, you can use variables inside it. Here you are declaring a name for the cat, `name`, and embedding it with curly braces inside `<Text>`.
 
 ```SnackPlayer name=Curly%20Braces
-import React from 'react';
 import {Text} from 'react-native';
 
 const Cat = () => {
@@ -93,7 +90,6 @@ Any JavaScript expression will work between curly braces, including function cal
 <TabItem value="javascript">
 
 ```SnackPlayer name=Curly%20Braces&ext=js
-import React from 'react';
 import {Text} from 'react-native';
 
 const getFullName = (firstName, secondName, thirdName) => {
@@ -111,7 +107,6 @@ export default Cat;
 <TabItem value="typescript">
 
 ```SnackPlayer name=Curly%20Braces&ext=tsx
-import React from 'react';
 import {Text} from 'react-native';
 
 const getFullName = (
@@ -134,18 +129,13 @@ export default Cat;
 
 You can think of curly braces as creating a portal into JS functionality in your JSX!
 
-:::tip
-Because JSX is included in the React library, it won’t work if you don’t have `import React from 'react'` at the top of your file!
-:::
-
 ## Custom Components
 
 You’ve already met [React Native’s Core Components](intro-react-native-components). React lets you nest these components inside each other to create new components. These nestable, reusable components are at the heart of the React paradigm.
 
 For example, you can nest [`Text`](text) and [`TextInput`](textinput) inside a [`View`](view) below, and React Native will render them together:
 
 ```SnackPlayer name=Custom%20Components
-import React from 'react';
 import {Text, TextInput, View} from 'react-native';
 
 const Cat = () => {
@@ -190,7 +180,6 @@ On Android, you usually put your views inside `LinearLayout`, `FrameLayout`, `Re
 You can render this component multiple times and in multiple places without repeating your code by using `<Cat>`:
 
 ```SnackPlayer name=Multiple%20Components
-import React from 'react';
 import {Text, View} from 'react-native';
 
 const Cat = () => {
@@ -227,7 +216,6 @@ You can put as many cats in your cafe as you like. Each `<Cat>` renders a unique
 <TabItem value="javascript">
 
 ```SnackPlayer name=Multiple%20Props&ext=js
-import React from 'react';
 import {Text, View} from 'react-native';
 
 const Cat = props => {
@@ -255,7 +243,6 @@ export default Cafe;
 <TabItem value="typescript">
 
 ```SnackPlayer name=Multiple%20Props&ext=tsx
-import React from 'react';
 import {Text, View} from 'react-native';
 
 type CatProps = {
@@ -289,7 +276,6 @@ export default Cafe;
 Most of React Native’s Core Components can be customized with props, too. For example, when using [`Image`](image), you pass it a prop named [`source`](image#source) to define what image it shows:
 
 ```SnackPlayer name=Props
-import React from 'react';
 import {Text, View, Image} from 'react-native';
 
 const CatApp = () => {
@@ -333,7 +319,7 @@ You can add state to a component by calling [React’s `useState` Hook](https://
 <TabItem value="javascript">
 
 ```SnackPlayer name=State&ext=js
-import React, {useState} from 'react';
+import {useState} from 'react';
 import {Button, Text, View} from 'react-native';
 
 const Cat = props => {
@@ -371,7 +357,7 @@ export default Cafe;
 <TabItem value="typescript">
 
 ```SnackPlayer name=State&ext=tsx
-import React, {useState} from 'react';
+import {useState} from 'react';
 import {Button, Text, View} from 'react-native';
 
 type CatProps = {
@@ -415,7 +401,7 @@ export default Cafe;
 First, you will want to import `useState` from React like so:
 
 ```tsx
-import React, {useState} from 'react';
+import {useState} from 'react';
 ```
 
 Then you declare the component’s state by calling `useState` inside its function. In this example, `useState` creates an `isHungry` state variable:

docs/network.md

@@ -15,13 +15,13 @@ React Native provides the [Fetch API](https://developer.mozilla.org/en-US/docs/W
 
 In order to fetch content from an arbitrary URL, you can pass the URL to fetch:
 
-```tsx
+```ts
 fetch('https://mywebsite.com/mydata.json');
 ```
 
 Fetch also takes an optional second argument that allows you to customize the HTTP request. You may want to specify additional headers, or make a POST request:
 
-```tsx
+```ts
 fetch('https://mywebsite.com/endpoint/', {
   method: 'POST',
   headers: {
@@ -43,7 +43,7 @@ The above examples show how you can make a request. In many cases, you will want
 
 Networking is an inherently asynchronous operation. Fetch method will return a [Promise](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise) that makes it straightforward to write code that works in an asynchronous manner:
 
-```tsx
+```ts
 const getMoviesFromApi = () => {
   return fetch('https://reactnative.dev/movies.json')
     .then(response => response.json())
@@ -58,7 +58,7 @@ const getMoviesFromApi = () => {
 
 You can also use the `async` / `await` syntax in a React Native app:
 
-```tsx
+```ts
 const getMoviesFromApiAsync = async () => {
   try {
     const response = await fetch(
@@ -199,7 +199,7 @@ On Android, as of API Level 28, clear text traffic is also blocked by default. T
 
 The [XMLHttpRequest API](https://developer.mozilla.org/en-US/docs/Web/API/XMLHttpRequest) is built into React Native. This means that you can use third party libraries such as [frisbee](https://github.com/niftylettuce/frisbee) or [axios](https://github.com/axios/axios) that depend on it, or you can use the XMLHttpRequest API directly if you prefer.
 
-```tsx
+```ts
 const request = new XMLHttpRequest();
 request.onreadystatechange = e => {
   if (request.readyState !== 4) {
@@ -225,7 +225,7 @@ The security model for XMLHttpRequest is different than on web as there is no co
 
 React Native also supports [WebSockets](https://developer.mozilla.org/en-US/docs/Web/API/WebSocket), a protocol which provides full-duplex communication channels over a single TCP connection.
 
-```tsx
+```ts
 const ws = new WebSocket('ws://host.com/path');
 
 ws.onopen = () => {

docs/timers.md

@@ -33,7 +33,7 @@ One reason why well-built native apps feel so smooth is by avoiding expensive op
 
 Applications can schedule tasks to run after interactions with the following:
 
-```tsx
+```ts
 InteractionManager.runAfterInteractions(() => {
   // ...long-running synchronous task...
 });
@@ -49,7 +49,7 @@ The touch handling system considers one or more active touches to be an 'interac
 
 `InteractionManager` also allows applications to register animations by creating an interaction 'handle' on animation start, and clearing it upon completion:
 
-```tsx
+```ts
 const handle = InteractionManager.createInteractionHandle();
 // run animation... (`runAfterInteractions` tasks are queued)
 // later, on animation completion:

plugins/remark-codeblock-language-as-title/src/index.ts

@@ -7,18 +7,44 @@
 
 import {Root} from 'mdast';
 
+const LANGUAGES_MAP: Record<string, string> = {
+  js: 'JavaScript',
+  javascript: 'JavaScript',
+  ts: 'TypeScript',
+  typescript: 'TypeScript',
+  jsx: 'React JSX',
+  tsx: 'React TSX',
+  json: 'JSON',
+  objc: 'Objective-C',
+  objectivec: 'Objective-C',
+  xml: 'XML',
+  css: 'CSS',
+  cpp: 'C++',
+};
+
+const HIDDEN_TITLES = ['zsh', 'sh', 'shell', 'bash', 'powershell'];
+
+function capitalizeFirstLetter(str: string | null) {
+  if (!str) {
+    return str;
+  }
+  return str[0].toUpperCase() + str.slice(1);
+}
+
 export default function codeblockLanguageAsTitleRemarkPlugin() {
   return async (root: Root) => {
     const {visit} = await import('unist-util-visit');
     visit(root, 'code', node => {
-      if (node.lang && !['shell', 'bash'].includes(node.lang)) {
+      if (node.lang && !HIDDEN_TITLES.includes(node.lang)) {
+        const formattedTitle =
+          LANGUAGES_MAP[node.lang] ?? capitalizeFirstLetter(node.lang);
         if (node.meta) {
           if (node.meta.includes('title=')) {
             return;
           }
-          node.meta = `title="${node.lang}" ${node.meta}`;
+          node.meta = `title="${formattedTitle}" ${node.meta}`;
         } else {
-          node.meta = `title="${node.lang}"`;
+          node.meta = `title="${formattedTitle}"`;
         }
       }
     });

website/architecture/bundled-hermes.md

@@ -119,9 +119,9 @@ To implement this on Android, we've added a new build inside the `/ReactAndroid/
 You can now trigger a build of Hermes engine by invoking:
 
 ```bash
-// Build a debug version of Hermes
+# Build a debug version of Hermes
 ./gradlew :ReactAndroid:hermes-engine:assembleDebug
-// Build a release version of Hermes
+# Build a release version of Hermes
 ./gradlew :ReactAndroid:hermes-engine:assembleRelease
 ```
 
@@ -133,7 +133,7 @@ On the Gradle consumer side, we also shipped a small improvement on the consumer
 
 However, this made this line necessary in the template:
 
-```
+```groovy
 exclude group:'com.facebook.fbjni'
 ```
 

website/versioned_docs/version-0.77/debugging-native-code.md

@@ -50,7 +50,7 @@ adb logcat "*:S" ReactNative:V ReactNativeJS:V YourModuleName:D
 
 In your native module, use `NSLog` for custom logs:
 
-```objective-c
+```objectivec
 NSLog(@"YourModuleName: %@", message);
 ```
 

website/versioned_docs/version-0.77/images.md

@@ -30,7 +30,7 @@ You can use the `@2x` and `@3x` suffixes to provide images for different screen
 <Image source={require('./img/check.png')} />
 ```
 
-...the bundler will bundle and serve the image corresponding to device's screen density. For example, `check@2x.png`, will be used on an iPhone 7, while`check@3x.png` will be used on an iPhone 7 Plus or a Nexus 5. If there is no image matching the screen density, the closest best option will be selected.
+...the bundler will bundle and serve the image corresponding to device's screen density. For example, `check@2x.png`, will be used on an iPhone 7, while `check@3x.png` will be used on an iPhone 7 Plus or a Nexus 5. If there is no image matching the screen density, the closest best option will be selected.
 
 On Windows, you might need to restart the bundler if you add new images to your project.