Docs: Fix Tree Shaking problems

2026-10-25 04:20:02 +00:00 · 2023-10-16 20:54:14 +08:00
parent 45b4aa9db7
commit 546ee00a40
16 changed files with 42 additions and 34 deletions
@@ -1,10 +1,16 @@
 'use client'

 import { ThemeSwitch } from '@/components/ThemeSwitch'
+import type { LucideProps } from 'lucide-react'
+import dynamicIconImports from 'lucide-react/dynamicIconImports'
 import { useMDXComponent } from 'next-contentlayer/hooks'
+import { Accordion, Accordions } from 'next-docs-ui/components/accordion'
 import { Callout } from 'next-docs-ui/components/callout'
 import { ImageZoom } from 'next-docs-ui/components/image-zoom'
+import { Tab, Tabs } from 'next-docs-ui/components/tabs'
+import { TypeTable } from 'next-docs-ui/components/type-table'
 import defaultComponents from 'next-docs-ui/mdx'
+import dynamic from 'next/dynamic'
 import type { HTMLAttributes } from 'react'

 const components = {
@@ -16,11 +22,27 @@ const components = {
  ),
  ThemeSwitch,
  Callout,
+  TypeTable,
+  Accordion,
+  Accordions,
+  Tab,
+  Tabs,
+  Icon,
  blockquote: (props: React.QuoteHTMLAttributes<HTMLQuoteElement>) => (
    <Callout className="my-4">{props.children}</Callout>
  )
 }

+interface IconProps extends LucideProps {
+  name: keyof typeof dynamicIconImports
+}
+
+function Icon({ name, ...props }: IconProps) {
+  const LucideIcon = dynamic(dynamicIconImports[name])
+
+  return <LucideIcon {...props} />
+}
+
 export function Content({ code }: { code: string }) {
  const inject = `if (typeof process === 'undefined') {globalThis.process = { env: {} }}`
  const MDX = useMDXComponent(inject + code)
@@ -3,9 +3,6 @@ title: Flexsearch
 description: Built-in document search of Next Docs
 ---

-import { Accordion, Accordions } from 'next-docs-ui/components/accordion'
-import { TypeTable } from 'next-docs-ui/components/type-table'
-
 Next Docs supports searching document based on
 [Flexsearch](https://github.com/nextapps-de/flexsearch).

@@ -3,9 +3,6 @@ title: Layout
 description: The layout of documentation
 ---

-import { Accordion, Accordions } from 'next-docs-ui/components/accordion'
-import { TypeTable } from 'next-docs-ui/components/type-table'
-
 The layout of documentation pages, it must be nested under the
 [Root Provider](/docs/ui/blocks/root-provider).

@@ -54,7 +51,8 @@ export default function Layout({ children }) {

 ### Shared Navbar

-It is common to share a navbar across all the pages. To achieve this, you may disable the default navbar and place your own instead.
+It is common to share a navbar across all the pages. To achieve this, you may
+disable the default navbar and place your own instead.

 - [Learn more about Navbar](/docs/ui/blocks/nav)

@@ -3,8 +3,6 @@ title: Navbar
 description: The default Navbar component with a sidebar trigger and searchbar.
 ---

-import { TypeTable } from 'next-docs-ui/components/type-table'
-
 The default Navbar component with a sidebar toggle and search dialog trigger.

 <Callout title="Note">
@@ -3,8 +3,6 @@ title: Page
 description: A page in your documentation
 ---

-import { TypeTable } from 'next-docs-ui/components/type-table'
-
 Page is the base element of a documentation, it includes Table of contents,
 Footer, and Breadcrumb.

@@ -3,8 +3,6 @@ title: Root Provider
 description: The context provider of Next Docs UI.
 ---

-import { TypeTable } from 'next-docs-ui/components/type-table'
-
 The context provider of all the components, including `next-themes` and context
 for search dialog. It should be located at the root layout.

@@ -3,8 +3,6 @@ title: Create Docs CLI
 description: Generate documentation sites with a command
 ---

-import { Tab, Tabs } from 'next-docs-ui/components/tabs'
-
 ## Usage

 No arguments needed.
@@ -3,9 +3,6 @@ title: Accordion
 description: Add Accordions to your documentation
 ---

-import { Accordion, Accordions } from 'next-docs-ui/components/accordion'
-import { TypeTable } from 'next-docs-ui/components/type-table'
-
 > it is an optional component which won't be loaded by default.

 ## Usage
@@ -3,9 +3,6 @@ title: Card
 description: Use the Card component in your MDX documentation
 ---

-import { HomeIcon } from 'lucide-react'
-import { TypeTable } from 'next-docs-ui/components/type-table'
-
 ## Usage

 Add it to your MDX components.
@@ -84,11 +81,27 @@ import { HomeIcon } from 'lucide-react'
 </Cards>
 ```

-<br />
+<Callout title="Tree Shaking" type="warn" className='my-4'>
+
+If you're using Contentlayer, or other libraries for rendering MDX, ensure that
+tree shaking is working properly.
+
+In some cases, you must import icons from MDX Components.
+
+```tsx
+import { HomeIcon } from 'lucide-react'
+
+const components = {
+  ...defaultComponents,
+  HomeIcon
+}
+```
+
+</Callout>

 <Cards>
  <Card
-    icon={<HomeIcon />}
+    icon={<Icon name="home" />}
    href="/"
    title="Home"
    description="Go back to home"
@@ -4,7 +4,6 @@ description: Display file structure in your documentation
 ---

 import { File, Files } from 'next-docs-ui/components/files'
-import { TypeTable } from 'next-docs-ui/components/type-table'

 > it is an optional component which won't be loaded by default.

@@ -4,7 +4,6 @@ description: Add Inline TOC into your documentation
 ---

 import { InlineTOC } from 'next-docs-ui/components/inline-toc'
-import { TypeTable } from 'next-docs-ui/components/type-table'

 <InlineTOC
  items={[
@@ -4,7 +4,6 @@ description: A button that scrolls to the top
 ---

 import { RollButton } from 'next-docs-ui/components/roll-button'
-import { TypeTable } from 'next-docs-ui/components/type-table'

 A button that scrolls to the top.

@@ -3,8 +3,6 @@ title: Tabs
 description: Adding Tabs to your documentation
 ---

-import { Tab, Tabs } from 'next-docs-ui/components/tabs'
-
 A Tabs component built with
 [Radix UI](https://www.radix-ui.com/primitives/docs/components/tabs), with
 additional features such as persistent and shared value.
@@ -3,8 +3,6 @@ title: Type Table
 description: A table for documenting types
 ---

-import { TypeTable } from 'next-docs-ui/components/type-table'
-
 > it is an optional component which won't be loaded by default.

 ## Usage
@@ -3,9 +3,6 @@ title: Quick Start
 description: Getting Started with Next Docs UI
 ---

-import { Accordion, Accordions } from 'next-docs-ui/components/accordion'
-import { Tab, Tabs } from 'next-docs-ui/components/tabs'
-
 Next Docs UI is the Next.js framework for building documentation website.

 ## Features
@@ -4,7 +4,6 @@ description: Add Theme to Next Docs UI
 ---

 import { blue_theme, full_layout } from '@/components/themes.js'
-import { Accordion, Accordions } from 'next-docs-ui/components/accordion'

 The design system is based on [Shadcn UI](https://ui.shadcn.com), allowing you
 to overwrite css variables.