feat(site): remove unnecessary hydration workarounds

site/src/components/docs/FrameworkCase.astro

@@ -3,9 +3,15 @@ import type { SupportedFramework } from '@/types/docs';
 
 interface Props {
   frameworks?: SupportedFramework[];
+  /**
+   * I'm running into some crazy problems with hydration.
+   * Putting client:load in one of these conditionals causes Astro to just give up hydrating the whole app for some reason.
+   * If you're running into that, too, this prop may be for you.
+   */
+  withHydrationWorkaround?: boolean;
 }
 
-const { frameworks } = Astro.props;
+const { frameworks, withHydrationWorkaround } = Astro.props;
 const { framework } = Astro.params;
 
 // Only render if current framework matches, or if no frameworks specified (all frameworks)
@@ -13,19 +19,11 @@ const shouldRender = !frameworks || frameworks.includes(framework as SupportedFr
 ---
 
 {
-  /*
-    What I WANT to do is
-    ```
-    {shouldRender && <slot />}
-    ```
-
-    But I'm running into some crazy problems with hydration.
-    Putting client:load in one of these conditionals causes Astro to just give up hydrating the whole app for some reason.
-    TODO: fix this
-
-    So, while I debug those... let's do this
-  */
+  withHydrationWorkaround ? (
+    <div class="contents" hidden={!shouldRender}>
+      <slot />
+    </div>
+  ) : (
+    shouldRender && <slot />
+  )
 }
-<div class="contents" hidden={!shouldRender}>
-  <slot />
-</div>

site/src/components/docs/StyleCase.astro

@@ -3,9 +3,15 @@ import type { AnySupportedStyle } from '@/types/docs';
 
 interface Props {
   styles?: AnySupportedStyle[];
+  /**
+   * I'm running into some crazy problems with hydration.
+   * Putting client:load in one of these conditionals causes Astro to just give up hydrating the whole app for some reason.
+   * If you're running into that, too, this prop may be for you.
+   */
+  withHydrationWorkaround?: boolean;
 }
 
-const { styles } = Astro.props;
+const { styles, withHydrationWorkaround } = Astro.props;
 const { style } = Astro.params;
 
 // Only render if current style matches, or if no styles specified (all styles)
@@ -13,19 +19,11 @@ const shouldRender = !styles || styles.includes(style as AnySupportedStyle);
 ---
 
 {
-  /*
-    What I WANT to do is
-    ```
-    {shouldRender && <slot />}
-    ```
-
-    But I'm running into some crazy problems with hydration.
-    Putting client:load in one of these conditionals causes Astro to just give up hydrating the whole app for some reason.
-    TODO: fix this
-
-    So, while I debug those... let's do this
-  */
+  withHydrationWorkaround ? (
+    <div class="contents" hidden={!shouldRender}>
+      <slot />
+    </div>
+  ) : (
+    shouldRender && <slot />
+  )
 }
-<div class="contents" hidden={!shouldRender}>
-  <slot />
-</div>

site/src/content/docs/concepts/architecture.mdx

@@ -92,7 +92,7 @@ function Player() {
 ```
 </FrameworkCase>
 
-<FrameworkCase frameworks={["html"]}>
+<FrameworkCase frameworks={["html"]} withHydrationWorkaround>
 <TabsRoot
   aria-label="HTML implementation"
   titles={{  html: 'HTML', javascript: 'JavaScript' }}

site/src/content/docs/how-to/customize-skins.mdx

@@ -25,7 +25,7 @@ While eventually we'll have a CLI that'll eject skins in your preferred framewor
 
 ## Frosted Skin
 
-<FrameworkCase frameworks={["react"]}>
+<FrameworkCase frameworks={["react"]} withHydrationWorkaround>
 
 <TabsRoot
   aria-label="Frosted React implementation"
@@ -42,7 +42,7 @@ While eventually we'll have a CLI that'll eject skins in your preferred framewor
 
 </FrameworkCase>
 
-<FrameworkCase frameworks={["html"]}>
+<FrameworkCase frameworks={["html"]} withHydrationWorkaround>
 
 <TabsRoot
   aria-label="Frosted HTML implementation"
@@ -64,7 +64,7 @@ While eventually we'll have a CLI that'll eject skins in your preferred framewor
 
 ## Minimal Skin
 
-<FrameworkCase frameworks={["react"]}>
+<FrameworkCase frameworks={["react"]} withHydrationWorkaround>
 
 <TabsRoot
   aria-label="Minimal React implementation"
@@ -81,7 +81,7 @@ While eventually we'll have a CLI that'll eject skins in your preferred framewor
 
 </FrameworkCase>
 
-<FrameworkCase frameworks={["html"]}>
+<FrameworkCase frameworks={["html"]} withHydrationWorkaround>
 
 <TabsRoot
   aria-label="Minimal HTML implementation"

site/src/content/docs/reference/fullscreen-button.mdx

@@ -24,7 +24,7 @@ import { TabsRoot, TabsPanel } from '@/components/Tabs';
 
 ## Example
 
-<FrameworkCase frameworks={["react"]}>
+<FrameworkCase frameworks={["react"]} withHydrationWorkaround>
   <TabsRoot
     aria-label="React implementation"
     titles={{ component: 'Component', css: 'CSS Module' }}
@@ -42,7 +42,7 @@ import { TabsRoot, TabsPanel } from '@/components/Tabs';
   </TabsRoot>
 </FrameworkCase>
 
-<FrameworkCase frameworks={["html"]}>
+<FrameworkCase frameworks={["html"]} withHydrationWorkaround>
   <TabsRoot
     aria-label="HTML implementation"
     titles={{ html: 'HTML', css: 'CSS', javascript: 'JS' }}

site/src/content/docs/reference/mute-button.mdx

@@ -24,7 +24,7 @@ import { TabsRoot, TabsPanel } from '@/components/Tabs';
 
 ## Example
 
-<FrameworkCase frameworks={["react"]}>
+<FrameworkCase frameworks={["react"]} withHydrationWorkaround>
   <TabsRoot
     aria-label="React implementation"
     titles={{ component: 'Component', css: 'CSS Module' }}
@@ -37,12 +37,12 @@ import { TabsRoot, TabsPanel } from '@/components/Tabs';
     <TabsPanel value="css" client:load>
       <ServerCode code={cssModuleStr} lang="css" />
     </TabsPanel>
-    
+
     <MuteButtonDemo client:load />
   </TabsRoot>
 </FrameworkCase>
 
-<FrameworkCase frameworks={["html"]}>
+<FrameworkCase frameworks={["html"]} withHydrationWorkaround>
   <TabsRoot
     aria-label="HTML implementation"
     titles={{ html: 'HTML', css: 'CSS', javascript: 'JS' }}
@@ -60,7 +60,7 @@ import { TabsRoot, TabsPanel } from '@/components/Tabs';
       <ServerCode code={htmlJsStr} lang="js" />
     </TabsPanel>
 
-    <MuteButtonDemo client:load /> 
+    <MuteButtonDemo client:load />
   </TabsRoot>
 </FrameworkCase>
 

site/src/content/docs/reference/play-button.mdx

@@ -24,7 +24,7 @@ import { TabsRoot, TabsPanel } from '@/components/Tabs';
 
 ## Example
 
-<FrameworkCase frameworks={["react"]}>
+<FrameworkCase frameworks={["react"]} withHydrationWorkaround>
   <TabsRoot
     aria-label="React implementation"
     titles={{ component: 'Component', css: 'CSS Module' }}
@@ -42,7 +42,7 @@ import { TabsRoot, TabsPanel } from '@/components/Tabs';
   </TabsRoot>
 </FrameworkCase>
 
-<FrameworkCase frameworks={["html"]}>
+<FrameworkCase frameworks={["html"]} withHydrationWorkaround>
   <TabsRoot
     aria-label="HTML implementation"
     titles={{ html: 'HTML', css: 'CSS', javascript: 'JS' }}

site/src/content/docs/reference/time-slider.mdx

@@ -25,7 +25,7 @@ import { TabsRoot, TabsPanel } from '@/components/Tabs';
 
 ## Example
 
-<FrameworkCase frameworks={["react"]}>
+<FrameworkCase frameworks={["react"]} withHydrationWorkaround>
   <TabsRoot
     aria-label="React implementation"
     titles={{ component: 'Component', css: 'CSS Module' }}
@@ -43,7 +43,7 @@ import { TabsRoot, TabsPanel } from '@/components/Tabs';
   </TabsRoot>
 </FrameworkCase>
 
-<FrameworkCase frameworks={["html"]}>
+<FrameworkCase frameworks={["html"]} withHydrationWorkaround>
   <TabsRoot
     aria-label="HTML implementation"
     titles={{ 'html-horizontal': 'HTML (Horizontal)', 'html-vertical': 'HTML (Vertical)', css: 'CSS' }}

site/src/content/docs/reference/volume-slider.mdx

@@ -25,7 +25,7 @@ import { TabsRoot, TabsPanel } from '@/components/Tabs';
 
 ## Example
 
-<FrameworkCase frameworks={["react"]}>
+<FrameworkCase frameworks={["react"]} withHydrationWorkaround>
   <TabsRoot
     aria-label="React implementation"
     titles={{ component: 'Component', css: 'CSS Module' }}
@@ -43,7 +43,7 @@ import { TabsRoot, TabsPanel } from '@/components/Tabs';
   </TabsRoot>
 </FrameworkCase>
 
-<FrameworkCase frameworks={["html"]}>
+<FrameworkCase frameworks={["html"]} withHydrationWorkaround>
   <TabsRoot
     aria-label="HTML implementation"
     titles={{ 'html-horizontal': 'HTML (Horizontal)', 'html-vertical': 'HTML (Vertical)', css: 'CSS' }}