Svelte + Symfony, ma cure d’amincissement

Ca 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 vueJs, ici pas question de manipuler le DOM, c’est Svelte qui s’en occupe !

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

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

symfony new svelte

A l’heure où j’écris ces lignes pas encore de Symfony 6, on sera donc en 5.3, on va installer tout ce que l’on a besoin pour faire du front :

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

On va créer notre controller qui va affichera du svelte :

bin/console make:controller

On va maintenant installer tout ce qu’il nous faut pour Svelte, et pour Webpack on a besoin de svelte-loader :

yarn install
yarn add svelte-loader svelte

On commence à être pas mal et on devrait bientôt pouvoir s’amuser, encore un peu de configuration, le plus important, le fichier webpack.config.js, on va tout d’abord supprimer tout ce qui concerne Stimulus :

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

On en profite aussi pour vider le répertoire assets, nous allons tout recreer.

Toujours dans le fichier webpack.config.js, on va ajouter notre loader, donc par exemple après la ligne setPublicPath :

    .addLoader({
            test: /\.svelte$/,
            loader: 'svelte-loader',
        },
        {
            // required to prevent errors from Svelte on Webpack 5+, omit on Webpack 4
            test: /node_modules\/svelte\/.*\.mjs$/,
            resolve: {
                fullySpecified: false
            }
        }
    )

Et en fin de fichier, remplacer la ligne :

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;

Voilà pour la partie installation/configuration, on va passer aux choses sérieuses et s’amuser un peu !

Dans le fichier template twig (default/index.html.twig), on va ajouter ces lignes, elles vont permettre d’afficher notre application (CSS + JS) :

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

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

C’est encore trop tôt pour aller voir ce que ça donne (vous aurez un message d’erreur), nous allons maintenant enfin coder du Javascript ! Et créer de suite le point d’entrée de notre application, le fichier assets/app.js et y ajouter ces quelques lignes :

import App from './App.svelte';

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

Et nous allons créer le composant dans le fichier assets/App.svelte (il peut aussi contenir le css de votre composant) :

<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>

Remarquer au passage pour faire du reactif, il suffit de mettre un $, génie !

Pour que tout fonctionne on va compiler tout ce petit monde :

yarn dev

and F5 !!! C’est pas beautiful ??!!

Enjoy !