Allow controlled and uncontrolled usage

package.json

@@ -36,7 +36,7 @@
 		"typescript": "^3.2.4"
 	},
 	"dependencies": {
-		"mathlive": ">= 0.32.1 < 1",
+		"mathlive": "file:../mathlive",
 		"react": "^16.7.0",
 		"react-dom": "^16.7.0"
 	}

src/MathFieldComponent.test.tsx

@@ -23,9 +23,11 @@ describe("combineConfig", () => {
             },
         });
 
-        combinedConfig.onContentDidChange!({
+        const mockMathField = {
             $latex: () => "bar",
-        });
+        } as MathField; 
+
+        combinedConfig.onContentDidChange!(mockMathField);
 
         expect(value1).toBe("bar");
         expect(value2).toBe("bar");
@@ -81,6 +83,7 @@ describe("MathFieldComponent", () => {
                 return <MathFieldComponent 
                     mathFieldRef={mf => this.mathField = mf}
                     latex={this.state.value}
+
                 />;
             }
         }
@@ -98,12 +101,6 @@ describe("MathFieldComponent", () => {
 
     test("invalidly created instances throw correct errors", () => {
         const mathFieldComponent = new MathFieldComponent({ latex: "fubar" });
-        try {
-            mathFieldComponent.componentWillReceiveProps({ latex: "baz" });
-            fail("The previous line should have thrown.");
-        } catch (e) {
-            expect(e.message).toBe("Component was not correctly initialized.");
-        }
 
         try {
             mathFieldComponent.componentDidMount();

src/MathFieldComponent.tsx

@@ -3,8 +3,7 @@ import 'mathlive/dist/mathlive.css';
 import * as React from 'react';
 import { makeMathField } from 'mathlive';
 
-export interface Props {
-    latex: string;
+interface BaseProps {
     onChange?: (latex: string) => void;
 
     /** 
@@ -18,6 +17,18 @@ export interface Props {
     mathFieldRef?: (mathfield: MathField) => void;
 }
 
+interface ControlledProps extends BaseProps {
+    latex: string;
+    initialLatex?: undefined;
+}
+
+interface UncontrolledProps extends BaseProps {
+    latex?: undefined;
+    initialLatex: string;
+}
+
+export type Props = ControlledProps | UncontrolledProps;
+
 export function combineConfig(props: Props): MathFieldConfig {
     const combinedConfiguration: MathFieldConfig = {
         ...props.mathFieldConfig
@@ -46,19 +57,21 @@ export class MathFieldComponent extends React.Component<Props> {
     private readonly combinedConfiguration = combineConfig(this.props);
     private mathField: MathField | undefined;
 
-    componentWillReceiveProps(newProps: Props) {
+    componentDidUpdate(prevProps: Props) {
         if (!this.mathField) {
             throw new Error("Component was not correctly initialized.");
         }
 
-        if (newProps.latex !== this.props.latex) {
-            this.mathField.$latex(newProps.latex, { suppressChangeNotifications: true });
+        if (prevProps.latex !== undefined) {
+            if (this.props.latex === undefined) {
+                throw new Error("Cannot change from controlled to uncontrolled state!");
+            }
+            if (this.props.latex !== prevProps.latex) {
+                this.mathField.$latex(this.props.latex, { suppressChangeNotifications: true });
+            }
         }
     }
 
-    /** The domain of react ends here, so it should not render again. */
-    shouldComponentUpdate() { return false; }
-
     render() {
         return <div ref={instance => this.insertElement = instance} />;
     }
@@ -67,9 +80,16 @@ export class MathFieldComponent extends React.Component<Props> {
         if (!this.insertElement) {
             throw new Error("React did apparently not mount the insert point correctly.");
         }
+
+        let initialValue: string;
+        if (this.props.initialLatex !== undefined) {
+            initialValue = this.props.initialLatex;
+        } else {
+            initialValue = this.props.latex;
+        }
 
         this.mathField = makeMathField(this.insertElement, this.combinedConfiguration);
-        this.mathField.$latex(this.props.latex, { suppressChangeNotifications: true });
+        this.mathField.$latex(initialValue, { suppressChangeNotifications: true });
 
         if (this.props.mathFieldRef) {
             this.props.mathFieldRef(this.mathField);