Initial commit.

.gitignore

@@ -0,0 +1,6 @@
+.idea/
+node_modules/
+dist/
+*.log
+*.map
+.DS_Store

.npmignore

@@ -0,0 +1,12 @@
+.idea/
+node_modules/
+dist/
+*.log
+*.map
+.DS_Store
+
+static/
+src/example/
+src/example.*
+tmp/
+webpack.*.js

LICENSE.md

@@ -0,0 +1,27 @@
+# BSD 3-Clause License
+
+Copyright © 2015, Rick Wong  
+All rights reserved.
+
+Redistribution and use in source and binary forms, with or without
+modification, are permitted provided that the following conditions are met:
+
+1. Redistributions of source code must retain the above copyright
+   notice, this list of conditions and the following disclaimer.
+2. Redistributions in binary form must reproduce the above copyright
+   notice, this list of conditions and the following disclaimer in the
+   documentation and/or other materials provided with the distribution.
+3. Neither the name of the copyright holder nor the
+   names of its contributors may be used to endorse or promote products
+   derived from this software without specific prior written permission.
+
+THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS "AS IS" AND
+ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE IMPLIED
+WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE ARE
+DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT HOLDER BE LIABLE FOR ANY
+DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES
+(INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES;
+LOSS OF USE, DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND
+ON ANY THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT
+(INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE OF THIS
+SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.

README.md

@@ -0,0 +1,20 @@
+# React Transmit
+
+Relay-ish library without the GraphQL.
+
+## Installation
+
+	npm install react-transmit
+
+## Usage
+
+TODO.
+
+## Community
+
+Let's start one together! After you ★Star this project, follow [@Rygu](https://twitter.com/rygu)
+on Twitter.
+
+## License
+
+BSD 3-Clause license. Copyright © 2015, Rick Wong. All rights reserved.

package.json

@@ -0,0 +1,41 @@
+{
+  "name": "react-transmit",
+  "description": "Relay-ish library without the GraphQL.",
+  "version": "0.9.0",
+  "license": "BSD-3",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/RickWong/react-transmit.git"
+  },
+  "homepage": "https://github.com/RickWong/react-transmit",
+  "keywords": [
+    "react",
+    "transmit",
+    "relay",
+    "react-component"
+  ],
+  "main": "src/lib/react-transmit.js",
+  "scripts": {
+    "localhost": "sleep 2; which open && open http://localhost:8080",
+    "build": "webpack --verbose --colors --display-error-details --config webpack.client.js",
+    "watch-client": "webpack --verbose --colors --display-error-details --config webpack.client-watch.js && webpack-dev-server --config webpack.client-watch.js",
+    "watch": "concurrent --kill-others 'npm run watch-client' 'npm run localhost'"
+  },
+  "dependencies": {
+    "react": "0.13.1",
+    "react-inline-css": "1.1.1"
+  },
+  "devDependencies": {
+    "babel-core": "4.7.16",
+    "babel-loader": "4.2.0",
+    "babel-runtime": "4.7.16",
+    "concurrently": "0.0.5",
+    "json-loader": "0.5.1",
+    "react-hot-loader": "1.2.3",
+    "webpack": "1.7.3",
+    "webpack-dev-server": "1.7.0"
+  },
+  "engines": {
+    "node" : ">=0.10.32"
+  }
+}

src/example.js

@@ -0,0 +1,4 @@
+import React from "react";
+import Newsfeed from "example/Newsfeed";
+
+React.render(<Newsfeed />, document.getElementById("react-root"));

src/example/Newsfeed.js

@@ -0,0 +1,93 @@
+import React from "react";
+import InlineCss from "react-inline-css";
+import Transmit from "lib/react-transmit";
+import Story from "example/Story";
+
+/**
+ * @class Newsfeed
+ */
+const Newsfeed = React.createClass({
+	statics: {
+		css: (avatarSize) => `
+			body {
+				background: #E9EAED;
+			}
+			& .github {
+				position: absolute;
+				top: 0;
+				right: 0;
+				border: 0;
+			}
+			& {
+				font-family: Helvetica, sans-serif;
+				width: 500px;
+				margin: 20px auto;
+				font-size: 14px;
+			}
+			& header {
+				padding: 20px 30px;
+				background: #fff;
+				border: 1px solid #e5e5e5;
+				border-radius: 3px;
+				margin-bottom: 10px;
+			}
+			& header h2 {
+				color: #3B5998;
+			}
+			& footer {
+				text-align: center;
+				margin: 12px;
+			}`
+	},
+	onLoadMore (event) {
+		event.preventDefault();
+		this.props.setQueryParams({count: this.props.queryParams.count + 1});
+	},
+	render () {
+		const repositoryUrl = "https://github.com/RickWong/react-transmit";
+		const stories = this.props.stories || [];
+
+		return (
+			<InlineCss stylesheet={Newsfeed.css()} namespace="Newsfeed">
+				<a className="github" href={repositoryUrl}>
+					<img src="https://camo.githubusercontent.com/365986a132ccd6a44c23a9169022c0b5c890c387/68747470733a2f2f73332e616d617a6f6e6177732e636f6d2f6769746875622f726962626f6e732f666f726b6d655f72696768745f7265645f6161303030302e706e67" alt="Fork me on GitHub" />
+				</a>
+				<header>
+					<h2>
+						React Transmit
+					</h2>
+					<p>
+						A promising Relay-ish library without the GraphQL.
+					</p>
+				</header>
+				<main>
+					{stories.map((story, i) => <Story key={i} />)}
+				</main>
+				<footer>
+					<a href="#" onClick={this.onLoadMore}>
+						Load more
+					</a>
+				</footer>
+			</InlineCss>
+		);
+	}
+});
+
+export default Transmit.createContainer(Newsfeed, {
+	queryParams: {
+		count: 1
+	},
+	queries: {
+		stories (queryParams) {
+			return new Promise(function (resolve, reject) {
+				var storyPromises = [];
+
+				for (var i=0; i<queryParams.count; i++) {
+					storyPromises.push(Story.getQuery("story"));
+				}
+
+				Promise.all(storyPromises).then(resolve);
+			});
+		}
+	}
+});

src/example/Story.js

@@ -0,0 +1,71 @@
+import React from "react";
+import InlineCss from "react-inline-css";
+import Transmit from "lib/react-transmit";
+
+/**
+ * @class Story
+ */
+const Story = React.createClass({
+	statics: {
+		css: () => `
+			& {
+				padding: 12px;
+				background: #fff;
+				border: 1px solid #e5e5e5;
+				border-radius: 3px;
+				margin-bottom: 8px;
+			}
+			& img {
+				float: left;
+				border: 1px solid #e5e5e5;
+				margin: 0 6px 12px 0;
+			}
+			& h4 {
+				color: #3b5998;
+				margin: 5px 0;
+			}
+			& span {
+				color: #bbb;
+				font-size: 12px;
+			}
+			& div {
+				clear: both;
+			}`
+	},
+	render() {
+		var story = this.props.story;
+
+		if (!story) {
+			return null;
+		}
+
+		return (
+			<InlineCss stylesheet={Story.css()} namespace="Story">
+				<img src={story.author.profile_picture.uri} />
+				<h4>{story.author.name}</h4>
+				<span>Mar 22</span>
+				<div>{story.text}</div>
+			</InlineCss>
+		);
+	}
+});
+
+export default Transmit.createContainer(Story, {
+	queries: {
+		story (queryParams) {
+			return new Promise(function (resolve, reject) {
+				var story = {
+					author: {
+						name:            "Rick Wong",
+						profile_picture: {
+							uri: "https://avatars3.githubusercontent.com/u/40102?v=3&s=40"
+						}
+					},
+					text:   "React Transmit. A Relay-ish library."
+				};
+
+				resolve(story);
+			});
+		}
+	}
+});

src/lib/react-transmit.js

@@ -0,0 +1,60 @@
+/**
+ * @copyright © 2015, Rick Wong. All rights reserved.
+ */
+var React = require("react");
+var assign = React.__spread;
+
+var createContainer = function (Component, options) {
+	options = options || {};
+	var queryParams = options.queryParams || {};
+	var queries = options.queries || {};
+
+	return React.createClass({
+		statics: {
+			getQuery: function (query) {
+				return queries[query];
+			}
+		},
+		componentWillMount: function () {
+			this.setQueryParams(queryParams);
+		},
+		setQueryParams: function (nextQueryParams) {
+			queryParams = assign(queryParams, nextQueryParams);
+			this.transmit();
+		},
+		transmit: function () {
+			var promises = [];
+			var nextState = {};
+			var _this = this;
+
+			for (var query in queries) {
+				if (queries.hasOwnProperty(query)) {
+					var promise = queries[query](queryParams);
+					promise.then(function (value) {
+						nextState[query] = value;
+					});
+					promises.push(promise);
+				}
+			}
+
+			Promise.all(promises).then(function () {
+				_this.setState(nextState);
+			});
+		},
+		render: function () {
+			var props = {
+				queryParams: queryParams,
+				setQueryParams: this.setQueryParams
+			};
+
+			return React.createElement(
+				Component,
+				assign({}, this.state, props, this.props)
+			);
+		}
+	});
+};
+
+module.exports = {
+	createContainer: createContainer
+};

static/index.html

@@ -0,0 +1,12 @@
+<!doctype html>
+<html lang="en-us">
+<head>
+	<meta charset="utf-8">
+	<title>react-transmit</title>
+	<link rel="shortcut icon" href="./favicon.ico">
+</head>
+<body>
+	<div id="react-root"></div>
+	<script src="//localhost:8080/dist/client.js"></script>
+</body>
+</html>

webpack.client-watch.js

@@ -0,0 +1,41 @@
+var webpack = require("webpack");
+var config = require("./webpack.client.js");
+
+config.cache = true;
+config.debug = true;
+config.devtool = "eval";
+
+config.entry.unshift(
+	"webpack-dev-server/client?http://localhost:8080",
+	"webpack/hot/only-dev-server"
+);
+
+config.output.publicPath = "http://localhost:8080/dist/";
+config.output.hotUpdateMainFilename = "update/[hash]/update.json";
+config.output.hotUpdateChunkFilename = "update/[hash]/[id].update.js";
+
+config.plugins = [
+	new webpack.HotModuleReplacementPlugin(),
+	new webpack.NoErrorsPlugin()
+];
+
+config.module = {
+	loaders: [
+		{include: /\.json$/, loaders: ["json-loader"]},
+		{include: /\.js$/, loaders: ["react-hot", "babel-loader?experimental&optional=runtime"], exclude: /(node_modules|lib)/}
+	]
+};
+
+config.devServer = {
+	publicPath:  "http://localhost:8080/dist/",
+	contentBase: "./static",
+	hot:         true,
+	inline:      true,
+	lazy:        false,
+	quiet:       true,
+	noInfo:      false,
+	headers:     {"Access-Control-Allow-Origin": "*"},
+	stats:       {colors: true}
+};
+
+module.exports = config;