evc_rails 0.1.2 → 0.1.4

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 9b8286c7a2de504f1e3320186e144fbeadd0c36cf2b0e56b7c2a677994d3ff80
-  data.tar.gz: a03f8ac74485749cf933bab0d0fb3abe16e042c41ba065fd6f259d2379a58225
+  metadata.gz: e15aa81852a8394bcc2a904cff923f3d5a5f588c618a2c0c6112f33203b0bd2c
+  data.tar.gz: cdd1c962213f4c2a6593a522ac2aee9cc793858f4759c218242169a26fd40ace
 SHA512:
-  metadata.gz: 9f1256d0f4b2d3ae9d9ac59182dab66c32898f6294e739d23819fc8c590e935f8c2ac5f27a3d5622e50aa5e4657af7618fe8b6bfe97da5baaacb0b296a3d0de3
-  data.tar.gz: f6284a6a2d33cbbffa09485895cfbd8b5a9b680073565281b95bdbf32caeb599254daece8fe837e13e1c2f96f3eb4f6b2731be6e1a6ea75cb69a2eb5b07399dc
+  metadata.gz: 91a5a791151b6e2290dc3a20a8e95980a0821bf2526314a3b07724e85dda06f11a6149bfd9d808eb4af9e67da90d80616ddb9fa799d2c61ebc0e908e4cb627ce
+  data.tar.gz: 0bc11c9d4026d5357b5d86089884eff7d30bf82a66823ec164aa3600cbf2ca6774c835c18175a132225acd9204cd95879f76a5698fbc80e355a46ba1ac771e85

data/README.md

@@ -1,201 +1,316 @@
-# EvcRails
+# EVC Rails
 
-EvcRails is a Rails gem that introduces a custom .evc template handler, allowing you to define your Rails View Components using a concise, HTML-like PascalCase tag syntax, reminiscent of React or other modern component-based UI frameworks. This gem seamlessly integrates your custom tags with Rails View Components, enabling a more declarative and readable approach to building UIs in Rails.
+Embedded ViewComponents (EVC) is a Rails template handler that brings JSX-like syntax to ViewComponent, allowing you to write PascalCase component tags directly in your `.evc` templates.
 
-## Features
+## Drop-in ERB Replacement
+
+EVC templates are a **drop-in replacement** for `.erb` files. All ERB features are fully supported:
+
+- `<%= %>` and `<% %>` tags
+- Ruby expressions and control flow
+- Helper methods (`link_to`, `form_with`, etc.)
+- Partials (`<%= render 'partial' %>`)
+- Layouts and content_for blocks
 
-PascalCase Component Tags: Define and use your View Components with <MyComponent> or self-closing <MyComponent /> syntax directly in your .evc templates.
+The template handler processes EVC syntax first, then passes the result to the standard ERB handler for final rendering.
 
-Namespaced Components: Support for namespaced components like <Ui::Button /> or <Forms::Input /> for better organization.
+## Works with Existing ViewComponents
 
-Attribute Handling: Pass attributes to your components using standard HTML-like key="value", key='value', or Ruby expressions key={@variable}.
+EVC works seamlessly with **any ViewComponents you already have** in `app/components`. Simply install the gem and start using easier syntax:
 
-Content Blocks: Components can accept content blocks (<MyComponent>content</MyComponent>) which are passed to the View Component via a block.
+```ruby
+# Your existing ViewComponent (no changes needed)
+class ButtonComponent < ViewComponent::Base
+  def initialize(variant: "default", size: "md")
+    @variant = variant
+    @size = size
+  end
+end
+```
 
-Automatic Component Resolution: Automatically appends "Component" to your tag name if it's not already present (e.g., <Button> resolves to ButtonComponent, <Ui::Button> resolves to Ui::ButtonComponent).
+```erb
+<!-- Now you can use it with EVC syntax -->
+<Button variant="primary" size="lg">Click me</Button>
+```
 
-Performance Optimized: Includes in-memory caching of compiled templates and memoization of component class lookups for efficient rendering in production.
+No component modifications required - just install and enjoy easier syntax!
+
+## Features
+
+- **JSX-like syntax** for ViewComponent tags
+- **Self-closing components**: `<Button />`
+- **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
+- **Production-ready caching** with Rails.cache integration
+- **Better error messages** with line numbers and column positions
 
 ## Installation
 
 Add this line to your application's Gemfile:
 
-```
+```ruby
 gem 'evc_rails'
 ```
 
 And then execute:
 
+```bash
+$ bundle install
 ```
-bundle install
-```
 
-Or install it yourself as:
+The template handler will be automatically registered for `.evc` files.
+
+## Usage
+
+### Basic Components
+
+Create `.evc` files in your `app/views` directory:
 
+```erb
+<!-- app/views/pages/home.evc -->
+<h1>Welcome to our app</h1>
+
+<Button size="lg" variant="primary">Get Started</Button>
+
+<Card>
+  <h2>Featured Content</h2>
+  <p>This is some amazing content.</p>
+</Card>
 ```
-gem install evc_rails
+
+This becomes:
+
+```erb
+<h1>Welcome to our app</h1>
+
+<%= render ButtonComponent.new(size: "lg", variant: "primary") do %>
+  Get Started
+<% end %>
+
+<%= render CardComponent.new do %>
+  <h2>Featured Content</h2>
+  <p>This is some amazing content.</p>
+<% end %>
 ```
 
-## Usage
+### Self-Closing Components
 
-1. Create a View Component
-   First, ensure you have a Rails View Component. For example, create app/components/my_component_component.rb:
+```erb
+<Button />
+<Icon name="star" />
+<Spacer height="20" />
+```
 
-```ruby
-# app/components/my_component_component.rb
-class MyComponentComponent < ViewComponent::Base
-  def initialize(title:)
-    @title = title
-  end
+Becomes:
 
-  def call
-    tag.div(class: "my-component") do
-      concat tag.h2(@title)
-      concat content # This renders the block content
-    end
-  end
-end
+```erb
+<%= render ButtonComponent.new %>
+<%= render IconComponent.new(name: "star") %>
+<%= render SpacerComponent.new(height: "20") %>
 ```
 
-And its associated template app/components/my_component_component.html.erb (if you're using separate templates):
+### Attributes
+
+#### String Attributes
 
 ```erb
-<!-- app/components/my_component_component.html.erb -->
-<div class="my-component">
-  <h2><%= @title %></h2>
-  <%= content %>
-</div>
+<Button size="lg" variant="primary" />
 ```
 
-2. Create an .evc Template
-   Now, create a template file with the .evc extension. For instance, app/views/pages/home.html.evc:
+#### Ruby Expressions
 
 ```erb
-<!-- app/views/pages/home.html.evc -->
-<h1>Welcome to My App</h1>
-
-<MyComponent title="Hello World">
-  <p>This is some content passed to the component.</p>
-  <button text="Click Me" />
-</MyComponent>
-
-<%# Namespaced components for better organization %>
-<Ui::Button text="Click Me" />
-<Forms::Input name="email" placeholder="Enter your email" />
-<Layout::Container>
-  <p>Content inside a layout container</p>
-</Layout::Container>
+<Button user={@current_user} count={@items.count} />
+```
 
-<%# A more concise way to render your DoughnutChartComponent %>
-<DoughnutChart rings={@progress_data} />
+#### Multiple Attributes
 
-<%# You can still use standard ERB within .evc files %>
-<p><%= link_to "Go somewhere", some_path %></p>
+```erb
+<Card class="shadow-lg" data-testid="featured-card" user={@user}>
+  Content here
+</Card>
 ```
 
-3. Ensure Components are Autoloaded
-   Make sure your app/components directory is eager-loaded in production. In config/application.rb or an initializer:
+### Namespaced Components
 
-```ruby
-# config/application.rb
-config.eager_load_paths << Rails.root.join("app/components")
+Organize your components in subdirectories:
+
+```erb
+<UI::Button size="lg" />
+<Forms::Fields::TextField value={@email} />
+<Layout::Container class="max-w-4xl">
+  <UI::Card>Content</UI::Card>
+</Layout::Container>
 ```
 
-## Component Organization
+This maps to:
+
+- `app/components/ui/button_component.rb`
+- `app/components/forms/fields/text_field_component.rb`
+- `app/components/layout/container_component.rb`
+
+### Slot Support
 
-You can organize your components into namespaces for better structure:
+#### Single Slots (`renders_one`)
 
+```ruby
+# app/components/card_component.rb
+class CardComponent < ViewComponent::Base
+  renders_one :header
+  renders_one :body
+end
 ```
-app/components/
-├── ui/
-│   ├── button_component.rb
-│   ├── card_component.rb
-│   └── input_component.rb
-├── forms/
-│   ├── input_component.rb
-│   ├── select_component.rb
-│   └── checkbox_component.rb
-├── layout/
-│   ├── container_component.rb
-│   ├── header_component.rb
-│   └── footer_component.rb
-└── my_component_component.rb
+
+```erb
+<Card>
+  <Card::Header>
+    <h1>Welcome</h1>
+  </Card::Header>
+  <Card::Body>
+    <p>This is the body content.</p>
+  </Card::Body>
+</Card>
 ```
 
-Then use them in your .evc templates:
+Becomes:
 
 ```erb
-<Ui::Button text="Submit" />
-<Forms::Input name="username" />
-<Layout::Container>
-  <Layout::Header title="My App" />
-  <p>Main content</p>
-  <Layout::Footer />
-</Layout::Container>
+<%= render CardComponent.new do |c| %>
+  <% c.header do %>
+    <h1>Welcome</h1>
+  <% end %>
+  <% c.body do %>
+    <p>This is the body content.</p>
+  <% end %>
+<% end %>
 ```
 
-## How it Works
+#### Multiple Slots (`renders_many`)
 
-When Rails processes an .evc template, EvcRails intercepts it and performs the following transformations:
+```ruby
+# app/components/list_component.rb
+class ListComponent < ViewComponent::Base
+  renders_many :items
+end
+```
 
 ```erb
-<Card title="Hello World">... </Card>
+<List>
+  <List::Item>Item 1</List::Item>
+  <List::Item>Item 2</List::Item>
+  <List::Item>Item 3</List::Item>
+</List>
 ```
 
-becomes:
+Becomes:
 
-```ruby
-<%= render CardComponent.new(title: "Hello World") do %>
-  ... (processed content) ...
+```erb
+<%= render ListComponent.new do |c| %>
+  <% c.item do %>Item 1<% end %>
+  <% c.item do %>Item 2<% end %>
+  <% c.item do %>Item 3<% end %>
 <% end %>
 ```
 
+### Complex Nesting
+
 ```erb
-<Button text="Click Me" />
+<UI::Card>
+  <h2 class="text-2xl font-semibold">Dashboard</h2>
+
+  <UI::Grid cols="3" gap="md">
+    <UI::Card shadow="sm">
+      <p class="text-center">Widget 1</p>
+    </UI::Card>
+    <UI::Card shadow="sm">
+      <p class="text-center">Widget 2</p>
+    </UI::Card>
+    <UI::Card shadow="sm">
+      <p class="text-center">Widget 3</p>
+    </UI::Card>
+  </UI::Grid>
+</UI::Card>
 ```
 
-becomes:
+### Mixed Content
 
-```ruby
-<%= render ButtonComponent.new(text: "Click Me") %>
-```
+You can mix regular HTML, ERB, and component tags:
 
 ```erb
-<Ui::Button text="Click Me" />
+<div class="container">
+  <h1><%= @page.title %></h1>
+
+  <% if @show_featured %>
+  <FeaturedCard />
+  <% end %>
+
+  <div class="grid">
+    <% @posts.each do |post| %>
+    <PostCard post={post} />
+    <% end %>
+  </div>
+</div>
 ```
 
-becomes:
+## Error Handling
 
-```ruby
-<%= render Ui::ButtonComponent.new(text: "Click Me") %>
+The template handler provides detailed error messages with line numbers and column positions:
+
+```
+ArgumentError: Unmatched closing tag </Button> at line 15, column 8
+ArgumentError: Unclosed tag <Card> at line 10, column 1
+ArgumentError: No matching opening tag for </Container> at line 20, column 5
 ```
 
-```erb
-<DoughnutChart rings={@progress_data} />
+## Caching
+
+Templates are automatically cached in production environments using `Rails.cache`. The cache is keyed by template identifier and source content hash, ensuring cache invalidation when templates change.
+
+### Cache Management
+
+Clear the template cache:
+
+```ruby
+Rails.cache.clear
 ```
 
-becomes:
+Or clear specific template patterns:
 
 ```ruby
-<%= render DoughnutChartComponent.new(rings: @progress_data) %>
+Rails.cache.delete_matched("evc_rails_template:*")
 ```
 
-`attr={@variable}` becomes `attr: @variable` in the new() call.
+## Development
+
+### Running Tests
 
-The transformed content is then passed to the standard ERB handler for final rendering.
+```bash
+bundle exec ruby test/unit/template_handler_test.rb
+```
 
-## Configuration
+### Building the Gem
 
-Currently, EvcRails requires no specific configuration. Future versions might include options for:
+```bash
+gem build evc_rails.gemspec
+```
 
-Customizing the component suffix (e.g., if you don't want "Component" appended).
+## Requirements
 
-Defining custom component lookup paths.
+- Rails 6.0+
+- Ruby 3.1+
+- ViewComponent 2.0+
 
 ## Contributing
 
-Bug reports and pull requests are welcome on GitHub at [your-gem-repo-link]. This project is intended to be a safe, welcoming space for collaboration, and contributors are expected to adhere to the code of conduct.
+1. Fork the repository
+2. Create your feature branch (`git checkout -b feature/amazing-feature`)
+3. Commit your changes (`git commit -m 'Add some amazing feature'`)
+4. Push to the branch (`git push origin feature/amazing-feature`)
+5. Open a Pull Request
 
 ## License
 
-The gem is available as open source under the terms of the MIT License
+The gem is available as open source under the terms of the [MIT License](https://opensource.org/licenses/MIT).

data/lib/evc_rails/railtie.rb

@@ -3,27 +3,23 @@
 # This file defines a Rails::Railtie, which integrates the evc_rails gem
 # with the Rails framework during its boot process.
 
-require "evc_rails/template_handler"
+require_relative "template_handler"
 require "action_view" # Ensure ActionView is loaded for handler registration
 
 module EvcRails
   class Railtie < Rails::Railtie
     # Register MIME type and template handler early in the initialization process
     initializer "evc_rails.register_template_handler", before: :load_config_initializers do
-      Rails.logger.info "Registering EVC template handler"
       # Register a unique MIME type for .evc templates
       Mime::Type.register "text/evc", :evc, %w[text/evc], %w[evc]
 
       # Register the template handler
       handler = EvcRails::TemplateHandlers::Evc.new
       ActionView::Template.register_template_handler(:evc, handler)
-
-      Rails.logger.info "Template handler registered: #{handler.inspect}"
     end
 
     # Finalize configuration after Rails initialization
     config.after_initialize do
-      Rails.logger.info "Configuring EVC template handlers"
       # Ensure :evc is prioritized in default handlers
       config.action_view.default_template_handlers ||= []
       config.action_view.default_template_handlers.prepend(:evc)

data/lib/evc_rails/template_handler.rb

@@ -1,204 +1,256 @@
 # lib/evc_rails/template_handler.rb
 #
-# This file contains the core logic for the .evc template handler.
-# It's part of the `EvcRails` module to keep it namespaced within the gem.
-# Handles .evc templates, converting PascalCase tags (self-closing <MyComponent attr={value} />
-# or container <MyComponent>content</MyComponent>) into Rails View Component renders.
-# Supports string literals and Ruby expressions as attribute values. The handler is
-# agnostic to specific component APIs, passing content as a block for the component
-# to interpret via yield or custom methods.
+# Simple template handler for .evc files
+# Converts PascalCase tags into Rails View Component renders
 
 module EvcRails
   module TemplateHandlers
     class Evc
-      # Regex to match opening or self-closing PascalCase component tags with attributes
-      # Updated to support namespaced components like UI::Button
-      TAG_REGEX = %r{<([A-Z][a-zA-Z_]*(::[A-Z][a-zA-Z_]*)*)([^>]*)/?>}
-
-      # Regex to match closing PascalCase component tags
-      # Updated to support namespaced components like UI::Button
-      CLOSE_TAG_REGEX = %r{</([A-Z][a-zA-Z_]*(::[A-Z][a-zA-Z_]*)*)>}
-
-      # Regex for attributes: Supports string literals (key="value", key='value')
-      # and Ruby expressions (key={@variable}).
-      # Group 1: Attribute key, Group 2: Double-quoted value, Group 3: Single-quoted value,
-      # Group 4: Ruby expression.
+      # Simple regex to match PascalCase component tags
+      TAG_REGEX = %r{<([A-Z][a-zA-Z0-9_]*(?:::[A-Z][a-zA-Z0-9_]*)*)([^>]*)/?>}
+
+      # Regex to match closing tags
+      CLOSE_TAG_REGEX = %r{</([A-Z][a-zA-Z0-9_]*(?:::[A-Z][a-zA-Z0-9_]*)*)>}
+
+      # Regex for attributes
       ATTRIBUTE_REGEX = /(\w+)=(?:"([^"]*)"|'([^']*)'|\{([^}]*)\})/
 
-      # Cache for compiled templates to improve performance.
-      # @cache will store { identifier: { source: original_source, result: compiled_result } }
-      # Note: In a production environment, a more robust cache store (e.g., Rails.cache)
-      # might be preferred for persistence and memory management, especially for large applications.
-      # This simple in-memory cache is effective for a single process.
-      @cache = {}
+      # Cache for compiled templates
+      @template_cache = {}
+      @cache_mutex = Mutex.new
+
+      require "active_support/cache"
+
+      def self.clear_cache
+        @cache_mutex.synchronize do
+          @template_cache.clear
+        end
+      end
+
+      def self.cache_stats
+        @cache_mutex.synchronize do
+          {
+            size: @template_cache.size,
+            keys: @template_cache.keys
+          }
+        end
+      end
 
-      def self.clear_cache # Class method to allow clearing cache manually, if needed
-        @cache = {}
+      def cache_store
+        if defined?(Rails) && Rails.respond_to?(:cache) && Rails.cache
+          Rails.cache
+        else
+          @fallback_cache ||= ActiveSupport::Cache::MemoryStore.new
+        end
       end
 
       def call(template, source = nil)
-        identifier = template.identifier
-
-        # Only use cache in non-development environments
-        # Check if cache exists for this template and if the source hasn't changed.
-        # This prevents recompilation of unchanged templates.
-        if !Rails.env.development? && self.class.instance_variable_get(:@cache)[identifier] &&
-           source == self.class.instance_variable_get(:@cache)[identifier][:source]
-          return self.class.instance_variable_get(:@cache)[identifier][:result]
+        source ||= template.source
+
+        # Check cache first (only in non-development environments)
+        unless Rails.env.development?
+          cache_key = "evc_rails_template:#{template.identifier}:#{Digest::MD5.hexdigest(source)}"
+          cached_result = cache_store.read(cache_key)
+          return cached_result if cached_result
         end
 
-        # Process the template source into an ERB-compatible string
+        # Process the template and convert to ERB
         processed_source = process_template(source, template)
 
-        # Get the standard ERB handler and pass the processed source to it
+        # Use the standard ERB handler to compile the processed source
         erb_handler = ActionView::Template.registered_template_handler(:erb)
         result = erb_handler.call(template, processed_source)
 
-        # Cache the result for future requests, but only in non-development environments.
-        # In development, templates change frequently, so caching would hinder development flow.
+        # Cache the result (only in non-development environments)
         unless Rails.env.development?
-          self.class.instance_variable_set(:@cache, self.class.instance_variable_get(:@cache).merge({
-                                                                                                      identifier => { source: source, result: result }
-                                                                                                    }))
+          cache_key = "evc_rails_template:#{template.identifier}:#{Digest::MD5.hexdigest(source)}"
+          cache_store.write(cache_key, result)
         end
-        result
-      end
-
-      private
-
-      # A memoization cache for resolved component classes within a single template processing.
-      # This prevents repeated `constantize` calls for the same component name within `process_template`.
-      attr_reader :component_class_memo
 
-      def initialize
-        @component_class_memo = {}
+        normalize_whitespace(result)
       end
 
-      # Helper method to determine the full component class name
-      def resolve_component_class_name(tag_name)
-        if tag_name.include?("::")
-          # For namespaced components, just append Component
-          "#{tag_name}Component"
-        elsif tag_name.end_with?("Component")
-          tag_name
-        else
-          "#{tag_name}Component"
-        end
-      end
+      private
 
-      # Processes the .evc template source, converting custom tags into Rails View Component render calls.
-      # This method is recursive to handle nested components.
       def process_template(source, template)
-        # Using an array for `parts` and then joining at the end is generally more efficient
-        # for building strings in Ruby than repeated string concatenations (`<<`).
-        parts = []
+        # Pre-compile regexes for better performance
+        tag_regex = TAG_REGEX
+        close_tag_regex = CLOSE_TAG_REGEX
+        attribute_regex = ATTRIBUTE_REGEX
+
+        # Use String buffer for better performance
+        result = String.new
+        stack = []
         pos = 0
-        stack = [] # Track [component_class_name, render_params_str, start_pos_in_source]
+        source_length = source.length
 
-        # Initialize memoization cache for this processing run
-        @component_class_memo = {}
+        # Track line numbers for better error messages
+        def line_number_at_position(source, pos)
+          source[0...pos].count("\n") + 1
+        end
 
-        while pos < source.length
-          # Try to match an opening or self-closing tag
-          if (match = TAG_REGEX.match(source, pos))
-            # Append text before the current tag to the result parts
-            parts << source[pos...match.begin(0)]
-            pos = match.end(0) # Move position past the matched tag
+        def column_number_at_position(source, pos)
+          last_newline = source[0...pos].rindex("\n")
+          last_newline ? pos - last_newline : pos + 1
+        end
 
-            is_self_closing = match[0].end_with?("/>")
-            tag_name = match[1]
-            attributes_str = match[3].strip
-
-            # Determine the full component class name
-            component_class_name = resolve_component_class_name(tag_name)
-
-            # Validate if the component class exists using memoization.
-            # The component class will only be constantized once per unique class name
-            # within a single template processing call.
-            component_class = @component_class_memo[component_class_name] ||= begin
-              component_class_name.constantize
-            rescue NameError
-              raise ArgumentError, "Component #{component_class_name} not found in template #{template.identifier}"
-            end
+        while pos < source_length
+          # Find next opening or closing tag
+          next_open = tag_regex.match(source, pos)
+          next_close = close_tag_regex.match(source, pos)
 
-            # Parse attributes and format them for the render call
-            params = []
-            attributes_str.scan(ATTRIBUTE_REGEX) do |key, quoted_value, single_quoted_value, ruby_expression|
-              # Basic validation for attribute keys
-              unless key =~ /\A[a-z_][a-z0-9_]*\z/i
-                raise ArgumentError, "Invalid attribute key '#{key}' in template #{template.identifier}"
-              end
+          if next_open && (!next_close || next_open.begin(0) < next_close.begin(0))
+            # Found opening tag
+            match = next_open
+            tag_name = match[1]
+            attributes_str = match[2].to_s.strip
+            is_self_closing = match[0].end_with?("/>")
 
-              formatted_key = "#{key}:"
-              if ruby_expression
-                # For Ruby expressions, directly embed the expression.
-                params << "#{formatted_key} #{ruby_expression}"
-              elsif quoted_value
-                # For double-quoted string literals, escape double quotes within the value.
-                params << "#{formatted_key} \"#{quoted_value.gsub('"', '\"')}\""
-              elsif single_quoted_value
-                # For single-quoted string literals, escape single quotes within the value
-                # and wrap in double quotes for Ruby string literal syntax.
-                params << "#{formatted_key} \"#{single_quoted_value.gsub("'", "\\'")}\""
+            # Add content before the tag
+            result << source[pos...match.begin(0)] if pos < match.begin(0)
+
+            # Determine if this is a slot (e.g., Card::Header inside Card)
+            parent = stack.last
+            is_slot = false
+            slot_name = nil
+            slot_parent = nil
+            if parent
+              parent_tag = parent[0]
+              if tag_name.start_with?("#{parent_tag}::")
+                is_slot = true
+                slot_name = tag_name.split("::").last.downcase
+                slot_parent = parent_tag
+                # Mark parent as having a slot
+                parent[6] = true
               end
             end
 
-            render_params_str = params.join(", ")
-
             if is_self_closing
-              # If it's a self-closing tag, generate a simple render call.
-              parts << "<%= render #{component_class_name}.new(#{render_params_str}) %>"
+              if is_slot
+                params = parse_attributes(attributes_str, attribute_regex)
+                param_str = params.join(", ")
+                result << if param_str.empty?
+                            "<% c.#{slot_name} do %><% end %>"
+                          else
+                            "<% c.#{slot_name}(#{param_str}) do %><% end %>"
+                          end
+              else
+                component_class = "#{tag_name}Component"
+                params = parse_attributes(attributes_str, attribute_regex)
+                param_str = params.join(", ")
+                result << if param_str.empty?
+                            "<%= render #{component_class}.new %>"
+                          else
+                            "<%= render #{component_class}.new(#{param_str}) %>"
+                          end
+              end
+            elsif is_slot
+              params = parse_attributes(attributes_str, attribute_regex)
+              param_str = params.join(", ")
+              stack << [tag_name, nil, param_str, result.length, :slot, slot_name, false, match.begin(0)]
+              result << if param_str.empty?
+                          "<% c.#{slot_name} do %>"
+                        else
+                          "<% c.#{slot_name}(#{param_str}) do %>"
+                        end
             else
-              # If it's an opening tag, push it onto the stack to await its closing tag.
-              stack << [component_class_name, render_params_str, pos]
+              component_class = "#{tag_name}Component"
+              params = parse_attributes(attributes_str, attribute_regex)
+              param_str = params.join(", ")
+              # If this is the outermost component, add |c| for slot support only if a slot is used
+              if stack.empty?
+                stack << [tag_name, component_class, param_str, result.length, :component, nil, false, match.begin(0)] # [tag_name, class, params, pos, type, slot_name, slot_used, open_pos]
+                # We'll patch in |c| at close if needed
+                result << if param_str.empty?
+                            "<%= render #{component_class}.new do %>"
+                          else
+                            "<%= render #{component_class}.new(#{param_str}) do %>"
+                          end
+              else
+                stack << [tag_name, component_class, param_str, result.length, :component, nil, false, match.begin(0)]
+                result << if param_str.empty?
+                            "<%= render #{component_class}.new do %>"
+                          else
+                            "<%= render #{component_class}.new(#{param_str}) do %>"
+                          end
+              end
             end
 
-          # Try to match a closing tag
-          elsif (match = CLOSE_TAG_REGEX.match(source, pos))
-            # Append text before the closing tag to the result parts
-            parts << source[pos...match.begin(0)]
-            pos = match.end(0) # Move position past the matched tag
-
+            pos = match.end(0)
+          elsif next_close
+            # Found closing tag
+            match = next_close
             closing_tag_name = match[1]
 
-            # Check for unmatched closing tags
+            # Add content before the closing tag
+            result << source[pos...match.begin(0)] if pos < match.begin(0)
+
+            # Find matching opening tag
             if stack.empty?
-              raise ArgumentError, "Unmatched closing tag </#{closing_tag_name}> in template #{template.identifier}"
+              line = line_number_at_position(source, match.begin(0))
+              col = column_number_at_position(source, match.begin(0))
+              raise ArgumentError, "Unmatched closing tag </#{closing_tag_name}> at line #{line}, column #{col}"
             end
 
-            # Pop the corresponding opening tag from the stack
-            component_class_name, render_params_str, start_pos = stack.pop
+            # Find the matching opening tag (from the end)
+            matching_index = stack.rindex { |(tag_name, _, _, _, _, _, _, _)| tag_name == closing_tag_name }
+            if matching_index.nil?
+              line = line_number_at_position(source, match.begin(0))
+              col = column_number_at_position(source, match.begin(0))
+              raise ArgumentError, "No matching opening tag for </#{closing_tag_name}> at line #{line}, column #{col}"
+            end
 
-            # Apply the same transformation to the closing tag name for comparison
-            expected_closing_component_name = resolve_component_class_name(closing_tag_name)
+            # Pop the matching opening tag
+            tag_name, component_class, param_str, start_pos, type, slot_name, slot_used, open_pos = stack.delete_at(matching_index)
 
-            # Check for mismatched tags (e.g., <div></p>)
-            if component_class_name != expected_closing_component_name
-              # Extract the original tag name from the component class name for the error message
-              expected_tag_name = component_class_name.gsub(/Component$/, "")
-              raise ArgumentError,
-                    "Mismatched tags: expected </#{expected_tag_name}>, got </#{closing_tag_name}> in template #{template.identifier}"
+            # Patch in |c| for top-level component if a slot was used
+            if type == :component && stack.empty? && slot_used
+              # Find the opening block and insert |c|
+              open_block_regex = /(<%= render #{component_class}\.new(?:\(.*?\))? do)( %>)/
+              result.sub!(open_block_regex) { "#{::Regexp.last_match(1)} |c|#{::Regexp.last_match(2)}" }
             end
 
-            # Recursively process the content between the opening and closing tags.
-            # This is where nested components are handled.
-            content = process_template(source[start_pos...match.begin(0)], template)
-
-            # Generate the render call with a block for the content.
-            parts << "<%= render #{component_class_name}.new(#{render_params_str}) do %>#{content}<% end %>"
+            # Add closing block
+            result << (type == :slot ? "<% end %>" : "<% end %>")
 
+            pos = match.end(0)
           else
-            # If no tags are matched, append the rest of the source and break the loop.
-            parts << source[pos..-1]
+            # No more tags, add remaining content
+            result << source[pos..-1] if pos < source_length
             break
           end
         end
 
-        # After parsing, if the stack is not empty, it means there are unclosed tags.
-        raise ArgumentError, "Unclosed tag <#{stack.last[0]}> in template #{template.identifier}" unless stack.empty?
+        # Check for unclosed tags
+        unless stack.empty?
+          unclosed_tag = stack.last
+          open_pos = unclosed_tag[7]
+          line = line_number_at_position(source, open_pos)
+          col = column_number_at_position(source, open_pos)
+          raise ArgumentError, "Unclosed tag <#{unclosed_tag[0]}> at line #{line}, column #{col}"
+        end
 
-        # Join all the collected parts to form the final ERB string.
-        parts.join("")
+        result
+      end
+
+      def normalize_whitespace(erb_string)
+        # For now, return the string as-is to avoid breaking existing functionality
+        # We can add proper whitespace normalization later if needed
+        erb_string
+      end
+
+      def parse_attributes(attributes_str, attribute_regex = ATTRIBUTE_REGEX)
+        params = []
+        attributes_str.scan(attribute_regex) do |key, quoted_value, single_quoted_value, ruby_expression|
+          if ruby_expression
+            params << "#{key}: #{ruby_expression}"
+          elsif quoted_value
+            params << "#{key}: \"#{quoted_value.gsub('"', '\\"')}\""
+          elsif single_quoted_value
+            params << "#{key}: \"#{single_quoted_value.gsub("'", "\\'")}\""
+          end
+        end
+        params
       end
     end
   end

data/lib/evc_rails/version.rb

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

metadata

@@ -1,7 +1,7 @@
 --- !ruby/object:Gem::Specification
 name: evc_rails
 version: !ruby/object:Gem::Version
-  version: 0.1.2
+  version: 0.1.4
 platform: ruby
 authors:
 - scttymn
@@ -65,9 +65,11 @@ dependencies:
     - - ">="
       - !ruby/object:Gem::Version
         version: '2.0'
-description: A Rails engine that provides a custom template handler for .evc files,
-  allowing developers to use PascalCase ViewComponent tags (e.g., <MyComponent />)
-  directly in their HTML, similar to JSX.
+description: Embedded ViewComponents (EVC) is a Rails template handler that brings
+  JSX-like syntax to ViewComponent, allowing you to write custom component tags directly
+  in your .evc templates. It's a drop-in replacement for .erb files that works seamlessly
+  with existing ViewComponents, supporting self-closing tags, attributes, namespaced
+  components, slots, and complex nesting while maintaining full ERB compatibility.
 email:
 - scotty@hey.com
 executables: []
@@ -107,5 +109,5 @@ required_rubygems_version: !ruby/object:Gem::Requirement
 requirements: []
 rubygems_version: 3.6.9
 specification_version: 4
-summary: Enables JSX-like PascalCase component tags in Rails .evc view files.
+summary: JSX-like syntax for Rails ViewComponent
 test_files: []