evc_rails 0.1.3 → 0.2.0

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: '08062fcb10857de4a7b864d324e705430a6eb3fe7712c2ed893a482dbbc1e604'
-  data.tar.gz: cbe0310f402b96fb62fae7a21647a149ec871539b476527615e72a1724402c79
+  metadata.gz: 1595c9c520d1639384e46e39fce8f611edbe3b27707a9f99ab412bb25a1741f0
+  data.tar.gz: 23ec6c266ec28a617b0d39d255f33fd5cff58c3db6461dd4382237b8d1989ef2
 SHA512:
-  metadata.gz: a22db0b9bcd33d36b16908482b6eafc12cbbe684e588f9ab19dadeffdc6ac43672f8c026ed23a662cb7babe324abb0ca7d97195bc23a91d54c2f091225fcb472
-  data.tar.gz: 3445cef47452e7349d9ed6abe58dcdbe974d5c91097634fb5577ab0947cef60d863ff62e51e6cf457e2db73cb115e4a379f210d97d63b6785aee2eb0a454f9ce
+  metadata.gz: 78e5db590a2dd0b84df663fc836b51c24156bf6f5af40d278f8a5a9ec2cd89aa9ddf1fc83a957613ecc980ebfd54e2fa4d84c33e48f910d2c48514d0869789b7
+  data.tar.gz: c2765e0f368bce11454d9bf95461739a62ef0b89a1d1940c6e069f305499a20e4aeba6dabb4bd017ebc4f1bbefbd60294e0f8ecf53c24e377662a04d16e21cce

data/README.md

@@ -28,9 +28,9 @@ class ButtonComponent < ViewComponent::Base
 end
 ```
 
-```html
+```erb
 <!-- Now you can use it with EVC syntax -->
-<button variant="primary" size="lg">Click me</button>
+<Button variant="primary" size="lg">Click me</Button>
 ```
 
 No component modifications required - just install and enjoy easier syntax!
@@ -69,11 +69,11 @@ The template handler will be automatically registered for `.evc` files.
 
 Create `.evc` files in your `app/views` directory:
 
-```html
+```erb
 <!-- app/views/pages/home.evc -->
 <h1>Welcome to our app</h1>
 
-<button size="lg" variant="primary">Get Started</button>
+<Button size="lg" variant="primary">Get Started</Button>
 
 <Card>
   <h2>Featured Content</h2>
@@ -98,10 +98,10 @@ This becomes:
 
 ### Self-Closing Components
 
-```html
-<button />
+```erb
+<Button />
 <Icon name="star" />
-<spacer height="20" />
+<Spacer height="20" />
 ```
 
 Becomes:
@@ -116,20 +116,20 @@ Becomes:
 
 #### String Attributes
 
-```html
-<button size="lg" variant="primary" />
+```erb
+<Button size="lg" variant="primary" />
 ```
 
 #### Ruby Expressions
 
-```html
-<button user="{@current_user}" count="{@items.count}" />
+```erb
+<Button user={@current_user} count={@items.count} />
 ```
 
 #### Multiple Attributes
 
-```html
-<Card class="shadow-lg" data-testid="featured-card" user="{@user}">
+```erb
+<Card class="shadow-lg" data-testid="featured-card" user={@user}>
   Content here
 </Card>
 ```
@@ -138,9 +138,9 @@ Becomes:
 
 Organize your components in subdirectories:
 
-```html
+```erb
 <UI::Button size="lg" />
-<Forms::Fields::TextField value="{@email}" />
+<Forms::Fields::TextField value={@email} />
 <Layout::Container class="max-w-4xl">
   <UI::Card>Content</UI::Card>
 </Layout::Container>
@@ -164,14 +164,14 @@ class CardComponent < ViewComponent::Base
 end
 ```
 
-```html
+```erb
 <Card>
-  <Card::Header>
+  <WithHeader>
     <h1>Welcome</h1>
-  </Card::Header>
-  <Card::Body>
+  </WithHeader>
+  <WithBody>
     <p>This is the body content.</p>
-  </Card::Body>
+  </WithBody>
 </Card>
 ```
 
@@ -197,11 +197,11 @@ class ListComponent < ViewComponent::Base
 end
 ```
 
-```html
+```erb
 <List>
-  <List::Item>Item 1</List::Item>
-  <List::Item>Item 2</List::Item>
-  <List::Item>Item 3</List::Item>
+  <WithItem>Item 1</WithItem>
+  <WithItem>Item 2</WithItem>
+  <WithItem>Item 3</WithItem>
 </List>
 ```
 
@@ -215,9 +215,36 @@ Becomes:
 <% end %>
 ```
 
+#### Complex Slot Examples
+
+```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>
+```
+
+#### Backward Compatibility
+
+The old `Component::slotname` syntax is still supported for backward compatibility:
+
+```erb
+<Card>
+  <Card::header>Title</Card::header>
+  <Card::body>Content</Card::body>
+</Card>
+```
+
 ### Complex Nesting
 
-```html
+```erb
 <UI::Card>
   <h2 class="text-2xl font-semibold">Dashboard</h2>
 
@@ -239,7 +266,7 @@ Becomes:
 
 You can mix regular HTML, ERB, and component tags:
 
-```html
+```erb
 <div class="container">
   <h1><%= @page.title %></h1>
 
@@ -249,7 +276,7 @@ You can mix regular HTML, ERB, and component tags:
 
   <div class="grid">
     <% @posts.each do |post| %>
-    <PostCard post="{post}" />
+    <PostCard post={post} />
     <% end %>
   </div>
 </div>

data/lib/evc_rails/template_handler.rb

@@ -109,14 +109,23 @@ module EvcRails
             # 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)
+            # Determine if this is a slot (e.g., WithHeader, WithPost, or 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}::")
+
+              # Check for WithSlotName syntax (e.g., WithHeader, WithPost)
+              if tag_name.start_with?("With")
+                is_slot = true
+                slot_name = tag_name[4..-1].downcase # Remove "With" prefix and convert to lowercase
+                slot_parent = parent_tag
+                # Mark parent as having a slot
+                parent[6] = true
+              # Check for Component::slotname syntax (backward compatibility)
+              elsif tag_name.start_with?("#{parent_tag}::")
                 is_slot = true
                 slot_name = tag_name.split("::").last.downcase
                 slot_parent = parent_tag

data/lib/evc_rails/version.rb

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

metadata

@@ -1,7 +1,7 @@
 --- !ruby/object:Gem::Specification
 name: evc_rails
 version: !ruby/object:Gem::Version
-  version: 0.1.3
+  version: 0.2.0
 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: []
@@ -90,6 +92,7 @@ metadata:
   allowed_push_host: https://rubygems.org
   homepage_uri: https://github.com/scttymn/evc_rails
   source_code_uri: https://github.com/scttymn/evc_rails
+  changelog_uri: https://github.com/scttymn/evc_rails/blob/main/CHANGELOG.md
 rdoc_options: []
 require_paths:
 - lib
@@ -106,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: []