should force load react-components which send over turbo-stream #1620
Conversation
WalkthroughThis update enhances the Changes
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? TipsChatThere are 3 ways to chat with CodeRabbit:
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)
Additionally, you can add CodeRabbit Configuration File (
|
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 3
Out of diff range and nitpick comments (1)
spec/dummy/app/controllers/pages_controller.rb (1)
Line range hint
14-14: Be cautious of potential XSS vulnerabilities.Ensure that the data being merged into
xss_payloadis properly sanitized to prevent XSS attacks.
Review Details
Configuration used: CodeRabbit UI
Review profile: CHILL
Files selected for processing (17)
- Gemfile.development_dependencies (1 hunks)
- lib/react_on_rails/configuration.rb (3 hunks)
- lib/react_on_rails/helper.rb (1 hunks)
- lib/react_on_rails/react_component/render_options.rb (1 hunks)
- node_package/src/ReactOnRails.ts (1 hunks)
- node_package/src/clientStartup.ts (1 hunks)
- node_package/src/types/index.ts (1 hunks)
- spec/dummy/app/controllers/pages_controller.rb (1 hunks)
- spec/dummy/app/views/pages/turbo_frame_tag_hello_world.html.erb (1 hunks)
- spec/dummy/app/views/pages/turbo_stream_send_hello_world.turbo_stream.erb (1 hunks)
- spec/dummy/client/app/packs/client-bundle.js (1 hunks)
- spec/dummy/client/app/startup/HelloTurboStream.jsx (1 hunks)
- spec/dummy/config/routes.rb (1 hunks)
- spec/dummy/package.json (1 hunks)
- spec/dummy/spec/helpers/react_on_rails_helper_spec.rb (1 hunks)
- spec/dummy/spec/system/integration_spec.rb (1 hunks)
- spec/react_on_rails/react_component/render_options_spec.rb (1 hunks)
Files not reviewed due to errors (2)
- node_package/src/clientStartup.ts (no review received)
- lib/react_on_rails/helper.rb (no review received)
Files skipped from review due to trivial changes (7)
- Gemfile.development_dependencies
- spec/dummy/app/views/pages/turbo_frame_tag_hello_world.html.erb
- spec/dummy/app/views/pages/turbo_stream_send_hello_world.turbo_stream.erb
- spec/dummy/client/app/packs/client-bundle.js
- spec/dummy/config/routes.rb
- spec/dummy/package.json
- spec/react_on_rails/react_component/render_options_spec.rb
Additional comments not posted (9)
spec/dummy/client/app/startup/HelloTurboStream.jsx (1)
8-13: Prop types validation looks good.spec/dummy/app/controllers/pages_controller.rb (1)
39-43: LGTM! The addition of@app_props_hello_from_turbo_streamis well-structured.lib/react_on_rails/react_component/render_options.rb (1)
94-96: LGTM! Theforce_loadmethod correctly retrieves the configuration value.node_package/src/types/index.ts (1)
129-129: LGTM! ThereactOnRailsComponentLoadedmethod is correctly defined in theReactOnRailsinterface.node_package/src/ReactOnRails.ts (1)
136-138: LGTM! The methodreactOnRailsComponentLoadedcorrectly delegates toClientStartup.reactOnRailsComponentLoaded.spec/dummy/spec/system/integration_spec.rb (1)
100-107: The new test case for TurboStream looks good and follows the existing pattern. It ensures that the TurboStream component is loaded and the expected text is present.spec/dummy/spec/helpers/react_on_rails_helper_spec.rb (1)
292-309: The new context for force load correctly tests theforce_loadoption by checking if the force load script is included or not based on the option.lib/react_on_rails/configuration.rb (2)
42-43: LGTM! The addition offorce_loadto the configuration method is consistent with the existing pattern.
57-58: LGTM! The addition offorce_loadto theattr_accessorlist is correct and necessary for the new functionality.
| @@ -68,7 +70,7 @@ def initialize(node_modules_location: nil, server_bundle_js_file: nil, prerender | |||
| same_bundle_for_client_and_server: nil, | |||
| i18n_dir: nil, i18n_yml_dir: nil, i18n_output_format: nil, | |||
| random_dom_id: nil, server_render_method: nil, rendering_props_extension: nil, | |||
| components_subdirectory: nil, auto_load_bundle: nil) | |||
| components_subdirectory: nil, auto_load_bundle: nil, force_load: nil) | |||
There was a problem hiding this comment.
Consider adding a comment explaining the purpose of force_load for better maintainability.
- components_subdirectory: nil, auto_load_bundle: nil, force_load: nil)
+ components_subdirectory: nil, auto_load_bundle: nil, force_load: nil) # force_load: Forces the loading of React componentsCommittable 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.
| components_subdirectory: nil, auto_load_bundle: nil, force_load: nil) | |
| components_subdirectory: nil, auto_load_bundle: nil, force_load: nil) # force_load: Forces the loading of React components |
There was a problem hiding this comment.
Fixed, but add comment on line 43
There was a problem hiding this comment.
The line 43 in the provided content of lib/react_on_rails/configuration.rb is part of the initialize method of the Configuration class. Specifically, it is where the force_load attribute is initialized. This attribute is crucial for the new functionality introduced in this pull request, which forces the loading of React components.
Here's the specific line from the file:
self.force_load = force_loadGiven the context and the purpose of the force_load attribute, a suitable comment would explain that this line is setting the default behavior for the force_load configuration, which is used to control whether React components are loaded immediately.
@theforestvn88, here's a suggested comment for line 43 in lib/react_on_rails/configuration.rb:
self.force_load = force_load # Sets the default behavior for force loading React componentsThis comment clarifies that the line is responsible for setting the default state of the force_load attribute, which is central to the new functionality introduced in your pull request. If this aligns with your expectations, you can add it to the code.
| class HelloTurboStream extends React.Component { | ||
| static propTypes = { | ||
| helloTurboStreamData: PropTypes.shape({ | ||
| name: PropTypes.string, | ||
| }).isRequired, | ||
| railsContext: PropTypes.object, | ||
| }; | ||
|
|
||
| constructor(props) { | ||
| super(props); | ||
| this.state = props.helloTurboStreamData; | ||
| this.setNameDomRef = this.setNameDomRef.bind(this); | ||
| this.handleChange = this.handleChange.bind(this); | ||
| } | ||
|
|
||
| setNameDomRef(nameDomNode) { | ||
| this.nameDomRef = nameDomNode; | ||
| } | ||
|
|
||
| handleChange() { | ||
| const name = this.nameDomRef.value; | ||
| this.setState({ name }); | ||
| } | ||
|
|
||
| render() { | ||
| const { name } = this.state; | ||
| const { railsContext } = this.props; | ||
|
|
||
| return ( | ||
| <div> | ||
| <h3 className={css.brightColor}>Hello, {name}!</h3> | ||
| {railsContext && <RailsContext {...{ railsContext }} />} | ||
| </div> | ||
| ); | ||
| } | ||
| } |
There was a problem hiding this comment.
Consider using functional components and hooks for better readability and performance.
- class HelloTurboStream extends React.Component {
- static propTypes = {
- helloTurboStreamData: PropTypes.shape({
- name: PropTypes.string,
- }).isRequired,
- railsContext: PropTypes.object,
- };
-
- constructor(props) {
- super(props);
- this.state = props.helloTurboStreamData;
- this.setNameDomRef = this.setNameDomRef.bind(this);
- this.handleChange = this.handleChange.bind(this);
- }
-
- setNameDomRef(nameDomNode) {
- this.nameDomRef = nameDomNode;
- }
-
- handleChange() {
- const name = this.nameDomRef.value;
- this.setState({ name });
- }
-
- render() {
- const { name } = this.state;
- const { railsContext } = this.props;
-
- return (
- <div>
- <h3 className={css.brightColor}>Hello, {name}!</h3>
- {railsContext && <RailsContext {...{ railsContext }} />}
- </div>
- );
- }
- }
+ const HelloTurboStream = ({ helloTurboStreamData, railsContext }) => {
+ const [name, setName] = useState(helloTurboStreamData.name);
+ const nameDomRef = useRef(null);
+
+ const handleChange = () => {
+ setName(nameDomRef.current.value);
+ };
+
+ return (
+ <div>
+ <h3 className={css.brightColor}>Hello, {name}!</h3>
+ {railsContext && <RailsContext {...{ railsContext }} />}
+ </div>
+ );
+ };
+
+ HelloTurboStream.propTypes = {
+ helloTurboStreamData: PropTypes.shape({
+ name: PropTypes.string,
+ }).isRequired,
+ railsContext: PropTypes.object,
+ };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.
| class HelloTurboStream extends React.Component { | |
| static propTypes = { | |
| helloTurboStreamData: PropTypes.shape({ | |
| name: PropTypes.string, | |
| }).isRequired, | |
| railsContext: PropTypes.object, | |
| }; | |
| constructor(props) { | |
| super(props); | |
| this.state = props.helloTurboStreamData; | |
| this.setNameDomRef = this.setNameDomRef.bind(this); | |
| this.handleChange = this.handleChange.bind(this); | |
| } | |
| setNameDomRef(nameDomNode) { | |
| this.nameDomRef = nameDomNode; | |
| } | |
| handleChange() { | |
| const name = this.nameDomRef.value; | |
| this.setState({ name }); | |
| } | |
| render() { | |
| const { name } = this.state; | |
| const { railsContext } = this.props; | |
| return ( | |
| <div> | |
| <h3 className={css.brightColor}>Hello, {name}!</h3> | |
| {railsContext && <RailsContext {...{ railsContext }} />} | |
| </div> | |
| ); | |
| } | |
| } | |
| const HelloTurboStream = ({ helloTurboStreamData, railsContext }) => { | |
| const [name, setName] = useState(helloTurboStreamData.name); | |
| const nameDomRef = useRef(null); | |
| const handleChange = () => { | |
| setName(nameDomRef.current.value); | |
| }; | |
| return ( | |
| <div> | |
| <h3 className={css.brightColor}>Hello, {name}!</h3> | |
| {railsContext && <RailsContext {...{ railsContext }} />} | |
| </div> | |
| ); | |
| }; | |
| HelloTurboStream.propTypes = { | |
| helloTurboStreamData: PropTypes.shape({ | |
| name: PropTypes.string, | |
| }).isRequired, | |
| railsContext: PropTypes.object, | |
| }; |
There was a problem hiding this comment.
Actionable comments posted: 0
Review Details
Configuration used: CodeRabbit UI
Review profile: CHILL
Files selected for processing (1)
- Gemfile.development_dependencies (1 hunks)
Files skipped from review as they are similar to previous changes (1)
- Gemfile.development_dependencies
|
@theforestvn88 Please
@Judahmeek did you see anything requiring changes? |
|
@theforestvn88 can you check if your PR solves the problem in #1508 (comment)? |
There was a problem hiding this comment.
Actionable comments posted: 0
Review Details
Configuration used: CodeRabbit UI
Review profile: CHILL
Files selected for processing (6)
- lib/react_on_rails/configuration.rb (4 hunks)
- lib/react_on_rails/helper.rb (1 hunks)
- spec/dummy/app/views/pages/turbo_frame_tag_hello_world.html.erb (1 hunks)
- spec/dummy/app/views/pages/turbo_stream_send_hello_world.turbo_stream.erb (1 hunks)
- spec/dummy/spec/helpers/react_on_rails_helper_spec.rb (1 hunks)
- spec/dummy/spec/system/integration_spec.rb (1 hunks)
Files skipped from review as they are similar to previous changes (6)
- lib/react_on_rails/configuration.rb
- lib/react_on_rails/helper.rb
- spec/dummy/app/views/pages/turbo_frame_tag_hello_world.html.erb
- spec/dummy/app/views/pages/turbo_stream_send_hello_world.turbo_stream.erb
- spec/dummy/spec/helpers/react_on_rails_helper_spec.rb
- spec/dummy/spec/system/integration_spec.rb
theforestvn88
force-pushed
the
react_over_hotwired
branch
from
7bfde72
to
c41e5f6
Compare
There was a problem hiding this comment.
Actionable comments posted: 0
Review Details
Configuration used: CodeRabbit UI
Review profile: CHILL
Files selected for processing (17)
- Gemfile.development_dependencies (1 hunks)
- lib/react_on_rails/configuration.rb (4 hunks)
- lib/react_on_rails/helper.rb (1 hunks)
- lib/react_on_rails/react_component/render_options.rb (1 hunks)
- node_package/src/ReactOnRails.ts (1 hunks)
- node_package/src/clientStartup.ts (1 hunks)
- node_package/src/types/index.ts (1 hunks)
- spec/dummy/app/controllers/pages_controller.rb (1 hunks)
- spec/dummy/app/views/pages/turbo_frame_tag_hello_world.html.erb (1 hunks)
- spec/dummy/app/views/pages/turbo_stream_send_hello_world.turbo_stream.erb (1 hunks)
- spec/dummy/client/app/packs/client-bundle.js (1 hunks)
- spec/dummy/client/app/startup/HelloTurboStream.jsx (1 hunks)
- spec/dummy/config/routes.rb (1 hunks)
- spec/dummy/package.json (1 hunks)
- spec/dummy/spec/helpers/react_on_rails_helper_spec.rb (1 hunks)
- spec/dummy/spec/system/integration_spec.rb (1 hunks)
- spec/react_on_rails/react_component/render_options_spec.rb (1 hunks)
Files skipped from review as they are similar to previous changes (17)
- Gemfile.development_dependencies
- lib/react_on_rails/configuration.rb
- lib/react_on_rails/helper.rb
- lib/react_on_rails/react_component/render_options.rb
- node_package/src/ReactOnRails.ts
- node_package/src/clientStartup.ts
- node_package/src/types/index.ts
- spec/dummy/app/controllers/pages_controller.rb
- spec/dummy/app/views/pages/turbo_frame_tag_hello_world.html.erb
- spec/dummy/app/views/pages/turbo_stream_send_hello_world.turbo_stream.erb
- spec/dummy/client/app/packs/client-bundle.js
- spec/dummy/client/app/startup/HelloTurboStream.jsx
- spec/dummy/config/routes.rb
- spec/dummy/package.json
- spec/dummy/spec/helpers/react_on_rails_helper_spec.rb
- spec/dummy/spec/system/integration_spec.rb
- spec/react_on_rails/react_component/render_options_spec.rb
theforestvn88
force-pushed
the
react_over_hotwired
branch
from
a762887
to
36c4c61
Compare
There was a problem hiding this comment.
@Judahmeek try this out.
@theforestvn88 looks great. sorry so long to get this reviewed!
|
Looks good. |
|
@G-Rath any opinions on this PR? |
|
@theforestvn88 can you fix the lint errors? |
i don't know what/where the lint errors are, the command Please help me ! |
There was a problem hiding this comment.
Actionable comments posted: 0
Outside diff range, codebase verification and nitpick comments (1)
spec/react_on_rails/react_component/render_options_spec.rb (1)
12-12: Add Tests forforce_loadOptionThe
force_loadoption is not currently tested in therender_options_spec.rbfile. Consider adding test cases to verify its behavior, similar to other configurable options. This will ensure that any changes to its functionality are properly validated.Analysis chain
Ensure
force_loadis tested.The
force_loadoption is added to the list of configurable options. Ensure that there are tests verifying its behavior, similar to other options.Scripts executed
The following scripts were executed for the analysis:
Script:
#!/bin/bash # Description: Verify that `force_load` is tested in the spec file. # Test: Search for tests related to `force_load`. Expect: At least one test case for `force_load`. rg --type ruby 'force_load' spec/react_on_rails/react_component/render_options_spec.rbLength of output: 101
Script:
#!/bin/bash # Description: Search for broader context around `force_load` in the spec file to verify if it is part of any test cases or assertions. rg --type ruby 'force_load' -A 5 spec/react_on_rails/react_component/render_options_spec.rbLength of output: 232
Script:
#!/bin/bash # Description: Search for test blocks or assertions involving `force_load` in the spec file. rg --type ruby -A 10 'it|describe|context' spec/react_on_rails/react_component/render_options_spec.rb | rg 'force_load'Length of output: 134
Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Files selected for processing (17)
- Gemfile.development_dependencies (1 hunks)
- lib/react_on_rails/configuration.rb (4 hunks)
- lib/react_on_rails/helper.rb (1 hunks)
- lib/react_on_rails/react_component/render_options.rb (1 hunks)
- node_package/src/ReactOnRails.ts (1 hunks)
- node_package/src/clientStartup.ts (1 hunks)
- node_package/src/types/index.ts (1 hunks)
- spec/dummy/app/controllers/pages_controller.rb (1 hunks)
- spec/dummy/app/views/pages/turbo_frame_tag_hello_world.html.erb (1 hunks)
- spec/dummy/app/views/pages/turbo_stream_send_hello_world.turbo_stream.erb (1 hunks)
- spec/dummy/client/app/packs/client-bundle.js (1 hunks)
- spec/dummy/client/app/startup/HelloTurboStream.jsx (1 hunks)
- spec/dummy/config/routes.rb (1 hunks)
- spec/dummy/package.json (1 hunks)
- spec/dummy/spec/helpers/react_on_rails_helper_spec.rb (1 hunks)
- spec/dummy/spec/system/integration_spec.rb (1 hunks)
- spec/react_on_rails/react_component/render_options_spec.rb (1 hunks)
Additional context used
Learnings (3)
spec/dummy/app/views/pages/turbo_stream_send_hello_world.turbo_stream.erb (1)
Learnt from: theforestvn88 PR: shakacode/react_on_rails#1620 File: spec/dummy/client/app/startup/HelloTurboStream.jsx:3-3 Timestamp: 2024-05-22T09:15:02.548Z Learning: The `RailsContext` import in `spec/dummy/client/app/startup/HelloTurboStream.jsx` is used later in the project, as clarified by the user theforestvn88.spec/dummy/client/app/packs/client-bundle.js (1)
Learnt from: theforestvn88 PR: shakacode/react_on_rails#1620 File: spec/dummy/client/app/startup/HelloTurboStream.jsx:3-3 Timestamp: 2024-05-22T09:15:02.548Z Learning: The `RailsContext` import in `spec/dummy/client/app/startup/HelloTurboStream.jsx` is used later in the project, as clarified by the user theforestvn88.spec/dummy/client/app/startup/HelloTurboStream.jsx (1)
Learnt from: theforestvn88 PR: shakacode/react_on_rails#1620 File: spec/dummy/client/app/startup/HelloTurboStream.jsx:3-3 Timestamp: 2024-05-22T09:15:02.548Z Learning: The `RailsContext` import in `spec/dummy/client/app/startup/HelloTurboStream.jsx` is used later in the project, as clarified by the user theforestvn88.
Additional comments not posted (18)
spec/dummy/app/views/pages/turbo_frame_tag_hello_world.html.erb (1)
1-3: LGTM!The use of
turbo_frame_tagis appropriate for encapsulating the button, facilitating Turbo Stream updates.spec/dummy/app/views/pages/turbo_stream_send_hello_world.turbo_stream.erb (1)
1-3: LGTM!The use of
turbo_stream.updateto load a React component withforce_load: trueeffectively integrates React with Turbo Streams.spec/dummy/client/app/packs/client-bundle.js (1)
5-13: LGTM!The import of
@hotwired/turbo-railsand settingturbo: trueinReactOnRails.setOptionsare appropriate for enabling Turbo functionality.spec/dummy/client/app/startup/HelloTurboStream.jsx (1)
1-30: LGTM!The use of functional components and hooks enhances readability and performance. The
RailsContextimport is correctly retained for future use.Gemfile.development_dependencies (1)
25-25: Approved: Addition ofturbo-railsgem.The inclusion of the
turbo-railsgem aligns with the PR's goal to enhance Turbo Streams integration and is correctly placed in the Gemfile.spec/dummy/app/controllers/pages_controller.rb (1)
39-43: Approved: Addition of@app_props_hello_from_turbo_stream.The new instance variable integrates well with existing data handling, enhancing functionality for Turbo Stream responses while maintaining XSS protection.
spec/dummy/config/routes.rb (1)
44-45: Ensure routes are necessary and secure.The new routes
turbo_frame_tag_hello_worldandturbo_stream_send_hello_worldare well-defined. Verify that these routes are necessary for your application and ensure that any sensitive data handled by these routes is properly secured.spec/dummy/package.json (1)
15-15: Verify compatibility of the new dependency.The addition of
@hotwired/turbo-railsversion^8.0.4should be checked for compatibility with existing dependencies. Ensure that this version aligns with your project's requirements and does not introduce conflicts.lib/react_on_rails/react_component/render_options.rb (1)
94-96: LGTM! Theforce_loadmethod is well-implemented.The new
force_loadmethod correctly follows the pattern for retrieving configuration values. Ensure that this method is used appropriately throughout the application.node_package/src/types/index.ts (1)
129-129: VerifyreactOnRailsComponentLoadedimplementation and usage.The method
reactOnRailsComponentLoadedis added to theReactOnRailsinterface. Ensure that this method is implemented correctly and used appropriately in the codebase.Verification successful
reactOnRailsComponentLoadedis implemented and used correctly.The method
reactOnRailsComponentLoadedis declared innode_package/src/types/index.tsand implemented innode_package/src/ReactOnRails.tsandnode_package/src/clientStartup.ts. It is used appropriately within the codebase.
- Declaration:
node_package/src/types/index.ts- Implementation:
node_package/src/ReactOnRails.tsnode_package/src/clientStartup.tsScripts executed
The following scripts were executed for the analysis:
Script:
#!/bin/bash # Description: Verify the implementation and usage of `reactOnRailsComponentLoaded`. # Test: Search for the implementation and usage of `reactOnRailsComponentLoaded`. Expect: At least one implementation and usage. rg --type typescript 'reactOnRailsComponentLoaded' node_package/srcLength of output: 102
Script:
#!/bin/bash # Description: Verify the implementation and usage of `reactOnRailsComponentLoaded`. # Test: Search for the implementation and usage of `reactOnRailsComponentLoaded`. Expect: At least one implementation and usage. rg --type ts 'reactOnRailsComponentLoaded' node_package/srcLength of output: 510
node_package/src/ReactOnRails.ts (1)
136-138: Verify linkage and functionality ofreactOnRailsComponentLoaded.The method
reactOnRailsComponentLoadedcallsClientStartup.reactOnRailsComponentLoaded. Verify that this linkage works correctly and that the functionality is tested.node_package/src/clientStartup.ts (1)
221-238: LGTM!The
reactOnRailsComponentLoadedfunction is well-implemented, handling both the presence and absence of the Rails context and DOM element gracefully.spec/dummy/spec/system/integration_spec.rb (1)
100-108: Test Suite Approved!The test case for the TurboStream component is well-structured and effectively verifies the immediate loading of the "hello-world" component.
spec/dummy/spec/helpers/react_on_rails_helper_spec.rb (1)
292-310: Testing Context Approved!The tests for the
force_loadtag option are well-designed, ensuring the correct behavior of thereact_componentmethod.lib/react_on_rails/configuration.rb (3)
42-44: LGTM! Clear comment forforce_load.The comment explaining the
force_loadoption is clear and enhances maintainability.
58-59: LGTM! Addition offorce_loadattribute.The
force_loadattribute is correctly added to theConfigurationclass.
Line range hint
74-112: LGTM!force_loadparameter in initializer.The
force_loadparameter is correctly added to the initializer and assigned to the class attribute.lib/react_on_rails/helper.rb (1)
444-451: LGTM! Conditional script tag forforce_load.The script tag is correctly appended when
force_loadis true, and the JavaScript function is called with the correct DOM ID.
Judahmeek
force-pushed
the
react_over_hotwired
branch
from
4b6dfd8
to
9b44715
Compare
There was a problem hiding this comment.
Actionable comments posted: 0
Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Files ignored due to path filters (3)
Gemfile.lockis excluded by!**/*.lockspec/dummy/Gemfile.lockis excluded by!**/*.lockspec/dummy/yarn.lockis excluded by!**/yarn.lock,!**/*.lock
Files selected for processing (17)
- Gemfile.development_dependencies (1 hunks)
- lib/react_on_rails/configuration.rb (4 hunks)
- lib/react_on_rails/helper.rb (1 hunks)
- lib/react_on_rails/react_component/render_options.rb (1 hunks)
- node_package/src/ReactOnRails.ts (1 hunks)
- node_package/src/clientStartup.ts (1 hunks)
- node_package/src/types/index.ts (1 hunks)
- spec/dummy/app/controllers/pages_controller.rb (1 hunks)
- spec/dummy/app/views/pages/turbo_frame_tag_hello_world.html.erb (1 hunks)
- spec/dummy/app/views/pages/turbo_stream_send_hello_world.turbo_stream.erb (1 hunks)
- spec/dummy/client/app/packs/client-bundle.js (1 hunks)
- spec/dummy/client/app/startup/HelloTurboStream.jsx (1 hunks)
- spec/dummy/config/routes.rb (1 hunks)
- spec/dummy/package.json (1 hunks)
- spec/dummy/spec/helpers/react_on_rails_helper_spec.rb (1 hunks)
- spec/dummy/spec/system/integration_spec.rb (1 hunks)
- spec/react_on_rails/react_component/render_options_spec.rb (1 hunks)
Files skipped from review due to trivial changes (2)
- Gemfile.development_dependencies
- spec/dummy/app/views/pages/turbo_frame_tag_hello_world.html.erb
Files skipped from review as they are similar to previous changes (14)
- lib/react_on_rails/configuration.rb
- lib/react_on_rails/helper.rb
- lib/react_on_rails/react_component/render_options.rb
- node_package/src/ReactOnRails.ts
- node_package/src/clientStartup.ts
- node_package/src/types/index.ts
- spec/dummy/app/controllers/pages_controller.rb
- spec/dummy/app/views/pages/turbo_stream_send_hello_world.turbo_stream.erb
- spec/dummy/client/app/startup/HelloTurboStream.jsx
- spec/dummy/config/routes.rb
- spec/dummy/package.json
- spec/dummy/spec/helpers/react_on_rails_helper_spec.rb
- spec/dummy/spec/system/integration_spec.rb
- spec/react_on_rails/react_component/render_options_spec.rb
Additional context used
Learnings (1)
spec/dummy/client/app/packs/client-bundle.js (1)
Learnt from: theforestvn88 PR: shakacode/react_on_rails#1620 File: spec/dummy/client/app/startup/HelloTurboStream.jsx:3-3 Timestamp: 2024-05-22T09:15:02.548Z Learning: The `RailsContext` import in `spec/dummy/client/app/startup/HelloTurboStream.jsx` is used later in the project, as clarified by the user theforestvn88.
Additional comments not posted (4)
spec/dummy/client/app/packs/client-bundle.js (4)
5-5: Import of Turbo Rails is appropriate.The addition of
@hotwired/turbo-railsis correctly placed and necessary for the integration of Turbo Streams.
9-9: Import of HelloTurboStream is appropriate.The addition of
HelloTurboStreamis correctly placed and aligns with the goal of enhancing interactivity with Turbo Streams.
14-15: Turbo configuration is correctly implemented.The
turbo: trueoption enables Turbo functionality and is consistent with the PR objectives.
17-18: Component registration is correctly implemented.Registering
HelloTurboStreamensures that the component is available for use, aligning with the PR objectives.
There was a problem hiding this comment.
Actionable comments posted: 0
Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Files selected for processing (1)
- spec/dummy/spec/system/integration_spec.rb (2 hunks)
Files skipped from review as they are similar to previous changes (1)
- spec/dummy/spec/system/integration_spec.rb
There was a problem hiding this comment.
Actionable comments posted: 0
Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Files selected for processing (1)
- spec/dummy/client/app/packs/client-bundle.js (1 hunks)
Files skipped from review as they are similar to previous changes (1)
- spec/dummy/client/app/packs/client-bundle.js
|
Need new task to update https://github.com/shakacode/react_on_rails/blob/master/docs/rails/turbolinks.md#using-turbo Merging... |
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.
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
Summary by CodeRabbit
New Features
force_loadconfiguration option for React components, allowing immediate loading.HelloTurboStreamthat displays personalized greetings.Bug Fixes
Tests
force_loadconfiguration.