Fix broken HMR & Remove unused MDL css

build/dev-server.js

@@ -0,0 +1,25 @@
+const path = require('path');
+const express = require('express');
+const webpack = require('webpack');
+const devMiddleware = require('webpack-dev-middleware');
+const hotMiddleware = require('webpack-hot-middleware');
+const config = require('./webpack.config');
+const compiler = webpack(config);
+
+const app = new express();
+
+app.use(devMiddleware(compiler, config.devServer));
+app.use(hotMiddleware(compiler));
+
+app.get('/', function(req, res) {
+  res.sendFile(path.join(__dirname, '/../src/index.html'));
+});
+
+app.listen(config.devServer.port, function onAppListening(err) {
+  if (err) {
+    console.error(err);
+  } else {
+    console.info('==> Webpack development server listening on port %s', config.devServer.port);
+    console.info('==> Please wait for bundle finished');
+  }
+});

build/webpack.config.base.js

@@ -23,23 +23,13 @@ module.exports = {
       loader: 'eslint-loader'
     }, {
       test: /\.css$/,
-      loader: 'style-loader!css-loader?outputStyle=expanded'
-    }, {
-      test: /\.sass/,
-      loader: 'style-loader!css-loader!sass-loader?outputStyle=expanded&indentedSyntax'
+      loader: ['style-loader', 'css-loader']
     }, {
       test: /\.scss/,
-      loader: 'style-loader!css-loader!sass-loader?outputStyle=expanded'
-    }, {
-      test: /\.(js|jsx)$/,
-      loader: 'babel-loader',
-      include: [].concat([path.join(__dirname, '/../src')])
+      loader: ['style-loader', 'css-loader', 'sass-loader']
     }, {
       test: /\.(png|jpg|gif|woff|woff2|ttf|svg|eot)(\?|\?[a-z0-9]+)?$/,
       loader: 'url-loader?limit=8192'
-    }, {
-      test: /\.(mp4|ogg)$/,
-      loader: 'file-loader'
     }, {
       test: /masonry|imagesloaded|fizzy\-ui\-utils|desandro\-|outlayer|get\-size|doc\-ready|eventie|eventemitter/,
       loader: 'imports-loader?define=>false&this=>window'

build/webpack.config.dev.js

@@ -8,27 +8,35 @@ module.exports = {
     historyApiFallback: true,
     inline: true,
     port: 23333,
-    publicPath: '/assets/',
+    publicPath: 'http://localhost:23333/assets/',
     noInfo: false,
+    hot: true,
     stats: {
       colors: true
     }
   },
   entry: [
     'babel-polyfill',
     'react-hot-loader/patch',
-    'webpack-dev-server/client?http://127.0.0.1:23333',
-    'webpack/hot/only-dev-server',
+    'webpack-hot-middleware/client?reload=true&path=http://localhost:23333/__webpack_hmr',
     'whatwg-fetch',
     './src/index'
   ],
   cache: true,
   devtool: 'eval',
+  module: {
+    rules: [{
+      test: /\.(js|jsx)$/,
+      loader: ['react-hot-loader/webpack', 'babel-loader'],
+      include: path.join(__dirname, '/../src')
+    }]
+  },
   plugins: [
     new webpack.DefinePlugin({
       'process.env.NODE_ENV': '"development"'
     }),
     new OpenBrowserPlugin({ url: 'http://localhost:23333' }),
-    new webpack.HotModuleReplacementPlugin()
+    new webpack.HotModuleReplacementPlugin(),
+    new webpack.NamedModulesPlugin()
   ]
 };

build/webpack.config.prod.js

@@ -17,6 +17,13 @@ module.exports = {
   },
   cache: false,
   devtool: 'cheap-module-inline-source-map',
+  module: {
+    rules: [{
+      test: /\.(js|jsx)$/,
+      loader: 'babel-loader',
+      include: path.join(__dirname, '/../src')
+    }]
+  },
   plugins: [
     new webpack.DefinePlugin({
       'process.env.NODE_ENV': '"production"'
@@ -41,18 +48,17 @@ module.exports = {
       this.plugin('done', function(statsData) {
         let stats = statsData.toJson();
         if (!stats.errors.length) {
-          let htmlFileNames = ['/../dist/index.html', '/../dist/404.html'];
-          htmlFileNames.map(function(htmlFileName) {
-            let htmlFilePath = path.join(__dirname, htmlFileName);
-            let html = fs.readFileSync(htmlFilePath, 'utf8');
+          let htmlFileName = '/../dist/index.html';
+          let htmlFilePath = path.join(__dirname, htmlFileName);
+          let html = fs.readFileSync(htmlFilePath, 'utf8');
 
-            // let htmlOutput = html.replace(
-            //   /<script\s+src=(["'])(.+?)bundle\.js\1/i,
-            //   '<script src=$1$2' + stats.assetsByChunkName.main + '?' + stats.hash + '$1');
+          // let htmlOutput = html.replace(
+          //   /<script\s+src=(["'])(.+?)bundle\.js\1/i,
+          //   '<script src=$1$2' + stats.assetsByChunkName.main + '?' + stats.hash + '$1');
 
-            let htmlOutput = html.replace(
-              /<script\s+src=(["'])(.+?)bundle\.js(.*)<\/script>/i,
-              `<script type="text/javascript">
+          let htmlOutput = html.replace(
+            /<script\s+src=(["'])(.+?)bundle\.js(.*)<\/script>/i,
+            `<script type="text/javascript">
 (function(hash, src, localStorage, document, window) {
   var createScript = function(url) {
     var script = document.createElement("script");
@@ -96,18 +102,16 @@ module.exports = {
 })("${stats.hash}", "$2${stats.assetsByChunkName.main}?${stats.hash}", window.localStorage, document, window);
 </script>`);
 
-            htmlOutput = minify(htmlOutput, {
-              collapseWhitespace: true,
-              removeComments: true,
-              minifyJS: true,
-              minifyCSS: true,
-              processConditionalComments: true
-            });
-
-            fs.writeFileSync(htmlFilePath, htmlOutput);
+          htmlOutput = minify(htmlOutput, {
+            collapseWhitespace: true,
+            removeComments: true,
+            minifyJS: true,
+            minifyCSS: true,
+            processConditionalComments: true
           });
 
-
+          fs.writeFileSync(htmlFilePath, htmlOutput);
+          fs.writeFileSync(htmlFilePath.replace('index.html', '404.html'), htmlOutput);
         }
       });
     }

dist/404.html

@@ -1 +1 @@
-<!doctype html><html lang="ja"><head><meta charset="utf-8"><title>pixivの「ラブライブ」発見</title><meta name="viewport" content="width=device-width,initial-scale=1"><meta name="description" content="pixiv.moe - pixivの「ラブライブ」発見 - pixiv写真の壁"><meta name="keywords" content="pixiv,pixiv写真の壁,pixiv lovelive,lovelive,ラブライブ,μ's,Aqours,高坂穂乃果,絢瀬絵里,南ことり,園田海未,星空凛,西木野真姫,東條希,小泉花陽,矢澤にこ,綺羅ツバサ,統堂英玲奈,優木あんじゅ,高海千歌,桜内梨子,松浦果南,黒澤ダイヤ,渡辺曜,津島善子,国木田花丸,小原鞠莉,黒澤ルビィ"><meta name="google-site-verification" content="aHrpJZ8M_WPQb07omJ2bwC2fg2DQMgFFEovu9wsSD0E"><link rel="dns-prefetch" href="//api.pixiv.moe"><link rel="dns-prefetch" href="//cdn.pixiv.moe"><link rel="dns-prefetch" href="//i1.pixiv.net"><link rel="dns-prefetch" href="//i2.pixiv.net"><link rel="dns-prefetch" href="//i3.pixiv.net"><link rel="dns-prefetch" href="//i4.pixiv.net"><link rel="dns-prefetch" href="//www.pixiv.net"><link rel="shortcut icon" type="image/x-icon" href="/favicon.ico?version=0.8.7"><style>.message{text-align:center;padding:20px 0;color:#999}.message p{font-size:15px}</style><style>#index-loading{position:absolute;width:300px;height:100px;top:0;right:0;bottom:0;left:0;margin:auto}#index-loading p{font-size:30px!important;margin:0!important;line-height:0!important}</style></head><body><!--[if lte IE 8]><div class="message"><p>古いInternet Explorerにサ終了！</p></div><![endif]--><noscript><div class="message"><p>Javascriptが無効になっていると、サイト内の一部機能がご利用いただけません</p></div></noscript><div id="app"><div id="index-loading" class="message"><p>(・ω・)充填中<span id="wait"></span></p></div></div><script type="text/javascript">!function(){var n=setInterval(function(){if(null!=document.getElementById("index-loading")){var e=document.getElementById("wait");e.innerHTML.length>3?e.innerHTML="":e.innerHTML+="."}else clearInterval(n)},400)}()</script><script type="text/javascript">!function(e,t,n,a,d){var i=function(e){var t=a.createElement("script");t.setAttribute("src",e),a.body.appendChild(t)},c=function(e){if(d.execScript)d.execScript(e);else{var t=a.head,n=a.createElement("script");n.type="text/javascript",n.text=e,t.removeChild(t.appendChild(n))}};if(n)if(n.bundle&&n.hash==e)c(n.bundle);else{var s=new XMLHttpRequest;s.open("GET",t,!0),s.onload=function(){var a=s.responseText;a&&a.match(/^!function/)?(n.bundle=a,c(n.bundle),n.hash=e):i(t)},s.send()}else i(t)}("49b6a1e3df675db61316","/assets/bundle.js?49b6a1e3df675db61316",window.localStorage,document,window)</script></body></html>
+<!doctype html><html lang="ja"><head><meta charset="utf-8"><title>pixivの「ラブライブ」発見</title><meta name="viewport" content="width=device-width,initial-scale=1"><meta name="description" content="pixiv.moe - pixivの「ラブライブ」発見 - pixiv写真の壁"><meta name="keywords" content="pixiv,pixiv写真の壁,pixiv lovelive,lovelive,ラブライブ,μ's,Aqours,高坂穂乃果,絢瀬絵里,南ことり,園田海未,星空凛,西木野真姫,東條希,小泉花陽,矢澤にこ,綺羅ツバサ,統堂英玲奈,優木あんじゅ,高海千歌,桜内梨子,松浦果南,黒澤ダイヤ,渡辺曜,津島善子,国木田花丸,小原鞠莉,黒澤ルビィ"><meta name="google-site-verification" content="aHrpJZ8M_WPQb07omJ2bwC2fg2DQMgFFEovu9wsSD0E"><link rel="dns-prefetch" href="//api.pixiv.moe"><link rel="dns-prefetch" href="//cdn.pixiv.moe"><link rel="dns-prefetch" href="//i1.pixiv.net"><link rel="dns-prefetch" href="//i2.pixiv.net"><link rel="dns-prefetch" href="//i3.pixiv.net"><link rel="dns-prefetch" href="//i4.pixiv.net"><link rel="dns-prefetch" href="//www.pixiv.net"><link rel="shortcut icon" type="image/x-icon" href="/favicon.ico?version=0.8.7"><style>.message{text-align:center;padding:20px 0;color:#999}.message p{font-size:15px}</style><style>#index-loading{position:absolute;width:300px;height:100px;top:0;right:0;bottom:0;left:0;margin:auto}#index-loading p{font-size:30px!important;margin:0!important;line-height:0!important}</style></head><body><!--[if lte IE 8]><div class="message"><p>古いInternet Explorerにサ終了！</p></div><![endif]--><noscript><div class="message"><p>Javascriptが無効になっていると、サイト内の一部機能がご利用いただけません</p></div></noscript><div id="app"><div id="index-loading" class="message"><p>(・ω・)充填中<span id="wait"></span></p></div></div><script type="text/javascript">!function(){var n=setInterval(function(){if(null!=document.getElementById("index-loading")){var e=document.getElementById("wait");e.innerHTML.length>3?e.innerHTML="":e.innerHTML+="."}else clearInterval(n)},400)}()</script><script type="text/javascript">!function(e,t,n,a,c){var d=function(e){var t=a.createElement("script");t.setAttribute("src",e),a.body.appendChild(t)},i=function(e){if(c.execScript)c.execScript(e);else{var t=a.head,n=a.createElement("script");n.type="text/javascript",n.text=e,t.removeChild(t.appendChild(n))}};if(n)if(n.bundle&&n.hash==e)i(n.bundle);else{var s=new XMLHttpRequest;s.open("GET",t,!0),s.onload=function(){var a=s.responseText;a&&a.match(/^!function/)?(n.bundle=a,i(n.bundle),n.hash=e):d(t)},s.send()}else d(t)}("9921a65ed70e440caee7","/assets/bundle.js?9921a65ed70e440caee7",window.localStorage,document,window)</script></body></html>

dist/index.html

@@ -1 +1 @@
-<!doctype html><html lang="ja"><head><meta charset="utf-8"><title>pixivの「ラブライブ」発見</title><meta name="viewport" content="width=device-width,initial-scale=1"><meta name="description" content="pixiv.moe - pixivの「ラブライブ」発見 - pixiv写真の壁"><meta name="keywords" content="pixiv,pixiv写真の壁,pixiv lovelive,lovelive,ラブライブ,μ's,Aqours,高坂穂乃果,絢瀬絵里,南ことり,園田海未,星空凛,西木野真姫,東條希,小泉花陽,矢澤にこ,綺羅ツバサ,統堂英玲奈,優木あんじゅ,高海千歌,桜内梨子,松浦果南,黒澤ダイヤ,渡辺曜,津島善子,国木田花丸,小原鞠莉,黒澤ルビィ"><meta name="google-site-verification" content="aHrpJZ8M_WPQb07omJ2bwC2fg2DQMgFFEovu9wsSD0E"><link rel="dns-prefetch" href="//api.pixiv.moe"><link rel="dns-prefetch" href="//cdn.pixiv.moe"><link rel="dns-prefetch" href="//i1.pixiv.net"><link rel="dns-prefetch" href="//i2.pixiv.net"><link rel="dns-prefetch" href="//i3.pixiv.net"><link rel="dns-prefetch" href="//i4.pixiv.net"><link rel="dns-prefetch" href="//www.pixiv.net"><link rel="shortcut icon" type="image/x-icon" href="/favicon.ico?version=0.8.7"><style>.message{text-align:center;padding:20px 0;color:#999}.message p{font-size:15px}</style><style>#index-loading{position:absolute;width:300px;height:100px;top:0;right:0;bottom:0;left:0;margin:auto}#index-loading p{font-size:30px!important;margin:0!important;line-height:0!important}</style></head><body><!--[if lte IE 8]><div class="message"><p>古いInternet Explorerにサ終了！</p></div><![endif]--><noscript><div class="message"><p>Javascriptが無効になっていると、サイト内の一部機能がご利用いただけません</p></div></noscript><div id="app"><div id="index-loading" class="message"><p>(・ω・)充填中<span id="wait"></span></p></div></div><script type="text/javascript">!function(){var n=setInterval(function(){if(null!=document.getElementById("index-loading")){var e=document.getElementById("wait");e.innerHTML.length>3?e.innerHTML="":e.innerHTML+="."}else clearInterval(n)},400)}()</script><script type="text/javascript">!function(e,t,n,a,d){var i=function(e){var t=a.createElement("script");t.setAttribute("src",e),a.body.appendChild(t)},c=function(e){if(d.execScript)d.execScript(e);else{var t=a.head,n=a.createElement("script");n.type="text/javascript",n.text=e,t.removeChild(t.appendChild(n))}};if(n)if(n.bundle&&n.hash==e)c(n.bundle);else{var s=new XMLHttpRequest;s.open("GET",t,!0),s.onload=function(){var a=s.responseText;a&&a.match(/^!function/)?(n.bundle=a,c(n.bundle),n.hash=e):i(t)},s.send()}else i(t)}("49b6a1e3df675db61316","/assets/bundle.js?49b6a1e3df675db61316",window.localStorage,document,window)</script></body></html>
+<!doctype html><html lang="ja"><head><meta charset="utf-8"><title>pixivの「ラブライブ」発見</title><meta name="viewport" content="width=device-width,initial-scale=1"><meta name="description" content="pixiv.moe - pixivの「ラブライブ」発見 - pixiv写真の壁"><meta name="keywords" content="pixiv,pixiv写真の壁,pixiv lovelive,lovelive,ラブライブ,μ's,Aqours,高坂穂乃果,絢瀬絵里,南ことり,園田海未,星空凛,西木野真姫,東條希,小泉花陽,矢澤にこ,綺羅ツバサ,統堂英玲奈,優木あんじゅ,高海千歌,桜内梨子,松浦果南,黒澤ダイヤ,渡辺曜,津島善子,国木田花丸,小原鞠莉,黒澤ルビィ"><meta name="google-site-verification" content="aHrpJZ8M_WPQb07omJ2bwC2fg2DQMgFFEovu9wsSD0E"><link rel="dns-prefetch" href="//api.pixiv.moe"><link rel="dns-prefetch" href="//cdn.pixiv.moe"><link rel="dns-prefetch" href="//i1.pixiv.net"><link rel="dns-prefetch" href="//i2.pixiv.net"><link rel="dns-prefetch" href="//i3.pixiv.net"><link rel="dns-prefetch" href="//i4.pixiv.net"><link rel="dns-prefetch" href="//www.pixiv.net"><link rel="shortcut icon" type="image/x-icon" href="/favicon.ico?version=0.8.7"><style>.message{text-align:center;padding:20px 0;color:#999}.message p{font-size:15px}</style><style>#index-loading{position:absolute;width:300px;height:100px;top:0;right:0;bottom:0;left:0;margin:auto}#index-loading p{font-size:30px!important;margin:0!important;line-height:0!important}</style></head><body><!--[if lte IE 8]><div class="message"><p>古いInternet Explorerにサ終了！</p></div><![endif]--><noscript><div class="message"><p>Javascriptが無効になっていると、サイト内の一部機能がご利用いただけません</p></div></noscript><div id="app"><div id="index-loading" class="message"><p>(・ω・)充填中<span id="wait"></span></p></div></div><script type="text/javascript">!function(){var n=setInterval(function(){if(null!=document.getElementById("index-loading")){var e=document.getElementById("wait");e.innerHTML.length>3?e.innerHTML="":e.innerHTML+="."}else clearInterval(n)},400)}()</script><script type="text/javascript">!function(e,t,n,a,c){var d=function(e){var t=a.createElement("script");t.setAttribute("src",e),a.body.appendChild(t)},i=function(e){if(c.execScript)c.execScript(e);else{var t=a.head,n=a.createElement("script");n.type="text/javascript",n.text=e,t.removeChild(t.appendChild(n))}};if(n)if(n.bundle&&n.hash==e)i(n.bundle);else{var s=new XMLHttpRequest;s.open("GET",t,!0),s.onload=function(){var a=s.responseText;a&&a.match(/^!function/)?(n.bundle=a,i(n.bundle),n.hash=e):d(t)},s.send()}else d(t)}("9921a65ed70e440caee7","/assets/bundle.js?9921a65ed70e440caee7",window.localStorage,document,window)</script></body></html>

package.json

@@ -1,16 +1,16 @@
 {
   "name": "pixiv.moe",
-  "version": "1.1.13",
+  "version": "1.1.14",
   "description": "Source code of https://pixiv.moe",
   "main": "server.js",
   "scripts": {
     "clean": "rimraf dist/*",
-    "copy": "copyfiles -f ./src/*.html ./src/favicon.ico ./src/robots.txt ./src/CNAME ./dist",
+    "copy": "copyfiles -f ./src/*.html ./src/favicon.ico ./src/CNAME ./dist",
     "dist": "npm run clean && npm run copy && cross-env NODE_ENV=production webpack --progress --config build/webpack.config.js",
     "lint": "eslint --max-warnings 0 ./src",
     "posttest": "npm run lint",
-    "start": "cross-env NODE_ENV=development webpack-dev-server --progress --config build/webpack.config.js",
-    "test": "istanbul cover karma start",
+    "start": "cross-env NODE_ENV=development node build/dev-server.js",
+    "test": "cross-env NODE_ENV=test istanbul cover karma start",
     "test:watch": "karma start --autoWatch=true --singleRun=false",
     "deploy": "git subtree push --prefix dist origin gh-pages",
     "ci-publish": "ci-publish",
@@ -45,16 +45,17 @@
     "ci-publish": "^1.3.0",
     "copyfiles": "^1.0.0",
     "coveralls": "^2.11.14",
-    "cross-env": "^3.2.4",
-    "css-loader": "^0.25.0",
+    "cross-env": "^4.0.0",
+    "css-loader": "^0.28.0",
     "eslint": "^3.6.0",
     "eslint-loader": "^1.0.0",
     "eslint-plugin-react": "^6.0.0",
     "expect": "^1.20.2",
-    "file-loader": "^0.9.0",
+    "express": "^4.15.2",
+    "file-loader": "^0.11.1",
     "glob": "^7.0.0",
     "html-minifier": "^3.1.0",
-    "imports-loader": "^0.6.5",
+    "imports-loader": "^0.7.1",
     "istanbul": "^0.4.5",
     "karma": "^1.0.0",
     "karma-chai": "^0.1.0",
@@ -75,11 +76,12 @@
     "react-hot-loader": "^v3.0.0-beta.6",
     "rimraf": "^2.4.3",
     "sass-loader": "^4.0.2",
-    "style-loader": "^0.13.0",
+    "style-loader": "^0.16.1",
     "url-loader": "^0.5.6",
     "webpack": "^2.x",
-    "webpack-bundle-analyzer": "^1.5.3",
-    "webpack-dev-server": "^2.x",
+    "webpack-bundle-analyzer": "^2.4.0",
+    "webpack-dev-middleware": "^1.10.1",
+    "webpack-hot-middleware": "^2.18.0",
     "webpack-merge": "^4.1.0"
   },
   "dependencies": {
@@ -95,18 +97,18 @@
     "react-addons-css-transition-group": "^15.4.0",
     "react-dom": "^15.0.0",
     "react-ga": "^2.1.2",
-    "react-masonry-component": "^4.2.1",
+    "react-masonry-component": "^5.0.5",
     "react-mdl": "^1.9.0",
     "react-mixin": "^3.0.5",
-    "react-modal": "^1.5.2",
-    "react-redux": "^4.4.6",
+    "react-modal": "^1.7.7",
+    "react-redux": "^5.0.4",
     "react-router-component": "^0.36.3",
     "react-tap-event-plugin": "^2.0.1",
     "redux": "^3.6.0",
     "redux-thunk": "^2.1.0",
     "shortid": "^2.2.6",
-    "store": "^1.3.20",
-    "whatwg-fetch": "^1.0.0"
+    "store": "^2.0.4",
+    "whatwg-fetch": "^2.0.3"
   },
   "engines": {
     "node": ">=4.0.0"