vident-view_component 1.0.0.alpha1 → 1.0.0.alpha3

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 9a0cd9fafe18012c95fc9f952e6a0601eaa51bc7b3d3d813d0b34a3cdc9a0d8f
-  data.tar.gz: 37a26c0415fd55cdb67516e49dd393a19b0214a77178f1ab2d0c563910a800d4
+  metadata.gz: 6008f5d78b7230589329a8b2a634767a2f54defd2fc9e3358548b3b641ef99b7
+  data.tar.gz: 7456a6c1f34c58cfce0477b623a12025e12665739f8f338687643cf5bea2b578
 SHA512:
-  metadata.gz: b3ffb9e5a400c02d98cb94fb21f8e4b62cb6af93c5adcf7798954919da69a4218c00262fb573dc41a18bcd221cee82a01af2283b4225fc0176732ec7785b4180
-  data.tar.gz: 86549c4a08aa6ca775f1501c7bcc561c25fc08e6210a01ea648bc9454ada7fa82ce7be8dbc3db9f2e01af06d282677d47c8687da9a865773c1eaf5dcf3646fb1
+  metadata.gz: c289ba2437da177d898f6bce6f7275495153aca16b8ada22c57ea046a32f8341b858f0099224b698c6e4607a2ed735991c5992ee3cab75c1ed173eb4cbc89752
+  data.tar.gz: fa6d53c82825e7a9be5f000265310521b803543b974a5784082438d3bd44b6b3162e512ff12147ab1646859f99759b9c6a0c4038d7c8f859f575d41546b7810a

data/CHANGELOG.md

@@ -5,7 +5,25 @@ All notable changes to this project will be documented in this file.
 The format is based on [Keep a Changelog](http://keepachangelog.com/)
 and this project adheres to [Semantic Versioning](http://semver.org/).
 
-## [1.0.0.alpha1] - 2025-07-04
+## [1.0.0.alpha3] - 2025-07-21
+
+### Breaking
+- `element_classes` is now `root_element_classes` to make more consistent with the other root element methods.
+
+### Added
+
+-`.prop_names` and `#prop_values` methods to `Vident::Component` to return the names and values of the component's properties.
+
+## [1.0.0.alpha2] - 2025-07-08
+
+### Breaking
+- `nil` values in Stimulus values are ok, but `nil` for an action/target/outlet makes no sense so is ignored.
+
+### Fixed
+
+- `stimulus_scoped_event` must return a Symbol to work with `stimulus_action` and `stimulus_target` methods etc.
+
+## [1.0.0.alpha1] - 2025-07-08
 
 This release is a major overhaul of the Vident library, and introduces a new API for defining components and Stimulus attributes. The new API is designed to be more consistent and easier to use.
 

data/README.md

@@ -76,27 +76,32 @@ class ButtonComponent < Vident::ViewComponent::Base
   
   # Configure Stimulus integration
   stimulus do
-    actions [:click, :handle_click]
-    # Static values
-    values loading_duration: 1000
+    # Setup actions, including with proc to evaluate on instance 
+    actions [:click, :handle_click], 
+            -> { [stimulus_scoped_event(:my_custom_event), :handle_this] if should_handle_this? }
     # Map the clicked_count prop as a Stimulus value
     values_from_props :clicked_count
     # Dynamic values using procs (evaluated in component context)
-    values item_count: -> { @items.count }
-    values api_url: -> { Rails.application.routes.url_helpers.api_items_path }
+    values item_count: -> { @items.count },
+           api_url: -> { Rails.application.routes.url_helpers.api_items_path },
+           loading_duration: 1000 # or set static values
     # Static and dynamic classes
-    classes loading: "opacity-50 cursor-wait"
-    classes size: -> { @items.count > 10 ? "large" : "small" }
+    classes loading: "opacity-50 cursor-wait",
+            size: -> { @items.count > 10 ? "large" : "small" }
   end
 
   def call
-    root_element do
-      @text
+    root_element do |component|
+      # Wire up targets etc
+      component.tag(:span, stimulus_target: :status) do
+        @text
+      end
     end
   end
 
   private
 
+  # Configure your components root HTML element
   def root_element_attributes
     {
       element_tag: @url ? :a : :button,
@@ -104,7 +109,8 @@ class ButtonComponent < Vident::ViewComponent::Base
     }
   end
 
-  def element_classes
+  # optionally add logic to determine initial classes
+  def root_element_classes
     base_classes = "btn"
     case @style
     when :primary
@@ -130,14 +136,19 @@ export default class extends Controller {
     loadingDuration: Number 
   }
   static classes = ["loading"]
+  static targets = ["status"]
   
   handleClick(event) {
     // Increment counter
     this.clickedCountValue++
     
+    // Store original text
+    const originalText = this.statusTarget.textContent
+    
     // Add loading state
     this.element.classList.add(this.loadingClass)
     this.element.disabled = true
+    this.statusTarget.textContent = "Loading..."
     
     // Use the loading duration from the component
     setTimeout(() => {
@@ -145,7 +156,7 @@ export default class extends Controller {
       this.element.disabled = false
       
       // Update text to show count
-      this.element.textContent = `${this.element.textContent} (${this.clickedCountValue})`
+      this.statusTarget.textContent = `${originalText} (${this.clickedCountValue})`
     }, this.loadingDurationValue)
   }
 }
@@ -178,7 +189,7 @@ The rendered HTML includes all Stimulus data attributes:
         data-button-component-loading-duration-value="1000"
         data-button-component-loading-class="opacity-50 cursor-wait"
         id="button-component-123">
-  Save
+  <span data-button-component-target="status">Save</span>
 </button>
 
 <!-- Second button with pre-set count -->
@@ -189,7 +200,7 @@ The rendered HTML includes all Stimulus data attributes:
         data-button-component-loading-duration-value="1000"
         data-button-component-loading-class="opacity-50 cursor-wait"
         id="button-component-456">
-  Submit
+  <span data-button-component-target="status">Submit</span>
 </button>
 ```
 
@@ -218,6 +229,29 @@ class CardComponent < Vident::ViewComponent::Base
 end
 ```
 
+### Post-Initialization Hooks
+
+Vident provides a hook for performing actions after component initialization:
+
+```ruby
+class MyComponent < Vident::ViewComponent::Base
+  prop :data, Hash, default: -> { {} }
+  
+  def after_component_initialize
+    @processed_data = process_data(@data)
+  end
+  
+  private
+  
+  def process_data(data)
+    # Your initialization logic here
+    data.transform_values(&:upcase)
+  end
+end
+```
+
+**Important**: If you decide to override Literal's `after_initialize`, you **must** call `super` first to ensure Vident's initialization completes properly. Alternatively, use `after_component_initialize` which doesn't require calling `super`.
+
 ### Built-in Properties
 
 Every Vident component includes these properties:
@@ -233,7 +267,7 @@ The `root_element` helper method renders your component's root element with all
 
 ```ruby
 # In your component class
-def element_classes
+def root_element_classes
   ["card", featured? ? "card-featured" : nil]
 end
 
@@ -389,7 +423,7 @@ Vident provides helper methods to generate scoped event names for dispatching cu
 class MyComponent < Vident::ViewComponent::Base
   stimulus do
     # Define an action that responds to a scoped event
-    actions [stimulus_scoped_event_on_window(:data_loaded), :handle_data_loaded]
+    actions -> { [stimulus_scoped_event_on_window(:data_loaded), :handle_data_loaded] }
   end
   
   def handle_click
@@ -589,7 +623,7 @@ class StyledComponent < Vident::ViewComponent::Base
   private
   
   # Classes on the root element
-  def element_classes
+  def root_element_classes
     ["base-class", variant_class]
   end
   
@@ -623,7 +657,7 @@ class TailwindComponent < Vident::ViewComponent::Base
   
   private
   
-  def element_classes
+  def root_element_classes
     # Conflicts with size_class will be resolved automatically
     "p-2 text-sm #{size_class}"
   end

data/lib/vident/view_component/base.rb

@@ -41,10 +41,10 @@ module Vident
 
       SELF_CLOSING_TAGS = Set[:area, :base, :br, :col, :embed, :hr, :img, :input, :link, :meta, :param, :source, :track, :wbr].freeze
 
-      def root_element(&block)
+      def root_element(**overrides, &block)
         tag_type = root_element_tag_type
         child_content = view_context.capture(self, &block) if block_given? # Evaluate before generating the outer tag options to ensure DSL methods are executed
-        options = root_element_tag_options
+        options = resolve_root_element_attributes_before_render(overrides)
         if SELF_CLOSING_TAGS.include?(tag_type)
           view_context.tag(tag_type, options)
         else

metadata

@@ -1,13 +1,13 @@
 --- !ruby/object:Gem::Specification
 name: vident-view_component
 version: !ruby/object:Gem::Version
-  version: 1.0.0.alpha1
+  version: 1.0.0.alpha3
 platform: ruby
 authors:
 - Stephen Ierodiaconou
 bindir: bin
 cert_chain: []
-date: 2025-07-08 00:00:00.000000000 Z
+date: 2025-07-21 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: railties
@@ -55,14 +55,14 @@ dependencies:
     requirements:
     - - "~>"
       - !ruby/object:Gem::Version
-        version: 1.0.0.alpha1
+        version: 1.0.0.alpha3
   type: :runtime
   prerelease: false
   version_requirements: !ruby/object:Gem::Requirement
     requirements:
     - - "~>"
       - !ruby/object:Gem::Version
-        version: 1.0.0.alpha1
+        version: 1.0.0.alpha3
 - !ruby/object:Gem::Dependency
   name: view_component
   requirement: !ruby/object:Gem::Requirement