Créer et publier une librairie Vue 3 — composant de patch notes avec mode Vue, composable, mode standalone CDN, personnalisation CSS et publication npm.
Avant d'écrire une ligne de composant, on définit les types. Ils servent à la fois de contrat d'API et de documentation pour les utilisateurs de la librairie.
export interface PatchNoteSection {
title: string
items: string[]
}
export interface PatchNotesConfig {
title: string
sections: PatchNoteSection[]
}Un objet PatchNotesConfig ressemble à ça en pratique :
const patchnotes: PatchNotesConfig = {
title: "Version 2.0.0",
sections: [
{
title: "Nouvelles fonctionnalités",
items: ["Mode sombre", "Export PDF", "Raccourcis clavier"]
},
{
title: "Corrections",
items: ["Crash Safari iOS", "Fuite mémoire sur navigation rapide"]
}
]
}export interface CSSCustomization {
primaryColor?: string
backgroundColor?: string
textColor?: string
buttonBackgroundColor?: string
buttonTextColor?: string
borderColor?: string
accentColor?: string
}Toutes les propriétés sont optionnelles — la librairie a des valeurs par défaut. L'utilisateur surcharge uniquement ce qu'il veut changer.
export interface WidgetOptions {
closeButtonText?: string
forceShow?: boolean
}
export interface WindowSettings {
projectId: string
version?: string
patchnotes?: PatchNotesConfig
options?: WidgetOptions
css?: CSSCustomization
}
export interface JSONConfig {
version: string
patchnotes: PatchNotesConfig
}
export interface OpenPatchConfig {
jsonUrl?: string
}WindowSettings est ce que l'utilisateur pose sur window.Settings en mode standalone. JSONConfig est le format du fichier JSON distant — plus léger, sans les options ni le CSS.
Windowdeclare global {
interface Window {
Settings?: WindowSettings
OpenPatchConfig?: OpenPatchConfig
OpenPatch?: {
show: () => void
hide: () => void
reset: () => void
}
}
}
export {}Sans cette déclaration, TypeScript se plaint à chaque accès à window.Settings ou window.OpenPatch. Le export {} transforme le fichier en module — nécessaire pour que declare global fonctionne dans un fichier .ts.