bumpup react (0.13.3->0.14.0), reacthmr work perfectly

2025-12-13 09:46:22 +00:00 · 2015-10-21 02:47:21 +09:00
parent 326c7a93fb
commit f6d2e898dc
12 changed files with 109 additions and 78 deletions
--- a/.babelrc
+++ b/.babelrc
@@ -15,9 +15,6 @@
          }]
        }
      }
-    },
-    "production": {
-
    }
  }
 }
--- a/browser/main/HomePage.js
+++ b/browser/main/HomePage.js
@@ -92,22 +92,24 @@ function remap (state) {
  let folderFilters = filters.filter(filter => filter.type === FOLDER_FILTER)
  let textFilters = filters.filter(filter => filter.type === TEXT_FILTER)

-  let targetFolders = activeUser.Folders.filter(folder => {
-    return findWhere(folderFilters, {value: folder.name})
-  })
-  status.targetFolders = targetFolders
-
-  if (targetFolders.length > 0) {
-    articles = articles.filter(article => {
-      return findWhere(targetFolders, {id: article.FolderId})
+  if (activeUser.Folders != null) {
+    let targetFolders = activeUser.Folders.filter(folder => {
+      return findWhere(folderFilters, {value: folder.name})
    })
-  }
-  if (textFilters.length > 0) {
-    articles = textFilters.reduce((articles, textFilter) => {
-      return articles.filter(article => {
-        return article.title.match(new RegExp(textFilter.value, 'i')) || article.content.match(new RegExp(textFilter.value, 'i'))
+    status.targetFolders = targetFolders
+
+    if (targetFolders.length > 0) {
+      articles = articles.filter(article => {
+        return findWhere(targetFolders, {id: article.FolderId})
      })
-    }, articles)
+    }
+    if (textFilters.length > 0) {
+      articles = textFilters.reduce((articles, textFilter) => {
+        return articles.filter(article => {
+          return article.title.match(new RegExp(textFilter.value, 'i')) || article.content.match(new RegExp(textFilter.value, 'i'))
+        })
+      }, articles)
+    }
  }

  // Grab active article
--- a/browser/main/HomePage/ArticleTopBar.js
+++ b/browser/main/HomePage/ArticleTopBar.js
@@ -33,5 +33,8 @@ export default class ArticleTopBar extends React.Component {

 ArticleTopBar.propTypes = {
  search: PropTypes.string,
-  dispatch: PropTypes.func
+  dispatch: PropTypes.func,
+  status: PropTypes.shape({
+    search: PropTypes.string
+  })
 }
--- a/browser/main/index.html
+++ b/browser/main/index.html
@@ -61,10 +61,13 @@
        e.preventDefault()
      }
    })
+    var scriptUrl = process.env.BOOST_ENV === 'development'
+      ? 'http://localhost:8080/assets/bundle.js'
+      : '../../compiled/main.js'
+    var scriptEl=document.createElement('script')
+    scriptEl.setAttribute("type","text/javascript")
+    scriptEl.setAttribute("src", scriptUrl)
+    document.getElementsByTagName("head")[0].appendChild(scriptEl)
  </script>
-  <script type="text/javascript" src='../../compiled/main.js'></script>
-  <!--
-  <script src="http://localhost:8080/assets/main.js"></script>
-  -->
 </body>
 </html>
--- a/browser/main/index.js
+++ b/browser/main/index.js
@@ -9,6 +9,7 @@ import SignupPage from './SignupPage'
 import HomePage from './HomePage'
 import auth from 'boost/auth'
 import store, { devToolElement } from 'boost/store'
+let ReactDOM = require('react-dom')
 require('../styles/main/index.styl')

 function onlyUser (state, replaceState) {
@@ -28,10 +29,10 @@ let routes = (

 let el = document.getElementById('content')

-React.render((
+ReactDOM.render((
  <div>
    <Provider store={store}>
-      {() => <Router>{routes}</Router>}
+      <Router>{routes}</Router>
    </Provider>
    {devToolElement}
  </div>
--- a/browser/styles/main/index.styl
+++ b/browser/styles/main/index.styl
@@ -21,6 +21,7 @@ body
  color textColor
  font-size fontSize
  font-weight 400
+
 button, input, select
  font-family "Lato"

--- a/lib/components/MarkdownPreview.js
+++ b/lib/components/MarkdownPreview.js
@@ -1,6 +1,8 @@
 import shell from 'shell'
-import React, { PropTypes } from 'react'
+var React = require('react')
+var { PropTypes } = React
 import markdown from 'boost/markdown'
+var ReactDOM = require('react-dom')

 function handleAnchorClick (e) {
  shell.openExternal(e.target.href)
@@ -25,7 +27,7 @@ export default class MarkdownPreview extends React.Component {
  }

  addListener () {
-    var anchors = React.findDOMNode(this).querySelectorAll('a')
+    var anchors = ReactDOM.findDOMNode(this).querySelectorAll('a')

    for (var i = 0; i < anchors.length; i++) {
      anchors[i].addEventListener('click', handleAnchorClick)
@@ -33,7 +35,7 @@ export default class MarkdownPreview extends React.Component {
  }

  removeListener () {
-    var anchors = React.findDOMNode(this).querySelectorAll('a')
+    var anchors = ReactDOM.findDOMNode(this).querySelectorAll('a')

    for (var i = 0; i < anchors.length; i++) {
      anchors[i].removeEventListener('click', handleAnchorClick)
--- a/lib/components/modal/Preferences.js
+++ b/lib/components/modal/Preferences.js
@@ -1,4 +1,4 @@
-import React, { PropTypes, findDOMNode } from 'react'
+import React, { PropTypes } from 'react'
 import { connect, Provider } from 'react-redux'
 import auth from 'boost/auth'
 import linkState from 'boost/linkState'
@@ -6,6 +6,7 @@ import Select from 'react-select'
 import api from 'boost/api'
 import ProfileImage from 'boost/components/ProfileImage'
 import store from 'boost/store'
+var { findDOMNode } = require('react-dom')

 const PROFILE = 'PROFILE'
 const PREFERENCES = 'PREFERENCES'
@@ -420,7 +421,7 @@ export default class PreferencesModal extends React.Component {
  render () {
    return (
      <Provider store={store}>
-        {() => <RootComponent/>}
+        <RootComponent/>
      </Provider>
    )
  }
--- a/lib/modal.js
+++ b/lib/modal.js
@@ -1,4 +1,5 @@
 import React from 'react'
+let ReactDOM = require('react-dom')

 class ModalBase extends React.Component {
  constructor (props) {
@@ -28,7 +29,7 @@ class ModalBase extends React.Component {

 let el = document.createElement('div')
 document.body.appendChild(el)
-let modalBase = React.render(<ModalBase/>, el)
+let modalBase = ReactDOM.render(<ModalBase/>, el)

 export function openModal (component, props) {
  if (modalBase == null) { return }
--- a/package.json
+++ b/package.json
@@ -4,8 +4,8 @@
  "description": "Boost App",
  "main": "main.js",
  "scripts": {
-    "start": "electron ./main.js",
-    "webpack": "webpack-dev-server --inline --config webpack.config.js",
+    "start": "BOOST_ENV=development electron ./main.js",
+    "webpack": "webpack-dev-server --hot --inline --config webpack.config.js",
    "compile": "NODE_ENV=production webpack --config webpack.config.production.js",
    "build": "electron-packager ./ Boost $npm_package_config_platform  $npm_package_config_version $npm_package_config_ignore --overwrite",
    "codesign": "codesign --verbose --deep --force --sign \"MAISIN solutions Inc.\" Boost-darwin-x64/Boost.app"
@@ -45,12 +45,6 @@
    "md5": "^2.0.0",
    "moment": "^2.10.3",
    "node-notifier": "^4.2.3",
-    "react": "^0.13.3",
-    "react-redux": "^3.1.0",
-    "react-router": "^1.0.0-rc1",
-    "react-select": "^0.6.10",
-    "redux": "^3.0.2",
-    "reflux": "^0.2.8",
    "socket.io-client": "^1.3.6",
    "superagent": "^1.2.0",
    "superagent-promise": "^1.0.3"
@@ -62,10 +56,15 @@
    "electron-packager": "^5.1.0",
    "electron-prebuilt": "^0.33.6",
    "nib": "^1.1.0",
+    "react": "^0.14.0",
+    "react-dom": "^0.14.0",
+    "react-redux": "^3.1.0",
+    "react-router": "^1.0.0-rc1",
+    "react-select": "^0.6.10",
    "react-transform-catch-errors": "^1.0.0",
    "react-transform-hmr": "^1.0.1",
    "redbox-react": "^1.1.1",
-    "redux-devtools": "^2.1.5",
+    "redux": "^3.0.2",
    "standard": "^5.3.1",
    "style-loader": "^0.12.4",
    "stylus": "^0.52.4",
@@ -74,8 +73,7 @@
    "webpack-dev-server": "^1.12.0"
  },
  "standard": {
-    "ignore": [
-    ],
+    "ignore": [],
    "globals": [
      "localStorage"
    ]
--- a/webpack.config.js
+++ b/webpack.config.js
@@ -1,21 +1,22 @@
 var webpack = require('webpack')
-module.exports = {
-  entry: {
-    main: './browser/main/index.js'
-  },
-  output: {
-    filename: '[name].js',
-    sourceMapFilename: '[name].map',
-    publicPath: 'http://localhost:8090/assets',
-    libraryTarget: 'commonjs2'
-  },
-  devtool: '#inline-source-map',
+var path = require('path')
+var JsonpTemplatePlugin = webpack.JsonpTemplatePlugin
+var FunctionModulePlugin = require('webpack/lib/FunctionModulePlugin')
+var NodeTargetPlugin = require('webpack/lib/node/NodeTargetPlugin')
+var ExternalsPlugin = webpack.ExternalsPlugin
+var opt = {
+  path: path.join(__dirname, 'compiled'),
+  filename: 'bundle.js',
+  libraryTarget: 'commonjs2',
+  publicPath: 'http://localhost:8080/assets/'
+}
+var config = {
  module: {
    loaders: [
      {
-        test: /(\.js|\.jsx)?$/,
-        exclude: /(node_modules|bower_components)/,
-        loader: 'babel'
+        test: /\.js?$/,
+        loader: 'babel-loader?cacheDirectory',
+        exclude: /node_modules/
      },
      {
        test: /\.styl?$/,
@@ -24,29 +25,57 @@ module.exports = {
      }
    ]
  },
+  debug: true,
+  devtool: 'cheap-module-eval-source-map',
+  entry: [
+    './browser/main/index.js'
+  ],
+  output: opt,
+  resolve: {
+    extensions: ['', '.js', '.jsx'],
+    packageMains: ['webpack', 'browser', 'web', 'browserify', ['jam', 'main'], 'main']
+  },
  plugins: [
-    new webpack.HotModuleReplacementPlugin(),
-    new webpack.NoErrorsPlugin()
+    new webpack.NoErrorsPlugin(),
+    new ExternalsPlugin('commonjs', [
+      'app',
+      'auto-updater',
+      'browser-window',
+      'content-tracing',
+      'dialog',
+      'global-shortcut',
+      'ipc',
+      'menu',
+      'menu-item',
+      'power-monitor',
+      'protocol',
+      'tray',
+      'remote',
+      'web-frame',
+      'clipboard',
+      'crash-reporter',
+      'screen',
+      'shell'
+    ]),
+    new NodeTargetPlugin()
  ],
  externals: [
    'socket.io-client',
    'md5',
    'superagent',
    'superagent-promise',
-    'react',
-    'redux',
-    'react-redux',
-    'react-router',
    'lodash',
-    'redbox-react',
-    'react-transform-hmr',
-    'react-transform-catch-errors',
-    'react-select',
    'markdown-it',
    'moment'
-  ],
-  resolve: {
-    extensions: ['', '.js', '.jsx', 'styl']
-  },
-  target: 'atom'
+  ]
 }
+
+config.target = function renderer (compiler) {
+  compiler.apply(
+    new JsonpTemplatePlugin(opt),
+    new FunctionModulePlugin(opt)
+  )
+}
+
+module.exports = config
+
--- a/webpack.config.production.js
+++ b/webpack.config.production.js
@@ -43,16 +43,9 @@ module.exports = {
    'md5',
    'superagent',
    'superagent-promise',
-    // 'react',
-    // 'redux',
-    // 'react-redux',
-    // 'react-router',
-    // 'react-select',
    'lodash',
    'markdown-it',
-    'moment',
-    'fs',
-    'path'
+    'moment'
  ],
  resolve: {
    extensions: ['', '.js', '.jsx', 'styl']