From f6047f880fa59e3179993183762eb970602e455b Mon Sep 17 00:00:00 2001 From: Araphel Date: Wed, 23 Dec 2015 14:21:41 -0700 Subject: [PATCH] Bebel 6 Integrated, Stage-0 added, React updated --- .babelrc | 14 +- components/autocomplete/Autocomplete.jsx | 412 +++++++++++----------- components/slider/Slider.jsx | 2 +- docs/.babelrc | 19 + docs/.eslintrc | 237 +++++++++++++ docs/app/components/layout/main/index.jsx | 2 + docs/package.json | 25 +- docs/server.js | 17 +- docs/webpack.config.development.js | 10 +- docs/webpack.config.production.js | 8 +- package.json | 34 +- server.js | 19 +- webpack.config.development.js | 10 +- webpack.config.test.js | 4 +- 14 files changed, 540 insertions(+), 273 deletions(-) create mode 100644 docs/.babelrc create mode 100644 docs/.eslintrc diff --git a/.babelrc b/.babelrc index 06454b6f..a4ac5ba8 100644 --- a/.babelrc +++ b/.babelrc @@ -1,11 +1,9 @@ { - "stage": 2, - "optional": ["es7.classProperties", "es7.exportExtensions"], + "presets": ["react", "es2015", "stage-0"], "env": { "development": { - "plugins": ["react-transform"], - "extra": { - "react-transform": { + "plugins": [ + ["react-transform", { "transforms": [{ "transform": "react-transform-hmr", "imports": ["react"], @@ -14,8 +12,8 @@ "transform": "react-transform-catch-errors", "imports": ["react", "redbox-react"] }] - } - } + }] + ] } } -} +} \ No newline at end of file diff --git a/components/autocomplete/Autocomplete.jsx b/components/autocomplete/Autocomplete.jsx index 4ddac8d9..e340298c 100644 --- a/components/autocomplete/Autocomplete.jsx +++ b/components/autocomplete/Autocomplete.jsx @@ -1,206 +1,206 @@ -import React from 'react'; -import ReactDOM from 'react-dom'; -import ClassNames from 'classnames'; -import Input from '../input'; -import events from '../utils/events'; -import style from './style'; - -const POSITION = { - AUTO: 'auto', - DOWN: 'down', - UP: 'up' -}; - -class Autocomplete extends React.Component { - static propTypes = { - className: React.PropTypes.string, - direction: React.PropTypes.oneOf(['auto', 'up', 'down']), - disabled: React.PropTypes.bool, - error: React.PropTypes.string, - label: React.PropTypes.string, - multiple: React.PropTypes.bool, - onChange: React.PropTypes.func, - source: React.PropTypes.any, - value: React.PropTypes.any - }; - - static defaultProps = { - className: '', - direction: 'auto', - multiple: true, - source: {} - }; - - state = { - direction: this.props.direction, - focus: false, - query: this.query(this.props.value) - }; - - componentWillReceiveProps (nextProps) { - if (!this.props.multiple) { - this.setState({query: nextProps.value}); - } - } - - shouldComponentUpdate (nextProps, nextState) { - if (!this.state.focus && nextState.focus && this.props.direction === POSITION.AUTO) { - const direction = this.calculateDirection(); - if (this.state.direction !== direction) { - this.setState({ direction }); - return false; - } - } - return true; - } - - handleChange = (keys, event) => { - const key = this.props.multiple ? keys : keys[0]; - const query = this.query(key); - if (this.props.onChange) this.props.onChange(key, event); - this.setState({ focus: false, query }, () => { this.refs.input.blur(); }); - }; - - handleQueryBlur = () => { - if (this.state.focus) this.setState({focus: false}); - }; - - handleQueryChange = (value) => { - this.setState({query: value}); - }; - - handleQueryFocus = () => { - this.refs.suggestions.scrollTop = 0; - this.setState({active: '', focus: true}); - }; - - handleQueryKeyUp = (event) => { - if (event.which === 13 && this.state.active) this.select(this.state.active, event); - if (event.which === 27) this.refs.input.blur(); - if ([40, 38].indexOf(event.which) !== -1) { - const suggestionsKeys = [...this.suggestions().keys()]; - let index = suggestionsKeys.indexOf(this.state.active) + (event.which === 40 ? +1 : -1); - if (index < 0) index = suggestionsKeys.length - 1; - if (index >= suggestionsKeys.length) index = 0; - this.setState({active: suggestionsKeys[index]}); - } - }; - - handleSuggestionHover = (key) => { - this.setState({active: key}); - }; - - calculateDirection () { - if (this.props.direction === 'auto') { - const client = ReactDOM.findDOMNode(this.refs.input).getBoundingClientRect(); - const screen_height = window.innerHeight || document.documentElement.offsetHeight; - const up = client.top > ((screen_height / 2) + client.height); - return up ? 'up' : 'down'; - } else { - return this.props.direction; - } - } - - query (key) { - return !this.props.multiple && this.props.value ? this.source().get(key) : ''; - } - - suggestions () { - const suggestions = new Map(); - const query = this.state.query.toLowerCase().trim() || ''; - const values = this.values(); - for (const [key, value] of this.source()) { - if (!values.has(key) && value.toLowerCase().trim().startsWith(query)) { - suggestions.set(key, value); - } - } - return suggestions; - } - - source () { - const { source } = this.props; - if (source.hasOwnProperty('length')) { - return new Map(source.map((item) => [item, item])); - } else { - return new Map(Object.keys(source).map((key) => [key, source[key]])); - } - } - - values () { - const valueMap = new Map(); - const values = this.props.multiple ? this.props.value : [this.props.value]; - for (const [k, v] of this.source()) { - if (values.indexOf(k) !== -1) valueMap.set(k, v); - } - return valueMap; - } - - select (key, event) { - events.pauseEvent(event); - const values = this.values(this.props.value); - this.handleChange([key, ...values.keys()], event); - } - - unselect (key, event) { - const values = this.values(this.props.value); - values.delete(key); - this.handleChange([...values.keys()], event); - } - - renderSelected () { - if (this.props.multiple) { - const selectedItems = [...this.values()].map(([key, value]) => { - return
  • {value}
    • ; - }); - - return ; - } - } - - renderSuggestions () { - const suggestions = [...this.suggestions()].map(([key, value]) => { - const className = ClassNames(style.suggestion, {[style.active]: this.state.active === key}); - return ( -
  • - {value} -
    • - ); - }); - - const className = ClassNames(style.suggestions, {[style.up]: this.state.direction === 'up'}); - return ; - } - - render () { - const {error, label, ...other} = this.props; - const className = ClassNames(style.root, { - [style.focus]: this.state.focus - }, this.props.className); - - return ( -
    - {this.renderSelected()} - - {this.renderSuggestions()} -
    - ); - } -} - -export default Autocomplete; +//import React from 'react'; +//import ReactDOM from 'react-dom'; +//import ClassNames from 'classnames'; +//import Input from '../input'; +//import events from '../utils/events'; +//import style from './style'; +// +//const POSITION = { +// AUTO: 'auto', +// DOWN: 'down', +// UP: 'up' +//}; +// +//class Autocomplete extends React.Component { +// static propTypes = { +// className: React.PropTypes.string, +// direction: React.PropTypes.oneOf(['auto', 'up', 'down']), +// disabled: React.PropTypes.bool, +// error: React.PropTypes.string, +// label: React.PropTypes.string, +// multiple: React.PropTypes.bool, +// onChange: React.PropTypes.func, +// source: React.PropTypes.any, +// value: React.PropTypes.any +// }; +// +// static defaultProps = { +// className: '', +// direction: 'auto', +// multiple: true, +// source: {} +// }; +// +// state = { +// direction: this.props.direction, +// focus: false, +// query: this.query(this.props.value) +// }; +// +// componentWillReceiveProps (nextProps) { +// if (!this.props.multiple) { +// this.setState({query: nextProps.value}); +// } +// } +// +// shouldComponentUpdate (nextProps, nextState) { +// if (!this.state.focus && nextState.focus && this.props.direction === POSITION.AUTO) { +// const direction = this.calculateDirection(); +// if (this.state.direction !== direction) { +// this.setState({ direction }); +// return false; +// } +// } +// return true; +// } +// +// handleChange = (keys, event) => { +// const key = this.props.multiple ? keys : keys[0]; +// const query = this.query(key); +// if (this.props.onChange) this.props.onChange(key, event); +// this.setState({ focus: false, query }, () => { this.refs.input.blur(); }); +// }; +// +// handleQueryBlur = () => { +// if (this.state.focus) this.setState({focus: false}); +// }; +// +// handleQueryChange = (value) => { +// this.setState({query: value}); +// }; +// +// handleQueryFocus = () => { +// this.refs.suggestions.scrollTop = 0; +// this.setState({active: '', focus: true}); +// }; +// +// handleQueryKeyUp = (event) => { +// if (event.which === 13 && this.state.active) this.select(this.state.active, event); +// if (event.which === 27) this.refs.input.blur(); +// if ([40, 38].indexOf(event.which) !== -1) { +// const suggestionsKeys = [...this.suggestions().keys()]; +// let index = suggestionsKeys.indexOf(this.state.active) + (event.which === 40 ? +1 : -1); +// if (index < 0) index = suggestionsKeys.length - 1; +// if (index >= suggestionsKeys.length) index = 0; +// this.setState({active: suggestionsKeys[index]}); +// } +// }; +// +// handleSuggestionHover = (key) => { +// this.setState({active: key}); +// }; +// +// calculateDirection () { +// if (this.props.direction === 'auto') { +// const client = ReactDOM.findDOMNode(this.refs.input).getBoundingClientRect(); +// const screen_height = window.innerHeight || document.documentElement.offsetHeight; +// const up = client.top > ((screen_height / 2) + client.height); +// return up ? 'up' : 'down'; +// } else { +// return this.props.direction; +// } +// } +// +// query (key) { +// return !this.props.multiple && this.props.value ? this.source().get(key) : ''; +// } +// +// suggestions2 () { +// const suggestions2 = new Map(); +// const query = this.state.query.toLowerCase().trim() || ''; +// const values = this.values(); +// for (const [key, value] of this.source()) { +// if (!values.has(key) && value.toLowerCase().trim().startsWith(query)) { +// suggestions2.set(key, value); +// } +// } +// return suggestions2; +// } +// +// source () { +// const { source } = this.props; +// if (source.hasOwnProperty('length')) { +// return new Map(source.map((item) => [item, item])); +// } else { +// return new Map(Object.keys(source).map((key) => [key, source[key]])); +// } +// } +// +// values () { +// const valueMap = new Map(); +// const values = this.props.multiple ? this.props.value : [this.props.value]; +// for (const [k, v] of this.source()) { +// if (values.indexOf(k) !== -1) valueMap.set(k, v); +// } +// return valueMap; +// } +// +// select (key, event) { +// events.pauseEvent(event); +// const values = this.values(this.props.value); +// this.handleChange([key, ...values.keys()], event); +// } +// +// unselect (key, event) { +// const values = this.values(this.props.value); +// values.delete(key); +// this.handleChange([...values.keys()], event); +// } +// +// renderSelected () { +// if (this.props.multiple) { +// const selectedItems = [...this.values()].map(([key, value]) => { +// return
  • {value}
    • ; +// }); +// +// return ; +// } +// } +// +// renderSuggestions () { +// const suggestions2 = [...this.suggestions2()].map(([key, value]) => { +// const className = ClassNames(style.suggestion, {[style.active]: this.state.active === key}); +// return ( +//
  • +// {value} +//
    • +// ); +// }); +// +// const className = ClassNames(style.suggestions2, {[style.up]: this.state.direction === 'up'}); +// return ; +// } +// +// render () { +// const {error, label, ...other} = this.props; +// const className = ClassNames(style.root, { +// [style.focus]: this.state.focus +// }, this.props.className); +// +// return ( +//
    +// {this.renderSelected()} +// +// {this.renderSuggestions()} +//
    +// ); +// } +//} +// +//export default Autocomplete; diff --git a/components/slider/Slider.jsx b/components/slider/Slider.jsx index 58617211..34ecef81 100644 --- a/components/slider/Slider.jsx +++ b/components/slider/Slider.jsx @@ -102,7 +102,7 @@ class Slider extends React.Component { handleResize = (event, callback) => { const {left, right} = ReactDOM.findDOMNode(this.refs.progressbar).getBoundingClientRect(); - const cb = callback || () => {}; + const cb = (callback) || (() => {}); this.setState({sliderStart: left, sliderLength: right - left}, cb); }; diff --git a/docs/.babelrc b/docs/.babelrc new file mode 100644 index 00000000..a4ac5ba8 --- /dev/null +++ b/docs/.babelrc @@ -0,0 +1,19 @@ +{ + "presets": ["react", "es2015", "stage-0"], + "env": { + "development": { + "plugins": [ + ["react-transform", { + "transforms": [{ + "transform": "react-transform-hmr", + "imports": ["react"], + "locals": ["module"] + }, { + "transform": "react-transform-catch-errors", + "imports": ["react", "redbox-react"] + }] + }] + ] + } + } +} \ No newline at end of file diff --git a/docs/.eslintrc b/docs/.eslintrc new file mode 100644 index 00000000..6f9f9cd8 --- /dev/null +++ b/docs/.eslintrc @@ -0,0 +1,237 @@ +{ + "env": { + "browser": true, + "node": true, + "mocha": true, + "es6": true + }, + + "ecmaFeatures": { + "jsx": true, + "templateStrings": true, + "superInFunctions": false, + "classes": true, + "modules": true + }, + + "parser": "babel-eslint", + + "plugins": [ + "babel", + "react" + ], + + "rules": { + "block-scoped-var": [0], + "brace-style": [2, "1tbs", { + "allowSingleLine": true + }], + "camelcase": [0], + "comma-dangle": [2, "never"], + "comma-spacing": [2], + "comma-style": [2, "last"], + "complexity": [0, 11], + "constructor-super": [2], + "consistent-return": [2], + "consistent-this": [0, "that"], + "curly": [2, "multi-line"], + "default-case": [2], + "dot-notation": [2, { + "allowKeywords": true + }], + "eol-last": [2], + "eqeqeq": [2], + "func-names": [0], + "func-style": [0, "declaration"], + "generator-star-spacing": [2, "after"], + "strict": [2, "always"], + "guard-for-in": [0], + "handle-callback-err": [0], + "key-spacing": [2, { + "beforeColon": false, + "afterColon": true + }], + "quotes": [2, "single", "avoid-escape"], + "max-depth": [0, 4], + "max-len": [0, 80, 4], + "max-nested-callbacks": [0, 2], + "max-params": [0, 3], + "max-statements": [0, 10], + "new-parens": [2], + "new-cap": [0], + "newline-after-var": [0], + "no-alert": [2], + "no-array-constructor": [2], + "no-bitwise": [0], + "no-caller": [2], + "no-catch-shadow": [2], + "no-cond-assign": [2], + "no-console": [0], + "no-constant-condition": [1], + "no-continue": [2], + "no-control-regex": [2], + "no-debugger": [2], + "no-delete-var": [2], + "no-div-regex": [0], + "no-dupe-args": [2], + "no-dupe-keys": [2], + "no-duplicate-case": [2], + "no-else-return": [0], + "no-empty": [2], + "no-empty-character-class": [2], + "no-empty-label": [2], + "no-eq-null": [0], + "no-eval": [2], + "no-ex-assign": [2], + "no-extend-native": [1], + "no-extra-bind": [2], + "no-extra-boolean-cast": [2], + "no-extra-parens": [0], + "no-extra-semi": [1], + "no-fallthrough": [2], + "no-floating-decimal": [2], + "no-func-assign": [2], + "no-implied-eval": [2], + "no-inline-comments": [0], + "no-inner-declarations": [2, "functions"], + "no-invalid-regexp": [2], + "no-irregular-whitespace": [2], + "no-iterator": [2], + "no-label-var": [2], + "no-labels": [2], + "no-lone-blocks": [2], + "no-lonely-if": [2], + "no-loop-func": [2], + "no-mixed-requires": [0, false], + "no-mixed-spaces-and-tabs": [2, false], + "no-multi-spaces": [2], + "no-multi-str": [2], + "no-multiple-empty-lines": [2, { + "max": 2 + }], + "no-native-reassign": [1], + "no-negated-in-lhs": [2], + "no-nested-ternary": [0], + "no-new": [2], + "no-new-func": [2], + "no-new-object": [2], + "no-new-require": [0], + "no-new-wrappers": [2], + "no-obj-calls": [2], + "no-octal": [2], + "no-octal-escape": [2], + "no-path-concat": [0], + "no-param-reassign": [2], + "no-plusplus": [0], + "no-process-env": [0], + "no-process-exit": [2], + "no-proto": [2], + "no-redeclare": [2], + "no-regex-spaces": [2], + "no-reserved-keys": [0], + "no-restricted-modules": [0], + "no-return-assign": [2], + "no-script-url": [2], + "no-self-compare": [0], + "no-sequences": [2], + "no-shadow": [2], + "no-shadow-restricted-names": [2], + "semi-spacing": [2], + "no-spaced-func": [2], + "no-sparse-arrays": [2], + "no-sync": [0], + "no-ternary": [0], + "no-this-before-super": [2], + "no-throw-literal": [2], + "no-trailing-spaces": [2], + "no-undef": [2], + "no-undef-init": [2], + "no-undefined": [0], + "no-underscore-dangle": [0], + "no-unreachable": [2], + "no-unused-expressions": [2], + "no-unused-vars": [1, { + "vars": "all", + "args": "after-used" + }], + "no-use-before-define": [2, "nofunc"], + "no-var": [2], + "no-void": [0], + "no-warning-comments": [0, { + "terms": ["todo", "fixme", "xxx"], + "location": "start" + }], + "no-with": [2], + "one-var": [0], + "operator-assignment": [0, "always"], + "operator-linebreak": [2, "after"], + "padded-blocks": [0], + "prefer-const": [2], + "prefer-spread": [2], + "quote-props": [0], + "radix": [0], + "semi": [2], + "semi-spacing": [2, { + "before": false, + "after": true + }], + "sort-vars": [0], + "space-after-keywords": [2, "always"], + "space-before-function-paren": [2, { + "anonymous": "always", + "named": "always" + }], + "space-before-blocks": [0, "always"], + "space-in-brackets": [0, "never", { + "singleValue": true, + "arraysInArrays": false, + "arraysInObjects": false, + "objectsInArrays": true, + "objectsInObjects": true, + "propertyName": false + }], + "space-in-parens": [2, "never"], + "space-infix-ops": [2], + "space-return-throw-case": [2], + "space-unary-ops": [2, { + "words": true, + "nonwords": false + }], + "spaced-line-comment": [0, "always"], + "strict": [1], + "use-isnan": [2], + "valid-jsdoc": [0], + "valid-typeof": [2], + "vars-on-top": [0], + "wrap-iife": [2], + "wrap-regex": [2], + "yoda": [2, "never", { + "exceptRange": true + }], + "babel/object-shorthand": [2], + "react/display-name": 0, + "react/jsx-boolean-value": 1, + "react/jsx-closing-bracket-location": 0, + "react/jsx-curly-spacing": 1, + "react/jsx-max-props-per-line": 0, + "react/jsx-indent-props": 0, + "react/jsx-no-duplicate-props": 1, + "react/jsx-no-undef": 1, + "react/jsx-pascal-case": 1, + "react/jsx-sort-prop-types": 1, + "react/jsx-sort-props": 0, + "react/jsx-uses-react": 1, + "react/jsx-uses-vars": 1, + "react/no-danger": 0, + "react/no-did-mount-set-state": 0, + "react/no-did-update-set-state": 1, + "react/no-multi-comp": 0, + "react/no-unknown-property": 1, + "react/prop-types": [2, {"ignore": ["onMouseDown", "onTouchStart"]}], + "react/react-in-jsx-scope": 1, + "react/require-extension": 1, + "react/self-closing-comp": 1, + "react/sort-comp": 1, + "react/wrap-multilines": 1 + } +} diff --git a/docs/app/components/layout/main/index.jsx b/docs/app/components/layout/main/index.jsx index 84e40e5d..054813c0 100644 --- a/docs/app/components/layout/main/index.jsx +++ b/docs/app/components/layout/main/index.jsx @@ -1,3 +1,5 @@ +"use strict"; + import React from 'react'; import ReactDOM from 'react-dom'; import { Button } from 'react-toolbox'; diff --git a/docs/package.json b/docs/package.json index 4f4dfc18..3141e5b9 100644 --- a/docs/package.json +++ b/docs/package.json @@ -11,18 +11,21 @@ "dependencies": { "classnames": "^2.2.1", "codemirror": "^5.8.0", - "history": "^1.12.6", - "react": "^0.14.0", - "react-dom": "^0.14.0", + "history": "^1.17.0", + "react": "^0.14.3", + "react-dom": "^0.14.3", "react-router": "^1.0.0-rc3" }, "devDependencies": { "autoprefixer": "^6.0.3", - "babel": "^5.8.23", - "babel-core": "^5.8.23", - "babel-eslint": "^4.1.3", - "babel-loader": "^5.3.2", - "babel-plugin-react-transform": "^1.1.1", + "babel-core": "^6.3.15", + "babel-eslint": "^5.0.0-beta4", + "babel-loader": "^6.2.0", + "babel-plugin-react-transform": "^2.0.0-beta1", + "babel-preset-es2015": "^6.3.13", + "babel-preset-react": "^6.3.13", + "babel-preset-stage-0": "^6.3.13", + "babel-preset-stage-2": "^6.3.13", "cross-env": "^1.0.4", "css-loader": "^0.21.0", "express": "^4.13.3", @@ -43,9 +46,9 @@ "style-loader": "^0.13.0", "toolbox-loader": "0.0.2", "transfer-webpack-plugin": "^0.1.4", - "webpack": "^1.12.0", - "webpack-dev-middleware": "^1.2.0", - "webpack-hot-middleware": "^2.4.1" + "webpack": "^1.12.9", + "webpack-dev-middleware": "^1.4.0", + "webpack-hot-middleware": "^2.6.0" }, "repository": "github:react-toolbox/react-toolbox", "license": "MIT" diff --git a/docs/server.js b/docs/server.js index 146b6d97..ab9d227f 100644 --- a/docs/server.js +++ b/docs/server.js @@ -7,6 +7,7 @@ const app = express(); const compiler = webpack(config); app.use(require('webpack-dev-middleware')(compiler, { + noInfo: true, publicPath: config.output.publicPath, stats: { colors: true @@ -15,15 +16,15 @@ app.use(require('webpack-dev-middleware')(compiler, { app.use(require('webpack-hot-middleware')(compiler)); -app.get('*', (req, res) => { - res.sendFile(path.join(__dirname, './www/index.html')); +app.get('*', function(req, res) { + res.sendFile(path.join(__dirname, './www/index.html')); }); -app.listen(8081, '0.0.0.0', (err) => { - if (err) { - console.log(err); - return; - } +app.listen(8081, '0.0.0.0', function(err) { + if (err) { + console.log(err); + return; + } - console.log('Listening at http://0.0.0.0:8081'); + console.log('Listening at http://0.0.0.0:8081'); }); diff --git a/docs/webpack.config.development.js b/docs/webpack.config.development.js index d37d9c35..1e0d0de2 100644 --- a/docs/webpack.config.development.js +++ b/docs/webpack.config.development.js @@ -6,7 +6,7 @@ const TransferWebpackPlugin = require('transfer-webpack-plugin'); module.exports = { context: __dirname, - devtool: 'inline-source-map', + devtool: 'inline-source-map', entry: [ 'webpack-hot-middleware/client', './app/index.jsx' @@ -31,18 +31,18 @@ module.exports = { module: { loaders: [ { - test: /(\.js|\.jsx)$/, + test: /\.(js|jsx)$/, exclude: /(node_modules)/, loader: 'babel' }, { - test: /(\.scss|\.css)$/, + test: /\.(scss|css)$/, loader: ExtractTextPlugin.extract('style', 'css?sourceMap&modules&importLoaders=1&localIdentName=[name]__[local]___[hash:base64:5]!postcss!sass?sourceMap!toolbox') }, { - test: /(\.txt)$/, + test: /\.(txt)$/, loader: 'raw', include: path.resolve(__dirname, './app/components/layout/main/modules') }, { - test: /(\.md)$/, + test: /\.(md)$/, loader: 'html!highlight!markdown' } ] diff --git a/docs/webpack.config.production.js b/docs/webpack.config.production.js index 4ecbc782..ad739ec9 100644 --- a/docs/webpack.config.production.js +++ b/docs/webpack.config.production.js @@ -27,18 +27,18 @@ module.exports = { module: { loaders: [ { - test: /(\.js|\.jsx)$/, + test: /\.(js|jsx)$/, exclude: /(node_modules)/, loader: 'babel' }, { - test: /(\.scss|\.css)$/, + test: /\.(scss|css)$/, loader: ExtractTextPlugin.extract('style', 'css?modules&importLoaders=1&localIdentName=[name]__[local]___[hash:base64:5]!postcss!sass!toolbox') }, { - test: /(\.txt)$/, + test: /\.(txt)$/, loader: 'raw', include: path.resolve(__dirname, './app/components/layout/main/modules') }, { - test: /(\.md)$/, + test: /\.(md)$/, loader: 'html?removeComments=false!highlight!markdown' } ] diff --git a/package.json b/package.json index 46b9fde7..b05e4ca6 100644 --- a/package.json +++ b/package.json @@ -52,19 +52,22 @@ }, "devDependencies": { "autoprefixer": "^6.0.3", - "babel": "^5.8.23", - "babel-core": "^5.8.23", - "babel-eslint": "^4.1.6", - "babel-loader": "^5.3.2", - "babel-plugin-react-transform": "^1.1.1", + "babel-core": "^6.3.15", + "babel-eslint": "^5.0.0-beta4", + "babel-loader": "^6.2.0", + "babel-plugin-react-transform": "^2.0.0-beta1", + "babel-preset-es2015": "^6.3.13", + "babel-preset-react": "^6.3.13", + "babel-preset-stage-0": "^6.3.13", + "babel-preset-stage-2": "^6.3.13", "bluebird": "^3.0.5", "core-js": "^1.2.6", "cpx": "^1.2.1", "cross-env": "^1.0.4", "css-loader": "^0.21.0", - "eslint": "^1.10.1", - "eslint-plugin-babel": "^2.1.1", - "eslint-plugin-react": "^3.10.0", + "eslint": "^1.10.3", + "eslint-plugin-babel": "^3.0.0", + "eslint-plugin-react": "^3.11.3", "expect": "^1.8.0", "express": "^4.13.3", "extract-text-webpack-plugin": "^0.8.2", @@ -81,11 +84,11 @@ "phantomjs": "^1.9.18", "phantomjs-polyfill": "0.0.1", "postcss-loader": "^0.7.0", - "react": "^0.14", + "react": "^0.14.3", "react-addons-css-transition-group": "^0.14.0", "react-addons-test-utils": "^0.14.0", "react-docgen": "^2.4.0", - "react-dom": "^0.14.0", + "react-dom": "^0.14.3", "react-transform-catch-errors": "^1.0.0", "react-transform-hmr": "^1.0.1", "redbox-react": "^1.1.1", @@ -94,9 +97,12 @@ "sinon": "git://github.com/sinonjs/sinon.git#b672042043517b9f84e14ed0fb8265126168778a", "style-loader": "^0.13.0", "toolbox-loader": "0.0.2", - "webpack": "^1.12.0", - "webpack-dev-middleware": "^1.2.0", - "webpack-hot-middleware": "^2.4.1" + "webpack": "^1.12.9", + "webpack-dev-middleware": "^1.4.0", + "webpack-hot-middleware": "^2.6.0" }, - "repository": "github:react-toolbox/react-toolbox" + "repository": "github:react-toolbox/react-toolbox", + "dependencies": { + "classnames": "^2.2.1" + } } diff --git a/server.js b/server.js index faac4f9a..c113df80 100644 --- a/server.js +++ b/server.js @@ -7,7 +7,8 @@ const app = express(); const compiler = webpack(config); app.use(require('webpack-dev-middleware')(compiler, { - publicPath: config.output.publicPath, + noInfo: true, + publicPath: config.output.publicPath, stats: { colors: true } @@ -15,15 +16,15 @@ app.use(require('webpack-dev-middleware')(compiler, { app.use(require('webpack-hot-middleware')(compiler)); -app.get('*', (req, res) => { - res.sendFile(path.join(__dirname, './spec/index.html')); +app.get('*', function(req, res) { + res.sendFile(path.join(__dirname, './www/index.html')); }); -app.listen(8080, '0.0.0.0', (err) => { - if (err) { - console.log(err); - return; - } +app.listen(8081, '0.0.0.0', function(err) { + if (err) { + console.log(err); + return; + } - console.log('Listening at http://0.0.0.0:8080'); + console.log('Listening at http://0.0.0.0:8081'); }); diff --git a/webpack.config.development.js b/webpack.config.development.js index 05b9397e..a4230845 100644 --- a/webpack.config.development.js +++ b/webpack.config.development.js @@ -6,7 +6,7 @@ const ExtractTextPlugin = require('extract-text-webpack-plugin'); module.exports = { context: __dirname, - devtool: 'inline-source-map', + devtool: 'inline-source-map', entry: [ 'webpack-hot-middleware/client', './spec/index.jsx' @@ -22,11 +22,11 @@ module.exports = { module: { loaders: [ { - test: /(\.js|\.jsx)$/, - exclude: /(node_modules)/, - loader: 'babel' + test: /\.(js|jsx)$/, + loader: ['babel'], + include: path.join(__dirname, 'spec'), }, { - test: /(\.scss|\.css)$/, + test: /\.(scss|css)$/, loader: ExtractTextPlugin.extract('style', 'css?sourceMap&modules&importLoaders=1&localIdentName=[name]__[local]___[hash:base64:5]!postcss!sass?sourceMap') } ] diff --git a/webpack.config.test.js b/webpack.config.test.js index cbf4e50e..93ad78c0 100644 --- a/webpack.config.test.js +++ b/webpack.config.test.js @@ -5,11 +5,11 @@ module.exports = { module: { loaders: [ { - test: /(\.js|\.jsx)$/, + test: /\.(js|jsx)$/, exclude: /(node_modules)/, loader: 'babel' }, { - test: /(\.scss|\.css)$/, + test: /\.(scss|css)$/, loader: 'style!css?modules&importLoaders=1&localIdentName=[name]__[local]___[hash:base64:5]!postcss!sass' } ]