Créer et publier une librairie Vue 3 — composant de patch notes avec mode Vue, composable, mode standalone CDN, personnalisation CSS et publication npm.
Le cœur de la valeur d'OpenPatch : afficher la modal une seule fois par version, automatiquement. Pas de backend, pas de cookies — juste localStorage.
const STORAGE_KEY_PREFIX = 'openpatch_last_seen_'
const getStorageKey = () => `${STORAGE_KEY_PREFIX}${props.projectId}`
const getLastSeenVersion = (): string | null => {
try {
return localStorage.getItem(getStorageKey())
} catch {
return null // SSR, contexte sécurisé sans storage, etc.
}
}
const saveLastSeenVersion = () => {
try {
localStorage.setItem(getStorageKey(), props.version)
} catch (error) {
console.error('[OpenPatch] Erreur sauvegarde localStorage:', error)
}
}Le try/catch n'est pas optionnel. localStorage peut lancer une exception dans les contextes où le storage est bloqué (mode privé strict sur certains navigateurs, iframes cross-origin, SSR).
const shouldShowPatchNotes = (): boolean => {
if (props.forceShow) return true // toujours afficher (debug)
const lastSeen = getLastSeenVersion()
if (!lastSeen) return true // première visite
return lastSeen !== props.version // nouvelle version détectée
}Trois cas :
forceShow: true → affichage systématique (utile pour tester le rendu)onMounted(() => {
if (!props.manual && shouldShowPatchNotes()) {
isVisible.value = true
emit('shown')
}
})manual: false (défaut) → vérification automatique au montage. manual: true → l'utilisateur appelle show() lui-même depuis le parent.
watch(() => props.version, (newVersion, oldVersion) => {
if (!props.manual && newVersion !== oldVersion && shouldShowPatchNotes()) {
isVisible.value = true
emit('shown')
}
})Si la prop version change pendant la durée de vie du composant (hot reload en dev, ou SPA qui met à jour la config), la modal se réaffiche automatiquement.
const handleClose = () => {
isVisible.value = false
saveLastSeenVersion() // on sauvegarde APRÈS que l'utilisateur a fermé
emit('close')
}La version n'est sauvegardée qu'à la fermeture — pas à l'ouverture. Si l'utilisateur quitte la page sans fermer la modal, elle se réaffichera à la prochaine visite. C'est le comportement attendu.
Le préfixe openpatch_last_seen_ + projectId permet d'utiliser plusieurs instances sur le même domaine :
// App principale
<OpenPatch project-id="my-app" version="2.0.0" />
// → stocke dans "openpatch_last_seen_my-app"
// Admin panel
<OpenPatch project-id="admin-panel" version="1.3.0" />
// → stocke dans "openpatch_last_seen_admin-panel"Deux projets, deux clés, zéro collision.