From d0aa26c6a65347fe77cecc31557a3ce64a147239 Mon Sep 17 00:00:00 2001 From: Jaroslaw Zabiello Date: Tue, 17 Feb 2015 21:32:30 +0000 Subject: [PATCH 01/34] changed ES6 imports to work with latest babeljs --- package.json | 3 +-- src/app/actions/LinksActions.js | 2 +- src/app/components/About.js | 2 +- src/app/components/App.js | 4 ++-- src/app/components/Home.js | 2 +- src/app/components/UsefulLinks.js | 4 ++-- src/app/lib/tools.js | 4 ++-- src/app/stores/LinksStore.js | 2 +- 8 files changed, 11 insertions(+), 12 deletions(-) diff --git a/package.json b/package.json index 4f8238d..bab0e7d 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "react-es7", - "version": "0.0.11", + "version": "0.0.12", "description": "Example of using React + Reflux + router + ES6 with experimental ES7 syntax + Jest + Semantic-UI", "main": "src/index.js", "scripts": { @@ -27,7 +27,6 @@ "6to5": "*", "6to5-jest": "hipertracker/6to5-jest", "broccoli": "^0.13.3", - "broccoli-6to5-transpiler": "^0.1.1", "broccoli-babel-transpiler": "^4.0.0", "broccoli-cli": "0.0.1", "broccoli-env": "0.0.1", diff --git a/src/app/actions/LinksActions.js b/src/app/actions/LinksActions.js index 656f8f1..7bbc522 100644 --- a/src/app/actions/LinksActions.js +++ b/src/app/actions/LinksActions.js @@ -1,4 +1,4 @@ -import * as Reflux from 'reflux' +import Reflux from 'reflux' // Each action is like an event channel for one specific event. Actions are called by components. // The store is listening to all actions, and the components in turn are listening to the store. diff --git a/src/app/components/About.js b/src/app/components/About.js index d7a097d..48709b3 100644 --- a/src/app/components/About.js +++ b/src/app/components/About.js @@ -1,4 +1,4 @@ -import * as React from 'react' +import React from 'react' import {Segment} from 'react-semantify' const About = React.createClass({ diff --git a/src/app/components/App.js b/src/app/components/App.js index 40356c3..1697ad8 100644 --- a/src/app/components/App.js +++ b/src/app/components/App.js @@ -1,5 +1,5 @@ -import * as React from 'react' -import * as ReactRouter from 'react-router' +import React from 'react' +import ReactRouter from 'react-router' import {Menu, Segment, Section} from 'react-semantify' const RouteHandler = ReactRouter.RouteHandler; diff --git a/src/app/components/Home.js b/src/app/components/Home.js index 27167ec..c6b82b5 100644 --- a/src/app/components/Home.js +++ b/src/app/components/Home.js @@ -1,4 +1,4 @@ -import * as React from 'react' +import React from 'react' import {Segment} from 'react-semantify' import UsefulLinks from './UsefulLinks' diff --git a/src/app/components/UsefulLinks.js b/src/app/components/UsefulLinks.js index 08aaa9d..a429807 100644 --- a/src/app/components/UsefulLinks.js +++ b/src/app/components/UsefulLinks.js @@ -1,5 +1,5 @@ -import * as React from 'react' -import * as Reflux from 'reflux' +import React from 'react' +import Reflux from 'reflux' import LinksActions from '../actions/LinksActions' import LinksStore from '../stores/LinksStore' diff --git a/src/app/lib/tools.js b/src/app/lib/tools.js index 63e4d70..86cdbe2 100644 --- a/src/app/lib/tools.js +++ b/src/app/lib/tools.js @@ -1,5 +1,5 @@ -import * as React from 'react' -import * as _ from 'lodash' +import React from 'react' +import _ from 'lodash' // mounting a React component to a selector id location export function mount(component, location, argv = {}) { diff --git a/src/app/stores/LinksStore.js b/src/app/stores/LinksStore.js index 0bdf6e8..a8487e9 100644 --- a/src/app/stores/LinksStore.js +++ b/src/app/stores/LinksStore.js @@ -1,4 +1,4 @@ -import * as Reflux from 'reflux' +import Reflux from 'reflux' import LinksActions from '../actions/LinksActions' From 520b4b3fb730f6f6949503175e3a1db53768b705 Mon Sep 17 00:00:00 2001 From: Jaroslaw Zabiello Date: Wed, 18 Feb 2015 10:04:43 +0000 Subject: [PATCH 02/34] added babel-jest instead of older 6to5-jest --- package.json | 14 +++++++------- 1 file changed, 7 insertions(+), 7 deletions(-) diff --git a/package.json b/package.json index bab0e7d..f77feba 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "react-es7", - "version": "0.0.12", + "version": "0.0.13", "description": "Example of using React + Reflux + router + ES6 with experimental ES7 syntax + Jest + Semantic-UI", "main": "src/index.js", "scripts": { @@ -9,7 +9,7 @@ "serve": "broccoli serve" }, "jest": { - "scriptPreprocessor": "/node_modules/6to5-jest", + "scriptPreprocessor": "/node_modules/babel-jest", "testFileExtensions": [ "es6", "js" @@ -24,23 +24,23 @@ "author": "", "license": "ISC", "devDependencies": { - "6to5": "*", - "6to5-jest": "hipertracker/6to5-jest", + "jest": "*", + "babel-jest": "^4.0.0", "broccoli": "^0.13.3", "broccoli-babel-transpiler": "^4.0.0", "broccoli-cli": "0.0.1", "broccoli-env": "0.0.1", "broccoli-fast-browserify": "^0.2.3", "broccoli-filter": "^0.1.10", - "broccoli-funnel": "^0.1.6", + "broccoli-funnel": "^0.1.7", "broccoli-gzip": "^0.2.0", "broccoli-merge-trees": "^0.2.1", - "broccoli-sass": "hipertracker/broccoli-sass", "broccoli-timepiece": "^0.3.0", "broccoli-uglify-js": "^0.1.3", + "broccoli-sass": "hipertracker/broccoli-sass", "browserify": "^8.0.1", "http-server": "^0.7.4", - "jest-cli": "^0.2.1" + "jest-cli": "^0.2.2" }, "dependencies": { "lodash": "*", From 4f84d9462b9f3eeab07370434df13358a6225fcd Mon Sep 17 00:00:00 2001 From: Jaroslaw Zabiello Date: Wed, 18 Feb 2015 10:37:28 +0000 Subject: [PATCH 03/34] updated readme, remove jest from dep --- README.md | 2 +- package.json | 3 +-- 2 files changed, 2 insertions(+), 3 deletions(-) diff --git a/README.md b/README.md index 40398aa..6d58ea8 100644 --- a/README.md +++ b/README.md @@ -5,7 +5,7 @@ Example of [React](http://facebook.github.io/react/) + [Reflux](https://www.npmjs.com/package/reflux) + [routing](https://github.com/rackt/react-router) + [ES6 with experimental ES7 syntax](https://6to5.org/docs/usage/experimental/) + [Semantic-UI](http://semantic-ui.com/) * All JavaScript files are transpiled with [6to5](https://6to5.org/) library with enabled [experimental ES7 syntax](https://6to5.org/features.html). -* For using experimental ES7 code in [Jest](http://facebook.github.io/jest/docs/tutorial-react.html) tests, the project is using [my fork](https://github.com/hipertracker/6to5-jest) of `6to5-jest` package. +* For using experimental ES7 code in [Jest](http://facebook.github.io/jest/docs/tutorial-react.html) tests * The workflow and communication between components is built using [Reflux](https://github.com/spoike/refluxjs), a slighty [improved](http://blog.krawaller.se/posts/reflux-refinement/) Flux paradigm. * Unit testing is provided by [Jest](https://facebook.github.io/jest/). * Using [Semantic-UI](http://semantic-ui.com/) framework with React components ([react-semantify](http://react-components.com/component/react-semantify)). diff --git a/package.json b/package.json index f77feba..1dad77c 100644 --- a/package.json +++ b/package.json @@ -24,7 +24,6 @@ "author": "", "license": "ISC", "devDependencies": { - "jest": "*", "babel-jest": "^4.0.0", "broccoli": "^0.13.3", "broccoli-babel-transpiler": "^4.0.0", @@ -40,7 +39,7 @@ "broccoli-sass": "hipertracker/broccoli-sass", "browserify": "^8.0.1", "http-server": "^0.7.4", - "jest-cli": "^0.2.2" + "jest-cli": "^0.3.0" }, "dependencies": { "lodash": "*", From 2ba2caaa9ebcbfd166a650593aa2dc0b9ed1fd41 Mon Sep 17 00:00:00 2001 From: Jaroslaw Zabiello Date: Fri, 20 Feb 2015 11:09:16 +0000 Subject: [PATCH 04/34] jest-cli upgrade to 0.4.0 fixing issues with tests --- package.json | 2 +- src/__tests__/sum-test.js | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/package.json b/package.json index 1dad77c..04f86d2 100644 --- a/package.json +++ b/package.json @@ -39,7 +39,7 @@ "broccoli-sass": "hipertracker/broccoli-sass", "browserify": "^8.0.1", "http-server": "^0.7.4", - "jest-cli": "^0.3.0" + "jest-cli": "^0.4.0" }, "dependencies": { "lodash": "*", diff --git a/src/__tests__/sum-test.js b/src/__tests__/sum-test.js index d60c641..513a1cd 100644 --- a/src/__tests__/sum-test.js +++ b/src/__tests__/sum-test.js @@ -1,6 +1,6 @@ jest.dontMock('../sum'); // or jest.autoMockOff(); -import sum from '../sum'; +import sum from '../sum' describe('sum', function () { it('adds 1 + 2 to equal 3', function () { From ad01b3de9d4968c772dda8c5f7d9be67f08b7bc0 Mon Sep 17 00:00:00 2001 From: Jaroslaw Zabiello Date: Fri, 20 Feb 2015 11:10:15 +0000 Subject: [PATCH 05/34] version update --- package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/package.json b/package.json index 04f86d2..b273b75 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "react-es7", - "version": "0.0.13", + "version": "0.0.14", "description": "Example of using React + Reflux + router + ES6 with experimental ES7 syntax + Jest + Semantic-UI", "main": "src/index.js", "scripts": { From cf577911a356fccd569e99e27b8962b056bee5f2 Mon Sep 17 00:00:00 2001 From: Jaroslaw Zabiello Date: Mon, 16 Mar 2015 16:01:46 +0000 Subject: [PATCH 06/34] Data can be loaded before React component is mounted. --- src/app/components/UsefulLinks.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/app/components/UsefulLinks.js b/src/app/components/UsefulLinks.js index a429807..08c7679 100644 --- a/src/app/components/UsefulLinks.js +++ b/src/app/components/UsefulLinks.js @@ -20,7 +20,7 @@ const UsefulLinks = React.createClass({ linksUpdate(data) { this.setState({links: data.links}); }, - componentDidMount() { + componentWillMount() { LinksActions.loadData(); }, render() { From 00eb8f2d5650c934cb779c8766bac5317061c0eb Mon Sep 17 00:00:00 2001 From: Jaroslaw Zabiello Date: Mon, 16 Mar 2015 16:58:40 +0000 Subject: [PATCH 07/34] Update README.md --- README.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/README.md b/README.md index 6d58ea8..ef824bd 100644 --- a/README.md +++ b/README.md @@ -4,13 +4,13 @@ Example of [React](http://facebook.github.io/react/) + [Reflux](https://www.npmjs.com/package/reflux) + [routing](https://github.com/rackt/react-router) + [ES6 with experimental ES7 syntax](https://6to5.org/docs/usage/experimental/) + [Semantic-UI](http://semantic-ui.com/) -* All JavaScript files are transpiled with [6to5](https://6to5.org/) library with enabled [experimental ES7 syntax](https://6to5.org/features.html). +* All JavaScript files are transpiled with [Babel](https://babeljs.io/) library with enabled [experimental ES7 syntax](http://babeljs.io/docs/usage/transformers/#es7-experimental-). * For using experimental ES7 code in [Jest](http://facebook.github.io/jest/docs/tutorial-react.html) tests * The workflow and communication between components is built using [Reflux](https://github.com/spoike/refluxjs), a slighty [improved](http://blog.krawaller.se/posts/reflux-refinement/) Flux paradigm. * Unit testing is provided by [Jest](https://facebook.github.io/jest/). * Using [Semantic-UI](http://semantic-ui.com/) framework with React components ([react-semantify](http://react-components.com/component/react-semantify)). -If for some reasons you can't or don' want to use Node for file processing, you can use pure AMD version of that project: [hipertracker/react-es7-amd](https://github.com/hipertracker/react-es7-amd). It uses only a browser. +If for some reasons you can't or don' want to use Node for file processing, you can use [hipertracker/react-babel](https://github.com/hipertracker/react-babel). It uses only the browser, but with AMD behind. so ES6 files are transpiled only once (during ES6 module loading) and cached. ## Install From 74a39259f4b6f4010293089d518369d574737181 Mon Sep 17 00:00:00 2001 From: Jaroslaw Zabiello Date: Mon, 16 Mar 2015 16:59:47 +0000 Subject: [PATCH 08/34] Update README.md --- README.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/README.md b/README.md index ef824bd..7b40669 100644 --- a/README.md +++ b/README.md @@ -10,7 +10,7 @@ Example of [React](http://facebook.github.io/react/) + [Reflux](https://www.npmj * Unit testing is provided by [Jest](https://facebook.github.io/jest/). * Using [Semantic-UI](http://semantic-ui.com/) framework with React components ([react-semantify](http://react-components.com/component/react-semantify)). -If for some reasons you can't or don' want to use Node for file processing, you can use [hipertracker/react-babel](https://github.com/hipertracker/react-babel). It uses only the browser, but with AMD behind. so ES6 files are transpiled only once (during ES6 module loading) and cached. +If for some reasons you can't or don' want to use Node for file processing, you can use [hipertracker/react-babel](https://github.com/hipertracker/react-babel). It uses only the browser but with AMD. All ES6 files are transpiled only once (during module loading) and cached. ## Install From 060e157b243cf3894f664d16dc4031536fd7137d Mon Sep 17 00:00:00 2001 From: Jaroslaw Zabiello Date: Mon, 16 Mar 2015 17:00:20 +0000 Subject: [PATCH 09/34] Update README.md --- README.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/README.md b/README.md index 7b40669..87ac31c 100644 --- a/README.md +++ b/README.md @@ -10,7 +10,7 @@ Example of [React](http://facebook.github.io/react/) + [Reflux](https://www.npmj * Unit testing is provided by [Jest](https://facebook.github.io/jest/). * Using [Semantic-UI](http://semantic-ui.com/) framework with React components ([react-semantify](http://react-components.com/component/react-semantify)). -If for some reasons you can't or don' want to use Node for file processing, you can use [hipertracker/react-babel](https://github.com/hipertracker/react-babel). It uses only the browser but with AMD. All ES6 files are transpiled only once (during module loading) and cached. +If for some reasons you can't or don' want to use Node for file processing, you can use [hipertracker/react-babel](https://github.com/hipertracker/react-babel). It uses only the browser but with AMD. All ES6 files are transpiled only once (during module loading), and cached. ## Install From 30a7c77f2f1b40b37104d3b50c1ba3dda0b52f41 Mon Sep 17 00:00:00 2001 From: Jaroslaw Zabiello Date: Mon, 16 Mar 2015 17:00:37 +0000 Subject: [PATCH 10/34] Update bower.json --- bower.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/bower.json b/bower.json index f2fa9dc..7b9bdec 100644 --- a/bower.json +++ b/bower.json @@ -1,6 +1,6 @@ { "name": "react-es7", - "version": "0.0.7", + "version": "0.0.8", "homepage": "https://github.com/hipertracker/react-es7", "authors": [ "Jaroslaw Zabiello " From 9340062c0f0c8574b4ec585776966fa7286b7660 Mon Sep 17 00:00:00 2001 From: Jaroslaw Zabiello Date: Mon, 16 Mar 2015 17:00:58 +0000 Subject: [PATCH 11/34] Update package.json --- package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/package.json b/package.json index b273b75..5af3b34 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "react-es7", - "version": "0.0.14", + "version": "0.0.15", "description": "Example of using React + Reflux + router + ES6 with experimental ES7 syntax + Jest + Semantic-UI", "main": "src/index.js", "scripts": { From c96c2345e763f77a681e6e5a4878dd8f434f55b1 Mon Sep 17 00:00:00 2001 From: Jaroslaw Zabiello Date: Sat, 4 Apr 2015 03:05:48 +0100 Subject: [PATCH 12/34] Update package.json --- package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/package.json b/package.json index 5af3b34..5d626e4 100644 --- a/package.json +++ b/package.json @@ -43,7 +43,7 @@ }, "dependencies": { "lodash": "*", - "react": "^0.12.2", + "react": "*", "react-router": "*", "react-semantify": "jessy1092/react-semantify", "reactify": "*", From 172bcf5c0415c3438f7845d8a739dd2a5c78bd4d Mon Sep 17 00:00:00 2001 From: Jaroslaw Zabiello Date: Sat, 4 Apr 2015 03:32:10 +0100 Subject: [PATCH 13/34] Update Brocfile.js --- Brocfile.js | 1 - 1 file changed, 1 deletion(-) diff --git a/Brocfile.js b/Brocfile.js index 24ed08d..2bf8dda 100644 --- a/Brocfile.js +++ b/Brocfile.js @@ -2,7 +2,6 @@ var rimraf = require('rimraf'), mergeTrees = require('broccoli-merge-trees'), Funnel = require('broccoli-funnel'), compileSass = require('broccoli-sass'), - //esTranspiler = require('broccoli-6to5-transpiler'), esTranspiler = require('broccoli-babel-transpiler'), fastBrowserify = require('broccoli-fast-browserify'), uglifyJavaScript = require('broccoli-uglify-js'), From 659d794c13e5cbe7528077344df081456b1017d7 Mon Sep 17 00:00:00 2001 From: Jaroslaw Zabiello Date: Sat, 4 Apr 2015 23:38:22 +0100 Subject: [PATCH 14/34] removed bower, third party css served from cdn --- bower.json | 24 ------------------------ src/index.html | 4 ++-- 2 files changed, 2 insertions(+), 26 deletions(-) delete mode 100644 bower.json diff --git a/bower.json b/bower.json deleted file mode 100644 index 7b9bdec..0000000 --- a/bower.json +++ /dev/null @@ -1,24 +0,0 @@ -{ - "name": "react-es7", - "version": "0.0.8", - "homepage": "https://github.com/hipertracker/react-es7", - "authors": [ - "Jaroslaw Zabiello " - ], - "description": "Example of using React + Reflux + ES6 with experimental ES7 syntax + Jest", - "main": "src/index.js", - "license": "MIT", - "private": true, - "ignore": [ - "**/.*", - "node_modules", - "bower_components", - "test", - "tests" - ], - "dependencies": { - "jquery": "~2.1.3", - "semantic-ui": "~1.5.2", - "font-awesome": "~4.2.0" - } -} diff --git a/src/index.html b/src/index.html index 290ada4..72e06b0 100644 --- a/src/index.html +++ b/src/index.html @@ -5,8 +5,8 @@ Test - - + + From 34c100507cfd7871cb7cbfa6e79afda8b07f95af Mon Sep 17 00:00:00 2001 From: Jaroslaw Zabiello Date: Sat, 4 Apr 2015 23:40:06 +0100 Subject: [PATCH 15/34] fixed unit test usage --- src/__tests__/sum-test.js | 5 ++++- src/sum.js | 4 +++- 2 files changed, 7 insertions(+), 2 deletions(-) diff --git a/src/__tests__/sum-test.js b/src/__tests__/sum-test.js index 513a1cd..9e0f617 100644 --- a/src/__tests__/sum-test.js +++ b/src/__tests__/sum-test.js @@ -1,6 +1,9 @@ jest.dontMock('../sum'); // or jest.autoMockOff(); -import sum from '../sum' +// cannot use es6 modules because +// jest.dontMock & jest,autoMockOff() +// do not understand ES6 modules +const sum = require('../sum'); describe('sum', function () { it('adds 1 + 2 to equal 3', function () { diff --git a/src/sum.js b/src/sum.js index d615c71..65c5632 100644 --- a/src/sum.js +++ b/src/sum.js @@ -1,3 +1,5 @@ // ES6 code var sum = (a, b) => a + b; -export default sum; + +export default sum + From 8495122dc3525a41a213503a00eee2e7787052f6 Mon Sep 17 00:00:00 2001 From: Jaroslaw Zabiello Date: Sat, 4 Apr 2015 23:40:19 +0100 Subject: [PATCH 16/34] updated README --- README.md | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/README.md b/README.md index 87ac31c..e25a2cf 100644 --- a/README.md +++ b/README.md @@ -2,7 +2,7 @@ # react-es7 -Example of [React](http://facebook.github.io/react/) + [Reflux](https://www.npmjs.com/package/reflux) + [routing](https://github.com/rackt/react-router) + [ES6 with experimental ES7 syntax](https://6to5.org/docs/usage/experimental/) + [Semantic-UI](http://semantic-ui.com/) +Example of [React](http://facebook.github.io/react/) + [Reflux](https://www.npmjs.com/package/reflux) + [routing](https://github.com/rackt/react-router) + [ES6 with experimental ES7 syntax](https://babeljs.io/docs/usage/experimental/) + [Semantic-UI](http://semantic-ui.com/) * All JavaScript files are transpiled with [Babel](https://babeljs.io/) library with enabled [experimental ES7 syntax](http://babeljs.io/docs/usage/transformers/#es7-experimental-). * For using experimental ES7 code in [Jest](http://facebook.github.io/jest/docs/tutorial-react.html) tests @@ -17,7 +17,6 @@ If for some reasons you can't or don' want to use Node for file processing, you ``` npm install -g broccoli-cli npm install -bower install ``` ## Usage From af4264594de64997d375a12be3128fb02df16d86 Mon Sep 17 00:00:00 2001 From: Jaroslaw Zabiello Date: Sat, 4 Apr 2015 23:41:57 +0100 Subject: [PATCH 17/34] updated to React 0.13.1 --- Brocfile.js | 36 +++++++------------------- package.json | 42 +++++++++++++------------------ src/app/actions/LinksActions.js | 2 +- src/app/components/About.js | 8 ++++-- src/app/components/App.js | 2 +- src/app/components/Home.js | 2 +- src/app/components/UsefulLinks.js | 4 +-- src/app/lib/tools.js | 4 +-- src/app/stores/LinksStore.js | 2 +- 9 files changed, 41 insertions(+), 61 deletions(-) diff --git a/Brocfile.js b/Brocfile.js index 2bf8dda..758b939 100644 --- a/Brocfile.js +++ b/Brocfile.js @@ -2,52 +2,34 @@ var rimraf = require('rimraf'), mergeTrees = require('broccoli-merge-trees'), Funnel = require('broccoli-funnel'), compileSass = require('broccoli-sass'), - esTranspiler = require('broccoli-babel-transpiler'), + babelTranspiler = require('broccoli-babel-transpiler'), fastBrowserify = require('broccoli-fast-browserify'), uglifyJavaScript = require('broccoli-uglify-js'), gzipFiles = require('broccoli-gzip'), env = require('broccoli-env').getEnv(); +// copy index.html var staticFiles = new Funnel('src', { files: ['index.html'] }); -// build vendor/* -var jqueryFiles = new Funnel('bower_components/jquery/dist', { - include: [ - new RegExp(/\.min\.(js|map)$/), - ], - destDir: 'vendor/jquery' - }), - semanticUIFiles = new Funnel('bower_components/semantic-ui/dist', { - include: [ - new RegExp(/\.min\.(js|css)$/), - new RegExp(/themes/) - ], - destDir: 'vendor/semantic-ui' - }), - fontAwesomeFiles = new Funnel('bower_components/font-awesome', { - include: [ - new RegExp(/min\.css$/), - new RegExp(/fonts/) - ], - destDir: 'vendor/font-awesome' - }); -var vendorFiles = mergeTrees([jqueryFiles, semanticUIFiles, fontAwesomeFiles]); - +// convert SCSS into CSS var cssFiles = compileSass(['src'], 'styles/app.scss', 'styles/app.css'); +// exclude tests from build var jsFiles = new Funnel('src', { exclude: [new RegExp(/__tests__/)], include: [new RegExp(/\.js$/)] }); -jsFiles = esTranspiler(jsFiles, {experimental: true}); +// transpile ES6/7 into ES5 +jsFiles = babelTranspiler(jsFiles, {stage: 0}); +// transpile for the browser jsFiles = fastBrowserify(jsFiles, { bundles: { 'index.js': { - entryPoints: ['**/index.js'] + entryPoints: ['index.js'] } } }); @@ -61,5 +43,5 @@ if (env === 'production') { } rimraf.sync('./dist'); -module.exports = mergeTrees([staticFiles, vendorFiles, jsFiles, cssFiles], {overwrite: false}); +module.exports = mergeTrees([staticFiles, cssFiles, jsFiles], {overwrite: true}); diff --git a/package.json b/package.json index 5d626e4..a8e2c0b 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "react-es7", - "version": "0.0.15", + "version": "0.0.16", "description": "Example of using React + Reflux + router + ES6 with experimental ES7 syntax + Jest + Semantic-UI", "main": "src/index.js", "scripts": { @@ -17,37 +17,31 @@ "moduleFileExtensions": [ "js", "json", - "es6", - "jsx" + "es6" ] }, - "author": "", - "license": "ISC", + "author": "Jaroslaw Zabiello ", + "license": "MIT", "devDependencies": { - "babel-jest": "^4.0.0", - "broccoli": "^0.13.3", - "broccoli-babel-transpiler": "^4.0.0", - "broccoli-cli": "0.0.1", + "jest-cli": "^0.4.0", + "babel-jest": "^5.0.1", + "broccoli": "^0.15.3", + "broccoli-babel-transpiler": "^5.0.0", "broccoli-env": "0.0.1", - "broccoli-fast-browserify": "^0.2.3", - "broccoli-filter": "^0.1.10", - "broccoli-funnel": "^0.1.7", - "broccoli-gzip": "^0.2.0", + "broccoli-fast-browserify": "^0.2.5", + "broccoli-funnel": "^0.2.3", + "broccoli-gzip": "^0.2.1", "broccoli-merge-trees": "^0.2.1", + "broccoli-sass": "^0.6.3", "broccoli-timepiece": "^0.3.0", "broccoli-uglify-js": "^0.1.3", - "broccoli-sass": "hipertracker/broccoli-sass", - "browserify": "^8.0.1", - "http-server": "^0.7.4", - "jest-cli": "^0.4.0" + "rimraf": "^2.3.2" }, "dependencies": { - "lodash": "*", - "react": "*", - "react-router": "*", - "react-semantify": "jessy1092/react-semantify", - "reactify": "*", - "reflux": "*", - "rimraf": "^2.2.8" + "lodash": "^3.6.0", + "react": "^0.13.1", + "react-router": "^0.13.2", + "react-semantify": "^0.3.1", + "reflux": "^0.2.7" } } diff --git a/src/app/actions/LinksActions.js b/src/app/actions/LinksActions.js index 7bbc522..2faf1b0 100644 --- a/src/app/actions/LinksActions.js +++ b/src/app/actions/LinksActions.js @@ -88,4 +88,4 @@ LinksActions.loadData.listen(function () { LinksActions.loadDataSuccess(data); }); -export default LinksActions; +export default LinksActions diff --git a/src/app/components/About.js b/src/app/components/About.js index 48709b3..c3696ae 100644 --- a/src/app/components/About.js +++ b/src/app/components/About.js @@ -5,10 +5,14 @@ const About = React.createClass({ render() { return ( - Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus ligula eros, sollicitudin nec libero non, cursus fringilla lectus. Aliquam volutpat velit feugiat pellentesque lobortis. Pellentesque pulvinar ornare ligula, sit amet imperdiet nibh tincidunt et. Suspendisse suscipit dolor vel turpis viverra ullamcorper. Fusce in enim elementum, hendrerit enim ut, pretium ipsum. Sed malesuada justo nec augue sodales, eu luctus dolor vulputate. Nunc ut consequat ipsum. Nam tempor fermentum risus at dictum. Sed et diam metus. Donec ac nisi suscipit, tristique enim sit amet, hendrerit ante. Pellentesque nec augue malesuada, ultrices dolor a, placerat ex. Pellentesque imperdiet feugiat nunc. + Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus ligula eros, sollicitudin nec libero + non, cursus fringilla lectus. Aliquam volutpat velit feugiat pellentesque lobortis. Pellentesque + pulvinar ornare ligula, sit amet imperdiet nibh tincidunt et. Suspendisse suscipit dolor vel turpis + viverra ullamcorper. Fusce in enim elementum, hendrerit enim ut, pretium ipsum. Sed malesuada justo nec + augue sodales, eu luctus dolor vulputate. Nunc ut consequat ipsum. Nam tempor fermentum risus at dictum. ) } }); -export default About; \ No newline at end of file +export default About \ No newline at end of file diff --git a/src/app/components/App.js b/src/app/components/App.js index 1697ad8..1e9cc57 100644 --- a/src/app/components/App.js +++ b/src/app/components/App.js @@ -34,4 +34,4 @@ const App = React.createClass({ } }); -export default App; \ No newline at end of file +export default App \ No newline at end of file diff --git a/src/app/components/Home.js b/src/app/components/Home.js index c6b82b5..09bf3b7 100644 --- a/src/app/components/Home.js +++ b/src/app/components/Home.js @@ -13,4 +13,4 @@ const Home = React.createClass({ } }); -export default Home; \ No newline at end of file +export default Home \ No newline at end of file diff --git a/src/app/components/UsefulLinks.js b/src/app/components/UsefulLinks.js index 08c7679..55dd2ea 100644 --- a/src/app/components/UsefulLinks.js +++ b/src/app/components/UsefulLinks.js @@ -35,7 +35,7 @@ const UsefulLinks = React.createClass({ const style = m(styles.item, this.props.style); const items = this.state.links.map((item, key) =>
  • - {item.title} ({item.url}) + {item.title} ({item.url})
    • ); return (
    @@ -46,4 +46,4 @@ const UsefulLinks = React.createClass({ } }); -export default UsefulLinks; +export default UsefulLinks diff --git a/src/app/lib/tools.js b/src/app/lib/tools.js index 86cdbe2..123ddda 100644 --- a/src/app/lib/tools.js +++ b/src/app/lib/tools.js @@ -12,12 +12,12 @@ export function mount(component, location, argv = {}) { component = React.createFactory(component); } React.render(component(argv), location); -}; +} // merging properties, used in React component for aggregating styles export function m() { let res = {}; _.each(arguments, (arg) => arg && _.merge(res, arg)); return res; -}; +} diff --git a/src/app/stores/LinksStore.js b/src/app/stores/LinksStore.js index a8487e9..5878097 100644 --- a/src/app/stores/LinksStore.js +++ b/src/app/stores/LinksStore.js @@ -10,4 +10,4 @@ const LinksStore = Reflux.createStore({ } }); -export default LinksStore; +export default LinksStore From 4f0d07cf441817ac844a07032e5659dc5daa0f82 Mon Sep 17 00:00:00 2001 From: Jaroslaw Zabiello Date: Sun, 5 Apr 2015 00:02:29 +0100 Subject: [PATCH 18/34] added stage=0 for babel-jest --- package.json | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/package.json b/package.json index a8e2c0b..27385ac 100644 --- a/package.json +++ b/package.json @@ -1,10 +1,10 @@ { "name": "react-es7", - "version": "0.0.16", + "version": "0.0.17", "description": "Example of using React + Reflux + router + ES6 with experimental ES7 syntax + Jest + Semantic-UI", "main": "src/index.js", "scripts": { - "test": "jest", + "test": "BABEL_JEST_STAGE=0 jest", "bundle": "broccoli build dist", "serve": "broccoli serve" }, From 205b24cbaf46c91e47dcd6ec7df020547b9d257e Mon Sep 17 00:00:00 2001 From: Jaroslaw Zabiello Date: Tue, 21 Apr 2015 09:22:19 +0100 Subject: [PATCH 19/34] updated to React 0.13.2, raised BABEL_JEST_STAGE from 0 to 1 --- package.json | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/package.json b/package.json index 27385ac..5366138 100644 --- a/package.json +++ b/package.json @@ -1,10 +1,10 @@ { "name": "react-es7", - "version": "0.0.17", + "version": "0.0.18", "description": "Example of using React + Reflux + router + ES6 with experimental ES7 syntax + Jest + Semantic-UI", "main": "src/index.js", "scripts": { - "test": "BABEL_JEST_STAGE=0 jest", + "test": "BABEL_JEST_STAGE=1 jest", "bundle": "broccoli build dist", "serve": "broccoli serve" }, @@ -38,8 +38,8 @@ "rimraf": "^2.3.2" }, "dependencies": { - "lodash": "^3.6.0", - "react": "^0.13.1", + "lodash": "^3.7.0", + "react": "^0.13.2", "react-router": "^0.13.2", "react-semantify": "^0.3.1", "reflux": "^0.2.7" From 39412ae5154baec42560c501f3db17325af2c255 Mon Sep 17 00:00:00 2001 From: Jaroslaw Zabiello Date: Sun, 10 May 2015 15:19:16 +0100 Subject: [PATCH 20/34] upgrade packages (inc. React 0.13.3) --- package.json | 20 ++++++++++---------- 1 file changed, 10 insertions(+), 10 deletions(-) diff --git a/package.json b/package.json index 5366138..d4f89e3 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "react-es7", - "version": "0.0.18", + "version": "0.0.19", "description": "Example of using React + Reflux + router + ES6 with experimental ES7 syntax + Jest + Semantic-UI", "main": "src/index.js", "scripts": { @@ -23,24 +23,24 @@ "author": "Jaroslaw Zabiello ", "license": "MIT", "devDependencies": { - "jest-cli": "^0.4.0", - "babel-jest": "^5.0.1", - "broccoli": "^0.15.3", + "jest-cli": "^0.4.2", + "babel-jest": "^5.2.0", + "broccoli": "^0.16.2", "broccoli-babel-transpiler": "^5.0.0", "broccoli-env": "0.0.1", - "broccoli-fast-browserify": "^0.2.5", + "broccoli-fast-browserify": "^0.2.6", "broccoli-funnel": "^0.2.3", "broccoli-gzip": "^0.2.1", "broccoli-merge-trees": "^0.2.1", - "broccoli-sass": "^0.6.3", + "broccoli-sass": "^0.6.6", "broccoli-timepiece": "^0.3.0", "broccoli-uglify-js": "^0.1.3", - "rimraf": "^2.3.2" + "rimraf": "^2.3.3" }, "dependencies": { - "lodash": "^3.7.0", - "react": "^0.13.2", - "react-router": "^0.13.2", + "lodash": "^3.8.0", + "react": "^0.13.3", + "react-router": "^0.13.3", "react-semantify": "^0.3.1", "reflux": "^0.2.7" } From bcd881559edbce7d874e95cb64fa4b4050714fe0 Mon Sep 17 00:00:00 2001 From: Rob Colburn Date: Thu, 28 May 2015 14:29:29 -0700 Subject: [PATCH 21/34] Hipster-imports --- src/index.js | 7 ++----- 1 file changed, 2 insertions(+), 5 deletions(-) diff --git a/src/index.js b/src/index.js index 701d097..e7cc79c 100644 --- a/src/index.js +++ b/src/index.js @@ -1,4 +1,5 @@ -const React = require('react'); +import React = require('react'); +import Router, {Route, DefaultRoute} = require('react-router'); import {mount} from './app/lib/tools'; // For mounting App component into
    use: @@ -12,10 +13,6 @@ import App from './app/components/App'; import Home from './app/components/Home'; import About from './app/components/About'; -const Router = require('react-router'); -const Route = Router.Route; -const DefaultRoute = Router.DefaultRoute; - const routes = ( From 75327eecdccbf3d676c8a0c35633de2049751511 Mon Sep 17 00:00:00 2001 From: Jaroslaw Zabiello Date: Thu, 28 May 2015 22:56:36 +0100 Subject: [PATCH 22/34] fixed imports --- package.json | 4 ++-- src/index.js | 5 +++-- 2 files changed, 5 insertions(+), 4 deletions(-) diff --git a/package.json b/package.json index d4f89e3..881a09e 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "react-es7", - "version": "0.0.19", + "version": "0.0.20", "description": "Example of using React + Reflux + router + ES6 with experimental ES7 syntax + Jest + Semantic-UI", "main": "src/index.js", "scripts": { @@ -38,7 +38,7 @@ "rimraf": "^2.3.3" }, "dependencies": { - "lodash": "^3.8.0", + "lodash": "^3.9.3", "react": "^0.13.3", "react-router": "^0.13.3", "react-semantify": "^0.3.1", diff --git a/src/index.js b/src/index.js index e7cc79c..8275050 100644 --- a/src/index.js +++ b/src/index.js @@ -1,5 +1,4 @@ -import React = require('react'); -import Router, {Route, DefaultRoute} = require('react-router'); +import React from 'react' import {mount} from './app/lib/tools'; // For mounting App component into
    use: @@ -13,6 +12,8 @@ import App from './app/components/App'; import Home from './app/components/Home'; import About from './app/components/About'; +import Router, {Route, DefaultRoute} from 'react-router' + const routes = ( From e76aa56b4fde99923215861c33f0d684adbbf8b2 Mon Sep 17 00:00:00 2001 From: Jaroslaw Zabiello Date: Fri, 12 Jun 2015 03:40:56 +0100 Subject: [PATCH 23/34] used ES6 classes --- src/app/components/About.js | 4 ++-- src/app/components/App.js | 11 ++++------- src/app/components/Home.js | 12 +++++++----- 3 files changed, 13 insertions(+), 14 deletions(-) diff --git a/src/app/components/About.js b/src/app/components/About.js index c3696ae..442a76d 100644 --- a/src/app/components/About.js +++ b/src/app/components/About.js @@ -1,7 +1,7 @@ import React from 'react' import {Segment} from 'react-semantify' -const About = React.createClass({ +class About extends React.Component { render() { return ( @@ -13,6 +13,6 @@ const About = React.createClass({ ) } -}); +} export default About \ No newline at end of file diff --git a/src/app/components/App.js b/src/app/components/App.js index 1e9cc57..195c542 100644 --- a/src/app/components/App.js +++ b/src/app/components/App.js @@ -1,13 +1,10 @@ import React from 'react' -import ReactRouter from 'react-router' +import ReactRouter, {RouteHandler, Link} from 'react-router' import {Menu, Segment, Section} from 'react-semantify' -const RouteHandler = ReactRouter.RouteHandler; -const Link = ReactRouter.Link; - -const App = React.createClass({ +class App extends React.Component { render() { - const styles = { + const styles= { margin: 10 }; return ( @@ -32,6 +29,6 @@ const App = React.createClass({ ) } -}); +} export default App \ No newline at end of file diff --git a/src/app/components/Home.js b/src/app/components/Home.js index 09bf3b7..20f9ca1 100644 --- a/src/app/components/Home.js +++ b/src/app/components/Home.js @@ -3,14 +3,16 @@ import {Segment} from 'react-semantify' import UsefulLinks from './UsefulLinks' -const Home = React.createClass({ +class Home extends React.Component { render() { return ( - - - +
    + + + +
    ) } -}); +} export default Home \ No newline at end of file From 9747fa81b1fb0cd965ffa7d7242e4140a523b8dc Mon Sep 17 00:00:00 2001 From: Jaroslaw Zabiello Date: Fri, 12 Jun 2015 03:41:33 +0100 Subject: [PATCH 24/34] better es6 import syntax --- src/app/components/UsefulLinks.js | 7 +++---- 1 file changed, 3 insertions(+), 4 deletions(-) diff --git a/src/app/components/UsefulLinks.js b/src/app/components/UsefulLinks.js index 55dd2ea..f04fd01 100644 --- a/src/app/components/UsefulLinks.js +++ b/src/app/components/UsefulLinks.js @@ -1,16 +1,14 @@ -import React from 'react' +import React, {PropTypes} from 'react' import Reflux from 'reflux' import LinksActions from '../actions/LinksActions' import LinksStore from '../stores/LinksStore' import {m} from '../lib/tools' -const T = React.PropTypes; - const UsefulLinks = React.createClass({ mixins: [Reflux.listenTo(LinksStore, 'linksUpdate')], propTypes: { - title: T.string.isRequired + title: PropTypes.string.isRequired }, getInitialState() { return { @@ -27,6 +25,7 @@ const UsefulLinks = React.createClass({ if (!this.state.links.length) { return ; } + const styles = { item: { paddingLeft: 30 From 5a589cbcda709b0116f3b8c28f60a88e4b9db868 Mon Sep 17 00:00:00 2001 From: Jaroslaw Zabiello Date: Fri, 12 Jun 2015 03:42:01 +0100 Subject: [PATCH 25/34] addeds sourcemaps for debugging and Flow types --- Brocfile.js | 9 +++++++-- package.json | 9 ++++++--- src/sum.js | 5 +++-- 3 files changed, 16 insertions(+), 7 deletions(-) diff --git a/Brocfile.js b/Brocfile.js index 758b939..c318751 100644 --- a/Brocfile.js +++ b/Brocfile.js @@ -23,10 +23,15 @@ var jsFiles = new Funnel('src', { }); // transpile ES6/7 into ES5 -jsFiles = babelTranspiler(jsFiles, {stage: 0}); +jsFiles = babelTranspiler(jsFiles, { + stage: 0, + sourceMaps: 'inline', // add sourcemaps for ES6 debugging + plugins: ['typecheck'] // add Flow types checking! +}); // transpile for the browser jsFiles = fastBrowserify(jsFiles, { + debug: env !== 'production', // add sourcemaps if not for production bundles: { 'index.js': { entryPoints: ['index.js'] @@ -38,7 +43,7 @@ if (env === 'production') { jsFiles = uglifyJavaScript(jsFiles); jsFiles = gzipFiles(jsFiles, { extensions: ['js', 'css'], - keepUncompressed: true + keepUncompressed: false }); } diff --git a/package.json b/package.json index 881a09e..8c8a00c 100644 --- a/package.json +++ b/package.json @@ -1,10 +1,10 @@ { "name": "react-es7", - "version": "0.0.20", + "version": "0.1.0", "description": "Example of using React + Reflux + router + ES6 with experimental ES7 syntax + Jest + Semantic-UI", "main": "src/index.js", "scripts": { - "test": "BABEL_JEST_STAGE=1 jest", + "test": "BABEL_JEST_STAGE=0 jest", "bundle": "broccoli build dist", "serve": "broccoli serve" }, @@ -23,8 +23,9 @@ "author": "Jaroslaw Zabiello ", "license": "MIT", "devDependencies": { - "jest-cli": "^0.4.2", + "babel": "^5.5.6", "babel-jest": "^5.2.0", + "babel-plugin-typecheck": "0.0.3", "broccoli": "^0.16.2", "broccoli-babel-transpiler": "^5.0.0", "broccoli-env": "0.0.1", @@ -33,8 +34,10 @@ "broccoli-gzip": "^0.2.1", "broccoli-merge-trees": "^0.2.1", "broccoli-sass": "^0.6.6", + "broccoli-source-map": "^0.2.0", "broccoli-timepiece": "^0.3.0", "broccoli-uglify-js": "^0.1.3", + "jest-cli": "^0.4.12", "rimraf": "^2.3.3" }, "dependencies": { diff --git a/src/sum.js b/src/sum.js index 65c5632..168805a 100644 --- a/src/sum.js +++ b/src/sum.js @@ -1,5 +1,6 @@ -// ES6 code -var sum = (a, b) => a + b; +// ES6 code with Flow types + +const sum = (a:number, b:number) => a + b; export default sum From 22d25e82955bcd3ac36fb7f16d26f960d236049a Mon Sep 17 00:00:00 2001 From: Jaroslaw Zabiello Date: Fri, 12 Jun 2015 03:52:03 +0100 Subject: [PATCH 26/34] update project description --- README.md | 8 ++++---- package.json | 2 +- 2 files changed, 5 insertions(+), 5 deletions(-) diff --git a/README.md b/README.md index e25a2cf..b5cd20b 100644 --- a/README.md +++ b/README.md @@ -2,7 +2,7 @@ # react-es7 -Example of [React](http://facebook.github.io/react/) + [Reflux](https://www.npmjs.com/package/reflux) + [routing](https://github.com/rackt/react-router) + [ES6 with experimental ES7 syntax](https://babeljs.io/docs/usage/experimental/) + [Semantic-UI](http://semantic-ui.com/) +Example of [React](http://facebook.github.io/react/) + [Flow](http://flowtype.org/) types + [Reflux](https://www.npmjs.com/package/reflux) + [routing](https://github.com/rackt/react-router) + [ES6 with experimental ES7 syntax](https://babeljs.io/docs/usage/experimental/) + [Semantic-UI](http://semantic-ui.com/) * All JavaScript files are transpiled with [Babel](https://babeljs.io/) library with enabled [experimental ES7 syntax](http://babeljs.io/docs/usage/transformers/#es7-experimental-). * For using experimental ES7 code in [Jest](http://facebook.github.io/jest/docs/tutorial-react.html) tests @@ -59,7 +59,7 @@ $ npm test Currently just a simple example of using unit tests in React for files using ES6/ES7 syntax. ## Todo - +* replace Reflux with [nuclear-js](https://github.com/optimizely/nuclear-js) +* Add examples of Flow types checking * Add more [prop validation](http://facebook.github.io/react/docs/reusable-components.html) examples -* Add more unit tests showing [Jest](http://facebook.github.io/jest/) testing ES5/ES7 code. -* Add [Yeoman](http://yeoman.io/) project with options to choose SASS/Less/Stylus and Bootstrap/Semantic-UI. +* Add more unit tests showing [Jest](http://facebook.github.io/jest/) testing ES5/ES7 code with [Flow](http://flowtype.org/) types checking. diff --git a/package.json b/package.json index 8c8a00c..f163694 100644 --- a/package.json +++ b/package.json @@ -1,7 +1,7 @@ { "name": "react-es7", "version": "0.1.0", - "description": "Example of using React + Reflux + router + ES6 with experimental ES7 syntax + Jest + Semantic-UI", + "description": "Example of using React + Flow types + Reflux + router + ES6 with experimental ES7 syntax + Jest + Semantic-UI", "main": "src/index.js", "scripts": { "test": "BABEL_JEST_STAGE=0 jest", From cbce8251efb67b1b02c3e697fc420c472a549cee Mon Sep 17 00:00:00 2001 From: Jaroslaw Zabiello Date: Fri, 12 Jun 2015 14:37:40 +0100 Subject: [PATCH 27/34] added Jest code coverage, updated README --- .gitignore | 1 + README.md | 12 ++++++++++-- package.json | 6 +++--- src/__tests__/sum-test.js | 14 ++++++-------- src/{ => lib}/sum.js | 0 5 files changed, 20 insertions(+), 13 deletions(-) rename src/{ => lib}/sum.js (100%) diff --git a/.gitignore b/.gitignore index 2161e0a..33d6e23 100644 --- a/.gitignore +++ b/.gitignore @@ -4,3 +4,4 @@ node_modules tmp bower_components /dist/ +/coverage/ diff --git a/README.md b/README.md index b5cd20b..e58afcb 100644 --- a/README.md +++ b/README.md @@ -5,6 +5,7 @@ Example of [React](http://facebook.github.io/react/) + [Flow](http://flowtype.org/) types + [Reflux](https://www.npmjs.com/package/reflux) + [routing](https://github.com/rackt/react-router) + [ES6 with experimental ES7 syntax](https://babeljs.io/docs/usage/experimental/) + [Semantic-UI](http://semantic-ui.com/) * All JavaScript files are transpiled with [Babel](https://babeljs.io/) library with enabled [experimental ES7 syntax](http://babeljs.io/docs/usage/transformers/#es7-experimental-). +* The project support [Flow](http://flowtype.org/) type annotations * For using experimental ES7 code in [Jest](http://facebook.github.io/jest/docs/tutorial-react.html) tests * The workflow and communication between components is built using [Reflux](https://github.com/spoike/refluxjs), a slighty [improved](http://blog.krawaller.se/posts/reflux-refinement/) Flux paradigm. * Unit testing is provided by [Jest](https://facebook.github.io/jest/). @@ -27,6 +28,11 @@ npm install ``` broccoli serve ``` +or + +``` +npm start +``` * with additional [LiveReload](https://chrome.google.com/webstore/detail/livereload/jnihajbhpnppcggbcgedagnkighmdlei): @@ -50,16 +56,18 @@ Open `http://localhost:4200` BROCCOLI_ENV=production broccoli build dist ``` -Test: +Test and code coverage: ``` $ npm test ``` +You can see code coverage statistics at [http://localhost:8080/lcov-report/](http://localhost:8080/lcov-report/). + Currently just a simple example of using unit tests in React for files using ES6/ES7 syntax. ## Todo * replace Reflux with [nuclear-js](https://github.com/optimizely/nuclear-js) -* Add examples of Flow types checking +* Add examples of [Flow](http://flowtype.org/) types checking * Add more [prop validation](http://facebook.github.io/react/docs/reusable-components.html) examples * Add more unit tests showing [Jest](http://facebook.github.io/jest/) testing ES5/ES7 code with [Flow](http://flowtype.org/) types checking. diff --git a/package.json b/package.json index f163694..161bae1 100644 --- a/package.json +++ b/package.json @@ -1,12 +1,12 @@ { "name": "react-es7", - "version": "0.1.0", + "version": "0.1.1", "description": "Example of using React + Flow types + Reflux + router + ES6 with experimental ES7 syntax + Jest + Semantic-UI", "main": "src/index.js", "scripts": { - "test": "BABEL_JEST_STAGE=0 jest", + "test": "BABEL_JEST_STAGE=0 jest --coverage", "bundle": "broccoli build dist", - "serve": "broccoli serve" + "start": "broccoli serve" }, "jest": { "scriptPreprocessor": "/node_modules/babel-jest", diff --git a/src/__tests__/sum-test.js b/src/__tests__/sum-test.js index 9e0f617..6bdfdbb 100644 --- a/src/__tests__/sum-test.js +++ b/src/__tests__/sum-test.js @@ -1,12 +1,10 @@ -jest.dontMock('../sum'); // or jest.autoMockOff(); +jest.dontMock('../lib/sum'); // or jest.autoMockOff(); -// cannot use es6 modules because -// jest.dontMock & jest,autoMockOff() -// do not understand ES6 modules -const sum = require('../sum'); +// cannot use es6 modules syntax because +// jest.dontMock & jest.autoMockOff() +// do not understand ES6 modules yet +const sum = require('../lib/sum'); describe('sum', function () { - it('adds 1 + 2 to equal 3', function () { - expect(sum(1, 2)).toBe(3); - }); + it('adds 1 + 2 to equal 3', () => expect(sum(1, 2)).toBe(3)) }); diff --git a/src/sum.js b/src/lib/sum.js similarity index 100% rename from src/sum.js rename to src/lib/sum.js From 6e2bef0c2997842fc9b300c9f56b955a619a37dc Mon Sep 17 00:00:00 2001 From: Jaroslaw Zabiello Date: Fri, 12 Jun 2015 14:38:32 +0100 Subject: [PATCH 28/34] README.md update --- README.md | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/README.md b/README.md index e58afcb..555486a 100644 --- a/README.md +++ b/README.md @@ -62,9 +62,8 @@ Test and code coverage: $ npm test ``` -You can see code coverage statistics at [http://localhost:8080/lcov-report/](http://localhost:8080/lcov-report/). +You can also see the code coverage at [http://localhost:8080/lcov-report/](http://localhost:8080/lcov-report/). -Currently just a simple example of using unit tests in React for files using ES6/ES7 syntax. ## Todo * replace Reflux with [nuclear-js](https://github.com/optimizely/nuclear-js) From 1da4b63776e764319b7dfab76fb2ffd426da6b20 Mon Sep 17 00:00:00 2001 From: Jaroslaw Zabiello Date: Fri, 12 Jun 2015 14:43:56 +0100 Subject: [PATCH 29/34] README.md update --- README.md | 7 ++++++- 1 file changed, 6 insertions(+), 1 deletion(-) diff --git a/README.md b/README.md index 555486a..822c3b9 100644 --- a/README.md +++ b/README.md @@ -62,8 +62,13 @@ Test and code coverage: $ npm test ``` -You can also see the code coverage at [http://localhost:8080/lcov-report/](http://localhost:8080/lcov-report/). +Also code coverage in the browser: +``` +cd coverage/lcov-report +http-server +open http://localhost:8080 +``` ## Todo * replace Reflux with [nuclear-js](https://github.com/optimizely/nuclear-js) From 333e04a9a8b77d57a472cefc6a4fb26a61270a12 Mon Sep 17 00:00:00 2001 From: Jaroslaw Zabiello Date: Fri, 12 Jun 2015 14:50:04 +0100 Subject: [PATCH 30/34] simplified code coverage launch --- README.md | 4 +--- package.json | 1 + 2 files changed, 2 insertions(+), 3 deletions(-) diff --git a/README.md b/README.md index 822c3b9..fbc4164 100644 --- a/README.md +++ b/README.md @@ -65,9 +65,7 @@ $ npm test Also code coverage in the browser: ``` -cd coverage/lcov-report -http-server -open http://localhost:8080 +npm run coverage ``` ## Todo diff --git a/package.json b/package.json index 161bae1..44a34ab 100644 --- a/package.json +++ b/package.json @@ -5,6 +5,7 @@ "main": "src/index.js", "scripts": { "test": "BABEL_JEST_STAGE=0 jest --coverage", + "coverage": "cd coverage/lcov-report && open http://localhost:8080 && http-server", "bundle": "broccoli build dist", "start": "broccoli serve" }, From f6e98eab9578029a4bf78eeba3c370fc2a03b891 Mon Sep 17 00:00:00 2001 From: Jaroslaw Zabiello Date: Fri, 12 Jun 2015 14:59:53 +0100 Subject: [PATCH 31/34] Update README.md --- README.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/README.md b/README.md index fbc4164..c9cc81a 100644 --- a/README.md +++ b/README.md @@ -69,7 +69,7 @@ npm run coverage ``` ## Todo -* replace Reflux with [nuclear-js](https://github.com/optimizely/nuclear-js) +* Replace Reflux with [nuclear-js](https://github.com/optimizely/nuclear-js) * Add examples of [Flow](http://flowtype.org/) types checking * Add more [prop validation](http://facebook.github.io/react/docs/reusable-components.html) examples * Add more unit tests showing [Jest](http://facebook.github.io/jest/) testing ES5/ES7 code with [Flow](http://flowtype.org/) types checking. From bf90657454cec63b4d69caa670a76692d04f7268 Mon Sep 17 00:00:00 2001 From: Jaroslaw Zabiello Date: Fri, 12 Jun 2015 15:00:38 +0100 Subject: [PATCH 32/34] Update README.md --- README.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/README.md b/README.md index c9cc81a..0456f96 100644 --- a/README.md +++ b/README.md @@ -69,7 +69,7 @@ npm run coverage ``` ## Todo -* Replace Reflux with [nuclear-js](https://github.com/optimizely/nuclear-js) +* Replace [Reflux](https://www.npmjs.com/package/reflux) with [nuclear-js](https://github.com/optimizely/nuclear-js) * Add examples of [Flow](http://flowtype.org/) types checking * Add more [prop validation](http://facebook.github.io/react/docs/reusable-components.html) examples * Add more unit tests showing [Jest](http://facebook.github.io/jest/) testing ES5/ES7 code with [Flow](http://flowtype.org/) types checking. From b79d605f154c3d088306a822d8c8ad52cc42e807 Mon Sep 17 00:00:00 2001 From: Jaroslaw Zabiello Date: Sat, 13 Jun 2015 14:03:55 +0100 Subject: [PATCH 33/34] keep generated index.js --- Brocfile.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/Brocfile.js b/Brocfile.js index c318751..82f33d5 100644 --- a/Brocfile.js +++ b/Brocfile.js @@ -43,7 +43,7 @@ if (env === 'production') { jsFiles = uglifyJavaScript(jsFiles); jsFiles = gzipFiles(jsFiles, { extensions: ['js', 'css'], - keepUncompressed: false + keepUncompressed: true }); } From 94275a6fb35cc80e2ac84fbc15218a3878ae8543 Mon Sep 17 00:00:00 2001 From: Jaroslaw Zabiello Date: Sun, 30 Aug 2015 22:41:15 +0100 Subject: [PATCH 34/34] Update README.md --- README.md | 6 ------ 1 file changed, 6 deletions(-) diff --git a/README.md b/README.md index 0456f96..8b1cbc8 100644 --- a/README.md +++ b/README.md @@ -34,12 +34,6 @@ or npm start ``` -* with additional [LiveReload](https://chrome.google.com/webstore/detail/livereload/jnihajbhpnppcggbcgedagnkighmdlei): - -``` -broccoli serve --live-reload-port 35729 -``` - * with watcher and generating files: ```