Module: Webpacker::Helper

Defined in:
lib/webpacker/helper.rb

Instance Method Summary collapse

Instance Method Details

#asset_pack_path(name, **options) ⇒ Object

Computes the relative path for a given Webpacker asset. Returns the relative path using manifest.json and passes it to path_to_asset helper. This will use path_to_asset internally, so most of their behaviors will be the same.

Example:

# When extract_css is false in webpacker.yml and the file is a css:
<%= asset_pack_path 'calendar.css' %>  # => nil

# When extract_css is true in webpacker.yml or the file is not a css:
<%= asset_pack_path 'calendar.css' %> # => "/packs/calendar-1016838bab065ae1e122.css"



20
21
22
23
24
 
# File 'lib/webpacker/helper.rb', line 20

def asset_pack_path(name, **options)
  if current_webpacker_instance.config.extract_css? || !stylesheet?(name)
    path_to_asset(current_webpacker_instance.manifest.lookup!(name), options)
  end
end

#asset_pack_url(name, **options) ⇒ Object

Computes the absolute path for a given Webpacker asset. Returns the absolute path using manifest.json and passes it to url_to_asset helper. This will use url_to_asset internally, so most of their behaviors will be the same.

Example:

# When extract_css is false in webpacker.yml and the file is a css:
<%= asset_pack_url 'calendar.css' %> # => nil

# When extract_css is true in webpacker.yml or the file is not a css:
<%= asset_pack_url 'calendar.css' %> # => "http://example.com/packs/calendar-1016838bab065ae1e122.css"



37
38
39
40
41
 
# File 'lib/webpacker/helper.rb', line 37

def asset_pack_url(name, **options)
  if current_webpacker_instance.config.extract_css? || !stylesheet?(name)
    url_to_asset(current_webpacker_instance.manifest.lookup!(name), options)
  end
end

#current_webpacker_instance ⇒ Object

Returns the current Webpacker instance. Could be overridden to use multiple Webpacker configurations within the same app (e.g. with engines).



5
6
7
 
# File 'lib/webpacker/helper.rb', line 5

def current_webpacker_instance
  Webpacker.instance
end

#favicon_pack_tag(name, **options) ⇒ Object

Creates a link tag for a favicon that references the named pack file.

Example:

<%= favicon_pack_tag 'mb-icon.png', rel: 'apple-touch-icon', type: 'image/png' %>
<link href="/packs/mb-icon-k344a6d59eef8632c9d1.png" rel="apple-touch-icon" type="image/png" />



68
69
70
 
# File 'lib/webpacker/helper.rb', line 68

def favicon_pack_tag(name, **options)
  favicon_link_tag(resolve_path_to_image(name), options)
end

#image_pack_tag(name, **options) ⇒ Object

Creates an image tag that references the named pack file.

Example:

<%= image_pack_tag 'application.png', size: '16x10', alt: 'Edit Entry' %>
<img alt='Edit Entry' src='/packs/application-k344a6d59eef8632c9d1.png' width='16' height='10' />

<%= image_pack_tag 'picture.png', srcset: { 'picture-2x.png' => '2x' } %>
<img srcset= "/packs/picture-2x-7cca48e6cae66ec07b8e.png 2x" src="/packs/picture-c38deda30895059837cf.png" >



52
53
54
55
56
57
58
59
60
 
# File 'lib/webpacker/helper.rb', line 52

def image_pack_tag(name, **options)
  if options[:srcset] && !options[:srcset].is_a?(String)
    options[:srcset] = options[:srcset].map do |src_name, size|
      "#{resolve_path_to_image(src_name)} #{size}"
    end.join(", ")
  end

  image_tag(resolve_path_to_image(name), options)
end

#javascript_pack_tag(*names, **options) ⇒ Object

Creates a script tag that references the named pack file, as compiled by webpack per the entries list in package/environments/base.js. By default, this list is auto-generated to match everything in app/javascript/packs/*.js. In production mode, the digested reference is automatically looked up.

Example:

<%= javascript_pack_tag 'calendar', 'data-turbolinks-track': 'reload' %> # =>
<script src="/packs/calendar-1016838bab065ae1e314.js" data-turbolinks-track="reload"></script>



80
81
82
 
# File 'lib/webpacker/helper.rb', line 80

def javascript_pack_tag(*names, **options)
  javascript_include_tag(*sources_from_manifest_entries(names, type: :javascript), **options)
end

#javascript_packs_with_chunks_tag(*names, **options) ⇒ Object

Creates script tags that reference the js chunks from entrypoints when using split chunks API, as compiled by webpack per the entries list in package/environments/base.js. By default, this list is auto-generated to match everything in app/javascript/packs/*.js and all the dependent chunks. In production mode, the digested reference is automatically looked up. See: webpack.js.org/plugins/split-chunks-plugin/

Example:

<%= javascript_packs_with_chunks_tag 'calendar', 'map', 'data-turbolinks-track': 'reload' %> # =>
<script src="/packs/vendor-16838bab065ae1e314.chunk.js" data-turbolinks-track="reload"></script>
<script src="/packs/calendar~runtime-16838bab065ae1e314.chunk.js" data-turbolinks-track="reload"></script>
<script src="/packs/calendar-1016838bab065ae1e314.chunk.js" data-turbolinks-track="reload"></script>
<script src="/packs/map~runtime-16838bab065ae1e314.chunk.js" data-turbolinks-track="reload"></script>
<script src="/packs/map-16838bab065ae1e314.chunk.js" data-turbolinks-track="reload"></script>

DO:

<%= javascript_packs_with_chunks_tag 'calendar', 'map' %>

DON’T:

<%= javascript_packs_with_chunks_tag 'calendar' %>
<%= javascript_packs_with_chunks_tag 'map' %>



107
108
109
 
# File 'lib/webpacker/helper.rb', line 107

def javascript_packs_with_chunks_tag(*names, **options)
  javascript_include_tag(*sources_from_manifest_entrypoints(names, type: :javascript), **options)
end

#preload_pack_asset(name, **options) ⇒ Object

Creates a link tag, for preloading, that references a given Webpacker asset. In production mode, the digested reference is automatically looked up. See: developer.mozilla.org/en-US/docs/Web/HTML/Preloading_content

Example:

<%= preload_pack_asset 'fonts/fa-regular-400.woff2' %> # =>
<link rel="preload" href="/packs/fonts/fa-regular-400-944fb546bd7018b07190a32244f67dc9.woff2" as="font" type="font/woff2" crossorigin="anonymous">



119
120
121
122
123
124
125
 
# File 'lib/webpacker/helper.rb', line 119

def preload_pack_asset(name, **options)
  if self.class.method_defined?(:preload_link_tag)
    preload_link_tag(current_webpacker_instance.manifest.lookup!(name), options)
  else
    raise "You need Rails >= 5.2 to use this tag."
  end
end

#stylesheet_pack_tag(*names, **options) ⇒ Object

Creates a link tag that references the named pack file, as compiled by webpack per the entries list in package/environments/base.js. By default, this list is auto-generated to match everything in app/javascript/packs/*.js. In production mode, the digested reference is automatically looked up.

Note: If the development server is running and hot module replacement is active, this will return nothing. In that setup you need to configure your styles to be inlined in your JavaScript for hot reloading.

Examples:

# When extract_css is false in webpacker.yml:
<%= stylesheet_pack_tag 'calendar', 'data-turbolinks-track': 'reload' %> # =>
nil

# When extract_css is true in webpacker.yml:
<%= stylesheet_pack_tag 'calendar', 'data-turbolinks-track': 'reload' %> # =>
<link rel="stylesheet" media="screen" href="/packs/calendar-1016838bab065ae1e122.css" data-turbolinks-track="reload" />



143
144
145
146
147
 
# File 'lib/webpacker/helper.rb', line 143

def stylesheet_pack_tag(*names, **options)
  if current_webpacker_instance.config.extract_css?
    stylesheet_link_tag(*sources_from_manifest_entries(names, type: :stylesheet), **options)
  end
end

#stylesheet_packs_with_chunks_tag(*names, **options) ⇒ Object

Creates link tags that reference the css chunks from entrypoints when using split chunks API, as compiled by webpack per the entries list in package/environments/base.js. By default, this list is auto-generated to match everything in app/javascript/packs/*.js and all the dependent chunks. In production mode, the digested reference is automatically looked up. See: webpack.js.org/plugins/split-chunks-plugin/

Examples:

<%= stylesheet_packs_with_chunks_tag 'calendar', 'map' %> # =>
<link rel="stylesheet" media="screen" href="/packs/3-8c7ce31a.chunk.css" />
<link rel="stylesheet" media="screen" href="/packs/calendar-8c7ce31a.chunk.css" />
<link rel="stylesheet" media="screen" href="/packs/map-8c7ce31a.chunk.css" />

DO:

<%= stylesheet_packs_with_chunks_tag 'calendar', 'map' %>

DON’T:

<%= stylesheet_packs_with_chunks_tag 'calendar' %>
<%= stylesheet_packs_with_chunks_tag 'map' %>



170
171
172
173
174
 
# File 'lib/webpacker/helper.rb', line 170

def stylesheet_packs_with_chunks_tag(*names, **options)
  if current_webpacker_instance.config.extract_css?
    stylesheet_link_tag(*sources_from_manifest_entrypoints(names, type: :stylesheet), **options)
  end
end