Module: SvelteOnRails::ViewHelpers

Defined in:
lib/svelte_on_rails/view_helpers.rb

Instance Method Summary collapse

Instance Method Details

#svelte_component(filename, props = {}) ⇒ Object 



4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
 
# File 'lib/svelte_on_rails/view_helpers.rb', line 4

def svelte_component(filename, props = {})

  unless filename.match(/[a-z|A-Z][a-z|A-Z|0-9]+$/)
    raise "FileName/TagName must be in camelCase format and without .svelte suffix. It must not start with a number."
  end

  render_server_side = if props.key?(:render_server_side)
                         props.delete(:render_server_side)
                       else
                         SvelteOnRails::Configuration.instance.render_server_side
                       end

  unless [true, false, :auto].include?(render_server_side)
    raise "Only true, false or auto are allowed for the argument #render_server_side"
  end

  hydrate = if props.key?(:hydrate)
              props[:hydrate]
            else
              true
            end
  props.delete(:hydrate)

  html_class = props.delete(:class).to_s + " svelte-component"

  is_initial_request = request.headers['X-Turbo-Request-ID'].blank?



  # render

  if render_server_side == true || (render_server_side == :auto && is_initial_request)

    # render server side

    start_time = Time.now
    sv = SvelteOnRails::RenderServerSide.new(filename +  '.svelte')
    sv.compile_if_changes
    res = sv.render_compiled_file(props)
    time = Time.now - start_time
    Rails.logger.info "  Rendered #{filename}.svelte server-side: #{time.round(3)}ms"

    data = { props: props }

    data[:not_hydrated_svelte_component] = filename if hydrate

    content_tag(:div, class: html_class, data: data) do
      r = content_tag(:style, res['css'], type: 'text/css')
      r << res['html'].html_safe
      #res['html'].html_safe
    end

  else

    # render for custom-element

    tag_name = filename.gsub('/','--').underscore.gsub('_', '-') + '-svelte'

    prp = []
    props.each do |k, v|
      _v = if v.is_a?(Array) || v.is_a?(Hash)
             v.to_json
           else
             v.to_s
           end
      prp.push("#{k}='#{_v}'")
    end
    if html_class
      prp.push("class='#{html_class}'")
    end

    tag = "<#{tag_name} #{prp.join(' ')}></#{tag_name}>"

    Rails.logger.info "  Rendered Tag for Svelte custom element: «#{tag}»"

    tag.html_safe

  end
end