Add react-transform-hmr for auto listeners

artsy · Sep 22, 2017 · aeb96e1 · aeb96e1
1 parent 5d5c7a2
commit aeb96e1
Show file tree

Hide file tree

Showing 10 changed files with 119 additions and 37 deletions.
diff --git a/desktop/apps/auction/client.js b/desktop/apps/auction/client.js
@@ -34,7 +34,3 @@ export default () => {
     document.getElementById('react-root')
   )
 }
-
-if (module.hot) {
-  module.hot.accept()
-}
diff --git a/desktop/apps/auction/components/App.js b/desktop/apps/auction/components/App.js
@@ -22,3 +22,4 @@ export default class App extends Component {
     )
   }
 }
+
diff --git a/desktop/apps/webpack/client.js b/desktop/apps/webpack/client.js
@@ -0,0 +1,7 @@
+import App from './components/App'
+import React from 'react'
+import ReactDOM from 'react-dom'
+
+ReactDOM.render(
+  <App />, document.getElementById('react-root')
+)
diff --git a/desktop/apps/webpack/components/App.js b/desktop/apps/webpack/components/App.js
@@ -0,0 +1,11 @@
+import React, { Component } from 'react'
+
+export default class App extends Component {
+  render () {
+    return (
+      <div>
+        hi!
+      </div>
+    )
+  }
+}
diff --git a/desktop/components/main_layout/templates/scripts.jade b/desktop/components/main_layout/templates/scripts.jade
@@ -115,7 +115,7 @@ if sharify
   != sharify.script()
 
 //- Add Google's jQuery
-script( src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.4/jquery.min.js" )
+//- script( src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.4/jquery.min.js" )
 
 //- Stripe
 if options.stripe

diff --git a/lib/setup.js b/lib/setup.js
@@ -159,30 +159,10 @@ export default function (app) {
       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)))

diff --git a/lib/webpack-dev-server.js b/lib/webpack-dev-server.js
@@ -19,6 +19,7 @@ app.use(require('webpack-dev-middleware')(compiler, {
   }
 }))
 
+// Testbed for various configurations
 app.get('/webpack', (req, res, next) => {
   res.send(`
   <html>
@@ -28,7 +29,7 @@ app.get('/webpack', (req, res, next) => {
     <body>
       <div id='react-root' />
       <script src='/assets/common.js'></script>
-      <script src='/assets/auctions.js'></script>
+      <script src='/assets/webpack.js'></script>
     </body>
   </html>
   `)

diff --git a/package.json b/package.json
@@ -148,6 +148,7 @@
     "artsy-gemini-upload": "0.0.6",
     "babel-loader": "^7.1.2",
     "babel-plugin-styled-components": "^1.1.7",
+    "babel-preset-react-hmre": "^1.1.1",
     "background-check": "git://github.com/kennethcachia/background-check",
     "benv": "^3.3.0",
     "blueimp-file-upload": "9.9.0",
@@ -193,6 +194,7 @@
     "openseadragon": "^2.2.1",
     "progress-bar-webpack-plugin": "^1.10.0",
     "react-test-renderer": "^15.5.4",
+    "react-transform-hmr": "^1.0.4",
     "rewire": "2.2.0",
     "should": "^11.1.1",
     "sinon": "^1.17.1",

diff --git a/webpack.config.js b/webpack.config.js
@@ -12,7 +12,13 @@ const isDeploy = isStaging || isProduction
 
 const config = {
   devtool: 'cheap-module-eval-source-map',
-  entry: getEntrypoints(),
+  entry: {
+    webpack: [
+      'webpack-hot-middleware/client?reload=true',
+      './desktop/apps/webpack/client.js'
+    ],
+    ...getEntrypoints()
+  },
   output: {
     filename: '[name].js',
     path: path.resolve(__dirname, 'public/assets'),
@@ -34,12 +40,28 @@ const config = {
       {
         test: /\.js$/,
         exclude: /node_modules/,
-        use: [{
-          loader: 'babel-loader',
-          options: {
-            cacheDirectory: true
+        use: [
+          {
+            loader: 'babel-loader',
+            query: {
+              cacheDirectory: true,
+              'env': {
+                'development': {
+                  'presets': ['react-hmre'],
+                  'plugins': [
+                    ['react-transform', {
+                      'transforms': [{
+                        'transform': 'react-transform-hmr',
+                        'imports': ['react'],
+                        'locals': ['module']
+                      }]
+                    }]
+                  ]
+                }
+              }
+            }
           }
-        }]
+        ]
       },
       {
         test: /\.json$/,
@@ -129,7 +151,7 @@ function findAssets (basePath) {
    */
   const assets = files
     .filter(validAssets)
-    .reduce((assetMap, file, index) => {
+    .reduce((assetMap, file) => {
       const fileName = path.basename(file, path.extname(file))
       const asset = {
         [fileName]: [
@@ -138,7 +160,7 @@ function findAssets (basePath) {
       }
 
       if (isDevelopment) {
-        asset[fileName].push(
+        asset[fileName].unshift(
           'webpack-hot-middleware/client?reload=true'
         )
       }

diff --git a/yarn.lock b/yarn.lock
@@ -948,6 +948,12 @@ babel-plugin-react-docgen@^1.6.0:
     lodash "4.x.x"
     react-docgen "^2.15.0"
 
+babel-plugin-react-transform@^2.0.2:
+  version "2.0.2"
+  resolved "https://registry.yarnpkg.com/babel-plugin-react-transform/-/babel-plugin-react-transform-2.0.2.tgz#515bbfa996893981142d90b1f9b1635de2995109"
+  dependencies:
+    lodash "^4.6.1"
+
 babel-plugin-rewire@^1.0.0:
   version "1.1.0"
   resolved "https://registry.yarnpkg.com/babel-plugin-rewire/-/babel-plugin-rewire-1.1.0.tgz#a6b966d9d8c06c03d95dcda2eec4e2521519549b"
@@ -1422,6 +1428,15 @@ babel-preset-react-app@^3.0.0:
     babel-preset-env "1.5.2"
     babel-preset-react "6.24.1"
 
+babel-preset-react-hmre@^1.1.1:
+  version "1.1.1"
+  resolved "https://registry.yarnpkg.com/babel-preset-react-hmre/-/babel-preset-react-hmre-1.1.1.tgz#d216e60cb5b8d4c873e19ed0f54eaff1437bc492"
+  dependencies:
+    babel-plugin-react-transform "^2.0.2"
+    react-transform-catch-errors "^1.0.2"
+    react-transform-hmr "^1.0.3"
+    redbox-react "^1.2.2"
+
 babel-preset-react@6.24.1, babel-preset-react@^6.22.0, babel-preset-react@^6.24.1, babel-preset-react@^6.5.0:
   version "6.24.1"
   resolved "https://registry.yarnpkg.com/babel-preset-react/-/babel-preset-react-6.24.1.tgz#ba69dfaea45fc3ec639b6a4ecea6e17702c91380"
@@ -3452,6 +3467,12 @@ error-ex@^1.2.0:
   dependencies:
     is-arrayish "^0.2.1"
 
+error-stack-parser@^1.3.6:
+  version "1.3.6"
+  resolved "https://registry.yarnpkg.com/error-stack-parser/-/error-stack-parser-1.3.6.tgz#e0e73b93e417138d1cd7c0b746b1a4a14854c292"
+  dependencies:
+    stackframe "^0.3.1"
+
 error-stack-parser@^2.0.0:
   version "2.0.1"
   resolved "https://registry.yarnpkg.com/error-stack-parser/-/error-stack-parser-2.0.1.tgz#a3202b8fb03114aa9b40a0e3669e48b2b65a010a"
@@ -4498,7 +4519,7 @@ glob@^7.0.0, glob@^7.0.3, glob@^7.0.5, glob@^7.1.0, glob@^7.1.1, glob@~7.1.1:
     once "^1.3.0"
     path-is-absolute "^1.0.0"
 
-global@^4.3.2:
+global@^4.3.0, global@^4.3.2:
   version "4.3.2"
   resolved "https://registry.yarnpkg.com/global/-/global-4.3.2.tgz#e76989268a6c74c38908b1305b10fc0e394e9d0f"
   dependencies:
@@ -5826,7 +5847,7 @@ lodash@3.0.x:
   version "3.0.1"
   resolved "https://registry.yarnpkg.com/lodash/-/lodash-3.0.1.tgz#14d49028a38bc740241d11e2ecd57ec06d73c19a"
 
-lodash@4.x.x, lodash@^4.0.0, lodash@^4.13.1, lodash@^4.14.0, lodash@^4.17.2, lodash@^4.17.3, lodash@^4.17.4, lodash@^4.2.0, lodash@^4.2.1, lodash@^4.3.0, lodash@^4.5.1, lodash@~4.17.2:
+lodash@4.x.x, lodash@^4.0.0, lodash@^4.13.1, lodash@^4.14.0, lodash@^4.17.2, lodash@^4.17.3, lodash@^4.17.4, lodash@^4.2.0, lodash@^4.2.1, lodash@^4.3.0, lodash@^4.5.1, lodash@^4.6.1, lodash@~4.17.2:
   version "4.17.4"
   resolved "https://registry.yarnpkg.com/lodash/-/lodash-4.17.4.tgz#78203a4d1c328ae1d86dca6460e369b57f4055ae"
 
@@ -7506,6 +7527,10 @@ react-autowhatever@^10.0.0:
     react-themeable "^1.1.0"
     section-iterator "^2.0.0"
 
+react-deep-force-update@^1.0.0:
+  version "1.1.1"
+  resolved "https://registry.yarnpkg.com/react-deep-force-update/-/react-deep-force-update-1.1.1.tgz#bcd31478027b64b3339f108921ab520b4313dc2c"
+
 react-docgen@^2.15.0:
   version "2.16.0"
   resolved "https://registry.yarnpkg.com/react-docgen/-/react-docgen-2.16.0.tgz#03c9eba935de8031d791ab62657b7b6606ec5da6"
@@ -7605,6 +7630,13 @@ react-modal@^1.7.7:
     prop-types "^15.5.7"
     react-dom-factories "^1.0.0"
 
+react-proxy@^1.1.7:
+  version "1.1.8"
+  resolved "https://registry.yarnpkg.com/react-proxy/-/react-proxy-1.1.8.tgz#9dbfd9d927528c3aa9f444e4558c37830ab8c26a"
+  dependencies:
+    lodash "^4.6.1"
+    react-deep-force-update "^1.0.0"
+
 react-redux@^5.0.2:
   version "5.0.5"
   resolved "https://registry.yarnpkg.com/react-redux/-/react-redux-5.0.5.tgz#f8e8c7b239422576e52d6b7db06439469be9846a"
@@ -7719,6 +7751,17 @@ react-themeable@^1.1.0:
   dependencies:
     object-assign "^3.0.0"
 
+react-transform-catch-errors@^1.0.2:
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/react-transform-catch-errors/-/react-transform-catch-errors-1.0.2.tgz#1b4d4a76e97271896fc16fe3086c793ec88a9eeb"
+
+react-transform-hmr@^1.0.3, react-transform-hmr@^1.0.4:
+  version "1.0.4"
+  resolved "https://registry.yarnpkg.com/react-transform-hmr/-/react-transform-hmr-1.0.4.tgz#e1a40bd0aaefc72e8dfd7a7cda09af85066397bb"
+  dependencies:
+    global "^4.3.0"
+    react-proxy "^1.1.7"
+
 react-transition-group@^1.1.2:
   version "1.2.0"
   resolved "https://registry.yarnpkg.com/react-transition-group/-/react-transition-group-1.2.0.tgz#b51fc921b0c3835a7ef7c571c79fc82c73e9204f"
@@ -7904,6 +7947,15 @@ rechoir@^0.6.2:
   dependencies:
     resolve "^1.1.6"
 
+redbox-react@^1.2.2:
+  version "1.5.0"
+  resolved "https://registry.yarnpkg.com/redbox-react/-/redbox-react-1.5.0.tgz#04dab11557d26651bf3562a67c22ace56c5d3967"
+  dependencies:
+    error-stack-parser "^1.3.6"
+    object-assign "^4.0.1"
+    prop-types "^15.5.4"
+    sourcemapped-stacktrace "^1.1.6"
+
 redent@^1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/redent/-/redent-1.0.0.tgz#cf916ab1fd5f1f16dfb20822dd6ec7f730c2afde"
@@ -8578,7 +8630,7 @@ source-map@0.4.x, source-map@~0.4.0, source-map@~0.4.2:
   dependencies:
     amdefine ">=0.0.4"
 
-source-map@^0.5.0, source-map@^0.5.3, source-map@^0.5.6, source-map@~0.5.0, source-map@~0.5.1, source-map@~0.5.3:
+source-map@0.5.6, source-map@^0.5.0, source-map@^0.5.3, source-map@^0.5.6, source-map@~0.5.0, source-map@~0.5.1, source-map@~0.5.3:
   version "0.5.6"
   resolved "https://registry.yarnpkg.com/source-map/-/source-map-0.5.6.tgz#75ce38f52bf0733c5a7f0c118d81334a2bb5f412"
 
@@ -8588,6 +8640,12 @@ source-map@~0.2.0:
   dependencies:
     amdefine ">=0.0.4"
 
+sourcemapped-stacktrace@^1.1.6:
+  version "1.1.7"
+  resolved "https://registry.yarnpkg.com/sourcemapped-stacktrace/-/sourcemapped-stacktrace-1.1.7.tgz#17e05374ff78b71a9d89ad3975a49f22725ba935"
+  dependencies:
+    source-map "0.5.6"
+
 spawn-command@^0.0.2-1:
   version "0.0.2"
   resolved "https://registry.yarnpkg.com/spawn-command/-/spawn-command-0.0.2.tgz#9544e1a43ca045f8531aac1a48cb29bdae62338e"
@@ -8650,6 +8708,10 @@ stack-trace@0.0.9, stack-trace@0.0.x:
   version "0.0.9"
   resolved "https://registry.yarnpkg.com/stack-trace/-/stack-trace-0.0.9.tgz#a8f6eaeca90674c333e7c43953f275b451510695"
 
+stackframe@^0.3.1:
+  version "0.3.1"
+  resolved "https://registry.yarnpkg.com/stackframe/-/stackframe-0.3.1.tgz#33aa84f1177a5548c8935533cbfeb3420975f5a4"
+
 stackframe@^1.0.3:
   version "1.0.4"
   resolved "https://registry.yarnpkg.com/stackframe/-/stackframe-1.0.4.tgz#357b24a992f9427cba6b545d96a14ed2cbca187b"