Documentation - Configuration.

Lors de l'initialisation de Marssel, vous pouvez passer un objet de configuration :

import { MarsselBundle } from '@marssel-vb/marssel';
const { Marssel } = MarsselBundle;
const app = new Marssel({
    lazyload: false,
    theme: 'auto',
    themes: {},
    components: {},
    paths: {}
});

lazyload / Type : boolean / Défaut : false

const app = new Marssel({
    lazyload: true
});

theme / Type : string / Défaut : 'auto'

Définit le thème actif au chargement. Les valeurs possibles sont :

• 'light' : Thème clair
• 'dark' : Thème sombre
• 'auto' : Suit les préférences système

// Thème clair
const app = new Marssel({
    theme: 'light'
});

// Thème sombre
const app = new Marssel({
    theme: 'dark'
});

// Automatique (suit les préférences système)
const app = new Marssel({
    theme: 'auto'
});

themes / Type : object / Défaut : {}

Permet de personnaliser les couleurs et variables de vos thèmes. Vous pouvez étendre ou remplacer les thèmes par défaut.

Structure d'un thème : Chaque thème utilise des variables CSS personnalisées : custom properties. :

• Variables de couleurs principales
• Variables de fond et texte
• Variables de bordures et ombres
• Toute variable CSS personnalisée

Fusion intelligente : Les thèmes personnalisés sont fusionnés avec les thèmes par défaut de Marssel. Vous n'avez besoin de définir que les valeurs que vous souhaitez modifier.

const app = new Marssel({
    themes: {
        light: {
            '--theme-primary': '#0B63F3',
            '--theme-secondary': '#8b5cf6',
            '--theme-bg': '#ffffff',
            '--theme-text': '#1f2937'
        },
        dark: {
            '--theme-primary': '#60a5fa',
            '--theme-secondary': '#a78bfa',
            '--theme-bg': '#1f2937',
            '--theme-text': '#f9fafb'
        }
    }
});

components / Type : object / Défaut : {}

Permet de définir des styles personnalisés pour des composants réutilisables en utilisant la syntaxe Marssel.

const app = new Marssel({
    components: {
        'btn-primary': 'bg-[blue] c-[white] p-[3rem] rounded-[20px] bg-[red]:hover'
    }
});

Fonctionnalités

• Utilisation de la syntaxe Marssel
• Support des pseudo-classes (:hover, :focus, etc.)
• Classes réutilisables dans tout le projet
• Format tableau ou chaîne de caractères

const app = new Marssel({
    components: {
        'btn-1': [
            'bg-[theme-mirage]!',
            'rounded-[100px]!',
            'c-[white]!',
            'px-[24px]!',
            'py-[12px]!',
            'fw-[600]'
        ],
        'btn-1:hover': [
            'bg-[theme-peach]!',
            'c-[theme-mirage]!'
        ]
    }
});

paths / Type : object / Défaut : {}

Permet de personnaliser les chemins des fichiers manifest pour les fonts et les icons. Utile si votre structure de projet diffère de la configuration par défaut.

const app = new Marssel({
    paths: {
        fontsManifest: '/js/fonts-manifest.json',   // Chemin par défaut
        iconsManifest: '/js/icons-manifest.json'    // Chemin par défaut
    }
});

Exemple avec des chemins personnalisés :

const app = new Marssel({
    paths: {
        fontsManifest: '/assets/manifests/fonts.json',
        iconsManifest: '/assets/manifests/icons.json'
    }
});

Propriétés disponibles :

• fontsManifest : Chemin du fichier manifest des fonts (défaut : /js/fonts-manifest.json)
• iconsManifest : Chemin du fichier manifest des icons (défaut : /js/icons-manifest.json)

💡 Astuce : Lorsque vous générez les manifests avec les commandes CLI, assurez-vous d'utiliser les mêmes chemins que ceux configurés dans l'option paths.

Type : Automatique / Aucune configuration requise

Marssel implémente un système de cache intelligent qui accélère considérablement les chargements de pages suivants. Le cache fonctionne automatiquement, sans configuration.

Fichier de configuration séparé (Recommandé)

Pour une meilleure organisation, créez des fichiers de configuration dédiés :

/**
* marssel.config.js
* Fichier de configuration des composants Marssel
* Centralise tous les styles de composants réutilisables
*/
export const componentStyles = {
    'btn-1': [
        'bg-[theme-mirage]!',
        'rounded-[100px]!',
        'c-[white]!',
        'px-[24px]!',
        'py-[12px]!',
        'd-[inline-block]',
        'fw-[600]',
        'text-decoration-[none]'
    ],
    'btn-1:hover': [
        'bg-[theme-peach]!',
        'c-[theme-mirage]!'
    ]
};

export const customThemes = {
    light: {
        '--theme-primary': '#0B63F3',
        '--theme-secondary': '#8b5cf6'
    },
    dark: {
        '--theme-primary': '#60a5fa',
        '--theme-secondary': '#a78bfa'
    }
};

export const customPaths = {
    fontsManifest: '/assets/fonts-manifest.json',
    iconsManifest: '/assets/icons-manifest.json'
};

Puis importez dans votre fichier principal :

import { MarsselBundle } from '@marssel-vb/marssel';
const { Marssel } = MarsselBundle;
import { componentStyles, customThemes, customPaths } from './marssel.config.js';

const app = new Marssel({
    lazyload: true,
    theme: 'auto',
    themes: customThemes,
    components: componentStyles,
    paths: customPaths
});