refactor to handle new cards

README.md

@@ -1,6 +1,6 @@
 ## Mobiledoc DOM Renderer [![Build Status](https://travis-ci.org/bustlelabs/mobiledoc-dom-renderer.svg?branch=master)](https://travis-ci.org/bustlelabs/mobiledoc-dom-renderer)
 
-This is a DOM renderer for the [Mobiledoc](https://github.com/bustlelabs/content-kit-editor/blob/master/MOBILEDOC.md) format used
+This is a DOM renderer for the [Mobiledoc](https://github.com/bustlelabs/mobiledoc-kit/blob/master/MOBILEDOC.md) format used
 by [Mobiledoc-Kit](https://github.com/bustlelabs/mobiledoc-kit).
 
 The renderer is a small library intended for use in browser clients.
@@ -9,7 +9,7 @@ The renderer is a small library intended for use in browser clients.
 
 ```
 var mobiledoc = {
-  version: "0.1",
+  version: "0.2.0",
   sections: [
     [         // markers
       ['B']
@@ -26,14 +26,23 @@ var mobiledoc = {
     ]
   ]
 };
-var renderer = new MobiledocDOMRenderer();
-var cards = {};
-var rendered = renderer.render(mobiledoc, document.createElement('div'), cards);
-document.getElementById('output').appendChild(rendered);
+var renderer = new MobiledocDOMRenderer({cards: []});
+var rendered = renderer.render(mobiledoc);
+var result = rendered.result;
+document.getElementById('output').appendChild(result);
 // renders <div><p><b>hello world</b></b></div>
 // into 'output' element
 ```
 
+The Renderer constructor accepts a single object with the following optional properties:
+  * `cards`: An array of card objects
+  * `cardOptions`: Options to pass to cards when they are rendered
+  * `unknownCardHandler`: A method that will be called when any unknown card is enountered
+
+The return value from `renderer.render(mobiledoc)` is an object with two properties:
+  * `result` The rendered result. A DOMNode
+  * `teardown` A teardown method that, when called, will tear down the rendered mobiledoc and call any teardown handlers that were registered by cards in the mobiledoc.
+
 ### Tests
 
  * `npm test`

lib/cards/image.js

@@ -1,19 +1,12 @@
-import {
-  createElement,
-  appendChild
-} from '../utils/dom';
+import { createElement } from '../utils/dom';
+import RENDER_TYPE from '../utils/render-type';
 
-const ImageCard = {
+export default {
   name: 'image',
-  display: {
-    setup(element, options, env, payload) {
-      if (payload.src) {
-        let img = createElement('img');
-        img.src = payload.src;
-        appendChild(element, img);
-      }
-    }
+  type: RENDER_TYPE,
+  render({payload}) {
+    let img = createElement('img');
+    img.src = payload.src;
+    return img;
   }
 };
-
-export default ImageCard;

lib/index.js

@@ -1,7 +1,10 @@
-import Renderer from './renderer';
+import RendererFactory from './renderer-factory';
+import RENDER_TYPE from './utils/render-type';
+
+export { RENDER_TYPE };
 
 export function registerGlobal(window) {
-  window.MobiledocDOMRenderer = Renderer;
+  window.MobiledocDOMRenderer = RendererFactory;
 }
 
-export default Renderer;
+export default RendererFactory;

lib/renderer-factory.js

@@ -0,0 +1,41 @@
+import Renderer from './renderer';
+import RENDER_TYPE from './utils/render-type';
+
+/**
+ * runtime DOM renderer
+ * renders a mobiledoc to DOM
+ *
+ * input: mobiledoc
+ * output: DOM
+ */
+
+function validateCards(cards) {
+  if (!Array.isArray(cards)) {
+    throw new Error('`cards` must be passed as an array, not an object.');
+  }
+
+  for (let i=0; i < cards.length; i++) {
+    let card = cards[i];
+    if (card.type !== RENDER_TYPE) {
+      throw new Error(`Card "${card.name}" must be of type "${RENDER_TYPE}", is type "${card.type}"`);
+    }
+    if (!card.render) {
+      throw new Error(`Card "${card.name}" must define \`render\``);
+    }
+  }
+}
+
+export default class RendererFactory {
+  constructor({cards, atoms, cardOptions, unknownCardHandler}={}) {
+    cards = cards || [];
+    validateCards(cards);
+    atoms = atoms || [];
+    cardOptions = cardOptions || {};
+
+    this.state = { cards, atoms, cardOptions, unknownCardHandler };
+  }
+
+  render(mobiledoc) {
+    return new Renderer(mobiledoc, this.state).render();
+  }
+}