subcomponent 0.1.0 → 0.1.1

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 0e45581419c661089fedb66b9c803a42f9edc3554585c24ddc0b8fa97e26a448
-  data.tar.gz: e5863ed447bf64a00b37c50afb8d22ae68020ef3c6887f0872edcf1d42c0d463
+  metadata.gz: c25d8e894e5b6c33b5c57ff245854c4e551cc386a81a0853eb7eb79deab09681
+  data.tar.gz: e77d20a23ae634f2f3327c607d203b61b8093b7d12760b997bd72d6ef1d62118
 SHA512:
-  metadata.gz: ca8c18a231cfc387a1545e5c894903890396365d1776d6432c2d7aa702ec0e07b4e7979934476fc1b77099837349b407a5fac4888dcba4fdcd65b30c3e598d24
-  data.tar.gz: d8644df39b061f70c0213449f6b34e9b0f94f7cd69f8ecaa5b61388ca6cd9888e3e09e038b6b35c2631c5472b9f5dcaa66ffb8a399a356685623199b37fc83e1
+  metadata.gz: b44838794980b5f214465e3f9045eeca9c5b9dec83cf129a913ac76bdf12545f4e9154cdf441fd124e331f81f4b4d6027f2bd94d40ced0e94182af905c098123
+  data.tar.gz: 56b791c3e2dd6760c9e856801ed2129afc56e6d842fb00e43fb84c143d9daf7ad45f1e9dc2ebe52406714f263b3425b6d69d028da4d5ac3392ce910429d3e242

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,29 @@ 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)
+    _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 +215,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.1'
 end

metadata

@@ -1,14 +1,14 @@
 --- !ruby/object:Gem::Specification
 name: subcomponent
 version: !ruby/object:Gem::Version
-  version: 0.1.0
+  version: 0.1.1
 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