3pp-mirror/docusaurus
1
0
Fork 0
mirror of https://github.com/facebook/docusaurus.git synced 2025-07-24 03:58:49 +02:00
Code Issues Projects Releases Packages Wiki Activity

fix(core): fix React hydration errors, change html minifier settings (#10786)

Browse source
This commit is contained in:
Sébastien Lorber 2024-12-23 18:45:31 +01:00 • committed by GitHub
parent 2565601af3
commit f196a1eb29
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
4 changed files with 27 additions and 34 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -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;