subcomponent 0.1.0 → 0.1.2

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 0e45581419c661089fedb66b9c803a42f9edc3554585c24ddc0b8fa97e26a448
-  data.tar.gz: e5863ed447bf64a00b37c50afb8d22ae68020ef3c6887f0872edcf1d42c0d463
+  metadata.gz: e1acf4e16006254b88c0d331759b3e3e76bd796cebba5972482ad44f9d3fe496
+  data.tar.gz: e752615b8bfe738fca66a171caed47c29ae1282082b3a86fb956dce2fa10a38c
 SHA512:
-  metadata.gz: ca8c18a231cfc387a1545e5c894903890396365d1776d6432c2d7aa702ec0e07b4e7979934476fc1b77099837349b407a5fac4888dcba4fdcd65b30c3e598d24
-  data.tar.gz: d8644df39b061f70c0213449f6b34e9b0f94f7cd69f8ecaa5b61388ca6cd9888e3e09e038b6b35c2631c5472b9f5dcaa66ffb8a399a356685623199b37fc83e1
+  metadata.gz: f2016e54ba1067df0a3ca62ed242d6b2cb9b62e10b7287066429571dc8950cf0c6b85dd1de49a97a0bad0e201634d9cfe9122759e7ed16774c491da4dc93491a
+  data.tar.gz: 6a3f6d01dad03800859a71287d9a376d8f9a92998f69625ae47607942dd831ecf39698a4b5f021adbec54412f757c4fbd8f4f19d4c6c11075d4759fbb62683da

data/README.md

@@ -76,6 +76,63 @@ This will render:
 </div>
 ```
 
+### Example Component with multiple Subcomponents
+
+Create a card component in `app/views/components/card/_card.html.erb`:
+```erb
+<div>
+  <% this.copy_components :links, :mobile_links %>
+  <%= this.render :links %>
+  <%= this.render :mobile_links %>
+  <%= this.text || this.yield %>
+</div>
+```
+
+Create the link subcomponent in `app/views/components/card/_link.html.erb`:
+```erb
+<a class="desktop" href="<%= this.url %>">
+  <%= this.index %>: <%= this.text %>
+</a>
+```
+
+Create the mobile_link subcomponent in `app/views/components/card/_mobile_link.html.erb`:
+```erb
+<a class="mobile" href="<%= this.url %>">
+  <%= this.index %>: <%= this.text %>
+</a>
+```
+
+You can use `this.render_all` to render multiple subcomponent. The subcomponent will have access
+to the locals and subcomponents passed in the view. The components `index` method will be set.
+
+To use the component in a view:
+```erb
+<%= component :card do |c| %>
+  <%= c.link text: 'Card Link 1', url: '#" %>
+  <%= c.link text: 'Card Link 2', url: '#" %>
+  <p>Card Text</p>
+<% end %>
+```
+
+This will render:
+```html
+<div>
+  <a class="desktop" href="#">
+    0: Card Link 1
+  </a>
+  <a class="desktop" href="#">
+    1: Card Link 2
+  </a>
+  <a class="mobile" href="#">
+    0: Card Link 1
+  </a>
+  <a class="mobile" href="#">
+    1: Card Link 2
+  </a>
+  <p>Card Text</p>
+</div>
+```
+
 ### Example Using Locals without method_missing.
 
 In some cases you may want to use a local variable that

data/lib/subcomponent/component.rb

@@ -1,19 +1,35 @@
 class Component
-  attr_accessor :_renderer
-  attr_accessor :_capture
+  attr_accessor :_renderer, :_capture
 
   # Use Component::ComponentHelper to create components.
-  def initialize name, locals, lookup_context, parent, block
+  def initialize(name, locals, lookup_context, parent, block)
     @_name = name
     @_parent = parent
     @_locals = locals
     @_lookup_context = lookup_context
     @_block = block
+    @_index = 0
 
     @_components = {}
     @_building = false
   end
 
+  # :nodoc:
+  def initialize_dup(other)
+    @_name = other._name
+    @_parent = other._parent
+    @_locals = other._locals.dup
+    @_lookup_context = other._lookup_context
+    @_block = other._block
+    @_components = other._components.dup
+    @_building = false
+    @_renderer = other._renderer
+    @_capture = other._capture
+    @_index = 0
+
+    super
+  end
+
   # Specify and use local values or sub-components using method calls.
   #
   # == Locals
@@ -100,9 +116,8 @@ class Component
   #
   def require *local_keys
     missing = local_keys.reject { |k| _locals.key?(k) || _components.key?(k) }
-    if missing.count > 0
-      raise "The #{_name} component requires #{missing.join(", ")} local(s) or component(s)."
-    end
+    raise "The #{_name} component requires #{missing.join(", ")} local(s) or component(s)." if missing.count > 0
+
     nil
   end
 
@@ -116,12 +131,12 @@ class Component
   #
   #   returns: [<Component>, <Component>, ...]
   #
-  def components key
+  def components(key)
     _components[key] || []
   end
 
   # This is used to access locals passed to the component.
-  def local key
+  def local(key)
     _locals[key]
   end
 
@@ -135,13 +150,12 @@ class Component
   #
   #   this.header.render
   #
-  def render symbol = nil
+  def render(symbol = nil)
     if symbol.nil?
-      if _parent.nil?
-        raise "Cannot render a component without a symbol when it has a parent."
-      else
-        return _yield_renderer
-      end
+      raise "Cannot render a component without a symbol when it has a parent." if _parent.nil?
+
+      return _yield_renderer
+
     end
     _components[symbol]&.first&._yield_renderer
   end
@@ -152,8 +166,31 @@ class Component
   #
   # Returns a string of all rednered sub-components.
   #
-  def render_all symbol
-    _components[symbol]&.map(&:_yield_renderer)&.join&.html_safe
+  def render_all(symbol)
+    _components[symbol]&.each_with_index { |e, i| e._index = i }&.map(&:_yield_renderer)&.join&.html_safe
+  end
+
+  # Copy all sub-components from one name to another.
+  # This is useful when you want to render a sub-component using two+ subcomponents
+  #
+  #   this.copy_components :links, :mobile_links
+  #
+  def copy_components(from, to)
+    return if _components[from].nil?
+
+    _components[to] = _components[from].map(&:dup).tap do |comps|
+      comps.each do |comp|
+        comp._name = to
+      end
+    end
+  end
+
+  # This will be set to the index of the component when using `render_all`
+  #
+  # Returns an integer
+  #
+  def index
+    _index
   end
 
   # Yield the block passed to the component.
@@ -180,21 +217,13 @@ class Component
 
   protected
 
-  attr_reader :_name
-  attr_reader :_locals
-  attr_reader :_components
-  attr_reader :_block
-  attr_reader :_parent
-  attr_accessor :_captured
-  attr_reader :_lookup_context
-  attr_accessor :_building
+  attr_accessor :_name, :_captured, :_building, :_index
+  attr_reader :_locals, :_components, :_block, :_parent, :_lookup_context
 
   # :nodoc:
   def _base_name
     on = self
-    until on._parent.nil?
-      on = on._parent
-    end
+    on = on._parent until on._parent.nil?
     on._name
   end
 

data/lib/subcomponent/version.rb

@@ -1,3 +1,3 @@
 module Subcomponent
-  VERSION = "0.1.0"
+  VERSION = '0.1.2'
 end

metadata

@@ -1,14 +1,14 @@
 --- !ruby/object:Gem::Specification
 name: subcomponent
 version: !ruby/object:Gem::Version
-  version: 0.1.0
+  version: 0.1.2
 platform: ruby
 authors:
 - candland
 autorequire:
 bindir: bin
 cert_chain: []
-date: 2023-05-08 00:00:00.000000000 Z
+date: 2024-01-01 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: rails
@@ -62,7 +62,7 @@ required_rubygems_version: !ruby/object:Gem::Requirement
     - !ruby/object:Gem::Version
       version: '0'
 requirements: []
-rubygems_version: 3.3.7
+rubygems_version: 3.3.26
 signing_key:
 specification_version: 4
 summary: Very simple parial based components