From f3278ea6a8a0b31e270d88418fbfaf5e2fc01ee8 Mon Sep 17 00:00:00 2001 From: David Mendy Date: Tue, 6 Feb 2024 15:21:38 +0100 Subject: [PATCH] perf: :zap: use auto-import instead of vueDsfr plugin --- frontend/.eslintrc-auto-import.json | 6 +++++- frontend/{.eslintrc.js => .eslintrc.cjs} | 0 .../{cypress.config.js => cypress.config.cjs} | 0 .../cypress/{.eslintrc.js => .eslintrc.cjs} | 0 frontend/package.json | 1 + frontend/src/auto-imports.d.ts | 21 +++++++++++++++++++ frontend/src/components.d.ts | 11 ++++++++++ frontend/src/main.ts | 6 +++--- frontend/vite.config.ts | 18 +++++++++++++++- 9 files changed, 58 insertions(+), 5 deletions(-) rename frontend/{.eslintrc.js => .eslintrc.cjs} (100%) rename frontend/{cypress.config.js => cypress.config.cjs} (100%) rename frontend/cypress/{.eslintrc.js => .eslintrc.cjs} (100%) diff --git a/frontend/.eslintrc-auto-import.json b/frontend/.eslintrc-auto-import.json index 4fbb702cb..a03b2cf1d 100644 --- a/frontend/.eslintrc-auto-import.json +++ b/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 } } diff --git a/frontend/.eslintrc.js b/frontend/.eslintrc.cjs similarity index 100% rename from frontend/.eslintrc.js rename to frontend/.eslintrc.cjs diff --git a/frontend/cypress.config.js b/frontend/cypress.config.cjs similarity index 100% rename from frontend/cypress.config.js rename to frontend/cypress.config.cjs diff --git a/frontend/cypress/.eslintrc.js b/frontend/cypress/.eslintrc.cjs similarity index 100% rename from frontend/cypress/.eslintrc.js rename to frontend/cypress/.eslintrc.cjs diff --git a/frontend/package.json b/frontend/package.json index 075c71df7..dd199ece2 100644 --- a/frontend/package.json +++ b/frontend/package.json @@ -2,6 +2,7 @@ "name": "basegun", "version": "3.3.0", "private": true, + "type": "module", "scripts": { "preview": "vite preview", "build": "vite build", diff --git a/frontend/src/auto-imports.d.ts b/frontend/src/auto-imports.d.ts index 940cbdf6d..85e2547e8 100644 --- a/frontend/src/auto-imports.d.ts +++ b/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 + readonly OhVueIcon: UnwrapRef + readonly addIcons: UnwrapRef readonly asyncComputed: UnwrapRef readonly autoResetRef: UnwrapRef readonly computed: UnwrapRef @@ -330,6 +338,7 @@ declare module 'vue' { readonly h: UnwrapRef readonly ignorableWatch: UnwrapRef readonly inject: UnwrapRef + readonly injectLocal: UnwrapRef readonly isDefined: UnwrapRef readonly isProxy: UnwrapRef readonly isReactive: UnwrapRef @@ -359,6 +368,7 @@ declare module 'vue' { readonly onUpdated: UnwrapRef readonly pausableWatch: UnwrapRef readonly provide: UnwrapRef + readonly provideLocal: UnwrapRef readonly reactify: UnwrapRef readonly reactifyObject: UnwrapRef readonly reactive: UnwrapRef @@ -422,6 +432,7 @@ declare module 'vue' { readonly useBrowserLocation: UnwrapRef readonly useCached: UnwrapRef readonly useClipboard: UnwrapRef + readonly useClipboardItems: UnwrapRef readonly useCloned: UnwrapRef readonly useColorMode: UnwrapRef readonly useConfirmDialog: UnwrapRef @@ -511,6 +522,7 @@ declare module 'vue' { readonly useResultStore: UnwrapRef readonly useRoute: UnwrapRef readonly useRouter: UnwrapRef + readonly useScheme: UnwrapRef readonly useScreenOrientation: UnwrapRef readonly useScreenSafeArea: UnwrapRef readonly useScriptTag: UnwrapRef @@ -531,6 +543,7 @@ declare module 'vue' { readonly useStyleTag: UnwrapRef readonly useSupported: UnwrapRef readonly useSwipe: UnwrapRef + readonly useTabs: UnwrapRef readonly useTemplateRefsList: UnwrapRef readonly useTextDirection: UnwrapRef readonly useTextSelection: UnwrapRef @@ -581,8 +594,11 @@ declare module 'vue' { } } declare module '@vue/runtime-core' { + interface GlobalComponents {} interface ComponentCustomProperties { readonly EffectScope: UnwrapRef + readonly OhVueIcon: UnwrapRef + readonly addIcons: UnwrapRef readonly asyncComputed: UnwrapRef readonly autoResetRef: UnwrapRef readonly computed: UnwrapRef @@ -614,6 +630,7 @@ declare module '@vue/runtime-core' { readonly h: UnwrapRef readonly ignorableWatch: UnwrapRef readonly inject: UnwrapRef + readonly injectLocal: UnwrapRef readonly isDefined: UnwrapRef readonly isProxy: UnwrapRef readonly isReactive: UnwrapRef @@ -643,6 +660,7 @@ declare module '@vue/runtime-core' { readonly onUpdated: UnwrapRef readonly pausableWatch: UnwrapRef readonly provide: UnwrapRef + readonly provideLocal: UnwrapRef readonly reactify: UnwrapRef readonly reactifyObject: UnwrapRef readonly reactive: UnwrapRef @@ -706,6 +724,7 @@ declare module '@vue/runtime-core' { readonly useBrowserLocation: UnwrapRef readonly useCached: UnwrapRef readonly useClipboard: UnwrapRef + readonly useClipboardItems: UnwrapRef readonly useCloned: UnwrapRef readonly useColorMode: UnwrapRef readonly useConfirmDialog: UnwrapRef @@ -795,6 +814,7 @@ declare module '@vue/runtime-core' { readonly useResultStore: UnwrapRef readonly useRoute: UnwrapRef readonly useRouter: UnwrapRef + readonly useScheme: UnwrapRef readonly useScreenOrientation: UnwrapRef readonly useScreenSafeArea: UnwrapRef readonly useScriptTag: UnwrapRef @@ -815,6 +835,7 @@ declare module '@vue/runtime-core' { readonly useStyleTag: UnwrapRef readonly useSupported: UnwrapRef readonly useSwipe: UnwrapRef + readonly useTabs: UnwrapRef readonly useTemplateRefsList: UnwrapRef readonly useTextDirection: UnwrapRef readonly useTextSelection: UnwrapRef diff --git a/frontend/src/components.d.ts b/frontend/src/components.d.ts index 564700a0e..29bd55407 100644 --- a/frontend/src/components.d.ts +++ b/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'] } } diff --git a/frontend/src/main.ts b/frontend/src/main.ts index 304a5befa..37179a236 100644 --- a/frontend/src/main.ts +++ b/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') diff --git a/frontend/vite.config.ts b/frontend/vite.config.ts index 85a72764c..0c28a575b 100644 --- a/frontend/vite.config.ts +++ b/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,6 +41,7 @@ export default defineConfig({ eslintrc: { enabled: true, filepath: './.eslintrc-auto-import.json', + globalsPropValue: true, }, }), @@ -37,9 +49,13 @@ export default defineConfig({ 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(),