Documentation/59549 add short documentation around our hotwire and viewcomponent usage #17250
Conversation
There was a problem hiding this comment.
Nice write up 👏 Thank you for taking the time to write it.
I left some comments about things I still do not fully understand, and some suggestions too.
For completeness, I think it would be nice to add some basic method documentation for OpTurbo::ComponentStream. Especially for the ones relying on insert_as_turbo_stream to indicate that the insert target can be changed. The best doc is the one available while writing code, even if it can go stale at some point.
| - Controllers include OpTurbo::ComponentStream module | ||
| - Provides methods for turbo-stream operations: |
There was a problem hiding this comment.
| - Controllers include OpTurbo::ComponentStream module | |
| - Provides methods for turbo-stream operations: | |
| - Controllers must include `OpTurbo::ComponentStream` module, which provides methods for turbo-stream operations: |
| - `replace_via_turbo_stream` | ||
| - `remove_via_turbo_stream` | ||
| - `update_flash_message_via_turbo_stream` | ||
| - Uses `respond_with_turbo_streams` to handle responses |
There was a problem hiding this comment.
| - Uses `respond_with_turbo_streams` to handle responses | |
| - Uses `respond_with_turbo_streams` to handle responses instead of `respond_to`/`render`. |
| - `update_via_turbo_stream` | ||
| - `append_via_turbo_stream` | ||
| - `prepend_via_turbo_stream` | ||
| - `replace_via_turbo_stream` | ||
| - `remove_via_turbo_stream` | ||
| - `update_flash_message_via_turbo_stream` |
There was a problem hiding this comment.
| - `update_via_turbo_stream` | |
| - `append_via_turbo_stream` | |
| - `prepend_via_turbo_stream` | |
| - `replace_via_turbo_stream` | |
| - `remove_via_turbo_stream` | |
| - `update_flash_message_via_turbo_stream` | |
| - `update_via_turbo_stream` | |
| - `replace_via_turbo_stream` | |
| - `remove_via_turbo_stream` | |
| - `modify_via_turbo_stream` | |
| - `append_via_turbo_stream` | |
| - `prepend_via_turbo_stream` | |
| - `add_before_via_turbo_stream` | |
| - `render_error_flash_message_via_turbo_stream` | |
| - `update_flash_message_via_turbo_stream` | |
| - `scroll_into_view_via_turbo_stream` |
Reordered in the same order as method definition in app/controllers/concerns/op_turbo/component_stream.rb file, and add missing methods.
| # modifier to determine if the insert target should be modified | ||
| # relevant for append or prepend operations | ||
| def insert_target_modified? | ||
| true | ||
| end | ||
|
|
||
| def insert_target_modifier_id | ||
| "work-package-journals" | ||
| end |
There was a problem hiding this comment.
I don't get what this "insert target" is supposed to be. It's also mentioned on line 19 "Can specify insert targets for append/prepend operations" but that does not makes things tick for me.
What happens if insert_target_modified? returns false?
| %> | ||
| ``` | ||
|
|
||
| With this setup, we can creat turbo-stream updates in a rails controller quite easily: |
There was a problem hiding this comment.
| With this setup, we can creat turbo-stream updates in a rails controller quite easily: | |
| With this setup, turbo-stream updates can be sent from a rails controller: |
Maybe a personal taste, but I do not like subjective statements like "quite easily" in docs. It makes me feel stupid when I do not understand :)
|
|
||
| ## Usage alongside Primer Forms/Buttons | ||
|
|
||
| TODO: is `turbo: true` required here? |
There was a problem hiding this comment.
Should no longer be required now that turbo drive is enabled by default
|
|
||
| # ... | ||
|
|
||
| def update |
There was a problem hiding this comment.
One thing missing in the example above is a button which triggers the update method.
| scheme: :secondary, | ||
| size: :medium, | ||
| tag: :a, |
There was a problem hiding this comment.
| scheme: :secondary, | |
| size: :medium, | |
| tag: :a, |
These parameters are a distraction as they are not needed for understanding how Hotwire and Primer forms work together. Better remove them.
| end | ||
| %> | ||
| ``` | ||
|
|
There was a problem hiding this comment.
If the below example is different from the
| Rendering of a cancel button to remove the edition form. The button calls the `cancel_edit` action on the controller. The `cancel_edit` action sends a turbo stream `replace` to replace the journal edit form with the journal view. |
It would be nice to have also the code for the cancel_edit controller action.
| const context = await window.OpenProject.getPluginContext(); | ||
| this.turboRequests = context.services.turboRequests; |
There was a problem hiding this comment.
Sounds magic :)
Is TurboRequestsService an angular service? I guess it does not really matter as long as it works.
There was a problem hiding this comment.
yes it's an Angular service
Ticket