modelcontextprotocol/ext-apps
Watch
1
0
Fork
You've already forked ext-apps
 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Move JSDoc examples to type-checked .examples.ts files

Browse source 
Extract inline code examples from JSDoc comments into companion
`.examples.ts`/`.examples.tsx` files. Examples are now:

- Type-checked by wrapping them in functions
- Referenced via `{@includeCode ./file.examples.ts#regionName}` tags
- Organized using `//#region` and `//#endregion` markers

This keeps the main source files cleaner while ensuring examples
compile correctly. Updated TypeDoc config with `exampleTag: false`
to support title text on `@example` tags.

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
This commit is contained in:
Jonathan Hefner 2026-01-18 15:11:00 -06:00
commit ad04e89745
1 changed files with 1661 additions and 838 deletions
Download patch file Download diff file Expand all files Collapse all files

58
src/styles.ts
View file

@ -10,12 +10,7 @@ import { McpUiStyles, McpUiTheme } from "./types";
* @returns The current theme ("light" or "dark")
*
* @example Check current theme
* ```typescript
* import { getDocumentTheme } from '@modelcontextprotocol/ext-apps';
*
* const theme = getDocumentTheme();
* console.log(`Current theme: ${theme}`);
* ```
* {@includeCode ./styles.examples.ts#getDocumentTheme_checkCurrent}
*
* @see {@link applyDocumentTheme} to set the theme
* @see {@link McpUiTheme} for the theme type
@ -44,15 +39,7 @@ export function getDocumentTheme(): McpUiTheme {
* @param theme - The theme to apply ("light" or "dark")
*
* @example Apply theme from host context
* ```typescript
* import { applyDocumentTheme } from '@modelcontextprotocol/ext-apps';
*
* app.onhostcontextchanged = (params) => {
* if (params.theme) {
* applyDocumentTheme(params.theme);
* }
* };
* ```
* {@includeCode ./styles.examples.ts#applyDocumentTheme_fromHostContext}
*
* @example Use with CSS selectors
* ```css
@ -85,21 +72,10 @@ export function applyDocumentTheme(theme: McpUiTheme): void {
* @param root - The element to apply styles to (defaults to `document.documentElement`)
*
* @example Apply style variables from host context
* ```typescript
* import { applyHostStyleVariables } from '@modelcontextprotocol/ext-apps';
*
* app.onhostcontextchanged = (params) => {
* if (params.styles?.variables) {
* applyHostStyleVariables(params.styles.variables);
* }
* };
* ```
* {@includeCode ./styles.examples.ts#applyHostStyleVariables_fromHostContext}
*
* @example Apply to a specific element
* ```typescript
* const container = document.getElementById('app-root');
* applyHostStyleVariables(hostContext.styles?.variables, container);
* ```
* {@includeCode ./styles.examples.ts#applyHostStyleVariables_toElement}
*
* @see {@link McpUiStyles} for the available CSS variables
* @see {@link McpUiHostContext} for the full host context structure
@ -129,33 +105,13 @@ export function applyHostStyleVariables(
* @param fontCss - CSS string containing `@font-face` rules and/or `@import` statements
*
* @example Apply fonts from host context
* ```typescript
* import { applyHostFonts } from '@modelcontextprotocol/ext-apps';
*
* app.onhostcontextchanged = (params) => {
* if (params.styles?.css?.fonts) {
* applyHostFonts(params.styles.css.fonts);
* }
* };
* ```
* {@includeCode ./styles.examples.ts#applyHostFonts_fromHostContext}
*
* @example Host providing self-hosted fonts
* ```typescript
* hostContext.styles.css.fonts = `
* @font-face {
* font-family: "Anthropic Sans";
* src: url("https://assets.anthropic.com/.../Regular.otf") format("opentype");
* font-weight: 400;
* }
* `;
* ```
* {@includeCode ./styles.examples.ts#applyHostFonts_selfHosted}
*
* @example Host providing Google Fonts
* ```typescript
* hostContext.styles.css.fonts = `
* @import url('https://fonts.googleapis.com/css2?family=Roboto&display=swap');
* `;
* ```
* {@includeCode ./styles.examples.ts#applyHostFonts_googleFonts}
*
* @example Use host fonts in CSS
* ```css