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.

Pars du bootstrap courant et conserve son index.html et style.css. Remplace les trois fichiers ci-dessous, fusionne cet extrait dans infos.json, puis compile les préférences via le DEV HUB (transpile ou watch).

infos.json (extrait à fusionner)

{
    "app-index": "index.html",
    "textset": "textset.js",
    "scopes": []
}

La clé textset permet au SDK de charger les traductions avant AppliLoaded. Aucun scope supplémentaire n'est requis pour cet affichage et la lecture des préférences.

preferences.config.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' }, default: '#9146FF' },
                title: { type: 'string', label: { en: 'Title', fr: 'Titre' } },
            },
        },
    },
};

textset.js

const textset = {
    fallbackTitle: { fr: 'Bienvenue !', en: 'Welcome!' },
    poweredBy: { fr: args => `Propulsé par ${args.app}`, en: args => `Powered by ${args.app}` },
};

script.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();
    const panel = document.createElement('div');
    panel.style.color = '#9146FF';
    panel.style.color = color; // une couleur CSS invalide garde le repli
    const heading = document.createElement('h1');
    heading.textContent = title;
    const credit = document.createElement('small');
    credit.textContent = text('poweredBy', { app: 'Kappapps' });
    panel.append(heading, credit);
    document.body.replaceChildren(panel);

    await wait(6000);
    await kapp.finish();
})();

Pourquoi

• kapp.preferences.get(path) lit la config streamer ; prévois un défaut (?? / ||) car un chemin inconnu renvoie undefined.
• text(key, args) résout dans la langue du channel ; une valeur de textset peut être une fonction args => string.
• preferences.config.js est compilé en config/preferences.config.json par le HUB (transpile).