Démarrage rapide avec Svelte et Symfony

Ça faisait pas mal de temps que je voulais me mettre sérieusement à Svelte, encore une librairie Javascript qui a pourtant déjà pas mal d’années, et qui est pas mal utilisée depuis 2019 et la version 3.

Parmi ses qualités : Du code simple, léger, avec la même courbe d’apprentissage que Vue.js. Ici, pas question de manipuler le DOM, c’est Svelte qui s’en occupe !

Et enfin, niveau performance, cette librairie est une des plus rapides du marché.

Créer un projet Symfony#

On commence par créer notre projet Symfony, super facile :

symfony new svelte

À l’heure où j’écris ces lignes, pas encore de Symfony 6. On sera donc en 5.3. Installons tout ce dont nous avons besoin pour le front-end :

composer req twig
composer req symfony/webpack-encore-bundle

Et comme on est de gros fainéants, on va bien sûr utiliser le Maker Bundle :

composer req doctrine/annotations
composer req --dev symfony/maker-bundle

Créez un contrôleur qui affichera du Svelte :

bin/console make:controller

Installer Svelte et Webpack#

Pour installer Svelte et Webpack, ajoutez svelte-loader :

yarn install
yarn add svelte-loader svelte

Dans le fichier webpack.config.js, supprimez tout ce qui concerne Stimulus :

.enableStimulusBridge('./assets/controllers.json')

Ajoutez ensuite le loader pour Svelte :

.addLoader({
    test: /\.svelte$/,
    loader: 'svelte-loader',
}, {
    test: /node_modules\/svelte\/.*\.mjs$/,
    resolve: { fullySpecified: false }
})

Remplacez la ligne suivante :

module.exports = Encore.getWebpackConfig();

Par :

let config = Encore.getWebpackConfig();
config.resolve.mainFields = ['svelte', 'browser', 'module', 'main'];
config.resolve.extensions = ['.mjs', '.js', '.svelte'];

let svelte = config.module.rules.pop();
config.module.rules.unshift(svelte);

module.exports = config;

Ajouter Svelte au projet#

Dans le fichier default/index.html.twig, ajoutez :

{% block stylesheets %}
    {{ encore_entry_link_tags('app') }}
{% endblock %}

{% block javascripts %}
    {{ encore_entry_script_tags('app') }}
{% endblock %}

Créez le fichier assets/app.js :

import App from './App.svelte';

const app = new App({
    target: document.body,
});

Créez le composant assets/App.svelte :

<script>
    let count = 0;
    $: doubled = count * 2;

    function handleClick() {
        count += 1;
    }
</script>

<button on:click={handleClick}>
    Clicked {count} {count === 1 ? 'time' : 'times'}
</button>

<p>{count} doubled is {doubled}</p>

Compilez avec :

yarn dev

Résultat#

F5, et voilà le résultat ! 🎉

Screenshot

Enjoy !