Appearance
Exemple — appli pilotée par préférences + i18n
Intention : afficher un panneau de bienvenue dont la couleur et le message sont configurés par le streamer, dans sa langue.
preferences.config.js
js
module.exports = {
type: 'group',
appearance: { wrap: 'tabs' },
groupItems: {
global: {
type: 'group',
label: { en: 'Global', fr: 'Global' },
groupItems: {
color: { type: 'string', label: { en: 'Color', fr: 'Couleur' } },
title: { type: 'string', label: { en: 'Title', fr: 'Titre' } },
},
},
},
};textset.js
js
const textset = {
fallbackTitle: { fr: 'Bienvenue !', en: 'Welcome!' },
poweredBy: { fr: args => `Propulsé par ${args.app}`, en: args => `Powered by ${args.app}` },
};script.js
js
(async function () {
const color = kapp.preferences.get('global.color') ?? '#9146FF'; // ou prefs.global?.color
const title = kapp.preferences.get('global.title') || text('fallbackTitle');
kapp.display();
document.body.innerHTML = `
<div style="color:${color}">
<h1>${title}</h1>
<small>${text('poweredBy', { app: 'Kappapps' })}</small>
</div>`;
await wait(6000);
await kapp.finish();
})();Pourquoi
kapp.preferences.get(path)lit la config streamer ; prévois un défaut (?? / ||) car un chemin inconnu renvoieundefined.text(key, args)résout dans la langue du channel ; une valeur detextsetpeut être une fonctionargs => string.preferences.config.jsest compilé enconfig/preferences.config.jsonpar le HUB (transpile).