From 6bb481283202e71805e5695adc26d7be46f8d532 Mon Sep 17 00:00:00 2001 From: Jason Miller Date: Fri, 8 Apr 2016 20:55:14 -0400 Subject: [PATCH] Update all dependencies! Notably to Preact 4 and Babel 6 --- .babelrc | 13 ++++- electron/index.js | 10 ++-- package.json | 58 +++++++++++--------- src/app.js | 16 +++--- src/index.js | 11 +++- webpack.config.js => webpack.config.babel.js | 54 ++++++++++-------- 6 files changed, 93 insertions(+), 69 deletions(-) rename webpack.config.js => webpack.config.babel.js (59%) diff --git a/.babelrc b/.babelrc index d7db007..dd74bd4 100644 --- a/.babelrc +++ b/.babelrc @@ -1,5 +1,12 @@ { - "sourceMaps": "inline", - "jsxPragma": "h", - "stage": 0 + "sourceMaps": true, + "presets": [ + "es2015-minimal", + "stage-0" + ], + "plugins": [ + "add-module-exports", + ["transform-decorators-legacy"], + ["transform-react-jsx", { "pragma": "h" }] + ] } diff --git a/electron/index.js b/electron/index.js index 4cd05f9..5d21f8d 100644 --- a/electron/index.js +++ b/electron/index.js @@ -5,7 +5,7 @@ import menu from './menu'; const HOST = `localhost:${process.env.PORT || 19998}`; -const DEV = process.env.ENV==='dev'; +const DEV = process.env.ENV==='development'; // adds debug features like hotkeys for triggering dev tools and reload if (DEV) { @@ -24,8 +24,8 @@ function createMainWindow() { const win = new BrowserWindow({ width: DEV ? 1200 : 800, height: DEV ? 600 : 500, - 'min-width': 500, - 'min-height': 200, + minWidth: 500, + minHeight: 200, 'accept-first-mouse': true, 'title-bar-style': 'hidden' }); @@ -37,11 +37,11 @@ function createMainWindow() { }); if (DEV) { - win.loadUrl(`http://${HOST}/`); + win.loadURL(`http://${HOST}/`); win.toggleDevTools(); } else { - win.loadUrl(`file://${__dirname}/../index.html`); + win.loadURL(`file://${__dirname}/../index.html`); } return win; diff --git a/package.json b/package.json index 8a2c5b5..d7cb487 100644 --- a/package.json +++ b/package.json @@ -17,15 +17,15 @@ "electronVersion": "0.34.0", "scripts": { "test": "eslint src", - "start": "ENV=dev parallelshell 'npm run dev' 'npm run thenelectron'", - "dev": "npm run build:assets && npm run build:transpilewrap && webpack-dev-server --hot --inline", + "start": "ENV=development npm-run-all build:assets build:transpilewrap --parallel dev thenelectron", + "dev": "webpack-dev-server --hot --inline --progress", "thenelectron": "sleep 2; electron .", - "build": "npm run build:assets && npm run build:transpilewrap && npm run build:transpile && npm run build:electron:all", - "build:test": "npm run build:assets && npm run build:transpilewrap && npm run build:transpile && npm run build:electron:osx && ./dist/${npm_package_productName}-darwin-x64/${npm_package_productName}.app/Contents/MacOS/Electron", + "build": "npm-run-all build:assets build:transpilewrap build:transpile build:electron:all", + "build:test": "npm-run-all build:assets build:transpilewrap build:transpile build:electron:osx && ./dist/${npm_package_productName}-darwin-x64/${npm_package_productName}.app/Contents/MacOS/Electron", "build:assets": "ncp src/assets build/assets", "build:transpilewrap": "babel electron -s -d build/electron", - "build:transpile": "ENV=prod webpack -p", - "build:electron:all": "parallelshell 'npm run build:electron:osx' 'npm run build:electron:linux' 'npm run build:electron:win'", + "build:transpile": "ENV=production webpack -p", + "build:electron:all": "npm-run-all --parallel build:electron:*", "build:electron:osx": "npm run build:electron -- --icon ./src/assets/icon.icns --platform=darwin", "build:electron:linux": "npm run build:electron -- --icon ./src/assets/icon.png --platform=linux", "build:electron:win": "npm run build:electron -- --icon ./src/assets/icon.ico --platform=win32", @@ -41,39 +41,45 @@ "electron-app" ], "dependencies": { - "decko": "^1.1.2", + "decko": "^1.1.3", "dropbox": "robertknight/dropbox-js#5568865764d9deab69836569a69d72d200c88293", "neatime": "^1.0.0", "photon": "connors/photon#v0.1.2-alpha", "praline": "^0.3.1", - "preact": "^2.1.0", - "preact-photon": "^1.0.6", - "request": "^2.67.0", + "preact": "^4.5.1", + "preact-photon": "^1.1.1", + "request": "^2.70.0", "tmp": "0.0.28", "wildemitter": "^1.2.0" }, "devDependencies": { - "autoprefixer-loader": "^3.1.0", - "babel": "^5.8.23", - "babel-core": "^5.8.25", - "babel-loader": "^5.3.2", - "css-loader": "^0.23.0", - "electron-debug": "^0.2.1", - "electron-packager": "^5.0.0", - "electron-prebuilt": "^0.34.0", - "extract-text-webpack-plugin": "^0.9.1", + "autoprefixer": "^6.3.6", + "babel-cli": "^6.7.5", + "babel-core": "^6.7.6", + "babel-loader": "^6.2.4", + "babel-plugin-add-module-exports": "^0.1.2", + "babel-plugin-transform-decorators-legacy": "^1.3.4", + "babel-plugin-transform-react-jsx": "^6.7.5", + "babel-preset-es2015": "^6.6.0", + "babel-preset-es2015-minimal": "^1.1.0", + "babel-preset-stage-0": "^6.5.0", + "css-loader": "^0.23.1", + "electron-debug": "^0.6.0", + "electron-packager": "^6.0.1", + "electron-prebuilt": "^0.37.5", + "extract-text-webpack-plugin": "^1.0.1", "file-loader": "^0.8.4", - "html-webpack-plugin": "^1.6.2", - "less": "^2.5.3", + "html-webpack-plugin": "^2.15.0", + "less": "^2.6.1", "less-loader": "^2.2.1", "ncp": "^2.0.0", - "parallelshell": "^2.0.0", + "postcss-loader": "^0.8.2", "raw-loader": "^0.5.1", - "redux": "^3.0.4", + "redux": "^3.4.0", "source-map-loader": "^0.1.5", "style-loader": "^0.13.0", - "url-loader": "^0.5.6", - "webpack": "^1.12.8", - "webpack-dev-server": "^1.12.1" + "url-loader": "^0.5.7", + "webpack": "^1.12.14", + "webpack-dev-server": "^1.14.1" } } diff --git a/src/app.js b/src/app.js index c398e07..c05ab85 100644 --- a/src/app.js +++ b/src/app.js @@ -9,14 +9,12 @@ import { createMenu, createDomMenu, showMenu } from 'menu'; import dropbox from 'dropbox-client'; export default class App extends Component { - getInitialState() { - return { - path: '/', - loading: false, - history: [], - files: [] - }; - } + state = { + path: '/', + loading: false, + history: [], + files: [] + }; componentDidMount() { dropbox.init( err => { @@ -86,7 +84,7 @@ export default class App extends Component { autoSync: true, onUpload: () => { console.log('File changed and uploaded. Reloading list.'); - this.go(0); + this.navigate(0); } }, (err, localPath) => { this.setState({ loading:false }); diff --git a/src/index.js b/src/index.js index 1b21ad0..2551fc3 100644 --- a/src/index.js +++ b/src/index.js @@ -1,5 +1,10 @@ -import './styles/index.less'; import { h, render } from 'preact'; -import App from './app'; +import './styles/index.less'; + +function init() { + let App = require('./app'); + render(, document.body); +} +init(); -render(, document.body); +if (module.hot) module.hot.accept('./app', () => requestAnimationFrame(init)); diff --git a/webpack.config.js b/webpack.config.babel.js similarity index 59% rename from webpack.config.js rename to webpack.config.babel.js index 04cd67f..854e2fe 100644 --- a/webpack.config.js +++ b/webpack.config.babel.js @@ -1,22 +1,28 @@ -var pkg = require('./package.json'), - webpack = require('webpack'), - path = require('path'), - ExtractTextPlugin = require("extract-text-webpack-plugin"), - HtmlPlugin = require('html-webpack-plugin'); +import pkg from './package.json'; +import path from 'path'; +import webpack from 'webpack'; +import ExtractTextPlugin from 'extract-text-webpack-plugin'; +import HtmlWebpackPlugin from 'html-webpack-plugin'; +import autoprefixer from 'autoprefixer'; + +const ENV = process.env.NODE_ENV || 'development'; module.exports = { - entry: './src/index.js', + context: `${__dirname}/src`, + entry: './index.js', target: 'web', output: { - path: path.join(__dirname, 'build'), + path: `${__dirname}/build`, + publicPath: '/', filename: 'index.js' }, resolve: { modulesDirectories: [ - path.resolve(__dirname, 'src/lib'), + `${__dirname}/src/lib`, + `${__dirname}/node_modules`, 'node_modules' ] // alias: { @@ -36,7 +42,7 @@ module.exports = { preLoaders: [ { test: /\.(jsx?|css|less)$/, - exclude: /(webpack\-dev\-server|socket\.io\-client)/, + exclude: /(src|webpack\-dev\-server|socket\.io\-client)/, loader: 'source-map' } ], @@ -49,32 +55,36 @@ module.exports = { }, { test: /\.(css|less)$/, - loader: ExtractTextPlugin.extract('style?sourceMap', 'css?sourceMap!autoprefixer?browsers=last 2 version!less?sourceMap?noIeCompat') - // loaders: ['style?sourceMap', 'css?sourceMap', 'autoprefixer?browsers=last 2 version', 'less?config=--inline-urls'] + loader: ExtractTextPlugin.extract( + 'style?sourceMap', + 'css?sourceMap!postcss!less?sourceMap' + ) }, { - test: /\.(eot|ttf|otf|woff)$/, + test: /\.(svg|woff2?|ttf|eot)$/, loader: 'url' } ] }, + postcss: () => [ + autoprefixer({ browsers: 'last 2 versions' }) + ], + plugins: [ new webpack.NoErrorsPlugin(), + new ExtractTextPlugin('style.css', { + allChunks: true + }), new webpack.optimize.DedupePlugin(), new webpack.optimize.OccurenceOrderPlugin(), new webpack.DefinePlugin({ API_KEY: JSON.stringify(process.env.DROPBOX_API_KEY) }), - new ExtractTextPlugin('style.css', { - allChunks: true - }), - new HtmlPlugin({ + new HtmlWebpackPlugin({ title: pkg.productName || pkg.name, filename: 'index.html', - minify: { - collapseWhitespace: true - } + minify: { collapseWhitespace: true } }) ], @@ -87,12 +97,10 @@ module.exports = { setImmediate: false }, - stats: { - colors: true - }, + stats: { colors: true }, // Create Sourcemaps for the bundle - devtool: process.env.ENV==='dev' ? 'inline-source-map' : 'source-map', + devtool: ENV==='development' ? 'inline-source-map' : 'source-map', devServer: { port: process.env.PORT || 19998,