Support for rails 7 #1238

simonsapiel · 2022-01-07T11:09:49Z

simonsapiel
Jan 7, 2022

Is there currently support for rails 7? I couldn't find anything on the docs. It seems that the css is breaking when trying to render a component. Using tailwind.

Answered by boardfish

Jan 14, 2022

I was unable to replicate the failure via our tests, but that might be because we're not hitting the check. Good job on finding the fix, though 👍 Sounds like an upstream fix would be appropriate.

View full answer

boardfish · 2022-01-07T16:25:13Z

boardfish
Jan 7, 2022
Maintainer

Hey there @simonsapiel! Yes, Rails 7 is supported. I suspect that the issue you're having may not be linked to ViewComponent itself, so I'll convert this to a discussion so that we can work to resolve it. Could you please follow these steps to replicate your issue in an isolated environment and provide us with more detail? Thanks in advance!

3 replies

simonsapiel Jan 8, 2022
Author

I'm currently running rails 7 with esbuild and have the following component aside_component.rb and aside_component.html.erb under components/admin/

<div class="hidden md:flex md:w-64 md:flex-col md:fixed md:inset-y-0">
    <!-- Sidebar component, swap this element with another sidebar if you like -->
    <div class="flex-1 flex flex-col min-h-0 border-r border-gray-200 bg-white">
        <div class="flex-1 flex flex-col pt-5 pb-4 overflow-y-auto">
            <div class="flex items-center flex-shrink-0 px-4">
                <img class="h-8 w-auto" src="https://tailwindui.com/img/logos/workflow-logo-indigo-600-mark-gray-800-text.svg" alt="Workflow" />
            </div>
            <nav class="mt-5 flex-1 px-2 bg-white space-y-2">
                <%= link_to admin_authenticated_root_path, class: "text-gray-600 hover:bg-gray-50 hover:text-gray-900 group flex items-center px-2 py-2 text-sm font-medium rounded-md" do %>
                    <svg
                        class="text-gray-800 mr-3 flex-shrink-0 h-6 w-6"
                        x-state:on="Current"
                        x-state:off="Default"
                        x-state-description='Current: "text-gray-500", Default: "text-gray-400 group-hover:text-gray-900"'
                        x-description="Heroicon name: outline/home"
                        xmlns="http://www.w3.org/2000/svg"
                        fill="none"
                        viewBox="0 0 24 24"
                        stroke="currentColor"
                        aria-hidden="true"
                    >
                        <path
                            stroke-linecap="round"
                            stroke-linejoin="round"
                            stroke-width="2"
                            d="M3 12l2-2m0 0l7-7 7 7M5 10v10a1 1 0 001 1h3m10-11l2 2m-2-2v10a1 1 0 01-1 1h-3m-6 0a1 1 0 001-1v-4a1 1 0 011-1h2a1 1 0 011 1v4a1 1 0 001 1m-6 0h6"
                        ></path>
                    </svg>
                    <span>Dashboard</span>
                <% end %>

                <%= link_to admin_courses_path, class: "text-gray-600 hover:bg-gray-50 hover:text-gray-900 group flex items-center px-2 py-2 text-sm font-medium rounded-md" do %>
                    <svg
                        class="text-gray-800 group-hover:text-gray-900 mr-3 flex-shrink-0 h-6 w-6"
                        x-state-description='undefined: "text-gray-500", undefined: "text-gray-400 group-hover:text-gray-900"'
                        x-description="Heroicon name: outline/users"
                        xmlns="http://www.w3.org/2000/svg"
                        fill="none"
                        viewBox="0 0 24 24"
                        stroke="currentColor"
                        aria-hidden="true"
                    >
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4.354a4 4 0 110 5.292M15 21H3v-1a6 6 0 0112 0v1zm0 0h6v-1a6 6 0 00-9-5.197M13 7a4 4 0 11-8 0 4 4 0 018 0z"></path>
                    </svg>
                    <span>Courses</span>
                <% end %>

                <a
                    href="#"
                    class="text-gray-600 hover:bg-gray-50 hover:text-gray-900 group flex items-center px-2 py-2 text-sm font-medium rounded-md"
                    x-state-description='undefined: "bg-gray-100 text-gray-900", undefined: "text-gray-600 hover:bg-gray-50 hover:text-gray-900"'
                >
                    <svg
                        class="text-gray-800 group-hover:text-gray-900 mr-3 flex-shrink-0 h-6 w-6"
                        x-state-description='undefined: "text-gray-500", undefined: "text-gray-400 group-hover:text-gray-900"'
                        x-description="Heroicon name: outline/folder"
                        xmlns="http://www.w3.org/2000/svg"
                        fill="none"
                        viewBox="0 0 24 24"
                        stroke="currentColor"
                        aria-hidden="true"
                    >
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 7v10a2 2 0 002 2h14a2 2 0 002-2V9a2 2 0 00-2-2h-6l-2-2H5a2 2 0 00-2 2z"></path>
                    </svg>
                    Projects
                </a>

                <a
                    href="#"
                    class="text-gray-600 hover:bg-gray-50 hover:text-gray-900 group flex items-center px-2 py-2 text-sm font-medium rounded-md"
                    x-state-description='undefined: "bg-gray-100 text-gray-900", undefined: "text-gray-600 hover:bg-gray-50 hover:text-gray-900"'
                >
                    <svg
                        class="text-gray-800 group-hover:text-gray-900 mr-3 flex-shrink-0 h-6 w-6"
                        x-state-description='undefined: "text-gray-500", undefined: "text-gray-400 group-hover:text-gray-900"'
                        x-description="Heroicon name: outline/calendar"
                        xmlns="http://www.w3.org/2000/svg"
                        fill="none"
                        viewBox="0 0 24 24"
                        stroke="currentColor"
                        aria-hidden="true"
                    >
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z"></path>
                    </svg>
                    Calendar
                </a>
                <div class="border-gray-200 border-t"></div>
                <a
                    href="#"
                    class="text-gray-600 hover:bg-gray-50 hover:text-gray-900 group flex items-center px-2 py-2 text-sm font-medium rounded-md"
                    x-state-description='undefined: "bg-gray-100 text-gray-900", undefined: "text-gray-600 hover:bg-gray-50 hover:text-gray-900"'
                >
                    <svg
                        class="text-gray-800 group-hover:text-gray-900 mr-3 flex-shrink-0 h-6 w-6"
                        x-state-description='undefined: "text-gray-500", undefined: "text-gray-400 group-hover:text-gray-900"'
                        x-description="Heroicon name: outline/inbox"
                        xmlns="http://www.w3.org/2000/svg"
                        fill="none"
                        viewBox="0 0 24 24"
                        stroke="currentColor"
                        aria-hidden="true"
                    >
                        <path
                            stroke-linecap="round"
                            stroke-linejoin="round"
                            stroke-width="2"
                            d="M20 13V6a2 2 0 00-2-2H6a2 2 0 00-2 2v7m16 0v5a2 2 0 01-2 2H6a2 2 0 01-2-2v-5m16 0h-2.586a1 1 0 00-.707.293l-2.414 2.414a1 1 0 01-.707.293h-3.172a1 1 0 01-.707-.293l-2.414-2.414A1 1 0 006.586 13H4"
                        ></path>
                    </svg>
                    Documents
                </a>

                <a
                    href="#"
                    class="text-gray-600 hover:bg-gray-50 hover:text-gray-900 group flex items-center px-2 py-2 text-sm font-medium rounded-md"
                    x-state-description='undefined: "bg-gray-100 text-gray-900", undefined: "text-gray-600 hover:bg-gray-50 hover:text-gray-900"'
                >
                    <svg
                        class="text-gray-800 group-hover:text-gray-900 mr-3 flex-shrink-0 h-6 w-6"
                        x-state-description='undefined: "text-gray-500", undefined: "text-gray-400 group-hover:text-gray-900"'
                        x-description="Heroicon name: outline/chart-bar"
                        xmlns="http://www.w3.org/2000/svg"
                        fill="none"
                        viewBox="0 0 24 24"
                        stroke="currentColor"
                        aria-hidden="true"
                    >
                        <path
                            stroke-linecap="round"
                            stroke-linejoin="round"
                            stroke-width="2"
                            d="M9 19v-6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2a2 2 0 002-2zm0 0V9a2 2 0 012-2h2a2 2 0 012 2v10m-6 0a2 2 0 002 2h2a2 2 0 002-2m0 0V5a2 2 0 012-2h2a2 2 0 012 2v14a2 2 0 01-2 2h-2a2 2 0 01-2-2z"
                        ></path>
                    </svg>
                    Reports
                </a>
            </nav>
        </div>
        <div class="flex-shrink-0 flex border-t border-gray-200 p-4">
            <a href="#" class="flex-shrink-0 w-full group block">
                <div class="flex items-center">
                    <div>
                        <img
                            class="inline-block h-9 w-9 rounded-full"
                            src="https://images.unsplash.com/photo-1472099645785-5658abf4ff4e?ixlib=rb-1.2.1&amp;ixid=eyJhcHBfaWQiOjEyMDd9&amp;auto=format&amp;fit=facearea&amp;facepad=2&amp;w=256&amp;h=256&amp;q=80"
                            alt=""
                        />
                    </div>
                    <div class="ml-3">
                        <p class="text-sm font-medium text-gray-700 group-hover:text-gray-900">
                            Tom Cook
                        </p>
                        <p class="text-xs font-medium text-gray-500 group-hover:text-gray-700">
                            View profile
                        </p>
                    </div>
                </div>
            </a>
        </div>
    </div>
</div>

Trying to render this with <%= render(Admin::AsideComponent.new(admin: current_admin)) %> seems to break the tailwind layout. If I just place the html from the component directly to the page I will get the correct result.

Also the rb file of the component is just

class Admin::AsideComponent < ViewComponent::Base
    def initialize(admin:)
      @admin = admin
    end
end

I cannot figure out where this is coming from.

simonsapiel Jan 8, 2022
Author

I have a feeling that this would somehow be related to esbuild. It's also worth noting that I'm using alpinejs, but that shouldn't have anything to do with view components.

Spone Jan 8, 2022
Maintainer

@simonsapiel Can you please provide a full repository that reproduces the issue? It's difficult to figure out what's going on with only some code extracts.

dark-panda · 2022-01-12T21:05:05Z

dark-panda
Jan 12, 2022

Not sure if it's truly related, but I noticed a Rails 7 issue related to stylesheet_link_tag, but this might be an issue only in testing. Using RSpec and when testing components using the render_inline test helper, I'm seeing the following:

# Spec:

it 'renders a component' do
  expect(render_inline(SomeComponent.new)).to have_selector('style')
end

# View:

= stylesheet_link_tag('foo.css')

Produces the following error:

Failures:

  1) SomeComponent render
     Failure/Error: = stylesheet_link_tag('foo.css')

     NoMethodError:
       undefined method `sending?' for nil:NilClass
     # ./.bundle/ruby/3.0.3/gems/sprockets-rails-3.4.2/lib/sprockets/rails/helper.rb:186:in `block in stylesheet_link_tag'
     # ./.bundle/ruby/3.0.3/gems/sprockets-rails-3.4.2/lib/sprockets/rails/helper.rb:184:in `map'
     # ./.bundle/ruby/3.0.3/gems/sprockets-rails-3.4.2/lib/sprockets/rails/helper.rb:184:in `stylesheet_link_tag'
     # ./app/components/some_component.html.haml:3:in `block in call'
     # ./.bundle/ruby/3.0.3/gems/haml-5.2.2/lib/haml/helpers.rb:379:in `block in capture_haml'
     # ./.bundle/ruby/3.0.3/gems/haml-5.2.2/lib/haml/helpers.rb:670:in `with_haml_buffer'
     # ./.bundle/ruby/3.0.3/gems/haml-5.2.2/lib/haml/helpers.rb:375:in `capture_haml'
     # ./.bundle/ruby/3.0.3/gems/haml-5.2.2/lib/haml/helpers/xss_mods.rb:66:in `capture_haml_with_haml_xss'
     # ./.bundle/ruby/3.0.3/gems/haml-5.2.2/lib/haml/helpers/action_view_mods.rb:46:in `capture_with_haml'
     # ./app/components/some_component.html.haml:2:in `call'
     # ./.bundle/ruby/3.0.3/gems/view_component-2.47.0/lib/view_component/compiler.rb:91:in `render_template_for'
     # ./.bundle/ruby/3.0.3/gems/view_component-2.47.0/lib/view_component/base.rb:90:in `render_in'
     # ./.bundle/ruby/3.0.3/gems/haml-5.2.2/lib/haml/helpers/action_view_mods.rb:15:in `render'
     # ./.bundle/ruby/3.0.3/gems/view_component-2.47.0/lib/view_component/test_helpers.rb:46:in `render_inline'
     # ./spec/components/some_component_spec.rb:12:in `block (3 levels) in <top (required)>'
     # ./spec/components/some_component_spec.rb:16:in `block (3 levels) in <top (required)>'
     # ./spec/spec_helper.rb:138:in `block (3 levels) in <top (required)>'
     # ./spec/spec_helper.rb:137:in `block (2 levels) in <top (required)>'
     # ./.bundle/ruby/3.0.3/gems/webmock-3.14.0/lib/webmock/rspec.rb:37:in `block (2 levels) in <top (required)>'

Seems that request is not making it into where it needs to be in Spockets. Not sure if this is a ViewComponent issue, a Rails issue, a Sprockets issue, or a Me issue, but will investigate -- this is the last error I'm getting out of our upgrade to Rails 7.0.1 so everything is actually working pretty well at the moment.

4 replies

boardfish Jan 13, 2022
Maintainer

Thanks @dark-panda — that seems well-contained enough to be replicated via a test case. I'll have a look into this as soon as I'm able. If I can replicate it, I'll create an issue where we can get to the bottom of it.

boardfish Jan 13, 2022
Maintainer

#1244 tries to replicate this (albeit via a controller). It seems to eliminate the possibility that there's an upstream issue with stylesheet_link_tag specifically, so perhaps your theory is correct.

The offending code in the stack trace is apparently here.

dark-panda Jan 13, 2022

Further to that, the code causing the issue I mentioned is here:

https://github.com/rails/rails/blob/main/actionview/lib/action_view/helpers/asset_tag_helper.rb#L545

Commits related to this:

rails/rails@0f3a895
rails/rails@f2a824a

Changing this code on the Rails side to the following fixes my issue:

def send_preload_links_header(preload_links, max_header_size: MAX_HEADER_SIZE)
  return if preload_links.empty?
  return if respond_to?(:response) && response&.sending?

Adding the safe navigation &. operator fixes the failing specs in our app. Perhaps an upstream fix is the solution in this particular case.

boardfish Jan 14, 2022
Maintainer

I was unable to replicate the failure via our tests, but that might be because we're not hitting the check. Good job on finding the fix, though 👍 Sounds like an upstream fix would be appropriate.

Answer selected by joelhawksley

Support for rails 7 #1238

Uh oh!

simonsapiel Jan 7, 2022

Replies: 2 comments · 7 replies

Uh oh!

boardfish Jan 7, 2022 Maintainer

Uh oh!

Uh oh!

simonsapiel Jan 8, 2022 Author

Uh oh!

simonsapiel Jan 8, 2022 Author

Uh oh!

Spone Jan 8, 2022 Maintainer

Uh oh!

dark-panda Jan 12, 2022

Uh oh!

boardfish Jan 13, 2022 Maintainer

Uh oh!

boardfish Jan 13, 2022 Maintainer

Uh oh!

dark-panda Jan 13, 2022

Uh oh!

boardfish Jan 14, 2022 Maintainer

simonsapiel
Jan 7, 2022

Replies: 2 comments 7 replies

boardfish
Jan 7, 2022
Maintainer

simonsapiel Jan 8, 2022
Author

simonsapiel Jan 8, 2022
Author

Spone Jan 8, 2022
Maintainer

dark-panda
Jan 12, 2022

boardfish Jan 13, 2022
Maintainer

boardfish Jan 13, 2022
Maintainer

boardfish Jan 14, 2022
Maintainer