From 278815013fa740a6180fbb827e144f5af93aaca4 Mon Sep 17 00:00:00 2001 From: Julian Mayorga Date: Tue, 3 Feb 2015 16:40:29 -0300 Subject: [PATCH 1/6] Add ES6 support --- index.js | 8 +++++++- package.json | 8 +++++--- webpack.config.js | 3 ++- 3 files changed, 14 insertions(+), 5 deletions(-) diff --git a/index.js b/index.js index 4f6143e..09a12ea 100644 --- a/index.js +++ b/index.js @@ -1,4 +1,10 @@ /** @jsx React.DOM */ var React = require('react'); -React.renderComponent(

Hello React!

, document.body); +class HelloMessage extends React.Component { + render() { + return
Hello React
; + } +} + +React.render(, document.body); diff --git a/package.json b/package.json index f6c8a5c..f80988a 100644 --- a/package.json +++ b/package.json @@ -11,10 +11,12 @@ "license": "BSD-2-Clause", "dependencies": { "envify": "^1.2.0", - "react": "^0.12.1" + "react": "^0.13.0-beta.1" }, "devDependencies": { - "webpack": "^1.4.13", - "jsx-loader": "^0.12.2" + "6to5-core": "^3.3.7", + "6to5-loader": "^3.0.0", + "jsx-loader": "^0.12.2", + "webpack": "^1.4.13" } } diff --git a/webpack.config.js b/webpack.config.js index 9a959f9..163c0ec 100644 --- a/webpack.config.js +++ b/webpack.config.js @@ -6,7 +6,8 @@ module.exports = { }, module: { loaders: [ - {test: /\.js$/, loader: 'jsx-loader'} + {test: /\.js$/, loader: 'jsx-loader'}, + { test: /\.js$/, exclude: /node_modules/, loader: "6to5-loader"} ] } }; From 4bf6b4ba492780afa241455265f1f156faf36b11 Mon Sep 17 00:00:00 2001 From: Julian Mayorga Date: Tue, 3 Feb 2015 17:30:19 -0300 Subject: [PATCH 2/6] Add testing with Jest --- HelloMessage.js | 9 +++++++++ index.js | 7 +------ package.json | 21 ++++++++++++++++++--- preprocessor.js | 6 ++++++ sum.js | 4 ++++ tests/components/HelloMessage.js | 17 +++++++++++++++++ tests/unit/sum.js | 8 ++++++++ webpack.config.js | 3 +-- 8 files changed, 64 insertions(+), 11 deletions(-) create mode 100644 HelloMessage.js create mode 100644 preprocessor.js create mode 100644 sum.js create mode 100644 tests/components/HelloMessage.js create mode 100644 tests/unit/sum.js diff --git a/HelloMessage.js b/HelloMessage.js new file mode 100644 index 0000000..e99e04d --- /dev/null +++ b/HelloMessage.js @@ -0,0 +1,9 @@ +var React = require('react'); + +class HelloMessage extends React.Component { + render() { + return
Hello React
; + } +} + +module.exports = HelloMessage; diff --git a/index.js b/index.js index 09a12ea..0558afd 100644 --- a/index.js +++ b/index.js @@ -1,10 +1,5 @@ /** @jsx React.DOM */ var React = require('react'); - -class HelloMessage extends React.Component { - render() { - return
Hello React
; - } -} +var HelloMessage = require('./HelloMessage'); React.render(, document.body); diff --git a/package.json b/package.json index f80988a..ca46535 100644 --- a/package.json +++ b/package.json @@ -5,7 +5,22 @@ "main": "index.js", "scripts": { "start": "webpack --progress --colors --watch", - "test": "echo \"Error: no test specified\" && exit 1" + "test": "jest" + }, + "jest": { + "scriptPreprocessor": "/preprocessor.js", + "unmockedModulePathPatterns": [ + "/node_modules/react" + ], + "moduleFileExtensions": [ + "js", + "json", + "jsx" + ], + "testFileExtensions": [ + "js" + ], + "testDirectoryName": "tests" }, "author": "", "license": "BSD-2-Clause", @@ -14,9 +29,9 @@ "react": "^0.13.0-beta.1" }, "devDependencies": { - "6to5-core": "^3.3.7", - "6to5-loader": "^3.0.0", + "jest-cli": "^0.2.2", "jsx-loader": "^0.12.2", + "react-tools": "^0.12.2", "webpack": "^1.4.13" } } diff --git a/preprocessor.js b/preprocessor.js new file mode 100644 index 0000000..d380a11 --- /dev/null +++ b/preprocessor.js @@ -0,0 +1,6 @@ +var ReactTools = require('react-tools'); +module.exports = { + process: function(src) { + return ReactTools.transform(src, {harmony: true}); + } +}; diff --git a/sum.js b/sum.js new file mode 100644 index 0000000..873332d --- /dev/null +++ b/sum.js @@ -0,0 +1,4 @@ +function sum(value1, value2) { + return value1 + value2; +} +module.exports = sum; diff --git a/tests/components/HelloMessage.js b/tests/components/HelloMessage.js new file mode 100644 index 0000000..b7f12a6 --- /dev/null +++ b/tests/components/HelloMessage.js @@ -0,0 +1,17 @@ +jest.dontMock('../../HelloMessage'); + +describe('HelloMessage', function() { + it('greets react', function() { + var React = require('react/addons'); + var HelloMessage = require('../../HelloMessage'); + var TestUtils = React.addons.TestUtils; + + var message = TestUtils.renderIntoDocument( + + ); + + var div = TestUtils.findRenderedDOMComponentWithTag( + message, 'div'); + expect(div.getDOMNode().textContent).toEqual('Hello React'); + }); +}); diff --git a/tests/unit/sum.js b/tests/unit/sum.js new file mode 100644 index 0000000..f5f08b3 --- /dev/null +++ b/tests/unit/sum.js @@ -0,0 +1,8 @@ +jest.dontMock('../../sum'); + +describe('sum', function() { + it('adds 1 + 2 to equal 3', function() { + var sum = require('../../sum'); + expect(sum(1, 2)).toBe(3); + }); +}); diff --git a/webpack.config.js b/webpack.config.js index 163c0ec..644e246 100644 --- a/webpack.config.js +++ b/webpack.config.js @@ -6,8 +6,7 @@ module.exports = { }, module: { loaders: [ - {test: /\.js$/, loader: 'jsx-loader'}, - { test: /\.js$/, exclude: /node_modules/, loader: "6to5-loader"} + {test: /\.js$/, loader: 'jsx-loader?harmony'} ] } }; From c43feb65369bf34cd2b24e83a6dfb5785e472a14 Mon Sep 17 00:00:00 2001 From: Julian Mayorga Date: Tue, 3 Feb 2015 18:13:15 -0300 Subject: [PATCH 3/6] Restructure files --- index.html => dist/index.html | 0 package.json | 6 ++++-- HelloMessage.js => src/HelloMessage.js | 0 index.js => src/index.js | 0 sum.js => src/sum.js | 0 tests/components/HelloMessage.js | 5 +++-- preprocessor.js => tests/preprocessor.js | 0 tests/unit/sum.js | 5 +++-- webpack.config.js | 6 ++++-- 9 files changed, 14 insertions(+), 8 deletions(-) rename index.html => dist/index.html (100%) rename HelloMessage.js => src/HelloMessage.js (100%) rename index.js => src/index.js (100%) rename sum.js => src/sum.js (100%) rename preprocessor.js => tests/preprocessor.js (100%) diff --git a/index.html b/dist/index.html similarity index 100% rename from index.html rename to dist/index.html diff --git a/package.json b/package.json index ca46535..1dc040f 100644 --- a/package.json +++ b/package.json @@ -8,7 +8,7 @@ "test": "jest" }, "jest": { - "scriptPreprocessor": "/preprocessor.js", + "scriptPreprocessor": "/tests/preprocessor.js", "unmockedModulePathPatterns": [ "/node_modules/react" ], @@ -20,7 +20,8 @@ "testFileExtensions": [ "js" ], - "testDirectoryName": "tests" + "testDirectoryName": "tests", + "testPathDirs": ["/tests/unit", "/tests/components"] }, "author": "", "license": "BSD-2-Clause", @@ -29,6 +30,7 @@ "react": "^0.13.0-beta.1" }, "devDependencies": { + "html-webpack-plugin": "^1.1.0", "jest-cli": "^0.2.2", "jsx-loader": "^0.12.2", "react-tools": "^0.12.2", diff --git a/HelloMessage.js b/src/HelloMessage.js similarity index 100% rename from HelloMessage.js rename to src/HelloMessage.js diff --git a/index.js b/src/index.js similarity index 100% rename from index.js rename to src/index.js diff --git a/sum.js b/src/sum.js similarity index 100% rename from sum.js rename to src/sum.js diff --git a/tests/components/HelloMessage.js b/tests/components/HelloMessage.js index b7f12a6..8acf48f 100644 --- a/tests/components/HelloMessage.js +++ b/tests/components/HelloMessage.js @@ -1,9 +1,10 @@ -jest.dontMock('../../HelloMessage'); +var componentPath = '../../src/HelloMessage'; +jest.dontMock(componentPath); describe('HelloMessage', function() { it('greets react', function() { var React = require('react/addons'); - var HelloMessage = require('../../HelloMessage'); + var HelloMessage = require(componentPath); var TestUtils = React.addons.TestUtils; var message = TestUtils.renderIntoDocument( diff --git a/preprocessor.js b/tests/preprocessor.js similarity index 100% rename from preprocessor.js rename to tests/preprocessor.js diff --git a/tests/unit/sum.js b/tests/unit/sum.js index f5f08b3..beb7850 100644 --- a/tests/unit/sum.js +++ b/tests/unit/sum.js @@ -1,8 +1,9 @@ -jest.dontMock('../../sum'); +var sumPath = '../../src/sum'; +jest.dontMock(sumPath); describe('sum', function() { it('adds 1 + 2 to equal 3', function() { - var sum = require('../../sum'); + var sum = require(sumPath); expect(sum(1, 2)).toBe(3); }); }); diff --git a/webpack.config.js b/webpack.config.js index 644e246..436cdf0 100644 --- a/webpack.config.js +++ b/webpack.config.js @@ -1,8 +1,10 @@ +var HtmlWebpackPlugin = require('html-webpack-plugin'); + module.exports = { cache: true, - entry: './index', + entry: './src/index', output: { - filename: 'browser-bundle.js' + filename: './dist/browser-bundle.js' }, module: { loaders: [ From 55cdb355348977267f5794fac73d2d73acf42288 Mon Sep 17 00:00:00 2001 From: Julian Mayorga Date: Tue, 3 Feb 2015 18:18:30 -0300 Subject: [PATCH 4/6] Modify npm tasks * npm start runs http-server * npm run build compiles with webpack --- README.md | 1 + package.json | 9 +++++++-- 2 files changed, 8 insertions(+), 2 deletions(-) diff --git a/README.md b/README.md index 345f43e..7e63c31 100644 --- a/README.md +++ b/README.md @@ -1,4 +1,5 @@ # how to use * `npm install` +* `npm build` * `npm start` diff --git a/package.json b/package.json index 1dc040f..b30c0a2 100644 --- a/package.json +++ b/package.json @@ -4,7 +4,8 @@ "description": "", "main": "index.js", "scripts": { - "start": "webpack --progress --colors --watch", + "start": "http-server dist/", + "build": "webpack --progress --colors --watch", "test": "jest" }, "jest": { @@ -21,7 +22,10 @@ "js" ], "testDirectoryName": "tests", - "testPathDirs": ["/tests/unit", "/tests/components"] + "testPathDirs": [ + "/tests/unit", + "/tests/components" + ] }, "author": "", "license": "BSD-2-Clause", @@ -31,6 +35,7 @@ }, "devDependencies": { "html-webpack-plugin": "^1.1.0", + "http-server": "^0.7.4", "jest-cli": "^0.2.2", "jsx-loader": "^0.12.2", "react-tools": "^0.12.2", From 3a6461fa929acb871cb2b2196860298dafed31df Mon Sep 17 00:00:00 2001 From: Julian Mayorga Date: Tue, 3 Feb 2015 18:21:27 -0300 Subject: [PATCH 5/6] Configure divshot deployment --- .gitignore | 3 ++- divshot.json | 5 +++++ 2 files changed, 7 insertions(+), 1 deletion(-) create mode 100644 divshot.json diff --git a/.gitignore b/.gitignore index 8fedff2..2e285a4 100644 --- a/.gitignore +++ b/.gitignore @@ -1,3 +1,4 @@ *~ node_modules -browser-bundle.js \ No newline at end of file +browser-bundle.js +.divshot-cache diff --git a/divshot.json b/divshot.json new file mode 100644 index 0000000..de2e49f --- /dev/null +++ b/divshot.json @@ -0,0 +1,5 @@ +{ + "name": "react-webpack-template", + "root": "./dist", + "clean_urls": true +} From 63340304ebba9fa869fc47a21faabd8e5709eabf Mon Sep 17 00:00:00 2001 From: Julian Mayorga Date: Wed, 4 Feb 2015 16:40:33 -0300 Subject: [PATCH 6/6] docs(README): Fix build command --- README.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/README.md b/README.md index 7e63c31..9828ff0 100644 --- a/README.md +++ b/README.md @@ -1,5 +1,5 @@ # how to use * `npm install` -* `npm build` +* `npm run build` * `npm start`