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

theforestvn88 · 2024-05-04T13:26:50Z

Summary

Support React On Rails w/Hotwire and Turbo Streams #1493, #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.

I add a new render option: force_load which if true then the trigger load script will be concat with the component itself.
about the trigger load script : 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.

Pull Request checklist

Other Information

This change is

Summary by CodeRabbit

New Features
- Added a new configuration option to control forced loading of components.
- Introduced script inclusion based on rendering options.
- Implemented Turbo Stream capabilities for React components.
Enhancements
- Enhanced component loading mechanisms to support dynamic DOM IDs.
Documentation
- Updated helper and integration test documentation to reflect new features and use cases.
Bug Fixes
- Adjusted configuration defaults and component pack loading settings.
Refactor
- Streamlined React component rendering and configuration retrieval processes.
Tests
- Added new test cases for React component interactions with Turbo Streams.

coderabbitai · 2024-05-04T13:27:03Z

Important

Auto Review Skipped

Auto reviews are disabled on base/target branches other than the default branch. Please add the base/target branch pattern to the list of additional branches to be reviewed in the settings.

Please check the settings in the CodeRabbit UI or the .coderabbit.yaml file in this repository. To trigger a single review, invoke the @coderabbitai review command.

You can disable this status message by setting the reviews.review_status to false in the CodeRabbit configuration file.

Walkthrough

The recent updates focus on enhancing the React on Rails integration by introducing a force_load configuration option to control script loading explicitly. The changes span across configuration settings, helper methods, and TypeScript declarations, ensuring components can be dynamically loaded with Turbo Streams. Additionally, new routes and tests confirm the integration's functionality and robustness.

Changes

Files	Summary
`configuration.rb`, `helper.rb`, `react_component/render_options.rb`	Added `force_load` option and updated methods to support script conditionals based on this new setting.
`ReactOnRails.ts`, `clientStartup.ts`, `types/index.ts`	Extended ReactOnRails TypeScript definitions and functions to handle component loading.
`Gemfile`, `app/controllers/pages_controller.rb`, `client/app/packs/client-bundle.js`, `config/routes.rb`, `package.json`	Integrated `turbo-rails`, updated controllers, routes, and package configurations to support Turbo Stream functionalities.
`app/views/pages/...`, `client/app/startup/HelloTurboStream.jsx`	Added new views and a React component to work with Turbo Streams, enhancing dynamic content handling.
`spec/...`	Expanded testing to cover new functionalities and ensure the robustness of the `force_load` implementation and Turbo Stream integration.

🐰✨
In the code's woven warren, a new toggle we thread,
force_load springs to life, in Ruby's cozy bed.
With Turbo's swift currents, our components now stream,
ReactOnRails dances, a developer's dream.
Cheers to the crafts, where bits and bytes convene! 🎉🚀
🐰✨

Thank you for using CodeRabbit. We offer it for free to the OSS community and would appreciate your support in helping us grow. If you find it useful, would you consider giving us a shout-out on your favorite social media?

Share

Tips

Chat

There are 3 ways to chat with CodeRabbit:

Review comments: Directly reply to a review comment made by CodeRabbit. Example:
- I pushed a fix in commit <commit_id>.
- Generate unit testing code for this file.
- Open a follow-up GitHub issue for this discussion.
Files and specific lines of code (under the "Files changed" tab): Tag @coderabbitai in a new review comment at the desired location with your query. Examples:
- @coderabbitai generate unit testing code for this file.
- @coderabbitai modularize this function.
PR comments: Tag @coderabbitai in a new PR comment to ask questions about the PR branch. For the best results, please provide a very specific query, as very limited context is provided in this mode. Examples:
- @coderabbitai generate interesting stats about this repository and render them as a table.
- @coderabbitai show all the console.log statements in this repository.
- @coderabbitai read src/utils.ts and generate unit testing code.
- @coderabbitai read the files in the src/scheduler package and generate a class diagram using mermaid and a README in the markdown format.

Note: Be mindful of the bot's finite context window. It's strongly recommended to break down tasks such as reading entire modules into smaller chunks. For a focused discussion, use review comments to chat about specific files and their changes, instead of using the PR comments.

CodeRabbit Commands (invoked as PR comments)

@coderabbitai pause to pause the reviews on a PR.
@coderabbitai resume to resume the paused reviews.
@coderabbitai review to trigger a review. This is useful when automatic reviews are disabled for the repository.
@coderabbitai resolve resolve all the CodeRabbit review comments.
@coderabbitai help to get help.

Additionally, you can add @coderabbitai ignore anywhere in the PR description to prevent this PR from being reviewed.

CodeRabbit Configration File (`.coderabbit.yaml`)

You can programmatically configure CodeRabbit by adding a .coderabbit.yaml file to the root of your repository.
Please see the configuration documentation for more information.
If your editor has YAML language server enabled, you can add the path at the top of this file to enable auto-completion and validation: # yaml-language-server: $schema=https://coderabbit.ai/integrations/schema.v2.json

Documentation and Community

Visit our Documentation for detailed information on how to use CodeRabbit.
Join our Discord Community to get help, request features, and share feedback.
Follow us on X/Twitter for updates and announcements.

coderabbitai

Actionable comments posted: 1

coderabbitai · 2024-05-04T13:32:00Z

node_package/src/clientStartup.ts

+    context.roots = [];
+  }
+
+  const el = document.querySelector(`[data-dom-id=${domId}]`);


Ensure domId is sanitized to prevent potential XSS vulnerabilities.

- const el = document.querySelector(`[data-dom-id=${domId}]`); + const el = document.querySelector(`[data-dom-id='${CSS.escape(domId)}']`);

Committable suggestion

‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation.

Suggested change

const el = document.querySelector(`[data-dom-id=${domId}]`);

const el = document.querySelector(`[data-dom-id='${CSS.escape(domId)}']`);

justin808

@Judahmeek please review carefully

justin808 · 2024-05-05T02:12:43Z

spec/dummy/app/views/pages/turbo_frame_tag_hello_world.html.erb

@@ -0,0 +1,3 @@
+<%= turbo_frame_tag 'hello-turbo-stream' do %>
+    <%= button_to "send me hello-turbo-stream component", turbo_stream_send_hello_world_path %>
+<% end %>


please add return

hi, i don't get it! what should i 'return' here. some document like other pages, right ?

justin808 · 2024-05-10T05:19:09Z

@theforestvn88 Thanks! @Judahmeek and I will review!

Judahmeek

Overall, this seems like a solid piece of work.

Please make the requested changes while I look into resolving the CI failures related to Bundler version mismatch (in other words, the CI failures not related to your PR)

Judahmeek · 2024-05-14T07:05:46Z

spec/dummy/app/views/pages/turbo_stream_send_hello_world.turbo_stream.erb

@@ -0,0 +1,3 @@
+<%= turbo_stream.update 'hello-turbo-stream' do %>
+    <%= react_component("HelloTurboStream", props: @app_props_hello_from_turbo_stream, force_load: true) %>
+<% end %>


please add return

Judahmeek · 2024-05-14T07:06:37Z

spec/dummy/Gemfile

@@ -5,3 +5,5 @@ source "https://rubygems.org"
 eval_gemfile File.expand_path("../../Gemfile.development_dependencies", __dir__)

 gem "react_on_rails", path: "../.."
+
+gem "turbo-rails"


please add this gem to the Gemfile.development_dependencies file instead of here.

Judahmeek · 2024-05-15T07:45:22Z

@theforestvn88 please rebase your PR on shakacode:judahmeek/bundler-version

justin808 · 2024-05-15T08:42:45Z

@theforestvn88 that PR is merged. Rebase on master please!

justin808 · 2024-05-16T02:44:05Z

@theforestvn88 please rebase your PR on shakacode:judahmeek/bundler-version

@Judahmeek that wasn't good advice as the branch got deleted.

justin808 · 2024-05-16T02:45:58Z

@Judahmeek @theforestvn88 I recreated the branch so I could reopen this PR.

Can I see an example of this fix used in https://github.com/shakacode/react-webpack-rails-tutorial? @theforestvn88 can you make a PR against that repo?

* swap functions so the right errors show up

* add top level Gemfile.lock

justin808 · 2024-05-17T03:59:31Z

Looks like #1620 takes over.

coderabbitai bot reviewed May 4, 2024

View reviewed changes

justin808 reviewed May 5, 2024

View reviewed changes

Judahmeek requested changes May 14, 2024

View reviewed changes

Judahmeek changed the base branch from master to judahmeek/bundler-version May 15, 2024 07:36

make sure that bundler:2.5.3 is used (shakacode#1618)

87fee8c

justin808 deleted the branch shakacode:judahmeek/bundler-version May 15, 2024 08:26

justin808 closed this May 15, 2024

justin808 reopened this May 16, 2024

Make pack generation import statement commitable (shakacode#1610)

1295ce9

* swap functions so the right errors show up

justin808 mentioned this pull request May 16, 2024

Turbo forms with react_component not rendering React #1508

Open

theforestvn88 force-pushed the react_over_hotwired branch from 3441a27 to 8dce819 Compare May 16, 2024 07:58

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

4f44915

theforestvn88 force-pushed the react_over_hotwired branch from 8dce819 to 4f44915 Compare May 16, 2024 08:01

justin808 added 3 commits May 15, 2024 22:17

Update README.md

fef75be

Switch to bundler 2.5.9 and commit top gemfile.lock (shakacode#1619)

0c9fb65

* add top level Gemfile.lock

Merge branch 'master' into react_over_hotwired

d2e0e27

justin808 closed this May 17, 2024

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

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

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

theforestvn88 commented May 4, 2024 •

edited by coderabbitai bot

coderabbitai bot commented May 4, 2024 •

edited

Auto Review Skipped

Chat

CodeRabbit Commands (invoked as PR comments)

CodeRabbit Configration File (`.coderabbit.yaml`)

Documentation and Community

coderabbitai bot left a comment

coderabbitai bot May 4, 2024

justin808 left a comment

justin808 May 5, 2024

theforestvn88 May 15, 2024

justin808 commented May 10, 2024

Judahmeek left a comment

Judahmeek May 14, 2024

Judahmeek May 14, 2024

Judahmeek commented May 15, 2024

justin808 commented May 15, 2024

justin808 commented May 16, 2024

justin808 commented May 16, 2024

justin808 commented May 17, 2024

	const el = document.querySelector(`[data-dom-id=${domId}]`);
	const el = document.querySelector(`[data-dom-id='${CSS.escape(domId)}']`);

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

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

Conversation

theforestvn88 commented May 4, 2024 • edited by coderabbitai bot

Summary

Pull Request checklist

Other Information

Summary by CodeRabbit

coderabbitai bot commented May 4, 2024 • edited

Auto Review Skipped

Walkthrough

Changes

Chat

CodeRabbit Commands (invoked as PR comments)

CodeRabbit Configration File (.coderabbit.yaml)

Documentation and Community

coderabbitai bot left a comment

Choose a reason for hiding this comment

coderabbitai bot May 4, 2024

Choose a reason for hiding this comment

justin808 left a comment

Choose a reason for hiding this comment

justin808 May 5, 2024

Choose a reason for hiding this comment

theforestvn88 May 15, 2024

Choose a reason for hiding this comment

justin808 commented May 10, 2024

Judahmeek left a comment

Choose a reason for hiding this comment

Judahmeek May 14, 2024

Choose a reason for hiding this comment

Judahmeek May 14, 2024

Choose a reason for hiding this comment

Judahmeek commented May 15, 2024

justin808 commented May 15, 2024

justin808 commented May 16, 2024

justin808 commented May 16, 2024

justin808 commented May 17, 2024

theforestvn88 commented May 4, 2024 •

edited by coderabbitai bot

coderabbitai bot commented May 4, 2024 •

edited

CodeRabbit Configration File (`.coderabbit.yaml`)