Kryzo Konfiguration

Kryzo muss nicht als vollständiger Core geladen oder initialisiert werden. Stattdessen kann die Architektur modular aufgebaut werden, sodass nur die tatsächlich benötigten Core-Klassen aktiv eingebunden werden. Die Auswahl der Module erfolgt dabei vollständig über die Konfiguration. Sowohl die zu ladenden Klassen als auch deren Einbindungspfade sind frei definierbar. Dadurch lässt sich der Core gezielt an den jeweiligen Anwendungsfall anpassen, ohne unnötige Funktionen oder Abhängigkeiten mitzuladen. Dieses Konzept ermöglicht eine schlanke, performante und erweiterbare Struktur, bei der der Umfang des Systems jederzeit kontrolliert und angepasst werden kann.

Importpfad definieren

/*
    Wie in der Installation beschrieben, erfolgt die Einbindung via ImportMap.    
    Wenn der Speicherort von Kryzo anders benötigt wird, kann dieser angepasst werden
*/
Object.assign(document.head.appendChild(document.createElement('script')), {
    type: 'importmap',
    innerHTML: JSON.stringify({
        imports: {
            'kryzo/':   './assets/build/modules/',      /* An den Speicherort von Kryzo anpassen */
            'webroot/': './',                           /* NICHT VERÄNDERN! Dies ist für Custom Core Module */
        }
    })
});

Core Module definieren

Je nach Version kann sich der Satz der verfügbaren Core-Module unterscheiden. Nicht benötigte Module können einfach aus der Konfiguration entfernt werden, ohne dass Anpassungen im restlichen System erforderlich sind. Der Loader erkennt die konfigurierten Module dynamisch zur Laufzeit und lädt ausschließlich die vorhandenen Komponenten. Fehlende oder nicht verfügbare Module führen dabei nicht zu einem Systemabbruch, sondern werden sauber ignoriert, wodurch ein stabiler Betrieb der Webanwendung gewährleistet bleibt.

/*
    Datei: assets/build/kryzo.config.js    
*/
export function config() {
    return {
        core_modules: {
            COOKIE:   { class: 'CookieSetter',        path: 'system/cookie-setter.js',       options: {} },
            CSS:      { class: 'AdoptedStylesheets',  path: 'system/adopted-stylesheets.js', options: {}, inject: { cook: 'COOKIE' } },
            DEVICE:   { class: 'DeviceHandler',       path: 'system/device-handler.js',      options: {} },
            DEBUG:    { class: 'DebugHandler',        path: 'system/debug-handler.js',       options: {} , inject: { CSS: 'CSS', DEVICE: 'DEVICE' } },
            ROUTER:   { class: 'RouterHandler',       path: 'system/router-handler.js',      options: {} },
            DATA:     { class: 'ElementDataSetter',   path: 'system/data-set-hidden.js',     options: {} },            
            STORE:    { class: 'StoreHandler',        path: 'system/store.js',               options: {} },
            STORE_DB: { class: 'StoreHandler',        path: 'system/store.js',               options: {} },            
            EVENT:    { class: 'EventHandler',        path: 'system/event-handler.js',       options: {} },
            CONSENT:  { class: 'ConsentHandler',      path: 'system/consent-banner.js',      options: {}, inject: { CSS: 'CSS', STORE_DB: 'STORE_DB' } },
            MEDIA:    { class: 'MediaHandler',        path: 'system/media-handler.js',       options: {} },
            FETCH:    { class: 'FetchHandler',        path: 'system/fetch-handler.js',       options: {} },
            VISUAL:   { class: 'VisualHandler',       path: 'system/visual-components.js',   options: {}, inject: { CSS: 'CSS', STORE_DB: 'STORE_DB', DATA: 'DATA', EVENT: 'EVENT' }  },
            UTILS:    { class: 'UtilsHandler',        path: 'system/utils-handler.js',       options: {} },
            NOTIFY:   { class: 'NotifyHandler',       path: 'system/notify-handler.js',      options: {}, inject: { CSS: 'CSS' } },
            ANIM:     { class: 'AnimationHandler',    path: 'system/animation-handler.js',   options: {}, inject: { CSS: 'CSS' } },
            ...
        },
        custom_modules: {
            ...
        }
    };
}