@windrun-huaiin/third-ui 22.0.0 → 23.0.0

package/src/fuma/server/site-mdx-base.tsx

@@ -0,0 +1,62 @@
+import { Tab, Tabs } from 'fumadocs-ui/components/tabs';
+import { Callout } from 'fumadocs-ui/components/callout';
+import { File, Folder, Files } from 'fumadocs-ui/components/files';
+import { Accordion, Accordions } from 'fumadocs-ui/components/accordion';
+import type { MDXComponents } from 'mdx/types';
+import { SiteX } from '../site-x';
+import { createBaseMdxComponents } from './features/base';
+import { createWidgetMdxComponents } from './features/widgets';
+
+export type SiteMdxFeatureComponents = MDXComponents;
+
+export interface SiteMdxBaseOptions {
+  imageFallbackSrc?: string;
+  cdnBaseUrl?: string;
+}
+
+export interface CreateSiteMdxComponentsOptions {
+  baseOptions?: SiteMdxBaseOptions;
+  features?: SiteMdxFeatureComponents[];
+  additionalComponents?: MDXComponents;
+}
+
+const defaultFumaUiComponents: MDXComponents = {
+  Callout,
+  File,
+  Folder,
+  Files,
+  Accordion,
+  Accordions,
+  Tab,
+  Tabs,
+};
+
+export function createSiteMdxBaseComponents(
+  options: SiteMdxBaseOptions = {},
+): MDXComponents {
+  return {
+    ...defaultFumaUiComponents,
+    SiteX,
+    ...createBaseMdxComponents(options.imageFallbackSrc),
+    ...createWidgetMdxComponents(options.cdnBaseUrl, options.imageFallbackSrc),
+  };
+}
+
+export function createSiteMdxComponents(
+  options: CreateSiteMdxComponentsOptions = {},
+) {
+  const {
+    additionalComponents,
+    baseOptions,
+    features = [],
+  } = options;
+
+  return function getMDXComponents(components?: MDXComponents): MDXComponents {
+    return {
+      ...createSiteMdxBaseComponents(baseOptions),
+      ...features.reduce<MDXComponents>((acc, feature) => ({ ...acc, ...feature }), {}),
+      ...additionalComponents,
+      ...components,
+    };
+  };
+}

package/src/fuma/server/site-mdx-components.tsx

@@ -1,10 +1,9 @@
 import type { MDXComponents } from 'mdx/types';
 import type { ReactNode } from 'react';
-import type { SiteMdxFeature } from '@windrun-huaiin/contracts/mdx';
 import {
-  composeSiteMdxComponents,
-  createSiteFeatureComponentMap,
+  createComposedSiteMdxComponents,
   DEFAULT_SITE_MDX_FEATURES,
+  type SiteMdxFeature,
 } from './site-mdx-presets';
 
 export interface SiteMdxComponentsOptions {
@@ -29,18 +28,17 @@ export function createSiteMdxComponents(
     watermarkEnabled,
     watermarkText,
   } = options;
-  const featureMap = createSiteFeatureComponentMap({
-    cdnBaseUrl,
-    iconMap,
-    imageFallbackSrc,
-    watermarkEnabled,
-    watermarkText,
-  });
 
   return function getMDXComponents(components?: MDXComponents): MDXComponents {
-    return composeSiteMdxComponents(
+    return createComposedSiteMdxComponents(
       features,
-      featureMap,
+      {
+        cdnBaseUrl,
+        iconMap,
+        imageFallbackSrc,
+        watermarkEnabled,
+        watermarkText,
+      },
       additionalComponents,
       components,
     );

package/src/fuma/server/site-mdx-fallbacks.tsx

@@ -0,0 +1,122 @@
+import type { ComponentPropsWithoutRef, ReactNode } from 'react';
+
+type MissingFeatureBlockProps = ComponentPropsWithoutRef<'div'> & {
+  feature: string;
+  component: string;
+};
+
+type MissingFeatureInlineProps = ComponentPropsWithoutRef<'span'> & {
+  feature: string;
+  component: string;
+};
+
+type MdxFallbackExtraProps = Record<string, unknown>;
+
+function renderChildren(children: ReactNode) {
+  if (children == null || children === '') {
+    return <span className="italic text-fd-muted-foreground">No fallback content.</span>;
+  }
+
+  return children;
+}
+
+function hasChildren(children: ReactNode) {
+  return children != null && children !== '';
+}
+
+function getDisplayProps(props: MdxFallbackExtraProps) {
+  return Object.entries(props)
+    .filter(([, value]) =>
+      typeof value === 'string' ||
+      typeof value === 'number' ||
+      typeof value === 'boolean',
+    )
+    .map(([key, value]) => [key, String(value)] as const);
+}
+
+export function MissingMdxFeatureBlock({
+  feature,
+  component,
+  children,
+  className,
+  ...props
+}: MissingFeatureBlockProps) {
+  const displayProps = getDisplayProps(props);
+
+  return (
+    <div
+      className={[
+        'my-4 rounded-xl border border-red-300 bg-red-50/80 p-4 text-sm text-red-950 shadow-sm dark:border-red-800/80 dark:bg-red-950/30 dark:text-red-100',
+        className,
+      ].filter(Boolean).join(' ')}
+    >
+      <div className="mb-2 flex flex-wrap items-center gap-2 font-medium">
+        <span>MDX feature not enabled</span>
+        <code className="rounded bg-red-100 px-1.5 py-0.5 text-xs dark:bg-red-900/60">{feature}</code>
+        <code className="rounded bg-red-100 px-1.5 py-0.5 text-xs dark:bg-red-900/60">{component}</code>
+      </div>
+      {displayProps.length > 0 && (
+        <div className="mb-2 flex flex-wrap gap-1.5 text-xs">
+          {displayProps.map(([key, value]) => (
+            <span
+              key={key}
+              className="rounded-md border border-red-200 bg-white/60 px-1.5 py-0.5 font-mono dark:border-red-900/70 dark:bg-black/20"
+            >
+              {key}={value}
+            </span>
+          ))}
+        </div>
+      )}
+      <div className="whitespace-pre-wrap break-words rounded-lg border border-red-200 bg-white/70 p-3 font-mono text-xs text-red-900 dark:border-red-900/70 dark:bg-black/20 dark:text-red-100">
+        {renderChildren(children)}
+      </div>
+    </div>
+  );
+}
+
+export function MissingMdxFeatureInline({
+  feature,
+  component,
+  children,
+  className,
+  ...props
+}: MissingFeatureInlineProps) {
+  const displayProps = getDisplayProps(props);
+
+  return (
+    <span
+      className={[
+        'inline-flex max-w-full items-center gap-1 rounded-md border border-red-300 bg-red-50 px-1.5 py-0.5 text-sm text-red-900 dark:border-red-800 dark:bg-red-950/40 dark:text-red-100',
+        className,
+      ].filter(Boolean).join(' ')}
+      title={`MDX feature not enabled: ${feature} (${component})`}
+    >
+      <span className="font-medium">{component}</span>
+      {displayProps.map(([key, value]) => (
+        <span key={key} className="font-mono text-xs opacity-80">
+          {key}={value}
+        </span>
+      ))}
+      {hasChildren(children) && (
+        <span className="font-mono text-xs opacity-80">{children}</span>
+      )}
+    </span>
+  );
+}
+
+export function createMissingMdxFeatureComponents() {
+  return {
+    MathBlock: (props: ComponentPropsWithoutRef<'div'>) => (
+      <MissingMdxFeatureBlock {...props} feature="math" component="MathBlock" />
+    ),
+    InlineMath: (props: ComponentPropsWithoutRef<'span'>) => (
+      <MissingMdxFeatureInline {...props} feature="math" component="InlineMath" />
+    ),
+    Mermaid: (props: ComponentPropsWithoutRef<'div'>) => (
+      <MissingMdxFeatureBlock {...props} feature="diagram renderer" component="Mermaid" />
+    ),
+    TypeTable: (props: ComponentPropsWithoutRef<'div'>) => (
+      <MissingMdxFeatureBlock {...props} feature="API table renderer" component="TypeTable" />
+    ),
+  };
+}

package/src/fuma/server/site-mdx-features/code.ts

@@ -0,0 +1 @@
+export { createCodeMdxComponents } from '../features/code';

package/src/fuma/server/site-mdx-features/math.ts

@@ -0,0 +1 @@
+export { createMathMdxComponents } from '../features/math';

package/src/fuma/server/site-mdx-features/mermaid.ts

@@ -0,0 +1 @@
+export { createMermaidMdxComponents } from '../features/mermaid';

package/src/fuma/server/site-mdx-features/type-table.ts

@@ -0,0 +1 @@
+export { createTypeTableMdxComponents } from '../features/type-table';

package/src/fuma/server/site-mdx-presets.ts

@@ -14,7 +14,8 @@ import {
 } from './optional-features';
 import { SiteX } from '../site-x';
 import type { SiteMdxComponentsOptions } from './site-mdx-components';
-import type { SiteMdxFeature } from '@windrun-huaiin/contracts/mdx';
+
+export type SiteMdxFeature = 'base' | 'code' | 'math' | 'mermaid' | 'type-table';
 
 const defaultFumaUiComponents: MDXComponents = {
   Callout,
@@ -60,6 +61,37 @@ export function createSiteFeatureComponentMap(
   } satisfies Record<SiteMdxFeature, MDXComponents>;
 }
 
+function createSiteFeatureComponents(
+  feature: SiteMdxFeature,
+  options: SiteMdxComponentsOptions,
+): MDXComponents {
+  const {
+    cdnBaseUrl,
+    iconMap = {},
+    imageFallbackSrc,
+    watermarkEnabled,
+    watermarkText,
+  } = options;
+
+  switch (feature) {
+    case 'base':
+      return {
+        ...defaultFumaUiComponents,
+        SiteX,
+        ...createBaseMdxComponents(imageFallbackSrc),
+        ...createWidgetMdxComponents(cdnBaseUrl, imageFallbackSrc),
+      };
+    case 'code':
+      return createCodeMdxComponents(iconMap);
+    case 'math':
+      return createMathMdxComponents();
+    case 'mermaid':
+      return createMermaidMdxComponents(watermarkEnabled, watermarkText);
+    case 'type-table':
+      return createTypeTableMdxComponents();
+  }
+}
+
 export function composeSiteMdxComponents(
   features: readonly SiteMdxFeature[],
   featureMap: Record<SiteMdxFeature, MDXComponents>,
@@ -78,3 +110,22 @@ export function composeSiteMdxComponents(
     ...components,
   };
 }
+
+export function createComposedSiteMdxComponents(
+  features: readonly SiteMdxFeature[],
+  options: SiteMdxComponentsOptions,
+  additionalComponents?: MDXComponents,
+  components?: MDXComponents,
+): MDXComponents {
+  return {
+    ...defaultMdxComponents,
+    ...features.reduce<MDXComponents>((acc, feature) => {
+      return {
+        ...acc,
+        ...createSiteFeatureComponents(feature, options),
+      };
+    }, {}),
+    ...additionalComponents,
+    ...components,
+  };
+}

package/src/fuma/share/markdown-component-map.tsx

@@ -1,7 +1,9 @@
 import { cn } from '@windrun-huaiin/lib/utils';
-import defaultMdxComponents from 'fumadocs-ui/mdx';
-import { type ComponentType } from 'react';
-import { ImageZoom } from '../heavy';
+import { lazy, type ComponentType } from 'react';
+
+const ImageZoom = lazy(() =>
+  import('../heavy/image-zoom').then((mod) => ({ default: mod.ImageZoom })),
+);
 
 export type MarkdownComponentMap = Record<string, ComponentType<any>>;
 
@@ -18,7 +20,6 @@ function normalizeMarkdownProps<T extends Record<string, any>>(props: T) {
 }
 
 export const baseMarkdownComponents: MarkdownComponentMap = {
-  ...defaultMdxComponents,
   a: ({ className, ...props }) => (
     <a
       {...normalizeMarkdownProps(props)}