Ruby Components API

[sandstrom]

I find the syntax for writing components that take blocks somewhat confusing.

For future versions, maybe it would be possible to simplify the API somewhat?

I've added an example below:

    # current code (example)
    def heading(&block)
      if @heading
        @heading
      elsif block
        @_heading_content = view_context.capture(&block)
        nil
      else # what is this block for?
        content
        @_heading_content
      end
    end

    # expected code (example)
    def heading(&block)
      if @heading
        @heading
      elsif block
        view_context.capture(&block)
      end
    end

Background

Here is a full example, for more context on how this is used.

<div class='block-logo-cluster-component <%= @css_classes.join(' ') %>'>
  <h5 class='heading'><%= heading %></h5>

  <div class='logos'>
    <% @customer_keys.each do |key| %>
      <div class='logo'>
        <img src='<%= asset_path("assets/customers/#{key}.svg") %>' />
      </div>
    <% end %>
  </div>

  <div class='action'><%= action %></div>
</div>

module Block
  class LogoCluster < Bridgetown::Component
    def initialize(heading:, customer_keys:, css_class: '')
      raise 'Too few customer keys passed' if customer_keys.length < 4

      @heading = heading
      @css_classes = Utils::Misc.array_wrap(css_class)

      @customer_keys = customer_keys.take(8) # max 8 customers
    end

    def heading(&block)
      if @heading
        @heading
      elsif block
        @_heading_content = view_context.capture(&block)
        nil
      else
        content
        @_heading_content
      end
    end

    def action(&block)
      if block
        @_action_content = view_context.capture(&block)
        nil
      else
        content
        @_action_content
      end
    end
  end
end

Invoked like this:

<%= render Block::LogoCluster.new(
  heading: 'Our great product is is trusted by thousands of companies',
  customer_keys: ['worldcom', 'lehman', 'madoff', 'enron'],
) do |c|  %>
  <% c.action do %>
    <a href='#'>Read customer stories</a>
  <% end %>
<% end %>

[jaredcwhite]

@sandstrom You're in luck! New slotted content features are coming with Bridgetown 1.2: https://edge.bridgetownrb.com/docs/template-engines/erb-and-beyond#slotted-content

[sandstrom]

@jaredcwhite Awesome!