Migrate DiffViewer component from Protect plugin into Components package

projects/js-packages/components/changelog/add-diff-viewer-component

@@ -0,0 +1,4 @@
+Significance: minor
+Type: added
+
+Add DiffViewer component

projects/plugins/protect/src/js/components/diff-viewer/README.md → projects/js-packages/components/components/diff-viewer/README.md

@@ -1,6 +1,6 @@
 # Unified Diff Viewer
 
-Forked over from [Calypso](https://github.com/Automattic/wp-calypso/tree/b7a4a07/client/components/diff-viewer).
+Originally forked over from [Calypso](https://github.com/Automattic/wp-calypso/tree/b7a4a07/client/components/diff-viewer).
 
 This component renders the output of a unified diff (`git diff` or `diff -u`) in a
 visual format recognizable by someone who works with `diff` and comparing files.
@@ -29,9 +29,9 @@ export const CommitView = ( { commitHash, description, diff } ) => (
 ### Additional usage information
 
 The diff output should be the full text produced by the diff command (including newlines).
-Internally this component relies on `jsdiff` to parse the output (the patch) and produce
-the data structure used to display files, hunks (sections of change in the files), and
-the actual lines of change and context.
+Internally this component parses the output (the patch) and produces the data structure 
+used to display files, hunks (sections of change in the files), and the actual lines of 
+change and context.
 
 ```
 diff --git a/circle.yml b/circle.yml

projects/js-packages/components/components/diff-viewer/index.tsx

@@ -0,0 +1,97 @@
+import { Fragment } from 'react';
+import parseFilename from './parse-filename';
+import parsePatch from './parse-patch';
+import styles from './styles.module.scss';
+
+const filename = ( {
+	oldFileName,
+	newFileName,
+}: {
+	oldFileName: string;
+	newFileName: string;
+} ): JSX.Element => {
+	const { prev, next } = parseFilename( oldFileName, newFileName );
+
+	if ( prev.prefix + prev.path === next.prefix + next.path ) {
+		return (
+			<Fragment>
+				{ prev.prefix && (
+					<span className={ styles[ 'diff-viewer__path-prefix' ] }>{ prev.prefix }</span>
+				) }
+				<span className={ styles[ 'diff-viewer__path' ] }>{ prev.path }</span>
+			</Fragment>
+		);
+	}
+
+	return (
+		<Fragment>
+			{ !! prev.prefix && (
+				<span className={ styles[ 'diff-viewer__path-prefix' ] }>{ prev.prefix }</span>
+			) }
+			<span className={ styles[ 'diff-viewer__path' ] }>{ prev.path }</span>
+			{ ' → ' }
+			{ !! next.prefix && (
+				<span className={ styles[ 'diff-viewer__path-prefix' ] }>{ next.prefix }</span>
+			) }
+			<span className={ styles[ 'diff-viewer__path' ] }>{ next.path }</span>
+		</Fragment>
+	);
+};
+
+export const DiffViewer = ( { diff } ) => (
+	<div className={ styles[ 'diff-viewer' ] }>
+		{ parsePatch( diff ).map( ( file, fileIndex ) => (
+			<Fragment key={ fileIndex }>
+				<div key={ `file-${ fileIndex }` } className={ styles[ 'diff-viewer__filename' ] }>
+					{ filename( file ) }
+				</div>
+				<div key={ `diff-${ fileIndex }` } className={ styles[ 'diff-viewer__file' ] }>
+					<div key="left-numbers" className={ styles[ 'diff-viewer__line-numbers' ] }>
+						{ file.hunks.map( ( hunk, hunkIndex ) => {
+							let lineOffset = 0;
+							return hunk.lines.map( ( line, index ) => (
+								<div key={ `${ hunkIndex }-${ index }` }>
+									{ line[ 0 ] === '+' ? '\u00a0' : hunk.oldStart + lineOffset++ }
+								</div>
+							) );
+						} ) }
+					</div>
+					<div key="right-numbers" className={ styles[ 'diff-viewer__line-numbers' ] }>
+						{ file.hunks.map( ( hunk, hunkIndex ) => {
+							let lineOffset = 0;
+							return hunk.lines.map( ( line, index ) => (
+								<div key={ `${ hunkIndex }-${ index }` }>
+									{ line[ 0 ] === '-' ? '\u00a0' : hunk.newStart + lineOffset++ }
+								</div>
+							) );
+						} ) }
+					</div>
+					<div className={ styles[ 'diff-viewer__lines' ] }>
+						{ file.hunks.map( ( hunk, hunkIndex ) =>
+							hunk.lines.map( ( line, index ) => {
+								const output = line.slice( 1 ).replace( /^\s*$/, '\u00a0' );
+								const key = `${ hunkIndex }-${ index }`;
+
+								switch ( line[ 0 ] ) {
+									case ' ':
+										return <div key={ key }>{ output }</div>;
+
+									case '-':
+										return <del key={ key }>{ output }</del>;
+
+									case '+':
+										return <ins key={ key }>{ output }</ins>;
+
+									default:
+										return undefined;
+								}
+							} )
+						) }
+					</div>
+				</div>
+			</Fragment>
+		) ) }
+	</div>
+);
+
+export default DiffViewer;

projects/js-packages/components/components/diff-viewer/parse-filename.ts

@@ -0,0 +1,75 @@
+type ParsedFilename = {
+	prefix: string;
+	path: string;
+};
+
+const decompose = ( path: string ): ParsedFilename => {
+	const lastSlash = path.lastIndexOf( '/' );
+
+	return lastSlash > -1
+		? { prefix: path.slice( 0, lastSlash ), path: path.slice( lastSlash ) }
+		: { prefix: '', path };
+};
+
+/**
+ * Parse the filename from a diff
+ *
+ * Uses a heuristic to return proper file name indicators
+ *
+ * It searches for the longest shared prefix and returns
+ * whatever remains after that. If the paths are identical
+ * it only returns a single filename as we have detected
+ * that the diff compares changes to only one file.
+ *
+ * An exception is made for `a/` and `b/` prefixes often
+ * added by `git` and other utilities to separate the left
+ * from the right when looking at the contents of a single
+ * file over time.
+ *
+ * @param {string} prev - filename of left contents
+ * @param {string} next - filename of right contents
+ *
+ * @return {object} - parsed filename
+ */
+export default function (
+	prev: string,
+	next: string
+): { prev: ParsedFilename; next: ParsedFilename } {
+	// Remove 'a/' and 'b/' prefixes if present
+	const isLikelyPrefixed = prev.startsWith( 'a/' ) && next.startsWith( 'b/' );
+	prev = isLikelyPrefixed ? prev.slice( 2 ) : prev;
+	next = isLikelyPrefixed ? next.slice( 2 ) : next;
+
+	if ( prev === next ) {
+		// Paths are identical
+		const { prefix, path } = decompose( prev );
+		return { prev: { prefix, path }, next: { prefix, path } };
+	}
+
+	// Find longest shared base path ending with a slash
+	const length = Math.max( prev.length, next.length );
+	for ( let i = 0, slash = 0; i < length; i++ ) {
+		if ( prev[ i ] === '/' && next[ i ] === '/' ) {
+			slash = i;
+		}
+
+		if ( prev[ i ] !== next[ i ] ) {
+			return {
+				prev: {
+					prefix: prev.slice( 0, slash ),
+					path: prev.slice( slash ),
+				},
+				next: {
+					prefix: next.slice( 0, slash ),
+					path: next.slice( slash ),
+				},
+			};
+		}
+	}
+
+	// No shared base path
+	return {
+		prev: decompose( prev ),
+		next: decompose( next ),
+	};
+}