Add lifecycle diagram to documentation

[joelhawksley]

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.

[kzkn]

@joelhawksley
I've tried to make it. Please check it out!
https://docs.google.com/drawings/d/1WNItMq6d5F47_2610XyTWUwMtRNRtN07FloJeobXinE/edit?usp=drive_link

[boardfish]

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

Loading

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

[joelhawksley]

PR: #2239

I opted for a text-only solution for now to get something shipped ❤