Appearance
Pièges spécifiques aux applis
Pièges transverses (V1→V2, async, noms de services, arguments chat) : voir
common/PITFALLS.md. Ci-dessous, ce qui est propre au runtime appli.
Cycle de vie
kapp.finish()est explicite. Une appli ne se termine pas quandscript.jsfinit de s'exécuter (contrairement au widget). Si tu oubliesfinish(), l'appli reste ouverte et les rewards accumulées ne sont jamais envoyées (sendRewards()est appelé parfinish()).- Pas de
window.executeAppFunction: ton code tourne dansscript.jsaprès l'eventAppliLoaded(généralement une IIFE(async () => { ... })()). kapp.display()affiche la fenêtre ; pour une applibacktasksans UI, tu n'en as pas besoin.- Nettoyage avant sortie :
kapp.onBeforeFinish(fn)/kapp.onBeforeAbort(fn)/kapp.onBeforeExit(status, fn)(handlers sync ou async, tous attendus).
Stockage : ne pas confondre les trois
kapp.preferences= config du streamer (définie viapreferences.config.js, éditée dans le dashboard). Lecture viaget(path)/ globalprefs.prefsn'est pas réactif : relis après unset.kapp.dataStorage= état global de l'appli (un seul jeu de données par app+channel).set(data)écrase tout (pas de merge auto) → relis avecget()et fusionne toi-même.kapp.userDataStorage/user.getAppData()/user.setAppData()= état par viewer. Lève une erreur (AppMethodError) hors contexte appli.kapp.logsStorage= historique empilé (append-only viaadd()), pour scores/événements ; pas pour de l'état mutable.- Pas de données importantes dans
localStorage,sessionStorageou IndexedDB. L'origine du document peut être Kappapps, localhost ou le CDN selon le contexte et évoluer entre deux versions ; les plugins et prefs panels sont en plus sandboxés. Ces stockages navigateur peuvent donc être absents ou sembler remis à zéro. Persiste l'état métier aveckapp.dataStorage/kapp.userDataStorage, et la configuration aveckapp.preferences.
Préférences
preferences.config.jsest compilé enconfig/preferences.config.jsonpar le HUB (transpile). N'édite pas le.jsonà la main, il sera écrasé.- Les chemins de
get()suivent l'arbre des groupes :kapp.preferences.get('global.example.exempleItemTypeString'). get(path)renvoieundefinedsi le chemin n'existe pas — garde tes valeurs par défaut.- Le
defaultd'un itemmediaFilene peut référencer QUE la bibliothèque publique Kappapps :default: { library: '<slug>' }. Une clémedia(id de fichier channel) en default = CRIT à la validation ; un slug inexistant = CRIT ; un asset dépublié = WARN. La valeur hydratée ({file, volume, position}) se joue telle quelle aveckapp.medias.playMedia(pref).
Rewards
kapp.rewards.winner(user)/loser(user)accumulent localement ; rien n'est envoyé tant quesendRewards()(déclenché parfinish()) n'a pas tourné.- Si un viewer est marqué winner et loser, la dernière valeur écrite gagne.
i18n
text(key, args)(global) =kapp.textset.get(key, args). Une valeur detextset.jspeut être une string ou une fonctionargs => string(voirreference/i18n.md).- Si la clé est absente,
text()renvoie la clé elle-même (pas d'erreur) — vérifie tes clés.
prefs / text existent en appli (l'inverse du widget)
- Contrairement au widget,
prefsettext()sont injectés en appli. Ne copie pas du code widget qui les évite.
Prefs panel custom (window.KappappsPrefs)
- Sandbox opaque (
allow-scriptssansallow-same-origin) : ton origine y est'null'— pas delocalStorage/cookies/accès au parent. Tout passe parwindow.KappappsPrefs(voirreference/prefs-panels.md). - Entrée HTML obligatoire :
prefs-panel-indexetwuOptions.sourcepointent vers un.html/.htm, jamais directement vers un.js. La plateforme ne génère pas de coquille HTML. - CSP durcie
script-src 'self' https://kappapps.app: seul le SDK prefs officiel peut venir de Kappapps ; aucun autre CDN ni<script>inline. Le JS de l'app vit dans un fichier séparé chargé avec un chemin relatif. - Remount à chaque sauvegarde du formulaire de préférences (nouvelle iframe, nouveau
onReady) : ton état JS en mémoire ne survit pas — persiste ce qui compte viaKappappsPrefs.setValue(), jamais dans une variable globale. watch(paths)= préfixe de segment : observer un chemin de groupe couvre déjà tous ses descendants, inutile de lister chaque sous-champ.- Un WU
customPaneln'a aucune valeur propre : ne t'attends pas à lire quoi que ce soit à son propre chemin.
Apps compilées : publie un artifact autonome
- Si l'app utilise un bundler ou un transpileur, configure
cli-config.jsonavec"runtime": { "root": "dist" }: les sources restent dans le workspace et seul le runtime généré est servi et publié. dist/doit fonctionner seul :index.html, JS/CSS compilés, assets et config nécessaires. Aucun fichier publié ne doit dépendre desrc/, denode_modules/ou d'un chemin situé hors dedist/.- Préfère un bundle navigateur autonome quand le découpage en modules ou chunks au runtime n'apporte rien. Ces imports restent supportés, mais ils multiplient les fichiers et requêtes à servir ; conserve-les seulement quand leur chargement différé a un bénéfice réel.
- Ne modifie jamais
dist/à la main. Lance explicitement le build avantprepare_preview, un diff ou unpush: le DEV HUB ne lance pas les commandes npm du projet automatiquement.
Assets image : évite une multitude de fichiers
- Chaque fichier image chargé produit une requête. En production, les fichiers propres à l'app peuvent être servis directement par le CDN ; en local, ils viennent du DEV HUB. Ne dépends donc jamais de l'origine courante ni d'un chemin racine Kappapps pour les retrouver : utilise des chemins relatifs au runtime publié ou les URLs fournies par le SDK.
- Regrouper de nombreuses images reste une bonne pratique web : cela réduit le nombre de requêtes navigateur et de fichiers à charger, même lorsque Bunny sert directement les octets.
- Dès qu'une appli contient beaucoup d'images, utilise Créer un atlas dans l'onglet Assets du DEV HUB ou le tool MCP
create_image_atlaspour réduire les requêtes. Voirreference/image-atlases.md. - Ne valide jamais un plugin en ouvrant seulement son
localhost: sans le shell deprepare_preview, il manque le bridge, les JWT et les sockets, et le test peut être faussement vert. - Un atlas ne réduit pas automatiquement le poids : analyse-le avec la qualité WebP, le resize et le profil adaptés, et traite l'avertissement s'il devient plus lourd.
- Le créateur d'atlas conserve toujours les sources. Après migration du code, supprime-les ou exclue-les du push ; sinon le gain de distribution sera incomplet.