|
1 | 1 | import { useEffect, useRef } from "react"; |
2 | 2 | import { App } from "../app"; |
3 | | -import { applyDocumentTheme, applyHostStyleVariables } from "../styles"; |
| 3 | +import { |
| 4 | + applyDocumentTheme, |
| 5 | + applyHostFonts, |
| 6 | + applyHostStyleVariables, |
| 7 | +} from "../styles"; |
4 | 8 | import { McpUiHostContext } from "../types"; |
5 | 9 |
|
6 | 10 | /** |
@@ -54,6 +58,7 @@ import { McpUiHostContext } from "../types"; |
54 | 58 | * |
55 | 59 | * @see {@link applyHostStyleVariables} for the underlying styles function |
56 | 60 | * @see {@link applyDocumentTheme} for the underlying theme function |
| 61 | + * @see {@link useHostFonts} for applying host fonts |
57 | 62 | * @see {@link McpUiStyles} for available CSS variables |
58 | 63 | */ |
59 | 64 | export function useHostStyleVariables( |
@@ -94,3 +99,104 @@ export function useHostStyleVariables( |
94 | 99 | }; |
95 | 100 | }, [app]); |
96 | 101 | } |
| 102 | + |
| 103 | +/** |
| 104 | + * React hook that applies host fonts from CSS. |
| 105 | + * |
| 106 | + * This hook listens to host context changes and automatically applies: |
| 107 | + * - `styles.css.fonts` as a `<style>` tag for custom fonts |
| 108 | + * |
| 109 | + * The CSS can contain `@font-face` rules for self-hosted fonts, |
| 110 | + * `@import` statements for Google Fonts or other font services, or both. |
| 111 | + * |
| 112 | + * The hook also applies fonts from the initial host context when |
| 113 | + * the app first connects. |
| 114 | + * |
| 115 | + * @param app - The connected App instance, or null during initialization |
| 116 | + * @param initialContext - Initial host context from the connection (optional). |
| 117 | + * If provided, fonts will be applied immediately on mount. |
| 118 | + * |
| 119 | + * @example Basic usage with useApp |
| 120 | + * ```tsx |
| 121 | + * import { useApp } from '@modelcontextprotocol/ext-apps/react'; |
| 122 | + * import { useHostFonts } from '@modelcontextprotocol/ext-apps/react'; |
| 123 | + * |
| 124 | + * function MyApp() { |
| 125 | + * const { app, isConnected } = useApp({ |
| 126 | + * appInfo: { name: "MyApp", version: "1.0.0" }, |
| 127 | + * capabilities: {}, |
| 128 | + * }); |
| 129 | + * |
| 130 | + * // Automatically apply host fonts |
| 131 | + * useHostFonts(app); |
| 132 | + * |
| 133 | + * return ( |
| 134 | + * <div style={{ fontFamily: 'var(--font-sans)' }}> |
| 135 | + * Hello! |
| 136 | + * </div> |
| 137 | + * ); |
| 138 | + * } |
| 139 | + * ``` |
| 140 | + * |
| 141 | + * @example With initial context |
| 142 | + * ```tsx |
| 143 | + * const [hostContext, setHostContext] = useState<McpUiHostContext | null>(null); |
| 144 | + * |
| 145 | + * // ... get initial context from app.connect() result |
| 146 | + * |
| 147 | + * useHostFonts(app, hostContext); |
| 148 | + * ``` |
| 149 | + * |
| 150 | + * @see {@link applyHostFonts} for the underlying fonts function |
| 151 | + * @see {@link useHostStyleVariables} for applying style variables and theme |
| 152 | + */ |
| 153 | +export function useHostFonts( |
| 154 | + app: App | null, |
| 155 | + initialContext?: McpUiHostContext | null, |
| 156 | +): void { |
| 157 | + const initialApplied = useRef(false); |
| 158 | + |
| 159 | + // Apply initial fonts once on mount |
| 160 | + useEffect(() => { |
| 161 | + if (initialApplied.current) { |
| 162 | + return; |
| 163 | + } |
| 164 | + if (initialContext?.styles?.css?.fonts) { |
| 165 | + applyHostFonts(initialContext.styles.css.fonts); |
| 166 | + initialApplied.current = true; |
| 167 | + } |
| 168 | + }, [initialContext]); |
| 169 | + |
| 170 | + // Listen for host context changes and apply updated fonts |
| 171 | + useEffect(() => { |
| 172 | + if (!app) { |
| 173 | + return; |
| 174 | + } |
| 175 | + |
| 176 | + app.onhostcontextchanged = (params) => { |
| 177 | + if (params.styles?.css?.fonts) { |
| 178 | + applyHostFonts(params.styles.css.fonts); |
| 179 | + } |
| 180 | + }; |
| 181 | + }, [app]); |
| 182 | +} |
| 183 | + |
| 184 | +/** |
| 185 | + * React hook that applies host styles, fonts, and theme. |
| 186 | + * |
| 187 | + * This is a convenience hook that combines {@link useHostStyleVariables} and |
| 188 | + * {@link useHostFonts}. Use the individual hooks if you need more control. |
| 189 | + * |
| 190 | + * @param app - The connected App instance, or null during initialization |
| 191 | + * @param initialContext - Initial host context from the connection (optional). |
| 192 | + * |
| 193 | + * @see {@link useHostStyleVariables} for style variables and theme only |
| 194 | + * @see {@link useHostFonts} for fonts only |
| 195 | + */ |
| 196 | +export function useHostStyles( |
| 197 | + app: App | null, |
| 198 | + initialContext?: McpUiHostContext | null, |
| 199 | +): void { |
| 200 | + useHostStyleVariables(app, initialContext); |
| 201 | + useHostFonts(app, initialContext); |
| 202 | +} |
0 commit comments