webpacker 1.0 → 1.1

data/lib/install/javascript/packs/application.js

@@ -1,3 +1,4 @@
+/* eslint no-console:0 */
 // This file is automatically compiled by Webpack, along with any other files
 // present in this directory. You're encouraged to place your actual application logic in
 // a relevant structure within app/javascript and only use these pack files to reference

data/lib/install/react.rb

@@ -0,0 +1,15 @@
+require "webpacker/configuration"
+
+puts "Copying react loader to #{Webpacker::Configuration.config_path}/loaders"
+copy_file "#{__dir__}/config/loaders/installers/react.js", "config/webpack/loaders/react.js"
+
+puts "Copying .babelrc to app root directory"
+copy_file "#{__dir__}/examples/react/.babelrc", ".babelrc"
+
+puts "Copying react example entry file to #{Webpacker::Configuration.entry_path}"
+copy_file "#{__dir__}/examples/react/hello_react.jsx", "#{Webpacker::Configuration.entry_path}/hello_react.jsx"
+
+puts "Installing all react dependencies"
+run "./bin/yarn add react react-dom babel-preset-react"
+
+puts "Webpacker now supports react.js 🎉"

data/lib/install/template.rb

@@ -1,23 +1,29 @@
-directory "#{__dir__}/javascript", 'app/javascript'
+# Install webpacker
+puts "Creating javascript app source directory"
+directory "#{__dir__}/javascript", "app/javascript"
 
-directory "#{__dir__}/bin", 'bin'
-chmod 'bin', 0755 & ~File.umask, verbose: false
+puts "Copying binstubs"
+directory "#{__dir__}/bin", "bin"
+chmod "bin", 0755 & ~File.umask, verbose: false
 
-directory "#{__dir__}/config", 'config/webpack'
+puts "Copying webpack core config and loaders"
+directory "#{__dir__}/config/webpack", "config/webpack"
+directory "#{__dir__}/config/loaders/core", "config/webpack/loaders"
+copy_file "#{__dir__}/config/.postcssrc.yml", ".postcssrc.yml"
 
-append_to_file '.gitignore', <<-EOS
+append_to_file ".gitignore", <<-EOS
 /public/packs
 /node_modules
 EOS
 
-run './bin/yarn add --dev webpack webpack-merge webpack-dev-server path-complete-extname babel-loader babel-core babel-preset-latest coffee-loader coffee-script rails-erb-loader glob'
+puts "Installing all JavaScript dependencies"
+run "./bin/yarn add webpack webpack-merge js-yaml path-complete-extname " \
+"webpack-manifest-plugin babel-loader coffee-loader coffee-script " \
+"babel-core babel-preset-env compression-webpack-plugin rails-erb-loader glob " \
+"extract-text-webpack-plugin node-sass file-loader sass-loader css-loader style-loader " \
+"postcss-loader autoprefixer postcss-smart-import precss"
 
-environment \
-  "# Make javascript_pack_tag lookup digest hash to enable long-term caching\n" +
-  "  config.x.webpacker[:digesting] = true\n",
-  env: 'production'
+puts "Installing dev server for live reloading"
+run "./bin/yarn add --dev webpack-dev-server"
 
-environment \
-  "# Make javascript_pack_tag load assets from webpack-dev-server.\n" +
-  "  # config.x.webpacker[:dev_server_host] = \"http://localhost:8080\"\n",
-  env: 'development'
+puts "Webpacker successfully installed 🎉 🍰"

data/lib/install/vue.rb

@@ -0,0 +1,15 @@
+require "webpacker/configuration"
+
+puts "Copying vue loader to #{Webpacker::Configuration.config_path}/loaders"
+copy_file "#{__dir__}/config/loaders/installers/vue.js", "config/webpack/loaders/vue.js"
+
+puts "Copying the example entry file to #{Webpacker::Configuration.entry_path}"
+copy_file "#{__dir__}/examples/vue/hello_vue.js", "#{Webpacker::Configuration.entry_path}/hello_vue.js"
+
+puts "Copying vue app file to #{Webpacker::Configuration.entry_path}"
+copy_file "#{__dir__}/examples/vue/app.vue", "#{Webpacker::Configuration.entry_path}/app.vue"
+
+puts "Installing all vue dependencies"
+run "./bin/yarn add vue vue-loader vue-template-compiler sass-loader node-sass css-loader"
+
+puts "Webpacker now supports vue.js 🎉"

data/lib/tasks/installers.rake

@@ -0,0 +1,21 @@
+INSTALLERS = {
+  "Angular": :angular,
+  "React": :react,
+  "Vue": :vue
+}.freeze
+
+namespace :webpacker do
+  namespace :install do
+    INSTALLERS.each do |name, task_name|
+      desc "Install everything needed for #{name}"
+      task task_name => ["webpacker:verify_install"] do
+        template = File.expand_path("../install/#{task_name}.rb", __dir__)
+        if Rails::VERSION::MAJOR >= 5
+          exec "./bin/rails app:template LOCATION=#{template}"
+        else
+          exec "./bin/rake rails:template LOCATION=#{template}"
+        end
+      end
+    end
+  end
+end

data/lib/tasks/webpacker.rake

@@ -1,108 +1,15 @@
-WEBPACKER_APP_TEMPLATE_PATH = File.expand_path('../install/template.rb', __dir__)
-REGEX_MAP = /\A.*\.map\z/
-
-namespace :webpacker do
-  desc "Compile javascript packs using webpack for production with digests"
-  task :compile => :environment do
-    dist_dir = Rails.application.config.x.webpacker[:packs_dist_dir]
-    result   = `WEBPACK_DIST_DIR=#{dist_dir} NODE_ENV=production ./bin/webpack --json`
-
-    exit! $?.exitstatus unless $?.success?
-
-    webpack_digests = JSON.parse(result)['assetsByChunkName'].each_with_object({}) do |(chunk, file), h|
-      h[chunk] = file.is_a?(Array) ? file.find {|f| REGEX_MAP !~ f } : file
-    end.to_json
-
-    digests_path = Rails.application.config.x.webpacker[:digests_path]
-    packs_path = Rails.root.join('public', dist_dir) || File.dirname(digests_path)
-    packs_digests_path = digests_path || Rails.root.join(packs_path, 'digests.json')
-
-    FileUtils.mkdir_p(packs_path)
-    File.open(packs_digests_path, 'w+') { |file| file.write webpack_digests }
-
-    puts "Compiled digests for all packs in #{packs_digests_path}: "
-    puts webpack_digests
-  end
-
-  desc "Install webpacker in this application"
-  task :install do
-    exec "./bin/rails app:template LOCATION=#{WEBPACKER_APP_TEMPLATE_PATH}"
-  end
-
-  namespace :install do
-    desc "Install everything needed for react"
-    task :react do
-      config_path = Rails.root.join('config/webpack/shared.js')
-      config = File.read(config_path)
-
-      if config =~ /presets:\s*\[\s*\[\s*'latest'/
-        puts "Replacing loader presets to include react in #{config_path}"
-        config.gsub!(/presets:(\s*\[)(\s*)\[(\s)*'latest'/, "presets:\\1\\2'react',\\2[\\3'latest'")
-      else
-        puts "Couldn't automatically update loader presets in #{config_path}. Please set presets: [ 'react', [ 'latest', { 'es2015': { 'modules': false } } ] ]."
-      end
-
-      if config.include?("test: /\\.js(.erb)?$/")
-        puts "Replacing loader test to include react in #{config_path}"
-        config.gsub!("test: /\\.js(.erb)?$/", "test: /\\.jsx?(.erb)?$/")
-      else
-        puts "Couldn't automatically update loader test in #{config_path}. Please set test: /\.jsx?(.erb)?$/."
-      end
-
-      File.write config_path, config
-
-      puts "Copying .babelrc to project directory"
-      FileUtils.copy File.expand_path('../install/react/.babelrc', __dir__),
-        Rails.root
-
-      puts "Copying react example to app/javascript/packs/hello_react.js"
-      FileUtils.copy File.expand_path('../install/react/hello_react.js', __dir__),
-        Rails.root.join('app/javascript/packs/hello_react.js')
-
-      exec './bin/yarn add --dev babel-preset-react && ./bin/yarn add react react-dom'
-    end
-
-    desc "Install everything needed for Angular"
-    task :angular do
-      config_path = Rails.root.join('config/webpack/shared.js')
-      config = File.read(config_path)
-
-      if config.include?('ts-loader')
-        puts "The configuration file already has a reference to ts-loader, skipping the test rule..."
-      else
-        puts "Adding a loader rule to include ts-loader for .ts files in #{config_path}..."
-        config.gsub!(/rules:(\s*\[)(\s*\{)/, "rules:\\1\\2 test: /\.ts$/, loader: 'ts-loader' },\\2")
-      end
-
-      if config =~ /["'].ts["']/
-        puts "The configuration file already has a reference to .ts extension, skipping the addition of this extension to the list..."
-      else
-        puts "Adding '.ts' in loader extensions in #{config_path}..."
-        config.gsub!(/extensions:(.*')(\s*\])/, "extensions:\\1, '.ts'\\2")
-      end
-
-      File.write config_path, config
-
-      puts "Copying Angular example to app/javascript/packs/hello_angular.js"
-      FileUtils.copy File.expand_path('../install/angular/hello_angular.js', __dir__),
-        Rails.root.join('app/javascript/packs/hello_angular.js')
-
-      puts "Copying Angular Hello app to app/javascript/hello_angular"
-      FileUtils.copy_entry File.expand_path('../install/angular/hello_angular', __dir__),
-        Rails.root.join('app/javascript/hello_angular')
-
-      puts "Copying tsconfig.json to the Rails root directory"
-      FileUtils.copy File.expand_path('../install/angular/tsconfig.json', __dir__),
-        Rails.root.join('tsconfig.json')
-
-      exec './bin/yarn add --dev typescript ts-loader && ./bin/yarn add "core-js zone.js rxjs @angular/core @angular/common @angular/compiler @angular/platform-browser @angular/platform-browser-dynamic"'
-    end
-  end
-end
-
-# Compile packs after we've compiled all other assets during precompilation
-if Rake::Task.task_defined?('assets:precompile')
-  Rake::Task['assets:precompile'].enhance do
-    Rake::Task['webpacker:compile'].invoke
-  end
+tasks = {
+  "webpacker:install"         => "Installs and setup webpack with yarn",
+  "webpacker:compile"         => "Compiles webpack bundles based on environment",
+  "webpacker:verify_install"  => "Verifies if webpacker is installed",
+  "webpacker:yarn_install"    => "Support for older Rails versions. Install all JavaScript dependencies as specified via Yarn",
+  "webpacker:install:react"   => "Installs and setup example react component",
+  "webpacker:install:vue"     => "Installs and setup example vue component",
+  "webpacker:install:angular" => "Installs and setup example angular2 component"
+}.freeze
+
+desc "Lists all available tasks in webpacker"
+task :webpacker do
+  puts "Available webpacker tasks are:"
+  tasks.each { |task, message| puts task.ljust(30) + message }
 end

data/lib/tasks/webpacker/compile.rake

@@ -0,0 +1,29 @@
+require "webpacker/configuration"
+REGEX_MAP = /\A.*\.map\z/
+
+namespace :webpacker do
+  desc "Compile javascript packs using webpack for production with digests"
+  task compile: ["webpacker:verify_install", :environment] do
+    puts "Compiling webpacker assets 🎉"
+    result = `NODE_ENV=production ./bin/webpack`
+
+    unless $?.success?
+      puts JSON.parse(result)["errors"]
+      exit! $?.exitstatus
+    end
+
+    puts "Compiled digests for all packs in #{Webpacker::Configuration.output_path}: "
+    puts JSON.parse(File.read(Webpacker::Configuration.manifest_path))
+  end
+end
+
+# Compile packs after we've compiled all other assets during precompilation
+if Rake::Task.task_defined?("assets:precompile")
+  Rake::Task["assets:precompile"].enhance do
+    unless Rake::Task.task_defined?("yarn:install")
+      # For Rails < 5.1
+      Rake::Task["webpacker:yarn_install"].invoke
+    end
+    Rake::Task["webpacker:compile"].invoke
+  end
+end

data/lib/tasks/webpacker/install.rake

@@ -0,0 +1,12 @@
+WEBPACKER_APP_TEMPLATE_PATH = File.expand_path("../../install/template.rb", __dir__)
+
+namespace :webpacker do
+  desc "Install webpacker in this application"
+  task :install do
+    if Rails::VERSION::MAJOR >= 5
+      exec "./bin/rails app:template LOCATION=#{WEBPACKER_APP_TEMPLATE_PATH}"
+    else
+      exec "./bin/rake rails:template LOCATION=#{WEBPACKER_APP_TEMPLATE_PATH}"
+    end
+  end
+end

data/lib/tasks/webpacker/verify_install.rake

@@ -0,0 +1,16 @@
+require "webpacker/configuration"
+
+namespace :webpacker do
+  desc "Verifies if webpacker is installed"
+  task :verify_install do
+    if File.exist?(Webpacker::Configuration.file_path)
+      puts "Webpacker is installed 🎉 🍰"
+      puts "Using #{Webpacker::Configuration.file_path} file for setting up webpack paths"
+    else
+      puts "Configuration config/webpack/paths.yml file not found. \n"\
+           "Make sure webpacker:install is run successfully before " \
+           "running dependent tasks"
+      exit!
+    end
+  end
+end

data/lib/tasks/webpacker/yarn_install.rake

@@ -0,0 +1,6 @@
+namespace :webpacker do
+  desc "Support for older Rails versions.Install all JavaScript dependencies as specified via Yarn"
+  task :yarn_install do
+    system("./bin/yarn")
+  end
+end

data/lib/webpacker.rb

@@ -1,4 +1,4 @@
 module Webpacker
 end
 
-require 'webpacker/railtie' if defined?(Rails)
+require "webpacker/railtie" if defined?(Rails)

data/lib/webpacker/configuration.rb

@@ -0,0 +1,42 @@
+# Loads webpacker configuration from config/webpack/paths.yml
+require "webpacker/file_loader"
+
+class Webpacker::Configuration < Webpacker::FileLoader
+  class << self
+    def config_path
+      Rails.root.join(paths.fetch(:config, "config/webpack"))
+    end
+
+    def entry_path
+      Rails.root.join(source_path, paths.fetch(:entry, "packs"))
+    end
+
+    def file_path
+      Rails.root.join("config", "webpack", "paths.yml")
+    end
+
+    def manifest_path
+      Rails.root.join(output_path, "manifest.json")
+    end
+
+    def output_path
+      Rails.root.join(paths.fetch(:output, "public"), paths.fetch(:entry, "packs"))
+    end
+
+    def paths
+      load if Rails.env.development?
+      raise Webpacker::FileLoader::FileLoaderError.new("Webpacker::Configuration.load must be called first") unless instance
+      instance.data
+    end
+
+    def source_path
+      Rails.root.join(paths.fetch(:source, "app/javascript"))
+    end
+  end
+
+  private
+    def load
+      return super unless File.exist?(@path)
+      HashWithIndifferentAccess.new(YAML.load(File.read(@path)))
+    end
+end

data/lib/webpacker/file_loader.rb

@@ -0,0 +1,24 @@
+# Provides a base singleton-configuration pattern for loading a file, given a path
+class Webpacker::FileLoader
+  class NotFoundError < StandardError; end
+  class FileLoaderError < StandardError; end
+
+  class_attribute :instance
+  attr_accessor :data
+
+  class << self
+    def load(path = file_path)
+      self.instance = new(path)
+    end
+  end
+
+  private
+    def initialize(path)
+      @path = path
+      @data = load
+    end
+
+    def load
+      {}.freeze
+    end
+end

data/lib/webpacker/helper.rb

@@ -1,8 +1,20 @@
-require 'webpacker/source'
+require "webpacker/manifest"
 
 module Webpacker::Helper
+  # Computes the full path for a given webpacker asset.
+  # Return relative path using manifest.json and passes it to asset_url helper
+  # This will use asset_path internally, so most of their behaviors will be the same.
+  # Examples:
+  #
+  # In development mode:
+  #   <%= asset_pack_path 'calendar.js' %> # => "/packs/calendar.js"
+  # In production mode:
+  #   <%= asset_pack_path 'calendar.css' %> # => "/packs/calendar-1016838bab065ae1e122.css"
+  def asset_pack_path(name, **options)
+    asset_path(Webpacker::Manifest.lookup(name), **options)
+  end
   # 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 
+  # 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.
   #
   # Examples:
@@ -15,6 +27,23 @@ module Webpacker::Helper
   #   <%= javascript_pack_tag 'calendar', 'data-turbolinks-track': 'reload' %> # =>
   #   <script src="/packs/calendar-1016838bab065ae1e314.js" data-turbolinks-track="reload"></script>
   def javascript_pack_tag(name, **options)
-    javascript_include_tag(Webpacker::Source.new(name).path, **options)
+    javascript_include_tag(Webpacker::Manifest.lookup("#{name}#{compute_asset_extname(name, type: :javascript)}"), **options)
+  end
+
+  # 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.
+  #
+  # Examples:
+  #
+  #   # In development mode:
+  #   <%= stylesheet_pack_tag 'calendar', 'data-turbolinks-track': 'reload' %> # =>
+  #   <link rel="stylesheet" media="screen" href="/packs/calendar.css" data-turbolinks-track="reload" />
+  #
+  #   # In production mode:
+  #   <%= stylesheet_pack_tag 'calendar', 'data-turbolinks-track': 'reload' %> # =>
+  #   <link rel="stylesheet" media="screen" href="/packs/calendar-1016838bab065ae1e122.css" data-turbolinks-track="reload" />
+  def stylesheet_pack_tag(name, **options)
+    stylesheet_link_tag(Webpacker::Manifest.lookup("#{name}#{compute_asset_extname(name, type: :stylesheet)}"), **options)
   end
 end

data/lib/webpacker/manifest.rb

@@ -0,0 +1,29 @@
+# Singleton registry for accessing the packs path using generated manifest.
+# This allows javascript_pack_tag, stylesheet_pack_tag, asset_pack_path to take a reference to,
+# say, "calendar.js" or "calendar.css" and turn it into "/packs/calendar.js" or
+# "/packs/calendar.css" in development. In production mode, it returns compiles
+# files, # "/packs/calendar-1016838bab065ae1e314.js" and
+# "/packs/calendar-1016838bab065ae1e314.css" for long-term caching
+
+require "webpacker/file_loader"
+require "webpacker/configuration"
+
+class Webpacker::Manifest < Webpacker::FileLoader
+  class << self
+    def file_path
+      Webpacker::Configuration.manifest_path
+    end
+
+    def lookup(name)
+      load if Rails.env.development?
+      raise Webpacker::FileLoader::FileLoaderError.new("Webpacker::Manifest.load must be called first") unless instance
+      instance.data[name.to_s] || raise(Webpacker::FileLoader::NotFoundError.new("Can't find #{name} in #{file_path}. Is webpack still compiling?"))
+    end
+  end
+
+  private
+    def load
+      return super unless File.exist?(@path)
+      JSON.parse(File.read(@path))
+    end
+end