Skip to content

feat: Add vite_picture_tag for Rails 7.1 #409

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
ElMassimo merged 2 commits into from
Oct 5, 2023
Merged

feat: Add vite_picture_tag for Rails 7.1 #409

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
a5827d4
feat: Add vite_picture_tag for Rails 7.1
mattbrictson Oct 5, 2023
f517b49
chore: throw a more explicit warning when using `vite_picture_tag` in…
ElMassimo Oct 5, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
266 changes: 157 additions & 109 deletions Gemfile.lock
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -22,150 +22,201 @@ PATH
GEM
remote: https://rubygems.org/
specs:
actioncable (6.1.3.1)
actionpack (= 6.1.3.1)
activesupport (= 6.1.3.1)
actioncable (7.1.0)
Copy link
Copy Markdown
Contributor Author

@mattbrictson mattbrictson Oct 5, 2023

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

🗒️ I updated the lock file to be able to test against Rails 7.1.0. Let me know if I should split this into a separate commit or PR.

actionpack (= 7.1.0)
activesupport (= 7.1.0)
nio4r (~> 2.0)
websocket-driver (>= 0.6.1)
actionmailbox (6.1.3.1)
actionpack (= 6.1.3.1)
activejob (= 6.1.3.1)
activerecord (= 6.1.3.1)
activestorage (= 6.1.3.1)
activesupport (= 6.1.3.1)
zeitwerk (~> 2.6)
actionmailbox (7.1.0)
actionpack (= 7.1.0)
activejob (= 7.1.0)
activerecord (= 7.1.0)
activestorage (= 7.1.0)
activesupport (= 7.1.0)
mail (>= 2.7.1)
actionmailer (6.1.3.1)
actionpack (= 6.1.3.1)
actionview (= 6.1.3.1)
activejob (= 6.1.3.1)
activesupport (= 6.1.3.1)
net-imap
net-pop
net-smtp
actionmailer (7.1.0)
actionpack (= 7.1.0)
actionview (= 7.1.0)
activejob (= 7.1.0)
activesupport (= 7.1.0)
mail (~> 2.5, >= 2.5.4)
rails-dom-testing (~> 2.0)
actionpack (6.1.3.1)
actionview (= 6.1.3.1)
activesupport (= 6.1.3.1)
rack (~> 2.0, >= 2.0.9)
net-imap
net-pop
net-smtp
rails-dom-testing (~> 2.2)
actionpack (7.1.0)
actionview (= 7.1.0)
activesupport (= 7.1.0)
nokogiri (>= 1.8.5)
rack (>= 2.2.4)
rack-session (>= 1.0.1)
rack-test (>= 0.6.3)
rails-dom-testing (~> 2.0)
rails-html-sanitizer (~> 1.0, >= 1.2.0)
actiontext (6.1.3.1)
actionpack (= 6.1.3.1)
activerecord (= 6.1.3.1)
activestorage (= 6.1.3.1)
activesupport (= 6.1.3.1)
rails-dom-testing (~> 2.2)
rails-html-sanitizer (~> 1.6)
actiontext (7.1.0)
actionpack (= 7.1.0)
activerecord (= 7.1.0)
activestorage (= 7.1.0)
activesupport (= 7.1.0)
globalid (>= 0.6.0)
nokogiri (>= 1.8.5)
actionview (6.1.3.1)
activesupport (= 6.1.3.1)
actionview (7.1.0)
activesupport (= 7.1.0)
builder (~> 3.1)
erubi (~> 1.4)
rails-dom-testing (~> 2.0)
rails-html-sanitizer (~> 1.1, >= 1.2.0)
activejob (6.1.3.1)
activesupport (= 6.1.3.1)
erubi (~> 1.11)
rails-dom-testing (~> 2.2)
rails-html-sanitizer (~> 1.6)
activejob (7.1.0)
activesupport (= 7.1.0)
globalid (>= 0.3.6)
activemodel (6.1.3.1)
activesupport (= 6.1.3.1)
activerecord (6.1.3.1)
activemodel (= 6.1.3.1)
activesupport (= 6.1.3.1)
activestorage (6.1.3.1)
actionpack (= 6.1.3.1)
activejob (= 6.1.3.1)
activerecord (= 6.1.3.1)
activesupport (= 6.1.3.1)
marcel (~> 1.0.0)
mini_mime (~> 1.0.2)
activesupport (6.1.3.1)
activemodel (7.1.0)
activesupport (= 7.1.0)
activerecord (7.1.0)
activemodel (= 7.1.0)
activesupport (= 7.1.0)
timeout (>= 0.4.0)
activestorage (7.1.0)
actionpack (= 7.1.0)
activejob (= 7.1.0)
activerecord (= 7.1.0)
activesupport (= 7.1.0)
marcel (~> 1.0)
activesupport (7.1.0)
base64
bigdecimal
concurrent-ruby (~> 1.0, >= 1.0.2)
connection_pool (>= 2.2.5)
drb
i18n (>= 1.6, < 2)
minitest (>= 5.1)
mutex_m
tzinfo (~> 2.0)
zeitwerk (~> 2.3)
ansi (1.5.0)
ast (2.4.2)
benchmark-ips (2.9.1)
base64 (0.1.1)
benchmark-ips (2.12.0)
bigdecimal (3.1.4)
builder (3.2.4)
byebug (11.1.3)
coderay (1.1.3)
concurrent-ruby (1.2.2)
connection_pool (2.4.1)
crass (1.0.6)
docile (1.3.5)
date (3.3.3)
docile (1.4.0)
drb (2.1.1)
ruby2_keywords
dry-cli (1.0.0)
erubi (1.12.0)
globalid (0.4.2)
activesupport (>= 4.2.0)
globalid (1.2.1)
activesupport (>= 6.1)
i18n (1.14.1)
concurrent-ruby (~> 1.0)
json (2.5.1)
io-console (0.6.0)
irb (1.8.1)
rdoc
reline (>= 0.3.8)
json (2.6.3)
loofah (2.21.3)
crass (~> 1.0.2)
nokogiri (>= 1.12.0)
m (1.5.1)
m (1.6.2)
method_source (>= 0.6.7)
rake (>= 0.9.2.2)
mail (2.7.1)
mail (2.8.1)
mini_mime (>= 0.1.1)
marcel (1.0.1)
net-imap
net-pop
net-smtp
marcel (1.0.2)
method_source (1.0.0)
mini_mime (1.0.3)
mini_portile2 (2.8.2)
minitest (5.18.1)
minitest-reporters (1.4.3)
mini_mime (1.1.5)
mini_portile2 (2.8.4)
minitest (5.20.0)
minitest-reporters (1.6.1)
ansi
builder
minitest (>= 5.0)
ruby-progressbar
minitest-stub_any_instance (1.0.2)
nio4r (2.5.7)
nokogiri (1.15.2)
minitest-stub_any_instance (1.0.3)
mutex_m (0.1.2)
net-imap (0.4.0)
date
net-protocol
net-pop (0.1.2)
net-protocol
net-protocol (0.2.1)
timeout
net-smtp (0.4.0)
net-protocol
nio4r (2.5.9)
nokogiri (1.15.4)
mini_portile2 (~> 2.8.2)
racc (~> 1.4)
parallel (1.21.0)
parser (3.0.3.2)
parallel (1.23.0)
parser (3.2.2.4)
ast (~> 2.4.1)
pry (0.13.1)
racc
pry (0.14.2)
coderay (~> 1.1)
method_source (~> 1.0)
pry-byebug (3.9.0)
pry-byebug (3.10.1)
byebug (~> 11.0)
pry (~> 0.13.0)
pry (>= 0.13, < 0.15)
psych (5.1.0)
stringio
racc (1.7.1)
rack (2.2.7)
rack-proxy (0.7.6)
rack (3.0.8)
rack-proxy (0.7.7)
rack
rack-session (2.0.0)
rack (>= 3.0.0)
rack-test (2.1.0)
rack (>= 1.3)
rails (6.1.3.1)
actioncable (= 6.1.3.1)
actionmailbox (= 6.1.3.1)
actionmailer (= 6.1.3.1)
actionpack (= 6.1.3.1)
actiontext (= 6.1.3.1)
actionview (= 6.1.3.1)
activejob (= 6.1.3.1)
activemodel (= 6.1.3.1)
activerecord (= 6.1.3.1)
activestorage (= 6.1.3.1)
activesupport (= 6.1.3.1)
rackup (2.1.0)
rack (>= 3)
webrick (~> 1.8)
rails (7.1.0)
actioncable (= 7.1.0)
actionmailbox (= 7.1.0)
actionmailer (= 7.1.0)
actionpack (= 7.1.0)
actiontext (= 7.1.0)
actionview (= 7.1.0)
activejob (= 7.1.0)
activemodel (= 7.1.0)
activerecord (= 7.1.0)
activestorage (= 7.1.0)
activesupport (= 7.1.0)
bundler (>= 1.15.0)
railties (= 6.1.3.1)
sprockets-rails (>= 2.0.0)
rails-dom-testing (2.0.3)
activesupport (>= 4.2.0)
railties (= 7.1.0)
rails-dom-testing (2.2.0)
activesupport (>= 5.0.0)
minitest
nokogiri (>= 1.6)
rails-html-sanitizer (1.6.0)
loofah (~> 2.21)
nokogiri (~> 1.14)
railties (6.1.3.1)
actionpack (= 6.1.3.1)
activesupport (= 6.1.3.1)
method_source
rake (>= 0.8.7)
thor (~> 1.0)
rainbow (3.0.0)
railties (7.1.0)
actionpack (= 7.1.0)
activesupport (= 7.1.0)
irb
rackup (>= 1.0.0)
rake (>= 12.2)
thor (~> 1.0, >= 1.2.2)
zeitwerk (~> 2.6)
rainbow (3.1.1)
rake (13.0.6)
regexp_parser (2.2.0)
rexml (3.2.5)
rdoc (6.5.0)
psych (>= 4.0.0)
regexp_parser (2.8.1)
reline (0.3.9)
io-console (~> 0.5)
rexml (3.2.6)
rubocop (1.24.1)
parallel (~> 1.10)
parser (>= 3.0.0.0)
Expand All @@ -175,35 +226,32 @@ GEM
rubocop-ast (>= 1.15.1, < 2.0)
ruby-progressbar (~> 1.7)
unicode-display_width (>= 1.4.0, < 3.0)
rubocop-ast (1.15.1)
parser (>= 3.0.1.1)
rubocop-minitest (0.11.1)
rubocop-ast (1.29.0)
parser (>= 3.2.1.0)
rubocop-minitest (0.27.0)
rubocop (>= 0.90, < 2.0)
rubocop-performance (1.11.0)
rubocop-performance (1.19.1)
rubocop (>= 1.7.0, < 2.0)
rubocop-ast (>= 0.4.0)
ruby-progressbar (1.11.0)
ruby-progressbar (1.13.0)
ruby2_keywords (0.0.5)
simplecov (0.17.1)
docile (~> 1.1)
json (>= 1.8, < 3)
simplecov-html (~> 0.10.0)
simplecov-html (0.10.2)
spring (2.1.1)
sprockets (4.0.2)
concurrent-ruby (~> 1.0)
rack (> 1, < 3)
sprockets-rails (3.2.2)
actionpack (>= 4.0)
activesupport (>= 4.0)
sprockets (>= 3.0.0)
stringio (3.0.8)
thor (1.2.2)
timeout (0.4.0)
tzinfo (2.0.6)
concurrent-ruby (~> 1.0)
unicode-display_width (2.1.0)
websocket-driver (0.7.3)
unicode-display_width (2.5.0)
webrick (1.8.1)
websocket-driver (0.7.6)
websocket-extensions (>= 0.1.0)
websocket-extensions (0.1.5)
zeitwerk (2.6.8)
zeitwerk (2.6.12)

PLATFORMS
ruby
Expand Down
12 changes: 12 additions & 0 deletions test/helper_test.rb
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -180,4 +180,16 @@ def test_vite_image_tag
vite_image_tag('images/logo.png', srcset: { 'images/logo-2x.png' => '2x' }, alt: 'Logo')
}
end

if Rails.gem_version >= Gem::Version.new('7.1.0')
def test_vite_picture_tag
assert_equal <<~HTML.gsub(/\n\s*/, ''), vite_picture_tag('images/logo.svg', 'images/logo.png', class: 'test', image: { alt: 'Logo' })
<picture class="test">
<source srcset="/vite-production/assets/logo.322aae0c.svg" type="image/svg+xml" />
Copy link
Copy Markdown
Contributor

@mjankowski mjankowski Jun 7, 2024

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I realize this PR is ~9 months old, but this line has different output for me.

Running Rails 7.1.3.4, the type attribute is different. I see a failure like:

Failure:
HelperTest#test_vite_picture_tag [/Users/mjankowski/repos/vite_ruby/test/helper_test.rb:186]
Minitest::Assertion: --- expected
+++ actual
@@ -1 +1 @@
-"<picture class=\"test\"><source srcset=\"/vite-production/assets/logo.322aae0c.svg\" type=\"image/svg+xml\" /><source srcset=\"/vite-production/assets/logo.f42fb7ea.png\" type=\"image/png\" /><img alt=\"Logo\" src=\"/vite-production/assets/logo.f42fb7ea.png\" /></picture>"
+"<picture class=\"test\"><source srcset=\"/vite-production/assets/logo.322aae0c.svg\" type=\"svg\" /><source srcset=\"/vite-production/assets/logo.f42fb7ea.png\" type=\"png\" /><img alt=\"Logo\" src=\"/vite-production/assets/logo.f42fb7ea.png\" /></picture>"

Maybe related to rails/rails#48266 ?

Curious to see a CI run after #467

Copy link
Copy Markdown
Contributor Author

@mattbrictson mattbrictson Jun 7, 2024

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@mjankowski I can't reproduce what you are seeing locally. Using vite_ruby @ main, and running bundle up to get the latest gems, the test still passes for me:

$ bundle exec rake test TEST=test/helper_test.rb
...
14 tests, 36 assertions, 0 failures, 0 errors, 0 skips

$ bundle show rails
/Users/mbrictson/.rbenv/versions/3.1.1/lib/ruby/gems/3.1.0/gems/rails-7.1.3.4

Digging through the Rails source, my guess is that ActionView::Template::SimpleType is somehow being used in your environment, causing the mime type lookup to return svg instead of the correct image/svg+xml.

I found this comment:

SimpleType is mostly just a stub implementation for when Action View is used without Action Dispatch.

So maybe Action Dispatch isn't being loading in your environment, for some reason?

https://github.com/rails/rails/blob/v7.1.3.4/actionview/lib/action_view/template/types.rb#L9

Copy link
Copy Markdown
Contributor

@mjankowski mjankowski Jun 7, 2024

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Ah, thanks ... think I tracked it down.

I have a branch going trying to get rid of some of deprecation noise during spec run, and I did a bit of branch jam-up on myself, and I think I had eager_load disabled during that failure, which may explain the lack of the template being present (and it falling back to just ext string) during the run.

<source srcset="/vite-production/assets/logo.f42fb7ea.png" type="image/png" />
<img alt="Logo" src="/vite-production/assets/logo.f42fb7ea.png" />
</picture>
HTML
end
end
end
13 changes: 13 additions & 0 deletions vite_rails/lib/vite_rails/tag_helpers.rb
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -79,6 +79,19 @@ def vite_image_tag(name, **options)
image_tag(vite_asset_path(name), options)
end

# Public: Renders a <picture> tag with one or more Vite asset sources.
def vite_picture_tag(*sources, &block)
unless Rails.gem_version >= Gem::Version.new('7.1.0')
raise NotImplementedError, '`vite_picture_tag` is only available for Rails 7.1 or above.'
end

sources.flatten!
options = sources.extract_options!

vite_sources = sources.map { |src| vite_asset_path(src) }
picture_tag(*vite_sources, options, &block)
end

private

# Internal: Returns the current manifest loaded by Vite Ruby.
Expand Down