From 0b82953d8a63b904698bfbafef917690744de58d Mon Sep 17 00:00:00 2001 From: Shawn Date: Tue, 5 Mar 2019 00:24:03 -0600 Subject: [PATCH] Add HMR support --- .babelrc | 9 ++-- package.json | 12 +++-- src/platforms/electron/createWindow.js | 2 +- src/ui/component/app/index.js | 11 +++-- static/index.dev.html | 15 ++++++ webpack.electron.config.js | 63 ++++++++++++++++++++++++-- 6 files changed, 96 insertions(+), 16 deletions(-) create mode 100644 static/index.dev.html diff --git a/.babelrc b/.babelrc index bdb6f4690..f9f5b62a7 100644 --- a/.babelrc +++ b/.babelrc @@ -1,9 +1,10 @@ { "presets": ["@babel/react", "@babel/flow"], "plugins": [ - ["@babel/plugin-proposal-decorators", { "decoratorsBeforeExport": true }], - "@babel/plugin-transform-flow-strip-types", - "@babel/plugin-proposal-class-properties", - "babel-plugin-add-module-exports" + "react-hot-loader/babel", + ["@babel/plugin-proposal-decorators", { "decoratorsBeforeExport": true }], + "@babel/plugin-transform-flow-strip-types", + "@babel/plugin-proposal-class-properties", + "babel-plugin-add-module-exports" ] } diff --git a/package.json b/package.json index bccd3b226..32454ee13 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "LBRY", - "version": "0.29.2", + "version": "0.29.1", "description": "A browser for the LBRY network, a digital marketplace controlled by its users.", "keywords": [ "lbry" @@ -25,14 +25,16 @@ "compile": "yarn compile:electron && yarn compile:web", "build": "yarn compile && electron-builder build", "build:dir": "yarn build -- --dir -c.compression=store -c.mac.identity=null", - "dev:electron": "yarn compile:electron && electron ./dist/electron/main/bundle.js", + "dev:electron": "webpack-dev-server --hot --progress --config webpack.electron.config.js", + "dev:web": "webpack-dev-server --hot --progress --config webpack.web.config.js", "dev:internal-apis": "LBRY_API_URL='http://localhost:8080' yarn dev:electron", "lint": "eslint 'src/**/*.{js,jsx}' --fix && flow", "format": "prettier 'src/**/*.{js,jsx,scss,json}' --write", "flow-defs": "flow-typed install", "precommit": "lint-staged", "preinstall": "yarn cache clean lbry-redux && yarn cache clean lbryinc", - "postinstall": "electron-builder install-app-deps && node build/downloadDaemon.js" + "postinstall": "electron-builder install-app-deps && node build/downloadDaemon.js", + "run:electron": "electron ./dist/electron/main/bundle.js" }, "dependencies": { "@babel/polyfill": "^7.2.5", @@ -138,10 +140,12 @@ "node-sass": "^4.11.0", "preprocess-loader": "^0.3.0", "prettier": "^1.11.1", + "react-hot-loader": "^4.7.2", "sass-loader": "^7.1.0", "style-loader": "^0.23.1", "webpack": "^4.28.4", "webpack-build-notifier": "^0.1.23", + "webpack-dev-middleware": "^3.6.0", "webpack-dev-server": "^3.1.14", "webpack-merge": "^4.2.1", "webpack-node-externals": "^1.7.2", @@ -152,7 +156,7 @@ "yarn": "^1.3" }, "lbrySettings": { - "lbrynetDaemonVersion": "0.32.4", + "lbrynetDaemonVersion": "0.32.3", "lbrynetDaemonUrlTemplate": "https://github.com/lbryio/lbry/releases/download/vDAEMONVER/lbrynet-OSNAME.zip", "lbrynetDaemonDir": "static", "lbrynetDaemonFileName": "lbrynet" diff --git a/src/platforms/electron/createWindow.js b/src/platforms/electron/createWindow.js index 5612ecf21..0025fb40e 100644 --- a/src/platforms/electron/createWindow.js +++ b/src/platforms/electron/createWindow.js @@ -36,7 +36,7 @@ export default appState => { }; const rendererURL = isDev // ? `http://localhost:${process.env.ELECTRON_WEBPACK_WDS_PORT}` - ? `file://${path.resolve(__dirname, '../index.html')}` + ? `http://localhost:8080/index.dev.html` : `file://${__dirname}/index.html`; let window = new BrowserWindow(windowConfiguration); diff --git a/src/ui/component/app/index.js b/src/ui/component/app/index.js index 657e6e9a6..9a1a19f24 100644 --- a/src/ui/component/app/index.js +++ b/src/ui/component/app/index.js @@ -1,3 +1,4 @@ +import { hot } from 'react-hot-loader/root'; import { connect } from 'react-redux'; import { selectPageTitle, @@ -29,7 +30,9 @@ const perform = dispatch => ({ toggleEnhancedLayout: () => dispatch(doToggleEnhancedLayout()), }); -export default connect( - select, - perform -)(App); +export default hot( + connect( + select, + perform + )(App) +); diff --git a/static/index.dev.html b/static/index.dev.html new file mode 100644 index 000000000..87576e7da --- /dev/null +++ b/static/index.dev.html @@ -0,0 +1,15 @@ + + + + + + + + + +
+ + + diff --git a/webpack.electron.config.js b/webpack.electron.config.js index 9493b382a..01afe3d91 100644 --- a/webpack.electron.config.js +++ b/webpack.electron.config.js @@ -6,10 +6,64 @@ const CopyWebpackPlugin = require('copy-webpack-plugin'); const STATIC_ROOT = path.resolve(__dirname, 'static/'); const DIST_ROOT = path.resolve(__dirname, 'dist/'); -const electronConfig = { - target: 'electron-renderer', + +const mainConfig = { + target: 'electron-main', entry: { main: './src/platforms/electron/index.js', + }, + output: { + filename: '[name]/bundle.js', + path: __dirname + '/dist/electron', + }, + module: { + rules: [ + { + test: /\.node$/, + use: 'node-loader', + }, + { + test: /\.jsx?$/, + use: [ + { + loader: 'preprocess-loader', + options: { + TARGET: 'app', + ppOptions: { + type: 'js', + }, + }, + }, + ], + }, + ], + }, + resolve: { + alias: { + // 'src/electron': path.resolve(__dirname, 'src/platforms/electron'); + } + }, + plugins: [ + new CopyWebpackPlugin([ + { + from: `${STATIC_ROOT}/`, + to: `${DIST_ROOT}/electron/static/`, + ignore: ['font/**/*', 'index.html'], + }, + { + from: `${STATIC_ROOT}/index.html`, + to: `${DIST_ROOT}/electron/index.html`, + }, + ]), + ], + devServer: { + contentBase: path.join(__dirname, 'dist/electron') + }, +}; + +const renderConfig = { + target: 'electron-renderer', + entry: { ui: './src/ui/index.js', }, output: { @@ -58,4 +112,7 @@ const electronConfig = { ], }; -module.exports = merge(baseConfig, electronConfig); +module.exports = [ + merge(baseConfig, mainConfig), + merge(baseConfig, renderConfig), +];