diff --git a/.babelrc b/.babelrc index 41d0cf6..7373025 100644 --- a/.babelrc +++ b/.babelrc @@ -1,26 +1,20 @@ { - "stage": 0, - "optional": "runtime", - "loose": "all", + "presets": [ + "es2015", + "stage-0", + "react" + ], "plugins": [ - "typecheck" + [ "transform-runtime" ], + [ "typecheck" ], + [ "transform-decorators-legacy" ] ], "env": { "development": { - "plugins": [ - "react-transform" - ], - "extra": { - "react-transform": { - "transforms": [{ - "transform": "react-transform-catch-errors", - "imports": [ - "react", - "redbox-react" - ] - }] - } - } + "plugins": [] + }, + "production": { + "plugins": [] } } } diff --git a/bin/build.js b/bin/build.js index d0f2bc7..3697e8b 100755 --- a/bin/build.js +++ b/bin/build.js @@ -1,5 +1,5 @@ #!/usr/bin/env node -require('../server.babel'); // babel registration (runtime transpilation for node) +// require('../server.babel'); // babel registration (runtime transpilation for node) var webpack = require('webpack'); var webpackConfig = require('./merge-configs'); diff --git a/bin/local-dev.sh b/bin/local-dev.sh index 7c5e4cc..bf5e970 100755 --- a/bin/local-dev.sh +++ b/bin/local-dev.sh @@ -30,7 +30,7 @@ compile() { cp $ROOT_DIR/.babelrc $PROJECT_PATH/node_modules/universal-redux cp $ROOT_DIR/.eslintrc $PROJECT_PATH/node_modules/universal-redux cp $ROOT_DIR/server.babel.js $PROJECT_PATH/node_modules/universal-redux - babel $ROOT_DIR/src/ -d $PROJECT_PATH/node_modules/universal-redux/lib > /dev/null + babel $ROOT_DIR/src/ --presets es2015,stage-0,react --plugins transform-runtime --out-dir $PROJECT_PATH/node_modules/universal-redux/lib > /dev/null echo Update complete, continuing to watch... } diff --git a/bin/merge-babel-config.js b/bin/merge-babel-config.js new file mode 100644 index 0000000..365752a --- /dev/null +++ b/bin/merge-babel-config.js @@ -0,0 +1,72 @@ +var fs = require('fs'); +var strip = require('strip-loader'); +var path = require('path'); +var util = require('util'); + +module.exports = function(userBabelConfig, verbose) { + + var babelrc = fs.readFileSync(path.resolve(__dirname, '..', './.babelrc')); + var babelConfig = {}; + var jsLoaders; + + try { + babelConfig = JSON.parse(babelrc); + } catch (err) { + console.error('==> ERROR: Error parsing your .babelrc.'); + console.error(err); + } + + if(userBabelConfig) { + console.log('Merging universal-redux Babel defaults with project Babel configuration'); + + var userBabelConfigFile = fs.readFileSync(path.resolve(userBabelConfig)); + var userBabelConfig = {}; + + try { + userBabelConfig = JSON.parse(userBabelConfigFile); + } catch (err) { + console.error('==> ERROR: Error parsing your project-level Babel configuration.'); + console.error(err); + } + + babelConfig = Object.assign(babelConfig, userBabelConfig); + } + + if (process.env.NODE_ENV !== 'production') { + + var hmrConfig = [ + "react-transform", { + "transforms": [ + { + "transform": "react-transform-hmr", + "imports": ["react"], + "locals": ["module"] + }, + { + "transform": "react-transform-catch-errors", + "imports": ["react", "redbox-react"] + } + ] + } + ] + + babelConfig.env.development.plugins.unshift(hmrConfig); + + jsLoaders = ['babel-loader?' + JSON.stringify(babelConfig)]; + } else { + jsLoaders = [strip.loader('debug'), 'babel-loader?' + JSON.stringify(babelConfig)]; + } + + // output configuration files if user wants verbosity + if(verbose) { + var utilOptions = { + depth: 10, + colors: true + }; + + console.log('Babel config:'); + console.log(util.inspect(babelConfig, utilOptions)); + } + + return jsLoaders; +} diff --git a/bin/merge-configs.js b/bin/merge-configs.js index 438c8f1..215bbfc 100644 --- a/bin/merge-configs.js +++ b/bin/merge-configs.js @@ -4,6 +4,7 @@ var path = require('path'); var util = require('util'); var webpack = require('webpack'); var mergeWebpack = require('webpack-config-merger'); +var mergeBabel = require('./merge-babel-config'); var baseWebpackConfig = require('../config/webpack.config.js'); var baseDevConfig = mergeWebpack(baseWebpackConfig.common, baseWebpackConfig.development); var baseProdConfig = mergeWebpack(baseWebpackConfig.common, baseWebpackConfig.production); @@ -24,6 +25,10 @@ if(userConfig.webpack.merge) { combinedWebpackConfig = userConfig.webpack.config; } +// add babel for js transpiling +var babelConfig = mergeBabel(userConfig.babelConfig, userConfig.verbose); +combinedWebpackConfig.module.loaders.unshift({ test: /\.jsx?$/, exclude: /node_modules/, loaders: babelConfig }); + // gather tools config var combinedToolsConfig = baseToolsConfig; if(userConfig.toolsConfigPath) { diff --git a/bin/server.js b/bin/server.js index 0b048dd..b2dcf23 100755 --- a/bin/server.js +++ b/bin/server.js @@ -1,5 +1,5 @@ #!/usr/bin/env node -require('../server.babel'); // babel registration (runtime transpilation for node) +// require('../server.babel'); // babel registration (runtime transpilation for node) var path = require('path'); var renderer = require('../lib/server'); diff --git a/bin/webpack-dev-server.js b/bin/webpack-dev-server.js index 07e945a..48d5f9e 100755 --- a/bin/webpack-dev-server.js +++ b/bin/webpack-dev-server.js @@ -1,5 +1,5 @@ #!/usr/bin/env node -require('../server.babel'); // babel registration (runtime transpilation for node) +// require('../server.babel'); // babel registration (runtime transpilation for node) var path = require('path'); var Express = require('express'); diff --git a/config/universal-redux.config.js b/config/universal-redux.config.js index a8b2a96..ce5ff65 100644 --- a/config/universal-redux.config.js +++ b/config/universal-redux.config.js @@ -62,9 +62,11 @@ module.exports = { */ lint: { enabled: true - // config: projectRoot + '.eslintrc' + // config: projectRoot + '/.eslintrc' }, + babelConfig: projectRoot + '/.babelrc', + /* // Enable native desktop notifications for Webpack build events. // Will not be run on production. diff --git a/config/webpack.config.js b/config/webpack.config.js index f75c6e6..7765ff8 100644 --- a/config/webpack.config.js +++ b/config/webpack.config.js @@ -1,4 +1,4 @@ -require('babel/polyfill'); +// require('babel/polyfill'); // begin shared setup var path = require('path'); @@ -7,52 +7,12 @@ var relativeAssetsPath = '../static/dist'; var assetsPath = path.join(__dirname, relativeAssetsPath); // begin dev setup -var fs = require('fs'); var host = (process.env.HOST || 'localhost'); var port = parseInt(process.env.PORT) + 1 || 3001; -var babelrc = fs.readFileSync(path.resolve(__dirname, '..', './.babelrc')); -var babelrcObject = {}; // begin prod setup var CleanPlugin = require('clean-webpack-plugin'); var ExtractTextPlugin = require('extract-text-webpack-plugin'); -var strip = require('strip-loader'); - -if (process.env.NODE_ENV !== 'production') { - - try { - babelrcObject = JSON.parse(babelrc); - } catch (err) { - console.error('==> ERROR: Error parsing your .babelrc.'); - console.error(err); - } - - var babelrcObjectDevelopment = babelrcObject.env && babelrcObject.env.development || {}; - var babelLoaderQuery = Object.assign({}, babelrcObject, babelrcObjectDevelopment); - delete babelLoaderQuery.env; - - babelLoaderQuery.plugins = babelLoaderQuery.plugins || []; - if (babelLoaderQuery.plugins.indexOf('react-transform') < 0) { - babelLoaderQuery.plugins.push('react-transform'); - } - - babelLoaderQuery.extra = babelLoaderQuery.extra || {}; - if (!babelLoaderQuery.extra['react-transform']) { - babelLoaderQuery.extra['react-transform'] = {}; - } - if (!babelLoaderQuery.extra['react-transform'].transforms) { - babelLoaderQuery.extra['react-transform'].transforms = []; - } - babelLoaderQuery.extra['react-transform'].transforms.push({ - transform: 'react-transform-hmr', - imports: ['react'], - locals: ['module'] - }); - - var jsLoaders = ['babel?' + JSON.stringify(babelLoaderQuery)]; -} else { - var jsLoaders = [strip.loader('debug'), 'babel']; -} module.exports = { common: { @@ -67,7 +27,7 @@ module.exports = { }, module: { loaders: [ - { test: /\.jsx?$/, exclude: /node_modules/, loaders: jsLoaders}, + // { test: /\.jsx?$/, exclude: /node_modules/, loaders: jsLoaders }, // now prepended in merge-configs and merge-babel-config { test: /\.json$/, loader: 'json-loader' }, { test: /\.woff(\?v=\d+\.\d+\.\d+)?$/, loader: "url?limit=10000&mimetype=application/font-woff" }, { test: /\.woff2(\?v=\d+\.\d+\.\d+)?$/, loader: "url?limit=10000&mimetype=application/font-woff" }, diff --git a/examples/jwt/.babelrc b/examples/jwt/.babelrc deleted file mode 100644 index 41d0cf6..0000000 --- a/examples/jwt/.babelrc +++ /dev/null @@ -1,26 +0,0 @@ -{ - "stage": 0, - "optional": "runtime", - "loose": "all", - "plugins": [ - "typecheck" - ], - "env": { - "development": { - "plugins": [ - "react-transform" - ], - "extra": { - "react-transform": { - "transforms": [{ - "transform": "react-transform-catch-errors", - "imports": [ - "react", - "redbox-react" - ] - }] - } - } - } - } -} diff --git a/examples/jwt/bin/transpile.js b/examples/jwt/bin/transpile.js index 1f409f4..1246ebb 100644 --- a/examples/jwt/bin/transpile.js +++ b/examples/jwt/bin/transpile.js @@ -3,7 +3,7 @@ var fs = require('fs'); var path = require('path'); -var babelrc = fs.readFileSync(path.resolve(__dirname, '../.babelrc')); +var babelrc = fs.readFileSync(path.resolve(__dirname, '../node_modules/universal-redux/.babelrc')); var config; try { diff --git a/examples/jwt/config/universal-redux.config.js b/examples/jwt/config/universal-redux.config.js index de5add5..8430310 100644 --- a/examples/jwt/config/universal-redux.config.js +++ b/examples/jwt/config/universal-redux.config.js @@ -55,10 +55,12 @@ module.exports = { // Expects: Boolean */ lint: { - enabled: true, + enabled: false, config: projectRoot + '/.eslintrc' }, + // babelConfig: projectRoot + '/.babelrc', + /* // Enable native desktop notifications for Webpack build events. // Will not be run on production. diff --git a/examples/jwt/package.json b/examples/jwt/package.json index c4f36bd..fa1ade3 100644 --- a/examples/jwt/package.json +++ b/examples/jwt/package.json @@ -3,7 +3,7 @@ "version": "0.0.1", "description": "JWT example with Universal Redux", "main": "index.js", - "scripts": { + "scripts": { "start": "concurrent --kill-others \"better-npm-run api\" \"better-npm-run auth\" \"better-npm-run server\"", "build": "better-npm-run build", "postinstall": "./bin/build_for_heroku.sh", @@ -86,14 +86,9 @@ "concurrently": "1.0.0", "jsonwebtoken": "^5.4.1", "superagent": "^1.6.1", - "universal-redux": "^1.0.0-beta4" + "universal-redux": "^2.0.0-beta3" }, "devDependencies": { - "babel-core": "~5.8.33", - "babel-eslint": "^4.1.3", - "babel-plugin-react-transform": "~1.1.1", - "babel-plugin-typecheck": "^2.0.0", - "babel-runtime": "~5.8.29", "better-npm-run": "0.0.5", "classnames": "^2.2.0", "deep-equal": "^1.0.1", @@ -109,11 +104,12 @@ "react-addons-css-transition-group": "^0.14.3", "react-dom": "^0.14.3", "react-redux": "4.0.0", + "react-router": "1.0.2", "react-toolbox": "^0.13.4", "react-tools": "^0.10.0", "react-transform-catch-errors": "^1.0.0", "redbox-react": "^1.1.1", - "redux-simple-router": "0.0.10", + "redux-simple-router": "1.0.1", "url-loader": "^0.5.7", "warning": "^2.1.0" } diff --git a/package.json b/package.json index 75b89c2..5272ecf 100644 --- a/package.json +++ b/package.json @@ -3,7 +3,7 @@ "description": "A universal redux renderer (ES6, Webpack, Express)", "author": "Buck DeFore (http://github.com/bdefore)", "license": "MIT", - "version": "1.0.0", + "version": "2.0.0-beta3", "repository": { "type": "git", "url": "git+https://github.com/bdefore/universal-redux.git" @@ -25,7 +25,7 @@ ], "main": "lib/index.js", "scripts": { - "compile": "babel src/ -d lib/", + "compile": "babel --presets es2015,stage-0,react --plugins transform-runtime src/ --out-dir lib/", "dev": "./bin/local-dev.sh", "prepublish": "npm run compile", "lint": "eslint -c .eslintrc src", @@ -33,13 +33,19 @@ }, "dependencies": { "autoprefixer-loader": "^3.1.0", - "babel": "~5.8.29", - "babel-core": "~5.8.33", - "babel-eslint": "^4.1.3", - "babel-loader": "~5.3.3", - "babel-plugin-react-transform": "~1.1.1", - "babel-plugin-typecheck": "^2.0.0", - "babel-runtime": "~5.8.29", + "babel": "~6.3.13", + "babel-cli": "6.3.17", + "babel-core": "~6.3.21", + "babel-eslint": "^5.0.0-beta3", + "babel-loader": "~6.2.0", + "babel-plugin-react-transform": "~2.0.0-beta1", + "babel-plugin-transform-decorators-legacy": "^1.3.4", + "babel-plugin-transform-runtime": "^6.3.13", + "babel-plugin-typecheck": "^3.5.1", + "babel-preset-es2015": "^6.3.13", + "babel-preset-react": "^6.3.13", + "babel-preset-stage-0": "^6.3.13", + "babel-runtime": "~6.3.19", "bootstrap-sass": "^3.3.5", "bootstrap-sass-loader": "^1.0.9", "clean-webpack-plugin": "^0.1.4", diff --git a/src/client.js b/src/client.js index c9c3291..c3c4116 100755 --- a/src/client.js +++ b/src/client.js @@ -2,7 +2,6 @@ * THIS IS THE ENTRY POINT FOR THE CLIENT, JUST LIKE server.js IS THE ENTRY POINT FOR THE SERVER. */ // node modules dependencies -import 'babel/polyfill'; import React from 'react'; import { each } from 'lodash'; import ReactDOM from 'react-dom'; @@ -63,7 +62,7 @@ if (process.env.NODE_ENV !== 'production') { } if (__DEVTOOLS__ && !window.devToolsExtension) { - const DevTools = require('./containers/DevTools/DevTools'); + const DevTools = require('./containers/DevTools/DevTools').default; ReactDOM.render(
diff --git a/src/redux/create.js b/src/redux/create.js index 7111534..27fdbb1 100644 --- a/src/redux/create.js +++ b/src/redux/create.js @@ -13,7 +13,7 @@ export default function createStore(customMiddleware, reducers, data) { let finalCreateStore; if (__DEVELOPMENT__ && __CLIENT__ && __DEVTOOLS__) { const { persistState } = require('redux-devtools'); - const DevTools = require('../containers/DevTools/DevTools'); + const DevTools = require('../containers/DevTools/DevTools').default; finalCreateStore = compose( applyMiddleware(...middleware), window.devToolsExtension ? window.devToolsExtension() : DevTools.instrument(), diff --git a/src/server.js b/src/server.js index e4017d7..65e4a38 100755 --- a/src/server.js +++ b/src/server.js @@ -47,13 +47,13 @@ function setupAssets(rootDir) { function setupRenderer() { - const getRoutes = require(path.resolve(config.routes)); - const reducers = require(path.resolve(config.redux.reducers)); + const getRoutes = require(path.resolve(config.routes)).default; + const reducers = require(path.resolve(config.redux.reducers)).default; const pretty = new PrettyError(); let CustomHtml; if (config.htmlShell) { - CustomHtml = require(path.resolve(config.htmlShell)); + CustomHtml = require(path.resolve(config.htmlShell)).default; } else { CustomHtml = Html; } @@ -69,7 +69,7 @@ function setupRenderer() { // assemble custom middleware, pass req, res const middleware = []; if (config.redux.middleware) { - const customMiddleware = require(path.resolve(config.redux.middleware)); + const customMiddleware = require(path.resolve(config.redux.middleware)).default; each(customMiddleware, (customMiddlewareToAdd) => { if (typeof customMiddlewareToAdd === 'function') { middleware.push(customMiddlewareToAdd(req, res));