CodeOutput - Add diffing editor to show initial vs current

src/components/CodeOutput/CodeOutput.tsx

@@ -1,40 +1,43 @@
 import React from "react";
 import { connect } from "react-redux";
 import * as ts from "typescript";
+import ReactDiffViewer from "react-diff-viewer";
 
 import { AppState } from "../../store";
+import { getCodeString } from "../../utils";
 
 interface CodeOutputProps {
-  sourceFile?: ts.SourceFile;
+  inititalSourceFile?: ts.SourceFile;
+  currentSourceFile?: ts.SourceFile;
 }
 
-function CodeOutput(props: CodeOutputProps) {
-  const { sourceFile } = props;
-  if (sourceFile === undefined) {
+function CodeOutputDiff(props: CodeOutputProps) {
+  const { inititalSourceFile, currentSourceFile } = props;
+
+  if (inititalSourceFile === undefined || currentSourceFile === undefined) {
     return null;
   }
 
-  const printer = ts.createPrinter();
-  const codeString = printer.printFile(sourceFile);
+  const initialCodeString = getCodeString(inititalSourceFile);
+  const currentCodeString = getCodeString(currentSourceFile);
 
-  return <div>{codeString}</div>;
+  return (
+    <ReactDiffViewer
+      oldValue={initialCodeString}
+      newValue={currentCodeString}
+      splitView={true}
+      showDiffOnly={false}
+    />
+  );
 }
 
 type CodeOutputStateProps = CodeOutputProps;
 
-const mapStateToPropsForInitial = (state: AppState): CodeOutputStateProps => ({
-  sourceFile: state.sourceFiles.inititalSourceFile
-});
-const mapStateToPropsForCurrent = (state: AppState): CodeOutputStateProps => ({
-  sourceFile: state.sourceFiles.currentSourceFile
+const mapStateToProps = (state: AppState): CodeOutputStateProps => ({
+  ...state.sourceFiles
 });
 
-const CodeOutputForInitial = connect(mapStateToPropsForInitial)(CodeOutput);
-const CodeOutputForCurrent = connect(mapStateToPropsForCurrent)(CodeOutput);
+const CodeOutputDiffConnected = connect(mapStateToProps)(CodeOutputDiff);
+export default CodeOutputDiffConnected;
 
-export {
-  CodeOutputForInitial,
-  CodeOutputForCurrent,
-  CodeOutput as CodeOutputUnconnected,
-  CodeOutputProps
-};
+export { CodeOutputDiff as CodeOutputUnconnected, CodeOutputProps };

src/components/CodeOutput/index.tsx

@@ -1 +1,7 @@
-export * from "./CodeOutput";
+import CodeOutputDiff, {
+  CodeOutputUnconnected,
+  CodeOutputProps
+} from "./CodeOutput";
+
+export default CodeOutputDiff;
+export { CodeOutputUnconnected, CodeOutputProps };

src/index.tsx

@@ -7,10 +7,7 @@ import { bindActionCreators } from "redux";
 import { Provider } from "react-redux";
 
 import ASTOutline from "./components/ASTOutline";
-import {
-  CodeOutputForInitial,
-  CodeOutputForCurrent
-} from "./components/CodeOutput";
+import CodeOutputDiff from "./components/CodeOutput";
 
 import configureStore from "./store";
 import { initSourceFile, updateSourceFile } from "./store/sourceFiles/actions";
@@ -22,12 +19,8 @@ const store = configureStore();
 export function ASTVisualizer() {
   return (
     <Provider store={store}>
-      Initial:
-      <br />
-      <CodeOutputForInitial />
-      Current:
-      <br />
-      <CodeOutputForCurrent />
+      Initial vs Current:
+      <CodeOutputDiff />
       <ASTOutline />
     </Provider>
   );

src/utils.ts

@@ -41,3 +41,15 @@ export class ObjectHash {
     return returnID;
   }
 }
+
+export function getCodeString(sourceFile?: ts.SourceFile) {
+  if (sourceFile === undefined) {
+    return undefined;
+  }
+
+  const printer = ts.createPrinter();
+  const codeString = printer.printFile(sourceFile);
+
+  return codeString;
+}
+