More stuff

Author: sokra

README.md

@@ -0,0 +1,124 @@
+# webpack/react-starter
+
+Starter template for react and webpack.
+
+## Features
+
+* Compilation with webpack
+* React and jsx
+* Also includes reflux, but this can be easily replaced
+* Stylesheets can be CSS, LESS, SASS, Stylus or mixed
+* Embedded resources like images or fonts use DataUrls if appropriate
+* A simple flag loads a react component (and dependencies) on demand.
+* Development
+  * Development server
+  * Optionally Hot Module Replacement development server (LiveReload for Stylesheets and React components enabled)
+  * Uses SourceUrl for performance, but you may switch to SourceMaps easily
+* Production
+  * Server example for prerendering for React components
+  * Long Term Cacheing through file hashes enabled
+  * Generate separate css file to avoid FOUC
+  * Minized CSS, HTML and javascript
+* Also supports coffee-script files if you are more a coffee-script guy.
+* You can also require markdown or text files for your content.
+* Just require the files...
+
+## Installation
+
+Just clone this repo and change the `origin` git remote.
+
+``` text
+npm install
+```
+
+
+## Development server
+
+``` text
+npm run dev-server
+http://localhost:2992/
+```
+
+The configuration is `webpack-dev-server.config.js`.
+
+Static HTML is served from `config/dev-server-public`.
+
+It automatically recompiles and refreshes the page when files are changed.
+
+
+## Hot Module Replacement development server
+
+``` text
+npm run dev-server
+http://localhost:2992/
+```
+
+The configuration is `webpack-hot-dev-server.config.js`.
+
+Static HTML is served from `config/dev-server-public`.
+
+It automatically recompiles when files are changed. When a hot-replacement-enabled file is changed (i. e. stylesheets or React components) the module is hot-replaced. If Hot Replacement is not possible the page is refreshed.
+
+Hot Module Replacement has a performance impact on compilation.
+
+
+## Production compilation and server
+
+``` text
+npm run build
+npm start
+http://localhost:8080/
+```
+
+The configuration is `webpack-production.config.js`.
+
+The server is at `lib/server.js`
+
+The production setting builds two configurations: one for the client (`build/public`) and one for the serverside prerendering (`build/prerender`).
+
+> WIP: Serverside data fetching and embedding data into served HTML.
+
+
+## Build visualisation
+
+
+
+
+## Loaders and file types
+
+Many file types are preconfigured, but not every loader is installed. If you get an error like `Cannot find module "xxx-loader"`, you'll need to install the loader with `npm install xxx-loader --save` and restart the compilation.
+
+
+## Common changes to the configuration
+
+### Add more entry points
+
+(for a multi page app)
+
+1. Add an entry point to `make-webpack-config.js` (`var entry`).
+2. Add a new top-level react component in `app`.
+3. (Optional) Enable `commonsChunk` in `webpack-production.config.js`.
+4. Add a new HTML file in `config/dev-server-public` that references the new output file.
+5. Restart compilation.
+
+### Switch devtool to SourceMaps
+
+Change `devtool` property in `webpack-dev-server.config.js` and `webpack-hot-dev-server.config.js` to `"source-map"` (better module names) or `"eval-source-map"` (faster compilation).
+
+SourceMaps have a performance impact on compilation.
+
+### Enable SourceMaps in production
+
+1. Uncomment the `devtool` line in `webpack-production.config.js`.
+2. Make sure that the folder `build\public\debugging` is access controlled, i. e. by password.
+
+SourceMaps have a performance impact on compilation.
+
+SourceMaps contains your unminimized source code, so you need to restrict access to `build\public\debugging`.
+
+
+## License
+
+Copyright (c) 2012-2014 Tobias Koppers [![Gittip donate button](http://img.shields.io/gittip/sokra.png)](https://www.gittip.com/sokra/)
+
+MIT (http://www.opensource.org/licenses/mit-license.php)

app/Application.jsx

@@ -1,27 +1,40 @@
 var Reflux = require("reflux");
 
 var Actions = module.exports = Reflux.createActions([
-	"APPLY_OFFSET",
-	"SET",
+	"applyOffset",
+	"set",
 ]);
 
-Actions.SET.shouldEmit = function(value) {
+Actions.view = Reflux.createActions([
+	"increment",
+	"decrement",
+	"reset",
+]);
+
+Actions.server = Reflux.createActions([
+	"update",
+]);
+
+// Hooks
+Actions.set.shouldEmit = function(value) {
 	return Math.floor(value) === value;
 };
 
-// Public methods
-Actions.set = function(value) {
-	Actions.SET(value);
-};
+// View actions
+Actions.view.reset.listen(function() {
+	Actions.set(0);
+});
 
-Actions.reset = function() {
-	Actions.SET(0);
-};
+Actions.view.increment.listen(function() {
+	Actions.applyOffset(1);
+});
 
-Actions.increment = function() {
-	Actions.APPLY_OFFSET(1);
-};
+Actions.view.decrement.listen(function() {
+	Actions.applyOffset(-1);
+});
 
-Actions.decrement = function() {
-	Actions.APPLY_OFFSET(-1);
-};
+// Server actions
+
+Actions.server.update.listen(function(value) {
+	Actions.set(value);
+});

app/Example/Actions.js

@@ -1,10 +1,24 @@
 /** @jsx React.DOM */
 
 var React = require("react");
+var Reflux = require("reflux");
+var ClicksStore = require("./ClicksStore");
 
 var BigDisplay = React.createClass({
+	mixins: [Reflux.ListenerMixin],
+	getInitialState: function() {
+		return {
+			clicks: ClicksStore.getClicks()
+		};
+	},
+	componentDidMount: function() {
+		this.listenTo(ClicksStore, this._onChange);
+	},
+	_onChange: function() {
+		this.setState(this.getInitialState());
+	},
 	render: function() {
-		return <span>Yeah! <strong>{this.props.value}</strong> is really big.</span>;
+		return <span>Yeah! <strong>{this.props.value}</strong> is really big. You clicked <i>{this.state.clicks}</i> times.</span>;
 	}
 });
 module.exports = BigDisplay;

app/Example/BigDisplay.jsx

@@ -0,0 +1,23 @@
+var Reflux = require("reflux");
+var Actions = require("./Actions");
+
+module.exports = Reflux.createStore({
+	CLICK_RECOGNISED: 1,
+
+	init: function() {
+		this._clicks = 0;
+
+		this.listenTo(Actions.view.increment, this._click);
+		this.listenTo(Actions.view.decrement, this._click);
+		this.listenTo(Actions.view.reset, this._click);
+	},
+
+	_click: function() {
+		this._clicks++;
+		this.trigger(this.CLICK_RECOGNISED);
+	},
+
+	getClicks: function() {
+		return this._clicks;
+	}
+});

app/Example/ClicksStore.js

@@ -8,7 +8,7 @@ var Example = React.createClass({
 		return <button onClick={this._onClick}>{this.props.label}</button>;
 	},
 	_onClick: function() {
-		Actions[this.props.action]();
+		Actions.view[this.props.action]();
 	}
 });
 module.exports = Example;

app/Example/Control.jsx

@@ -2,28 +2,28 @@
 
 var React = require("react");
 var Reflux = require("reflux");
-var Store = require("./Store");
+var ValueStore = require("./ValueStore");
 var BigDisplay = require("react-proxy!./BigDisplay");
 
 var Display = React.createClass({
 	mixins: [Reflux.ListenerMixin],
 	getInitialState: function() {
 		return {
-			value: Store.get()
+			value: ValueStore.getValue()
 		};
 	},
 	componentDidMount: function() {
-		this.listenTo(Store, this._onChange);
+		this.listenTo(ValueStore, this._onChange);
 	},
 	_onChange: function() {
 		this.setState(this.getInitialState());
 	},
 	render: function() {
 		if(this.state.value < 10) {
-			return <span><strong>{this.state.value}</strong> Try to get 10 or more.</span>;
+			return <span><strong>{this.state.value}</strong> (Try to get 10 or more)</span>;
 		} else {
 			// BigDisplay loads on demand because of "react-proxy"
-			return <BigDisplay value={this.state.value} />
+			return <BigDisplay value={this.state.value}/>
 		}
 	}
 });

app/Example/Display.jsx

@@ -0,0 +1,45 @@
+var Reflux = require("reflux");
+var Actions = require("./Actions");
+
+module.exports = Reflux.createStore({
+	SENDING_STARTED: 1,
+	SENDING_ACKNOWLEDGED: 2,
+	UPDATE_RECEIVED: 3,
+
+	init: function() {
+		Actions.view.increment.listen(this._increment);
+		Actions.view.decrement.listen(this._decrement);
+		Actions.view.reset.listen(this._reset);
+		// TODO: Listen on server changes => this._serverUpdate
+		// TODO: Request initial
+	},
+
+	_increment: function(source) {
+		// TODO: Send to server...
+		// TODO: this.trigger(this.SENDING_STARTED) and isSyncing() === true
+		// TODO: this.trigger(this.SENDING_ACKNOWLEDGED) and isSyncing() === false
+	},
+
+	_decrement: function(source) {
+		// TODO: Send to server...
+	},
+
+	_reset: function(source) {
+		// TODO: Send to server...
+	},
+
+	_serverUpdate: function(value) {
+		Actions.server.update(value);
+		this.trigger(this.UPDATE_RECEIVED);
+	},
+
+	isInitiallyLoaded: function() {
+		// TODO return false during initial load
+		return true;
+	},
+
+	isSyncing: function() {
+		// TODO return true while syncing
+		return false;
+	}
+});

app/Example/ServerSyncStore.js

@@ -2,24 +2,27 @@ var Reflux = require("reflux");
 var Actions = require("./Actions");
 
 module.exports = Reflux.createStore({
+	OFFSET_APPLIED: 1,
+	VALUE_SET: 2,
+
 	init: function() {
 		this._value = 1;
-	
-		this.listenTo(Actions.APPLY_OFFSET, this._applyOffset);
-		this.listenTo(Actions.SET, this._set);
+
+		this.listenTo(Actions.applyOffset, this._applyOffset);
+		this.listenTo(Actions.set, this._set);
 	},
-	
+
 	_applyOffset: function(offset) {
 		this._value += offset;
-		this.trigger();
+		this.trigger(this.OFFSET_APPLIED);
 	},
-	
+
 	_set: function(value) {
 		this._value = value;
-		this.trigger();
+		this.trigger(this.VALUE_SET);
 	},
-	
-	get: function() {
+
+	getValue: function() {
 		return this._value;
 	}
 });

app/Example/Store.js app/Example/ValueStore.js

@@ -1,12 +1,14 @@
 /** @jsx React.DOM */
 
 var React = require("react");
+
 var Display = require("./Display");
 var Control = require("./Control");
 
 var Example = React.createClass({
 	render: function() {
-		return <div>
+		require("./style.less");
+		return <div className="module-example">
 			<Display />
 			<div>
 				<Control action="increment" label="+1" />

app/Example/index.jsx

@@ -0,0 +1,3 @@
+require("./ClicksStore");
+require("./ValueStore");
+require("./ServerSyncStore");