evc_rails 0.2.2 → 0.3.0

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: fb8d4d59a3526f01f08e3c152ff5abe083e1a2bf1e66ab929db733356b56c822
-  data.tar.gz: 07c8c5688a9ad4ddb78f34ca174f478e9103b656c09223c86aed522746b0b299
+  metadata.gz: 1a155f85c540ca32801ef3033f92abdc7912a3ff5c533faa19f92b00c774968b
+  data.tar.gz: 79de2d1b2b3557009c0d9e98f5ade01418ad7e49b61567c2056898ddfe537ea9
 SHA512:
-  metadata.gz: 6e429ae91cf3b0e3ac7b47001e164e65f6c4c6bd45f6c11f4258bb0a3c7cf77fa04594a4f493b887f434809ff11174996b09099273ac1bfac50897b002489158
-  data.tar.gz: 57c5fb478a987d55dd24e22afda9198f9af0b11056ac3ab2bbf66a52ec420251cae33cfa596caa5074015e241cd5d6754b2f95a04c46ba1951c0190694f92e64
+  metadata.gz: 1039a2e12cc8f11c8855dd0bafd2abd9de98e61a87f9e2c49fe27f7d40a497d30d6f1b05d4da7bfb8b7eede13b75c33ab67df4cb48fe8ab8de4d825284d52388
+  data.tar.gz: c73e72e59cd863f513bf07e60675081c3db3255b77090da206ae8652a8e6c15f1b6079641fd1e27b5dbe0b95e71ae45d80a7975b0af2479b5d4e802b9b102a0d

data/CHANGELOG.md

@@ -0,0 +1,113 @@
+# Changelog
+
+All notable changes to this project will be documented in this file.
+
+The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
+and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
+
+## [0.3.0] - 2024-12-19
+
+### Added
+
+- **Enhanced slot nesting support**: Improved handling of deeply nested slots within components
+- **Self-closing slot optimization**: Self-closing slots now render as method calls without blocks for better performance
+- **Stack-based nesting logic**: More robust handling of complex nested component and slot structures
+
+### Changed
+
+- **Slot variable naming**: Improved slot variable naming by stripping `with_` prefix for cleaner block variables
+- **Nested slot context**: Enhanced logic to ensure slots use the nearest component variable unless directly nested inside another slot
+
+### Fixed
+
+- **Block variable syntax**: Fixed Ruby block variable syntax to use `do |var|` instead of `|var| do`
+- **Block variable yielding**: Corrected block variable yielding for complex nested structures
+- **Slot method compatibility**: Ensured proper compatibility with ViewComponent's generated slot methods
+- **Test suite improvements**: Updated all tests to reflect the new behavior and added comprehensive test coverage
+
+## [0.2.3] - 2024-12-19
+
+### Changed
+
+- **Block variable yielding with `as`**: The block variable is now always yielded if the `as` attribute is present on a component tag, even if no `<With...>` slot tags are used inside the block. This makes advanced usage (such as calling plural slot methods directly) more ergonomic and predictable.
+- **Documentation improvements**: Clarified the need for the `as` attribute when using plural slot methods with block variables, and improved wording for advanced usage in the README.
+- **Test suite**: Added and updated tests to verify block variable yielding with `as` and to match the new behavior.
+
+## [0.2.2] - 2024-12-19
+
+### Added
+
+- **Boolean attribute shorthand**: Support for HTML-style boolean attributes without values
+  - `<Button disabled required />` now converts to `disabled: true, required: true`
+  - Makes templates more concise and readable for boolean parameters
+  - Works with any boolean parameter your component defines
+
+### Changed
+
+- Updated test suite to use new snake_case variable naming convention
+- Improved block variable syntax consistency across all examples
+
+## [0.2.1] - 2024-12-19
+
+### Added
+
+- **Custom block variable naming**: Support for `as` attribute to customize yielded variable names
+  - `<Card as="my_card">` yields `|my_card|` instead of `|card|`
+  - Helps avoid variable name collisions in nested components
+  - Useful for accessing parent component context from nested components
+
+### Changed
+
+- **Block variable naming**: Components now yield snake_case variable names by default
+  - `<Card>` now yields `|card|` instead of `|c|`
+  - More descriptive and consistent with Ruby naming conventions
+  - Only yields variables when slots are present in the component
+
+### Fixed
+
+- Improved slot method naming to match ViewComponent conventions
+  - `<WithHeader>` maps to `with_header` method (not `header`)
+  - `<WithItem>` maps to `with_item` method for both `renders_one` and `renders_many`
+  - Ensures compatibility with ViewComponent's generated method names
+
+## [0.2.0] - 2024-12-19
+
+### Added
+
+- **Slot support**: Full support for ViewComponent slots with `<With...>` syntax
+  - `<WithHeader>` for `renders_one :header`
+  - `<WithItem>` for `renders_many :items` (uses singular method name)
+  - Support for slot attributes and Ruby expressions
+  - Automatic block variable yielding when slots are present
+- **Namespaced component support**: Components in subdirectories
+  - `<UI::Button />` maps to `app/components/ui/button_component.rb`
+  - `<Forms::Fields::TextField />` for deeply nested components
+- **Enhanced error messages**: Line numbers and column positions for better debugging
+- **Production caching**: Automatic template caching using Rails.cache
+- **Cache management**: Methods to clear and inspect template cache
+
+### Changed
+
+- **Template handler architecture**: Improved performance and reliability
+- **Error handling**: More descriptive error messages with context
+
+## [0.1.0] - 2024-12-19
+
+### Added
+
+- **Initial release**: Basic JSX-like syntax for ViewComponent
+- **Self-closing components**: `<Button />` syntax
+- **Block components**: `<Card>content</Card>` syntax
+- **Attribute support**: String, Ruby expressions, and multiple attributes
+- **ERB integration**: Full support for ERB tags and Ruby expressions
+- **Drop-in replacement**: Works as a replacement for `.erb` files
+- **Basic caching**: Template compilation caching for performance
+
+## Version History Notes
+
+- **0.1.0**: Initial release with core functionality
+- **0.2.0**: Major feature addition with slots and namespaced components
+- **0.2.1**: Improved variable naming and slot method compatibility
+- **0.2.2**: Added boolean attribute shorthand for cleaner templates
+- **0.2.3**: Added block variable yielding with `as` attribute for more ergonomic advanced usage
+- **0.3.0**: Enhanced slot nesting support and improved block variable handling for complex component structures

data/README.md

@@ -42,10 +42,11 @@ No component modifications required - just install and enjoy easier syntax!
 - **Block components**: `<Container>content</Container>`
 - **Attributes**: String, Ruby expressions, and multiple attributes
 - **Namespaced components**: `<UI::Button />`, `<Forms::Fields::TextField />`
-- **Slot support**: `<Card::Header>...</Card::Header>` with `renders_one` and `renders_many`
-- **Deep nesting**: Complex component hierarchies
+- **Advanced slot support**: `<WithHeader>...</WithHeader>` with `renders_one` and `renders_many`, including complex nesting
+- **Deep nesting**: Complex component hierarchies with proper block variable handling
 - **Production-ready caching** with Rails.cache integration
 - **Better error messages** with line numbers and column positions
+- **Boolean attribute shorthand** for cleaner templates
 
 ## Installation
 
@@ -230,6 +231,52 @@ Becomes:
 <% end %>
 ```
 
+#### Self-Closing Slots
+
+You can also use self-closing slot tags when you don't need to pass content:
+
+```erb
+<Card>
+  <WithHeader />
+  <WithBody>
+    <p>This is the body content.</p>
+  </WithBody>
+</Card>
+```
+
+Becomes:
+
+```erb
+<%= render CardComponent.new do |card| %>
+  <% card.with_header %>
+  <% card.with_body do %>
+    <p>This is the body content.</p>
+  <% end %>
+<% end %>
+```
+
+#### Slot Attributes with Ruby Expressions
+
+Slots can accept attributes and Ruby expressions:
+
+```erb
+<Card>
+  <WithHeader user={@current_user} class="welcome-header">
+    Welcome, <%= @current_user.name %>
+  </WithHeader>
+</Card>
+```
+
+Becomes:
+
+```erb
+<%= render CardComponent.new do |card| %>
+  <% card.with_header(user: @current_user, class: "welcome-header") do %>
+    Welcome, <%= @current_user.name %>
+  <% end %>
+<% end %>
+```
+
 #### Multiple Slots (`renders_many`)
 
 ```ruby
@@ -298,6 +345,70 @@ end
 
 This generates distinct variables, `outer_card` and `inner_card`, allowing you to access the context of each component without collision.
 
+#### Passing a Collection to a Plural Slot (Array Notation)
+
+You can also pass an array directly to a plural slot method using embedded Ruby inside your EVC template. For this advanced use case, block variables are not inferred automatically and it is necessary to define block variables with the `as` attribute.
+
+```erb
+<Navigation as="navigation">
+  <% navigation.with_links([
+    { name: "Home", href: "/" },
+    { name: "Pricing", href: "/pricing" },
+    { name: "Sign Up", href: "/sign-up" }
+  ]) %>
+</Navigation>
+```
+
+This is equivalent to the ERB version:
+
+```erb
+<%= render NavigationComponent.new do |navigation| %>
+  <% navigation.with_links([
+    { name: "Home", href: "/" },
+    { name: "Pricing", href: "/pricing" },
+    { name: "Sign Up", href: "/sign-up" }
+  ]) %>
+<% end %>
+```
+
+You can use this approach for any plural slot method generated by `renders_many`. The block variable (e.g., `navigation`) is always available inside the component block when you use the `as` attribute, even if there are no `<With...>` slot tags present.
+
+#### Complex Nested Slot Structures
+
+EVC handles complex nested slot structures with proper block variable scoping:
+
+```erb
+<Navigation>
+  <WithLink href={learning_path} text="Learning Path" />
+  <WithLink href={courses_path} text="All Courses" />
+  <WithLink text="Reports">
+    <WithSublink href={reports_users_path} text="Users" />
+    <WithSublink href={reports_activity_path} text="Activity" />
+  </WithLink>
+  <WithFooter>
+    <div>Footer content</div>
+  </WithFooter>
+</Navigation>
+```
+
+Becomes:
+
+```erb
+<%= render NavigationComponent.new do |navigation| %>
+  <% navigation.with_link(href: learning_path, text: "Learning Path") %>
+  <% navigation.with_link(href: courses_path, text: "All Courses") %>
+  <% navigation.with_link(text: "Reports") do |link| %>
+    <% link.with_sublink(href: reports_users_path, text: "Users") %>
+    <% link.with_sublink(href: reports_activity_path, text: "Activity") %>
+  <% end %>
+  <% navigation.with_footer do %>
+    <div>Footer content</div>
+  <% end %>
+<% end %>
+```
+
+This demonstrates how EVC properly handles nested slots with correct block variable scoping - the inner `WithSublink` slots use the `link` variable from their parent `WithLink` slot.
+
 ### Mixed Content
 
 You can mix regular HTML, ERB, and component tags:

data/lib/evc_rails/template_handler.rb

@@ -113,6 +113,7 @@ module EvcRails
 
             # Determine if this is a slot (e.g., WithHeader, WithPost)
             parent_component = stack.reverse.find { |item| item[4] == :component }
+            parent_slot_index = stack.rindex { |item| item[4] == :slot }
             is_slot = false
             slot_name = nil
 
@@ -121,15 +122,22 @@ module EvcRails
               # Convert CamelCase slot name to snake_case
               slot_name = tag_name[4..].gsub(/([A-Z]+)([A-Z][a-z])/, '\1_\2').gsub(/([a-z\d])([A-Z])/, '\1_\2').downcase
               parent_component[6] = true # Mark parent as having a slot
+              # If this slot is nested inside another slot, mark the parent slot as having nested slots
+              stack[parent_slot_index][6] = true if parent_slot_index
             end
 
             if is_self_closing
               if is_slot
-                parent_variable = parent_component[8]
+                # For self-closing slots, use the most recent slot variable if present, otherwise the component variable
+                parent_variable = if stack.last && stack.last[4] == :slot
+                                    stack.last[8]
+                                  else
+                                    parent_component[8]
+                                  end
                 result << if param_str.empty?
-                            "<% #{parent_variable}.with_#{slot_name} do %><% end %>"
+                            "<% #{parent_variable}.with_#{slot_name} %>"
                           else
-                            "<% #{parent_variable}.with_#{slot_name}(#{param_str}) do %><% end %>"
+                            "<% #{parent_variable}.with_#{slot_name}(#{param_str}) %>"
                           end
               else
                 component_class = "#{tag_name}Component"
@@ -140,8 +148,20 @@ module EvcRails
                           end
               end
             elsif is_slot
-              parent_variable = parent_component[8]
-              stack << [tag_name, nil, param_str, result.length, :slot, slot_name, false, match.begin(0), nil]
+              # For block slots, determine the parent variable
+              if stack.last && stack.last[4] == :slot
+                # The most recent stack entry is a slot; use its variable
+                parent_variable = stack.last[8]
+                # Mark the parent slot as having nested slots
+                stack.last[6] = true
+              else
+                # Otherwise, use the nearest component variable
+                parent_variable = parent_component[8]
+              end
+              # Generate a variable name for this slot (strip 'with_' prefix)
+              slot_variable_name = component_variable_name(tag_name.sub(/^With/, ""))
+              stack << [tag_name, nil, param_str, result.length, :slot, slot_name, false, match.begin(0),
+                        slot_variable_name]
               result << if param_str.empty?
                           "<% #{parent_variable}.with_#{slot_name} do %>"
                         else
@@ -150,8 +170,9 @@ module EvcRails
             else
               component_class = "#{tag_name}Component"
               variable_name = as_variable || component_variable_name(tag_name)
+              force_block_variable = !as_variable.nil?
               stack << [tag_name, component_class, param_str, result.length, :component, nil, false, match.begin(0),
-                        variable_name]
+                        variable_name, force_block_variable]
               result << if param_str.empty?
                           "<%= render #{component_class}.new do %>"
                         else
@@ -188,23 +209,32 @@ module EvcRails
             tag_type = open_tag_data[4]
 
             if tag_type == :component
-              _tag_name, component_class, param_str, start_pos, _type, _slot_name, slot_used, _open_pos, variable_name = open_tag_data
+              _tag_name, component_class, param_str, start_pos, _type, _slot_name, slot_used, _open_pos, variable_name, force_block_variable = open_tag_data
 
-              # Patch in |variable_name| for component if a slot was used
-              if slot_used
+              # Patch in |variable_name| for component if a slot was used or as_variable was present
+              if slot_used || force_block_variable
                 # More robustly find the end of the `do` block to insert the variable.
                 # This avoids faulty regex matching on complex parameters.
                 relevant_part = result[start_pos..-1]
                 match_for_insertion = /( do)( %>)/.match(relevant_part)
                 if match_for_insertion
-                  # Insert the variable name just before the ` do`
-                  insertion_point = start_pos + match_for_insertion.begin(1)
+                  # Insert the variable name just after the ` do`
+                  insertion_point = start_pos + match_for_insertion.begin(1) + match_for_insertion[1].length
                   result.insert(insertion_point, " |#{variable_name}|")
                 end
               end
 
               result << "<% end %>"
             else # It's a slot
+              _tag_name, _component_class, param_str, start_pos, _type, _slot_name, has_nested_slots, _open_pos, slot_variable_name = open_tag_data
+              if has_nested_slots
+                relevant_part = result[start_pos..-1]
+                match_for_insertion = /( do)( %>)/.match(relevant_part)
+                if match_for_insertion
+                  insertion_point = start_pos + match_for_insertion.begin(1) + match_for_insertion[1].length
+                  result.insert(insertion_point, " |#{slot_variable_name}|")
+                end
+              end
               result << "<% end %>"
             end
 

data/lib/evc_rails/version.rb

@@ -1,5 +1,5 @@
 # frozen_string_literal: true
 
 module EvcRails
-  VERSION = "0.2.2"
+  VERSION = "0.3.0"
 end

metadata

@@ -1,7 +1,7 @@
 --- !ruby/object:Gem::Specification
 name: evc_rails
 version: !ruby/object:Gem::Version
-  version: 0.2.2
+  version: 0.3.0
 platform: ruby
 authors:
 - scttymn
@@ -77,6 +77,7 @@ extensions: []
 extra_rdoc_files: []
 files:
 - ".rubocop.yml"
+- CHANGELOG.md
 - LICENSE.txt
 - README.md
 - Rakefile