Page de recherche dans les notes du jardin numérique de Stéphane Klein

Je viens de créer : Projet 31 - "Réaliser un POC d'une integration ProConnect dans un projet SvelteKit".

Je viens de terminer un POC nommé poc-sveltekit-web-notification , qui m'a permis d'apprendre à implémenter la fonctionnalité Push API dans une PWA.

Quelques ressources qui m'ont été utiles :

Push API
Web Workers API
Using VAPID with WebPush
Cet exemple de MDN Web Docs : push-subscription-management.
Je n'ai aucune idée de pourquoi ce repository est archivé et par quoi il a été remplacé.
J'ai lu en partie Voluntary Application Server Identification (VAPID) for Web Push - RFC 8292
SvelteKit - Service workers

Ma prochaine étape : intégrer cette fonctionnalité dans gibbon-replay.

J'ai bien fait de partager poc-sveltekit-custom-server dans la section discussion GitHb de Sveltekit car cela m'a permis de découvrir via ce commentaire l'existence de la fonctionnalité native SvelteKit nommée Shared hooks init.

This function runs once, when the server is created or the app starts in the browser, and is a useful place to do asynchronous work such as initializing a database connection.

source

Cette fonctionnalité a été introduite dans la version 2.10.0 de SvelteKit publiée le 10 décembre 2024.

C'est particulièrement frustrant car j'ai cherché cette fonctionnalité à plusieurs reprises entre mi-2022 et mi-2024, sans la trouver. Je me souviens même avoir lu une issue de Rich Harris expliquant que cette fonctionnalité était complexe à implémenter.

Il y a quelques semaines, lors du développement de poc-sveltekit-custom-server, j'ai refait une recherche de fonctionnalité "init", mais en me limitant à la documentation "Node servers". La présence de "Graceful shutdown" m'a paradoxalement induit en erreur : j'en ai déduit que s'il n'y avait pas d'équivalent pour l'initialisation sur cette page, c'est que la fonctionnalité n'existait toujours pas 😔.

Conséquence de tout cela :

Je vais utiliser Shared hooks init dans gibbon-replay ;
J'ai indiqué dans poc-sveltekit-custom-server que je recommande d'utiliser "Shared hooks init"

Dans ma note Bilan de poc-sveltekit-custom-server je finis par ceci :

La suite...

Je souhaite rédiger cette note en anglais et la publier sur https://github.com/sveltejs/kit/discussions et https://old.reddit.com/r/sveltejs/ afin :

d'avoir des retours d'expérience

de découvrir des méthodes alternatives

et partager la méthode que j'ai utilisée, qui sera peut-être utile à d'autres développeurs Svelte 🙂

source

Voici ce que je viens de publier :

2025-05-29 : voir J'ai découvert la fonctionnalité SvelteKit Shared hooks init

Contexte et objectifs

Dans le projet gibbon-replay, j'ai besoin d'exécuter une tâche une fois par jour pour supprimer des anciennes sessions.

gibbon-replay utilise une base de données SQLite qui ne dispose pas nativement de fonctionnalité de type Time To Live, comme on peut trouver dans Clickhouse.
SQLite ne propose pas non plus d'équivalent à pg_cron — ce qui est tout à fait normal étant donnée que SQLite est une librairie et non pas un service à part entière.

Le projet gibbon-replay est un monolith (j'aime les monoliths !) et je souhaite conserver ce choix.

Face à ces contraintes, une solution consiste à intégrer une solution comme Cron for Node.js directement dans l'application gibbon-replay.
Je pense que je dois implémenter cela dans un SvelteKit Custom Server, ce qui me permettrait d'exécuter cette tâche de purge à intervalles réguliers tout en conservant l'architecture monolithique.

Il y a quelques jours, j'ai décidé de tester cette idée dans un POC nommé : poc-sveltekit-custom-server.

J'ai aussi décidé d'expérimenter un objectif supplémentaire dans ce POC : lancer la migration du modèle de données dès le lancement du monolith et non plus lors de la première requête HTTP reçue par le service.

Enfin, je souhaitais ne pas dégrader l'expérience développeur (DX), c'est à dire, je souhaitais pouvoir continuer à simplement utiliser :

$ pnpm run dev

ou

$ pnpm run build
$ pnpm run preview

sans différence avec un projet SvelteKit "vanilla".

Résultats du POC et enseignements

Tout d'abord, le POC fonctionne parfaitement 🙂, sans dégrader l'expérience développeur (DX), qui ressemble à ceci :

$ mise install
$ pnpm install
$ pnpm run load-seed-data
Start data model migration…
Data model migration completed
Start load seed data...
seed data loaded

Lancement du projet en mode développement :

$ pnpm run dev
Start data model migration…
Data model migration completed
Server started on http://localhost:5173 in development mode

Lancement du projet "buildé" :

$ pnpm run build
$ pnpm run preview
Start data model migration…
Data model migration completed
Server started on http://localhost:3000 in production mode

Les migrations et les données "seed.sql" se trouvent dans le dossier /sqls/.

Le SvelteKit Custom Server est implémenté dans le fichier src/server.js et il ressemble à ceci :

import express from 'express';
import cron from 'node-cron';
import db, { migrate } from '@lib/server/db.js';

const isDev = process.env.ENV !== 'production';

migrate(); // Lancement de la migration du modèle de donnée dès de lancement du serveur

// Configuration d'une tâche exécuté toutes les heures
cron.schedule(
    '0 * * * *',
    async () => {
        console.log('Start task...');
        console.log(db().query('SELECT * FROM posts'));
        console.log('Task executed');
    }
);

async function createServer() {
    const app = express();

    ...

Personnellement, je trouve cela simple et minimaliste.

Point de difficulté

SvelteKit utilise des "module alias", comme par exemple $lib.
Problème, par défaut, ces "module alias" ne sont pas configurés lors de l'exécution de node src/server.js.

Pour me permettre d'importer dans src/server.js des modules de src/lib/server/* comme :

import db, { migrate } from '@lib/server/db.js';

j'ai utilisé la librairie esm-module-alias.

Ceci complexifie un peu le projet, j'ai dû configurer ceci dans /package.json :

{
    "scripts": {
        "dev": "ENV=development node --loader esm-module-alias/loader --no-warnings src/server.js",
        "preview": "ENV=production node --loader esm-module-alias/loader --no-warnings build/server.js",
        
    ...

	"aliases": {
        "@lib": "src/lib/"
    }
}

ajout de --loader esm-module-alias/loader --no-warnings
et la section aliases

Et dans /vite.config.js :

export default defineConfig({
    plugins: [sveltekit()],
    resolve: {
        alias: {
          '@lib': path.resolve('./src/lib')
        }
    }
});

ajout de alias

Le fichier src/server.js contient du code spécifique en fonction de son contexte d'exécution ("dev" ou "buildé") :

    if (isDev) {
        const { createServer: createViteServer } = await import('vite');

        const vite = await createViteServer({
            server: { middlewareMode: true },
            appType: 'custom'
        });

        app.use(vite.middlewares);
    } else {
        const { handler } = await import('./handler.js');
        app.use(handler);
    }

En mode "dev" il utilise Vite et en "buildé" il utilise le fichier build/handler.js généré par SvelteKit build en mode SSR.

Le fichier src/server.js est copié vers le dossier /build/ lors de l'exécution de pnpm run build.

J'ai testé le bon fonctionnement du POC dans un container Docker.

J'ai intégré au projet un deployment-playground : https://github.com/stephane-klein/poc-sveltekit-custom-server/tree/main/deployment-playground.

La suite...

Je souhaite rédiger cette note en anglais et la publier sur https://github.com/sveltejs/kit/discussions et https://old.reddit.com/r/sveltejs/ afin :

d'avoir des retours d'expérience
de découvrir des méthodes alternatives
et partager la méthode que j'ai utilisée, qui sera peut-être utile à d'autres développeurs Svelte 🙂

Update du 2025-05-29 à 00:07 - Je viens de publier ceci :

2025-05-29 : voir J'ai découvert la fonctionnalité SvelteKit Shared hooks init

#JaiDécouvert ici la fonctionnalité "Incremental Static Regeneration (ISR)" de NextJS.

L'Incremental Static Regeneration (ISR) est un mélange de génération static et de régénération dynamique.

Lors du build du site toutes les pages sont générées de manière statique. Cependant, certaines peuvent être "marquées" : ces pages clairement identifiées seront régénérées à intervalle régulier après le déploiement du site, faisant appel à des API ou une base de données pour garder la donnée à jour.

Lors de la visite d'une page à régénérer, une version "ancienne" de la page s'affiche, mais une demande de régénération est envoyée au serveur. La page est ainsi régénérée et renvoyée instantanément au visiteur, et prête à être affichée au visiteur suivant. Le cycle peut alors recommencer.

source

J'ai aussi lu cette page de documentation de Vercel :

Incremental Static Regeneration (ISR) allows you to create or update content on your site without redeploying. ISR's main benefits for developers include:

Better Performance: Static pages can be consistently fast because ISR allows Vercel to cache generated pages in every region on our global Edge Network and persist files into durable storage

Reduced Backend Load: ISR helps reduce backend load by using cached content to make fewer requests to your data sources

Faster Builds: Pages can be generated when requested by a visitor or through an API instead of during the build, speeding up build times as your application grows

ISR is available to applications built with:

Next.js

SvelteKit

Nuxt

Astro

Gatsby

Or any custom framework solution that implements the Build Output API

source

J'ai étudié le support ISR de SvelteKit. Il semble que cette fonctionnalité soit supportée uniquement par l'adapter-vercel.
J'ai identifié l'issue suivante : Would revalidating a static page work when self-hosted?.

#JaimeraisUnJour prendre le temps de creuser plus en profondeur ce sujet.

#JaiDécouvert Introducing the new Svelte CLI.

We’ve just released sv, a new Command Line Interface (CLI) for creating, enhancing, and upgrading Svelte projects.

...

This package merges the previous create-svelte and community-led svelte-add tools into a single package.

En étudiant l'annonce Développeur(se) back-end en CDI de Brief.me j'ai été intrigué par :

Migrer notre front-end existant de Nuxt.js vers HTMX.

Je me suis demandé quelle est la motivation de passer d'un framework de type Nuxt.js, NextJS ou SvelteKit à htmx 🤔.

J'utilise SvelteKit depuis deux ans, qui est comparable Nuxt.js, principalement en mode SSR avec Hydration, et je suis totalement satisfait. Ma Developer eXperience est excellente. Je trouve ce framework minimaliste, conforme au principe Keep it simple, stupid! (KISS), et performant.

Après réflexion, j'ai réalisé que mon expérience de développeur (DX) serait moindre si j'héritais d'un backend codé dans un langage autre que Javascript : Python, PHP, Ruby, Golang…

Et Brief.me semble être dans ce cas de figure :

Back-end : Django, PostgreSQL, RabbitMQ, Celery

Front-end : HTMX

Tests : pytest

Infra : Platform.sh

Je me suis connecté à mon compte Brief.me et en regardant ce que me retourne Wappalyzer, je constate que le site est effectivement propulsé par Nuxt.js, VueJS.

En regardant ce qu'il se passe dans l'onglet Réseau de mon navigateur, je constate que https://app.brief.me est un site web de type SPA. Le contenu des articles est chargé via l'api https://www.brief.me/api/ qui est propulsée par Django REST framework.

Si je résume, la stack est la suivante : PostgreSQL => Django => Django REST framework <=> Nuxt.js => Rendu HTML via VueJS.

Je suppose que ce qui motive la migration de Nuxt.js vers HTMX est la suppression de couches.
Plus précisément, je suppose que l'équipe tech de Brief.me souhaite supprimer les couches suivantes :

Et utiliser simplement le système de template de Django en SSR pour afficher le contenu des articles et implémenter les quelques éléments dynamiques côté browser avec HTMX.
De mon point de vue, ceci a pour avantage de largement simplifier la stack, de simplifier le déploiement et d'accélérer le chargement des pages.

Ma conclusion : la librairie HTMX semble être un choix très pertinent quand elle est utilisée dans une stack non NodeJS.

Je suis triste de constater que SvelteKit ne propose toujours pas de hooks pour lancer une fonction au démarrage du serveur 😔, voir l'issue Expose a way to inject a start script into adapter-node.

J'ai envie d'essayer de créer un "mini" service de session recording, basé sur rrweb, SvelteKit et KeyDB ou DragonflyDB.
Je pense que ce projet pourrait être minimaliste 🤔.

-- from

J'ai publié https://github.com/stephane-klein/gibbon-replay (gibbon-replay).

J'ai passé 2h sur ce projet.

J'ai fait quelques recherches pour identifier quelle est la "meilleure" méthode pour implémenter un "Theme Switcher" pour un projet SvelteKit SSR.

J'ai trouvé cet article pertinent : How to implement a cookie-based dark mode toggle in SvelteKit.

En particulier, cette partie :

One might save the preference in the browser's local storage. With every page visit, we check with it if a theme is saved. This works well, but it will cause the website to flash because it takes some time to download and execute the JavaScript.

et un peu plus loin dans l'article :

After publishing this post, I was made aware that we can make the localStorage solution work also without flashing. Then we do not need any server-side logic and can also work with prerendered pages (such as a blog). In fact, the initial theme can be retrieved (via a media query or a localStorage value if it exists) in a script tag which is directly put into the body element of the app.html.

Voici une mise en pratique dans cet exemple : https://github.com/ScriptRaccoon/sveltekit-darkmode-toggler-localstorage/.

J'ai utilisé cette technique pour https://sklein.xyz.

Je viens de vérifier, il n'est toujours pas possible d'utiliser des slot nommés dans les layout SvelteKit : Treat layout pages like components when using named slots.

Je souhaite setup Tailwind CSS dans un projet SvelteKit avec svelte-add.

https://svelte-add.com/adder/tailwindcss

Mais ne comprends pas pourquoi, svelte-add semble ne plus fonctionner comme avant, il ne modifie pas mon projet SvelteKit existant, mais il souhaite l'écraser 🤔.

$ pnpx svelte-add@latest tailwindcss
svelte-add version 2.7.3

┌  Welcome to Svelte Add!
│
◇  Create new Project?
│  No
│
└  Exiting.

En attendant de comprendre pourquoi, je vais setup Tailwind CSS manuellement en suivante cette documentation https://tailwindcss.com/docs/guides/sveltekit.

Depuis que j'utilise @tabler/icons-svelte pour intégrer des tabler-icons sur un projet SvelteKit SSR, je rencontre d'énormes problèmes de performance en mode développement (pnpm run dev).

Pour traiter le problème, j'ai essayé ce hack indiqué dans l'issue Slow experience in SvelteKit, mais cela ne fonctionne pas.

Toujours dans cette issue, #JaiDécouvert Iconify.

Je pense me souvenir d'avoir commencé à utiliser tabler-icons comme alternative Open source à Font Awesome.

J'ai lu la page page raconte l'histoire du projet et j'apprends que le projet s'est réellement lancé en 2020.

Iconify est devenu un projet Open source en 2021 :

In mid 2022 plans changed, thanks to people showing interest in sponsoring open source development.

The new plan is to:

Open source everything, encourage developers to create their own open source solutions that use Iconify.

Rely on sponsors to finance development.

-- from

Mais, d'après la page contributors le projet semble toujours très majoritairement développé par Vjacheslav Trushkin.

Je lis aussi :

Unlike fonts, it downloaded data only for icons used on page, rendered pixel perfect SVG. (from)

Par contre, je pense comprendre qu'Iconify n'est pas un projet de création d'icônes, mais un framework qui regroupe énormément d'icônes.

Par exemple, j'ai constaté qu'Iconify intègre entre autres :

Iconify propose des composants icônes pour Svelte : Iconify for Svelte.
Mais, je lis :

Loads icons on demand. No need to bundle icons, component will automatically load icon data for icons that you use from Iconify API. -- from

Cette technique « Loads icons on demand » ne me plait pas. Je souhaite réduire au maximum les latences dans mes applications web.

J'ai continué mes recherches.

#JaiLu Icon library for svelte? : sveltejs

#JaiDécouvert unplugin-icons (from).
unplugin-icons est un projet qui a commencé en 2021 et qui est basé sur Iconify.

Je constate que unplugin-icons propose une configuration SvelteKit.

J'ai testé et cela semble très bien fonctionner 🙂.

Le site https://icones.js.org permet de facilement copier-coller le code Javascript pour intégrer une icône. Par exemple, un click sur "Unplugin Icons" :

permet de copier :

import TablerChevronDown from '~icons/tabler/chevron-down'

Je ne constate aucun problème de lenteur au mode développement (pnpm run dev) et aucun chargement réseau externe des icônes dans la version de production.

#JaiDécidé d'adopter cette librairie pour gérer les icons de mes projets SvelteKit.

#JaiLu What's new in Svelte: July 2024

#JaiDécouvert https://github.com/ssc-project/ssc

#JaiLu What's new in Svelte: June 2024

Tons of work on the migrate tool to make migrating to Svelte 5 syntax easier

J'ai hâte de tester pour constater les changements dans le code et aussi constater si cela cette outil fonctionne correctement ou non 🤔.

#JaiDécouvert floating-ui-svelte

Je viens de finir Projet 6 - "SvelteFlow playground", voici un screencast de démonstration du résultat :

J'ai passé 5h27 sur ce projet.

Code source de ce projet https://github.com/stephane-klein/svelteflow-playground

Ma plus grosse difficulté a été de trouver comment implémenter les containtes liaison.

Pour le moment, je doute que mon implémentation respecte les bonnes pratiques d'utilisation de la librairie. Je pense que je vais découvrir le "bon" usage — tel que imaginé par Moritz Klack — de la librarie au fur et à mesure de mon utilisation.

Nouvelle #iteration sur Projet 6 - "SvelteFlow playground".

17:00 : J'ai réussi à ajouter un CustomNode (commit).

23:00 : Dans ce commit, j'ai réussi à définir des contraintes de liaisons. Il n'est plus possible de lier deux nodes du même type.

Nouvelle #iteration sur Projet 6 - "SvelteFlow playground".

Je me suis inspiré de l'exemple Drag and Drop pour implémenter ce commit, ce qui donne ceci :

11:19 : Prochaine étape, lire et comprendre Theming – Svelte Flow.

11:32 :

J'ai trouvé ce projet https://github.com/theonlytechnohead/patchcanvas/ qui peut me servir de source d'inspiration.
#JeMeDemande si je dois implémenter un composant de type <Handle /> pour définir des contraintes de liaisons entre les nodes 🤔.

12:29 :

#JeLis https://github.com/theonlytechnohead/patchcanvas/blob/main/src/components/handles/PortHandle.svelte

Finalement, contraiment à ce que j'avais décidé ici, je n'ai pas utilisé Convict dans mon application Value Props propulsé par SvelteKit.

J'ai "simplement" utilisé la vite-plugin-environment pour définir la valeur par défaut des variables d'environnement de configuration utilisées par l'application.

Exemple :

// vite.config.js
import { defineConfig } from "vite";
import EnvironmentPlugin from 'vite-plugin-environment'
import { sveltekit } from "@sveltejs/kit/vite";

export default defineConfig({
    plugins: [
        EnvironmentPlugin({
            POSTGRES_URL: "postgres://webapp:password@localhost:5432/myapp",
            Y_WEBSOCKET_URL: "ws://localhost:1234",
            SMTP_HOST: "127.0.0.1",
            SMTP_POST: 1025,
            SECRET: "secret"
        }),
        sveltekit()
    ]
});;

Et voici un exemple d'utilisation de ces paramètres de configuration :

// src/lib/server/db.js
import postgres from "postgres";

const sql = postgres(process.env.POSTGRES_URL);

export default sql;

Rien de plus, je n'ai ni utilisé Convict ni dotenv, j'ai pu suivre le principe KISS.

La partie que je préfère de plus dans le framework SvelteKit ce sont les fonctionnalités décrient dans la section Routing et Advanced routing de la documentation de SvelteKit.

Si vous survolez ces pages de documentation, vous allez peut-être me poser la question « ok et alors, c'est quoi le truc cool ? ». Je ne vais pas vous répondre maintenant, parce que c'est intégralité de ces deux pages de documentations qui faut lire avec une très grande attention. En utilisant SvelteKit dans plusieurs projets, j'ai appris à découvrir toutes les petites subtilités du système de rooting de SvelteKit.

#JaimeraisUnJour prendre le temps de paraphraser avec mes mots cette documentation pour partager avec vous l'enthousiasme que j'ai à l'égard de SvelteKit.

Est-ce que Nuxt ou NextJS sont moins élégants que SvelteKit ? Pour le moment, je ne sais pas, je n'ai pas pris assez de temps pour pousser assez loin la comparaison. C'est l'objectif de Projet - 2 "Réaliser un petit projet basé sur NextJS pour le comparer avec SvelteKit".

Date de la création de cette note : 2024-05-17 .

Quel est l'objectif de ce projet ?

Je souhaite essayer de réaliser avec Svelte Flow, une page web qui permet de :

Glisser / déposer 2 types d'objets vers un flow container.
Permettre de saisir du texte dans ces deux types d'objets.
Permettre de relier les objets de type 1 vers ceux de type 2 et inversement.
Interdire les liaisons entre des objets de même type.

Idéalement j'aimerais que les objets soient placés "harmonieusement" entre eux dans le flow container.

Pourquoi je souhaite réaliser ce projet ?

Je besoin de créer ce type d'éditeur dans mon projet Value Props

Repository de ce projet :

https://github.com/stephane-klein/svelteflow-playground

Ressources :

Documentation de SvelteFlow : https://svelteflow.dev/learn

Résultat

2024-05-22 : je déclare le projet terminé.

Voir détail dans cette note : 2024-05-22_1033

Date de la création de cette note : mardi 30 avril 2024.

Quel est l'objectif de ce projet ?

Ce projet remplace l'issue Étudier la version 12 de NextJS que j'ai créé en mars 2023.

Contexte : J'utilise SvelteKit depuis avril 2022, j'apprécie très fortement l'élégence de toutes les fonctionnalités de routing de SvelteKit.

Mon objectif est de créer un projet de type #POC pour apprendre les bases de NextJS et de comparer ce framework avec SvelteKit.

Artefacts à produire :

Un repository GitHub qui contient le projet de type POC que j'aurais réaliser pour apprendre à utiliser NextJS
Une note d'opinion qui présente ma comparaison entre SvelteKit et NextJS

Objectif secondaire de ce projet:

Je pense pas dire de bétise, en déclarant qu'en 2024 ReactJS est plus populaire que VueJS et Svelte, par conséquent, je pense que maitriser Nuxt me sera utile à l'avenir, par exemple pour des projets en freelance.
Je souhaite ajouter Nuxt sur mon CV.

Repository de ce projet :

Aucun pour le moment.

Ressources :

Voir les notes que j'ai prise dans l'issue Étudier la version 12 de NextJS

https://github.com/svelte-add/svelte-add

Cet outil semble être remplacé par "sv - the Svelte CLI", voir note : 2024-11-18_2251.

Dépôt GitHub : https://github.com/sveltejs/cli

Voir note : 2024-11-18_2251.

Date de la création de cette note : mardi 30 avril 2024 .

Quel est l'objectif de ce projet ?

Pour les mêmes raisons qui me motive à réaliser Projet - 2 "Réaliser un petit projet basé sur NextJS pour le comparer avec SvelteKit", je souhaite réaliser la même chose pour Nuxt.

Contexte : J'utilise SvelteKit depuis avril 2022, j'apprécie très fortement l'élégence de toutes les fonctionnalités de routing de SvelteKit.

Mon objectif est de créer un projet de type #POC pour apprendre les bases de Nuxt et de comparer ce framework avec SvelteKit.

Artefacts à produire :

Un repository GitHub qui contient le projet de type POC que j'aurais réaliser pour apprendre à utiliser Nuxt
Une note d'opinion qui présente ma comparaison entre SvelteKit et NextJS

Sapper est le projet qui a précédé SvelteKit.

Sapper is deprecated in favor of its successor, SvelteKit, which we recommend using instead.

Dépôt GitHub : https://github.com/sveltejs/sapper

Lien direct vers la documentation : https://svelte.dev/docs/kit/adapter-node#Custom-server

Date de la création de cette note : 2025-06-18.

Quel est l'objectif de ce projet ?

Je souhaite réaliser un POC d'une intégration ProConnect dans un projet SvelteKit, basé sur openid-client (pour le support OpenID Connect), en suivant les recommandations Lucia. Le tout en utilisant une base de données PostgreSQL.

Pourquoi je souhaite réaliser ce projet ?

Je souhaite évaluer la difficulté de réaliser cette implémentation.

Repository de ce projet :

https://github.com/stephane-klein/poc-sveltekit-proconnect

Ressources :