# `CaravelaSvelte`
[🔗](https://github.com/rsousacode/caravela_svelte/blob/v0.1.0/lib/caravela_svelte.ex#L1)

CaravelaSvelte — Svelte + Phoenix with pluggable render modes.

The `svelte/1` function component is the primary entry point; it
dispatches assign preparation to the configured
`CaravelaSvelte.Renderer` implementation (default
`CaravelaSvelte.Live`) and emits the HEEx output.

Phase B.1 ships the `:live` renderer only. Phase B.2 adds
`CaravelaSvelte.Rest` (Inertia-style HTTP transport) and
`CaravelaSvelte.svelte/1` gains mode-aware dispatch.

This module is a fork of `live_svelte` by Wout De Puysseleir —
see `NOTICE.md` for attribution.

# `render`

Deprecated — call `svelte/1` instead.

# `render`

Render a Svelte component as a REST (HTTP-transport) response.
Wraps `CaravelaSvelte.Rest.render/4`.

Controllers use this to serve Inertia-style pages:

    def index(conn, _params) do
      CaravelaSvelte.render(conn, "BookIndex", %{books: list_books()})
    end

See `CaravelaSvelte.Rest` for options.

# `svelte`

Renders a Svelte component on the server. Dispatches prep to the
configured `CaravelaSvelte.Renderer`.

## Attributes

* `props` (`:map`) - Props to pass to the Svelte component. Defaults to `%{}`. Examples include `%{foo: "bar"}`, `%{foo: "bar", baz: 1}`, and `%{list: [], baz: 1, qux: %{a: 1, b: 2}}`.
* `name` (`:string`) (required) - Name of the Svelte component. Examples include `"YourComponent"`, and `"directory/Example"`.
* `id` (`:string`) - Optional stable DOM id override. Auto-generated from the component name and props by default. Only needed when auto-detection is insufficient (e.g. two loops with the same component name). Defaults to `nil`.
* `key` (`:any`) - Identity key for stable DOM IDs in loops. When set, the DOM id becomes `name-key`. When not set, CaravelaSvelte auto-detects identity from props (id, key, index, idx keys). Defaults to `nil`.
* `class` (`:string`) - Class to apply to the Svelte component. Defaults to `nil`. Examples include `"my-class"`, and `"my-class another-class"`.
* `ssr` (`:boolean`) - Whether to render the component via NodeJS on the server. Defaults to `true`. Examples include `true`, and `false`.
* `socket` (`:map`) - LiveView socket, only needed when ssr: true. Defaults to `nil`.
* `diff` (`:boolean`) - When true (and config enable_props_diff is true), only changed props are sent on update. Set to false to always send full props. Defaults to `true`.
## Slots

* `inner_block` - Inner block of the Svelte component.
* `loading` - LiveView rendered markup to show while the component is loading client-side.

---

*Consult [api-reference.md](api-reference.md) for complete listing*