Open joelhawksley opened 3 years ago
@joelhawksley I've tried to make it. Please check it out! https://docs.google.com/drawings/d/1WNItMq6d5F47_2610XyTWUwMtRNRtN07FloJeobXinE/edit?usp=drive_link
Reinterpreted that as a sequence diagram. We could do with marking out phases still. Here are the docs.
sequenceDiagram
autonumber
participant ExampleComponent.new
participant ActionView
ActionView->>ExampleComponent.new: render
alt !render?
ExampleComponent.new->>ActionView: render ""
else render?
alt !compiled?
ExampleComponent.new->>ExampleComponent.new: compile
end
ExampleComponent.new->>ExampleComponent.new: call
ExampleComponent.new->>ExampleComponent.new: _output_postamble
ExampleComponent.new->>ActionView: render concatenated result of call and _output_postamble
end
sequenceDiagram
autonumber
participant ExampleComponent.new
participant ActionView
ActionView->>ExampleComponent.new: render
alt !render?
ExampleComponent.new->>ActionView: render ""
else render?
alt !compiled?
ExampleComponent.new->>ExampleComponent.new: compile
end
ExampleComponent.new->>ExampleComponent.new: call
ExampleComponent.new->>ExampleComponent.new: _output_postamble
ExampleComponent.new->>ActionView: render concatenated result of call and _output_postamble
end
Understanding the lifecycle of a ViewComponent, from compilation to rendering, and all of the API methods called along the way, is important to working with ViewComponents effectively, especially for more advanced use cases.
https://twitter.com/dan_abramov/status/981712092611989509/photo/1 is a good example of what we might want to mimic.