Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Fix: skip Balancer script if global one is already created #86

Open
wants to merge 1 commit into
base: main
Choose a base branch
from
Open

Fix: skip Balancer script if global one is already created #86

Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
20 changes: 11 additions & 9 deletions src/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -71,16 +71,16 @@ const relayout: RelayoutFn = (id, ratio, wrapper) => {
// the function.
if (!wrapper['__wrap_o']) {
if (typeof ResizeObserver !== 'undefined') {
;(wrapper['__wrap_o'] = new ResizeObserver(() => {
; (wrapper['__wrap_o'] = new ResizeObserver(() => {
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Could you remove the miscellaneous changes in this PR? Like this whitespace.

Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@mixeden

self.__wrap_b(0, +wrapper.dataset.brr, wrapper)
})).observe(container)
} else {
// Silently ignore ResizeObserver for production builds
if (process.env.NODE_ENV === 'development') {
console.warn(
'The browser you are using does not support the ResizeObserver API. ' +
'Please consider add polyfill for this API to avoid potential layout shifts or upgrade your browser. ' +
'Read more: https://github.com/shuding/react-wrap-balancer#browser-support-information'
'Please consider add polyfill for this API to avoid potential layout shifts or upgrade your browser. ' +
'Read more: https://github.com/shuding/react-wrap-balancer#browser-support-information'
)
}
}
Expand All @@ -96,19 +96,21 @@ const createScriptElement = (
nonce?: string,
suffix: string = ''
) => {
if (injected) {
return null
}
Comment on lines +99 to +101
Copy link
Collaborator

@pacocoursey pacocoursey Mar 13, 2024 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Actually no sorry this doesn't work at all… it's required to inject the script so that each instance of <Balancer /> is correctly balanced on SSR. Otherwise, you end up with this layout shift (on browsers that do not support text-wrap: balance, i.e. Safari)

ILUzvkAZ.mp4


if (suffix) {
suffix = `self.${SYMBOL_NATIVE_KEY}!=1&&${suffix}`
}

return (
<script
suppressHydrationWarning
dangerouslySetInnerHTML={{
// Calculate the balance initially for SSR
__html:
(injected
? ''
: `self.${SYMBOL_NATIVE_KEY}=self.${SYMBOL_NATIVE_KEY}||${isTextWrapBalanceSupported};self.${SYMBOL_KEY}=${RELAYOUT_STR};`) +
suffix,
`self.${SYMBOL_NATIVE_KEY}=self.${SYMBOL_NATIVE_KEY}||${isTextWrapBalanceSupported};self.${SYMBOL_KEY}=${RELAYOUT_STR};` + suffix,
}}
nonce={nonce}
/>
Expand Down Expand Up @@ -144,7 +146,7 @@ interface BalancerOwnProps<

type BalancerProps<ElementType extends React.ElementType> =
BalancerOwnProps<ElementType> &
Omit<React.ComponentPropsWithoutRef<ElementType>, keyof BalancerOwnProps>
Omit<React.ComponentPropsWithoutRef<ElementType>, keyof BalancerOwnProps>

/**
* An optional provider to inject the global relayout function, so all children
Expand Down Expand Up @@ -201,7 +203,7 @@ const Balancer = <ElementType extends React.ElementType = React.ElementType>({

if (wrapperRef.current) {
// Re-assign the function here as the component can be dynamically rendered, and script tag won't work in that case.
;(self[SYMBOL_KEY] = relayout)(0, ratio, wrapperRef.current)
; (self[SYMBOL_KEY] = relayout)(0, ratio, wrapperRef.current)
}
}, [children, preferNativeBalancing, ratio])

Expand Down