Merge branch 'main' into slorber/react-19-peerDeps

argos/tests/screenshot.spec.ts

@@ -131,21 +131,11 @@ function throwOnConsole(page: Page) {
   const typesToCheck = ['error', 'warning'];
 
   const ignoreMessages = [
-    // This mismatch warning looks like a React 18 bug to me
-    'Warning: Prop `%s` did not match. Server: %s Client: %s%s className "null" ""',
-
     // TODO this fetch error message is unexpected and should be fixed
     //  it's already happening in main branch
     'Failed to load resource: the server responded with a status of 404 (Not Found)',
 
-    // TODO looks like a legit hydration bug to fix
-    // on /blog/releases/2.4
-    'Warning: Prop `%s` did not match. Server: %s Client: %s%s href "/docs" "/docs?docusaurus-theme=light"',
-    'Warning: Prop `%s` did not match. Server: %s Client: %s%s href "/docs" "/docs?docusaurus-theme=dark"',
-    // on /blog/releases/3.0
-    'Warning: Prop `%s` did not match. Server: %s Client: %s%s href "/docs" "/docs?docusaurus-data-navbar=false&docusaurus-data-red-border"',
-    // on /docs/styling-layout
-    'Warning: Prop `%s` did not match. Server: %s Client: %s%s href "/docs" "/docs?docusaurus-data-navbar=false&docusaurus-data-red-border"',
+    // TODO looks like legit hydration bugs to fix
     'Warning: Prop `%s` did not match. Server: %s Client: %s%s href "/docs/configuration" "/docs/configuration?docusaurus-theme=light"',
     'Warning: Prop `%s` did not match. Server: %s Client: %s%s href "/docs/configuration" "/docs/configuration?docusaurus-theme=dark"',
 

packages/docusaurus-bundler/src/minifyHtml.ts

@@ -47,9 +47,13 @@ async function getTerserMinifier(): Promise<HtmlMinifier> {
     minify: async function minifyHtmlWithTerser(html) {
       try {
         const code = await terserHtmlMinifier(html, {
+          // When enabled => React hydration errors
           removeComments: false,
-          removeRedundantAttributes: true,
-          removeEmptyAttributes: true,
+          removeRedundantAttributes: false,
+          removeEmptyAttributes: false,
+          sortAttributes: false,
+          sortClassName: false,
+
           removeScriptTypeAttributes: true,
           removeStyleLinkTypeAttributes: true,
           useShortDoctype: true,
@@ -84,8 +88,13 @@ async function getSwcMinifier(): Promise<HtmlMinifier> {
           sortSpaceSeparatedAttributeValues: false,
           sortAttributes: false,
 
-          removeRedundantAttributes: 'all',
-          removeEmptyAttributes: true,
+          // When enabled => hydration error for className={"yt-lite "}
+          normalizeAttributes: false,
+          // When enabled => hydration error for className=""
+          removeEmptyAttributes: false,
+          // When enabled => hydration error for <a target="_self">
+          removeRedundantAttributes: 'none',
+
           minifyJs: true,
           minifyJson: true,
           minifyCss: true,

packages/docusaurus-theme-common/src/components/Collapsible/index.tsx

@@ -15,7 +15,7 @@ import React, {
   type SetStateAction,
   type ReactNode,
 } from 'react';
-import ExecutionEnvironment from '@docusaurus/ExecutionEnvironment';
+import useIsBrowser from '@docusaurus/useIsBrowser';
 import useIsomorphicLayoutEffect from '@docusaurus/useIsomorphicLayoutEffect';
 import {prefersReducedMotion} from '../../utils/accessibilityUtils';
 
@@ -161,8 +161,15 @@ type CollapsibleElementType = React.ElementType<
  * Prevent hydration layout shift before animations are handled imperatively
  * with JS
  */
-function getSSRStyle(collapsed: boolean) {
-  if (ExecutionEnvironment.canUseDOM) {
+function getSSRStyle({
+  collapsed,
+  isBrowser,
+}: {
+  collapsed: boolean;
+  isBrowser: boolean;
+}) {
+  // After hydration, styles are applied
+  if (isBrowser) {
     return undefined;
   }
   return collapsed ? CollapsedStyles : ExpandedStyles;
@@ -202,6 +209,7 @@ function CollapsibleBase({
   className,
   disableSSRStyle,
 }: CollapsibleBaseProps) {
+  const isBrowser = useIsBrowser();
   const collapsibleRef = useRef<HTMLElement>(null);
 
   useCollapseAnimation({collapsibleRef, collapsed, animation});
@@ -211,7 +219,8 @@ function CollapsibleBase({
       // @ts-expect-error: the "too complicated type" is produced from
       // "CollapsibleElementType" being a huge union
       ref={collapsibleRef as RefObject<never>} // Refs are contravariant, which is not expressible in TS
-      style={disableSSRStyle ? undefined : getSSRStyle(collapsed)}
+      // Not even sure we need this SSRStyle anymore, try to remove it?
+      style={disableSSRStyle ? undefined : getSSRStyle({collapsed, isBrowser})}
       onTransitionEnd={(e: React.TransitionEvent) => {
         if (e.propertyName !== 'height') {
           return;

packages/docusaurus-theme-common/src/utils/codeBlockUtils.ts

@@ -107,9 +107,11 @@ function getAllMagicCommentDirectiveStyles(
 
     case 'lua':
     case 'haskell':
-    case 'sql':
       return getCommentPattern(['lua'], magicCommentDirectives);
 
+    case 'sql':
+      return getCommentPattern(['lua', 'jsBlock'], magicCommentDirectives);
+
     case 'wasm':
       return getCommentPattern(['wasm'], magicCommentDirectives);
 

packages/docusaurus-theme-translations/locales/nl/theme-common.json

@@ -5,8 +5,8 @@
   "theme.CodeBlock.copy": "Kopieer",
   "theme.CodeBlock.copyButtonAriaLabel": "Kopieer code naar klembord",
   "theme.CodeBlock.wordWrapToggle": "Tekstterugloop in-/uitschakelen",
-  "theme.DocSidebarItem.collapseCategoryAriaLabel": "Collapse sidebar category '{label}'",
-  "theme.DocSidebarItem.expandCategoryAriaLabel": "Expand sidebar category '{label}'",
+  "theme.DocSidebarItem.collapseCategoryAriaLabel": "Categorie zijbalk inklappen '{label}'",
+  "theme.DocSidebarItem.expandCategoryAriaLabel": "Categorie zijbalk uitklappen '{label}'",
   "theme.ErrorPageContent.title": "Deze pagina is gecrasht.",
   "theme.ErrorPageContent.tryAgain": "Probeer opnieuw",
   "theme.NavBar.navAriaLabel": "Main",
@@ -19,13 +19,13 @@
   "theme.admonition.info": "info",
   "theme.admonition.note": "notitie",
   "theme.admonition.tip": "tip",
-  "theme.admonition.warning": "warning",
+  "theme.admonition.warning": "waarschuwing",
   "theme.blog.archive.description": "Archief",
   "theme.blog.archive.title": "Archief",
-  "theme.blog.author.noPosts": "This author has not written any posts yet.",
+  "theme.blog.author.noPosts": "Deze auteur heeft nog geen berichten geschreven.",
   "theme.blog.author.pageTitle": "{authorName} - {nPosts}",
-  "theme.blog.authorsList.pageTitle": "Authors",
-  "theme.blog.authorsList.viewAll": "View All Authors",
+  "theme.blog.authorsList.pageTitle": "Auteurs",
+  "theme.blog.authorsList.viewAll": "Bekijk alle auteurs",
   "theme.blog.paginator.navAriaLabel": "Paginanavigatie blog",
   "theme.blog.paginator.newerEntries": "Nieuwere items",
   "theme.blog.paginator.olderEntries": "Oudere items",
@@ -44,23 +44,23 @@
   "theme.common.editThisPage": "Bewerk deze pagina",
   "theme.common.headingLinkTitle": "Direct link naar {heading}",
   "theme.common.skipToMainContent": "Ga naar hoofdinhoud",
-  "theme.contentVisibility.draftBanner.message": "This page is a draft. It will only be visible in dev and be excluded from the production build.",
-  "theme.contentVisibility.draftBanner.title": "Draft page",
-  "theme.contentVisibility.unlistedBanner.message": "This page is unlisted. Search engines will not index it, and only users having a direct link can access it.",
-  "theme.contentVisibility.unlistedBanner.title": "Unlisted page",
+  "theme.contentVisibility.draftBanner.message": "Deze pagina is een concept. Deze zal alleen zichtbaar zijn in de ontwikkelomgeving en uitgesloten worden van de productie build.",
+  "theme.contentVisibility.draftBanner.title": "Concept pagina",
+  "theme.contentVisibility.unlistedBanner.message": "Deze pagina is verborgen. Zoekmachines indexeren deze niet en alleen gebruikers met een directe link kunnen deze openen.",
+  "theme.contentVisibility.unlistedBanner.title": "Verborgen page",
   "theme.docs.DocCard.categoryDescription.plurals": "1 artikel|{count} artikelen",
   "theme.docs.breadcrumbs.home": "Homepagina",
   "theme.docs.breadcrumbs.navAriaLabel": "Broodkruimels",
   "theme.docs.paginator.navAriaLabel": "Documentatie pagina",
   "theme.docs.paginator.next": "Volgende",
   "theme.docs.paginator.previous": "Vorige",
-  "theme.docs.sidebar.closeSidebarButtonAriaLabel": "Close navigation bar",
+  "theme.docs.sidebar.closeSidebarButtonAriaLabel": "Sluit navigatiebalk",
   "theme.docs.sidebar.collapseButtonAriaLabel": "Zijbalk inklappen",
   "theme.docs.sidebar.collapseButtonTitle": "Zijbalk inklappen",
   "theme.docs.sidebar.expandButtonAriaLabel": "Zijbalk uitklappen",
   "theme.docs.sidebar.expandButtonTitle": "Zijbalk uitklappen",
-  "theme.docs.sidebar.navAriaLabel": "Docs sidebar",
-  "theme.docs.sidebar.toggleSidebarButtonAriaLabel": "Toggle navigation bar",
+  "theme.docs.sidebar.navAriaLabel": "Docs zijbalk",
+  "theme.docs.sidebar.toggleSidebarButtonAriaLabel": "Navigatiebalk schakelen",
   "theme.docs.tagDocListPageTitle": "{nDocsTagged} met \"{tagName}\"",
   "theme.docs.tagDocListPageTitle.nDocsTagged": "Een artikel getagd|{count} artikelen getagd",
   "theme.docs.versionBadge.label": "Versie: {versionLabel}",

website/_dogfooding/_pages tests/code-block-tests.mdx

@@ -358,6 +358,19 @@ WHERE customer_id IN (
 )
 ```
 
+```sql title="sql_query_block.sql"
+/* highlight-start */
+SELECT *
+FROM orders
+/* highlight-end */
+WHERE customer_id IN (
+  SELECT customer_id
+  /* highlight-next-line */
+  FROM customers
+  WHERE country = 'USA'
+)
+```
+
 ```matlab title="matlab.m"
 % highlight-start
 function result = times2(n)

website/_dogfooding/_pages tests/tabs-tests.mdx

@@ -6,21 +6,6 @@ import Tabs from '@theme/Tabs';
 import TabItem from '@theme/TabItem';
 ```
 
-## Tabs with dynamic default value
-
-This can cause [bugs](https://github.com/facebook/react-native-website/issues/2771) when default value is different between SSR and client:
-
-```mdx-code-block
-export const isMacOS = typeof window !== 'undefined' && navigator.platform.startsWith('Mac');
-
-<BrowserWindow>
-  <Tabs defaultValue={isMacOS ? "ios" : "android"}>
-    <TabItem value="android" label="Android">Android content</TabItem>
-    <TabItem value="ios" label="iOS">iOS content</TabItem>
-  </Tabs>
-</BrowserWindow>
-```
-
 ## Tabs sync with different heights
 
 ```mdx-code-block