hotwired / hotwire-rails-demo-chat Goto Github PK

I'm just trying to render only the @messages = @room.messages.last(10), after a new message is created.
I tried 4 different ways, because I did not understand how to do it.

What I did is to render all messages after format.turbo_stream in messages_controller.rb, so in app/views/messages/create.turbo_stream.slim it looks like (I use Slim templates...):

= turbo_stream.replace :messages
  #messages
    == render partial: "messages/messages", locals: { messages: @messages }

And on sender side it works, and I see only the last 10 messages. But, because Message broadcasts_to :room, it will use append on the receiver side and each receiver see then 10 older messages and each appended one.

How can I use broadcasts_to :room or after_create_commit -> { broadcast_append_to room } respectively to broadcasts only last 10 messages for each room?

It should be possible to do this, right?

Replicating the process of generating the chat demo, there are a number of points I have picked up; if deemed necessary, I am willing to break these up into individual ones.

1 - un-reproducible behaviour. The elimination of the previously submitted string in the new message form remains in the refreshed form. form:

<%= turbo_frame_tag "new_message", target: "_top" do %>
  <%= form_with(model: [ @message.room, @message ],
        data: { controller: "reset_form", action: "turbo:submit-end->reset_form#reset" }) do |form| %>

stimulus controller

import { Controller } from "stimulus"

export default class extends Controller {
  reset() {
    this.element.reset()
  }
}

It even stays put as other messages are being driven to the room

Something might be wrong with the stimulus set-up, something missing, but where/how to de-bug?

2 - Feature policies. Rails's guide defines a default state.

config.action_dispatch.default_headers = {
  'X-Frame-Options' => 'SAMEORIGIN',
  'X-XSS-Protection' => '1; mode=block',
  'X-Content-Type-Options' => 'nosniff',
  'X-Download-Options' => 'noopen',
  'X-Permitted-Cross-Domain-Policies' => 'none',
  'Referrer-Policy' => 'strict-origin-when-cross-origin'
}

This default state for referrer is actually unaccepted by Chromium. origin-when-cross-origin is what google digests. The google default to a very restrictive position. Feature policies and Content-Security policies come to mind, given that hotwire is dealing with frames. Is this not a potential for breakage? what guidelines should be followed?

3 - Some older browsers (I recognize and accept my quirkiness), take a pass on hotwire - Safari 9, but also Safari 11 which isn't exactly cro-magnon...

Do we have an idea of which standards are baseline in order to inform/handle such uses?

4 - premisse: Firefox is my go-to browser and gets used heavily. In my observation, javascripts generate unexpected behaviours relating to the DOM.

This is an example. Aside form a page refresh, is there a way to 'reboot' the DOM if one notices the browser acting flaky (again this may be a moot point given the premisse) ?

Hi,

I have a question regarding "extra JS libraries" mentioned in the hotwire intro video.
Say I want to use Highcharts or head jQuery (which is ESM compatible) and still have them managed by Yarn.
What's the current/correct/suggested way to do it using import maps approach?

Thanks!

Note that the helpers that turn link_to into remote invocations will not currently work with Turbo. Links that have been made remote will not stick within frames nor will they allow you to respond with turbo stream actions. The recommendation is to replace these links with styled button_to, so you'll flow through a regular form, and you'll be better off with a11y compliance.

You can still use the data-confirm and data-disable-with.

So excited to try this out!

I ran the bin/setup script locally. When I tried running the demo app with bin/rails server I get the following error.

Is there another step to create this missing directory?

➜  hotwire-rails-demo-chat git:(main) ✗ rails server
=> Booting Puma
=> Rails 6.1.0 application starting in development
=> Run `bin/rails server --help` for more startup options
Puma starting in single mode...
* Puma version: 5.1.1 (ruby 2.7.1-p83) ("At Your Service")
*  Min threads: 5
*  Max threads: 5
*  Environment: development
*          PID: 11284
* Listening on http://127.0.0.1:3000
* Listening on http://[::1]:3000
Use Ctrl-C to stop
Started GET "/" for ::1 at 2020-12-22 13:57:00 -0500
   (0.9ms)  SELECT sqlite_version(*)
   (0.2ms)  SELECT "schema_migrations"."version" FROM "schema_migrations" ORDER BY "schema_migrations"."version" ASC
Processing by RoomsController#index as HTML
  Rendering layout layouts/application.html.erb
  Rendering rooms/index.html.erb within layouts/application
  Room Load (0.8ms)  SELECT "rooms".* FROM "rooms"
  ↳ app/views/rooms/index.html.erb:14
  Rendered rooms/index.html.erb within layouts/application (Duration: 8.1ms | Allocations: 996)
  Rendered layout layouts/application.html.erb (Duration: 52.3ms | Allocations: 10502)
Completed 500 Internal Server Error in 76ms (ActiveRecord: 0.8ms | Allocations: 14636)



ActionView::Template::Error (No such file or directory @ dir_initialize - ~/code/hotwire-rails-demo-chat/app/assets/javascripts/libraries):

app/assets/javascripts/importmap.json.erb:3:in `call'

Repro steps:

1. Run the app rails s
2. Create new room: http://localhost:3000/rooms/new
   3.a In the new room view, click "Back"

or

3.b Post a new message using input box

Expected

3.a User is redirected to rooms index without errors

Actual

3.a User is redirected, but there's a new error thrown in the browser console (Uncaught TypeError: this.subscription.unsubscribe is not a function)

Expected

3.b New message is posted and input box is cleared

Actual

3.b New message is posted, but the input box is not cleared

Seems like stimulus controller is not wired correctly.

In attempting to reproduce the steps of the introductory video, the new message frame is not rendering.

new message view

<h1>New Message</h1>

<%= turbo_frame_tag 'new_message', target: '_top' do %>
  <%= form_with(model: [ @message.room, @message ]) do |form| %>
    <div class="field" style='min-height: 25px;'>
      <%= form.text_field :content %>
      <%= form.submit "Send" %>
    </div>
  <% end %>
<% end %>

<%= link_to 'Back', @message.room %>

show room view

<%= turbo_frame_tag 'new message', src: new_room_message_path(@room), target: '_top' %>

Upon loading the page, the inspector shows the id='room' frame and its contents
but not that of the new_message

However the network tab does show the frame arriving

and its content is that of the new message form.

I am suspecting a CSS style is one component of the collapse, as the margins or padding within the blue box of the room tag are present in the video, but not in localhost render.

I fail to find the element(s) required to generate the proper rendering.

But that may not be a full explanation, as upon page load one frame is populated, but not the other,