component cards have fallback rendering

addon/utils/create-component-card.js

@@ -2,13 +2,23 @@ const RENDER_TYPE = 'dom';
 
 import { ADD_HOOK, REMOVE_HOOK } from '../components/mobiledoc-editor/component';
 
+function renderFallback() {
+  let element = document.createElement('div');
+  element.innerHTML = '[placeholder for Ember component card]';
+  return element;
+}
+
 export default function createComponentCard(name) {
 
   return {
     name,
     type: RENDER_TYPE,
     render(cardArg) {
       let {env, options} = cardArg;
+      if (!options[ADD_HOOK]) {
+        return renderFallback();
+      }
+
       let { card, element } = options[ADD_HOOK](cardArg);
       let { onTeardown } = env;
 
@@ -18,6 +28,10 @@ export default function createComponentCard(name) {
     },
     edit(cardArg) {
       let {env, options} = cardArg;
+      if (!options[ADD_HOOK]) {
+        return renderFallback();
+      }
+
       let isEditing = true;
       let { card, element } = options[ADD_HOOK](cardArg, isEditing);
       let { onTeardown } = env;

index.js

@@ -1,30 +1,52 @@
 /* jshint node: true */
 'use strict';
+var MergeTrees = require('broccoli-merge-trees');
 var Funnel = require('broccoli-funnel');
 var path = require('path');
 
+function distDirFor(packageName) {
+  var resolved = require.resolve(packageName + '/package.json');
+  if (resolved) {
+    return path.join(path.dirname(resolved), 'dist');
+  } else {
+    return null;
+  }
+}
+
 module.exports = {
   name: 'ember-mobiledoc-editor',
 
   treeForVendor: function() {
-    var distDir = path.join(
-      path.dirname(require.resolve('mobiledoc-kit/package.json')),
-      'dist'
-    );
+    var files = [];
 
-    var files = new Funnel(distDir, {
+    files.push(new Funnel(distDirFor('mobiledoc-kit'), {
       files: [
         'css/mobiledoc-kit.css',
         'global/mobiledoc-kit.js',
         'global/mobiledoc-kit.map'
       ],
       destDir: 'mobiledoc-kit'
-    });
-    return files;
+    }));
+
+    var rendererDir = distDirFor('mobiledoc-dom-renderer');
+    if (rendererDir) {
+      files.push(new Funnel(rendererDir, {
+        files: [
+          'global/mobiledoc-dom-renderer.js'
+        ],
+        destDir: 'mobiledoc-dom-renderer'
+      }));
+    }
+
+    return new MergeTrees(files);
   },
 
   included: function(app) {
     app.import('vendor/mobiledoc-kit/css/mobiledoc-kit.css');
     app.import('vendor/mobiledoc-kit/global/mobiledoc-kit.js');
+    var rendererDir = distDirFor('mobiledoc-dom-renderer');
+    if (rendererDir) {
+      app.import('vendor/mobiledoc-dom-renderer/global/mobiledoc-dom-renderer.js');
+    }
   }
 };

package.json

@@ -35,7 +35,8 @@
     "ember-disable-prototype-extensions": "^1.0.0",
     "ember-disable-proxy-controllers": "^1.0.0",
     "ember-export-application-global": "^1.0.3",
-    "ember-try": "0.0.6"
+    "ember-try": "0.0.6",
+    "mobiledoc-dom-renderer": "^0.3.0-beta3"
   },
   "keywords": [
     "ember-addon",
@@ -44,10 +45,11 @@
   ],
   "dependencies": {
     "broccoli-funnel": "^0.2.8",
-    "mobiledoc-kit": "^0.8.0-beta.3",
+    "broccoli-merge-trees": "^1.1.1",
     "ember-cli-babel": "^5.1.3",
     "ember-cli-htmlbars": "^1.0.0",
-    "ember-wormhole": "^0.3.4"
+    "ember-wormhole": "^0.3.4",
+    "mobiledoc-kit": "^0.8.0-beta.3"
   },
   "ember-addon": {
     "configPath": "tests/dummy/config"

tests/unit/utils/create-component-card-test.js

@@ -1,10 +1,10 @@
+/* global MobiledocDOMRenderer */
 import createComponentCard from 'ember-mobiledoc-editor/utils/create-component-card';
 import { module, test } from 'qunit';
 
 module('Unit | Utility | create component card');
 
-// Replace this with your real tests.
-test('it works', function(assert) {
+test('it creates a card', function(assert) {
   var result = createComponentCard('foo-card');
   assert.ok(result.name === 'foo-card' &&
             result.type === 'dom' &&
@@ -13,3 +13,20 @@ test('it works', function(assert) {
     'created a named card'
   );
 });
+
+test('it creates a renderable card', function(assert) {
+  var card = createComponentCard('foo-card');
+  let renderer = new MobiledocDOMRenderer({cards: [card]});
+
+  let {result} = renderer.render({
+    version: '0.3.0',
+    cards: [
+      ['foo-card', {}]
+    ],
+    sections: [
+      [10, 0]
+    ]
+  });
+
+  assert.ok(result, 'card rendered');
+});