@tekkare/romulus 0.1.205 → 0.1.206

package/dist/module.json

@@ -4,7 +4,7 @@
   "compatibility": {
     "nuxt": ">=3.16.0"
   },
-  "version": "0.1.204",
+  "version": "0.1.205",
   "builder": {
     "@nuxt/module-builder": "0.8.4",
     "unbuild": "2.0.0"

package/dist/module.mjs

@@ -51,6 +51,8 @@ const module = defineNuxtModule({
     if (!nuxt.options.app.head.link.some((l) => l.href === phosphorFillHref)) {
       nuxt.options.app.head.link.push({ rel: "stylesheet", href: phosphorFillHref });
     }
+    const optimizeDeps = nuxt.options.vite.optimizeDeps ||= {};
+    optimizeDeps.include = [...optimizeDeps.include || [], "@phosphor-icons/vue"];
   }
 });
 

package/dist/runtime/components/Icon.vue

@@ -9,44 +9,36 @@
   icone deja chargee : une liste de trois cents lignes posait trois cents
   attentes, et les icones apparaissaient apres le texte.
 -->
-<script setup lang="ts">
-import { computed, defineAsyncComponent, shallowRef, type Component } from 'vue'
-
-export interface RmIconProps {
-  /** Nom Phosphor sans le prefixe « Ph » (« House », « Gear », « ChartBar »). */
-  name: string
-  /** Taille en pixels. */
-  size?: number
-  /** Graisse du trait. `fill` donne la forme pleine. */
-  weight?: 'thin' | 'light' | 'regular' | 'bold' | 'fill' | 'duotone'
-  color?: string
-}
-
-const props = withDefaults(defineProps<RmIconProps>(), {
-  size: 20,
-  weight: 'regular',
-  color: undefined,
-})
+<script lang="ts">
+import { defineAsyncComponent, type Component } from 'vue'
 
 /**
- * Un composant asynchrone par nom d'icone, partage par toutes les instances.
- * Une fois le paquet charge, le composant garde sa resolution et se pose sans
- * attente au montage suivant.
+ * Etat partage par toutes les instances : il vit dans le module, pas dans
+ * `<script setup>` (qui le recreait a chaque instance, donc une attente par
+ * icone).
  */
 const cache = new Map<string, Component>()
-
-/** Le module, demande une seule fois quel que soit le nombre d'icones. */
-const iconModule = shallowRef<Promise<Record<string, Component>>>()
+let iconModule: Promise<Record<string, Component>> | undefined
+/** Le paquet une fois charge : les icones se posent alors sans attente. */
+let loaded: Record<string, Component> | undefined
 
 function loadIcons() {
-  if (!iconModule.value) {
-    iconModule.value = import('@phosphor-icons/vue') as unknown as Promise<Record<string, Component>>
+  if (!iconModule) {
+    iconModule = (import('@phosphor-icons/vue') as unknown as Promise<Record<string, Component>>)
+      .then((mod) => {
+        loaded = mod
+        return mod
+      })
   }
-  return iconModule.value
+  return iconModule
 }
 
+// Le paquet est demande des l'import du composant, pas au premier montage.
+if (typeof window !== 'undefined') loadIcons()
+
 function resolve(name: string) {
   const key = `Ph${name}`
+  if (loaded) return loaded[key] || loaded.PhQuestion
   let component = cache.get(key)
   if (!component) {
     component = defineAsyncComponent(() =>
@@ -56,6 +48,26 @@ function resolve(name: string) {
   }
   return component
 }
+</script>
+
+<script setup lang="ts">
+import { computed } from 'vue'
+
+export interface RmIconProps {
+  /** Nom Phosphor sans le prefixe « Ph » (« House », « Gear », « ChartBar »). */
+  name: string
+  /** Taille en pixels. */
+  size?: number
+  /** Graisse du trait. `fill` donne la forme pleine. */
+  weight?: 'thin' | 'light' | 'regular' | 'bold' | 'fill' | 'duotone'
+  color?: string
+}
+
+const props = withDefaults(defineProps<RmIconProps>(), {
+  size: 20,
+  weight: 'regular',
+  color: undefined,
+})
 
 const iconComponent = computed(() => resolve(props.name))
 </script>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tekkare/romulus",
-  "version": "0.1.205",
+  "version": "0.1.206",
   "description": "Romulus Design System - Nuxt module by Tekkare",
   "license": "MIT",
   "type": "module",