UI: Drop fumadocs-core/hide-if-empty usage

Author: fuma-nama

.changeset/calm-parents-dream.md

@@ -0,0 +1,5 @@
+---
+'fumadocs-ui': patch
+---
+
+Drop `fumadocs-core/hide-if-empty` usage, prefer user-side component overrides for precise control

examples/next-mdx/content/docs/fun/index.mdx

@@ -0,0 +1,35 @@
+---
+title: Hello World
+description: |
+  Your first `document`
+  ```ts
+  console.log("Hello World")
+  ```
+---
+
+Hey there! fsd asfd sdfsfda
+sfd
+
+fdsa ff dsaf sdf sda fasd fsd
+
+## Heading
+
+Hello World dsasfdafsd
+
+<Cards>
+  <Card title="Learn more about Next.js" href="https://nextjs.org/docs" />
+  <Card title="Learn more about Fumadocs" href="https://fumadocs.dev" />
+</Cards>
+
+### Heading
+
+#### Heading
+
+| Head                            | Description                         |
+| ------------------------------- | ----------------------------------- |
+| `hello`                         | Hello World                         |
+| very **important**              | Hey                                 |
+| _Surprisingly_                  | Fumadocs                            |
+| very long text that looks weird | hello world hello world hello world |
+
+<include>./test.mdx</include>

examples/next-mdx/content/docs/fun/meta.json

@@ -0,0 +1,3 @@
+{
+  "root": true
+}

examples/next-mdx/content/docs/fun/test.mdx

@@ -0,0 +1,24 @@
+---
+title: Test
+description: A document to test Fumadocs
+---
+
+Hey there!
+
+## Cards
+
+<Cards>
+  <Card title="Learn more about Next.js" href="https://nextjs.org/docs" />
+  <Card title="Learn more about Fumadocs" href="https://fumadocs.dev" />
+</Cards>
+
+### CodeBlock
+
+```js
+console.log('Hello World');
+```
+
+#### List
+
+- Hello
+- World

packages/core/src/hide-if-empty.tsx

@@ -49,6 +49,28 @@ function isEmpty(node: HTMLElement) {
   return true;
 }
 
+function disableAnimation() {
+  const css = document.createElement('style');
+  const nonce = document.currentScript?.nonce;
+  if (nonce) css.setAttribute('nonce', nonce);
+  css.appendChild(
+    document.createTextNode(
+      `*,*::before,*::after{-webkit-transition:none!important;-moz-transition:none!important;-o-transition:none!important;-ms-transition:none!important;transition:none!important}`,
+    ),
+  );
+  document.head.appendChild(css);
+
+  return () => {
+    // Force restyle
+    (() => window.getComputedStyle(document.body))();
+
+    // Wait for next tick before removing
+    setTimeout(() => {
+      document.head.removeChild(css);
+    }, 1);
+  };
+}
+
 /**
  * The built-in CSS `:empty` selector cannot detect if the children is hidden, classes such as `md:hidden` causes it to fail.
  * This component is an enhancement to `empty:hidden` to fix the issue described above.
@@ -80,10 +102,10 @@ export function HideIfEmpty<Props extends HTMLAttributes<HTMLElement>>({
 
   const init = (id: string) => {
     const element = getElement(id);
-    if (element) element.hidden = isEmpty(element);
-
-    const script = document.currentScript;
-    if (script) script.parentNode?.removeChild(script);
+    if (element) {
+      disableAnimation();
+      element.hidden = isEmpty(element);
+    }
   };
 
   return (
@@ -93,14 +115,13 @@ export function HideIfEmpty<Props extends HTMLAttributes<HTMLElement>>({
         data-fd-if-empty={id}
         hidden={empty ?? false}
       />
-      {empty === undefined && (
-        <script
-          nonce={nonce}
-          dangerouslySetInnerHTML={{
-            __html: `{${getElement};${isEmpty};(${init})("${id}")}`,
-          }}
-        />
-      )}
+      <script
+        suppressHydrationWarning
+        nonce={nonce}
+        dangerouslySetInnerHTML={{
+          __html: `{${getElement};${isEmpty};${disableAnimation};(${init})("${id}")}`,
+        }}
+      />
     </>
   );
 }

packages/ui/src/layouts/docs/index.tsx

@@ -31,7 +31,6 @@ import {
   type BaseLayoutProps,
   BaseLinkItem,
   getLinks,
-  type IconItemType,
   type LinkItemType,
 } from '@/layouts/shared';
 import {
@@ -52,7 +51,6 @@ import {
   LargeSearchToggle,
   SearchToggle,
 } from '@/components/layout/search-toggle';
-import { HideIfEmpty } from 'fumadocs-core/hide-if-empty';
 import {
   getSidebarTabs,
   type GetSidebarTabsOptions,
@@ -138,9 +136,7 @@ export function DocsLayout({
     } = sidebarProps;
     if (component) return component;
 
-    const iconLinks = links.filter(
-      (item): item is IconItemType => item.type === 'icon',
-    );
+    const iconLinks = links.filter((item) => item.type === 'icon');
 
     const viewport = (
       <SidebarViewport>
@@ -244,32 +240,40 @@ export function DocsLayout({
           {banner}
         </SidebarHeader>
         {viewport}
-        <HideIfEmpty as={SidebarFooter}>
-          <div className="flex text-fd-muted-foreground items-center empty:hidden">
-            {i18n ? (
-              <LanguageToggle>
-                <Languages className="size-4.5" />
-              </LanguageToggle>
-            ) : null}
-            {iconLinks.map((item, i) => (
-              <BaseLinkItem
-                key={i}
-                item={item}
-                className={cn(
-                  buttonVariants({ size: 'icon-sm', color: 'ghost' }),
-                )}
-                aria-label={item.label}
-              >
-                {item.icon}
-              </BaseLinkItem>
-            ))}
-            {themeSwitch.enabled !== false &&
-              (themeSwitch.component ?? (
-                <ThemeToggle className="ms-auto p-0" mode={themeSwitch.mode} />
+        {(i18n ||
+          iconLinks.length > 0 ||
+          themeSwitch?.enabled !== false ||
+          footer) && (
+          <SidebarFooter>
+            <div className="flex text-fd-muted-foreground items-center empty:hidden">
+              {i18n && (
+                <LanguageToggle>
+                  <Languages className="size-4.5" />
+                </LanguageToggle>
+              )}
+              {iconLinks.map((item, i) => (
+                <BaseLinkItem
+                  key={i}
+                  item={item}
+                  className={cn(
+                    buttonVariants({ size: 'icon-sm', color: 'ghost' }),
+                  )}
+                  aria-label={item.label}
+                >
+                  {item.icon}
+                </BaseLinkItem>
               ))}
-          </div>
-          {footer}
-        </HideIfEmpty>
+              {themeSwitch.enabled !== false &&
+                (themeSwitch.component ?? (
+                  <ThemeToggle
+                    className="ms-auto p-0"
+                    mode={themeSwitch.mode}
+                  />
+                ))}
+            </div>
+            {footer}
+          </SidebarFooter>
+        )}
       </SidebarContent>
     );