feat: service-worker basique

Ajoute vite-plugin-pwa (qui derrière utilise Workbox, le de-facto standard pour faire configurer les caches des SW).

Drop le support des navigateurs qui ne gèrent pas les modules (comportement par défaut de vite), en configurant vite-plugin-legacy pour n'injecter que les polyfills (il me semblait qu'on ne l'avait ajouté que pour les polyfills, pas pour les navigateurs nomodule).

Ajoute un script npm dev-sw qui build, watch, puis lance vite preview (le sleep permet que le index.html soit bien présent au moment du lancement du preview, sinon ça ne fonctionne pas).

Diverses modifications pour mieux splitter les modules (`npx vite-bundle-visualizer` permet de bien voir ce qu'on fait) :
* import de certains gros composants non affichés par défaut sur le page de manière async
  * sélection de culture, car la base CPF est volumineuse
  * l'export, car le module xlsx l'est aussi
* suppression de stores/index.js pour permettre d'avoir les stores dans différents modules
* import des stores dans main.js uniquement si nécessaire

Signed-off-by: Maud Royer <hello@maudroyer.fr>

package.json

@@ -5,6 +5,7 @@
   "type": "module",
   "scripts": {
     "dev": "vite",
+    "dev-sw": "vite build & (sleep 1 && vite preview --port 3000)",
     "build": "npm run build:app",
     "build:app": "vite build",
     "build:widget": "vite build --config vite.widget.config.js --mode lib",
@@ -64,6 +65,7 @@
     "typescript": "^5.0.4",
     "vite": "^5.0.8",
     "vite-plugin-pages": "^0.32.0",
+    "vite-plugin-pwa": "^0.19.2",
     "vitest": "^1.0.4"
   },
   "eslintConfig": {

src/components/Features/AddFlow.vue

@@ -83,7 +83,9 @@ import { featureCollection } from '@turf/helpers'
 import { diff, featureName, inHa, legalProjectionSurface, merge } from './index.js'
 import CommuneSelect from "@/components/Forms/CommuneSelect.vue";
 import { useRouter } from "vue-router";
-import { useFeaturesStore, useOperatorStore, useRecordStore } from "@/stores/index.js"
+import { useFeaturesStore } from "@/stores/features.js"
+import { useRecordStore } from "@/stores/record.js"
+import { useOperatorStore } from "@/stores/operator.js"
 import { usePermissions } from "@/stores/permissions.js"
 import CertificationBodyEditForm from "@/components/Features/SingleItemCertificationBodyForm.vue"
 import OperatorEditForm from "@/components/Features/SingleItemOperatorForm.vue"

src/components/Features/ConversionLevel.vue

@@ -21,7 +21,7 @@ import { computed } from 'vue'
 import { LEVEL_MAYBE_AB, LEVEL_UNKNOWN, getConversionLevel, isABLevel } from '@/referentiels/ab.js'
 import { mmyyyy, ddmmmmyyyy } from '@/components/dates.js';
 import { storeToRefs } from 'pinia'
-import { usePermissions } from "@/stores/index.js"
+import { usePermissions } from "@/stores/permissions.js"
 
 
 const props = defineProps({

src/components/Features/ConversionLevelSelector.vue

@@ -18,7 +18,7 @@
 <script setup>
 import { computed } from 'vue'
 import { userFacingConversionLevels as conversionLevels } from '@/referentiels/ab.js'
-import { useFeaturesSetsStore } from '@/stores/index.js'
+import { useFeaturesSetsStore } from '@/stores/features-sets.js'
 
 const props = defineProps({
   featureId: {

src/components/Features/CultureSelector.vue

@@ -1,6 +1,6 @@
 <template>
   <fieldset class="culture-group fr-card fr-mb-1w fr-p-2w" v-for="(culture) in uuidedCultures" :key="culture.id">
-    <CultureTypeSelector :feature-id="featureId" :culture="culture" :modelValue="culture.CPF" @update:modelValue="$CPF => updateCulture(culture.id, 'CPF', $CPF)" />
+    <AsyncCultureTypeSelector :feature-id="featureId" :culture="culture" :modelValue="culture.CPF" @update:modelValue="$CPF => updateCulture(culture.id, 'CPF', $CPF)" />
 
     <div class="fr-input-group">
       <label class="fr-label" :for="`variete-${culture.id}`">Variété (facultatif)</label>
@@ -38,9 +38,9 @@
 </template>
 
 <script setup>
-import { computed } from 'vue'
+import { computed, defineAsyncComponent } from 'vue'
 
-import CultureTypeSelector from './CultureTypeSelector.vue';
+const AsyncCultureTypeSelector = defineAsyncComponent(() => import('./CultureTypeSelector.vue'))
 
 const props = defineProps({
   cultures: {

src/components/Features/CultureTypeSelector.vue

@@ -20,7 +20,7 @@
 
 <script setup>
 import { computed, Fragment, h, nextTick, onBeforeUnmount, onMounted, ref, render, shallowRef } from 'vue'
-import { useFeaturesSetsStore } from '@/stores/index.js'
+import { useFeaturesSetsStore } from '@/stores/features-sets.js'
 
 import { autocomplete } from '@algolia/autocomplete-js'
 import '@algolia/autocomplete-theme-classic'

src/components/Features/ExportStrategies/BureauVeritasExporter.test.js

@@ -1,5 +1,5 @@
 import { describe, test, expect, vi } from 'vitest'
-import { usePermissions } from '@/stores/index.js'
+import { usePermissions } from '@/stores/permissions.js'
 import { createTestingPinia } from "@pinia/testing"
 import Exporter from './BureauVeritasExporter.js'
 import record from '@/components/Features/__fixtures__/record-for-exports.json' assert { type: 'json' }

src/components/Features/ExportStrategies/CertipaqExporter.test.js

@@ -1,5 +1,5 @@
 import { describe, test, expect, vi } from 'vitest'
-import { usePermissions } from '@/stores/index.js'
+import { usePermissions } from '@/stores/permissions.js'
 import { createTestingPinia } from "@pinia/testing"
 import Exporter from './CertipaqExporter.js'
 import record from '@/components/Features/__fixtures__/record-for-exports.json' assert { type: 'json' }

src/components/Features/ExportStrategies/CertisExporter.test.js

@@ -1,5 +1,5 @@
 import { describe, test, expect, vi } from 'vitest'
-import { usePermissions } from '@/stores/index.js'
+import { usePermissions } from '@/stores/permissions.js'
 import { createTestingPinia } from "@pinia/testing"
 import Exporter from './CertisExporter.js'
 import record from '@/components/Features/__fixtures__/record-for-exports.json' assert { type: 'json' }

src/components/Features/ExportStrategies/CertisudExporter.test.js

@@ -1,5 +1,5 @@
 import { describe, test, expect, vi } from 'vitest'
-import { usePermissions } from '@/stores/index.js'
+import { usePermissions } from '@/stores/permissions.js'
 import { createTestingPinia } from "@pinia/testing"
 
 import Exporter from './CertisudExporter.js'

src/components/Features/ExportStrategies/ControlUnionExporter.test.js

@@ -1,5 +1,5 @@
 import { describe, test, expect, vi } from 'vitest'
-import { usePermissions } from '@/stores/index.js'
+import { usePermissions } from '@/stores/permissions.js'
 import { createTestingPinia } from "@pinia/testing"
 
 import Exporter from './ControlUnionExporter.js'

src/components/Features/ExportStrategies/DefaultExporter.test.js

@@ -1,5 +1,5 @@
 import { describe, test, expect, vi } from 'vitest'
-import { usePermissions } from '@/stores/index.js'
+import { usePermissions } from '@/stores/permissions.js'
 import { createTestingPinia } from "@pinia/testing"
 
 import Exporter from './DefaultExporter.js'

src/components/Features/ExportStrategies/OcaciaExporter.test.js

@@ -1,5 +1,5 @@
 import { describe, test, expect, vi } from 'vitest'
-import { usePermissions } from '@/stores/index.js'
+import { usePermissions } from '@/stores/permissions.js'
 import { createTestingPinia } from "@pinia/testing"
 
 import Exporter from './OcaciaExporter.js'

src/components/Features/ExportStrategies/QualisudExporter.test.js

@@ -1,5 +1,5 @@
 import { describe, test, expect, vi } from 'vitest'
-import { usePermissions } from '@/stores/index.js'
+import { usePermissions } from '@/stores/permissions.js'
 import { createTestingPinia } from "@pinia/testing"
 
 import Exporter from './QualisudExporter.js'

src/components/Features/FeatureGroup.test.js

@@ -4,7 +4,8 @@ import { createTestingPinia } from "@pinia/testing"
 import { flushPromises, mount } from "@vue/test-utils"
 
 import { GROUPE_COMMUNE, getFeatureGroups } from "@/components/Features/index.js"
-import { useFeaturesStore, usePermissions } from "@/stores/index.js"
+import { useFeaturesStore } from "@/stores/features.js"
+import { usePermissions } from "@/stores/permissions.js"
 
 import record from './__fixtures__/record-with-features.json' assert { type: 'json' }
 import FeatureGroup from "@/components/Features/FeatureGroup.vue"

src/components/Features/FeatureGroup.vue

@@ -117,7 +117,11 @@ import { computed, ref, watch } from 'vue'
 import { storeToRefs } from 'pinia'
 import { useRoute } from "vue-router";
 import { featureName, cultureLabel, inHa, legalProjectionSurface } from '@/components/Features/index.js'
-import { useFeaturesStore, useFeaturesSetsStore, useOperatorStore, usePermissions, useRecordStore } from '@/stores/index.js'
+import { useOperatorStore } from "@/stores/operator.js"
+import { useRecordStore } from "@/stores/record.js"
+import { useFeaturesStore } from "@/stores/features.js"
+import { useFeaturesSetsStore } from "@/stores/features-sets.js"
+import { usePermissions } from "@/stores/permissions.js"
 
 import ConversionLevel from './ConversionLevel.vue'
 import ActionDropdown from "@/components/ActionDropdown.vue"

src/components/Features/SingleItemCertificationBodyForm.test.js

@@ -3,7 +3,8 @@ import { defineComponent, markRaw } from "vue"
 import { createTestingPinia } from "@pinia/testing"
 import { flushPromises, mount } from "@vue/test-utils"
 import axios from 'axios'
-import { usePermissions, useRecordStore } from "@/stores/index.js"
+import { useRecordStore } from "@/stores/record.js"
+import { usePermissions } from "@/stores/permissions.js"
 import {
   ANNOTATIONS,
   AnnotationTags,

src/components/Features/SingleItemCertificationBodyForm.vue

@@ -67,7 +67,8 @@ import { computed, onBeforeUnmount, reactive, ref, watch } from 'vue';
 
 import { featureDetails, inHa, legalProjectionSurface } from '@/components/Features/index.js'
 import { isABLevel, LEVEL_C1, LEVEL_C2, LEVEL_C3 } from '@/referentiels/ab.js'
-import { useFeaturesSetsStore, usePermissions } from '@/stores/index.js'
+import { useFeaturesSetsStore } from "@/stores/features-sets.js"
+import { usePermissions } from "@/stores/permissions.js"
 import { toDateInputString } from '@/components/dates.js'
 
 import AccordionGroup from '@/components/DesignSystem/AccordionGroup.vue'

src/components/Features/SingleItemOperatorForm.vue

@@ -48,7 +48,8 @@ import { computed, onBeforeUnmount, reactive, ref, watch } from 'vue';
 import { featureDetails, inHa, legalProjectionSurface } from '@/components/Features/index.js'
 import Modal from '@/components/Modal.vue'
 import CultureSelector from '@/components/Features/CultureSelector.vue'
-import { useFeaturesSetsStore, usePermissions } from "@/stores/index.js"
+import { usePermissions } from "@/stores/permissions.js"
+import { useFeaturesSetsStore } from "@/stores/features-sets.js"
 import CancelModal from "@/components/Forms/CancelModal.vue"
 
 const props = defineProps({

src/components/Features/Table.test.js

@@ -5,7 +5,9 @@ import { flushPromises, mount } from "@vue/test-utils"
 import axios from 'axios'
 
 import { DeletionReasonsCode, GROUPE_COMMUNE } from "@/components/Features/index.js"
-import { useFeaturesStore, usePermissions, useRecordStore } from "@/stores/index.js"
+import { useFeaturesStore } from "@/stores/features.js"
+import { usePermissions } from "@/stores/permissions.js"
+import { useRecordStore } from "@/stores/record.js"
 
 import record from './__fixtures__/record-with-features.json' assert { type: 'json' }
 import Modal from "@/components/Modal.vue"

src/components/Features/ValidationErrors.vue

@@ -12,7 +12,7 @@
 </template>
 
 <script setup>
-import { useFeaturesSetsStore } from '@/stores/index.js'
+import { useFeaturesSetsStore } from '@/stores/features-sets.js'
 
 const featuresSet = useFeaturesSetsStore()
 const plural = new Intl.PluralRules('fr-FR', { type: 'cardinal' })

src/components/Login.vue

@@ -44,7 +44,7 @@
 import { onMounted, ref } from 'vue'
 import { useRoute, useRouter } from 'vue-router'
 import { storeToRefs } from 'pinia'
-import { useUserStore } from '@/stores/index.js'
+import { useUserStore } from '@/stores/user.js'
 
 import { verifyToken } from '@/cartobio-api.js'
 

src/components/MainHeader.test.js

@@ -1,8 +1,8 @@
 import { afterEach, describe, expect, test, vi } from "vitest"
 import { createTestingPinia } from "@pinia/testing"
 import { flushPromises, mount } from "@vue/test-utils"
-import { usePermissions, useUserStore } from "@/stores/index.js"
-import { ROLES } from "@/stores/user.js"
+import { ROLES, useUserStore } from "@/stores/user.js"
+import { usePermissions } from "@/stores/permissions.js"
 
 import MainHeader from "./MainHeader.vue"
 

src/components/Map/FeaturesLayer.vue

@@ -3,7 +3,7 @@
 
 <script>
 import GeojsonLayer from "@/components/Map/GeojsonLayer.vue"
-import { useFeaturesStore } from "@/stores/index.js"
+import { useFeaturesStore } from "@/stores/features.js"
 import { inject } from "vue"
 
 export default {

src/components/OperatorSetup/Flow.vue

@@ -37,7 +37,7 @@ import { computed, markRaw, provide, readonly, ref, shallowRef, unref } from 'vu
 import PreviewStep from '@/components/OperatorSetup/Preview.vue'
 import OutroStep from '@/components/OperatorSetup/Outro.vue'
 
-import { useRecordStore } from '@/stores/index.js'
+import { useRecordStore } from '@/stores/record.js'
 import { createOperatorRecord } from '@/cartobio-api.js'
 
 const recordStore = useRecordStore()

src/components/OperatorSetup/Outro.vue

@@ -18,7 +18,7 @@
 </template>
 
 <script setup>
-import { usePermissions } from "@/stores/index.js"
+import { usePermissions } from "@/stores/permissions.js"
 
 const emit = defineEmits(['submit'])
 const permissions = usePermissions()

src/components/OperatorSetup/Preview.vue

@@ -58,7 +58,7 @@ import MapPreview from '@/components/Map/Preview.vue'
 import ReferenceCadastrale from '@/components/Features/ReferenceCadastrale.vue';
 
 import { inHa, FeatureNotFoundError, legalProjectionSurface } from '@/components/Features/index.js'
-import { useOperatorStore } from "@/stores/index.js"
+import { useOperatorStore } from "@/stores/operator.js"
 
 const emit = defineEmits(['submit', 'cancel'])
 const props = defineProps({

src/components/OperatorSetup/Sources/RPG.vue

@@ -4,7 +4,7 @@ import { ref } from "vue"
 import { pacageLookup } from "@/cartobio-api.js"
 import { normalize, isValid, useTélépac } from "@/referentiels/pac.js"
 import { sources } from "@/referentiels/imports.js"
-import { useOperatorStore } from "@/stores/index.js"
+import { useOperatorStore } from "@/stores/operator.js"
 
 const emit = defineEmits(["upload:start", "upload:complete"])
 

src/components/record/CertificationSection.vue

@@ -2,7 +2,10 @@
 import { computed, ref } from 'vue'
 import { CERTIFICATION_STATE, isCertificationImmutable } from '@/referentiels/ab.js'
 import { updateAuditState } from '@/cartobio-api.js'
-import { useFeaturesSetsStore, useOperatorStore, usePermissions, useRecordStore } from '@/stores/index.js'
+import { useFeaturesSetsStore } from "@/stores/features-sets.js"
+import { useOperatorStore } from "@/stores/operator.js"
+import { usePermissions } from "@/stores/permissions.js"
+import { useRecordStore } from "@/stores/record.js"
 import CertificationModal from "@/components/record/modals/CertificationModal.vue"
 import SaveAuditModal from "@/components/record/modals/SaveAuditModal.vue"
 import toast from "@/components/toast.js"

src/components/record/Header.vue

@@ -63,7 +63,7 @@
 
 
   <Teleport to="body">
-    <FeaturesExportModal :operator="operator" :collection="collection" :record="record" v-if="exportModal" @close="exportModal = false" />
+    <AsyncFeaturesExportModal v-if="exportModal" :operator="operator" :collection="collection" :record="record" @close="exportModal = false" />
     <DeleteParcellaireModal :record="record" v-if="deleteModal" @close="deleteModal = false" />
     <EditVersionModal
         :model-value="record"
@@ -75,18 +75,21 @@
 </template>
 
 <script setup>
-import { computed, ref } from 'vue'
+import { computed, defineAsyncComponent, ref } from 'vue'
 import { storeToRefs } from 'pinia'
 
 import ParcellaireState from '@/components/record/State.vue'
 import OperatorHistoryModal from '@/components/record/modals/HistoryModal.vue'
-import FeaturesExportModal from '@/components/record/modals/ExportModal.vue'
 import DeleteParcellaireModal from '@/components/record/modals/DeleteParcelaireModal.vue'
 
-import { useFeaturesStore, useOperatorStore, useRecordStore } from '@/stores/index.js'
+import { useFeaturesStore } from "@/stores/features.js"
+import { useOperatorStore } from "@/stores/operator.js"
+import { useRecordStore } from "@/stores/record.js"
 import { onClickOutside } from "@vueuse/core"
 import EditVersionModal from "@/components/versions/EditVersionModal.vue"
 
+const AsyncFeaturesExportModal = defineAsyncComponent(() => import('@/components/record/modals/ExportModal.vue'))
+
 defineProps({
   disableActions: {
     type: Boolean,

src/components/record/Table.vue

@@ -108,7 +108,11 @@
 import { computed, ref } from 'vue'
 import { storeToRefs } from 'pinia'
 
-import { useFeaturesStore, useFeaturesSetsStore, useOperatorStore, usePermissions, useRecordStore } from '@/stores/index.js'
+import { useFeaturesStore } from "@/stores/features.js"
+import { useFeaturesSetsStore } from "@/stores/features-sets.js"
+import { useOperatorStore } from "@/stores/operator.js"
+import { usePermissions } from "@/stores/permissions.js"
+import { useRecordStore } from "@/stores/record.js"
 
 import MassActionsSelector from '@/components/Features/MassActionsSelector.vue'
 import DeleteFeatureModal from '@/components/record/modals/DeleteFeatureModal.vue'

src/components/record/history/ActionType.test.js

@@ -3,7 +3,7 @@ import { mount } from "@vue/test-utils"
 
 import { EventType } from '@agencebio/cartobio-types'
 import { CERTIFICATION_STATE } from '@/referentiels/ab.js'
-import { usePermissions } from '@/stores/index.js'
+import { usePermissions } from '@/stores/permissions.js'
 import ActionType from "./ActionType.vue"
 import { createTestingPinia } from "@pinia/testing"
 

src/components/record/history/ActionType.vue

@@ -10,7 +10,7 @@ import { readonly, computed } from 'vue'
 import { EventType } from '@agencebio/cartobio-types'
 import { CERTIFICATION_STATE } from '@/referentiels/ab.js'
 import { sources } from '@/referentiels/imports.js'
-import { usePermissions } from '@/stores/index.js'
+import { usePermissions } from '@/stores/permissions.js'
 
 const permissions = usePermissions()
 

src/components/record/modals/DeleteParcelaireModal.vue

@@ -30,7 +30,7 @@
 <script setup>
 import Modal from "@/components/Modal.vue"
 import { deleteRecord } from "@/cartobio-api.js"
-import { useRecordStore } from "@/stores/index.js"
+import { useRecordStore } from "@/stores/record.js"
 
 const props = defineProps({
   record: {

src/components/record/modals/ExportModal.vue

@@ -44,7 +44,7 @@ import { computed, ref, toRaw } from 'vue'
 import { fromId } from '../../Features/ExportStrategies/index.js'
 
 import Modal from '@/components/Modal.vue'
-import { usePermissions } from '@/stores/index.js'
+import { usePermissions } from '@/stores/permissions.js'
 import { statsPush } from "@/stats.js"
 
 const props = defineProps({

src/components/versions/DeleteVersionModal.vue

@@ -2,7 +2,7 @@
 import Modal from "@/components/Modal.vue"
 import { deleteRecord } from "@/cartobio-api.js"
 import toast from "@/components/toast.js"
-import { useOperatorStore } from "@/stores/index.js"
+import { useOperatorStore } from "@/stores/operator.js"
 
 const props = defineProps({
   record: {

src/components/versions/NewVersionModal.vue

@@ -1,7 +1,8 @@
 <script setup>
 
 import Modal from "@/components/Modal.vue"
-import { useOperatorStore, useRecordStore } from "@/stores/index.js"
+import { useOperatorStore } from "@/stores/operator.js"
+import { useRecordStore } from "@/stores/record.js"
 import { sources } from "@/referentiels/imports.js"
 import { createOperatorRecord } from "@/cartobio-api.js"
 import { useRouter } from "vue-router"