From 93ca39c2e13739743c834cbea67303b30adac29b Mon Sep 17 00:00:00 2001
From: Denis Donici <skryonline@gmail.com>
Date: Fri, 10 Apr 2026 00:20:29 +0300
Subject: [PATCH] chore: fix igniter installer

---
 lib/mix/tasks/live_svelte.install.ex | 189 +++++++++++++++++++++++++--
 1 file changed, 179 insertions(+), 10 deletions(-)

diff --git a/lib/mix/tasks/live_svelte.install.ex b/lib/mix/tasks/live_svelte.install.ex
index 17f4ee0..686afa9 100644
--- a/lib/mix/tasks/live_svelte.install.ex
+++ b/lib/mix/tasks/live_svelte.install.ex
@@ -197,14 +197,14 @@ defmodule Mix.Tasks.LiveSvelte.Install do
       if Igniter.exists?(igniter, "assets/css/app.css") do
         Igniter.update_file(igniter, "assets/css/app.css", fn source ->
           Rewrite.Source.update(source, :content, fn content ->
-            if String.contains?(content, "@source \"../svelte\";") do
+            if String.contains?(content, "@source \"../svelte/**/*.svelte\";") do
               content
             else
               result =
                 String.replace(
                   content,
                   "@source \"../js\";",
-                  ~s(@source "../js";\n@source "../svelte";)
+                  ~s(@source "../js";\n@source "../svelte/**/*.svelte";)
                 )
 
               # Fallback: single-quote variant used by some generators
@@ -212,7 +212,7 @@ defmodule Mix.Tasks.LiveSvelte.Install do
                 String.replace(
                   content,
                   "@source '../js';",
-                  ~s(@source '../js';\n@source "../svelte";)
+                  ~s(@source '../js';\n@source "../svelte/**/*.svelte";)
                 )
               else
                 result
@@ -298,6 +298,8 @@ defmodule Mix.Tasks.LiveSvelte.Install do
           |> add_svelte_dependency()
           |> add_svelte_dev_dependencies()
           |> add_phoenix_vite_dev_dependency()
+          |> upgrade_vite_version()
+          |> fix_deps_paths()
         end)
       end)
     end
@@ -334,7 +336,7 @@ defmodule Mix.Tasks.LiveSvelte.Install do
       if String.contains?(content, "\"@sveltejs/vite-plugin-svelte\"") do
         content
       else
-        svelte_deps = ~s("@sveltejs/vite-plugin-svelte": "^5.0.0",\n    "svelte": "^5.0.0",\n    )
+        svelte_deps = ~s("@sveltejs/vite-plugin-svelte": "^7.0.0",\n    "svelte": "^5.0.0",\n    )
 
         result = String.replace(content, ~s("typescript":), svelte_deps <> ~s("typescript":))
 
@@ -347,6 +349,19 @@ defmodule Mix.Tasks.LiveSvelte.Install do
       end
     end
 
+    defp upgrade_vite_version(content) do
+      # @sveltejs/vite-plugin-svelte@7 requires vite@^8; upgrade from the ^6.x
+      # default that phoenix_vite.install writes so the peer dep is satisfied.
+      String.replace(content, ~s("vite": "^6.3.0"), ~s("vite": "^8.0.0"))
+    end
+
+    defp fix_deps_paths(content) do
+      # phoenix_vite.install creates assets/package.json with "file:../deps/" paths
+      # (relative to assets/). After moving the file to the project root, those paths
+      # must become "file:./deps/" so Node can resolve them.
+      String.replace(content, "\"file:../deps/", "\"file:./deps/")
+    end
+
     defp add_module_type(content) do
       if String.contains?(content, "\"type\": \"module\"") do
         content
@@ -525,15 +540,169 @@ defmodule Mix.Tasks.LiveSvelte.Install do
     defp demo_svelte_content do
       """
       <script>
-        let { count, socket } = $props();
+        let { count } = $props();
       </script>
 
-      <div>
-        <h1>LiveSvelte Demo</h1>
-        <p>Count: {count}</p>
-        <button phx-click="increment">+</button>
-        <button phx-click="decrement">-</button>
+      <div class="card">
+        <div class="badge">LiveSvelte</div>
+        <h1>End-to-end reactivity</h1>
+        <p class="subtitle">This counter is powered by a Phoenix LiveView server — no page reload needed.</p>
+
+        <div class="counter">
+          <button class="btn btn-ghost" phx-click="decrement" aria-label="Decrement">−</button>
+          <span class="count">{count}</span>
+          <button class="btn btn-primary" phx-click="increment" aria-label="Increment">+</button>
+        </div>
+
+        <p class="hint">Click the buttons to update server state via the LiveView websocket.</p>
       </div>
+
+      <style>
+        .card {
+          display: flex;
+          flex-direction: column;
+          align-items: center;
+          gap: 1rem;
+          max-width: 420px;
+          margin: 4rem auto;
+          padding: 2.5rem 2rem;
+          background: #ffffff;
+          border: 1px solid #e5e7eb;
+          border-radius: 1rem;
+          box-shadow: 0 4px 24px rgba(0, 0, 0, 0.07);
+          font-family: system-ui, -apple-system, sans-serif;
+          text-align: center;
+        }
+
+        .badge {
+          display: inline-flex;
+          align-items: center;
+          gap: 0.375rem;
+          padding: 0.25rem 0.75rem;
+          background: #fff7ed;
+          color: #f97316;
+          border: 1px solid #fed7aa;
+          border-radius: 9999px;
+          font-size: 0.75rem;
+          font-weight: 600;
+          letter-spacing: 0.05em;
+          text-transform: uppercase;
+        }
+
+        .badge::before {
+          content: '';
+          display: inline-block;
+          width: 6px;
+          height: 6px;
+          background: #f97316;
+          border-radius: 50%;
+          animation: pulse 2s ease-in-out infinite;
+        }
+
+        h1 {
+          margin: 0;
+          font-size: 1.5rem;
+          font-weight: 700;
+          color: #111827;
+          letter-spacing: -0.02em;
+        }
+
+        .subtitle {
+          margin: 0;
+          font-size: 0.875rem;
+          color: #6b7280;
+          line-height: 1.5;
+        }
+
+        .counter {
+          display: flex;
+          align-items: center;
+          gap: 1.25rem;
+          margin: 0.5rem 0;
+        }
+
+        .count {
+          min-width: 3.5rem;
+          font-size: 3rem;
+          font-weight: 800;
+          color: #111827;
+          letter-spacing: -0.04em;
+          font-variant-numeric: tabular-nums;
+          transition: transform 0.1s ease;
+        }
+
+        .btn {
+          display: inline-flex;
+          align-items: center;
+          justify-content: center;
+          width: 2.75rem;
+          height: 2.75rem;
+          border: none;
+          border-radius: 50%;
+          font-size: 1.5rem;
+          font-weight: 400;
+          line-height: 1;
+          cursor: pointer;
+          transition: background 0.15s ease, transform 0.1s ease, box-shadow 0.15s ease;
+        }
+
+        .btn:active {
+          transform: scale(0.93);
+        }
+
+        .btn-primary {
+          background: #f97316;
+          color: #ffffff;
+          box-shadow: 0 2px 8px rgba(249, 115, 22, 0.35);
+        }
+
+        .btn-primary:hover {
+          background: #ea6c0b;
+          box-shadow: 0 4px 14px rgba(249, 115, 22, 0.45);
+        }
+
+        .btn-ghost {
+          background: #f3f4f6;
+          color: #374151;
+        }
+
+        .btn-ghost:hover {
+          background: #e5e7eb;
+        }
+
+        .hint {
+          margin: 0;
+          font-size: 0.75rem;
+          color: #9ca3af;
+        }
+
+        @keyframes pulse {
+          0%, 100% { opacity: 1; }
+          50% { opacity: 0.4; }
+        }
+
+        @media (prefers-color-scheme: dark) {
+          .card {
+            background: #1f2937;
+            border-color: #374151;
+            box-shadow: 0 4px 24px rgba(0, 0, 0, 0.3);
+          }
+          h1 { color: #f9fafb; }
+          .count { color: #f9fafb; }
+          .subtitle { color: #9ca3af; }
+          .badge {
+            background: #431407;
+            border-color: #ea6c0b;
+            color: #fdba74;
+          }
+          .badge::before { background: #fb923c; }
+          .btn-ghost {
+            background: #374151;
+            color: #d1d5db;
+          }
+          .btn-ghost:hover { background: #4b5563; }
+        }
+      </style>
       """
     end