Finished example app.

README.md

@@ -1,46 +1,36 @@
-![](http://i.imgur.com/wZNNrl4.png?1)
+![](http://i.imgur.com/ODCeNP2.png?1)
+
+[View live demo](https://edealer.nl/react-transmit/) 
 
 # React Transmit
 
-A Promising Relay-ish library without the GraphQL.
+Relay-inspired library based on Promises instead of GraphQL.
 
-Inspired by: http://facebook.github.io/react/blog/2015/03/19/building-the-facebook-news-feed-with-relay.html
+Inspired by: [Building the Facebook Newsfeed with Relay](http://facebook.github.io/react/blog/2015/03/19/building-the-facebook-news-feed-with-relay.html) (React blog)
 
 ## Installation
 
  npm install react-transmit
 
-## Run the example
-
-````
-git clone https://github.com/RickWong/react-transmit.git
-cd react-transmit
-
-npm install -g concurrently webpack webpack-dev-server
-npm install
-npm run watch # automatically opens browser
-````
-
 ## Usage
 
 ````js
+import React from "react";
+import Transmit from "react-transmit";
+
 const Newsfeed = React.createClass(...);
 
 export default Transmit.createContainer(Newsfeed, {
  queryParams: {
- count: 1
+ count: 50,
+ page: 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);
- });
+ stories (queryParams, prevProps) {
+ // All Transmit queries return a Promise.
+ return Promise.all([
+ Story.getQuery("story");
+ ]);
  }
  }
 });

package.json

@@ -1,7 +1,7 @@
 {
  "name": "react-transmit",
- "description": "Relay-ish library without the GraphQL.",
- "version": "0.9.0",
+ "description": "Relay-inspired library based on Promises instead of GraphQL.",
+ "version": "1.0.0",
  "license": "BSD-3",
  "repository": {
  "type": "git",
@@ -22,8 +22,9 @@
  "watch": "concurrent --kill-others 'npm run watch-client' 'npm run localhost'"
  },
  "dependencies": {
- "react": "0.13.1",
- "react-inline-css": "1.1.1"
+ "react": ">= 0.12.0",
+ "react-inline-css": "1.1.1",
+ "isomorphic-fetch": "2.0.0"
  },
  "devDependencies": {
  "babel-core": "4.7.16",

src/example.js

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

src/example/Main.js

@@ -0,0 +1,74 @@
+import React from "react";
+import InlineCss from "react-inline-css";
+import Newsfeed from "example/Newsfeed";
+
+/**
+ * Nothing special happening in this file, really. See Newsfeed.js.
+ *
+ * @class Main
+ */
+export default React.createClass({
+ statics: {
+ /**
+ * Style this example app like Facebook.
+ */
+ css: () => `
+ body {
+ background: #E9EAED;
+ box-sizing: border-box;
+ font-family: Helvetica, sans-serif;
+ }
+ & .github {
+ position: absolute;
+ top: 0;
+ right: 0;
+ border: 0;
+ }
+ & {
+ width: 500px;
+ margin: 10px auto;
+ }
+ & header {
+ padding: 20px 30px;
+ background: #fff;
+ border: 1px solid #e1e1e1;
+ border-radius: 3px 3px 0 0;
+ font-size: 14px;
+ }
+ & header span, & header span a {
+ color: #6d84b4;
+ font-size: 13px;
+ }
+ & a {
+ color: #3B5998;
+ text-decoration: none;
+ }
+ & a:hover {
+ text-decoration: underline;
+ }`
+ },
+ render () {
+ const repositoryUrl = "https://github.com/RickWong/react-transmit";
+
+ return (
+ <InlineCss stylesheet={this.constructor.css()} namespace="Main">
+ <a className="github" href={repositoryUrl}>
+ <img src="https://camo.githubusercontent.com/365986a132ccd6a44c23a9169022c0b5c890c387/68747470733a2f2f73332e616d617a6f6e6177732e636f6d2f6769746875622f726962626f6e732f666f726b6d655f72696768745f7265645f6161303030302e706e67" alt="Fork me on GitHub" />
+ </a>
+ <header>
+ <h1>
+ <a href={repositoryUrl}>React Transmit</a>
+ </h1>
+ <p>
+ Relay-inspired library based on Promises instead of GraphQL.
+ </p>
+ <span>
+ <a href={repositoryUrl + "/stargazers"}>Like</a><span> · </span>
+ <a href={"https://twitter.com/intent/tweet?text=React%20Transmit:%20a%20Relay-inspired+library+based+on+Promises+instead+of+GraphQL.%20" + repositoryUrl + "%20@rygu%20@reactjs"} target="_blank">Share</a>
+ </span>
+ </header>
+ <Newsfeed repositoryUrl={repositoryUrl} />
+ </InlineCss>
+ );
+ }
+});

src/example/Newsfeed.js

@@ -1,3 +1,4 @@
+import _fetch from "isomorphic-fetch";
 import React from "react";
 import InlineCss from "react-inline-css";
 import Transmit from "lib/react-transmit";
@@ -9,84 +10,77 @@ import Story from "example/Story";
 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});
+
+ this.props.setQueryParams({
+ page: this.props.queryParams.page + 1
+ });
  },
  render () {
- const repositoryUrl = "https://github.com/RickWong/react-transmit";
- const stories = this.props.stories || [];
+ // This is a normal property.
+ const repositoryUrl = this.props.repositoryUrl;
+
+ /**
+ * This is a Transmit property.
+ */
+ const stories = this.props.stories;
+
+ /**
+ * Unlike with Relay, Transmit properties aren't guaranteed.
+ */
+ if (!stories) {
+ return null;
+ }
 
  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} />)}
+ {stories.map((story, i) => {
+ return <Story story={story} key={i} />;
+ })}
  </main>
  <footer>
- <a href="#" onClick={this.onLoadMore}>
+ <button onMouseDown={this.onLoadMore}>
  Load more
- </a>
+ </button>
  </footer>
  </InlineCss>
  );
  }
 });
 
+/**
+ * Like Relay, export a Transmit container instead of the React component.
+ */
 export default Transmit.createContainer(Newsfeed, {
  queryParams: {
- count: 1
+ count: 50,
+ page: 1
  },
  queries: {
- stories (queryParams) {
- return new Promise(function (resolve, reject) {
- var storyPromises = [];
+ stories (queryParams, prevProps) {
+ const url = `https://api.github.com/repos/RickWong/react-transmit/stargazers?per_page=${queryParams.count}&page=${queryParams.page}`;
+
+ return fetch(url).then((response) => {
+ return response.json();
+ }).then((stargazers) => {
+ let promises = [];
 
- for (var i=0; i<queryParams.count; i++) {
- storyPromises.push(Story.getQuery("story"));
+ if (prevProps.stories) {
+ promises = prevProps.stories.map((story) => Promise.resolve(story));
  }
 
- Promise.all(storyPromises).then(resolve);
+ return Promise.all(promises.concat(
+ stargazers.map((stargazer) => {
+ return Story.getQuery("story", {stargazer});
+ })
+ ));
  });
  }
  }

src/example/Story.js

@@ -9,62 +9,66 @@ const Story = React.createClass({
  statics: {
  css: () => `
  & {
- padding: 12px;
- background: #fff;
- border: 1px solid #e5e5e5;
- border-radius: 3px;
- margin-bottom: 8px;
+ padding: 6px 12px;
+ border: 1px solid #e1e1e1;
+ border-width: 0 1px;
+ background: #f6f7f8;
+ clear: both;
+ font-size: 12px;
+ }
+ &:last-child {
+ border-radius: 0 0 3px 3px;
  }
  & img {
  float: left;
- border: 1px solid #e5e5e5;
- margin: 0 6px 12px 0;
+ border: 1px solid #e1e1e1;
+ margin-right: 6px;
+ width: 20px;
+ height: 20px;
  }
  & h4 {
- color: #3b5998;
- margin: 5px 0;
- }
- & span {
- color: #bbb;
- font-size: 12px;
- }
- & div {
- clear: both;
+ display: inline-block;
+ margin: 4px 0;
  }`
  },
  render() {
- var story = this.props.story;
+ const story = this.props.story;
 
+ /**
+ * Unlike with Relay, Transmit properties aren't guaranteed.
+ */
  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>
+ <img src={story.user.profile_picture.uri} />
+ <h4><a href={story.user.url} target="_blank">{story.user.name}</a></h4>
+ <span>{story.text}</span>
  </InlineCss>
  );
  }
 });
 
+/**
+ * Like Relay, export a Transmit container instead of the React component.
+ */
 export default Transmit.createContainer(Story, {
  queries: {
- story (queryParams) {
+ story (queryParams, prevProps) {
+
  return new Promise(function (resolve, reject) {
- var story = {
- author: {
- name: "Rick Wong",
+ resolve({
+ user: {
+ name: queryParams.stargazer.login,
+ url: queryParams.stargazer.url,
  profile_picture: {
- uri: "https://avatars3.githubusercontent.com/u/40102?v=3&s=40"
+ uri: `${queryParams.stargazer.avatar_url}&s=20`
  }
  },
- text: "React Transmit. A Relay-ish library."
- };
-
- resolve(story);
+ text: " likes this."
+ });
  });
  }
  }