Adding a layout pass to SVG image components

text nodes are the only elements that need to be "measured". The
dimensions of all other image components can be determined based on the
dimensions of their children. This adds a pre-rendering pass to work out
dimensions so multiple renders don't need to happen

src/components/Render/index.js

@@ -28,13 +28,21 @@ const render = (data, extraProps) => {
 
 class Render extends React.PureComponent {
   static propTypes = {
-    parsed: PropTypes.object.isRequired,
+    data: PropTypes.object.isRequired,
     onRender: PropTypes.func.isRequired
   }
 
   svgContainer = React.createRef()
 
-  provideSVGData = () => {
+  componentDidMount() {
+    this.provideSVGData();
+  }
+
+  componentDidUpdate() {
+    this.provideSVGData();
+  }
+
+  provideSVGData() {
     if (!this.svgContainer.current) {
       return;
     }
@@ -48,10 +56,10 @@ class Render extends React.PureComponent {
   }
 
   render() {
-    const { parsed } = this.props;
+    const { data } = this.props;
 
     return <div className={ style.render } ref={ this.svgContainer }>
-      { render(parsed, { onReflow: this.provideSVGData }) }
+      { render(data, { onReflow: this.provideSVGData }) }
     </div>;
   }
 }