webpack_manifest 0.2.3 → 0.2.4

checksums.yaml

@@ -1,7 +1,7 @@
 ---
-SHA256:
-  metadata.gz: 05ba4c9fac1b820423d2ca2ee97138d66c4ee63211fbca761af32f6412779602
-  data.tar.gz: 20ceb3a78be00f2e5f9e798737a6437e6446393e5f18037cd369b8024d569ce4
+SHA1:
+  metadata.gz: 3c84129d2cae2ae37bbae7b815e1ab134a6c2888
+  data.tar.gz: 40d2d9570f9c4062217e458fe611b1236448663d
 SHA512:
-  metadata.gz: 02daf66500053b50f1afc8cc780c8bc1dbf82c0dbb5847a77f9e06e778a5bf230a2958aa366b4f4e50cd7babb95f14540e63341413e0fb26cd17397d7d096462
-  data.tar.gz: a4c262cf3f7c48487e4f95c1646a646c466f50ead4477926263e190c8870abf0ee2cb54e8af6a2dcb82cf2fed6397d32820b1c8fb753e1a2284cdee2b3e3cb1a
+  metadata.gz: f346cc44f955707241a230d7ee70a0b89b2b96e171c595811d8a61259bfb8e7228d5242fee13b2effb6ed45e72c6a12ac407d722c44123d36c71d847d7ca0add
+  data.tar.gz: e0a0c11b1ac4c5cda1b06592f5e6a8e4ac5c95922161aa07e3831cec2a58a353cd30398adc03943860359787d1ee983941ca785070bfdca84b32e36b73ea17c4

data/CHANGELOG.md

@@ -1,3 +1,9 @@
+# 0.2.4 / 2019-03-25
+
+## Enhancements:
+
+* Added `javascript_bundles_with_chunks_tag` and `stylesheet_bundles_with_chunks_tag` helpers, which creates html tags for a pack and all the dependent chunks, when using splitChunks. (#7)
+
 # 0.2.3 / 2018-11-18
 
 * Support passing symbols to helper methods (#5) by @jmortlock

data/README.md

@@ -104,6 +104,54 @@ image_bundle_tag "icon.png", size: "16x10", alt: "Edit Entry"
         height="10" alt="Edit Entry" />
 ```
 
+
+#### `javascript_bundles_with_chunks_tag` and `stylesheet_bundles_with_chunks_tag`
+
+**Experimental** These are the helpers, which are similar to Webpacker, to support `splitChunks` feature introduced since Webpack 4.
+
+For the full configuration options of splitChunks, see the Webpack's [documentation](https://webpack.js.org/plugins/split-chunks-plugin/).
+
+Then use the `javascript_bundles_with_chunks_tag` and `stylesheet_bundles_with_chunks_tag` helpers to include all
+the transpiled packs with the chunks in your view, which creates html tags for all the chunks.
+
+```
+<%= javascript_bundles_with_chunks_tag 'calendar', 'map', 'data-turbolinks-track': 'reload' %>
+
+<!-- Creates the following: -->
+<script src="/packs/vendor-16838bab065ae1e314.js" data-turbolinks-track="reload"></script>
+<script src="/packs/calendar~runtime-16838bab065ae1e314.js" data-turbolinks-track="reload"></script>
+<script src="/packs/calendar-1016838bab065ae1e314.js" data-turbolinks-track="reload"></script>
+<script src="/packs/map~runtime-16838bab065ae1e314.js" data-turbolinks-track="reload"></script>
+<script src="/packs/map-16838bab065ae1e314.js" data-turbolinks-track="reload"></script>
+```
+
+**Important:** Pass all your pack names to the helper otherwise you will get duplicated chunks on the page.
+
+```
+<%# DO %>
+<%= javascript_bundles_with_chunks_tag 'calendar', 'map' %>
+
+<%# DON'T %>
+<%= javascript_bundles_with_chunks_tag 'calendar' %>
+<%= javascript_bundles_with_chunks_tag 'map' %>
+```
+
+**Important:** Also, these helpers do not work with `webpack-manifest-plugin` npm because it has no support to generate a manifest with a set of of chunk entries https://github.com/danethurber/webpack-manifest-plugin/issues/133. Instead, [webpack-assets-manifest](https://github.com/webdeveric/webpack-assets-manifest) npm supports. Please change the plugin for manifest file generation if you wish to enable `splitChunks` feature.
+
+```
+const WebpackAssetsManifest = require('webpack-assets-manifest');
+
+module.exports = {
+  // ...
+  plugins: [
+    new WebpackAssetsManifest({
+      entrypoints: true, // Please set this as true
+    })
+  ],
+  // ...
+}
+```
+
 ## Advanced Configuration
 
 ### Hot Module Replacement in development
@@ -177,7 +225,7 @@ To install this gem onto your local machine, run `bundle exec rake install`. To
 
 ## Contributing
 
-Bug reports and pull requests are welcome on GitHub at https://github.com/[USERNAME]/webpack_manifest.
+Bug reports and pull requests are welcome on GitHub at https://github.com/nikushi/webpack_manifest.
 
 ## License
 

data/lib/webpack_manifest/manifest.rb

@@ -17,6 +17,12 @@ module WebpackManifest
       @cache = cache
     end
 
+    def lookup_pack_with_chunks!(name, type: nil)
+      manifest_pack_type = manifest_type(name, type)
+      manifest_pack_name = manifest_name(name, manifest_pack_type)
+      find('entrypoints')&.dig(manifest_pack_name, manifest_pack_type) || handle_missing_entry(name)
+    end
+
     def lookup!(name)
       find(name) || handle_missing_entry(name)
     end
@@ -56,6 +62,19 @@ module WebpackManifest
       JSON.parse(data)
     end
 
+    # The `manifest_name` method strips of the file extension of the name, because in the
+    # manifest hash the entrypoints are defined by their pack name without the extension.
+    # When the user provides a name with a file extension, we want to try to strip it off.
+    def manifest_name(name, pack_type)
+      return name if File.extname(name.to_s).empty?
+      File.basename(name, '.' + pack_type)
+    end
+
+    def manifest_type(name, pack_type)
+      return File.extname(name)[1..-1] if pack_type.nil?
+      pack_type.to_s
+    end
+
     def handle_missing_entry(name)
       raise MissingEntryError, <<~MSG
         Can not find #{name} in #{@path}.

data/lib/webpack_manifest/rails/helper.rb

@@ -23,6 +23,25 @@ module WebpackManifest::Rails::Helper
     javascript_include_tag(*sources_from_manifest(names, 'js', key: manifest), **options)
   end
 
+  # Creates script tags that references the js chunks from entrypoints when using split chunks API.
+  # See: https://webpack.js.org/plugins/split-chunks-plugin/
+  # Example:
+  #
+  #   <%= javascript_bundles_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_bundles_with_chunks_tag 'calendar', 'map' %>
+  # DON'T:
+  # <%= javascript_bundles_with_chunks_tag 'calendar' %>
+  # <%= javascript_bundles_with_chunks_tag 'map' %>
+  def javascript_bundles_with_chunks_tag(*names, manifest: nil, **options)
+    javascript_include_tag(*sources_from_manifest_entrypoints(names, 'js', key: manifest), **options)
+  end
+
   # Examples:
   #
   #   <%= stylesheet_bundle_tag 'calendar', 'data-turbolinks-track': 'reload' %> # =>
@@ -36,6 +55,23 @@ module WebpackManifest::Rails::Helper
     stylesheet_link_tag(*sources_from_manifest(names, 'css', key: manifest), **options)
   end
 
+  # Creates link tags that references the css chunks from entrypoints when using split chunks API.
+  # See: https://webpack.js.org/plugins/split-chunks-plugin/
+  # Example:
+  #
+  #   <%= stylesheet_bundles_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_bundles_with_chunks_tag 'calendar', 'map' %>
+  # DON'T:
+  # <%= stylesheet_bundles_with_chunks_tag 'calendar' %>
+  # <%= stylesheet_bundles_with_chunks_tag 'map' %>
+  def stylesheet_bundles_with_chunks_tag(*names, manifest: nil, **options)
+    stylesheet_link_tag(*sources_from_manifest_entrypoints(names, 'css', key: manifest), **options)
+  end
+
   # Examples:
   #
   #   <%= image_bundle_tag 'icon.png'
@@ -55,6 +91,11 @@ module WebpackManifest::Rails::Helper
     names.map { |name| manifest.lookup!(name.to_s + '.' + ext) }
   end
 
+  def sources_from_manifest_entrypoints(names, type, key: nil)
+    manifest = get_manifest_by_key(key)
+    names.map { |name| manifest.lookup_pack_with_chunks!(name, type: type) }.flatten.uniq
+  end
+
   def get_manifest_by_key(key = nil)
     repository = WebpackManifest::Rails.configuration.manifests
     key.nil? ? repository.default : repository.get(key)

data/lib/webpack_manifest/version.rb

@@ -1,5 +1,5 @@
 # frozen_string_literal: true
 
 module WebpackManifest
-  VERSION = "0.2.3"
+  VERSION = "0.2.4"
 end

metadata

@@ -1,14 +1,14 @@
 --- !ruby/object:Gem::Specification
 name: webpack_manifest
 version: !ruby/object:Gem::Version
-  version: 0.2.3
+  version: 0.2.4
 platform: ruby
 authors:
 - Nobuhiro Nikushi
 autorequire: 
 bindir: bin
 cert_chain: []
-date: 2018-11-18 00:00:00.000000000 Z
+date: 2019-03-25 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: actionview
@@ -106,7 +106,7 @@ required_rubygems_version: !ruby/object:Gem::Requirement
       version: '0'
 requirements: []
 rubyforge_project: 
-rubygems_version: 2.7.7
+rubygems_version: 2.6.8
 signing_key: 
 specification_version: 4
 summary: WebpackManifest is a gem that integrates Rails with npm's webpack-manifest-plugin