Die Website hatte gar kein Alpine: elf x-show taten nichts, darunter der Preis-Umschalter

package-lock.json

@@ -1,5 +1,5 @@
 {
-    "name": "clupilot",
+    "name": "html",
     "lockfileVersion": 3,
     "requires": true,
     "packages": {
@@ -8,6 +8,7 @@
                 "@fontsource/ibm-plex-mono": "^5.3.0",
                 "@fontsource/ibm-plex-sans": "^5.3.0",
                 "@fontsource/ibm-plex-serif": "^5.3.0",
+                "alpinejs": "^3.15.12",
                 "chart.js": "^4.5.1",
                 "laravel-echo": "^2.4.0",
                 "pusher-js": "^8.6.0"
@@ -482,6 +483,30 @@
                 "tslib": "^2.4.0"
             }
         },
+        "node_modules/@vue/reactivity": {
+            "version": "3.1.5",
+            "resolved": "https://registry.npmjs.org/@vue/reactivity/-/reactivity-3.1.5.tgz",
+            "integrity": "sha512-1tdfLmNjWG6t/CsPldh+foumYFo3cpyCHgBYQ34ylaMsJ+SNHQ1kApMIa8jN+i593zQuaw3AdWH0nJTARzCFhg==",
+            "license": "MIT",
+            "dependencies": {
+                "@vue/shared": "3.1.5"
+            }
+        },
+        "node_modules/@vue/shared": {
+            "version": "3.1.5",
+            "resolved": "https://registry.npmjs.org/@vue/shared/-/shared-3.1.5.tgz",
+            "integrity": "sha512-oJ4F3TnvpXaQwZJNF3ZK+kLPHKarDmJjJ6jyzVNDKH9md1dptjC7lWR//jrGuLdek/U6iltWxqAnYOu8gCiOvA==",
+            "license": "MIT"
+        },
+        "node_modules/alpinejs": {
+            "version": "3.15.12",
+            "resolved": "https://registry.npmjs.org/alpinejs/-/alpinejs-3.15.12.tgz",
+            "integrity": "sha512-nJvPAQVNPdZZ0NrExJ/kzQco3ijR8LwvCOadQecllESiqT4NyZ/57sN9V2XyvhlBGAbmlKYgeWZvYdKq99ij/Q==",
+            "license": "MIT",
+            "dependencies": {
+                "@vue/reactivity": "~3.1.1"
+            }
+        },
         "node_modules/ansi-regex": {
             "version": "5.0.1",
             "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-5.0.1.tgz",

package.json

@@ -18,6 +18,7 @@
         "@fontsource/ibm-plex-mono": "^5.3.0",
         "@fontsource/ibm-plex-sans": "^5.3.0",
         "@fontsource/ibm-plex-serif": "^5.3.0",
+        "alpinejs": "^3.15.12",
         "chart.js": "^4.5.1",
         "laravel-echo": "^2.4.0",
         "pusher-js": "^8.6.0"

resources/js/site.js

@@ -0,0 +1,30 @@
+/*
+ * Alpine für die öffentliche Website — und nur für sie.
+ *
+ * Die Konsole und das Portal bekommen Alpine von Livewire mitgeliefert; die
+ * Website lädt Livewire nicht (sie hat kein einziges Livewire-Bauteil) und
+ * stand damit ganz ohne da. `resources/js/app.js` fiel das nicht auf: es
+ * importiert Alpine nirgends, sondern greift nur innerhalb von `alpine:init`
+ * auf `window.Alpine` zu — ein Ereignis, das ohne Alpine nie eintritt.
+ *
+ * Die Folge war unsichtbar und trotzdem groß: elf `x-show` auf der Startseite
+ * taten nichts. Der Umschalter zwischen Monats- und Jahrespreis rührte sich
+ * nicht, und weil die Jahres-Ansicht `x-cloak` trägt — und
+ * `[x-cloak]{display:none!important}` sehr wohl ausgeliefert wird —, war der
+ * Jahrespreis dauerhaft verborgen statt bloß ungeschaltet. Dasselbe traf das
+ * Menü am Telefon.
+ *
+ * Ein eigenes Bündel statt `@livewireScripts` im öffentlichen Layout: die
+ * gesamte Livewire-Laufzeit samt ihrem Endpunkt gehört nicht auf eine Seite,
+ * die kein Bauteil davon benutzt. Alpine allein ist ein Bruchteil davon.
+ *
+ * Wird NACH `app.js` geladen (siehe `components/layouts/site.blade.php`), damit
+ * dessen `alpine:init`-Anmeldungen stehen, bevor hier gestartet wird. Auf
+ * Konsolen- und Portalseiten läuft diese Datei nicht — dort startet Livewire
+ * Alpine, und ein zweiter Start würde beide zerlegen.
+ */
+import Alpine from 'alpinejs'
+
+window.Alpine = Alpine
+
+Alpine.start()

resources/views/components/layouts/site.blade.php

@@ -9,6 +9,13 @@
     @if ($description)<meta name="description" content="{{ $description }}">@endif
     @if ($robots)<meta name="robots" content="{{ $robots }}">@endif
     <x-shell.head :title="$title" />
+    {{-- Alpine, nur hier. Die Konsole und das Portal bekommen es von Livewire;
+         diese Seite lädt Livewire nicht und stand deshalb ganz ohne da — mit
+         elf `x-show`, die nichts taten, darunter der Umschalter zwischen
+         Monats- und Jahrespreis und das Menü am Telefon. NACH `x-shell.head`,
+         damit die `alpine:init`-Anmeldungen aus `app.js` stehen, bevor hier
+         gestartet wird. --}}
+    @vite('resources/js/site.js')
     {{-- Parts of the page arrive on scroll, which an observer decides. Without
          JavaScript nothing is ever observed. --}}
     <noscript><style>.rv,.logline{opacity:1!important;transform:none!important}</style></noscript>

vite.config.js

@@ -14,7 +14,10 @@ const hmrClientPort = Number(process.env.VITE_PORT || 5173);
 export default defineConfig({
     plugins: [
         laravel({
-            input: ['resources/css/app.css', 'resources/js/app.js'],
+            // site.js ist ein eigener Einstiegspunkt, kein Teil von app.js: es
+            // startet Alpine, und auf Konsolen- und Portalseiten tut das schon
+            // Livewire. Zwei Starts zerlegen beide. Siehe resources/js/site.js.
+            input: ['resources/css/app.css', 'resources/js/app.js', 'resources/js/site.js'],
             refresh: true,
         }),
     ],