react_on_rails icon indicating copy to clipboard operation
react_on_rails copied to clipboard

should force load react-components which send over turbo-stream

Open theforestvn88 opened this issue 1 month ago • 5 comments

Summary

Support React On Rails w/Hotwire and Turbo Streams https://github.com/shakacode/react_on_rails/issues/1493, https://github.com/shakacode/react_on_rails/issues/1508

All turbo events (turbo:before-render, turbo:render,.. ) will not dispatch with TurboStream, except turbo:before-stream-render. And it looks like turbo-rails did not support a after-stream-render event, i don't know why yet.

But hotwired send html, react_on_rails send script, right ? So my solution: send a script that will trigger load react component along with it.

Pull Request checklist

  • i add a new render option: force_load which if true then the trigger load script will be concat with the component itself.

  • i not use reactOnRailsPageLoaded which will query and reload all current react-components (not effective), i introduce new method reactOnRailsComponentLoaded(react-component-dom-id) to load directly the react-component that the script be sent along with.

Other Information


This change is Reviewable

Summary by CodeRabbit

  • New Features

    • Introduced a new force_load configuration option for React components, allowing immediate loading.
    • Added Turbo Frame and Turbo Stream support, enabling dynamic updates and interactions.
    • Created a new React component HelloTurboStream for enhanced user interaction.
  • Bug Fixes

    • Ensured proper rendering and unmounting of React components based on domId.
  • Documentation

    • Updated examples and documentation to reflect new force_load and Turbo functionality.
  • Tests

    • Added tests for new Turbo Stream functionality and force_load configuration.

theforestvn88 avatar May 16 '24 08:05 theforestvn88