@kanaabe => Replace Browserify with Webpack

.babelrc

@@ -1,11 +1,14 @@
 {
   "presets": [
-    "es2015",
+    ["env", {
+      "targets": {
+        "browsers": ["last 2 versions"]
+      }
+    }],
     "react",
     "stage-3"
   ],
   "plugins": [
-    "babel-plugin-rewire",
     "inline-react-svg",
     "transform-runtime",
     ["module-resolver", {
@@ -16,10 +19,16 @@
   "env": {
     "development": {
       "plugins": [
-        ["styled-components", {
-          "ssr": true
+        ["babel-plugin-styled-components", {
+          "ssr": true,
+          "displayName": true
         }]
       ]
+    },
+    "test" : {
+      "plugins": [
+        "babel-plugin-rewire"
+      ]
     }
   }
 }

.env.oss

@@ -4,6 +4,8 @@
 # as then we'll have to change it, making it harder for others to learn from.
 # As such, these keys do not come under the Artsy security bounty either.
 
+WEBPACK_DEVTOOL=cheap-module-source-map
+
 # Shared
 API_REQUEST_TIMEOUT=10000
 API_URL=https://stagingapi.artsy.net

desktop/analytics/article_impressions.js

@@ -1,3 +1,6 @@
+const $ = require('jquery')
+const _ = require('underscore')
+
 if (location.pathname.match('/article/') || location.pathname.match('/articles')) {
   var trackedImpressions = []
 
@@ -123,7 +126,7 @@ if (location.pathname.match('/article/') || location.pathname.match('/articles')
             id: 'article_callout:' + articleId + ':' + destinationPath
           }
         } else {
-          return
+
         }
       }).toArray()
 

desktop/apps/auction/client.js

@@ -9,7 +9,6 @@ import configureStore from 'desktop/components/react/utils/configureStore'
 import { rehydrateClient } from 'desktop/components/react/utils/renderReactLayout'
 
 export default () => {
-  // Rehydrate data from Server
   const bootstrapData = rehydrateClient(window.__BOOTSTRAP__)
   const auctionModel = new Auction(bootstrapData.app.auction)
   const auctionArticles = new Articles(bootstrapData.app.articles)

desktop/apps/auction/components/DOM.js

@@ -19,7 +19,11 @@ class DOM extends Component {
 
   componentDidMount () {
     const FastClick = require('fastclick')
-    FastClick(document.body)
+
+    // removes 300ms delay
+    if (FastClick.attach) {
+      FastClick.attach(document.body)
+    }
 
     this.$ = require('jquery')
     this.addEventListeners()

desktop/apps/auctions2/components/DOM.js

@@ -13,7 +13,11 @@ class DOM extends Component {
 
   componentDidMount () {
     const FastClick = require('fastclick')
-    FastClick(document.body)
+
+    // removes 300ms delay
+    if (FastClick.attach) {
+      FastClick.attach(document.body)
+    }
 
     this.$ = require('jquery')
     this.addEventListeners()

desktop/apps/inquiry/client/routes/inquiry.coffee

@@ -1,5 +1,4 @@
 _ = require 'underscore'
-attachFastClick = -> require('fastclick') arguments...
 { ARTWORK } = require('sharify').data
 User = require '../../../../models/user.coffee'
 Artwork = require '../../../../models/artwork.coffee'
@@ -10,10 +9,13 @@ openErrorFlash = require '../../../../components/inquiry_questionnaire/error.cof
 Logger = require '../../../../components/logger/index.coffee'
 Trail = require '../../../../components/inquiry_questionnaire/trail.coffee'
 analytics = require '../../../../components/inquiry_questionnaire/analytics.coffee'
+FastClick = require 'fastclick'
 { steps, decisions, views } = require '../map.coffee'
 
+
 module.exports = (id, bypass) ->
-  attachFastClick document.body
+  if FastClick.attach
+    FastClick.attach document.body
 
   steps = [bypass] if bypass and _.contains(_.keys(views), bypass)
 

desktop/apps/inquiry/stylesheets/index.styl

@@ -4,6 +4,8 @@
 
 .inquiry-page
   margin (main-header-height + 20px) 0
+  +respond-mobile()
+    padding 20px
 
 .iqm-alert
   position absolute

desktop/apps/inquiry/test/client/index.coffee

@@ -12,7 +12,7 @@ describe 'mobile inquiry flow initialization', ->
         jQuery: benv.require 'jquery'
       Backbone.$ = $
       initializeInquiry = rewire '../../client/routes/inquiry'
-      initializeInquiry.__set__ 'attachFastClick', sinon.stub()
+      initializeInquiry.__set__ 'FastClick', sinon.stub()
       @StateView = initializeInquiry.__get__ 'StateView'
       @render = sinon.stub @StateView::, 'render', -> this
       done()

desktop/apps/webpack/client.js

@@ -0,0 +1,7 @@
+import React from 'react'
+import ReactDOM from 'react-dom'
+import { App } from './components/App'
+
+ReactDOM.render(
+  <App />, document.getElementById('react-root')
+)

desktop/apps/webpack/components/App.js

@@ -0,0 +1,18 @@
+import React, { Component } from 'react'
+import styled from 'styled-components'
+
+const Container = styled.div`
+  background: black;
+  font-size: 40px;
+  color: white;
+`
+
+export class App extends Component {
+  render () {
+    return (
+      <Container>
+        hi!!!!! 10
+      </Container>
+    )
+  }
+}

desktop/components/main_layout/templates/scripts.jade

@@ -114,16 +114,12 @@ script( type="text/javascript" ).
 if sharify
   != sharify.script()
 
-//- Add Google's jQuery
-script( src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.4/jquery.min.js" )
-
 //- Stripe
 if options.stripe
   script( type="text/javascript", src="https://js.stripe.com/v2/" )
 
-//- Common bundle generated from factor-bundle
-if sd.NODE_ENV !== 'development'
-  script( src=asset("/assets/common.js") )
+//- Common bundle
+script( src=asset("/assets/common.js") )
 
 //- Analytics & common asset package
 if sd.BROWSER && sd.BROWSER.family != 'PhantomJS'

desktop/components/recently_viewed_artworks/index.styl

@@ -3,6 +3,8 @@
 
 #recently-viewed-artworks
   background-color gray-lightest-color
+  +respond-mobile()
+    padding 17px
 .rva-container
   padding-bottom 50px
 .rva-header

desktop/components/simple_contact/stylesheets/index.styl

@@ -12,7 +12,9 @@
   text-align center
   border-bottom 1px solid gray-lighter-color
   padding 0 0 20px
-  margin 0 -30px
+  +respond-desktop()
+    margin 0 -30px
+
 .scontact-errors
 .scontact-description
 .scontact-from

desktop/index.js

@@ -69,5 +69,5 @@ app.use(require('./apps/feature'))
 // User profiles
 app.use(require('./apps/user'))
 
-// React Serverside Example
+// Examples
 app.use(require('./apps/react_example'))

desktop/lib/global_client_setup.coffee

@@ -75,6 +75,10 @@ setupJquery = ->
   require '../../node_modules/jquery-touch-events/src/jquery.mobile-events.min.js'
   require('artsy-gemini-upload') $
   require('jquery-fillwidth-lite')($, _, imagesLoaded)
+
+  imagesLoaded = require 'imagesloaded'
+  imagesLoaded.makeJQueryPlugin($)
+
   # For drop down menus that appear on hover you may want that menu to close
   # once you click it. For these cases do `$el.click -> $(@).hidehover()` and
   # the menu will hide and then remove the `display` property so the default

index.js

@@ -20,7 +20,7 @@ cache.setup(() => {
   artsyXapp.init({ url: API_URL, id: CLIENT_ID, secret: CLIENT_SECRET }, () => {
     // Start the server
     if (module === require.main) {
-      app.listen(PORT, () => console.log(`Force listening on port ${PORT}`))
+      app.listen(PORT, () => console.log(`\n\n  [Force] Booting on port ${PORT}... \n`))
     }
   })
 })

lib/middleware/error_handler.coffee

@@ -7,7 +7,6 @@ module.exports = (err, req, res, next) ->
     '../../desktop/components/error_handler/index.jade'
   )
   isDevelopment = NODE_ENV is 'development'
-  console.log err if isDevelopment
   code = 504 if req.timedout
   code ||= err.status || 500
   message = err.message || err.text || err.toString() if isDevelopment

lib/setup.js

@@ -153,34 +153,16 @@ export default function (app) {
 
   // Static assets
   if (NODE_ENV === 'development') {
+    app.use(require('./webpack-dev-server'))
+
     app.use(require('stylus').middleware({
       src: path.resolve(__dirname, '../desktop'),
       dest: path.resolve(__dirname, '../desktop/public')
     }))
-    app.use(require('browserify-dev-middleware')({
-      src: path.resolve(__dirname, '../desktop'),
-      transforms: [
-        require('babelify'),
-        require('caching-coffeeify'),
-        require('jadeify')
-      ],
-      insertGlobals: true,
-      debug: true
-    }))
     app.use(require('stylus').middleware({
       src: path.resolve(__dirname, '../mobile'),
       dest: path.resolve(__dirname, '../mobile/public')
     }))
-    app.use(require('browserify-dev-middleware')({
-      src: path.resolve(__dirname, '../mobile'),
-      transforms: [
-        require('babelify'),
-        require('caching-coffeeify'),
-        require('jadeify')
-      ],
-      insertGlobals: true,
-      debug: true
-    }))
   }
   glob.sync(`${__dirname}/../{public,{desktop,mobile}/**/public}`)
     .forEach((fld) => app.use(express.static(fld)))
@@ -221,7 +203,7 @@ export default function (app) {
     })
 
     mountAndReload(path.resolve('desktop'), {
-      additionalModules: [
+      watchModules: [
         '@artsy/reaction-force'
       ]
     })

lib/webpack-dev-server.js

@@ -0,0 +1,36 @@
+import express from 'express'
+import webpack from 'webpack'
+import path from 'path'
+
+const app = module.exports = express()
+const config = require(path.join(process.cwd(), 'webpack.config'))
+const compiler = webpack(config)
+
+app.use(require('webpack-hot-middleware')(compiler, {
+  log: false
+}))
+
+app.use(require('webpack-dev-middleware')(compiler, {
+  quiet: true,
+  publicPath: config.output.publicPath,
+  serverSideRender: true,
+  stats: {
+    colors: true
+  }
+}))
+
+// Testbed for various configurations
+app.get('/webpack', (req, res, next) => {
+  res.send(`
+  <html>
+    <head>
+      <title>Webpack Test</title>
+    </head>
+    <body>
+      <div id='react-root' />
+      <script src='/assets/common.js'></script>
+      <script src='/assets/webpack.js'></script>
+    </body>
+  </html>
+  `)
+})

mobile/apps/galleries_institutions/client/galleries_institutions.coffee

@@ -1,4 +1,5 @@
-require 'waypoints/lib/jquery.waypoints.js'
+require '../../../../node_modules/waypoints/lib/jquery.waypoints.js'
+
 { CITY, PARTNERS } = require('sharify').data
 bootstrap = require '../../../components/layout/bootstrap.coffee'
 Partners = require '../../../collections/partners.coffee'

mobile/assets/mobile_all.coffee

@@ -6,7 +6,7 @@
 # to get more complex in how we break up and load assets.
 #
 
-require 'jquery'
+$ = require 'jquery'
 sd = require('sharify').data
 
 # TODO: Refactor to use Backbone router

mobile/assets/mobile_articles.coffee

@@ -1,5 +1,6 @@
-require 'jquery'
+$ = require 'jquery'
 require('backbone').$ = $
+sd = require('sharify').data
 articleIndex = require '../apps/articles/client/articles.coffee'
 sectionView = require '../apps/articles/client/section.coffee'
 ArticleView = require '../components/article/client/view.coffee'

mobile/components/layout/bootstrap.coffee

@@ -8,6 +8,7 @@
 require 'jquery'
 Backbone = require 'backbone'
 Backbone.$ = $
+
 _ = require 'underscore'
 FastClick = require 'fastclick'
 RavenClient = require 'raven-js'
@@ -16,8 +17,18 @@ Cookies = require 'cookies-js'
 { parse } = require 'url'
 HeaderView = require './client/header_view.coffee'
 doc = window.document
+sharify = require('sharify')
+
 
 module.exports = ->
+  try
+    jqueryFillwidthLite = require 'jquery-fillwidth-lite'
+    imagesLoaded = require 'imagesloaded'
+    imagesLoaded.makeJQueryPlugin($)
+    jqueryFillwidthLite($, _, imagesLoaded)
+  catch error
+    # Noop used for tests. No need to setup
+
   # Add the Gravity XAPP or access token to all ajax requests
   $.ajaxSettings.headers = {
     "X-XAPP-TOKEN": sd.ARTSY_XAPP_TOKEN
@@ -30,9 +41,9 @@ module.exports = ->
     Cookies.set 'inquiry-referrer', doc.referrer
     Cookies.set 'inquiry-session-start', location.href
 
-
   # removes 300ms delay
-  FastClick document.body
+  if FastClick.attach
+    FastClick.attach document.body
 
   setupErrorReporting()
   setupHeaderView()

mobile/components/layout/templates/scaffold.jade

@@ -29,12 +29,8 @@ html( class=htmlClass )
       if sharify
         != sharify.script()
 
-      //- Add Google's jQuery
-      script( src="//ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js" )
-
-      //- Common bundle generated from factor-bundle
-      if sd.NODE_ENV !== 'development'
-        script( src=asset("/assets/common.js") )
+      //- Common bundle
+      script( src=asset("/assets/common.js") )
 
       //- Include asset package's javascript
       script( src=asset('/assets/' + assetPackage + '.js') )