Added some different output types

dist/notebooklab.js

@@ -213,11 +213,30 @@ var _index = __webpack_require__(11);
 var _index2 = _interopRequireDefault(_index);
+var _index3 = __webpack_require__(21);
+
+var _index4 = _interopRequireDefault(_index3);
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+
 exports.default = {
   components: {
-    'code-cell': _index2.default
+    'code-cell': _index2.default,
+    'output-cell': _index4.default
   },
   props: {
     cell: {
@@ -234,29 +253,9 @@ exports.default = {
     },
     output: function output() {
       return this.cell.outputs[0];
-    },
-    outputText: function outputText() {
-      if (this.output.text) {
-        return this.output.text.join('');
-      } else {
-        return this.output.data[Object.keys(this.output.data)[0]].join('');
-      }
     }
   }
-}; //
-//
-//
-//
-//
-//
-//
-//
-//
-//
-//
-//
-//
-//
+};
 /***/ }),
 /* 4 */
@@ -1892,11 +1891,10 @@ module.exports={render:function (){var _vm=this;var _h=_vm.$createElement;var _c
       "raw-code": _vm.rawInputCode,
       "count": _vm.cell.execution_count
     }
-  }), _vm._v(" "), (_vm.hasOutput) ? _c('code-cell', {
+  }), _vm._v(" "), (_vm.hasOutput) ? _c('output-cell', {
     attrs: {
-      "type": "output",
-      "raw-code": _vm.outputText,
-      "count": _vm.output.execution_count
+      "count": _vm.cell.execution_count,
+      "output": _vm.output
     }
   }) : _vm._e()], 1)
 },staticRenderFns: []}
@@ -1984,7 +1982,7 @@ module.exports={render:function (){var _vm=this;var _h=_vm.$createElement;var _c
     }
   }), _vm._v(" "), _c('pre', {
     domProps: {
-      "innerHTML": _vm._s(_vm.code)
+      "textContent": _vm._s(_vm.code)
     }
   })], 1)
 },staticRenderFns: []}
@@ -2038,6 +2036,348 @@ module.exports = {
   }
 };
+/***/ }),
+/* 20 */
+/***/ (function(module, exports, __webpack_require__) {
+
+"use strict";
+
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+
+var _typeof = typeof Symbol === "function" && typeof Symbol.iterator === "symbol" ? function (obj) { return typeof obj; } : function (obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }; //
+//
+//
+//
+//
+//
+//
+//
+
+var _index = __webpack_require__(11);
+
+var _index2 = _interopRequireDefault(_index);
+
+var _html = __webpack_require__(27);
+
+var _html2 = _interopRequireDefault(_html);
+
+var _image = __webpack_require__(24);
+
+var _image2 = _interopRequireDefault(_image);
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+exports.default = {
+  props: {
+    count: {
+      type: Number,
+      required: false,
+      default: false
+    },
+    output: {
+      type: Object,
+      requred: true
+    }
+  },
+  components: {
+    'code-cell': _index2.default,
+    'html-output': _html2.default,
+    'image-output': _image2.default
+  },
+  data: function data() {
+    return {
+      outputType: ''
+    };
+  },
+
+  computed: {
+    componentName: function componentName() {
+      if (this.output.text) {
+        return 'code-cell';
+      } else if (this.output.data['image/png']) {
+        this.outputType = 'image/png';
+
+        return 'image-output';
+      } else if (this.output.data['text/html']) {
+        this.outputType = 'text/html';
+
+        return 'html-output';
+      } else if (this.output.data['image/svg+xml']) {
+        this.outputType = 'image/svg+xml';
+
+        return 'html-output';
+      } else {
+        this.outputType = 'text/plain';
+
+        return 'code-cell';
+      }
+    },
+    rawCode: function rawCode() {
+      if (this.output.text) {
+        return this.output.text.join('');
+      } else {
+        return this.dataForType(this.outputType);
+      }
+    }
+  },
+  methods: {
+    dataForType: function dataForType(type) {
+      var data = this.output.data[type];
+
+      if ((typeof data === 'undefined' ? 'undefined' : _typeof(data)) === 'object') {
+        data = data.join('');
+      }
+
+      return data;
+    }
+  }
+};
+
+/***/ }),
+/* 21 */
+/***/ (function(module, exports, __webpack_require__) {
+
+var Component = __webpack_require__(0)(
+  /* script */
+  __webpack_require__(20),
+  /* template */
+  __webpack_require__(22),
+  /* scopeId */
+  null,
+  /* cssModules */
+  null
+)
+Component.options.__file = "/Users/phil/Projects/notebooklab/src/cells/output/index.vue"
+if (Component.esModule && Object.keys(Component.esModule).some(function (key) {return key !== "default" && key !== "__esModule"})) {console.error("named exports are not supported in *.vue files.")}
+if (Component.options.functional) {console.error("[vue-loader] index.vue: functional components are not supported with templates, they should use render functions.")}
+
+/* hot reload */
+if (false) {(function () {
+  var hotAPI = require("vue-hot-reload-api")
+  hotAPI.install(require("vue"), false)
+  if (!hotAPI.compatible) return
+  module.hot.accept()
+  if (!module.hot.data) {
+    hotAPI.createRecord("data-v-0dec7838", Component.options)
+  } else {
+    hotAPI.reload("data-v-0dec7838", Component.options)
+  }
+})()}
+
+module.exports = Component.exports
+
+
+/***/ }),
+/* 22 */
+/***/ (function(module, exports, __webpack_require__) {
+
+module.exports={render:function (){var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;
+  return _c(_vm.componentName, {
+    tag: "component",
+    attrs: {
+      "type": "output",
+      "outputType": _vm.outputType,
+      "count": _vm.count,
+      "raw-code": _vm.rawCode
+    }
+  })
+},staticRenderFns: []}
+module.exports.render._withStripped = true
+if (false) {
+  module.hot.accept()
+  if (module.hot.data) {
+     require("vue-hot-reload-api").rerender("data-v-0dec7838", module.exports)
+  }
+}
+
+/***/ }),
+/* 23 */
+/***/ (function(module, exports, __webpack_require__) {
+
+"use strict";
+
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+
+var _prompt = __webpack_require__(1);
+
+var _prompt2 = _interopRequireDefault(_prompt);
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+exports.default = {
+  props: {
+    outputType: {
+      type: String,
+      required: true
+    },
+    rawCode: {
+      type: String,
+      required: true
+    }
+  },
+  components: {
+    'prompt': _prompt2.default
+  }
+}; //
+//
+//
+//
+//
+//
+//
+//
+
+/***/ }),
+/* 24 */
+/***/ (function(module, exports, __webpack_require__) {
+
+var Component = __webpack_require__(0)(
+  /* script */
+  __webpack_require__(23),
+  /* template */
+  __webpack_require__(25),
+  /* scopeId */
+  null,
+  /* cssModules */
+  null
+)
+Component.options.__file = "/Users/phil/Projects/notebooklab/src/cells/output/image.vue"
+if (Component.esModule && Object.keys(Component.esModule).some(function (key) {return key !== "default" && key !== "__esModule"})) {console.error("named exports are not supported in *.vue files.")}
+if (Component.options.functional) {console.error("[vue-loader] image.vue: functional components are not supported with templates, they should use render functions.")}
+
+/* hot reload */
+if (false) {(function () {
+  var hotAPI = require("vue-hot-reload-api")
+  hotAPI.install(require("vue"), false)
+  if (!hotAPI.compatible) return
+  module.hot.accept()
+  if (!module.hot.data) {
+    hotAPI.createRecord("data-v-09b68c41", Component.options)
+  } else {
+    hotAPI.reload("data-v-09b68c41", Component.options)
+  }
+})()}
+
+module.exports = Component.exports
+
+
+/***/ }),
+/* 25 */
+/***/ (function(module, exports, __webpack_require__) {
+
+module.exports={render:function (){var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;
+  return _c('div', {
+    staticClass: "output"
+  }, [_c('prompt'), _vm._v(" "), _c('img', {
+    attrs: {
+      "src": 'data:' + _vm.outputType + ';base64,' + _vm.rawCode
+    }
+  })], 1)
+},staticRenderFns: []}
+module.exports.render._withStripped = true
+if (false) {
+  module.hot.accept()
+  if (module.hot.data) {
+     require("vue-hot-reload-api").rerender("data-v-09b68c41", module.exports)
+  }
+}
+
+/***/ }),
+/* 26 */
+/***/ (function(module, exports, __webpack_require__) {
+
+"use strict";
+
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+
+var _prompt = __webpack_require__(1);
+
+var _prompt2 = _interopRequireDefault(_prompt);
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+exports.default = {
+  props: {
+    rawCode: {
+      type: String,
+      required: true
+    }
+  },
+  components: {
+    'prompt': _prompt2.default
+  }
+}; //
+//
+//
+//
+//
+//
+//
+
+/***/ }),
+/* 27 */
+/***/ (function(module, exports, __webpack_require__) {
+
+var Component = __webpack_require__(0)(
+  /* script */
+  __webpack_require__(26),
+  /* template */
+  __webpack_require__(28),
+  /* scopeId */
+  null,
+  /* cssModules */
+  null
+)
+Component.options.__file = "/Users/phil/Projects/notebooklab/src/cells/output/html.vue"
+if (Component.esModule && Object.keys(Component.esModule).some(function (key) {return key !== "default" && key !== "__esModule"})) {console.error("named exports are not supported in *.vue files.")}
+if (Component.options.functional) {console.error("[vue-loader] html.vue: functional components are not supported with templates, they should use render functions.")}
+
+/* hot reload */
+if (false) {(function () {
+  var hotAPI = require("vue-hot-reload-api")
+  hotAPI.install(require("vue"), false)
+  if (!hotAPI.compatible) return
+  module.hot.accept()
+  if (!module.hot.data) {
+    hotAPI.createRecord("data-v-48ada535", Component.options)
+  } else {
+    hotAPI.reload("data-v-48ada535", Component.options)
+  }
+})()}
+
+module.exports = Component.exports
+
+
+/***/ }),
+/* 28 */
+/***/ (function(module, exports, __webpack_require__) {
+
+module.exports={render:function (){var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;
+  return _c('div', {
+    staticClass: "output"
+  }, [_c('prompt'), _vm._v(" "), _c('div', {
+    domProps: {
+      "innerHTML": _vm._s(_vm.rawCode)
+    }
+  })], 1)
+},staticRenderFns: []}
+module.exports.render._withStripped = true
+if (false) {
+  module.hot.accept()
+  if (module.hot.data) {
+     require("vue-hot-reload-api").rerender("data-v-48ada535", module.exports)
+  }
+}
+
 /***/ })
 /******/ ]);
 });
\ No newline at end of file

fixtures/file.json

@@ -29,6 +29,85 @@
       "source": [
         "console.log('test')"
       ]
+    },
+    {
+      "cell_type": "code",
+      "execution_count": 1,
+      "outputs": [
+        {
+          "data": {
+            "image/png": "iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVR42mNkYPhfDwAChwGA60e6kgAAAABJRU5ErkJggg=="
+          }
+        }
+      ],
+      "source": [
+        "console.log('test')"
+      ]
+    },
+    {
+      "cell_type": "code",
+      "execution_count": 1,
+      "outputs": [
+        {
+          "data": {
+            "text/html": [
+              "<p>",
+              "test",
+              "</p>"
+            ]
+          }
+        }
+      ],
+      "source": [
+        "console.log('test')"
+      ]
+    },
+    {
+      "cell_type": "code",
+      "execution_count": 1,
+      "outputs": [
+        {
+          "data": {
+            "image/svg+xml": "<svg></svg>"
+          }
+        }
+      ],
+      "source": [
+        "console.log('test')"
+      ]
+    },
+    {
+      "cell_type": "code",
+      "execution_count": 1,
+      "outputs": [
+        {
+          "data": {
+            "text/plain": [
+              "testing"
+            ]
+          }
+        }
+      ],
+      "source": [
+        "console.log('test')"
+      ]
+    },
+    {
+      "cell_type": "code",
+      "execution_count": 1,
+      "outputs": [
+        {
+          "data": {
+            "random/type": "a",
+            "text/plain": [
+              "testing"
+            ]
+          }
+        }
+      ],
+      "source": [
+        "console.log('test')"
+      ]
     }
   ]
 }

package.json

@@ -5,6 +5,7 @@
   "main": "index.js",
   "scripts": {
     "test": "jest --no-cache",
+    "test-run": "jest --no-cache --watch",
     "webpack-run": "webpack --watch",
     "webpack": "webpack"
   },

src/__tests__/index.test.js

@@ -41,7 +41,7 @@ describe('Notebook component', () => {
     });
     test('renders cells', () => {
-      expect(vm.$el.querySelectorAll('.cell').length).toBe(3);
+      expect(vm.$el.querySelectorAll('.cell').length).toBe(json.cells.length);
     });
     test('renders markdown cell', () => {

src/cells/__tests__/code.test.js

@@ -43,5 +43,9 @@ describe('Code component', () => {
     test('does not render output prompt', () => {
       expect(vm.$el.querySelectorAll('.prompt').length).toBe(2);
     });
+
+    test('renders output cell', () => {
+      expect(vm.$el.querySelector('.output')).toBeDefined();
+    });
   });
 });

src/cells/code.vue

@@ -4,20 +4,21 @@
       type="input"
       :raw-code="rawInputCode"
       :count="cell.execution_count" />
-    <code-cell
+    <output-cell
       v-if="hasOutput"
-      type="output"
-      :raw-code="outputText"
-      :count="output.execution_count" />
+      :count="cell.execution_count"
+      :output="output" />
   </div>
 </template>
 <script>
 import CodeCell from './code/index.vue';
+import OutputCell from './output/index.vue';
 export default {
   components: {
     'code-cell': CodeCell,
+    'output-cell': OutputCell,
   },
   props: {
     cell: {
@@ -35,13 +36,6 @@ export default {
     output() {
       return this.cell.outputs[0];
     },
-    outputText() {
-      if (this.output.text) {
-        return this.output.text.join('');
-      } else {
-        return this.output.data[Object.keys(this.output.data)[0]].join('');
-      }
-    },
   },
 };
 </script>

src/cells/code/index.vue

@@ -3,7 +3,7 @@
     <prompt
       :type="promptType"
       :count="count" />
-    <pre v-html="code"></pre>
+    <pre v-text="code"></pre>
   </div>
 </template>

src/cells/output/__tests__/index.test.js

+import Vue from 'vue';
+import json from '../../../../fixtures/file.json';
+import CodeComponent from '../index';
+
+const Component = Vue.extend(CodeComponent);
+
+describe('Output component', () => {
+  let vm;
+
+  const createComponent = (output) => {
+    vm = new Component({
+      propsData: {
+        output: output,
+        count: 1,
+      },
+    });
+    vm.$mount();
+  }
+
+  describe('text output', () => {
+    beforeEach((done) => {
+      createComponent(json.cells[2].outputs[0]);
+
+      setTimeout(() => {
+        done();
+      });
+    });
+
+    test('renders as plain text', () => {
+      expect(vm.$el.querySelector('pre')).not.toBeNull();
+    });
+
+    test('renders promot', () => {
+      expect(vm.$el.querySelector('.prompt span')).not.toBeNull();
+    });
+  });
+
+  describe('image output', () => {
+    beforeEach((done) => {
+      createComponent(json.cells[3].outputs[0]);
+
+      setTimeout(() => {
+        done();
+      });
+    });
+
+    test('renders as an image', () => {
+      expect(vm.$el.querySelector('img')).not.toBeNull();
+    });
+
+    test('does not render the prompt', () => {
+      expect(vm.$el.querySelector('.prompt span')).toBeNull();
+    });
+  });
+
+  describe('html output', () => {
+    beforeEach((done) => {
+      createComponent(json.cells[4].outputs[0]);
+
+      setTimeout(() => {
+        done();
+      });
+    });
+
+    test('renders raw HTML', () => {
+      expect(vm.$el.querySelector('p')).not.toBeNull();
+      expect(vm.$el.textContent.trim()).toBe('test');
+    });
+
+    test('does not render the prompt', () => {
+      expect(vm.$el.querySelector('.prompt span')).toBeNull();
+    });
+  });
+
+  describe('svg output', () => {
+    beforeEach((done) => {
+      createComponent(json.cells[5].outputs[0]);
+
+      setTimeout(() => {
+        done();
+      });
+    });
+
+    test('renders as an svg', () => {
+      expect(vm.$el.querySelector('svg')).not.toBeNull();
+    });
+
+    test('does not render the prompt', () => {
+      expect(vm.$el.querySelector('.prompt span')).toBeNull();
+    });
+  });
+
+  describe('default to plain text', () => {
+    beforeEach((done) => {
+      createComponent(json.cells[6].outputs[0]);
+
+      setTimeout(() => {
+        done();
+      });
+    });
+
+    test('renders as plain text', () => {
+      expect(vm.$el.querySelector('pre')).not.toBeNull();
+      expect(vm.$el.textContent.trim()).toContain('testing');
+    });
+
+    test('renders promot', () => {
+      expect(vm.$el.querySelector('.prompt span')).not.toBeNull();
+    });
+
+    test('renders as plain text when doesn\'t recognise other types', (done) => {
+      createComponent(json.cells[7].outputs[0]);
+
+      setTimeout(() => {
+        expect(vm.$el.querySelector('pre')).not.toBeNull();
+        expect(vm.$el.textContent.trim()).toContain('testing');
+
+        done();
+      });
+    });
+  });
+});

src/cells/output/html.vue

+<template>
+  <div class="output">
+    <prompt />
+    <div v-html="rawCode"></div>
+  </div>
+</template>
+
+<script>
+import Prompt from '../prompt.vue';
+
+export default {
+  props: {
+    rawCode: {
+      type: String,
+      required: true,
+    },
+  },
+  components: {
+    'prompt': Prompt,
+  },
+};
+</script>

src/cells/output/image.vue

+<template>
+  <div class="output">
+    <prompt />
+    <img
+      :src="'data:' + outputType + ';base64,' + rawCode" />
+  </div>
+</template>
+
+<script>
+import Prompt from '../prompt.vue';
+
+export default {
+  props: {
+    outputType: {
+      type: String,
+      required: true,
+    },
+    rawCode: {
+      type: String,
+      required: true,
+    },
+  },
+  components: {
+    'prompt': Prompt,
+  },
+};
+</script>

src/cells/output/index.vue

+<template>
+  <component :is="componentName"
+    type="output"
+    :outputType="outputType"
+    :count="count"
+    :raw-code="rawCode" />
+</template>
+
+<script>
+import CodeCell from '../code/index.vue';
+import Html from './html.vue';
+import Image from './image.vue';
+
+export default {
+  props: {
+    count: {
+      type: Number,
+      required: false,
+      default: false,
+    },
+    output: {
+      type: Object,
+      requred: true,
+    },
+  },
+  components: {
+    'code-cell': CodeCell,
+    'html-output': Html,
+    'image-output': Image,
+  },
+  data() {
+    return {
+      outputType: '',
+    }
+  },
+  computed: {
+    componentName() {
+      if (this.output.text) {
+        return 'code-cell';
+      } else if (this.output.data['image/png']) {
+        this.outputType = 'image/png';
+
+        return 'image-output';
+      } else if (this.output.data['text/html']) {
+        this.outputType = 'text/html';
+
+        return 'html-output';
+      } else if (this.output.data['image/svg+xml']) {
+        this.outputType = 'image/svg+xml';
+
+        return 'html-output';
+      } else {
+        this.outputType = 'text/plain';
+
+        return 'code-cell';
+      }
+    },
+    rawCode() {
+      if (this.output.text) {
+        return this.output.text.join('');
+      } else {
+        return this.dataForType(this.outputType);
+      }
+    },
+  },
+  methods: {
+    dataForType(type) {
+      let data = this.output.data[type];
+
+      if (typeof data === 'object') {
+        data = data.join('');
+      }
+
+      return data;
+    }
+  },
+};
+</script>