Module: Webpacker::Helper
- Defined in:
- lib/webpacker/helper.rb
Instance Method Summary collapse
-
#asset_pack_path(name, **options) ⇒ Object
Computes the relative path for a given Webpacker asset.
-
#asset_pack_url(name, **options) ⇒ Object
Computes the absolute path for a given Webpacker asset.
-
#current_webpacker_instance ⇒ Object
Returns the current Webpacker instance.
-
#favicon_pack_tag(name, **options) ⇒ Object
Creates a link tag for a favicon that references the named pack file.
-
#image_pack_tag(name, **options) ⇒ Object
Creates an image tag that references the named pack file.
-
#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 config/webpack/shared.js.
-
#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 config/webpack/shared.js.
-
#preload_pack_asset(name, **options) ⇒ Object
Creates a link tag, for preloading, that references a given Webpacker asset.
-
#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 config/webpack/shared.js.
-
#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 config/webpack/shared.js.
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 asset_path helper. This will use asset_path 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, **) if current_webpacker_instance.config.extract_css? || !stylesheet?(name) asset_path(current_webpacker_instance.manifest.lookup!(name), ) 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 asset_url helper. This will use asset_url 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, **) if current_webpacker_instance.config.extract_css? || !stylesheet?(name) asset_url(current_webpacker_instance.manifest.lookup!(name), ) 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" />
59 60 61 |
# File 'lib/webpacker/helper.rb', line 59 def favicon_pack_tag(name, **) favicon_link_tag(resolve_path_to_image(name), ) 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' />
49 50 51 |
# File 'lib/webpacker/helper.rb', line 49 def image_pack_tag(name, **) image_tag(resolve_path_to_image(name), ) 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 config/webpack/shared.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>
71 72 73 |
# File 'lib/webpacker/helper.rb', line 71 def javascript_pack_tag(*names, **) javascript_include_tag(*sources_from_manifest_entries(names, type: :javascript), **) 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 config/webpack/shared.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’ %>
93 94 95 |
# File 'lib/webpacker/helper.rb', line 93 def javascript_packs_with_chunks_tag(*names, **) javascript_include_tag(*sources_from_manifest_entrypoints(names, type: :javascript), **) 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">
104 105 106 107 108 109 110 |
# File 'lib/webpacker/helper.rb', line 104 def preload_pack_asset(name, **) if self.class.method_defined?(:preload_link_tag) preload_link_tag(current_webpacker_instance.manifest.lookup!(name), ) 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 config/webpack/shared.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" />
128 129 130 131 132 |
# File 'lib/webpacker/helper.rb', line 128 def stylesheet_pack_tag(*names, **) if current_webpacker_instance.config.extract_css? stylesheet_link_tag(*sources_from_manifest_entries(names, type: :stylesheet), **) 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 config/webpack/shared.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’ %>
151 152 153 154 155 |
# File 'lib/webpacker/helper.rb', line 151 def stylesheet_packs_with_chunks_tag(*names, **) if current_webpacker_instance.config.extract_css? stylesheet_link_tag(*sources_from_manifest_entrypoints(names, type: :stylesheet), **) end end |