#svelte

<%= svelte 'HelloWorld', title: 'Hello World', wrapper_html: {}, options: {} %>

Arguments

• Component Path (1. Argument, String, required)
  • Path to component (without .svelte), relative to configured components_folder (e.g., path/to/MyComponent).
• props (second Argument, Hash, optional)
  • Parsed to Svelte and available as $props there.
• html (Hash, optional)
  • options for the HTML tag that wrapps the svelte-component
• options (Hash, optional):
  • ssr (Boolean or :auto): Enables server-side rendering. :auto triggers SSR only on initial request (detected via configured header, e.g., X-Turbo-Request-ID for Turbo).
  • hydrate (Boolean): Enables client-side hydration.
  • debug (Boolean): Enables debug mode.
  • cached (Boolean)
  • cache_key (String, Array or ActiveRecord-object): Custom cache key (optional).
  • expires_in (Time): Cache duration (e.g., 8.hours).

SSR

• Renders component server-side if ssr: true.
• When set to :auto it only renders on initial request, if the skip_ssr_header is set and working together with turbo or a similar framework.
• Otherwise it renders a empty tag that will be hydrated on the client side.

Caching

When use_caching is set to true in config/svelte_on_rails.yml, it caches the rendered Svelte component, otherwise it renders it on every request. This can be overridden by passing options.

When active, the redis gem is required.

Cache Key

Example: svelte-on-rails:development:HelloWorld.svelte-1xq5tnu-User1:fscyhz-18bm76a-j4k6FGH

Composed of:

• Namespace (svelte-on-rails, configurable)
• Environment (e.g., development)
• Component filename
• Checksum of component file path
• Custom cache_key (if provided)
• Checksum of file modification timestamp
• Checksum of props
• Checksum of arguments

Global Translations

Global translations can be configured that are always transferred to the output. Check: configuration/global_translations