Check the WebSocket to see how much data is transferred.
-{greeting}
+This text was rendered by the server before JavaScript loaded.
+Click counter is client-side only (not SSR)
+{JSON.stringify(struct, null, 2)}- Large payloads are patched over the wire. Compare SSR vs no-SSR and watch the WebSocket traffic when removing elements. -
- -+ This component is rendered on the server using NodeJS. The initial HTML includes + the Svelte output before the client-side JavaScript runs. +
+ <.svelte name="SsrDemo" props={%{greeting: @greeting}} socket={@socket} ssr={true} /> +Count: {count}
+ """ +end +``` + +All LiveView assigns are automatically available as props. The template is written to `assets/svelte/_build/MyModule.svelte` at compile time. + +--- + +### `LiveSvelte.Components` + +Auto-generated shorthand component functions based on discovered `.svelte` files. + +```elixir +# In web module html_helpers: +use LiveSvelte.Components + +# In templates โ instead of <.svelte name="Counter" ...>: +<.Counter count={@count} socket={@socket} /> +``` + +`Counter.svelte` โ `<.Counter>`, `forms/UserForm.svelte` โ `<.forms_UserForm>` (slashes converted to underscores). + +--- + +### `LiveSvelte.Test.get_svelte/1,2` + +Inspect Svelte component props from HTML in tests. + +```elixir +import LiveSvelte.Test + +# Get first component in HTML +component = get_svelte(html) + +# Get component by name +component = get_svelte(html, name: "Counter") + +# Get component by DOM id +component = get_svelte(html, id: "Counter-1") + +# Get directly from a LiveView +{:ok, view, _html} = live(conn, "/counter") +component = get_svelte(view, name: "Counter") +``` + +Returns a map with: +- `name` โ component name string +- `id` โ DOM id of the wrapper element +- `props` โ decoded props map (string keys) +- `slots` โ map of slot name โ HTML string +- `ssr` โ boolean, whether SSR was active + +**Example:** +```elixir +{:ok, _view, html} = live(conn, "/counter") +component = get_svelte(html, name: "Counter") +assert component.props["count"] == 0 +``` + +--- + +### `LiveSvelte.Encoder` Protocol + +Protocol for encoding custom structs as JSON props. Implement it directly or use `@derive`: + +```elixir +# Simple derive โ exposes all public fields +@derive LiveSvelte.Encoder +defstruct [:id, :name] + +# Restricted derive โ only expose listed fields +@derive {LiveSvelte.Encoder, only: [:id, :name, :email]} +defstruct [:id, :name, :email, :password_hash] + +# Excluded fields derive +@derive {LiveSvelte.Encoder, except: [:password_hash]} +defstruct [:id, :name, :email, :password_hash] +``` + +Without `@derive`, passing a struct as a prop will raise an error. + +--- + +### `LiveSvelte.Reload` / `vite_assets/0` + +HMR helper for development. Includes the Vite dev server client script. + +```heex + +<%= if Application.get_env(:live_svelte, :ssr_module) == LiveSvelte.SSR.ViteJS do %> +Count: {count}
+ +Count is {count}
+ """ +end +``` + +The sigil writes the template to `assets/svelte/_build/` at compile time and mounts it like any other component. All LiveView assigns are automatically available as props. + +> #### Svelte 5 Syntax Required {: .warning} +> +> Always use Svelte 5 runes syntax. Do NOT use Svelte 4 patterns: +> +> | โ Svelte 4 | โ Svelte 5 | +> |-------------|-------------| +> | `export let count` | `let { count } = $props()` | +> | `let x = 0` (reactive) | `let x = $state(0)` | +> | `$: doubled = x * 2` | `let doubled = $derived(x * 2)` | +> | ` + + + +{#each filtered as item} +{field("email").error}
+{/if} +``` + +## Nested Fields + +Access nested fields with dot notation: + +```svelte + + +``` + +## Dynamic Arrays with `fieldArray()` + +For `embeds_many` or `has_many` with nested forms: + +```svelte + + +{#each skills.fields as skillField, i} +{item.name}
+{entry.client_name}
+ + + + + + {#each entry.errors as error} +{error}
+ {/each} + + +