+ {/* {JSON.stringify(
+ state.store,
+ // tslint:disable-next-line:no-any
+ (_, value: any) => {
+ if (typeof value !== "function") {
+ return value;
+ }
+
+ return `${value.name}()`;
+ },
+ 4
+ )} */}
+
+ {JSON.stringify(state.storeObject, null, 4)} */}
+
+ );
+};
+
+interface State {
+ error?: Error;
+ info?: ErrorInfo;
+}
+
+class App extends React.Component {
+ public state: State = {};
+
+ public componentDidCatch(error: Error, info: ErrorInfo): void {
+ this.setState(() => ({
+ error: error,
+ info: info
+ }));
+ }
+
+ public render(): JSX.Element {
+ const { error } = this.state;
+ if (error != null) {
+ const info = this.state.info!;
+ return (
+ Oops! An error has occurred! Here’s what we know…
+{error.message}
+ {info.componentStack.substr(1)}
+
+
+
+
+ );
+};
diff --git a/src/pretty-diff/components/line-view.tsx b/src/pretty-diff/components/line-view.tsx
new file mode 100644
index 0000000..369fc02
--- /dev/null
+++ b/src/pretty-diff/components/line-view.tsx
@@ -0,0 +1,26 @@
+import React from "react";
+
+function generateSpace(n: number): string {
+ let spaces = "";
+ for (let i = 0; i < n; i++) {
+ spaces += "\u00A0";
+ }
+
+ return spaces;
+}
+
+export interface LineViewProps {
+ indent: number;
+ noNewLine?: boolean;
+ children?: React.ReactNode;
+}
+
+export const LineView = (props: LineViewProps): JSX.Element => {
+ return (
+ <>
+ {generateSpace(props.indent * 4)}
+ {props.children}
+ {props.noNewLine ? null : "\n"}
+
+ );
+};
diff --git a/src/pretty-diff/contracts.ts b/src/pretty-diff/contracts.ts
new file mode 100644
index 0000000..c2e2119
--- /dev/null
+++ b/src/pretty-diff/contracts.ts
@@ -0,0 +1,16 @@
+export interface JsonBaseProps