Infrastructure/astro
0
Fork 0
mirror of https://github.com/withastro/astro.git synced 2025-02-03 22:29:08 -05:00
Code Issues Activity

Fix client:visible (#1999)

Browse source 
Fixes #1963
This commit is contained in:
Drew Powers 2021-11-23 15:38:26 -07:00 • committed by GitHub
parent 60c5eb6ad5
commit 8a5de03098
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
3 changed files with 18 additions and 10 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

5
.changeset/famous-mice-sparkle.md Normal file
View file

@ -0,0 +1,5 @@
---
'astro': patch
---
Fix client:visible with multiple copies of same component

10
docs/src/components/RightSidebar/ThemeToggleButton.tsx
View file

@ -14,9 +14,9 @@ const icons = [
fill="currentColor" fill="currentColor"
> >
<path <path
fillRule="evenodd" fill-rule="evenodd"
d="M10 2a1 1 0 011 1v1a1 1 0 11-2 0V3a1 1 0 011-1zm4 8a4 4 0 11-8 0 4 4 0 018 0zm-.464 4.95l.707.707a1 1 0 001.414-1.414l-.707-.707a1 1 0 00-1.414 1.414zm2.12-10.607a1 1 0 010 1.414l-.706.707a1 1 0 11-1.414-1.414l.707-.707a1 1 0 011.414 0zM17 11a1 1 0 100-2h-1a1 1 0 100 2h1zm-7 4a1 1 0 011 1v1a1 1 0 11-2 0v-1a1 1 0 011-1zM5.05 6.464A1 1 0 106.465 5.05l-.708-.707a1 1 0 00-1.414 1.414l.707.707zm1.414 8.486l-.707.707a1 1 0 01-1.414-1.414l.707-.707a1 1 0 011.414 1.414zM4 11a1 1 0 100-2H3a1 1 0 000 2h1z" d="M10 2a1 1 0 011 1v1a1 1 0 11-2 0V3a1 1 0 011-1zm4 8a4 4 0 11-8 0 4 4 0 018 0zm-.464 4.95l.707.707a1 1 0 001.414-1.414l-.707-.707a1 1 0 00-1.414 1.414zm2.12-10.607a1 1 0 010 1.414l-.706.707a1 1 0 11-1.414-1.414l.707-.707a1 1 0 011.414 0zM17 11a1 1 0 100-2h-1a1 1 0 100 2h1zm-7 4a1 1 0 011 1v1a1 1 0 11-2 0v-1a1 1 0 011-1zM5.05 6.464A1 1 0 106.465 5.05l-.708-.707a1 1 0 00-1.414 1.414l.707.707zm1.414 8.486l-.707.707a1 1 0 01-1.414-1.414l.707-.707a1 1 0 011.414 1.414zM4 11a1 1 0 100-2H3a1 1 0 000 2h1z"
clipRule="evenodd" clip-rule="evenodd"
/> />
</svg>, </svg>,
<svg <svg
@ -30,7 +30,7 @@ const icons = [
</svg>, </svg>,
]; ];
const ThemeToggle: FunctionalComponent = () => { function ThemeToggle() {
const [theme, setTheme] = useState(() => { const [theme, setTheme] = useState(() => {
if (import.meta.env.SSR) { if (import.meta.env.SSR) {
return undefined; return undefined;
@ -59,7 +59,7 @@ const ThemeToggle: FunctionalComponent = () => {
const icon = icons[i]; const icon = icons[i];
const checked = t === theme; const checked = t === theme;
return ( return (
<label className={checked ? ' checked' : ''}> <label class={checked ? 'checked' : ''}>
{icon} {icon}
<input <input
type="radio" type="radio"
@ -78,6 +78,6 @@ const ThemeToggle: FunctionalComponent = () => {
})} })}
</div> </div>
); );
}; }
export default ThemeToggle; export default ThemeToggle;

13
packages/astro/src/runtime/client/visible.ts
View file

@ -16,11 +16,14 @@ export default async function onVisible(astroId: string, _options: HydrateOption
} }
}; };
const io = new IntersectionObserver(([entry]) => { const io = new IntersectionObserver((entries) => {
if (!entry.isIntersecting) return; for (const entry of entries) {
// As soon as we hydrate, disconnect this IntersectionObserver for every `astro-root` if (!entry.isIntersecting) continue;
io.disconnect(); // As soon as we hydrate, disconnect this IntersectionObserver for every `astro-root`
cb(); io.disconnect();
cb();
break; // break loop on first match
}
}); });
for (const root of roots) { for (const root of roots) {