Désormais nous utilisons un script NodeJS natif pour générer le code
HTML pour le pré-rendu des pages. Cela est plus rapide et plus fiable
que la méthode précédente qui consistait un instrumentaliser un
navigateur (pupetter)
https://github.com/chrisvfritz/prerender-spa-plugin
Cela implique toutefois de faire attention à ne plus utiliser des
variables gloables du navigateur, comme `window`, `document` ou
`location` dans nos scripts. C'est plutôt une bonne pratique, mais il
faudrait sans doute configurer du typage pour détecter ces usages le
plus tôt possible et éviter de créer des erreurs inopinées avec le SSR.
La version utilisée de react-markdown n'était pas compatible avec
ViteJS. J'ai tenté la mise à jour vers la v7 qui est publiée sous forme
de ES Module, ce qui nécessitait d'intégrer plusieurs changements d'API.
En m'y attelant j'ai réalisé que la motivation première de
react-markdown était de ne surtout pas utiliser
`dangerouslySetInnerHTML`, ce qui est utile pour les cas d'usages où le
markdown n'est pas digne de confiance (message d'utilisateurs par
exemple). Cette contrainte oblige à alourdir sensiblement la quantité de
JavaScript à charger et à évaluer.
Anisi dans certains markdown que l'on affiche, on utilise la balise HTML
`<sup>`, qui n'est pas parsée nativement pas react-markdown. Comme on ne
peut pas faire de `dangerouslySetInnerHTML` il faut intégrer un parseur
HTML complet qui rajout 60kb, juste pour quelques occurences de `<sup>`
dans les pages nouveautés.
Dans notre cas d'usage reparser tout le html en Javascript, n'est pas
utile. markdown-to-jsx semble plus adapté et beaucoup plus léger. Par
ailleurs le paquet est 5 fois plus utilisé que react-markdown :
https://www.npmtrends.com/react-markdown-vs-markdown-to-jsx
- Création d'un plugin personnalisé pour gérer le serveur dev et le
build Rollup
- Restauration d'un template.html (ne fonctionne pas encore au build)
- Suppression de la config Babel
Nous utilisions Jest uniquement pour les tests de non regressions qui
recquièrent le “snapshot testing”. Cette fonctionnalité étant supoprtée
par Vitest, il n'est plus utile de maintenir 2 environnement de tests
séparés.
Réactive 2 suites de tests qui n'étaient plus fonctionnelles :
- les "exemples" définis directements dans le publicodes
- le StackedBarChart
Suppression de mocha, mochapack, sinon, chai
Avec vite, on n'utilise plus `process.env` côté client, mais
`import.meta.env`. Par ailleurs seules les variables d'environnement
préfixées par `VITE_` sont exposées au client, les autres sont
uniquement disponibles côté serveur.
* 🎨 Ajoute un champs de recherche d'entreprise dans la page d'accueil
Aucune intéractivité ajoutée pour l'instant
🔥 Déplace la recherche dans un nouveau composant
🎨 Ajoute une animation lors de la saisie de texte
🎨✨ Branche la recherche d'entreprise via l'api existante
🎨 Améliorations diverses
✨ ajoute la possibilité d'utiliser entrée lorsqu'il n'y a qu'un seul résultat
Remplace les résultats sous forme de lien par des boutons
🐛 Fix le prérendu
💚 Fix TS & répare le composant 'Appear'
Améliore le style sur mobile
Ajoute une section simulateurs sur la landing
Enlève l'animation lorsqu'on revient à la page d'accueil depuis une autre page
Branche la selection d'entreprise avec la page 'gérer'
Branche la selection d'entreprise avec la page 'gérer'
Ajoute un raccourci vers l'entreprise selectionnée depuis la page d'accueil
👽 ajoute les traductions manquantes
* Adapte la nouvelle page à la charte URSSAF
* Répare la selection des resultats
Simplifie le contenu de la landing
* Met à jour les tests cypress avec le flow de recherche
* Répare les erreurs de type
* Réduit la taille du champ de recherche sur la landing
* Met en avant la recherche entreprise
* Améliore le test cypress de la recherche
* Utilise une couleur moins forte pour le fond de la recherche
* Remet en couleur claire par la landing
* Utilise data-testid pour identifier les éléments de la recherche
* Enlève un composant non utilisé
Co-authored-by: Johan Girod <johan.girod@beta.gouv.fr>
Co-authored-by: Alexandre Valsamou-Stanislawski <alexandre.valsamoustanislawski@beta.gouv.fr>
Le package.json racine sert uniquement à définir les workspaces mais les
dépendances doivent être définies dans chacun des workspace. C'est
pourquoi un `yarn install` à la racine sans ajouter d'option spécifique
ne fonctionne pas.
J'ai donc déplacé l'ensemble des dépendances de dev dans le workspace
`site`, la plupart étaient des doublons déjà présent dans le fichier.
Cette librairie n'était utilisée qu'une seule fois et styled-components
permet de s'en passer aisément.
Hélas, la libraire n'est pas supprimée du bundle car elle reste utilisée
par react-instantsearch-dom.
Johan Girod
Maxime Quandalle
Jérémy Rialland
Alexandre Hajjar
Alex S