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

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

View file

@ -0,0 +1,54 @@
/**
* Type-checked examples for the useApp hook.
*
* @module
*/
import { useApp, McpUiToolInputNotificationSchema } from "./index.js";
/**
* Example: Register a notification handler in onAppCreated.
*/
function useApp_registerHandler() {
//#region useApp_registerHandler
useApp({
appInfo: { name: "MyApp", version: "1.0.0" },
capabilities: {},
onAppCreated: (app) => {
app.setNotificationHandler(
McpUiToolInputNotificationSchema,
(notification) => {
console.log("Tool input:", notification.params.arguments);
},
);
},
});
//#endregion useApp_registerHandler
}
/**
* Example: Basic usage of useApp hook.
*/
function useApp_basicUsage() {
//#region useApp_basicUsage
function MyApp() {
const { app, isConnected, error } = useApp({
appInfo: { name: "MyApp", version: "1.0.0" },
capabilities: {},
onAppCreated: (app) => {
// Register handlers before connection
app.setNotificationHandler(
McpUiToolInputNotificationSchema,
(notification) => {
console.log("Tool input:", notification.params.arguments);
},
);
},
});
if (error) return <div>Error: {error.message}</div>;
if (!isConnected) return <div>Connecting...</div>;
return <div>Connected!</div>;
}
//#endregion useApp_basicUsage
}