Mapping to a dynamically generated Svelte component

[abdelbk]

My question is related to Svelte combined with Rails.

I'm trying to build my application using Svelte based on templates generated by ERB. The reason why I want to do it this way is because I believe that building views with Rails/ERB are easier than relying on the client side (Think of all the Rails helpers like form_for, link_to, etc.).

So, what I'm trying to do is create templates like index.svelte.erb which will be passed to the Inertia resolver through the controller.

Here is a sample :

# Controller
class ApplicationController
  def index
    # Write the content of the ERB template as a svelte file
    File.open('src/to/javascript/Pages/Index.svelte', 'w') do |f|
      f.write(render_to_string('views/application/index.svelte.erb'))
      f.close
    end
  
    render inertia: 'Index'
  end
end

# views/application/index.svelte.erb
<!-- I can add Svelte specific syntax -->
<script>
const name = 'Bob'
</script>
{#if true }
  <p>Hi {name} !</p>
{/if}
<%= form_for(@user) do |f| %>
  <%= f.label :firstname %>
  <%= f.text_field :firstname %>
<% end %>

I can make this example work in development using vite. However, I don't know how this approach can work in production because the generated svelte files are unknown on build time.

I don't know if this discussion should be asked here but I wanted to share this approach because I really find it easier than passing a bunch of data, URLs, etc. directly to the svelte component. I might be biased because I built views using Rails for a long time.

Is this approach achievable ?