class UI::ViewAdapter

Overview

Bridges a UI::View tree into the existing component system.

ViewAdapter wraps a view-builder block and renders it to HTML using Web::Renderer. Each call to #render_content invokes the builder to get the current view tree, so state changes in captured variables automatically produce updated output on the next render.

Base class rationale

ViewAdapter inherits from Components::StatefulComponent rather than Components::Reactive::ReactiveComponent to avoid pulling in HTTP and WebSocket dependencies (ReactiveHandler, ReactiveSession) in contexts where they are not needed (e.g., static rendering, specs, CLI tools).

For production real-time use, integrate with the reactive system by:

  1. Registering the adapter with ReactiveHandler.register_component
  2. Calling mark_changed! + broadcasting via ReactiveHandler.broadcast_update

Example: counter = UI::State(Int32).new(0)

adapter = UI::ViewAdapter.new do stack = UI::VStack.new stack << UI::Label.new("Count: #{counter.value}") stack << UI::Button.new("Increment") stack.as(UI::View) end

adapter.render # => HTML string from the view tree counter.value = 1 adapter.render # => updated HTML with "Count: 1"

Defined in:

ui/view_adapter.cr

Constructors

Instance Method Summary

Instance methods inherited from class Components::StatefulComponent

cacheable? : Bool cacheable?, changed? : Bool changed?, get_state(key : String) : JSON::Any | Nil get_state, mark_changed! mark_changed!, reset_changed reset_changed, reset_changed! reset_changed!, set_state(key : String, value : JSON::Any) : Nil
set_state(key : String, value : String)
set_state(key : String, value : Int32)
set_state(key : String, value : Int64)
set_state(key : String, value : Float32)
set_state(key : String, value : Float64)
set_state(key : String, value : Bool)
set_state(key : String, value : Array(JSON::Any))
set_state(key : String, value : Hash(String, JSON::Any)) set_state, state : Hash(String, JSON::Any) state, state_to_json : JSON::Any state_to_json

Constructor methods inherited from class Components::StatefulComponent

new(**attrs) new

Instance methods inherited from class Components::Component

<<(child : Component | Elements::HTMLElement | String | Elements::RawHTML) : self <<, [](name : String) : String | Nil [], []=(name : String, value : String) : String []=, add_children(*children : Component | Elements::HTMLElement | String | Elements::RawHTML) : self add_children, attributes : Hash(String, String) attributes, build(&block : self -> Nil) : self build, children : Array(Component | Elements::HTMLElement | String | Elements::RawHTML) children, component_id : String component_id, render : SafeHTML render, render_content : String render_content, render_safe_content : SafeHTML render_safe_content, to_raw_html : Elements::RawHTML to_raw_html, to_s(io : IO) : Nil to_s

Constructor methods inherited from class Components::Component

new(**attrs) new

Macros inherited from class Components::Component

component_css(css_string) component_css

Constructor Detail

def self.new(&block : -> View) #

Takes a block that builds the view tree. The block is called on each render to get the current view state.


[View source]

Instance Method Detail

def invalidate! : String #

Convenience: mark the component as changed and return the fresh HTML. In a reactive context, call this after state changes to get the updated markup. For WebSocket push, follow with: ReactiveHandler.broadcast_update(component_id, html, state_to_json)


[View source]
def render_content : String #

Web rendering path -- called by the component system via render. Builds a fresh view tree from the builder block, then renders it to HTML through Web::Renderer.


[View source]