Extraction des parties 'non react' dans une librairie à part ?

[MichaelBitard]

Salut,

Sur Camino, on utilise vue (en mode tsx) et on se dit que la partie typage du DSFR de ce projet est vraiment chouette et on aimerait la même chose pour vue.

Mais en fait, c'est peut-être plus efficace de faire un effort commun pour avoir une librairie qui ne contiendrait que le typage du DSFR.

De cette manière vous pourriez l'utiliser dans react-dsfr et dans les projets vue et angular ou autre.

Qu'en pensez-vous ?

[garronej]

Oui tout à fait, je vous répond..

[ddecrulle]

Bonjour,

Très bonne idée ! Ce que vous appelez la partie typage du DSFR, s’agit-il de fr ou bien y a-t-il d’autres éléments ?

Pour le coup, je pense que le meilleur endroit ne serait pas forcément une autre librairie, mais que cela soit directement inclus dans le DSFR.
Qu’en pensez-vous ?

[MichaelBitard]

Bonjour,

Oui c'est tout à fait ça, tout ce qui est là dedans serait le top !

Je suis d'accord, ça devrait être inclus dans le DSFR, vous pensez que c'est faisable ? J'ai l'impression que le DSFR est uniquement CSS/JS et qu'ils ne sont pas intéressés par le typage.

Je vais créer une issue chez eux et la lier à celle-ci.

[garronej]

Bonjour @MichaelBitard,

Désolé pour le délai de réponse.

En théorie, il faudrait que les utilitaires du namespace fr soient exportés depuis @gouvfr/dsfr, puisqu’ils ne contiennent rien de spécifique à React.
Cependant, je pense qu’en pratique cela ne verra jamais le jour, car l’équipe du SIG a sa propre façon de travailler et de gérer le projet, très différente de la nôtre.

Cela dit, nous pourrions discuter de la création d’un package satellite, mais ce n’est pas strictement nécessaire.

En réalité, j’ai conçu react-dsfr de sorte qu’il n’ait aucune dépendance à React et que ses différents modules soient exposés comme des fichiers indépendants.

Vous pouvez donc tout à fait ajouter @codegouvfr/react-dsfr dans vos projets Vue ou Angular.
Vous pouvez même utiliser la commande react-dsfr update-icons pour n’inclure que les icônes effectivement utilisées et bénéficier de l’import automatique des icônes de Remix Icons (à condition d’importer le fichier CSS de DSFR depuis ./node_modules/@codegouvfr/react-dsfr/main.css plutôt que depuis @gouvfr/dsfr).

Exemple de configuration package.json :

"scripts": {
  "predev": "react-dsfr update-icons",
  "prebuild": "react-dsfr update-icons"
}

Et dans votre code :

-import "@gouvfr/dsfr/dist/dsfr.css"
+import "@codegouvfr/react-dsfr/main.css";

Lorsque vous faites :

import { fr } from "@codegouvfr/react-dsfr";

aucun code React n’est importé.

Je comprends néanmoins qu’il puisse être un peu dérangeant, pour des raisons esthétiques, de voir apparaître le mot « react » dans un projet basé sur Vue ou Angular.

Nous pourrions donc reconditionner cela sous la forme d’un module @codegouvfr/dsfr-repackaged (ou même @codegouvfr/dsfr, mais d’évidentes raisons politiques risquent de bloquer cette idéee).
L’avantage d’un tel reconditionnement serait de faire correspondre la version du nouveau module à celle de @gouvfr/dsfr, ce qui resterait plus lisible pour tout le monde.
On pourrait alors dire aux utilisateurs : « Remplacez @gouvfr/dsfr par @codegouvfr/dsfr-repackaged dans votre package.json », et vous disposeriez du DSFR enrichi d’un certain nombre d’utilitaires pour la sécurité de type, le CSS-in-JS et la gestion des icônes.

Qu’en pensez-vous ?

[MichaelBitard]

Bonjour @MichaelBitard,

Désolé pour le délai de réponse.

Aucun souci, au contraire je trouve que j'ai eu pas mal de réponses assez rapidement ;)

En théorie, il faudrait que les utilitaires du namespace fr soient exportés depuis @gouvfr/dsfr, puisqu’ils ne contiennent rien de spécifique à React. Cependant, je pense qu’en pratique cela ne verra jamais le jour, car l’équipe du SIG a sa propre façon de travailler et de gérer le projet, très différente de la nôtre.

C'est ce que j'avais cru ressentir aussi, on verra ce qu'il en est de mon issue sur leur repo.

Cela dit, nous pourrions discuter de la création d’un package satellite, mais ce n’est pas strictement nécessaire.

En réalité, j’ai conçu react-dsfr de sorte qu’il n’ait aucune dépendance à React et que ses différents modules soient exposés comme des fichiers indépendants.

C'est ce que j'ai vu en regardant le package.json, et je me suis dis qu'on allait probablement faire ça, au moins dans un premier temps !

Vous pouvez donc tout à fait ajouter @codegouvfr/react-dsfr dans vos projets Vue ou Angular. Vous pouvez même utiliser la commande react-dsfr update-icons pour n’inclure que les icônes effectivement utilisées et bénéficier de l’import automatique des icônes de Remix Icons (à condition d’importer le fichier CSS de DSFR depuis ./node_modules/@codegouvfr/react-dsfr/main.css plutôt que depuis @gouvfr/dsfr).

Exemple de configuration package.json :

"scripts": {
"predev": "react-dsfr update-icons",
"prebuild": "react-dsfr update-icons"
}

Et dans votre code :

-import "@gouvfr/dsfr/dist/dsfr.css"
+import "@codegouvfr/react-dsfr/main.css";

Lorsque vous faites :

import { fr } from "@codegouvfr/react-dsfr";

aucun code React n’est importé.

Je comprends néanmoins qu’il puisse être un peu dérangeant, pour des raisons esthétiques, de voir apparaître le mot « react » dans un projet basé sur Vue ou Angular.

Nous pourrions donc reconditionner cela sous la forme d’un module @codegouvfr/dsfr-repackaged (ou même @codegouvfr/dsfr, mais d’évidentes raisons politiques risquent de bloquer cette idéee). L’avantage d’un tel reconditionnement serait de faire correspondre la version du nouveau module à celle de @gouvfr/dsfr, ce qui resterait plus lisible pour tout le monde. On pourrait alors dire aux utilisateurs : « Remplacez @gouvfr/dsfr par @codegouvfr/dsfr-repackaged dans votre package.json », et vous disposeriez du DSFR enrichi d’un certain nombre d’utilitaires pour la sécurité de type, le CSS-in-JS et la gestion des icônes.

Qu’en pensez-vous ?

Oui, c'est ma proposition initiale, ça parait plus "propre" d'avoir ça dans un module à part (@codegouvfr/dsfr-typed ou repackaged ou autre) comme ça on pourrait avoir une doc plus centrée sur le typage du dsfr, ce qui serait plus simple à comprendre d'un premier coup d'oeil que se dire qu'un projet react peut être importé dans un projet vue ou angular.

Comment voulez-vous qu'on avance sur ce sujet ? Étant chez beta.gouv j'ai un peu de temps alloué aux projets transverses je peux extraire les parties intéressantes dans un module à part, même si je pense qu'il serait plus efficace que ça soit fait par une personne qui connait mieux ce projet que moi :)

En tout cas je peux me rendre dispo pour du pair-programming ou autre, si besoin !

[garronej]

Super !

Ce que je propose, c'est de passer par une phase d'expérimentation où vous pourriez utiliser directement @codegouvfr/react-dsfr dans votre projet.
Cela me permettra d'observer concrètement dans quel contexte vous utilisez les utilitaires et d'identifier les éventuels ajustements nécessaires.

Si l'expérience est concluante, je m'engage à extraire le cœur de la bibliothèque dans un module à part, accompagné de sa propre documentation.

Est-ce que cela vous convient ?

[MichaelBitard]

Parfait, commençons comme ça alors !

[garronej]

Ce qui m'interesse le plus c'est de confirmer que le script d'import automatique des icones fonctionne correctement.

[MichaelBitard]

Alors, de premier abord, il ne fonctionne pas correctement je pense 😄

Je mets le détail du build en dessous.

• Il trouve les icons dans les assets statics de storybook (qu'on a buildé avant, on peut le supprimer avant, c'est pas génant)
• Il trouve les icons dans les assets du build précédent si il existe (pareil, on peut le supprimer avant, c'est pas génant)
• Il trouve les icons dans les storybook (un peu plus génant)
• Il trouve les icons dans le react-dsfr qui est dans le node_modules (y'en a que quelques uns, c'est peut-être même fait exprès)
• Il trouve les icons dans les HTML des tests storybook
  • le plus génant, parce qu'on a un test qui liste toutes les icones donc il embarque toutes les icones

Dans tous les cas ce n'est pas génant, il me semble qu'avant on embarquait toutes les icones sans tree-shaking, donc bon.

On a quand même gagné des types, des fonctions utilitaires, et on a pu supprimer un script qui listait les icones... alors comme on dit :

Les changements de notre côté --> https://gitlab-forge.din.developpement-durable.gouv.fr/pub/pnm-public/camino/-/merge_requests/1636

Gros logs

camino-ui@1.0.0 prebuild
react-dsfr update-icons

Found fr-icon-add-line in storybook-static/assets/activite-documents-edit-DnU9X9w_.js
Found fr-icon-delete-bin-line in storybook-static/assets/activite-documents-edit-DnU9X9w_.js
Found fr-icon-add-line in storybook-static/assets/activites-types-emails-CQaX8JLs.js
Found fr-icon-delete-bin-line in storybook-static/assets/demarche-etape-Dx2pfbrU.js
Found fr-icon-add-line in storybook-static/assets/dsfr-button.stories-DNAQsTfw.js
Found fr-icon-alert-fill in storybook-static/assets/dsfr-button.stories-DNAQsTfw.js
Found fr-icon-account-circle-fill in storybook-static/assets/dsfr-button.stories-DNAQsTfw.js
Found fr-icon-file-download-line in storybook-static/assets/downloads-D5h0SYaF.js
Found fr-icon-list-unordered in storybook-static/assets/dsfr-perimetre-CoimMUvG.js
Found fr-icon-earth-fill in storybook-static/assets/dsfr-perimetre-CoimMUvG.js
Found fr-icon-download-line in storybook-static/assets/dsfr-perimetre-CoimMUvG.js
Found fr-icon-delete-bin-line in storybook-static/assets/utilisateur.stories-B9gihr2A.js
Found fr-icon-lock-line in storybook-static/assets/utilisateur.stories-B9gihr2A.js
Found fr-icon-add-line in src/components/activite-edition.stories_snapshots_FullEmptyWithMandatoryDocument.html
Found fr-icon-calendar-line in src/components/activite.stories_snapshots_Deposable.html
Found fr-icon-edit-line in src/components/activite.stories_snapshots_Deposable.html
Found fr-icon-calendar-line in src/components/activite.stories_snapshots_Supprimable.html
Found fr-icon-edit-line in src/components/activite.stories_snapshots_Supprimable.html
Found fr-icon-delete-bin-line in src/components/activite.stories_snapshots_Supprimable.html
Found fr-icon-calendar-line in src/components/activite.stories_snapshots_ACompleter.html
Found fr-icon-edit-line in src/components/activite.stories_snapshots_ACompleter.html
Found fr-icon-file-download-line in src/components/activites.stories_snapshots_Full.html
Found fr-icon-arrow-down-fill in src/components/activites.stories_snapshots_Full.html
Found fr-icon-add-line in src/components/administration.stories_snapshots_Default.html
Found fr-icon-edit-line in src/components/entreprise.tsx
Found fr-icon-file-download-line in src/components/entreprises.stories_snapshots_canCreateEntreprise.html
Found fr-icon-add-line in src/components/entreprises.stories_snapshots_canCreateEntreprise.html
Found fr-icon-add-line in src/components/entreprises.tsx
Found fr-icon-file-download-line in src/components/entreprises.stories_snapshots_NonConnecte.html
Found fr-icon-add-line in src/components/etape-edition.stories_snapshots_AxmEnZoneDuSdom.html
Found fr-icon-delete-bin-line in src/components/etape-edition.stories_snapshots_AxmEnZoneDuSdom.html
Found fr-icon-add-line in src/components/etape-edition.stories_snapshots_AffichageAide.html
Found fr-icon-delete-bin-line in src/components/etape-edition.stories_snapshots_AffichageAide.html
Found fr-icon-add-line in src/components/etape-edition.stories_snapshots_Modification.html
Found fr-icon-calendar-line in src/components/titre.stories_snapshots_BonEspoirProlongation2.html
Found fr-icon-list-unordered in src/components/titre.stories_snapshots_BonEspoirProlongation2.html
Found fr-icon-earth-fill in src/components/titre.stories_snapshots_BonEspoirProlongation2.html
Found fr-icon-download-line in src/components/titre.stories_snapshots_BonEspoirProlongation2.html
Found fr-icon-calendar-line in src/components/titre.stories_snapshots_ChantepieMutation.html
Found fr-icon-pencil-line in src/components/titre.stories_snapshots_ChantepieMutation.html
Found fr-icon-list-unordered in src/components/titre.stories_snapshots_ChantepieMutation.html
Found fr-icon-earth-fill in src/components/titre.stories_snapshots_ChantepieMutation.html
Found fr-icon-delete-bin-line in src/components/titre.stories_snapshots_ChantepieMutation.html
Found fr-icon-download-line in src/components/titre.stories_snapshots_ChantepieMutation.html
Found fr-icon-calendar-line in src/components/titre.stories_snapshots_BonEspoirTravaux.html
Found fr-icon-calendar-line in src/components/titre.stories_snapshots_ChantepieOctroi.html
Found fr-icon-pencil-line in src/components/titre.stories_snapshots_ChantepieOctroi.html
Found fr-icon-list-unordered in src/components/titre.stories_snapshots_ChantepieOctroi.html
Found fr-icon-earth-fill in src/components/titre.stories_snapshots_ChantepieOctroi.html
Found fr-icon-delete-bin-line in src/components/titre.stories_snapshots_ChantepieOctroi.html
Found fr-icon-download-line in src/components/titre.stories_snapshots_ChantepieOctroi.html
Found fr-icon-calendar-line in src/components/titre.stories_snapshots_Empty.html
Found fr-icon-download-line in src/components/_common/dsfr-perimetre.stories_snapshots_CustomPointsWithAnotherLegacyGeoSysteme.html
Found fr-icon-list-unordered in src/components/_common/dsfr-perimetre.stories_snapshots_CustomPointsWithoutNameAndDesc.html
Found fr-icon-earth-fill in src/components/_common/dsfr-perimetre.stories_snapshots_CustomPointsWithoutNameAndDesc.html
Found fr-icon-download-line in src/components/_common/dsfr-perimetre.stories_snapshots_CustomPointsWithoutNameAndDesc.html
Found fr-icon-list-unordered in src/components/_common/dsfr-perimetre.stories_snapshots_Multiple.html
Found fr-icon-earth-fill in src/components/_common/dsfr-perimetre.stories_snapshots_Multiple.html
Found fr-icon-earth-fill in src/components/_ui/tabs.stories_snapshots_WithoutIcon.html
Found fr-icon-add-line in src/components/ui/filters/filters.stories_snapshots_AllFiltersWithValues.html
Found fr-icon-add-line in src/components/ui/filters/filters.stories_snapshots_AllFiltersWithoutValues.html
Found fr-icon-add-line in ../../node_modules/camino-ui/storybook-static/assets/activite-documents-edit-DnU9X9w.js
Found fr-icon-delete-bin-line in ../../node_modules/camino-ui/storybook-static/assets/activite-documents-edit-DnU9X9w.js
Found fr-icon-add-line in ../../node_modules/camino-ui/storybook-static/assets/activites-types-emails-CQaX8JLs.js
Found fr-icon-delete-bin-line in ../../node_modules/camino-ui/storybook-static/assets/activites-types-emails-CQaX8JLs.js
Found fr-icon-download-line in ../../node_modules/camino-ui/storybook-static/assets/chart-with-export-BvdPxpHb.js
Found fr-icon-add-line in ../../node_modules/camino-ui/storybook-static/assets/demande-titre-button-DXerH5aw.js
Found fr-icon-calendar-line in ../../node_modules/camino-ui/storybook-static/assets/demarche-etape-Dx2pfbrU.js
Found fr-icon-pencil-line in ../../node_modules/camino-ui/storybook-static/assets/demarche-etape-Dx2pfbrU.js
Found fr-icon-delete-bin-line in ../../node_modules/camino-ui/storybook-static/assets/demarche-etape-Dx2pfbrU.js
Found fr-icon-add-line in ../../node_modules/camino-ui/src/components/_ui/filters/filters.stories_snapshots_AllFiltersWithoutValues.html
Found fr-icon-translate-2 in ../../node_modules/@codegouvfr/react-dsfr/LanguageSelect.js
Found fr-icon-question-line in ../../node_modules/@codegouvfr/react-dsfr/Tooltip.js
Found fr-icon-translate-2 in ../../node_modules/@codegouvfr/react-dsfr/src/LanguageSelect.tsx
Found fr-icon-question-line in ../../node_modules/@codegouvfr/react-dsfr/src/Tooltip.tsx
Found fr-icon-arrow-go-back-fill in ../../node_modules/@codegouvfr/react-dsfr/src/Chart/BarChart.tsx
Found fr-icon-arrow-right-line in ../../node_modules/@codegouvfr/react-dsfr/src/MainNavigation/MegaMenu.tsx
Found fr-icon-theme-fill in ../../node_modules/@codegouvfr/react-dsfr/src/Display/Display.tsx
There is probably an error in the only-include-used-icons script, including 648 icons!
Found usage of 648 different icons.

camino-ui@1.0.0 build
tsc --noEmit --incremental && vite build --emptyOutDir

[garronej]

Dans tous les cas, ce n'est pas gênant. Il me semble qu'avant, on embarquait toutes les icônes sans tree-shaking, donc bon.

Le truc, c'est que ça dépend du compilateur CSS utilisé. Par exemple, PostCSS (utilisé par Next.js) refuse de compiler le CSS avec un import exhaustif des icônes. En gros, il dit : "T'es sûr ? Ton fichier CSS fait 15 000 lignes, organise-toi".
De plus, en pratique, les utilisateurs veulent simplement aller sur remixicon.com, chercher une icône qui leur convient, copier l'ID, et passer à autre chose.

---

Retours sur les différents cas signalés :

Il trouve les icônes dans les assets statiques de Storybook
(qu'on a buildés avant, on peut les supprimer, ce n'est pas gênant)

Peut-être qu'il faudrait exclure ce type de dossiers, mais à mon avis, ce n'est pas très gênant.

---

Il trouve les icônes dans les assets du build précédent (si présent)
(pareil, on peut les supprimer avant, ce n'est pas gênant)

Là, c'est plus problématique. Il faut mettre à jour le script pour qu'il ne cherche jamais dans un dossier ressemblant à un build précédent.

---

Il trouve les icônes dans Storybook
(un peu plus gênant)

Non, ça me semble correct. Les icônes font partie des sources. Au pire, il pourrait y avoir des icônes inutilisées en production, mais ce n’est pas grave. Finalement, les icônes sont téléchargées à la volée, et l'important, c'est qu'on n'ait pas 2 800 références dans un énorme fichier CSS.

---

Il trouve les icônes dans react-dsfr situé dans node_modules
(il y en a seulement quelques-unes, c'est peut-être fait exprès)

Oui, c'est normal. On veut bien récupérer les icônes utilisées dans les composants officiels.

---

Il trouve les icônes dans les fichiers HTML des tests Storybook
(le plus gênant, car on a un test qui liste toutes les icônes, donc il embarque toutes les icônes)

Est-ce que ces tests sont toujours pertinents maintenant qu'il y a le script pour gérer ça ?

---

Merci en tout cas pour le rapport détaillé, je vais regarder ça de plus près.

PS: Le script est trop verbeux, il faudrais qu'il soit silencieux par default.

[MichaelBitard]

Est-ce que ces tests sont toujours pertinents maintenant qu'il y a le script pour gérer ça ?

Alors ce n'est pas lié au script, on a mis ça en place pour voir toutes les icones proposées sans avoir à chercher sur quel site elles sont :)

Mais oui, on doit pouvoir le supprimer et aller sur remixicons directement à la place

Je suis d'accord avec tout le reste :)