diff --git a/argos/tests/screenshot.spec.ts b/argos/tests/screenshot.spec.ts index bc144730552c..a648b8256892 100644 --- a/argos/tests/screenshot.spec.ts +++ b/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"', diff --git a/packages/docusaurus-bundler/src/minifyHtml.ts b/packages/docusaurus-bundler/src/minifyHtml.ts index 4a029d83c1f6..d9dc29135f69 100644 --- a/packages/docusaurus-bundler/src/minifyHtml.ts +++ b/packages/docusaurus-bundler/src/minifyHtml.ts @@ -47,9 +47,13 @@ async function getTerserMinifier(): Promise { 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 { 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 + removeRedundantAttributes: 'none', + minifyJs: true, minifyJson: true, minifyCss: true, diff --git a/packages/docusaurus-theme-common/src/components/Collapsible/index.tsx b/packages/docusaurus-theme-common/src/components/Collapsible/index.tsx index ea0539332919..bf39faeca33d 100644 --- a/packages/docusaurus-theme-common/src/components/Collapsible/index.tsx +++ b/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(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} // 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; diff --git a/website/_dogfooding/_pages tests/tabs-tests.mdx b/website/_dogfooding/_pages tests/tabs-tests.mdx index c60ab8c7e238..14e92fe0d1c8 100644 --- a/website/_dogfooding/_pages tests/tabs-tests.mdx +++ b/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'); - - - - Android content - iOS content - - -``` - ## Tabs sync with different heights ```mdx-code-block