Getting Download links working

src/components/App/__snapshots__/test.js.snap

@@ -3,22 +3,7 @@
 exports[`App rendering 1`] = `
 <React.Fragment>
   <Translate(Form)
-    downloadUrls={
-      Array [
-        Object {
-          "filename": "image.svg",
-          "label": "Download SVG",
-          "type": "image/svg+xml",
-          "url": "#svg",
-        },
-        Object {
-          "filename": "image.png",
-          "label": "Download PNG",
-          "type": "image/png",
-          "url": "#png",
-        },
-      ]
-    }
+    downloadUrls={Array []}
     onSubmit={[Function]}
     permalinkUrl="#permalink"
     syntaxes={

src/components/App/index.js

@@ -1,4 +1,7 @@
 import React from 'react';
+import PropTypes from 'prop-types';
+import { translate } from 'react-i18next';
+import { debounce } from 'throttle-debounce';
 
 import style from './style.css';
 
@@ -10,19 +13,75 @@ import { syntaxes, demoImage } from 'devel';
 class App extends React.PureComponent {
   state = {
     syntaxes,
-    image: demoImage,
-    downloadUrls: [
-      { url: '#svg', filename: 'image.svg', type: 'image/svg+xml', label: 'Download SVG' },
-      { url: '#png', filename: 'image.png', type: 'image/png', label: 'Download PNG' }
-    ]
+    image: demoImage
   }
 
+  setSvgUrl({ markup }) {
+    try {
+      const type = 'image/svg+xml';
+      const blob = new Blob([markup], { type });
+
+      this.setState({
+        svgUrl: {
+          url: URL.createObjectURL(blob),
+          label: this.props.t('Download SVG'),
+          filename: 'image.svg',
+          type
+        }
+      });
+    }
+    catch (e) {
+      console.error(e); // eslint-disable-line no-console
+    }
+  }
+
+  async setPngUrl({ element, markup }) {
+    try {
+      const type = 'image/png';
+      const canvas = document.createElement('canvas');
+      const context = canvas.getContext('2d');
+      const loader = new Image();
+
+      loader.width = canvas.width = Number(element.getAttribute('width')) * 2;
+      loader.height = canvas.height = Number(element.getAttribute('height')) * 2;
+
+      await new Promise(resolve => {
+        loader.onload = resolve;
+        loader.src = 'data:image/svg+xml,' + encodeURIComponent(markup);
+      });
+
+      context.drawImage(loader, 0, 0, loader.width, loader.height);
+      const blob = await new Promise(resolve => canvas.toBlob(resolve, type));
+
+      this.setState({
+        pngUrl: {
+          url: URL.createObjectURL(blob),
+          label: this.props.t('Download PNG'),
+          filename: 'image.png',
+          type
+        }
+      });
+    }
+    catch (e) {
+      console.error(e); // eslint-disable-line no-console
+    }
+  }
+
+  handleRender = debounce(0, result => {
+    this.setSvgUrl(result);
+    this.setPngUrl(result);
+  })
+
   handleSubmit = ({expr, syntax}) => {
     console.log(syntax, expr); // eslint-disable-line no-console
   }
 
   render() {
-    const { downloadUrls, syntaxes, image } = this.state;
+    const { svgUrl, pngUrl, syntaxes, image } = this.state;
+    const downloadUrls = [
+      svgUrl,
+      pngUrl
+    ].filter(Boolean);
 
     return <React.Fragment>
       <Form
@@ -37,10 +96,15 @@ class App extends React.PureComponent {
         <p>Sample warning message</p>
       </Message>
       <div className={ style.render }>
-        { renderImage(image) }
+        { renderImage(image, { onRender: this.handleRender }) }
       </div>
     </React.Fragment>;
   }
 }
 
-export default App;
+App.propTypes = {
+  t: PropTypes.func
+};
+
+export default translate()(App);
+export { App };

src/components/App/test.js

@@ -3,14 +3,15 @@ jest.mock('components/SVG');
 import React from 'react';
 import { shallow } from 'enzyme';
 
-import App from 'components/App';
+import { App } from 'components/App';
 import renderImage from 'components/SVG';
+import { translate } from '__mocks__/i18n';
 
 describe('App', () => {
   test('rendering', () => {
     renderImage.mockReturnValue('Testing image');
     const component = shallow(
-      <App/>
+      <App t={ translate }/>
     );
     expect(component).toMatchSnapshot();
   });

src/components/SVG/Image.js

@@ -46,7 +46,7 @@ class Image extends Base {
 
     if (onRender && this.publishedMarkup !== markup) {
       this.publishedMarkup = markup;
-      onRender(this.svg.outerHTML);
+      onRender({ element: this.svg, markup: this.svg.outerHTML });
     }
   }
 

src/components/SVG/index.js

@@ -25,17 +25,17 @@ const renderChildren = children => {
 
   return children.length === 1 ?
     renderImage(children[0]) :
-    children.map(renderImage);
+    children.map((node, i) => renderImage(node, { key: i }));
 };
 
-const renderImage = (node, key) => {
+const renderImage = (node, extraProps = {}) => {
   if (typeof node === 'string') {
     return node;
   }
 
   const { type, props, children } = node;
 
-  return React.createElement(nodeTypes[type], { key, ...props }, renderChildren(children));
+  return React.createElement(nodeTypes[type], { ...extraProps, ...props }, renderChildren(children));
 };
 
 export default renderImage;

src/locales/en/translation.yaml

@@ -2,6 +2,8 @@
 An error has occurred: An error has occurred
 Created by <1>Jeff Avallone</1>: Created by <1>Jeff Avallone</1>
 Display: Display
+Download PNG: Download PNG
+Download SVG: Download SVG
 Enter regular expression to display: Enter regular expression to display
 Generated images licensed: 'Generated images licensed: <1><0></0></1>'
 Permalink: Permalink

src/pages/index/__snapshots__/Component.test.js.snap

@@ -38,7 +38,7 @@ exports[`Index page component rendering 1`] = `
       </p>
     </Message>
   </noscript>
-  <App />
+  <Translate(App) />
   <Translate(Footer) />
 </React.Fragment>
 `;