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:
parent
e5c90c7385
commit
ad04e89745
1 changed files with 1661 additions and 838 deletions
46
src/react/useDocumentTheme.examples.tsx
Normal file
46
src/react/useDocumentTheme.examples.tsx
Normal file
|
|
@ -0,0 +1,46 @@
|
|||
/**
|
||||
* Type-checked examples for the useDocumentTheme hook.
|
||||
*
|
||||
* @module
|
||||
*/
|
||||
|
||||
import { useDocumentTheme } from "./useDocumentTheme.js";
|
||||
|
||||
// Stub components for examples
|
||||
declare function DarkIcon(): React.JSX.Element;
|
||||
declare function LightIcon(): React.JSX.Element;
|
||||
|
||||
/**
|
||||
* Example: Conditionally render based on theme.
|
||||
*/
|
||||
function useDocumentTheme_conditionalRender() {
|
||||
//#region useDocumentTheme_conditionalRender
|
||||
function MyApp() {
|
||||
const theme = useDocumentTheme();
|
||||
|
||||
return <div>{theme === "dark" ? <DarkIcon /> : <LightIcon />}</div>;
|
||||
}
|
||||
//#endregion useDocumentTheme_conditionalRender
|
||||
}
|
||||
|
||||
/**
|
||||
* Example: Use with theme-aware styling.
|
||||
*/
|
||||
function useDocumentTheme_themedButton() {
|
||||
//#region useDocumentTheme_themedButton
|
||||
function ThemedButton() {
|
||||
const theme = useDocumentTheme();
|
||||
|
||||
return (
|
||||
<button
|
||||
style={{
|
||||
background: theme === "dark" ? "#333" : "#fff",
|
||||
color: theme === "dark" ? "#fff" : "#333",
|
||||
}}
|
||||
>
|
||||
Click me
|
||||
</button>
|
||||
);
|
||||
}
|
||||
//#endregion useDocumentTheme_themedButton
|
||||
}
|
||||
Loading…
Reference in a new issue