webpacker 0.1 → 0.2

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA1:
-  metadata.gz: 1b67ae76eb6b5825e3147654c956f617527bb5f1
-  data.tar.gz: a06d84b86eac617349551713e00c8f3bf42481b2
+  metadata.gz: 8718b611e0688ca042fc8c4e76cbac4037eb7ef8
+  data.tar.gz: 22a7a34b3326f4cb4da111d84875a0e5493a9794
 SHA512:
-  metadata.gz: 041403069acab101703d356979b189b4635151818ff5c1fd06d22def7928fb1d9726c4e1f25e57dbfa8ca21045fb2dcc2592ec2a79ee2efce01c958668ea2dbe
-  data.tar.gz: f05bcb4779c5b9dad44fa599d837ce9b4114ce40ba4f62c6422791d300e265e8a2d39bcfdedc80faf616220b7627842ce7dc8978194cb2913469622d903cb0a0
+  metadata.gz: 2faf426f4d370a0107f5fc865125c127ab2ef280dddb037d89214798f776b9cd2b29534c98059ac30e283a4946586f88176086b42e343ae6bfc489abfb3b1353
+  data.tar.gz: 9c4b9245412e474a8c248d3857c49fee082ca41d9663d30f8cf2ff474b061804136b0b3327961b6d6d918087eae2767a8d96b32a977a72f661cef6a10084df0b

data/.gitignore

@@ -0,0 +1 @@
+/.bundle

data/Gemfile

@@ -0,0 +1,3 @@
+source 'https://rubygems.org'
+
+gemspec

data/Gemfile.lock

@@ -0,0 +1,70 @@
+PATH
+  remote: .
+  specs:
+    webpacker (0.1)
+      activesupport (>= 3.0.0, < 5.1)
+      multi_json (~> 1.2)
+      railties (~> 5)
+
+GEM
+  remote: https://rubygems.org/
+  specs:
+    actionpack (5.0.0.1)
+      actionview (= 5.0.0.1)
+      activesupport (= 5.0.0.1)
+      rack (~> 2.0)
+      rack-test (~> 0.6.3)
+      rails-dom-testing (~> 2.0)
+      rails-html-sanitizer (~> 1.0, >= 1.0.2)
+    actionview (5.0.0.1)
+      activesupport (= 5.0.0.1)
+      builder (~> 3.1)
+      erubis (~> 2.7.0)
+      rails-dom-testing (~> 2.0)
+      rails-html-sanitizer (~> 1.0, >= 1.0.2)
+    activesupport (5.0.0.1)
+      concurrent-ruby (~> 1.0, >= 1.0.2)
+      i18n (~> 0.7)
+      minitest (~> 5.1)
+      tzinfo (~> 1.1)
+    builder (3.2.2)
+    concurrent-ruby (1.0.2)
+    erubis (2.7.0)
+    i18n (0.7.0)
+    loofah (2.0.3)
+      nokogiri (>= 1.5.9)
+    method_source (0.8.2)
+    mini_portile2 (2.1.0)
+    minitest (5.10.1)
+    multi_json (1.12.1)
+    nokogiri (1.6.8.1)
+      mini_portile2 (~> 2.1.0)
+    rack (2.0.1)
+    rack-test (0.6.3)
+      rack (>= 1.0)
+    rails-dom-testing (2.0.1)
+      activesupport (>= 4.2.0, < 6.0)
+      nokogiri (~> 1.6.0)
+    rails-html-sanitizer (1.0.3)
+      loofah (~> 2.0)
+    railties (5.0.0.1)
+      actionpack (= 5.0.0.1)
+      activesupport (= 5.0.0.1)
+      method_source
+      rake (>= 0.8.7)
+      thor (>= 0.18.1, < 2.0)
+    rake (12.0.0)
+    thor (0.19.4)
+    thread_safe (0.3.5)
+    tzinfo (1.2.2)
+      thread_safe (~> 0.1)
+
+PLATFORMS
+  ruby
+
+DEPENDENCIES
+  bundler (~> 1.12)
+  webpacker!
+
+BUNDLED WITH
+   1.12.1

data/README.md

@@ -1,18 +1,91 @@
 # Webpacker
 
-Webpacker makes it easy to use the JavaScript preprocessor and bundler Webpack
+Webpacker makes it easy to use the JavaScript preprocessor and bundler [Webpack](http://webpack.github.io)
 to manage application-like JavaScript in Rails. It coexists with the asset pipeline,
 as the purpose is only to use Webpack for app-like JavaScript, not images, css, or
-even JavaScript Sprinkles.
+even JavaScript Sprinkles (that all continues to live in app/assets).
 
-It's designed to work with Rails 5.1+ and makes use of the Yarn dependency management
-that's been made default from that version forward. You can either make use of Webpacker
-during setup of a new application with --webpack or you can uncomment the gem and run
-`bin/rails webpacker:install` in an existing application.
+It's designed to work with Rails 5.1+ and makes use of the [Yarn](https://yarnpkg.com/) dependency management
+that's been made default from that version forward.
+It's also currently compatible with Rails 5.0 stable but there's absolutely no warranty
+it will still be in the future.
+You can either make use of Webpacker during setup of a new application with `--webpack`
+or you can add the gem and run `bin/rails webpacker:install` in an existing application.
 
-When Webpacker has been installed...
 
-FIXME: Write the rest...
+## Binstubs
+
+Webpacker ships with three binstubs: `./bin/webpack`, `./bin/webpack-watcher` and `./bin/webpack-dev-server`.
+They're thin wrappers around the standard webpack.js executable, just to ensure that the right configuration
+file is loaded and the node_modules from vendor are used.
+
+In development, you'll need to run `./bin/webpack-watcher` in a separate terminal from
+`./bin/rails server` to have your `app/javascript/packs/*.js` files compiled as you make changes.
+If you'd rather not have to run the two processes separately by hand, you can use
+[Foreman](http://ddollar.github.io/foreman/).
+
+Alternatively, you can run `./bin/webpack-dev-server`. This will launch a
+[Webpack Dev Server](https://webpack.github.io/docs/webpack-dev-server.html) listening on http://localhost:8080/
+serving your pack files. It will recompile your files as you make changes. You also need to set
+`config.x.webpacker[:dev_server_host]` in your `config/environment/development.rb` to tell Webpacker to load
+your packs from the Webpack Dev Server. This setup allows you to leverage advanced Webpack features, such
+as [Hot Module Replacement](https://webpack.github.io/docs/hot-module-replacement-with-webpack.html).
+
+
+## Configuration
+
+Webpacker gives you a default set of configuration files for development and production. They
+all live together with the shared points in `config/webpack/*.js`. By default, you shouldn't have to
+make any changes for a basic setup out the box. But this is where you do go if you need something
+more advanced.
+
+The configuration for what Webpack is supposed to compile by default rests on the convention that
+every file in `app/javascript/packs/*` should be turned into their own output files (or entry points,
+as Webpack calls it).
+
+Let's say you're building a calendar. Your structure could look like this:
+
+```erb
+<%# app/views/layout/application.html.erb %>
+<%= javascript_pack_tag 'calendar' %>
+```
+
+```js
+// app/javascript/packs/calendar.js
+require('calendar')
+```
+
+```
+app/javascript/calendar/index.js // gets loaded by require('calendar')
+app/javascript/calendar/components/grid.jsx
+app/javascript/calendar/models/month.js
+```
+
+But it could also look a million other ways. The only convention that Webpacker enforces is the
+one where entry points are automatically configured by the files in `app/javascript/packs`.
+
+
+## Deployment
+
+To compile all the packs during deployment, you can use the `rails webpacker:compile` command. This
+will invoke the production configuration, which includes digesting. The `javascript_pack_tag` helper
+method will automatically insert the correct digest when run in production mode. Just like the asset
+pipeline does it.
+
+
+## Ready for React
+
+To use Webpacker with React, just create a new app with `rails new myapp --webpack=react` (or run `rails webpacker:install:react` on a Rails 5.1 app already setup with webpack), and all the relevant dependencies
+will be added via yarn and changes to the configuration files made. Now you can create JSX files and
+have them properly compiled automatically.
+
+
+## Work left to do
+
+- Make asset pipeline digests readable from webpack, so you can reference images etc
+- Consider chunking setup
+- Consider on-demand compiling with digests when digesting=true
+- I'm sure a ton of other shit
 
 ## License
 Webpacker is released under the [MIT License](http://www.opensource.org/licenses/MIT).

data/Rakefile

@@ -0,0 +1 @@
+require "bundler/gem_tasks"

data/lib/install/bin/webpack-dev-server.tt

@@ -0,0 +1,23 @@
+<%= shebang %>
+
+RAILS_ENV   = ENV['RAILS_ENV'] || 'development'
+WEBPACK_ENV = ENV['WEBPACK_ENV'] || RAILS_ENV
+
+APP_PATH    = File.expand_path('../', __dir__)
+VENDOR_PATH = File.expand_path('../vendor', __dir__)
+
+SET_NODE_PATH  = "NODE_PATH=#{VENDOR_PATH}/node_modules"
+WEBPACKER_BIN    = "./node_modules/.bin/webpack-dev-server"
+WEBPACK_CONFIG = "#{APP_PATH}/config/webpack/#{WEBPACK_ENV}.js"
+
+# Warn the user if the configuration is not set
+RAILS_ENV_CONFIG = File.join("config", "environments", "#{RAILS_ENV}.rb")
+
+# Look into the environment file for a non-commented variable declaration
+unless File.foreach(File.join(APP_PATH, RAILS_ENV_CONFIG)).detect { |line| line.match(/^\s*[^#]*config\.x\.webpacker\[\:dev_server_host\].*=/) }
+  puts "Warning: if you want to use webpack-dev-server, you need to tell Webpacker to serve asset packs from it. Please set config.x.webpacker[:dev_server_host] in #{RAILS_ENV_CONFIG}.\n\n"
+end
+
+Dir.chdir(VENDOR_PATH) do
+  exec "#{SET_NODE_PATH} #{WEBPACKER_BIN} --config #{WEBPACK_CONFIG} --content-base public/packs #{ARGV.join(" ")}"
+end

data/lib/install/bin/yarn.tt

@@ -0,0 +1,10 @@
+<%= shebang %>
+VENDOR_PATH = File.expand_path('../vendor', __dir__)
+Dir.chdir(VENDOR_PATH) do
+  begin
+    exec "yarnpkg #{ARGV.join(" ")}"
+  rescue Errno::ENOENT
+    puts "Yarn executable was not detected in the system."
+    puts "Download Yarn at https://yarnpkg.com/en/docs/install"
+  end
+end

data/lib/install/config/development.js

@@ -2,13 +2,24 @@
 
 var path    = require('path')
 var webpack = require('webpack')
-var _       = require('lodash')
+var merge   = require('webpack-merge')
 
-var config = module.exports = require('./shared.js')
+var config = require('./shared.js')
 
-config = _.merge(config, {
-  debug: true,
-  displayErrorDetails: true,
-  outputPathinfo: true,
+module.exports = merge(config, {
   devtool: 'sourcemap',
+
+  stats: {
+    errorDetails: true
+  },
+
+  output: {
+    pathinfo: true
+  },
+
+  plugins: [
+    new webpack.LoaderOptionsPlugin({
+      debug: true
+    })
+  ]
 })

data/lib/install/config/production.js

@@ -2,13 +2,16 @@
 
 var path    = require('path')
 var webpack = require('webpack')
-var _       = require('lodash')
+var merge   = require('webpack-merge')
 
-var config = module.exports = require('./shared.js');
+var config = require('./shared.js')
 
-config.output = _.merge(config.output, { filename: '[name]-[hash].js' })
+module.exports = merge(config, {
+  output: { filename: "[name]-[hash].js" },
 
-config.plugins.push(
-  new webpack.optimize.UglifyJsPlugin(),
-  new webpack.optimize.OccurenceOrderPlugin()
-)
+  plugins: [
+    new webpack.LoaderOptionsPlugin({
+      minimize: true
+    })
+  ]
+})

data/lib/install/config/shared.js

@@ -2,30 +2,54 @@
 
 var path = require('path')
 var glob = require('glob')
-var _    = require('lodash')
+var extname = require('path-complete-extname')
 
 module.exports = {
-  entry: _.keyBy(glob.sync('../app/javascript/packs/*.js'), function(entry) { return path.basename(entry, '.js') }),
+  entry: glob.sync(path.join('..', 'app', 'javascript', 'packs', '*.js*')).reduce(
+    function(map, entry) {
+      var basename = path.basename(entry, extname(entry))
+      map[basename] = entry
+      return map
+    }, {}
+  ),
 
-  output: { filename: '[name].js', path: '../public/packs' },
+  output: { filename: '[name].js', path: path.resolve('..', 'public', 'packs') },
 
   module: {
-    loaders: [
-      { test: /\.coffee$/, loader: "coffee-loader" }
+    rules: [
+      { test: /\.coffee(.erb)?$/, loader: "coffee-loader" },
+      {
+        test: /\.js(.erb)?$/,
+        exclude: /node_modules/,
+        loader: 'babel-loader',
+        options: {
+          presets: [
+            [ 'latest', { 'es2015': { 'modules': false } } ]
+          ]
+        }
+      },
+      {
+        test: /\.erb$/,
+        enforce: 'pre',
+        loader: 'rails-erb-loader',
+        options: {
+          runner: '../bin/rails runner'
+        }
+      },
     ]
   },
 
   plugins: [],
 
   resolve: {
-    extensions: [ '', '.js', '.coffee' ],
-    root: [
+    extensions: [ '.js', '.coffee' ],
+    modules: [
       path.resolve('../app/javascript'),
       path.resolve('../vendor/node_modules')
     ]
   },
 
   resolveLoader: {
-    modulesDirectories: [ path.resolve('../vendor/node_modules') ]
+    modules: [ path.resolve('../vendor/node_modules') ]
   }
 }

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

@@ -1 +1,9 @@
-// var React = require('react')
+// This file is will 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
+// that code, so it'll be compiled.
+//
+// To reference this file, add <%= javascript_pack_tag 'application' %> to the appropriate
+// layout file, like app/views/layouts/application.html.erb
+
+console.log("Hello World from Webpacker")

data/lib/install/react/hello_react.js

@@ -0,0 +1,16 @@
+// Run this example by adding <%= javascript_pack_tag 'hello_react' %> to the head of your layout file,
+// like app/views/layouts/application.html.erb. All it does is render <div>Hello React</div> at the bottom
+// of the page.
+
+import React from 'react'
+import ReactDOM from 'react-dom'
+
+class Hello extends React.Component {
+  render() {
+    return <div>Hello {this.props.name}!</div>
+  }
+}
+
+document.addEventListener("DOMContentLoaded", e => {
+  ReactDOM.render(<Hello name="React" />, document.body.appendChild(document.createElement('div')))
+})

data/lib/install/template.rb

@@ -7,9 +7,18 @@ chmod 'bin', 0755 & ~File.umask, verbose: false
 
 directory "#{INSTALL_PATH}/config", 'config/webpack'
 
-run './bin/yarn add webpack lodash'
+append_to_file '.gitignore', <<-EOS
+/public/packs
+EOS
+
+run './bin/yarn add --dev webpack@beta webpack-merge webpack-dev-server@beta path-complete-extname babel-loader babel-core babel-preset-latest coffee-loader coffee-script rails-erb-loader'
 
 environment \
   "# Make javascript_pack_tag lookup digest hash to enable long-term caching\n" +
   "  config.x.webpacker[:digesting] = true\n",
   env: 'production'
+
+environment \
+  "# Make javascript_pack_tag load assets from webpack-dev-server.\n" +
+  "  # config.x.webpacker[:dev_server_host] = \"http://localhost:8080\"\n",
+  env: 'development'

data/lib/tasks/webpacker.rake

@@ -4,7 +4,7 @@ PACK_DIGESTS_PATH = PACKS_PATH.join('digests.json')
 WEBPACKER_APP_TEMPLATE_PATH = File.expand_path('../install/template.rb', File.dirname(__FILE__))
 
 namespace :webpacker do
-  desc "compile javascript packs using webpack for production with digests"
+  desc "Compile javascript packs using webpack for production with digests"
   task :compile do
     webpack_digests_json = JSON.parse(`WEBPACK_ENV=production ./bin/webpack --json`)['assetsByChunkName'].to_json
 
@@ -15,8 +15,43 @@ namespace :webpacker do
     puts webpack_digests_json
   end
 
-  desc "install webpacker in this application"
+  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 react example to app/javascript/packs/hello_react.js"
+      FileUtils.copy File.expand_path('../install/react/hello_react.js', File.dirname(__FILE__)),
+        Rails.root.join('app/javascript/packs/hello_react.js')
+
+      exec './bin/yarn add --dev babel-preset-react && ./bin/yarn add react react-dom'
+    end
+  end
+end
+
+# Compile packs after we've compiled all other assets during precompilation
+Rake::Task['assets:precompile'].enhance do
+  Rake::Task['webpacker:compile'].invoke
 end

data/lib/webpacker/digests.rb

@@ -1,3 +1,7 @@
+# Singleton registry for accessing the digested filenames computed by Webpack in production mode.
+# This allows javascript_pack_tag to take a reference to, say, "calendar.js" and turn it into 
+# "calendar-1016838bab065ae1e314.js". These digested filenames are what enables you to long-term
+# cache things in production.
 class Webpacker::Digests
   class_attribute :instance
 

data/lib/webpacker/helper.rb

@@ -1,7 +1,20 @@
 require 'webpacker/source'
 
 module Webpacker::Helper
+  # 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.
+  #
+  # Examples:
+  #
+  #   # In development mode:
+  #   <%= javascript_pack_tag 'calendar', 'data-turbolinks-track': 'reload' %> # =>
+  #   <script src="/packs/calendar.js" data-turbolinks-track="reload"></script>
+  #
+  #   # In production mode:
+  #   <%= 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)
-    tag.script src: Webpacker::Source.new(name).path, **options
+    javascript_include_tag(Webpacker::Source.new(name).path, **options)
   end
 end

data/lib/webpacker/source.rb

@@ -1,10 +1,16 @@
+# Translates a logical reference for a pack source into the final path needed in the HTML.
+# This translation takes into account whether digesting is configured to happen, which it
+# is by default in the production environment (as set via
+# `Rails.configuration.x.webpacker[:digesting] = true`).
 class Webpacker::Source
   def initialize(name)
     @name = name
   end
 
   def path
-    if digesting?
+    if config[:dev_server_host].present?
+      "#{config[:dev_server_host]}/#{filename}"
+    elsif config[:digesting]
       "/packs/#{digested_filename}"
     else
       "/packs/#{filename}"
@@ -14,9 +20,9 @@ class Webpacker::Source
   private
     attr_accessor :name
 
-    def digesting?
-      Rails.configuration.x.webpacker[:digesting]
-    end  
+    def config
+      Rails.configuration.x.webpacker
+    end
 
     def digested_filename
       Webpacker::Digests.lookup(name)

data/webpacker.gemspec

@@ -1,6 +1,6 @@
 Gem::Specification.new do |s|
   s.name     = 'webpacker'
-  s.version  = '0.1'
+  s.version  = '0.2'
   s.authors  = 'David Heinemeier Hansson'
   s.email    = 'david@basecamp.com'
   s.summary  = 'Use Webpack to manage app-like JavaScript modules in Rails'
@@ -11,6 +11,9 @@ Gem::Specification.new do |s|
 
   s.add_dependency 'activesupport', '>= 3.0.0', '< 5.1'
   s.add_dependency 'multi_json',    '~> 1.2'
+  s.add_dependency 'railties',      '~> 5'
+
+  s.add_development_dependency 'bundler', '~> 1.12'
 
   s.files         = `git ls-files`.split("\n")
   s.test_files    = `git ls-files -- test/*`.split("\n")

metadata

@@ -1,14 +1,14 @@
 --- !ruby/object:Gem::Specification
 name: webpacker
 version: !ruby/object:Gem::Version
-  version: '0.1'
+  version: '0.2'
 platform: ruby
 authors:
 - David Heinemeier Hansson
 autorequire: 
 bindir: bin
 cert_chain: []
-date: 2016-12-07 00:00:00.000000000 Z
+date: 2017-01-17 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: activesupport
@@ -44,20 +44,55 @@ dependencies:
     - - "~>"
       - !ruby/object:Gem::Version
         version: '1.2'
+- !ruby/object:Gem::Dependency
+  name: railties
+  requirement: !ruby/object:Gem::Requirement
+    requirements:
+    - - "~>"
+      - !ruby/object:Gem::Version
+        version: '5'
+  type: :runtime
+  prerelease: false
+  version_requirements: !ruby/object:Gem::Requirement
+    requirements:
+    - - "~>"
+      - !ruby/object:Gem::Version
+        version: '5'
+- !ruby/object:Gem::Dependency
+  name: bundler
+  requirement: !ruby/object:Gem::Requirement
+    requirements:
+    - - "~>"
+      - !ruby/object:Gem::Version
+        version: '1.12'
+  type: :development
+  prerelease: false
+  version_requirements: !ruby/object:Gem::Requirement
+    requirements:
+    - - "~>"
+      - !ruby/object:Gem::Version
+        version: '1.12'
 description: 
 email: david@basecamp.com
 executables: []
 extensions: []
 extra_rdoc_files: []
 files:
+- ".gitignore"
+- Gemfile
+- Gemfile.lock
 - MIT-LICENSE
 - README.md
+- Rakefile
+- lib/install/bin/webpack-dev-server.tt
 - lib/install/bin/webpack-watcher.tt
 - lib/install/bin/webpack.tt
+- lib/install/bin/yarn.tt
 - lib/install/config/development.js
 - lib/install/config/production.js
 - lib/install/config/shared.js
 - lib/install/javascript/packs/application.js
+- lib/install/react/hello_react.js
 - lib/install/template.rb
 - lib/tasks/webpacker.rake
 - lib/webpacker.rb
@@ -86,7 +121,7 @@ required_rubygems_version: !ruby/object:Gem::Requirement
       version: '0'
 requirements: []
 rubyforge_project: 
-rubygems_version: 2.5.1
+rubygems_version: 2.5.2
 signing_key: 
 specification_version: 4
 summary: Use Webpack to manage app-like JavaScript modules in Rails