initial release

Author: sergeyt

README.md

@@ -1,2 +1,8 @@
 # diffview
 React component to display unified diffs.
+
+## TODO
+* [x] support unified diff
+* [ ] fix parse-diff to support single patch (e.g. fetched from github) without diff header
+* [ ] split view
+* [ ] github styles

demo/app.js

@@ -2,24 +2,37 @@ import React, { Component } from 'react';
 import { Grid, Row, Col } from 'react-bootstrap';
 import DiffView from '../src';
 import qwest from 'qwest';
+import _ from 'lodash';
 
 const contentLinks = [
+	{
+		url: 'https://api.github.com/repos/reactbits/diffview/commits/0f73f850f7bebfc90ee641501eed7889d6f11b45',
+		headers: {
+			accept: 'application/vnd.github.diff',
+		},
+		label: 'github',
+	},
 	{
 		url: '/content/simple.diff',
-		label: 'Simple',
+		label: 'simple',
 	},
 ];
 
 export default class App extends Component {
 	constructor(props) {
 		super(props);
 		this.state = { content: '' };
-		this.load(contentLinks[0].url);
+		this.load(contentLinks[0]);
 	}
 
-	load(url) {
-		qwest.get(url).then((xhr, content) => {
-			this.setState({ content });
+	load(data) {
+		const options = { cache: true, headers: data.headers };
+		qwest.get(data.url, null, options).then((xhr, content) => {
+			if (_.isObject(content) && _.isArray(content.files)) {
+				this.setState({ content: content.files });
+			} else {
+				this.setState({ content });
+			}
 		});
 	}
 
@@ -30,7 +43,7 @@ export default class App extends Component {
 				href: t.url,
 				onClick: (e) => {
 					e.preventDefault();
-					this.load(t.url);
+					this.load(t);
 					return false;
 				},
 				style: {
@@ -39,12 +52,20 @@ export default class App extends Component {
 			};
 			return <a {...linkProps}>{t.label}</a>;
 		});
+		let content = null;
+		if (_.isArray(this.state.content)) {
+			content = this.state.content.map(file => {
+				return <DiffView key={file.filename} source={file.patch}/>;
+			});
+		} else {
+			content = <DiffView source={this.state.content}/>;
+		}
 		return (
 			<Grid className="app">
 				<Row>
 					<Col md={8}>
 						<div>{items}</div>
-						<DiffView source={this.state.content}/>
+						{content}
 					</Col>
 				</Row>
 			</Grid>

lib/change.js

@@ -9,6 +9,10 @@ var _react = require('react');
 
 var _react2 = _interopRequireDefault(_react);
 
+var _classnames = require('classnames');
+
+var _classnames2 = _interopRequireDefault(_classnames);
+
 var _style = require('./style');
 
 var _style2 = _interopRequireDefault(_style);
@@ -24,16 +28,24 @@ function Change(props) {
 	var ln2 = props.normal ? props.ln2 : props.ln;
 
 	var html = props.content;
+	var contentCell = null;
 
 	try {
 		html = (0, _prismjsPackage2.default)(props.content, props.lang);
+		contentCell = _react2.default.createElement('td', { dangerouslySetInnerHTML: { __html: html } });
 	} catch (e) {
 		console.log('highlight error:', e);
+		contentCell = _react2.default.createElement(
+			'td',
+			null,
+			_react2.default.createElement('pre', { dangerouslySetInnerHTML: { __html: html } })
+		);
 	}
 
+	var className = (0, _classnames2.default)(_style2.default[props.type], _style2.default.change);
 	return _react2.default.createElement(
 		'tr',
-		{ className: props.type },
+		{ className: className },
 		_react2.default.createElement(
 			'td',
 			{ className: _style2.default.nostretch },
@@ -44,10 +56,6 @@ function Change(props) {
 			{ className: _style2.default.nostretch },
 			!props.del && ln2
 		),
-		_react2.default.createElement(
-			'td',
-			null,
-			_react2.default.createElement('pre', { dangerouslySetInnerHTML: { __html: html } })
-		)
+		contentCell
 	);
 }

lib/chunk.js

@@ -22,8 +22,8 @@ var _style2 = _interopRequireDefault(_style);
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
 function Chunk(props) {
-	var changes = props.changes.map(function (change) {
-		return _react2.default.createElement(_change2.default, _extends({}, change, { lang: props.lang }));
+	var changes = props.changes.map(function (change, i) {
+		return _react2.default.createElement(_change2.default, _extends({ key: i }, change, { lang: props.lang }));
 	});
 	return _react2.default.createElement(
 		'tbody',

lib/diffview.js

@@ -41,8 +41,8 @@ function Part(props) {
 	var ext = (0, _path.extname)(fileName);
 	var langs = (0, _langMap.languages)(ext);
 
-	var items = chunks.map(function (chunk) {
-		return _react2.default.createElement(_chunk2.default, _extends({}, chunk, { lang: langs[0] }));
+	var items = chunks.map(function (chunk, i) {
+		return _react2.default.createElement(_chunk2.default, _extends({ key: i }, chunk, { lang: langs[0] }));
 	});
 
 	return _react2.default.createElement(

lib/style.scss

@@ -60,6 +60,13 @@
 	color: #bbb;
 }
 
+.diff .change pre {
+	margin: 0;
+	padding: 0;
+	border: none;
+	background-color: transparent;
+}
+
 .diff .add {
 	background-color: #dbffdb;
 	font-weight: 600;

package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-diffview",
-  "version": "0.0.1",
+  "version": "0.1.0",
   "description": "React component to display unified diffs.",
   "main": "lib/index.js",
   "scripts": {
@@ -29,7 +29,7 @@
     "lang-map": "^0.4.0",
     "lodash": "^4.0.0",
     "parse-diff": "^0.3.2",
-    "prismjs-package": "^0.6.1",
+    "prismjs-package": "^0.6.2",
     "react": "^0.14.6",
     "react-dom": "^0.14.6"
   },

src/change.js

@@ -1,4 +1,5 @@
 import React from 'react';
+import classNames from 'classnames';
 import style from './style';
 import highlight from 'prismjs-package';
 
@@ -7,20 +8,26 @@ export default function Change(props) {
 	const ln2 = props.normal ? props.ln2 : props.ln;
 
 	let html = props.content;
+	let contentCell = null;
 
 	try {
 		html = highlight(props.content, props.lang);
+		contentCell = <td dangerouslySetInnerHTML={{ __html: html }}/>;
 	} catch (e) {
 		console.log('highlight error:', e);
+		contentCell = (
+			<td>
+				<pre dangerouslySetInnerHTML={{ __html: html }}/>
+			</td>
+		);
 	}
 
+	const className = classNames(style[props.type], style.change);
 	return (
-		<tr className={props.type}>
+		<tr className={className}>
 			<td className={style.nostretch}>{!props.add && ln1}</td>
 			<td className={style.nostretch}>{!props.del && ln2}</td>
-			<td>
-				<pre dangerouslySetInnerHTML={{ __html: html }} />
-			</td>
+			{contentCell}
 		</tr>
 	);
 }

src/chunk.js

@@ -3,8 +3,8 @@ import Change from './change';
 import style from './style';
 
 export default function Chunk(props) {
-	const changes = props.changes.map(change => {
-		return <Change {...change} lang={props.lang}/>;
+	const changes = props.changes.map((change, i) => {
+		return <Change key={i} {...change} lang={props.lang}/>;
 	});
 	return (
 		<tbody>

src/diffview.js

@@ -12,8 +12,8 @@ function Part(props) {
 	const ext = extname(fileName);
 	const langs = languages(ext);
 
-	const items = chunks.map(chunk => {
-		return <Chunk {...chunk} lang={langs[0]}/>;
+	const items = chunks.map((chunk, i) => {
+		return <Chunk key={i} {...chunk} lang={langs[0]}/>;
 	});
 
 	return (