Added worksheets support

Closes #1

.eslintignore

@@ -2,3 +2,4 @@
 /fixtures/
 /dist/
 index.js
+/coverage/

fixtures/worksheets.json

+{
+  "worksheets": [
+    {
+      "cells": [
+        {
+          "cell_type": "code",
+          "execution_count": 1,
+          "outputs": [],
+          "source": [
+            "console.log('test')"
+          ]
+        },
+        {
+          "cell_type": "markdown",
+          "source": [
+            "# test"
+          ]
+        },
+        {
+          "cell_type": "code",
+          "execution_count": 1,
+          "outputs": [
+            {
+              "name": "stdout",
+              "output_type": "stream",
+              "text": [
+                "testing"
+              ]
+            }
+          ],
+          "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

 {
   "name": "notebooklab",
-  "version": "0.1.0",
-  "description": "Vue component to render iPython notebook files! 🚀",
+  "version": "0.2.0",
+  "description": "Vue component to render IPython notebook files! 🚀",
   "main": "index.js",
   "scripts": {
     "eslint": "eslint --max-warnings 0 --ext .js,.vue .",

src/__tests__/index.test.js

 import Vue from 'vue';
 import json from '../../fixtures/file.json';
+import jsonWithWorksheet from '../../fixtures/worksheets.json';
 import Notebook from '../index.vue';
 const Component = Vue.extend(Notebook);
@@ -57,4 +58,36 @@ describe('Notebook component', () => {
       expect(vm.$el.querySelector('.js-code-class')).not.toBeNull();
     });
   });
+
+  describe('with worksheets', () => {
+    beforeEach((done) => {
+      vm = new Component({
+        propsData: {
+          notebook: jsonWithWorksheet,
+          codeCssClass: 'js-code-class',
+        },
+      });
+      vm.$mount();
+
+      setTimeout(() => {
+        done();
+      });
+    });
+
+    test('renders cells', () => {
+      expect(vm.$el.querySelectorAll('.cell').length).toBe(jsonWithWorksheet.worksheets[0].cells.length);
+    });
+
+    test('renders markdown cell', () => {
+      expect(vm.$el.querySelector('.markdown')).not.toBeNull();
+    });
+
+    test('renders code cell', () => {
+      expect(vm.$el.querySelector('pre')).not.toBeNull();
+    });
+
+    test('add code class to code blocks', () => {
+      expect(vm.$el.querySelector('.js-code-class')).not.toBeNull();
+    });
+  });
 });

src/cells/code.vue

@@ -35,7 +35,11 @@ export default {
   },
   computed: {
     rawInputCode() {
-      return this.cell.source.join('');
+      if (this.cell.source) {
+        return this.cell.source.join('');
+      }
+
+      return '';
     },
     hasOutput() {
       return this.cell.outputs.length;

src/cells/code/index.vue

@@ -24,6 +24,7 @@
       count: {
         type: Number,
         required: false,
+        default: 0,
       },
       codeCssClass: {
         type: String,

src/cells/output/index.vue

@@ -22,7 +22,7 @@ export default {
     count: {
       type: Number,
       required: false,
-      default: false,
+      default: 0,
     },
     output: {
       type: Object,

src/index.vue

 <template>
   <div v-if="hasNotebook">
     <component
-      v-for="(cell, index) in notebook.cells"
+      v-for="(cell, index) in cells"
       :is="cellType(cell.cell_type)"
       :cell="cell"
       :key="index"
@@ -37,6 +37,21 @@
       },
     },
     computed: {
+      cells() {
+        if (this.notebook.worksheets) {
+          const data = {
+            cells: [],
+          };
+
+          return this.notebook.worksheets.reduce((cellData, sheet) => {
+            const cellDataCopy = cellData;
+            cellDataCopy.cells = cellDataCopy.cells.concat(sheet.cells);
+            return cellDataCopy;
+          }, data).cells;
+        }
+
+        return this.notebook.cells;
+      },
       hasNotebook() {
         return Object.keys(this.notebook).length;
       },