updated to React 0.13.1

Author: hipertracker

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});
 

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 <[email protected]>",
+  "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"
   }
 }

src/app/actions/LinksActions.js

@@ -88,4 +88,4 @@ LinksActions.loadData.listen(function () {
     LinksActions.loadDataSuccess(data);
 });
 
-export default LinksActions;
+export default LinksActions

src/app/components/About.js

@@ -5,10 +5,14 @@ const About = React.createClass({
     render() {
         return (
             <Segment>
-                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.
             </Segment>
         )
     }
 });
 
-export default About;
+export default About

src/app/components/App.js

@@ -34,4 +34,4 @@ const App = React.createClass({
     }
 });
 
-export default App;
+export default App

src/app/components/Home.js

@@ -13,4 +13,4 @@ const Home = React.createClass({
     }
 });
 
-export default Home;
+export default Home

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) =>
             <li key={key}>
-            {item.title} (<a href={item.url} target="_blank">{item.url}</a>)
+                {item.title} (<a href={item.url} target="_blank">{item.url}</a>)
             </li>);
         return (
             <div>
@@ -46,4 +46,4 @@ const UsefulLinks = React.createClass({
     }
 });
 
-export default UsefulLinks;
+export default UsefulLinks

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;
-};
+}
 

src/app/stores/LinksStore.js

@@ -10,4 +10,4 @@ const LinksStore = Reflux.createStore({
     }
 });
 
-export default LinksStore;
+export default LinksStore