perf: ⚡ use auto-import instead of vueDsfr plugin

frontend/.eslintrc-auto-import.json

@@ -293,6 +293,10 @@
     "whenever": true,
     "injectLocal": true,
     "provideLocal": true,
-    "useClipboardItems": true
+    "useClipboardItems": true,
+    "OhVueIcon": true,
+    "addIcons": true,
+    "useScheme": true,
+    "useTabs": true
   }
 }

frontend/package.json

@@ -2,6 +2,7 @@
   "name": "basegun",
   "version": "3.3.0",
   "private": true,
+  "type": "module",
   "scripts": {
     "preview": "vite preview",
     "build": "vite build",

frontend/src/auto-imports.d.ts

@@ -6,6 +6,8 @@
 export {}
 declare global {
   const EffectScope: typeof import('vue')['EffectScope']
+  const OhVueIcon: typeof import('oh-vue-icons')['OhVueIcon']
+  const addIcons: typeof import('oh-vue-icons')['addIcons']
   const asyncComputed: typeof import('@vueuse/core')['asyncComputed']
   const autoResetRef: typeof import('@vueuse/core')['autoResetRef']
   const computed: typeof import('vue')['computed']
@@ -221,6 +223,7 @@ declare global {
   const useResultStore: typeof import('./stores/result')['useResultStore']
   const useRoute: typeof import('vue-router')['useRoute']
   const useRouter: typeof import('vue-router')['useRouter']
+  const useScheme: typeof import('@gouvminint/vue-dsfr')['useScheme']
   const useScreenOrientation: typeof import('@vueuse/core')['useScreenOrientation']
   const useScreenSafeArea: typeof import('@vueuse/core')['useScreenSafeArea']
   const useScriptTag: typeof import('@vueuse/core')['useScriptTag']
@@ -241,6 +244,7 @@ declare global {
   const useStyleTag: typeof import('@vueuse/core')['useStyleTag']
   const useSupported: typeof import('@vueuse/core')['useSupported']
   const useSwipe: typeof import('@vueuse/core')['useSwipe']
+  const useTabs: typeof import('@gouvminint/vue-dsfr')['useTabs']
   const useTemplateRefsList: typeof import('@vueuse/core')['useTemplateRefsList']
   const useTextDirection: typeof import('@vueuse/core')['useTextDirection']
   const useTextSelection: typeof import('@vueuse/core')['useTextSelection']
@@ -293,12 +297,16 @@ declare global {
 declare global {
   // @ts-ignore
   export type { Component, ComponentPublicInstance, ComputedRef, ExtractDefaultPropTypes, ExtractPropTypes, ExtractPublicPropTypes, InjectionKey, PropType, Ref, VNode, WritableComputedRef } from 'vue'
+  import('vue')
 }
 // for vue template auto import
 import { UnwrapRef } from 'vue'
 declare module 'vue' {
+  interface GlobalComponents {}
   interface ComponentCustomProperties {
     readonly EffectScope: UnwrapRef<typeof import('vue')['EffectScope']>
+    readonly OhVueIcon: UnwrapRef<typeof import('oh-vue-icons')['OhVueIcon']>
+    readonly addIcons: UnwrapRef<typeof import('oh-vue-icons')['addIcons']>
     readonly asyncComputed: UnwrapRef<typeof import('@vueuse/core')['asyncComputed']>
     readonly autoResetRef: UnwrapRef<typeof import('@vueuse/core')['autoResetRef']>
     readonly computed: UnwrapRef<typeof import('vue')['computed']>
@@ -330,6 +338,7 @@ declare module 'vue' {
     readonly h: UnwrapRef<typeof import('vue')['h']>
     readonly ignorableWatch: UnwrapRef<typeof import('@vueuse/core')['ignorableWatch']>
     readonly inject: UnwrapRef<typeof import('vue')['inject']>
+    readonly injectLocal: UnwrapRef<typeof import('@vueuse/core')['injectLocal']>
     readonly isDefined: UnwrapRef<typeof import('@vueuse/core')['isDefined']>
     readonly isProxy: UnwrapRef<typeof import('vue')['isProxy']>
     readonly isReactive: UnwrapRef<typeof import('vue')['isReactive']>
@@ -359,6 +368,7 @@ declare module 'vue' {
     readonly onUpdated: UnwrapRef<typeof import('vue')['onUpdated']>
     readonly pausableWatch: UnwrapRef<typeof import('@vueuse/core')['pausableWatch']>
     readonly provide: UnwrapRef<typeof import('vue')['provide']>
+    readonly provideLocal: UnwrapRef<typeof import('@vueuse/core')['provideLocal']>
     readonly reactify: UnwrapRef<typeof import('@vueuse/core')['reactify']>
     readonly reactifyObject: UnwrapRef<typeof import('@vueuse/core')['reactifyObject']>
     readonly reactive: UnwrapRef<typeof import('vue')['reactive']>
@@ -422,6 +432,7 @@ declare module 'vue' {
     readonly useBrowserLocation: UnwrapRef<typeof import('@vueuse/core')['useBrowserLocation']>
     readonly useCached: UnwrapRef<typeof import('@vueuse/core')['useCached']>
     readonly useClipboard: UnwrapRef<typeof import('@vueuse/core')['useClipboard']>
+    readonly useClipboardItems: UnwrapRef<typeof import('@vueuse/core')['useClipboardItems']>
     readonly useCloned: UnwrapRef<typeof import('@vueuse/core')['useCloned']>
     readonly useColorMode: UnwrapRef<typeof import('@vueuse/core')['useColorMode']>
     readonly useConfirmDialog: UnwrapRef<typeof import('@vueuse/core')['useConfirmDialog']>
@@ -511,6 +522,7 @@ declare module 'vue' {
     readonly useResultStore: UnwrapRef<typeof import('./stores/result')['useResultStore']>
     readonly useRoute: UnwrapRef<typeof import('vue-router')['useRoute']>
     readonly useRouter: UnwrapRef<typeof import('vue-router')['useRouter']>
+    readonly useScheme: UnwrapRef<typeof import('@gouvminint/vue-dsfr')['useScheme']>
     readonly useScreenOrientation: UnwrapRef<typeof import('@vueuse/core')['useScreenOrientation']>
     readonly useScreenSafeArea: UnwrapRef<typeof import('@vueuse/core')['useScreenSafeArea']>
     readonly useScriptTag: UnwrapRef<typeof import('@vueuse/core')['useScriptTag']>
@@ -531,6 +543,7 @@ declare module 'vue' {
     readonly useStyleTag: UnwrapRef<typeof import('@vueuse/core')['useStyleTag']>
     readonly useSupported: UnwrapRef<typeof import('@vueuse/core')['useSupported']>
     readonly useSwipe: UnwrapRef<typeof import('@vueuse/core')['useSwipe']>
+    readonly useTabs: UnwrapRef<typeof import('@gouvminint/vue-dsfr')['useTabs']>
     readonly useTemplateRefsList: UnwrapRef<typeof import('@vueuse/core')['useTemplateRefsList']>
     readonly useTextDirection: UnwrapRef<typeof import('@vueuse/core')['useTextDirection']>
     readonly useTextSelection: UnwrapRef<typeof import('@vueuse/core')['useTextSelection']>
@@ -581,8 +594,11 @@ declare module 'vue' {
   }
 }
 declare module '@vue/runtime-core' {
+  interface GlobalComponents {}
   interface ComponentCustomProperties {
     readonly EffectScope: UnwrapRef<typeof import('vue')['EffectScope']>
+    readonly OhVueIcon: UnwrapRef<typeof import('oh-vue-icons')['OhVueIcon']>
+    readonly addIcons: UnwrapRef<typeof import('oh-vue-icons')['addIcons']>
     readonly asyncComputed: UnwrapRef<typeof import('@vueuse/core')['asyncComputed']>
     readonly autoResetRef: UnwrapRef<typeof import('@vueuse/core')['autoResetRef']>
     readonly computed: UnwrapRef<typeof import('vue')['computed']>
@@ -614,6 +630,7 @@ declare module '@vue/runtime-core' {
     readonly h: UnwrapRef<typeof import('vue')['h']>
     readonly ignorableWatch: UnwrapRef<typeof import('@vueuse/core')['ignorableWatch']>
     readonly inject: UnwrapRef<typeof import('vue')['inject']>
+    readonly injectLocal: UnwrapRef<typeof import('@vueuse/core')['injectLocal']>
     readonly isDefined: UnwrapRef<typeof import('@vueuse/core')['isDefined']>
     readonly isProxy: UnwrapRef<typeof import('vue')['isProxy']>
     readonly isReactive: UnwrapRef<typeof import('vue')['isReactive']>
@@ -643,6 +660,7 @@ declare module '@vue/runtime-core' {
     readonly onUpdated: UnwrapRef<typeof import('vue')['onUpdated']>
     readonly pausableWatch: UnwrapRef<typeof import('@vueuse/core')['pausableWatch']>
     readonly provide: UnwrapRef<typeof import('vue')['provide']>
+    readonly provideLocal: UnwrapRef<typeof import('@vueuse/core')['provideLocal']>
     readonly reactify: UnwrapRef<typeof import('@vueuse/core')['reactify']>
     readonly reactifyObject: UnwrapRef<typeof import('@vueuse/core')['reactifyObject']>
     readonly reactive: UnwrapRef<typeof import('vue')['reactive']>
@@ -706,6 +724,7 @@ declare module '@vue/runtime-core' {
     readonly useBrowserLocation: UnwrapRef<typeof import('@vueuse/core')['useBrowserLocation']>
     readonly useCached: UnwrapRef<typeof import('@vueuse/core')['useCached']>
     readonly useClipboard: UnwrapRef<typeof import('@vueuse/core')['useClipboard']>
+    readonly useClipboardItems: UnwrapRef<typeof import('@vueuse/core')['useClipboardItems']>
     readonly useCloned: UnwrapRef<typeof import('@vueuse/core')['useCloned']>
     readonly useColorMode: UnwrapRef<typeof import('@vueuse/core')['useColorMode']>
     readonly useConfirmDialog: UnwrapRef<typeof import('@vueuse/core')['useConfirmDialog']>
@@ -795,6 +814,7 @@ declare module '@vue/runtime-core' {
     readonly useResultStore: UnwrapRef<typeof import('./stores/result')['useResultStore']>
     readonly useRoute: UnwrapRef<typeof import('vue-router')['useRoute']>
     readonly useRouter: UnwrapRef<typeof import('vue-router')['useRouter']>
+    readonly useScheme: UnwrapRef<typeof import('@gouvminint/vue-dsfr')['useScheme']>
     readonly useScreenOrientation: UnwrapRef<typeof import('@vueuse/core')['useScreenOrientation']>
     readonly useScreenSafeArea: UnwrapRef<typeof import('@vueuse/core')['useScreenSafeArea']>
     readonly useScriptTag: UnwrapRef<typeof import('@vueuse/core')['useScriptTag']>
@@ -815,6 +835,7 @@ declare module '@vue/runtime-core' {
     readonly useStyleTag: UnwrapRef<typeof import('@vueuse/core')['useStyleTag']>
     readonly useSupported: UnwrapRef<typeof import('@vueuse/core')['useSupported']>
     readonly useSwipe: UnwrapRef<typeof import('@vueuse/core')['useSwipe']>
+    readonly useTabs: UnwrapRef<typeof import('@gouvminint/vue-dsfr')['useTabs']>
     readonly useTemplateRefsList: UnwrapRef<typeof import('@vueuse/core')['useTemplateRefsList']>
     readonly useTextDirection: UnwrapRef<typeof import('@vueuse/core')['useTextDirection']>
     readonly useTextSelection: UnwrapRef<typeof import('@vueuse/core')['useTextSelection']>

frontend/src/components.d.ts

@@ -9,6 +9,16 @@ declare module 'vue' {
   export interface GlobalComponents {
     AskingExpert: typeof import('./components/AskingExpert.vue')['default']
     ContactExpert: typeof import('./components/ContactExpert.vue')['default']
+    DsfrAccordion: typeof import('@gouvminint/vue-dsfr')['DsfrAccordion']
+    DsfrAccordionsGroup: typeof import('@gouvminint/vue-dsfr')['DsfrAccordionsGroup']
+    DsfrAlert: typeof import('@gouvminint/vue-dsfr')['DsfrAlert']
+    DsfrButton: typeof import('@gouvminint/vue-dsfr')['DsfrButton']
+    DsfrHeader: typeof import('@gouvminint/vue-dsfr')['DsfrHeader']
+    DsfrInput: typeof import('@gouvminint/vue-dsfr')['DsfrInput']
+    DsfrModal: typeof import('@gouvminint/vue-dsfr')['DsfrModal']
+    DsfrPicture: typeof import('@gouvminint/vue-dsfr')['DsfrPicture']
+    DsfrRadioButton: typeof import('@gouvminint/vue-dsfr')['DsfrRadioButton']
+    DsfrTag: typeof import('@gouvminint/vue-dsfr')['DsfrTag']
     FooterMES: typeof import('./components/FooterMES.vue')['default']
     HeaderMain: typeof import('./components/HeaderMain.vue')['default']
     OnboardingSwiper: typeof import('./components/OnboardingSwiper.vue')['default']
@@ -20,5 +30,6 @@ declare module 'vue' {
     SnackbarAlert: typeof import('./components/SnackbarAlert.vue')['default']
     StepsGuide: typeof import('./components/StepsGuide.vue')['default']
     UploadButton: typeof import('./components/UploadButton.vue')['default']
+    VIcon: typeof import('oh-vue-icons')['OhVueIcon']
   }
 }

frontend/src/main.ts

@@ -8,8 +8,6 @@ import axios from 'axios'
 import { createApp } from 'vue'
 import { createPinia } from 'pinia'
 
-import VueDsfr from '@gouvminint/vue-dsfr' // Import (par défaut) de la bibliothèque
-
 import * as icons from './icons'
 import App from './App.vue'
 import router from '@/router/index'
@@ -23,10 +21,12 @@ const pinia = createPinia()
 // the FastAPI backend
 axios.defaults.baseURL = '/api/'
 
+// Register all icons
+addIcons(...Object.values(icons))
+
 const app = createApp(App)
 
 app
   .use(pinia)
-  .use(VueDsfr, { icons: Object.values(icons) })
   .use(router)
   .mount('#app')

frontend/vite.config.ts

@@ -1,11 +1,16 @@
+import path from 'node:path'
 import { defineConfig } from 'vite'
 import vue from '@vitejs/plugin-vue'
 import { VitePWA } from 'vite-plugin-pwa'
 import UnoCSS from 'unocss/vite'
 import AutoImport from 'unplugin-auto-import/vite'
 import Components from 'unplugin-vue-components/vite'
+import {
+  vueDsfrAutoimportPreset,
+  ohVueIconAutoimportPreset,
+  vueDsfrComponentResolver,
+} from '@gouvminint/vue-dsfr'
 
-const path = require('path')
 const apiHost = process.env.API_HOST || 'http://basegun-backend:5000'
 
 // https://vitejs.dev/config/
@@ -14,12 +19,18 @@ export default defineConfig({
     vue(),
     // https://github.com/antfu/unplugin-auto-import
     AutoImport({
+      include: [
+        /\.[tj]sx?$/,
+        /\.vue$/, /\.vue\?vue/,
+      ],
       imports: [
         'vue',
         'vue-router',
         // 'vue-i18n',
         '@vueuse/head',
         '@vueuse/core',
+        vueDsfrAutoimportPreset,
+        ohVueIconAutoimportPreset,
       ],
       dts: 'src/auto-imports.d.ts',
       dirs: [
@@ -30,16 +41,21 @@ export default defineConfig({
       eslintrc: {
         enabled: true,
         filepath: './.eslintrc-auto-import.json',
+        globalsPropValue: true,
       },
     }),
 
     // https://github.com/antfu/unplugin-vue-components
     Components({
       // allow auto load components under `./src/components/`
       extensions: ['vue'],
+      dirs: ['src/components'],
       // allow auto import and register components
       include: [/\.vue$/, /\.vue\?vue/],
       dts: 'src/components.d.ts',
+      resolvers: [
+        vueDsfrComponentResolver,
+      ],
     }),
 
     UnoCSS(),