Composants personnalisés

Tout appel de fonction dans Tiramisu qui ne correspond pas à une fonction intégrée devient automatiquement un composant Svelte personnalisé. Cela vous permet d'enrichir votre documentation avec des widgets interactifs, des mises en page personnalisées ou toute interface que vous pouvez construire avec Svelte.

Comment ça fonctionne

Lorsque le compilateur Tiramisu rencontre un nom de fonction inconnu, il génère un import pour un composant Svelte par convention :

• myWidget { } importe src/lib/components/tiramisu/MyWidget.svelte
• apiPlayground { } importe src/lib/components/tiramisu/ApiPlayground.svelte
• videoPlayer { } importe src/lib/components/tiramisu/VideoPlayer.svelte

Le nom de la fonction est converti en PascalCase pour le nom du fichier du composant.

Les paramètres deviennent des props

Les paramètres nommés dans l'appel de fonction deviennent des props du composant. Le contenu positionnel devient le slot par défaut (children) :

myCard {
  title = My Feature,
  icon = rocket,
  This is the card body content with bold { bold text } and other formatting.
}

Ceci est équivalent à :

<MyCard title="My Feature" icon="rocket">
  <p>This is the card body content with <strong>bold text</strong> and other formatting.</p>
</MyCard>

Créer un composant

Définissez votre composant avec les props attendues :

<script>
  let { title, icon, children } = $props()
</script>

<div class="my-card">
  <h3>{title}</h3>
  {@render children()}
</div>

<style>
  .my-card {
    border: 1px solid #e5e7eb;
    border-radius: 0.5rem;
    padding: 1rem;
  }
</style>

Puis utilisez-le dans n'importe quel fichier .tiramisu :

myCard {
  title = Hello World,
  This content will be rendered as children.
}

Remplacer les composants intégrés

Tous les composants — de mise en page et intégrés — sont importés via un fichier barrel situé à src/lib/components/index.ts. Ce fichier réexporte les valeurs par défaut du kit :

// src/lib/components/index.ts
export { default as DocsLayout } from "@tiramisu-docs/kit/components/DocsLayout.svelte"
export { default as CodeBlock } from "@tiramisu-docs/kit/components/tiramisu/CodeBlock.svelte"
export { default as Callout } from "@tiramisu-docs/kit/components/tiramisu/Callout.svelte"
// ... other components

Pour remplacer n'importe quel composant, créez votre propre version et modifiez l'export :

// Before
export { default as Callout } from "@tiramisu-docs/kit/components/tiramisu/Callout.svelte"

// After
export { default as Callout } from "./MyCallout.svelte"

Votre composant personnalisé reçoit les mêmes props que la version intégrée. Cela fonctionne pour n'importe quel composant — les composants de mise en page comme DocsLayout et DocPage, ou les composants de contenu intégrés comme CodeBlock, Tabs et NavCard.