netlify[bot]
commented
3 months ago Deploy Preview for react-native ready!
| Name | Link |
|---|---|
| Latest commit | af6fc168af3b547cc31ec451a385834f1165f47a |
| Latest deploy log | https://app.netlify.com/sites/react-native/deploys/6606f145a4b78600089b778c |
| Deploy Preview | https://deploy-preview-4072--react-native.netlify.app |
| Preview on mobile | Toggle QR Code...Use your smartphone camera to open QR code link. |
To edit notification comments on pull requests, go to your Netlify site configuration.
slorber
cortinico
Simek
TLDR
Upgrading to Docusaurus v3.2 gives the immediate following benefits:
Is it safe to upgrade?
It should, it's a minor version that does not include any breaking changes.
And I ran visual regression tests comparing prod vs deploy preview to ensure nothing visual is impacted by the upgrade.
https://github.com/slorber/rnw-visual-tests/pull/2
The latest diff only contains 22 minor visual changes that are either expected, or improvements: https://app.argos-ci.com/slorber/rnw-visual-tests/builds/71/84659261
Detailed improvements
Faster build times
The React Native website builds significantly faster:
Perf benchmarks
--- #### Before ##### Cold builds ```bash git co main && yarn install hyperfine --runs 5 'yarn workspace react-native-website clear && yarn workspace react-native-website build' ``` ``` Benchmark 1: yarn workspace react-native-website clear && yarn workspace react-native-website build Time (mean ± σ): 95.216 s ± 1.802 s [User: 174.233 s, System: 14.848 s] Range (min … max): 93.490 s … 97.592 s 5 runs ``` ##### Incremental builds ```bash git co main && yarn install yarn workspace react-native-website clear && yarn workspace react-native-website build && hyperfine --runs 5 'yarn workspace react-native-website build' ``` ``` Benchmark 1: yarn workspace react-native-website build Time (mean ± σ): 55.323 s ± 0.924 s [User: 57.343 s, System: 8.653 s] Range (min … max): 54.087 s … 56.184 s 5 runs ``` --- #### After ##### Cold builds ```bash git co slorber/docusaurus-v3.2-upgrade && yarn install hyperfine --runs 5 'yarn workspace react-native-website clear && yarn workspace react-native-website build' ``` ``` Benchmark 1: yarn workspace react-native-website clear && yarn workspace react-native-website build Time (mean ± σ): 66.197 s ± 1.776 s [User: 150.206 s, System: 11.875 s] Range (min … max): 63.978 s … 68.557 s 5 runs ``` ##### Incremental builds ```bash git co slorber/docusaurus-v3.2-upgrade && yarn install yarn workspace react-native-website clear && yarn workspace react-native-website build && hyperfine --runs 5 'yarn workspace react-native-website build' ``` ``` Benchmark 1: yarn workspace react-native-website build Time (mean ± σ): 22.564 s ± 0.227 s [User: 32.231 s, System: 5.742 s] Range (min … max): 22.287 s … 22.812 s 5 runs ``` ---Faster dev server hot reloads
Docusaurus hot reloads on Markdown file edits were not very granular previously. Now they should be faster, and if you edit a blog post, only the blog post plugin will reload instead of the whole site. More fine-grained reload optimizations will come later.
Broken anchors detection
Docusaurus 3.1 can detect broken anchor links. Sometimes a link targets a page that exists, but the
#anchordoes not match a valid anchor in that page.In turns out, like many other sites, the React Native Website has many broken anchors to fix. Those currently do not block the build, and only emit a warning, but it's configurable.
List of broken anchors detected on RNW
```bash [WARNING] Docusaurus found broken anchors! Please check the pages of your site in the list below, and make sure you don't reference any anchor that does not exist. Note: it's possible to ignore broken anchors with the 'onBrokenAnchors' Docusaurus configuration, and let the build pass. Exhaustive list of all broken anchors found: - Broken anchor on source page path = /blog: -> linking to /docs/hermes#enabling-hermes - Broken anchor on source page path = /blog/2018/06/14/state-of-react-native-2018: -> linking to /docs/debugging#chrome-developer-tools - Broken anchor on source page path = /blog/2019/03/12/releasing-react-native-059: -> linking to /docs/performance#inline-requires - Broken anchor on source page path = /blog/2019/06/12/react-native-open-source-update: -> linking to /docs/performance#ram-bundles-inline-requires - Broken anchor on source page path = /blog/2020/03/26/version-0.62: -> linking to /blog#lean-core - Broken anchor on source page path = /blog/2021/08/17/version-065: -> linking to /docs/hermes#enabling-hermes - Broken anchor on source page path = /blog/2022/03/30/version-068: -> linking to /blog/2022/03/30/version-068#interested-in-helping-react-native-stabilize-new-releases - Broken anchor on source page path = /blog/2022/07/08/hermes-as-the-default: -> linking to /docs/hermes#enabling-hermes - Broken anchor on source page path = /blog/2023/12/06/0.73-debugging-improvements-stable-symlinks: -> linking to /docs/next/other-debugging-methods#remote-js-debugging - Broken anchor on source page path = /blog/page/2: -> linking to /blog/2022/03/30/version-068#interested-in-helping-react-native-stabilize-new-releases - Broken anchor on source page path = /blog/page/3: -> linking to /docs/hermes#enabling-hermes - Broken anchor on source page path = /blog/page/4: -> linking to /blog#lean-core -> linking to /docs/performance#ram-bundles-inline-requires -> linking to /docs/performance#inline-requires - Broken anchor on source page path = /blog/page/5: -> linking to /docs/debugging#chrome-developer-tools - Broken anchor on source page path = /blog/tags/announcement: -> linking to /docs/hermes#enabling-hermes - Broken anchor on source page path = /blog/tags/announcement/page/2: -> linking to /blog/2022/03/30/version-068#interested-in-helping-react-native-stabilize-new-releases -> linking to /docs/hermes#enabling-hermes - Broken anchor on source page path = /blog/tags/announcement/page/3: -> linking to /blog#lean-core - Broken anchor on source page path = /blog/tags/announcement/page/4: -> linking to /docs/performance#ram-bundles-inline-requires -> linking to /docs/performance#inline-requires - Broken anchor on source page path = /blog/tags/engineering: -> linking to /docs/debugging#chrome-developer-tools - Broken anchor on source page path = /blog/tags/release: -> linking to /docs/hermes#enabling-hermes -> linking to /blog/2022/03/30/version-068#interested-in-helping-react-native-stabilize-new-releases - Broken anchor on source page path = /blog/tags/release/page/2: -> linking to /blog#lean-core -> linking to /docs/performance#inline-requires - Broken anchor on source page path = /architecture/fabric-renderer: -> linking to /architecture/glossary#fabric-render - Broken anchor on source page path = /docs/0.70/animated: -> linking to animated#interpolate (resolved as: /docs/0.70/animated#interpolate) - Broken anchor on source page path = /docs/0.70/animations: -> linking to animated#interpolate (resolved as: /docs/0.70/animated#interpolate) - Broken anchor on source page path = /docs/0.70/communication-ios: -> linking to native-modules-ios#content (resolved as: /docs/0.70/native-modules-ios#content) - Broken anchor on source page path = /docs/0.70/custom-webview-android: -> linking to /docs/0.70/native-modules-android#register-the-module - Broken anchor on source page path = /docs/0.70/fast-refresh: -> linking to /docs/debugging#accessing-the-in-app-developer-menu - Broken anchor on source page path = /docs/0.70/handling-text-input: -> linking to textinput#content (resolved as: /docs/0.70/textinput#content) - Broken anchor on source page path = /docs/0.70/image: -> linking to transforms#props (resolved as: /docs/0.70/transforms#props) - Broken anchor on source page path = /docs/0.70/javascript-environment: -> linking to /docs/0.70/network#content -> linking to /docs/0.70/timers#content - Broken anchor on source page path = /docs/0.70/profile-hermes: -> linking to /docs/0.70/profile-hermes#open-the-downloaded-profile-on-chrome-devtools - Broken anchor on source page path = /docs/0.70/running-on-device: -> linking to /docs/0.70/debugging#in-app-errors-and-warnings - Broken anchor on source page path = /docs/0.70/sectionlist: -> linking to sectionlist#renderitem (resolved as: /docs/0.70/sectionlist#renderitem) - Broken anchor on source page path = /docs/0.70/shadow-props: -> linking to view-style-props#elevation (resolved as: /docs/0.70/view-style-props#elevation) - Broken anchor on source page path = /docs/0.70/switch: -> linking to /docs/0.70/switch#ios_backgroundColor - Broken anchor on source page path = /docs/0.70/text: -> linking to /docs/0.70/accessibility#accessibilitytraits-ios -> linking to accessibility#accessible-ios-android (resolved as: /docs/0.70/accessibility#accessible-ios-android) - Broken anchor on source page path = /docs/0.70/touchablewithoutfeedback: -> linking to /docs/0.70/accessibility#accessibilitystate-ios-android -> linking to /docs/0.70/accessibility#accessibilityvalue-ios-android - Broken anchor on source page path = /docs/0.70/troubleshooting: -> linking to /docs/0.70/linking-libraries-ios#content - Broken anchor on source page path = /docs/0.70/view: -> linking to /docs/0.70/accessibility#accessibilityignoresinvertcolors -> linking to /docs/0.70/accessibility#accessibilitystate-ios-android -> linking to /docs/0.70/accessibility#accessibilityvalue-ios-android - Broken anchor on source page path = /docs/0.71/alert: -> linking to alert#alertButton (resolved as: /docs/0.71/alert#alertButton) - Broken anchor on source page path = /docs/0.71/animated: -> linking to animated#interpolate (resolved as: /docs/0.71/animated#interpolate) - Broken anchor on source page path = /docs/0.71/animations: -> linking to animated#interpolate (resolved as: /docs/0.71/animated#interpolate) - Broken anchor on source page path = /docs/0.71/communication-ios: -> linking to native-modules-ios#content (resolved as: /docs/0.71/native-modules-ios#content) - Broken anchor on source page path = /docs/0.71/custom-webview-android: -> linking to /docs/0.71/native-modules-android#register-the-module - Broken anchor on source page path = /docs/0.71/fast-refresh: -> linking to /docs/debugging#accessing-the-in-app-developer-menu - Broken anchor on source page path = /docs/0.71/handling-text-input: -> linking to textinput#content (resolved as: /docs/0.71/textinput#content) - Broken anchor on source page path = /docs/0.71/image: -> linking to transforms#props (resolved as: /docs/0.71/transforms#props) - Broken anchor on source page path = /docs/0.71/javascript-environment: -> linking to /docs/0.71/network#content -> linking to /docs/0.71/timers#content - Broken anchor on source page path = /docs/0.71/profile-hermes: -> linking to /docs/0.71/profile-hermes#open-the-downloaded-profile-on-chrome-devtools - Broken anchor on source page path = /docs/0.71/react-native-gradle-plugin: -> linking to #using-variants (resolved as: /docs/0.71/react-native-gradle-plugin#using-variants) - Broken anchor on source page path = /docs/0.71/running-on-device: -> linking to /docs/0.71/debugging#in-app-errors-and-warnings - Broken anchor on source page path = /docs/0.71/sectionlist: -> linking to sectionlist#renderitem (resolved as: /docs/0.71/sectionlist#renderitem) - Broken anchor on source page path = /docs/0.71/shadow-props: -> linking to view-style-props#elevation (resolved as: /docs/0.71/view-style-props#elevation) - Broken anchor on source page path = /docs/0.71/switch: -> linking to /docs/0.71/switch#ios_backgroundColor - Broken anchor on source page path = /docs/0.71/text: -> linking to /docs/0.71/accessibility#accessibilitytraits-ios -> linking to accessibility#accessible-ios-android (resolved as: /docs/0.71/accessibility#accessible-ios-android) - Broken anchor on source page path = /docs/0.71/touchablewithoutfeedback: -> linking to /docs/0.71/accessibility#accessibilitystate-ios-android -> linking to #accessibilityviewismodal-ios (resolved as: /docs/0.71/touchablewithoutfeedback#accessibilityviewismodal-ios) -> linking to /docs/0.71/accessibility#accessibilityvalue-ios-android - Broken anchor on source page path = /docs/0.71/troubleshooting: -> linking to /docs/0.71/linking-libraries-ios#content - Broken anchor on source page path = /docs/0.71/view: -> linking to /docs/0.71/accessibility#accessibilityignoresinvertcolors -> linking to /docs/0.71/accessibility#accessibilitystate-ios-android -> linking to /docs/0.71/accessibility#accessibilityvalue-ios-android - Broken anchor on source page path = /docs/0.72/alert: -> linking to alert#alertButton (resolved as: /docs/0.72/alert#alertButton) - Broken anchor on source page path = /docs/0.72/animated: -> linking to animated#interpolate (resolved as: /docs/0.72/animated#interpolate) - Broken anchor on source page path = /docs/0.72/animations: -> linking to animated#interpolate (resolved as: /docs/0.72/animated#interpolate) - Broken anchor on source page path = /docs/0.72/communication-ios: -> linking to native-modules-ios#content (resolved as: /docs/0.72/native-modules-ios#content) - Broken anchor on source page path = /docs/0.72/custom-webview-android: -> linking to /docs/0.72/native-modules-android#register-the-module - Broken anchor on source page path = /docs/0.72/fast-refresh: -> linking to /docs/debugging#accessing-the-in-app-developer-menu - Broken anchor on source page path = /docs/0.72/handling-text-input: -> linking to textinput#content (resolved as: /docs/0.72/textinput#content) - Broken anchor on source page path = /docs/0.72/hermes: -> linking to debugging#debugging-using-a-custom-javascript-debugger (resolved as: /docs/0.72/debugging#debugging-using-a-custom-javascript-debugger) - Broken anchor on source page path = /docs/0.72/image: -> linking to transforms#props (resolved as: /docs/0.72/transforms#props) - Broken anchor on source page path = /docs/0.72/javascript-environment: -> linking to /docs/0.72/network#content -> linking to /docs/0.72/timers#content - Broken anchor on source page path = /docs/0.72/profile-hermes: -> linking to /docs/0.72/profile-hermes#open-the-downloaded-profile-on-chrome-devtools - Broken anchor on source page path = /docs/0.72/react-native-gradle-plugin: -> linking to #using-variants (resolved as: /docs/0.72/react-native-gradle-plugin#using-variants) - Broken anchor on source page path = /docs/0.72/running-on-device: -> linking to /docs/0.72/debugging#in-app-errors-and-warnings - Broken anchor on source page path = /docs/0.72/sectionlist: -> linking to sectionlist#renderitem (resolved as: /docs/0.72/sectionlist#renderitem) - Broken anchor on source page path = /docs/0.72/switch: -> linking to /docs/0.72/switch#ios_backgroundColor - Broken anchor on source page path = /docs/0.72/text: -> linking to /docs/0.72/accessibility#accessibilitytraits-ios -> linking to accessibility#accessible-ios-android (resolved as: /docs/0.72/accessibility#accessible-ios-android) - Broken anchor on source page path = /docs/0.72/touchablewithoutfeedback: -> linking to /docs/0.72/accessibility#accessibilitystate-ios-android -> linking to #accessibilityviewismodal-ios (resolved as: /docs/0.72/touchablewithoutfeedback#accessibilityviewismodal-ios) -> linking to /docs/0.72/accessibility#accessibilityvalue-ios-android - Broken anchor on source page path = /docs/0.72/troubleshooting: -> linking to /docs/0.72/linking-libraries-ios#content - Broken anchor on source page path = /docs/0.72/view: -> linking to /docs/0.72/accessibility#accessibilityignoresinvertcolors -> linking to /docs/0.72/accessibility#accessibilitystate-ios-android -> linking to /docs/0.72/accessibility#accessibilityvalue-ios-android - Broken anchor on source page path = /docs/next/alert: -> linking to alert#alertButton (resolved as: /docs/next/alert#alertButton) - Broken anchor on source page path = /docs/next/animated: -> linking to animated#interpolate (resolved as: /docs/next/animated#interpolate) - Broken anchor on source page path = /docs/next/animations: -> linking to animated#interpolate (resolved as: /docs/next/animated#interpolate) - Broken anchor on source page path = /docs/next/communication-ios: -> linking to native-modules-ios#content (resolved as: /docs/next/native-modules-ios#content) - Broken anchor on source page path = /docs/next/custom-webview-android: -> linking to /docs/next/native-modules-android#register-the-module - Broken anchor on source page path = /docs/next/fast-refresh: -> linking to /docs/debugging#accessing-the-in-app-developer-menu - Broken anchor on source page path = /docs/next/handling-text-input: -> linking to textinput#content (resolved as: /docs/next/textinput#content) - Broken anchor on source page path = /docs/next/hermes: -> linking to debugging#remote-debugging (resolved as: /docs/next/debugging#remote-debugging) - Broken anchor on source page path = /docs/next/image: -> linking to transforms#props (resolved as: /docs/next/transforms#props) - Broken anchor on source page path = /docs/next/images: -> linking to /docs/next/publishing-to-app-store#1-enable-app-transport-security - Broken anchor on source page path = /docs/next/javascript-environment: -> linking to /docs/next/network#content -> linking to /docs/next/timers#content - Broken anchor on source page path = /docs/next/network: -> linking to /docs/next/publishing-to-app-store#1-enable-app-transport-security - Broken anchor on source page path = /docs/next/optimizing-javascript-loading: -> linking to #use-hermes (resolved as: /docs/next/optimizing-javascript-loading#use-hermes) - Broken anchor on source page path = /docs/next/profile-hermes: -> linking to /docs/next/profile-hermes#open-the-downloaded-profile-on-chrome-devtools - Broken anchor on source page path = /docs/next/react-native-gradle-plugin: -> linking to #using-variants (resolved as: /docs/next/react-native-gradle-plugin#using-variants) - Broken anchor on source page path = /docs/next/running-on-device: -> linking to /docs/next/debugging#in-app-errors-and-warnings - Broken anchor on source page path = /docs/next/sectionlist: -> linking to sectionlist#renderitem (resolved as: /docs/next/sectionlist#renderitem) - Broken anchor on source page path = /docs/next/switch: -> linking to /docs/next/switch#ios_backgroundColor - Broken anchor on source page path = /docs/next/text: -> linking to /docs/next/accessibility#accessibilitytraits-ios -> linking to accessibility#accessible-ios-android (resolved as: /docs/next/accessibility#accessible-ios-android) - Broken anchor on source page path = /docs/next/touchablewithoutfeedback: -> linking to /docs/next/accessibility#accessibilitystate-ios-android -> linking to #accessibilityviewismodal-ios (resolved as: /docs/next/touchablewithoutfeedback#accessibilityviewismodal-ios) -> linking to /docs/next/accessibility#accessibilityvalue-ios-android - Broken anchor on source page path = /docs/next/troubleshooting: -> linking to /docs/next/linking-libraries-ios#content - Broken anchor on source page path = /docs/next/view: -> linking to /docs/next/accessibility#accessibilityignoresinvertcolors -> linking to /docs/next/accessibility#accessibilitystate-ios-android -> linking to /docs/next/accessibility#accessibilityvalue-ios-android - Broken anchor on source page path = /docs/alert: -> linking to alert#alertButton (resolved as: /docs/alert#alertButton) - Broken anchor on source page path = /docs/animated: -> linking to animated#interpolate (resolved as: /docs/animated#interpolate) - Broken anchor on source page path = /docs/animations: -> linking to animated#interpolate (resolved as: /docs/animated#interpolate) - Broken anchor on source page path = /docs/communication-ios: -> linking to native-modules-ios#content (resolved as: /docs/native-modules-ios#content) - Broken anchor on source page path = /docs/custom-webview-android: -> linking to /docs/native-modules-android#register-the-module - Broken anchor on source page path = /docs/fast-refresh: -> linking to /docs/debugging#accessing-the-in-app-developer-menu - Broken anchor on source page path = /docs/handling-text-input: -> linking to textinput#content (resolved as: /docs/textinput#content) - Broken anchor on source page path = /docs/hermes: -> linking to debugging#remote-debugging (resolved as: /docs/debugging#remote-debugging) - Broken anchor on source page path = /docs/image: -> linking to transforms#props (resolved as: /docs/transforms#props) - Broken anchor on source page path = /docs/images: -> linking to /docs/publishing-to-app-store#1-enable-app-transport-security - Broken anchor on source page path = /docs/javascript-environment: -> linking to /docs/network#content -> linking to /docs/timers#content - Broken anchor on source page path = /docs/network: -> linking to /docs/publishing-to-app-store#1-enable-app-transport-security - Broken anchor on source page path = /docs/profile-hermes: -> linking to /docs/profile-hermes#open-the-downloaded-profile-on-chrome-devtools - Broken anchor on source page path = /docs/react-native-gradle-plugin: -> linking to #using-variants (resolved as: /docs/react-native-gradle-plugin#using-variants) - Broken anchor on source page path = /docs/running-on-device: -> linking to /docs/debugging#in-app-errors-and-warnings - Broken anchor on source page path = /docs/sectionlist: -> linking to sectionlist#renderitem (resolved as: /docs/sectionlist#renderitem) - Broken anchor on source page path = /docs/switch: -> linking to /docs/switch#ios_backgroundColor - Broken anchor on source page path = /docs/text: -> linking to /docs/accessibility#accessibilitytraits-ios -> linking to accessibility#accessible-ios-android (resolved as: /docs/accessibility#accessible-ios-android) - Broken anchor on source page path = /docs/touchablewithoutfeedback: -> linking to /docs/accessibility#accessibilitystate-ios-android -> linking to #accessibilityviewismodal-ios (resolved as: /docs/touchablewithoutfeedback#accessibilityviewismodal-ios) -> linking to /docs/accessibility#accessibilityvalue-ios-android - Broken anchor on source page path = /docs/troubleshooting: -> linking to /docs/linking-libraries-ios#content - Broken anchor on source page path = /docs/view: -> linking to /docs/accessibility#accessibilityignoresinvertcolors -> linking to /docs/accessibility#accessibilitystate-ios-android -> linking to /docs/accessibility#accessibilityvalue-ios-android ```Other minor improvements
I run visual regression tests on the website to see the visual impact of the upgrade, and some other little details it caught were:
Improved syntax highlighting for JSDoc
https://app.argos-ci.com/slorber/rnw-visual-tests/builds/70/84619585 Improved syntax highlighting for Bash
https://app.argos-ci.com/slorber/rnw-visual-tests/builds/70/84619699 Deduplicated blog archive year
https://app.argos-ci.com/slorber/rnw-visual-tests/builds/70/84619499 Centered column in table
https://app.argos-ci.com/slorber/rnw-visual-tests/builds/70/84619720 Postmortel blog post heading fixes
https://app.argos-ci.com/slorber/rnw-visual-tests/builds/70/84619742 Diff reported because I fixed Markdown to use h2 for internal headings instead of h1, which is semantically better