		{
		"name": "fetch-observable",
		"description": "Observable-based Fetch API",
		"version": "0.0.1",
		"version": "1.0.0",
		"license": "BSD-3-Clause",
		@@ -18,19 +18,22 @@ "repository": {
		"scripts": {
		"localhost": "sleep 3; 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'"
		"build": "concurrent --kill-others 'npm run build-full' 'npm run build-min'",
		"build-full": "webpack --verbose --colors --display-error-details --config webpack.umd.js src/lib/fetchObservable.js dist/lib/fetchObservable.js",
		"build-min": "webpack --verbose --colors --display-error-details --config webpack.umd.js -p src/lib/fetchObservable.js dist/lib/fetchObservable.min.js",
		"watch": "webpack --verbose --colors --display-error-details --config webpack.client-watch.js && webpack-dev-server --config webpack.client-watch.js",
		"prepublish": "npm run build"
		},
		"dependencies": {
		"isomorphic-fetch": "2.2.0"
		},
		"devDependencies": {
		"babel": "6.0.15",
		"babel-core": "6.0.20",
		"babel-loader": "6.0.1",
		"babel-preset-es2015": "6.0.15",
		"babel-preset-react": "6.0.15",
		"babel": "6.1.18",
		"babel-core": "6.1.21",
		"babel-loader": "6.1.0",
		"babel-preset-es2015": "6.1.18",
		"babel-preset-react": "6.1.18",
		"concurrently": "0.1.1",
		"isomorphic-fetch": "2.2.0",
		"json-loader": "0.5.3",
		"webpack": "1.12.2",
		"react": "0.14.2",
		"react-dom": "0.14.2",
		"webpack": "1.12.6",
		"webpack-dev-server": "1.12.1"
		@@ -37,0 +40,0 @@ },

README.md

		@@ -1,18 +0,10 @@
		![](http://i.imgur.com/X3JE4Ev.png?1)
		# fetchObservable

		[View live demo](https://edealer.nl/react-transmit/)
		Observable-based [Fetch API](https://github.com/whatwg/fetch) that automatically refreshes data.

		# React Transmit

		[Relay](https://facebook.github.io/relay/)-inspired library based on Promises instead of GraphQL.

		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)

		## Features

		- API similar to the official Relay API, adapted for Promises.
		- Higher-order Component (HoC) syntax is great for functional-style React.
		- Composable Promise-based queries using fragments.
		- Isomorphic architecture supports server-side rendering.
		- Also works with React Native!
		- API similar to the standard Fetch API.
		- Uses Observable syntax from [ES Observable proposal](https://github.com/zenparsing/es-observable).
		- Runs in Node and browsers.

		@@ -23,6 +15,3 @@ ## Installation
		# For web or Node:
		npm install react-transmit

		# For React Native:
		npm install react-transmit-native
		npm install --save fetch-observable
		```
		@@ -32,63 +21,30 @@

		Newsfeed.js (read the comments)

		````js
		import React from "react";
		import Transmit from "react-transmit"; // Import Transmit.
		import Story from "./Story";
		import fetchObservable from "fetch-observable";

		const Newsfeed = React.createClass({
		render () {
		const {stories} = this.props; // Fragments are guaranteed.
		// Creates a single fetchObservable for one or multiple URLs.
		const liveFeed = fetchObservable(
		"http://example.org/live-feed.json",
		{refreshDelay (iteration) { return iteration * 1000; }}
		);

		return stories.map((story) => <Story story={story} />);
		}
		});

		// Higher-order component that will fetch data for the above React component.
		export default Transmit.createContainer(Newsfeed, {
		initialVariables: {
		count: 10 // Default variable.
		// Subscribe-syntax like ES Observables.
		const subscription1 = liveFeed.subscribe({
		next (response) {
		console.dir(response.json());
		},
		fragments: {
		// Fragment names become the Transmit prop names.
		stories ({count}) {
		// This "stories" query returns a Promise composed of 3 other Promises.
		return Promise.all([
		Story.getFragment("story", {storyId: 1}),
		Story.getFragment("story", {storyId: 2}),
		Story.getFragment("story", {storyId: 3})
		]);
		}
		error (error) {
		console.warn(error.stack \|\| error);
		}
		});
		````
		Story.js (read the comments)

		````js
		import React from "react";
		import Transmit from "react-transmit"; // Import Transmit.
		// Multiple subscriptions allowed.
		const subscription2 = liveFeed.subscribe({next () {}});

		const Story = React.createClass({
		render () {
		const {story} = this.props; // Fragments are guaranteed.

		return <p>{story.content}</p>;
		}
		});
		subscription1.unsubscribe();
		subscription2.unsubscribe(); // <-- Observable pauses on 0 subscriptions.

		export default Transmit.createContainer(Story, {
		fragments: {
		// This "story" fragment returns a Fetch API promise.
		story ({storyId}) {
		return fetch("https://some.api/stories/" + storyId).then((res) => res.json());
		}
		}
		});
		subscription1.resubscribe(); // <-- Observable resumes on 1 subscription.
		````

		## Documentation

		See [DOCS.md](https://github.com/RickWong/react-transmit/blob/master/DOCS.md)

		## Community
		@@ -95,0 +51,0 @@

src/lib/Observable.js

		/**
		* Observable.js by zenparsing
		* Observable.js from zenparsing/es-observable.
		*
		* @copyright © zenparsing
		* @homepage https://github.com/zenparsing/es-observable
		* @source https://github.com/zenparsing/es-observable/blob/bed0248bf84818bbda26c051f156e51ab9f7671e/src/Observable.js
		* @file https://github.com/zenparsing/es-observable/blob/bed0248bf84818bbda26c051f156e51ab9f7671e/src/Observable.js
		*/
		@@ -7,0 +8,0 @@

src/lib/fetch-observable.js

fetch-observable - npm Package Compare versions

New alerts

Fixed alerts

Improved metrics

Worsened metrics

Dependency changes