Merge branch 'main' into sync-2639f369

Author: orama254

package.json

@@ -47,7 +47,7 @@
     "remark-gfm": "^3.0.1"
   },
   "devDependencies": {
-    "@babel/core": "^7.12.9",
+    "@babel/core": "^7.29.6",
     "@babel/plugin-transform-modules-commonjs": "^7.18.6",
     "@babel/preset-react": "^7.18.6",
     "@mdx-js/mdx": "^2.1.3",
@@ -67,7 +67,7 @@
     "babel-eslint": "10.x",
     "babel-plugin-react-compiler": "^1.0.0",
     "chalk": "4.1.2",
-    "esbuild": "^0.25.0",
+    "esbuild": "^0.28.1",
     "eslint": "7.x",
     "eslint-config-next": "12.0.3",
     "eslint-config-react-app": "^5.2.1",
@@ -91,7 +91,7 @@
     "postcss-flexbugs-fixes": "4.2.1",
     "postcss-preset-env": "^6.7.0",
     "prettier": "^2.5.1",
-    "react-server-dom-webpack": "^19.2.4",
+    "react-server-dom-webpack": "^19.2.5",
     "reading-time": "^1.2.0",
     "remark": "^12.0.1",
     "remark-external-links": "^7.0.0",

src/content/learn/tutorial-tic-tac-toe.md

@@ -337,11 +337,7 @@ import './styles.css';
 import App from './App';
 ```
 
-<<<<<<< HEAD
 Mstari wa 1-5 unaleta vipande vyote muhimu pamoja:
-=======
-Lines 1-5 bring all the necessary pieces together:
->>>>>>> 2639f369946f763fff9a2572b0d7c4b9e2f83ebd
 
 * React
 * Maktaba ya React ya kuwasiliana na kivinjari cha wavuti (React DOM)
@@ -555,11 +551,7 @@ export default function Board() {
 }
 ```
 
-<<<<<<< HEAD
 Angalia jinsi, kinyume na `div`s za kivinjari, viungo vyako `Board` na `Square` lazima vianze na herufi kubwa.
-=======
-Note how unlike the browser `div`s, your own components `Board` and `Square` must start with a capital letter.
->>>>>>> 2639f369946f763fff9a2572b0d7c4b9e2f83ebd
 
 Hebu tuangalie:
 
@@ -907,33 +899,17 @@ body {
 
 ### React Developer Tools za {/*react-developer-tools*/}
 
-<<<<<<< HEAD
 React DevTools hukuruhusu kuangalia *props* na *state* za vipengele vyako vya React. Unaweza kupata kichupo cha React DevTools chini ya sehemu ya *browser* katika CodeSandbox:
 
 ![React DevTools katika CodeSandbox](../images/tutorial/codesandbox-devtools.png)
 
 Ili kuchunguza kipengele fulani kwenye skrini, tumia kitufe kilicho kwenye kona ya juu kushoto ya React DevTools:
 
 ![Kuchagua vipengele kwenye ukurasa na React DevTools](../images/tutorial/devtools-select.gif)
-=======
-React Developer Tools let you check the props and the state of your React components. It is available as a [Chrome](https://chrome.google.com/webstore/detail/react-developer-tools/fmkadmapgofadopljbjfkapdkoienihi?hl=en), [Firefox](https://addons.mozilla.org/en-US/firefox/addon/react-devtools/), and [Edge](https://microsoftedge.microsoft.com/addons/detail/react-developer-tools/gpphkfbcpidddadnkolkpfckpihlkkil) browser extension.
-
-After you install it, a new *Components* tab will appear in your browser Developer Tools for sites using React. If you're following along in CodeSandbox, you'd need to first open your sandbox preview in a new tab:
-
-![opening in new tab](../images/tutorial/sandbox-new-tab.png)
-
-Then, on the preview page, open your browser's DevTools and find the *Components* tab:
->>>>>>> 2639f369946f763fff9a2572b0d7c4b9e2f83ebd
 
 ![components tab](../images/tutorial/components-tab.png)
 
-<<<<<<< HEAD
 Kwa maendeleo ya ndani (local development), React DevTools inapatikana kama [Chrome](https://chrome.google.com/webstore/detail/react-developer-tools/fmkadmapgofadopljbjfkapdkoienihi?hl=en), [Firefox](https://addons.mozilla.org/en-US/firefox/addon/react-devtools/), na [Edge](https://microsoftedge.microsoft.com/addons/detail/react-developer-tools/gpphkfbcpidddadnkolkpfckpihlkkil) *browser extension*. Isakinishe, na kichupo cha *Components* kitaonekana kwenye Zana za Watengenezaji wa kivinjari chako kwa tovuti zinazotumia React.
-=======
-To inspect a particular component on the screen, use the button in the top left corner of the Components tab:
-
-![inspecting with devtools](../images/tutorial/devtools-inspect.gif)
->>>>>>> 2639f369946f763fff9a2572b0d7c4b9e2f83ebd
 
 
 ## Kukamilisha Mchezo {/*completing-the-game*/}
@@ -1117,11 +1093,7 @@ function Square({ value, onSquareClick }) {
 }
 ```
 
-<<<<<<< HEAD
 Sasa utaunganisha kipengele cha `onSquareClick` na function katika sehemu ya `Board` utakayoita `handleClick`. Ili kuunganisha `onSquareClick` na `handleClick`, utapita function kwa kipengele cha `onSquareClick` cha sehemu ya kwanza ya `Square`:
-=======
-Now you'll connect the `onSquareClick` prop to a function in the `Board` component that you'll name `handleClick`. To connect `onSquareClick` to `handleClick` you'll pass a function to the `onSquareClick` prop of the first `Square` component:
->>>>>>> 2639f369946f763fff9a2572b0d7c4b9e2f83ebd
 
 ```js
 export default function Board() {
@@ -2100,22 +2072,13 @@ export default function Game() {
 }
 ```
 
-<<<<<<< HEAD
 Unaweza kuona jinsi kanuni yako inavyopaswa kuonekana hapa chini. Kumbuka kwamba unapaswa kuona hitilafu katika koni ya zana za mende inayosema:
-=======
-You can see what your code should look like below. Note that you should see an error in the developer tools console that says:
->>>>>>> 2639f369946f763fff9a2572b0d7c4b9e2f83ebd
 
 <ConsoleBlock level="warning">
 Warning: Each child in an array or iterator should have a unique "key" prop. Check the render method of &#96;Game&#96;.
 </ConsoleBlock>
-<<<<<<< HEAD
   
 Utarekebisha hitilafu hii katika sehemu inayofuata.
-=======
-
-You'll fix this error in the next section.
->>>>>>> 2639f369946f763fff9a2572b0d7c4b9e2f83ebd
 
 <Sandpack>
 

src/content/reference/react/Fragment.md

@@ -38,7 +38,13 @@ Wrap elements in `<Fragment>` to group them together in situations where you nee
 
 * React does not [reset state](/learn/preserving-and-resetting-state) when you go from rendering `<><Child /></>` to `[<Child />]` or back, or when you go from rendering `<><Child /></>` to `<Child />` and back. This only works a single level deep: for example, going from `<><><Child /></></>` to `<Child />` resets the state. See the precise semantics [here.](https://gist.github.com/clemmy/b3ef00f9507909429d8aa0d3ee4f986b)
 
-* <CanaryBadge /> If you want to pass `ref` to a Fragment, you can't use the `<>...</>` syntax. You have to explicitly import `Fragment` from `'react'` and render `<Fragment ref={yourRef}>...</Fragment>`.
+**Layout methods:**
+- `compareDocumentPosition(otherNode)`: Compares the document position of the Fragment with another node.
+  - If the Fragment has children, the native `compareDocumentPosition` value is returned.
+  - Empty Fragments will attempt to compare positioning within the React tree and include `Node.DOCUMENT_POSITION_IMPLEMENTATION_SPECIFIC`.
+  - Elements that have a different relationship in the React tree and DOM tree due to portaling or other insertions are `Node.DOCUMENT_POSITION_IMPLEMENTATION_SPECIFIC`.
+- `getClientRects()`: Returns a flat array of `DOMRect` objects representing the bounding rectangles of all children.
+- `getRootNode()`: Returns the root node containing the Fragment's parent DOM node.
 
 ---
 
@@ -759,12 +765,10 @@ function VisibleGroup({ onVisibilityChange, children }) {
         onVisibilityChange(visibleElements.size > 0);
       }
     );
-    const fragmentInstance = fragmentRef.current;
-    fragmentInstance.observeUsing(observer);
-    return () => {
-      fragmentInstance.unobserveUsing(observer);
-    };
-  }, [onVisibilityChange]);
+
+    fragmentRef.current.observeUsing(observer);
+    return () => fragmentRef.current.unobserveUsing(observer);
+  }, [threshold, onVisibilityChange]);
 
   return (
     <Fragment ref={fragmentRef}>

src/content/reference/react/use.md

@@ -1314,7 +1314,12 @@ function Albums({ albumsPromise }) {
 </ErrorBoundary>
 ```
 
----
+```jsx
+function Albums({ albumsPromise }) {
+  // ✅ Call `use` without try-catch
+  const albums = use(albumsPromise);
+  // ...
+```
 
 ### I'm getting a warning: "A component was suspended by an uncached promise" {/*uncached-promise-error*/}
 
@@ -1332,9 +1337,11 @@ function Albums() {
 
 To fix this, cache the Promise so the same instance is reused:
 
-```js
-// ✅ fetchData returns the same Promise for the same URL
-const albums = use(fetchData('/albums'));
+```jsx
+function MessageComponent({messagePromise}) {
+  // ✅ `use` is being called from a component.
+  const message = use(messagePromise);
+  // ...
 ```
 
 See [caching Promises for Client Components](#caching-promises-for-client-components) for more details.