fix: CountryFlag downloads only the shown flags from flag-icons instead of the whole 1.1 MB vue-flag set AdminForth/2005

Author: ivictbor

adminforth/design/adoption.md

@@ -53,4 +53,6 @@ Which packages follow the [design concepts](./system-concepts.md): tokens instea
 ## Targets
 
 - If simple - get of flowbite, prefer pure AFCL + Tailwind, move features we luck to AFCL
-- Existing icon fonts apart lucide - try to get rid of them if not complex
+- Existing icon fonts apart lucide - try to get rid of them if not complex
+- Core uses only Lucide icons and `flag-icons` flags (`afcl/CountryFlag.vue`). `vue-flowbite` and `vue-heroicons` stay in `spa/package.json` while plugins import them (flowbite: bulk-ai-flow, clone-row, dashboard, email-invite, email-password-reset, foreign-inline-list, inline-create, json-editor, markdown, open-signup, two-factors-auth, user-soft-delete; heroicons: dashboard, markdown). After plugins rework it they should disappear.
+- i18n shows language flags with its own `flag-icon-css`, a 445 KB stylesheet loaded on every page: move `LanguageFlag.vue` to AFCL `CountryFlag`.

adminforth/design/system-concepts.md

@@ -40,6 +40,12 @@ Below `sm` (640px) a Dialog or Modal docks to the bottom edge as a sheet: full w
 - Don't add icons from other sets; replace flowbite, heroicons and humbleicons icons with Lucide when you touch a component. The old sets stay installed because apps and older plugins still import them.
 - Don't draw icons with inline `<svg>` or keep them as own `.vue` files, take the Lucide component. Inline SVG is only for graphics which are not icons: the two-tone `Spinner` ring, the `Toast` timer ring, charts.
 
+## Country flags and lazy loading
+
+- Flags are the 4:3 SVGs of `flag-icons`, shown by AFCL `<CountryFlag :countryCode="'ua'" />`. Core and plugins use this component and don't bring their own flag packages or flag CSS.
+- A set of assets (flags, illustrations) never goes into the main bundle as a whole. `CountryFlag` loads the map of flag URLs (`afcl/countryFlagUrls.ts`, 7 KB gzip) with a dynamic `import()` when the first flag is shown, then the browser downloads only the SVGs of the shown flags, 0.2–10 KB each. The former `@iconify-prerendered/vue-flag` brought 1.1 MB gzip with the first flag.
+- An eager `import.meta.glob` belongs to a module which is imported dynamically. `@/afcl` is a barrel, so in an AFCL component such glob makes the dev server load every matched file on every page. Glob assets with `query: '?url&no-inline'`, otherwise Vite inlines files under 4 KB into JS as data URIs, and with `exhaustive: true` when the files are in `node_modules`, which the glob skips by default.
+
 ## Moving off flowbite
 
 flowbite is being removed step by step. Don't add new flowbite usages (`flowbite` JS components, `flowbite-datepicker`, `data-*-toggle` attributes). When you touch code which uses it, replace it with a native Vue implementation, usually an AFCL component. Example: the user menu moved from flowbite `Dropdown` to AFCL `DropdownMenu`.

adminforth/pnpm-lock.yaml

@@ -15,7 +15,6 @@
   "dependencies": {
     "@fontsource-variable/geist": "^5.3.0",
     "@fontsource-variable/geist-mono": "^5.3.0",
-    "@iconify-prerendered/vue-flag": "^0.28.1748584105",
     "@iconify-prerendered/vue-flowbite": "^0.28.1754899090",
     "@iconify-prerendered/vue-heroicons": "^0.28.1721921294",
     "@iconify-prerendered/vue-humbleicons": "^0.28.1754108846",

adminforth/spa/package-lock.json

@@ -1,35 +1,29 @@
 <template>
   <div class="aspect-[4/3] w-8 h-6 flex items-center justify-center">
-    <component v-if="flagComponent" :is="flagComponent" class="flag-icon  h-full object-contain rounded-sm"/>
-    <span v-else-if="flagIcons && countryCode">{{ countryCode }}</span>
+    <img v-if="flagUrl" :src="flagUrl" :alt="countryCode" class="flag-icon h-full object-contain rounded-sm"/>
+    <span v-else-if="getFlagUrl && countryCode">{{ countryCode }}</span>
   </div>
 </template>
 
 <script setup lang="ts">
-import { computed, shallowRef, type Component } from 'vue';
+import { computed, shallowRef } from 'vue';
 
 const props = defineProps(['countryCode']);
 
-// the flag set takes megabytes, so it is loaded when a flag is shown for the first time
-const flagIcons = shallowRef<Record<string, Component>>();
-import('@iconify-prerendered/vue-flag').then((icons) => {
-  flagIcons.value = icons;
+// the map of flag URLs is loaded when a flag is shown for the first time
+const getFlagUrl = shallowRef<(countryCode: string) => string | undefined>();
+import('./countryFlagUrls').then((module) => {
+  getFlagUrl.value = module.default;
 });
 
-const flagComponent = computed(() => {
-  if (!props.countryCode || !flagIcons.value) {
-    return null;
-  }
-  const normalizedCode = props.countryCode.charAt(0).toUpperCase() + props.countryCode.slice(1).toLowerCase();
-  return flagIcons.value[`Icon${normalizedCode}4x3`] || null; // 4:3 aspect ratio flags
-});
+const flagUrl = computed(() => props.countryCode && getFlagUrl.value?.(props.countryCode));
 </script>
 
 <style scoped>
     .flag-icon {
-        box-shadow: inset -0.3px -0.3px 0.3px 0px rgba(0 0 0 / 0.2), 
+        box-shadow: inset -0.3px -0.3px 0.3px 0px rgba(0 0 0 / 0.2),
             inset 0.3px 0.3px 0.3px 0px rgba(255 255 255 / 0.2),
             0px 0px 3px #00000030;
         width: auto;
     }
-</style>
+</style>

adminforth/spa/package.json

@@ -0,0 +1,12 @@
+// URLs of the 4:3 flags of flag-icons: only the URLs get into the bundle, the browser downloads the SVG of a flag when it is shown.
+// no-inline keeps small flags from being inlined as data URIs, exhaustive lets the glob into node_modules
+const flagUrls = import.meta.glob<string>('/node_modules/flag-icons/flags/4x3/*.svg', {
+  eager: true,
+  query: '?url&no-inline',
+  import: 'default',
+  exhaustive: true,
+});
+
+export default function getFlagUrl(countryCode: string): string | undefined {
+  return flagUrls[`/node_modules/flag-icons/flags/4x3/${countryCode.toLowerCase()}.svg`];
+}