fix: charger Alpine en module ES pour corriger le timing d'initialisation

2026-05-27 10:19:02 +02:00
parent 6255ebfbea
commit 30efdf1a79
1 changed files with 7 additions and 6 deletions
@@ -5,13 +5,13 @@
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Convertisseur Images — Matériaux Destock</title>
  <script src="https://cdn.tailwindcss.com"></script>
-  <script defer src="https://unpkg.com/alpinejs@3.x.x/dist/cdn.min.js"></script>
+  <!-- Alpine chargé comme module ES pour contrôler le timing d'initialisation -->
  <script src="https://cdn.jsdelivr.net/npm/heic2any@0.0.4/dist/heic2any.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jszip/3.10.1/jszip.min.js"></script>
  <link rel="stylesheet" href="css/app.css" />
 </head>
 <body class="bg-gray-50 min-h-screen font-sans pb-24">
-  <div x-data="imageApp()" class="max-w-6xl mx-auto px-4 py-8">
+  <div x-data="imageApp" class="max-w-6xl mx-auto px-4 py-8">

    <!-- En-tête -->
    <div class="mb-8">
@@ -173,6 +173,7 @@
  </div><!-- fin x-data -->

  <script type="module">
+    import Alpine                         from 'https://cdn.jsdelivr.net/npm/alpinejs@3/dist/module.esm.min.js';
    import { convertHeicToJpeg }          from './js/heicConverter.js';
    import { removeBackground, pickColorFromCanvas } from './js/bgRemover.js';
    import { processBatch }               from './js/imageProcessor.js';
@@ -203,8 +204,7 @@
    }

    // ── App Alpine.js ──────────────────────────────────────────────
-    window.imageApp = function () {
-      return {
+    Alpine.data('imageApp', () => ({
        files: [],
        globalTolerance: 30,

@@ -349,8 +349,9 @@
          if (readyFiles.length === 0) return;
          await downloadAllAsZip(readyFiles);
        },
-      };
-    };
+    }));
+
+    Alpine.start();
  </script>
 </body>
 </html>