demo react-over-hotwired and proof #1508 fixed

Gemfile

@@ -5,7 +5,7 @@ git_source(:github) { |repo| "https://github.com/#{repo}.git" }
 
 ruby "3.1.2"
 
-gem "react_on_rails", "14.0.0"
+gem "react_on_rails", path: '../react_on_rails'
 gem "shakapacker", "7.2.1"
 
 # Bundle edge Rails instead: gem "rails", github: "rails/rails"

app/controllers/comments_controller.rb

@@ -33,6 +33,7 @@ def create
  format.html { redirect_to @comment, notice: I18n.t("Comment was successfully created.") }
  end
  format.json { render :show, status: :created, location: @comment }
+ format.turbo_stream
  else
  if turbo_frame_request?
  format.html
@@ -99,6 +100,10 @@ def inline_form
  end
  end
 
+ def test_1508
+ @comment = Comment.new
+ end
+
  private
 
  def set_comments

app/controllers/pages_controller.rb

@@ -38,6 +38,10 @@ def simple; end
 
  def rescript; end
 
+ def hotwired
+ @props = comments_json_string
+ end
+
  private
 
  def set_comments

app/views/comments/_form_1508.html.erb

@@ -0,0 +1,30 @@
+<%= form_for(@comment, html: { class: "flex flex-col gap-4" }) do |f| %>
+ <% if @comment.errors.any? %>
+ <div id="error_explanation" class="prose bg-pink-100 p-4 mb-4 border border-pink-200 rounded text-red-800 prose-strong:text-red-800 prose-ul:my-1">
+ <h2><%= pluralize(comment.errors.count, "error") %> prohibited this comment from being saved:</h2>
+
+ <ul>
+ <% comment.errors.full_messages.each do |message| %>
+ <li><%= message %></li>
+ <% end %>
+ </ul>
+ </div>
+ <% end %>
+
+ <div class="field">
+ <%= f.label :author, 'Your Name' %><br>
+ <%= f.text_field :author, class: "px-3 py-1 leading-4 border border-gray-300 rounded" %>
+ </div>
+ <div class="field">
+ <%= f.label :text, 'Say something using markdown...' %><br>
+ <%= f.text_area :text, class: "px-3 py-1 leading-4 border border-gray-300 rounded" %>
+ </div>
+ <div class="actions">
+ <%= f.submit 'Post', class: "self-start px-3 py-1 font-semibold border-0 rounded text-sky-50 bg-sky-600 hover:bg-sky-800 cursor-pointer" %>
+ </div>
+
+ <h1>Below is a react component which render inside a form (that will proof #1508 is fixed), You can turn-off the flag `force_load` and this below form will not show. </h1>
+ <div class="mx-10 border border-red-600 rounded">
+ <%= react_component('HotwiredCommentForm', props: { }, prerender: false, force_load: true) %>
+ </div>
+<% end %>

app/views/comments/create.turbo_stream.erb

@@ -0,0 +1,10 @@
+<%= turbo_stream.prepend "comments" do %>
+ <div>
+ <h2 class="text-blue-800"><%= @comment.author %></h2>
+ <span><%= markdown_to_html(@comment.text) %></span>
+ </div>
+<% end %>
+
+<%= turbo_stream.update "comment-form" do %>
+ <%= link_to "New Comment", new_comment_path, data: {turbo_stream: true} %>
+<% end %>

app/views/comments/new.turbo_stream.erb

@@ -0,0 +1,7 @@
+<%= turbo_stream.update "comment-form" do %>
+ <div class="p-5 m-5 border border-red-600 rounded">
+ <h2>New Comment</h2>
+
+ <%= react_component('HotwiredCommentForm', props: { }, prerender: false, force_load: true) %>
+ </div>
+<% end %>

app/views/comments/test_1508.turbo_stream.erb

@@ -0,0 +1,3 @@
+<%= turbo_stream.replace dom_id(@comment), target: '_top' do %>
+ <%= render partial: 'form_1508' %>
+<% end %>

app/views/pages/hotwired.html.erb

@@ -0,0 +1,8 @@
+<h2>Demo React Over Hotwired</h2>
+
+<%= react_component('HotwiredCommentScreen', props: @props, prerender: false) %>
+
+
+<%= turbo_frame_tag "new_comment" do %>
+ <%= link_to "proof that #1508 fixed", "/test_1508", data: {turbo_stream: true} %>
+<% end %>

client/app/bundles/comments/components/CommentBox/CommentList/CommentList.jsx

@@ -78,7 +78,7 @@ export default class CommentList extends BaseComponent {
  <div>
  {this.errorWarning()}
 
- <TransitionGroup className="commentList" component="div">
+ <TransitionGroup id="comments" className="commentList" component="div">
  {commentNodes}
  </TransitionGroup>
  </div>

client/app/bundles/comments/components/HotwiredCommentScreen/HotwiredCommentForm.jsx

@@ -0,0 +1,120 @@
+// eslint-disable-next-line max-classes-per-file
+import React from 'react';
+import request from 'axios';
+import Immutable from 'immutable';
+import _ from 'lodash';
+import ReactOnRails from 'react-on-rails';
+import { IntlProvider, injectIntl } from 'react-intl';
+import BaseComponent from 'libs/components/BaseComponent';
+import SelectLanguage from 'libs/i18n/selectLanguage';
+import { defaultMessages, defaultLocale } from 'libs/i18n/default';
+import { translations } from 'libs/i18n/translations';
+
+import { Turbo } from '@hotwired/turbo-rails';
+import CommentForm from '../CommentBox/CommentForm/CommentForm';
+import css from './HotwiredCommentScreen.module.scss';
+
+class HotwiredCommentForm extends BaseComponent {
+ constructor(props) {
+ super(props);
+
+ this.state = {
+ isSaving: false,
+ submitCommentError: null,
+ };
+
+ _.bindAll(this, 'handleCommentSubmit');
+ }
+
+ componentDidMount() {
+ }
+
+ handleCommentSubmit(comment) {
+ this.setState({ isSaving: true });
+
+ const requestConfig = {
+ responseType: 'text/vnd.turbo-stream.html',
+ headers: ReactOnRails.authenticityHeaders(),
+ };
+
+ return request
+ .post('comments.turbo_stream', { comment }, requestConfig)
+ .then(r => r.data)
+ .then(html => {
+ Turbo.renderStreamMessage(html)
+ })
+ .then(() => {
+ const { $$comments } = this.state;
+ const $$comment = Immutable.fromJS(comment);
+
+ this.setState({
+ $$comments: $$comments.unshift($$comment),
+ submitCommentError: null,
+ isSaving: false,
+ });
+ })
+ .catch((error) => {
+ this.setState({
+ submitCommentError: error,
+ isSaving: false,
+ });
+ });
+ }
+
+ render() {
+ const { handleSetLocale, locale, intl } = this.props;
+ const cssTransitionGroupClassNames = {
+ enter: css.elementEnter,
+ enterActive: css.elementEnterActive,
+ exit: css.elementLeave,
+ exitActive: css.elementLeaveActive,
+ };
+
+ return (
+ <div className="commentBox prose max-w-none prose-a:text-sky-700 prose-li:my-0">
+ {SelectLanguage(handleSetLocale, locale)}
+
+ <CommentForm
+ isSaving={this.state.isSaving}
+ actions={{ submitComment: this.handleCommentSubmit }}
+ error={{ error: this.state.submitCommentError, nodeRef: React.createRef(null) }}
+ cssTransitionGroupClassNames={cssTransitionGroupClassNames}
+ />
+
+ </div>
+ );
+ }
+}
+
+export default class I18nWrapper extends BaseComponent {
+ constructor(props) {
+ super(props);
+
+ this.state = {
+ locale: defaultLocale,
+ };
+
+ _.bindAll(this, 'handleSetLocale');
+ }
+
+ handleSetLocale(locale) {
+ this.setState({ locale });
+ }
+
+ render() {
+ const { locale } = this.state;
+ const messages = translations[locale];
+ const InjectedHotwiredCommentForm = injectIntl(HotwiredCommentForm);
+
+ return (
+ <IntlProvider locale={locale} key={locale} messages={messages}>
+ <InjectedHotwiredCommentForm
+ /* eslint-disable-next-line react/jsx-props-no-spreading */
+ {...this.props}
+ locale={locale}
+ handleSetLocale={this.handleSetLocale}
+ />
+ </IntlProvider>
+ );
+ }
+}

client/app/bundles/comments/components/HotwiredCommentScreen/HotwiredCommentScreen.jsx

@@ -0,0 +1,87 @@
+// eslint-disable-next-line max-classes-per-file
+import React from 'react';
+import Immutable from 'immutable';
+import ReactOnRails from 'react-on-rails';
+import { IntlProvider, injectIntl } from 'react-intl';
+import BaseComponent from 'libs/components/BaseComponent';
+import SelectLanguage from 'libs/i18n/selectLanguage';
+import { defaultMessages, defaultLocale } from 'libs/i18n/default';
+import { translations } from 'libs/i18n/translations';
+
+import CommentList from '../CommentBox/CommentList/CommentList';
+import css from './HotwiredCommentScreen.module.scss';
+
+class HotwiredCommentScreen extends BaseComponent {
+ constructor(props) {
+ super(props);
+
+ this.state = {
+ $$comments: Immutable.fromJS(props.comments),
+ };
+ }
+
+ componentDidMount() {
+ }
+
+ render() {
+ const { handleSetLocale, locale, intl } = this.props;
+ const { formatMessage } = intl;
+ const cssTransitionGroupClassNames = {
+ enter: css.elementEnter,
+ enterActive: css.elementEnterActive,
+ exit: css.elementLeave,
+ exitActive: css.elementLeaveActive,
+ };
+
+ return (
+ <div className="commentBox prose max-w-none prose-a:text-sky-700 prose-li:my-0">
+ <turbo-frame id="comment-box">
+ <h2>{formatMessage(defaultMessages.comments)}</h2>
+ {SelectLanguage(handleSetLocale, locale)}
+
+ <CommentList
+ $$comments={this.state.$$comments}
+ cssTransitionGroupClassNames={cssTransitionGroupClassNames}
+ />
+
+ <div id="comment-form">
+ <a data-turbo-stream="true" href="/comments/new">New Comment</a>
+ </div>
+ </turbo-frame>
+ </div>
+ );
+ }
+}
+
+export default class I18nWrapper extends BaseComponent {
+ constructor(props) {
+ super(props);
+
+ this.state = {
+ locale: defaultLocale,
+ };
+
+ _.bindAll(this, 'handleSetLocale');
+ }
+
+ handleSetLocale(locale) {
+ this.setState({ locale });
+ }
+
+ render() {
+ const { locale } = this.state;
+ const messages = translations[locale];
+ const InjectedHotwiredCommentScreen = injectIntl(HotwiredCommentScreen);
+
+ return (
+ <IntlProvider locale={locale} key={locale} messages={messages}>
+ <InjectedHotwiredCommentScreen
+ /* eslint-disable-next-line react/jsx-props-no-spreading */
+ {...this.props}
+ locale={locale}
+ handleSetLocale={this.handleSetLocale}
+ />
+ </IntlProvider>
+ );
+ }
+}

client/app/bundles/comments/components/HotwiredCommentScreen/HotwiredCommentScreen.module.scss

@@ -0,0 +1,17 @@
+.elementEnter {
+ opacity: 0.01;
+
+ &.elementEnterActive {
+ opacity: 1;
+ transition: opacity $animation-duration ease-in;
+ }
+}
+
+.elementLeave {
+ opacity: 1;
+
+ &.elementLeaveActive {
+ opacity: 0.01;
+ transition: opacity $animation-duration ease-in;
+ }
+}

client/app/bundles/comments/components/NavigationBar/NavigationBar.jsx

@@ -81,6 +81,14 @@ function NavigationBar(props) {
  Simple React
  </a>
  </li>
+ <li className={classNames({ 'bg-yellow-100': pathname === paths.HOTWIRED_PATH })}>
+ <a
+ className="px-2 py-4 w-full inline-block text-gray-500 hover:text-gray-700"
+ href={paths.HOTWIRED_PATH}
+ >
+ HotWired
+ </a>
+ </li>
  <li className={classNames({ 'bg-yellow-100': pathname === paths.STIMULUS_PATH })}>
  <a
  className="px-2 py-4 w-full inline-block text-gray-500 hover:text-gray-700"

client/app/bundles/comments/constants/paths.js

@@ -3,5 +3,6 @@ export const REACT_ROUTER_PATH = '/react-router';
 export const NO_ROUTER_PATH = '/no-router';
 export const RESCRIPT_PATH = '/rescript';
 export const SIMPLE_REACT_PATH = '/simple';
+export const HOTWIRED_PATH = '/hotwired';
 export const STIMULUS_PATH = '/stimulus';
 export const RAILS_PATH = '/comments';

client/app/packs/client-bundle.js

@@ -1,4 +1,5 @@
 import ReactOnRails from 'react-on-rails';
+import "@hotwired/turbo-rails";
 // eslint-disable-next-line import/no-webpack-loader-syntax
 import 'expose-loader?exposes=$,jQuery!jquery';
 import 'jquery-ujs';
@@ -12,6 +13,9 @@ import NavigationBarApp from '../bundles/comments/startup/NavigationBarApp';
 import Footer from '../bundles/comments/components/Footer/Footer';
 import RescriptShow from '../bundles/comments/rescript/ReScriptShow.bs.js';
 
+import HotwiredCommentForm from '../bundles/comments/components/HotwiredCommentScreen/HotwiredCommentForm';
+import HotwiredCommentScreen from '../bundles/comments/components/HotwiredCommentScreen/HotwiredCommentScreen';
+
 import '../assets/styles/application';
 
 ReactOnRails.setOptions({
@@ -25,6 +29,8 @@ ReactOnRails.register({
  RouterApp,
  NavigationBarApp,
  SimpleCommentScreen,
+ HotwiredCommentScreen,
+ HotwiredCommentForm,
  Footer,
  RescriptShow,
 });