webpacker 1.2 → 2.0

data/lib/install/examples/elm/hello_elm.js

@@ -0,0 +1,11 @@
+// Run this example by adding <%= javascript_pack_tag "hello_elm" %> to the head of your layout
+// file, like app/views/layouts/application.html.erb. It will render "Hello Elm!" within the page.
+
+import Elm from './Main'
+
+document.addEventListener('DOMContentLoaded', () => {
+  const target = document.createElement('div')
+
+  document.body.appendChild(target)
+  Elm.Main.embed(target)
+})

data/lib/install/examples/vue/hello_vue.js

@@ -1,19 +1,15 @@
 /* eslint no-console: 0 */
-// Run this example by adding <%= javascript_pack_tag 'hello_vue' %>
-// to the head of your layout file,
+// Run this example by adding <%= javascript_pack_tag 'hello_vue' %> and
+// <%= stylesheet_pack_tag 'hello_vue' %> to the head of your layout file,
 // like app/views/layouts/application.html.erb.
 // All it does is render <div>Hello Vue</div> at the bottom of the page.
 
-import Vue from 'vue/dist/vue.esm'
+import Vue from 'vue'
 import App from './app.vue'
 
 document.addEventListener('DOMContentLoaded', () => {
   document.body.appendChild(document.createElement('hello'))
-  const app = new Vue({
-    el: 'hello',
-    template: '<App/>',
-    components: { App }
-  })
+  const app = new Vue(App).$mount('hello')
 
   console.log(app)
 })

data/lib/install/react.rb

@@ -19,13 +19,13 @@ else
   copy_file "#{__dir__}/examples/react/.babelrc", ".babelrc"
 end
 
-puts "Copying react loader to #{Webpacker::Configuration.config_path}/loaders"
+puts "Copying react loader to config/webpack/loaders"
 copy_file "#{__dir__}/config/loaders/installers/react.js", "config/webpack/loaders/react.js"
 
 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 prop-types"
+run "yarn add react react-dom babel-preset-react prop-types"
 
 puts "Webpacker now supports react.js 🎉"

data/lib/install/template.rb

@@ -1,7 +1,11 @@
 # Install webpacker
+copy_file "#{__dir__}/config/webpacker.yml", "config/webpacker.yml"
+
 puts "Copying webpack core config and loaders"
 directory "#{__dir__}/config/webpack", "config/webpack"
 directory "#{__dir__}/config/loaders/core", "config/webpack/loaders"
+
+puts "Copying .postcssrc.yml to app root directory"
 copy_file "#{__dir__}/config/.postcssrc.yml", ".postcssrc.yml"
 
 puts "Copying .babelrc to app root directory"
@@ -11,13 +15,7 @@ puts "Creating javascript app source directory"
 directory "#{__dir__}/javascript", "#{Webpacker::Configuration.source}"
 
 puts "Copying binstubs"
-template "#{__dir__}/bin/webpack-dev-server", "bin/webpack-dev-server"
-template "#{__dir__}/bin/webpack", "bin/webpack"
-
-if !File.exist?("bin/yarn")
-  puts "Copying yarn"
-  template "#{__dir__}/bin/yarn", "bin/yarn"
-end
+directory "#{__dir__}/bin", "bin"
 
 chmod "bin", 0755 & ~File.umask, verbose: false
 
@@ -29,13 +27,14 @@ EOS
 end
 
 puts "Installing all JavaScript dependencies"
-run "./bin/yarn add webpack webpack-merge js-yaml path-complete-extname " \
+run "yarn add webpack webpack-merge js-yaml path-complete-extname " \
 "webpack-manifest-plugin babel-loader@7.x coffee-loader coffee-script " \
-"babel-core babel-preset-env compression-webpack-plugin rails-erb-loader glob " \
+"babel-core babel-preset-env babel-polyfill 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"
+"postcss-loader autoprefixer postcss-smart-import precss resolve-url-loader " \
+"babel-plugin-syntax-dynamic-import babel-plugin-transform-class-properties"
 
 puts "Installing dev server for live reloading"
-run "./bin/yarn add --dev webpack-dev-server"
+run "yarn add --dev webpack-dev-server"
 
 puts "Webpacker successfully installed 🎉 🍰"

data/lib/install/vue.rb

@@ -1,6 +1,6 @@
 require "webpacker/configuration"
 
-puts "Copying vue loader to #{Webpacker::Configuration.config_path}/loaders"
+puts "Copying vue loader to config/webpack/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}"
@@ -10,6 +10,6 @@ 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"
+run "yarn add vue vue-loader vue-template-compiler"
 
 puts "Webpacker now supports vue.js 🎉"

data/lib/tasks/installers.rake

@@ -1,5 +1,6 @@
 INSTALLERS = {
   "Angular": :angular,
+  "Elm": :elm,
   "React": :react,
   "Vue": :vue
 }.freeze

data/lib/tasks/webpacker.rake

@@ -1,13 +1,15 @@
 tasks = {
-  "webpacker:install"         => "Installs and setup webpack with yarn",
-  "webpacker:compile"         => "Compiles webpack bundles based on environment",
-  "webpacker:check_node"      => "Verifies if Node.js is installed",
-  "webpacker:check_yarn"      => "Verifies if yarn is installed",
-  "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"
+  "webpacker:install"                 => "Installs and setup webpack with yarn",
+  "webpacker:compile"                 => "Compiles webpack bundles based on environment",
+  "webpacker:check_node"              => "Verifies if Node.js is installed",
+  "webpacker:check_yarn"              => "Verifies if yarn is installed",
+  "webpacker:check_webpack_binstubs"  => "Verifies that bin/webpack & bin/webpack-dev-server are present",
+  "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 Angular component",
+  "webpacker:install:elm"             => "Installs and setup example Elm component"
 }.freeze
 
 desc "Lists all available tasks in webpacker"

data/lib/tasks/webpacker/check_webpack_binstubs.rake

@@ -0,0 +1,11 @@
+namespace :webpacker do
+  desc "Verifies that bin/webpack & bin/webpack-dev-server are present."
+  task :check_webpack_binstubs do
+    unless File.exist?("bin/webpack") && File.exist?("bin/webpack-dev-server")
+      puts "Webpack binstubs not found.\n"\
+           "Make sure the bin directory or binstubs are not included in .gitignore\n"\
+           "Exiting!"
+      exit!
+    end
+  end
+end

data/lib/tasks/webpacker/check_yarn.rake

@@ -1,11 +1,14 @@
 namespace :webpacker do
   desc "Verifies if yarn is installed"
   task :check_yarn do
+    required_yarn_version = "0.20.1"
+
     begin
-      version = `yarn --version`
-      raise Errno::ENOENT if version.blank?
+      yarn_version = `yarn --version`
+
+      raise Errno::ENOENT if yarn_version.blank? || Gem::Version.new(yarn_version) < Gem::Version.new(required_yarn_version)
     rescue Errno::ENOENT
-      puts "Webpacker requires yarn. Please download and install Yarn https://yarnpkg.com/lang/en/docs/install/"
+      puts "Webpacker requires Yarn version >= #{required_yarn_version}. Please download and install the latest version from https://yarnpkg.com/lang/en/docs/install/"
       puts "Exiting!" && exit!
     end
   end

data/lib/tasks/webpacker/clobber.rake

@@ -3,9 +3,9 @@ require "webpacker/configuration"
 namespace :webpacker do
   desc "Remove the webpack compiled output directory"
   task clobber: ["webpacker:verify_install", :environment] do
-    packs_path = Webpacker::Configuration.packs_path
-    FileUtils.rm_r(packs_path) if File.exist?(packs_path)
-    puts "Removed webpack output path directory #{packs_path}"
+    output_path = Webpacker::Configuration.output_path
+    FileUtils.rm_r(output_path) if File.exist?(output_path)
+    puts "Removed webpack output path directory #{output_path}"
   end
 end
 

data/lib/tasks/webpacker/compile.rake

@@ -1,35 +1,29 @@
+require "open3"
 require "webpacker/env"
 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 🎉"
-    asset_host = Rails.application.config.action_controller.asset_host
-    result = `ASSET_HOST=#{asset_host} NODE_ENV=#{Webpacker::Env.current} ./bin/webpack --json`
+    puts "[Webpacker] Compiling assets 🎉"
 
-    unless $?.success?
-      puts JSON.parse(result)["errors"]
-      exit! $?.exitstatus
-    end
+    asset_host = ActionController::Base.helpers.compute_asset_host
+    env = { "NODE_ENV" => Webpacker.env, "ASSET_HOST" => asset_host }.freeze
 
-    puts "Compiled digests for all packs in #{Webpacker::Configuration.packs_path}: "
-    puts JSON.parse(File.read(Webpacker::Configuration.manifest_path))
-  end
+    stdout_str, stderr_str, status = Open3.capture3(env, "./bin/webpack")
 
-  desc "Compile javascript packs using webpack for test with digests"
-  task compile_before_test: ["webpacker:compile"] do
-    Webpacker::Manifest.load(Webpacker::Manifest.file_path)
+    if status.success?
+      $stdout.puts "\e[32m[Webpacker] Compiled digests for all packs in #{Webpacker::Configuration.entry_path}:\e[0m"
+      $stdout.puts "\e[32m#{JSON.parse(File.read(Webpacker::Configuration.manifest_path))}\e[0m"
+    else
+      $stdout.puts "[Webpacker] Compilation Failed"
+      $stdout.puts "\e[31m#{stdout_str}\e[0m"
+      $stderr.puts "\e[31m#{stderr_str}\e[0m"
+      exit!
+    end
   end
 end
 
-# Compile packs prior to system and controller tests running
-if Rake::Task.task_defined?("test:system")
-  Rake::Task["test:system"].enhance(["webpacker:compile_before_test"])
-  Rake::Task["test:controllers"].enhance(["webpacker:compile_before_test"])
-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

data/lib/tasks/webpacker/verify_install.rake

@@ -2,12 +2,12 @@ require "webpacker/configuration"
 
 namespace :webpacker do
   desc "Verifies if webpacker is installed"
-  task verify_install: [:check_node, :check_yarn] do
+  task verify_install: [:check_node, :check_yarn, :check_webpack_binstubs] 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"\
+      puts "Configuration config/webpacker.yml file not found. \n"\
            "Make sure webpacker:install is run successfully before " \
            "running dependent tasks"
       exit!

data/lib/tasks/webpacker/yarn_install.rake

@@ -1,6 +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")
+  task :yarn_install, [:arg1, :arg2] do |task, args|
+    system "yarn #{args[:arg1]} #{args[:arg2]}"
   end
 end

data/lib/webpacker.rb

@@ -1,9 +1,24 @@
 module Webpacker
-  def self.bootstrap
+  extend self
+
+  def bootstrap
     Webpacker::Env.load
     Webpacker::Configuration.load
     Webpacker::Manifest.load
   end
+
+  def compile
+    Webpacker::Compiler.compile
+    Webpacker::Manifest.load
+  end
+
+  def env
+    Webpacker::Env.current.inquiry
+  end
 end
 
+require "webpacker/env"
+require "webpacker/configuration"
+require "webpacker/manifest"
+require "webpacker/compiler"
 require "webpacker/railtie" if defined?(Rails)

data/lib/webpacker/compiler.rb

@@ -0,0 +1,20 @@
+require "rake"
+
+module Webpacker::Compiler
+  extend self
+
+  def compile
+    compile_task.invoke
+    compile_task.reenable
+  end
+
+  private
+    def compile_task
+      @compile_task ||= load_rake_task("webpacker:compile")
+    end
+
+    def load_rake_task(name)
+      @load_rakefile ||= Rake.load_rakefile(Rails.root.join("Rakefile"))
+      Rake::Task[name]
+    end
+end

data/lib/webpacker/configuration.rb

@@ -1,51 +1,59 @@
-# Loads webpacker configuration from config/webpack/paths.yml
+# Loads webpacker configuration from config/webpacker.yml
+
 require "webpacker/file_loader"
-require "webpacker/env"
 
 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"))
+      source_path.join(fetch(:source_entry_path))
     end
 
-    def file_path
-      Rails.root.join("config", "webpack", "paths.yml")
+    def output_path
+      public_path.join(fetch(:public_output_path))
     end
 
     def manifest_path
-      Rails.root.join(packs_path, paths.fetch(:manifest, "manifest.json"))
+      output_path.join("manifest.json")
     end
 
-    def packs_path
-      Rails.root.join(output_path, paths.fetch(:entry, "packs"))
+    def source_path
+      Rails.root.join(source)
     end
 
-    def paths
-      load if Webpacker::Env.development?
-      raise Webpacker::FileLoader::FileLoaderError.new("Webpacker::Configuration.load must be called first") unless instance
-      instance.data
+    def public_path
+      Rails.root.join("public")
     end
 
-    def output_path
-      Rails.root.join(paths.fetch(:output, "public"))
+    def file_path(root: Rails.root)
+      root.join("config/webpacker.yml")
+    end
+
+    def default_file_path
+      file_path(root: Pathname.new(__dir__).join("../install"))
     end
 
     def source
-      paths.fetch(:source, "app/javascript")
+      fetch(:source_path)
     end
 
-    def source_path
-      Rails.root.join(source)
+    def fetch(key)
+      data.fetch(key, defaults[key])
+    end
+
+    def data
+      load if Webpacker.env.development?
+      raise Webpacker::FileLoader::FileLoaderError.new("Webpacker::Configuration.load must be called first") unless instance
+      instance.data
+    end
+
+    def defaults
+      @defaults ||= HashWithIndifferentAccess.new(YAML.load(default_file_path.read)["default"])
     end
   end
 
   private
     def load
       return super unless File.exist?(@path)
-      HashWithIndifferentAccess.new(YAML.load(File.read(@path))[Webpacker::Env.current])
+      HashWithIndifferentAccess.new(YAML.load(File.read(@path))[Webpacker.env])
     end
 end

data/lib/webpacker/env.rb

@@ -1,4 +1,4 @@
-# Singleton registry for determining NODE_ENV from config/webpack/paths.yml
+# Singleton registry for determining NODE_ENV from config/webpacker.yml
 require "webpacker/file_loader"
 
 class Webpacker::Env < Webpacker::FileLoader
@@ -8,12 +8,8 @@ class Webpacker::Env < Webpacker::FileLoader
       instance.data
     end
 
-    def development?
-      current == "development"
-    end
-
     def file_path
-      Rails.root.join("config", "webpack", "paths.yml")
+      Rails.root.join("config", "webpacker.yml")
     end
   end
 

data/lib/webpacker/helper.rb

@@ -1,5 +1,3 @@
-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

data/lib/webpacker/manifest.rb

@@ -6,8 +6,6 @@
 # "/packs/calendar-1016838bab065ae1e314.css" for long-term caching
 
 require "webpacker/file_loader"
-require "webpacker/env"
-require "webpacker/configuration"
 
 class Webpacker::Manifest < Webpacker::FileLoader
   class << self
@@ -16,14 +14,33 @@ class Webpacker::Manifest < Webpacker::FileLoader
     end
 
     def lookup(name)
-      load if Webpacker::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?"))
+      load if Webpacker.env.development?
+
+      if Webpacker.env.test?
+        find(name) || compile_and_find!(name)
+      else
+        find!(name)
+      end
     end
 
     def lookup_path(name)
-      Rails.root.join(File.join(Webpacker::Configuration.output_path, lookup(name)))
+      Rails.root.join(File.join(Webpacker::Configuration.public_path, lookup(name)))
     end
+
+    private
+      def find(name)
+        instance.data[name.to_s] if instance
+      end
+
+      def find!(name)
+        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
+
+      def compile_and_find!(name)
+        Webpacker.compile
+        find!(name)
+      end
   end
 
   private