Send encoded images to Renderer API

Author: pinanks

commands/storybook.js

@@ -59,7 +59,7 @@ async function storybook(url, options) {
                 }
             }
             // Capture DoM of every story and send it to renderer API
-            sendDoM(stories, storybookConfig, options);
+            sendDoM(url, stories, storybookConfig, options);
         })
         .catch(function (error) {
             if (error.response) {

commands/utils/dom.js

@@ -1,9 +1,11 @@
 const axios = require('axios');
 const fs = require('fs');
+const path = require('path')
 const formData = require('form-data');
-var { constants } = require('.//constants');
+const { JSDOM } = require("jsdom");
+var { constants } = require('./constants');
 
-async function sendDoM(stories, storybookConfig, options) {
+async function sendDoM(storybookUrl, stories, storybookConfig, options) {
     const createBrowser = require('browserless')
     const browser = createBrowser()
 
@@ -18,8 +20,16 @@ async function sendDoM(stories, storybookConfig, options) {
         const browserless = await browser.createContext()
         const html = await browserless.html(storyInfo.url)
 
+        dom = new JSDOM(html);
+        for(element of dom.window.document.querySelectorAll('img')) {
+            let image = new URL(element.getAttribute('src'), storybookUrl).href;
+            let format = path.extname(image).replace(/^./, '');
+            format = format === 'svg' ? 'svg+xml' : format
+            let imageAsBase64 = await getBase64(image);
+            element.setAttribute('src', 'data:image/'+format+';base64,'+imageAsBase64);
+        }
         try {
-            fs.writeFileSync('doms/' + storyId + '.html', html);
+            fs.writeFileSync('doms/' + storyId + '.html', dom.serialize());
         } catch (err) {
             console.error(err);
         }
@@ -63,4 +73,16 @@ async function sendDoM(stories, storybookConfig, options) {
     });
 };
 
+function getBase64(url) {
+    return axios.get(url, {
+            responseType: "text",
+            responseEncoding: "base64",
+        })
+        .then(response => response.data)
+        .catch(function (error) {
+            console.log('[smartui] Error: ', error.message);
+            process.exit(0);
+        });
+}
+
 module.exports = { sendDoM };