From 984f00e7c64522528f8916c49332979d6a3844d8 Mon Sep 17 00:00:00 2001 From: sebastien Date: Fri, 20 Dec 2024 23:13:29 +0100 Subject: [PATCH 1/7] change html minifier params to avoid hydration errors --- packages/docusaurus-bundler/src/minifyHtml.ts | 17 +++++++++++++---- 1 file changed, 13 insertions(+), 4 deletions(-) diff --git a/packages/docusaurus-bundler/src/minifyHtml.ts b/packages/docusaurus-bundler/src/minifyHtml.ts index 4a029d83c1f6..28f7292b53d0 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: 'smart', + minifyJs: true, minifyJson: true, minifyCss: true, From f0572c713ff0c1398c549014ebae00e9c00b02b5 Mon Sep 17 00:00:00 2001 From: sebastien Date: Mon, 23 Dec 2024 17:47:51 +0100 Subject: [PATCH 2/7] quick fix for CollapsibleBase hydration error --- .../src/components/Collapsible/index.tsx | 17 +++++++++++++---- 1 file changed, 13 insertions(+), 4 deletions(-) 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; From 7e723ebe7c28e9ebafe650fde0cd60bc410b5bda Mon Sep 17 00:00:00 2001 From: sebastien Date: Mon, 23 Dec 2024 17:53:49 +0100 Subject: [PATCH 3/7] remove svg xmlns prop --- .../src/theme/Icon/Socials/Default/index.tsx | 1 - .../src/theme/Icon/Socials/GitHub/index.tsx | 1 - .../src/theme/Icon/Socials/LinkedIn/index.tsx | 1 - .../src/theme/Icon/Socials/StackOverflow/index.tsx | 7 +------ .../src/theme/Icon/Socials/Twitter/index.tsx | 1 - .../src/theme/Icon/Socials/X/index.tsx | 1 - 6 files changed, 1 insertion(+), 11 deletions(-) diff --git a/packages/docusaurus-theme-classic/src/theme/Icon/Socials/Default/index.tsx b/packages/docusaurus-theme-classic/src/theme/Icon/Socials/Default/index.tsx index 29f676caa961..570acd55b3f9 100644 --- a/packages/docusaurus-theme-classic/src/theme/Icon/Socials/Default/index.tsx +++ b/packages/docusaurus-theme-classic/src/theme/Icon/Socials/Default/index.tsx @@ -11,7 +11,6 @@ import type {ReactNode, SVGProps} from 'react'; function DefaultSocial(props: SVGProps): ReactNode { return ( ): ReactNode { height="1em" {...props} className={clsx(props.className, styles.githubSvg)} - xmlns="http://www.w3.org/2000/svg" style={{'--dark': '#000', '--light': '#fff'} as React.CSSProperties} preserveAspectRatio="xMidYMid"> diff --git a/packages/docusaurus-theme-classic/src/theme/Icon/Socials/LinkedIn/index.tsx b/packages/docusaurus-theme-classic/src/theme/Icon/Socials/LinkedIn/index.tsx index 7cb8b2aa4514..20d4e8b49e83 100644 --- a/packages/docusaurus-theme-classic/src/theme/Icon/Socials/LinkedIn/index.tsx +++ b/packages/docusaurus-theme-classic/src/theme/Icon/Socials/LinkedIn/index.tsx @@ -13,7 +13,6 @@ function LinkedIn(props: SVGProps): ReactNode { diff --git a/packages/docusaurus-theme-classic/src/theme/Icon/Socials/StackOverflow/index.tsx b/packages/docusaurus-theme-classic/src/theme/Icon/Socials/StackOverflow/index.tsx index 46fbd453865f..24449c2a550a 100644 --- a/packages/docusaurus-theme-classic/src/theme/Icon/Socials/StackOverflow/index.tsx +++ b/packages/docusaurus-theme-classic/src/theme/Icon/Socials/StackOverflow/index.tsx @@ -10,12 +10,7 @@ import type {ReactNode, SVGProps} from 'react'; // SVG Source: https://svgl.app/ function StackOverflow(props: SVGProps): ReactNode { return ( - + ): ReactNode { viewBox="0 0 256 209" width="1em" height="1em" - xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="xMidYMid" {...props}> ): ReactNode { return ( Date: Mon, 23 Dec 2024 17:57:48 +0100 Subject: [PATCH 4/7] less agggressive html minification --- packages/docusaurus-bundler/src/minifyHtml.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/docusaurus-bundler/src/minifyHtml.ts b/packages/docusaurus-bundler/src/minifyHtml.ts index 28f7292b53d0..d9dc29135f69 100644 --- a/packages/docusaurus-bundler/src/minifyHtml.ts +++ b/packages/docusaurus-bundler/src/minifyHtml.ts @@ -93,7 +93,7 @@ async function getSwcMinifier(): Promise { // When enabled => hydration error for className="" removeEmptyAttributes: false, // When enabled => hydration error for - removeRedundantAttributes: 'smart', + removeRedundantAttributes: 'none', minifyJs: true, minifyJson: true, From 363a50944bb7c9ceea848d26af95e4ab0b411a4e Mon Sep 17 00:00:00 2001 From: sebastien Date: Mon, 23 Dec 2024 17:58:40 +0100 Subject: [PATCH 5/7] Revert "remove svg xmlns prop" This reverts commit 7e723ebe7c28e9ebafe650fde0cd60bc410b5bda. --- .../src/theme/Icon/Socials/Default/index.tsx | 1 + .../src/theme/Icon/Socials/GitHub/index.tsx | 1 + .../src/theme/Icon/Socials/LinkedIn/index.tsx | 1 + .../src/theme/Icon/Socials/StackOverflow/index.tsx | 7 ++++++- .../src/theme/Icon/Socials/Twitter/index.tsx | 1 + .../src/theme/Icon/Socials/X/index.tsx | 1 + 6 files changed, 11 insertions(+), 1 deletion(-) diff --git a/packages/docusaurus-theme-classic/src/theme/Icon/Socials/Default/index.tsx b/packages/docusaurus-theme-classic/src/theme/Icon/Socials/Default/index.tsx index 570acd55b3f9..29f676caa961 100644 --- a/packages/docusaurus-theme-classic/src/theme/Icon/Socials/Default/index.tsx +++ b/packages/docusaurus-theme-classic/src/theme/Icon/Socials/Default/index.tsx @@ -11,6 +11,7 @@ import type {ReactNode, SVGProps} from 'react'; function DefaultSocial(props: SVGProps): ReactNode { return ( ): ReactNode { height="1em" {...props} className={clsx(props.className, styles.githubSvg)} + xmlns="http://www.w3.org/2000/svg" style={{'--dark': '#000', '--light': '#fff'} as React.CSSProperties} preserveAspectRatio="xMidYMid"> diff --git a/packages/docusaurus-theme-classic/src/theme/Icon/Socials/LinkedIn/index.tsx b/packages/docusaurus-theme-classic/src/theme/Icon/Socials/LinkedIn/index.tsx index 20d4e8b49e83..7cb8b2aa4514 100644 --- a/packages/docusaurus-theme-classic/src/theme/Icon/Socials/LinkedIn/index.tsx +++ b/packages/docusaurus-theme-classic/src/theme/Icon/Socials/LinkedIn/index.tsx @@ -13,6 +13,7 @@ function LinkedIn(props: SVGProps): ReactNode { diff --git a/packages/docusaurus-theme-classic/src/theme/Icon/Socials/StackOverflow/index.tsx b/packages/docusaurus-theme-classic/src/theme/Icon/Socials/StackOverflow/index.tsx index 24449c2a550a..46fbd453865f 100644 --- a/packages/docusaurus-theme-classic/src/theme/Icon/Socials/StackOverflow/index.tsx +++ b/packages/docusaurus-theme-classic/src/theme/Icon/Socials/StackOverflow/index.tsx @@ -10,7 +10,12 @@ import type {ReactNode, SVGProps} from 'react'; // SVG Source: https://svgl.app/ function StackOverflow(props: SVGProps): ReactNode { return ( - + ): ReactNode { viewBox="0 0 256 209" width="1em" height="1em" + xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="xMidYMid" {...props}> ): ReactNode { return ( Date: Mon, 23 Dec 2024 18:03:57 +0100 Subject: [PATCH 6/7] remove tabs test that produces an hydration error --- website/_dogfooding/_pages tests/tabs-tests.mdx | 15 --------------- 1 file changed, 15 deletions(-) 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 From b1acb306c2476e9f895c86abcf1e0b0d94e32c1f Mon Sep 17 00:00:00 2001 From: sebastien Date: Mon, 23 Dec 2024 18:11:45 +0100 Subject: [PATCH 7/7] remove useless argos screenshot console logs filtering --- argos/tests/screenshot.spec.ts | 12 +----------- 1 file changed, 1 insertion(+), 11 deletions(-) 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"',