revert(site): remove unnecessary hydration workarounds

This reverts commit 476fabf7aa.

site/src/components/docs/FrameworkCase.astro

@@ -3,15 +3,9 @@ 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, withHydrationWorkaround } = Astro.props;
+const { frameworks } = Astro.props;
 const { framework } = Astro.params;
 
 // Only render if current framework matches, or if no frameworks specified (all frameworks)
@@ -19,11 +13,19 @@ const shouldRender = !frameworks || frameworks.includes(framework as SupportedFr
 ---
 
 {
-  withHydrationWorkaround ? (
-    <div class="contents" hidden={!shouldRender}>
-      <slot />
-    </div>
-  ) : (
-    shouldRender && <slot />
-  )
+  /*
+    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
+  */
 }
+<div class="contents" hidden={!shouldRender}>
+  <slot />
+</div>

site/src/components/docs/StyleCase.astro

@@ -3,15 +3,9 @@ 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, withHydrationWorkaround } = Astro.props;
+const { styles } = Astro.props;
 const { style } = Astro.params;
 
 // Only render if current style matches, or if no styles specified (all styles)
@@ -19,11 +13,19 @@ const shouldRender = !styles || styles.includes(style as AnySupportedStyle);
 ---
 
 {
-  withHydrationWorkaround ? (
-    <div class="contents" hidden={!shouldRender}>
-      <slot />
-    </div>
-  ) : (
-    shouldRender && <slot />
-  )
+  /*
+    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
+  */
 }
+<div class="contents" hidden={!shouldRender}>
+  <slot />
+</div>

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

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

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

@@ -21,7 +21,7 @@ While eventually we'll have a CLI that'll eject skins in your preferred framewor
 
 ## Frosted Skin
 
-<FrameworkCase frameworks={["react"]} withHydrationWorkaround>
+<FrameworkCase frameworks={["react"]}>
 
 <TabsRoot
   aria-label="Frosted React implementation"
@@ -38,7 +38,7 @@ While eventually we'll have a CLI that'll eject skins in your preferred framewor
 
 </FrameworkCase>
 
-<FrameworkCase frameworks={["html"]} withHydrationWorkaround>
+<FrameworkCase frameworks={["html"]}>
 
 <TabsRoot
   aria-label="Frosted HTML implementation"
@@ -60,7 +60,7 @@ While eventually we'll have a CLI that'll eject skins in your preferred framewor
 
 ## Minimal Skin
 
-<FrameworkCase frameworks={["react"]} withHydrationWorkaround>
+<FrameworkCase frameworks={["react"]}>
 
 <TabsRoot
   aria-label="Minimal React implementation"
@@ -77,7 +77,7 @@ While eventually we'll have a CLI that'll eject skins in your preferred framewor
 
 </FrameworkCase>
 
-<FrameworkCase frameworks={["html"]} withHydrationWorkaround>
+<FrameworkCase frameworks={["html"]}>
 
 <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"]} withHydrationWorkaround>
+<FrameworkCase frameworks={["react"]}>
   <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"]} withHydrationWorkaround>
+<FrameworkCase frameworks={["html"]}>
   <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"]} withHydrationWorkaround>
+<FrameworkCase frameworks={["react"]}>
   <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"]} withHydrationWorkaround>
+<FrameworkCase frameworks={["html"]}>
   <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"]} withHydrationWorkaround>
+<FrameworkCase frameworks={["react"]}>
   <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"]} withHydrationWorkaround>
+<FrameworkCase frameworks={["html"]}>
   <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"]} withHydrationWorkaround>
+<FrameworkCase frameworks={["react"]}>
   <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"]} withHydrationWorkaround>
+<FrameworkCase frameworks={["html"]}>
   <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"]} withHydrationWorkaround>
+<FrameworkCase frameworks={["react"]}>
   <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"]} withHydrationWorkaround>
+<FrameworkCase frameworks={["html"]}>
   <TabsRoot
     aria-label="HTML implementation"
     titles={{ 'html-horizontal': 'HTML (Horizontal)', 'html-vertical': 'HTML (Vertical)', css: 'CSS' }}