CaravelaSvelte (CaravelaSvelte v0.1.0)

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.

Summary

render(assigns)

Deprecated — call svelte/1 instead.

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

svelte(assigns)

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

Deprecated — call svelte/1 instead.

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

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

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.

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