Props

To pass props, use the Svelte.props hash in your controller, and then access them as a store with $props.

Additionally, controller instance variables are automatically passed as props, but never override props set with Svelte.props, and are available without an @ symbol in the store.

$ accessors for stores will be going away in Svelte 5.

We are not sure yet how this will impact the props store, but it is likely you will use either props or window.props, and potentially may have to subscribe manually. It is likely we will switch to using the $state rune for Svelte 5, but no decision has been made.

Examples

Controller

def show
  Svelte.props[:user] = User.find_by(username: params[:username])
end

View

<script>
  let name = $props.user.name
  $: mailto = "mailto://" + $props.user.email
</script>

<h1>Hello, {name}</h1>
<a href={mailto}>{$props.user.email}</a>

<style>
  h1 {
    color: red
  }
</style>