chore: added lodash as example dependency. fixed warnings. added svelte config

example_project/assets/svelte.config.js

@@ -0,0 +1,5 @@
+import { vitePreprocess } from "@sveltejs/vite-plugin-svelte"
+
+export default {
+  preprocess: vitePreprocess(),
+}

example_project/assets/svelte/Lodash.svelte

@@ -6,7 +6,7 @@
     }
 
     let {unordered}: Props = $props()
-    let ordered = _.sortBy(unordered)
+    let ordered = $derived(_.sortBy(unordered))
 </script>
 
 <h1 class="text-center text-2xl font-light my-4">Lodash Demo</h1>
@@ -18,13 +18,17 @@
         <div class="grid grid-cols-1 sm:grid-cols-2 gap-4">
             <div class="flex flex-col gap-1">
                 <span class="text-xs text-base-content/50 font-medium">Unordered</span>
-                <pre data-testid="lodash-unordered" class="font-mono text-sm bg-base-200/80 text-base-content p-3 rounded-lg border border-base-300/50"><code
+                <pre
+                    data-testid="lodash-unordered"
+                    class="font-mono text-sm bg-base-200/80 text-base-content p-3 rounded-lg border border-base-300/50"><code
                         >[{unordered.join(", ")}]</code
                     ></pre>
             </div>
             <div class="flex flex-col gap-1">
                 <span class="text-xs text-base-content/50 font-medium">Ordered</span>
-                <pre data-testid="lodash-ordered" class="font-mono text-sm bg-base-200/80 text-base-content p-3 rounded-lg border border-base-300/50"><code
+                <pre
+                    data-testid="lodash-ordered"
+                    class="font-mono text-sm bg-base-200/80 text-base-content p-3 rounded-lg border border-base-300/50"><code
                         >[{ordered.join(", ")}]</code
                     ></pre>
             </div>

example_project/config/runtime.exs

@@ -49,7 +49,7 @@ if config_env() == :prod do
   port = String.to_integer(System.get_env("PORT") || "4000")
 
   config :example, ExampleWeb.Endpoint,
-    url: [host: host, port: 443, scheme: "https"],
+    url: [host: host, port: port, scheme: System.get_env("PHX_SCHEME", "https")],
     http: [
       # Enable IPv6 and bind on all interfaces.
       # Set it to  {0, 0, 0, 0, 0, 0, 0, 1} for local network only access.

example_project/lib/example_web/endpoint.ex

@@ -19,6 +19,16 @@ defmodule ExampleWeb.Endpoint do
   # In test, prevent caching of assets so E2E always loads the latest app.js after mix assets.js
   if Mix.env() == :test do
     plug :no_cache_assets
+
+    defp no_cache_assets(conn, _opts) do
+      Plug.Conn.register_before_send(conn, fn c ->
+        if String.starts_with?(c.request_path, "/assets/") do
+          Plug.Conn.put_resp_header(c, "cache-control", "no-store, no-cache, must-revalidate")
+        else
+          c
+        end
+      end)
+    end
   end
 
   # Serve at "/" the static files from "priv/static" directory.
@@ -57,13 +67,5 @@ defmodule ExampleWeb.Endpoint do
   plug Plug.Session, @session_options
   plug ExampleWeb.Router
 
-  defp no_cache_assets(conn, _opts) do
-    Plug.Conn.register_before_send(conn, fn c ->
-      if String.starts_with?(c.request_path, "/assets/") do
-        Plug.Conn.put_resp_header(c, "cache-control", "no-store, no-cache, must-revalidate")
-      else
-        c
-      end
-    end)
-  end
+
 end

example_project/package-lock.json

@@ -4,12 +4,14 @@
   "requires": true,
   "packages": {
     "": {
+      "name": "example_project",
       "dependencies": {
         "@editorjs/editorjs": "^2.31.0",
         "@editorjs/header": "^2.8.8",
         "@editorjs/list": "^2.0.2",
         "dynamic-marquee": "^2.6.5",
         "live_svelte": "file:../",
+        "lodash": "^4.17.21",
         "phoenix": "file:./deps/phoenix",
         "phoenix_html": "file:./deps/phoenix_html",
         "phoenix_live_view": "file:./deps/phoenix_live_view",
@@ -29,7 +31,7 @@
       }
     },
     "..": {
-      "version": "0.17.4",
+      "version": "0.18.0",
       "license": "MIT",
       "devDependencies": {
         "prettier": "^3.8.1",
@@ -13228,7 +13230,6 @@
       "version": "4.17.23",
       "resolved": "https://registry.npmjs.org/lodash/-/lodash-4.17.23.tgz",
       "integrity": "sha512-LgVTMpQtIopCi79SJeDiP0TfWi5CNEc/L/aRdTh3yIvmZXTnheWpKjSZhnvMl8iXbC1tFg9gdHHDMLoV7CnG+w==",
-      "dev": true,
       "license": "MIT"
     },
     "node_modules/lodash.debounce": {

example_project/package.json

@@ -2,6 +2,7 @@
   "type": "module",
   "dependencies": {
     "@editorjs/editorjs": "^2.31.0",
+    "lodash": "^4.17.21",
     "@editorjs/header": "^2.8.8",
     "@editorjs/list": "^2.0.2",
     "dynamic-marquee": "^2.6.5",

example_project/priv/static/.vite/manifest.json

@@ -18,12 +18,12 @@
     "isDynamicEntry": true
   },
   "css/app.css": {
-    "file": "assets/app-DB4pPYVV.css",
+    "file": "assets/app-DpQuHjcm.css",
     "src": "css/app.css",
     "isEntry": true
   },
   "js/app.js": {
-    "file": "assets/app-LUJMG2_W.js",
+    "file": "assets/app-_huAwfxm.js",
     "name": "app",
     "src": "js/app.js",
     "isEntry": true,

lib/mix/tasks/live_svelte.install.ex

@@ -367,6 +367,7 @@ defmodule Mix.Tasks.LiveSvelte.Install do
         "assets/svelte/.gitignore",
         "# Ignore auto-generated Svelte files by ~V sigil\n_build/"
       )
+      |> Igniter.create_new_file("assets/svelte.config.js", svelte_config_content())
       |> Igniter.create_new_file("assets/svelte/SvelteDemo.svelte", demo_svelte_content())
       |> Igniter.create_new_file(
         "lib/#{web_folder}/svelte_demo_live.ex",
@@ -503,6 +504,16 @@ defmodule Mix.Tasks.LiveSvelte.Install do
 
     # Content helpers
 
+    defp svelte_config_content do
+      """
+      import { vitePreprocess } from "@sveltejs/vite-plugin-svelte"
+
+      export default {
+        preprocess: vitePreprocess(),
+      }
+      """
+    end
+
     defp server_js_content do
       """
       import { getRender } from "live_svelte"