Add eslint for javascript code consistency

.eslintrc.js

@@ -0,0 +1,14 @@
+module.exports = {
+  'extends': 'airbnb',
+  'rules': {
+    'comma-dangle': ['error', 'never'],
+    'import/no-unresolved': 'off',
+    'import/no-extraneous-dependencies': 'off',
+    'import/extensions': 'off',
+    semi: ['error', 'never'],
+  },
+  'env': {
+    'browser': true,
+    'node': true,
+  },
+};

.gitignore

@@ -1 +1,2 @@
 /.bundle
+node_modules

lib/install/angular/hello_angular.js

@@ -4,4 +4,4 @@
 //
 // <%= javascript_pack_tag 'hello_angular' %>
 
-require("hello_angular")
+require('./hello_angular')

lib/install/config/development.js

@@ -1,7 +1,7 @@
 // Note: You must restart bin/webpack-watcher for changes to take effect
 
 const webpack = require('webpack')
-const merge   = require('webpack-merge')
+const merge = require('webpack-merge')
 
 const sharedConfig = require('./shared.js')
 

lib/install/config/production.js

@@ -1,7 +1,7 @@
 // Note: You must restart bin/webpack-watcher for changes to take effect
 
 const webpack = require('webpack')
-const merge   = require('webpack-merge')
+const merge = require('webpack-merge')
 
 const sharedConfig = require('./shared.js')
 

lib/install/config/shared.js

@@ -5,31 +5,35 @@ const path = require('path')
 const process = require('process')
 const glob = require('glob')
 const extname = require('path-complete-extname')
+
 let distDir = process.env.WEBPACK_DIST_DIR
 
 if (distDir === undefined) {
   distDir = 'packs'
 }
 
-config = {
-  entry: glob.sync(path.join('app', 'javascript', 'packs', '*.js*')).reduce((map, entry) => {
-    const basename = path.basename(entry, extname(entry))
-    map[basename] = path.resolve(entry)
-    return map
-  }, {}),
+const config = {
+  entry: glob.sync(path.join('app', 'javascript', 'packs', '*.js*')).reduce(
+    (map, entry) => {
+      const basename = path.basename(entry, extname(entry))
+      const localMap = map
+      localMap[basename] = path.resolve(entry)
+      return localMap
+    }, {}
+  ),
 
   output: { filename: '[name].js', path: path.resolve('public', distDir) },
 
   module: {
     rules: [
-      { test: /\.coffee(\.erb)?$/, loader: "coffee-loader" },
+      { test: /\.coffee(\.erb)?$/, loader: 'coffee-loader' },
       {
         test: /\.js(\.erb)?$/,
         exclude: /node_modules/,
         loader: 'babel-loader',
         options: {
           presets: [
-            [ 'latest', { 'es2015': { 'modules': false } } ]
+            ['latest', { es2015: { modules: false } }]
           ]
         }
       },
@@ -41,7 +45,7 @@ config = {
         options: {
           runner: 'DISABLE_SPRING=1 bin/rails runner'
         }
-      },
+      }
     ]
   },
 
@@ -50,19 +54,19 @@ config = {
   ],
 
   resolve: {
-    extensions: [ '.js', '.coffee' ],
+    extensions: ['.js', '.coffee'],
     modules: [
       path.resolve('app/javascript'),
       path.resolve('node_modules')
     ]
   },
 
   resolveLoader: {
-    modules: [ path.resolve('node_modules') ]
+    modules: [path.resolve('node_modules')]
   }
 }
 
 module.exports = {
-  distDir: distDir,
-  config: config
+  distDir,
+  config
 }

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

lib/install/react/hello_react.jsx

@@ -0,0 +1,25 @@
+// 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'
+
+const Hello = props => (
+  <div>Hello {props.name}!</div>
+)
+
+Hello.defaultProps = {
+  name: 'David'
+}
+
+Hello.propTypes = {
+  name: React.PropTypes.string
+}
+
+document.addEventListener('DOMContentLoaded', () => {
+  ReactDOM.render(
+    <Hello name="React" />,
+    document.body.appendChild(document.createElement('div')),
+  )
+})

lib/install/vue/hello_vue.js

@@ -1,4 +1,5 @@
-// 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' %>
+// 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.
 
@@ -7,7 +8,7 @@ import App from './app.vue'
 
 document.body.appendChild(document.createElement('hello'))
 
-new Vue({
+Vue({
   el: 'hello',
   template: '<App/>',
   components: { App }

lib/tasks/webpacker.rake

@@ -55,9 +55,9 @@ namespace :webpacker do
       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')
+      puts "Copying react example to app/javascript/packs/hello_react.jsx"
+      FileUtils.copy File.expand_path('../install/react/hello_react.jsx', __dir__),
+        Rails.root.join('app/javascript/packs/hello_react.jsx')
 
       exec './bin/yarn add --dev babel-preset-react && ./bin/yarn add react react-dom'
     end

package.json

@@ -0,0 +1,28 @@
+{
+  "name": "webpacker",
+  "version": "1.0.0",
+  "description": "Webpacker makes it easy to use the JavaScript preprocessor and bundler [Webpack](https://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 (that all continues to live in app/assets).",
+  "main": "index.js",
+  "dependencies": {},
+  "devDependencies": {
+    "eslint": "^3.16.1",
+    "eslint-config-airbnb": "^14.1.0",
+    "eslint-plugin-import": "^2.2.0",
+    "eslint-plugin-jsx-a11y": "^4.0.0",
+    "eslint-plugin-react": "^6.10.0"
+  },
+  "scripts": {
+    "test": "echo \"Error: no test specified\" && exit 1",
+    "lint": "node_modules/eslint/bin/eslint.js lib/"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/rails/webpacker.git"
+  },
+  "author": "David Heinemeier Hansson <[email protected]>",
+  "license": "MIT",
+  "bugs": {
+    "url": "https://github.com/rails/webpacker/issues"
+  },
+  "homepage": "https://github.com/rails/webpacker#readme"
+}