check component options

src/api/global.js

@@ -1,11 +1,5 @@
 var _ = require('../util')
-var assetTypes = [
-  'directive',
-  'filter',
-  'partial',
-  'effect',
-  'component'
-]
+var mergeOptions = require('../util/merge-option')
 
 /**
  * Expose useful internals
@@ -29,7 +23,7 @@ exports.extend = function (extendOptions) {
   }
   Sub.prototype = Object.create(Super.prototype)
   _.define(Sub.prototype, 'constructor', Sub)
-  Sub.options = _.mergeOptions(Super.options, extendOptions)
+  Sub.options = mergeOptions(Super.options, extendOptions)
   Sub.super = Super
   // allow further extension
   Sub.extend = Super.extend
@@ -67,22 +61,44 @@ exports.use = function (plugin) {
 /**
  * Define asset registration methods on a constructor.
  *
- * @param {Function} Ctor
+ * @param {Function} Constructor
  */
 
-createAssetRegisters(exports)
-function createAssetRegisters (Ctor) {
-  assetTypes.forEach(function (type) {
+var assetTypes = [
+  'directive',
+  'filter',
+  'partial',
+  'transition'
+]
+
+function createAssetRegisters (Constructor) {
 
-    /**
-     * Asset registration method.
-     *
-     * @param {String} id
-     * @param {*} definition
-     */
+  /* Asset registration methods share the same signature:
+   *
+   * @param {String} id
+   * @param {*} definition
+   */
 
-    Ctor[type] = function (id, definition) {
+  assetTypes.forEach(function (type) {
+    Constructor[type] = function (id, definition) {
       this.options[type + 's'][id] = definition
     }
   })
-}
+
+  /**
+   * Component registration needs to automatically invoke
+   * Vue.extend on object values.
+   *
+   * @param {String} id
+   * @param {Object|Function} definition
+   */
+
+  Constructor.component = function (id, definition) {
+    if (_.isObject(definition)) {
+      definition = _.Vue.extend(definition)
+    }
+    this.options.components[id] = definition
+  }
+}
+
+createAssetRegisters(exports)

src/instance/element.js

@@ -20,10 +20,10 @@ exports._initElement = function (el) {
   }
   if (el instanceof DocumentFragment) {
     this._initBlock(el)
+    this._initContent(el)
   } else {
     this.$el = el
     this._initTemplate()
-    this._initContent()
   }
   this.$el.__vue__ = this
 }
@@ -70,16 +70,17 @@ exports._initTemplate = function () {
           // the template contains multiple nodes
           // in this case the original `el` is simply
           // a placeholder.
-          this._blockNodes = _.toArray(frag.childNodes)
-          this.$el = document.createComment('vue-block')
+          this._initBlock(frag)
+          this._initContent(_.toArray(frag.children))
         } else {
           // 1 to 1 replace, we need to copy all the
           // attributes from the original el to the replacer
           this.$el = frag.firstChild
           _.copyAttributes(el, this.$el)
+          this._initContent(this.$el)
         }
         if (el.parentNode) {
-          _.before(this.$el, el)
+          this.$before(el)
           _.remove(el)
         }
       } else {
@@ -111,11 +112,13 @@ exports._collectRawContent = function () {
  * Resolve <content> insertion points mimicking the behavior
  * of the Shadow DOM spec:
  *
- *  http://w3c.github.io/webcomponents/spec/shadow/#insertion-points
+ *   http://w3c.github.io/webcomponents/spec/shadow/#insertion-points
+ *
+ * @param {Element|DocumentFragment} el
  */
 
-exports._initContent = function () {
-  var outlets = getOutlets(this.$el)
+exports._initContent = function (el) {
+  var outlets = getOutlets(el)
   var raw = this._rawContent
   var i = outlets.length
   var outlet, select, j, main

src/instance/init.js

@@ -1,5 +1,5 @@
 var Emitter = require('../emitter')
-var mergeOptions = require('../util').mergeOptions
+var mergeOptions = require('../util/merge-option')
 
 /**
  * The main init sequence. This is called for every

src/transition/index.js

@@ -5,21 +5,22 @@ var _ = require('../util')
 
 exports.append = function (el, target, cb, vm) {
   target.appendChild(el)
+  cb && cb()
 }
 
 exports.before = function (el, target, cb, vm) {
   _.before(el, target)
+  cb && cb()
 }
 
 exports.remove = function (el, cb, vm) {
   _.remove(el)
+  cb && cb()
 }
 
 exports.removeThenAppend = function (el, target, cb, vm) {
-  setTimeout(function () {
-    target.appendChild(el)
-    cb && cb()
-  }, 500)
+  target.appendChild(el)
+  cb && cb()
 }
 
 exports.apply = function (el, direction, cb, vm) {

src/util/index.js

@@ -4,6 +4,5 @@ var extend = lang.extend
 extend(exports, lang)
 extend(exports, require('./env'))
 extend(exports, require('./dom'))
-extend(exports, require('./option'))
 extend(exports, require('./filter'))
 extend(exports, require('./debug'))

src/util/option.js → src/util/merge-option.js

@@ -1,6 +1,5 @@
-// alias debug as _ so we can drop _.warn during uglify
-var _ = require('./debug')
-var extend = require('./lang').extend
+var _ = require('./')
+var extend = _.extend
 
 /**
  * Option overwriting strategies are functions that handle
@@ -42,7 +41,7 @@ strats.paramAttributes = function (parentVal, childVal) {
 strats.directives =
 strats.filters =
 strats.partials =
-strats.effects =
+strats.transitions =
 strats.components = function (parentVal, childVal, key, vm) {
   var ret = Object.create(
     vm && vm.$parent
@@ -103,6 +102,25 @@ var defaultStrat = function (parentVal, childVal) {
     : childVal
 }
 
+/**
+ * Make sure component options get converted to actual
+ * constructors.
+ *
+ * @param {Object} components
+ */
+
+function guardComponents (components) {
+  if (components) {
+    var def
+    for (var key in components) {
+      def = components[key]
+      if (_.isObject(def)) {
+        components[key] = _.Vue.extend(def)
+      }
+    }
+  }
+}
+
 /**
  * Merge two option objects into a new one.
  * Core utility used in both instantiation and inheritance.
@@ -113,7 +131,8 @@ var defaultStrat = function (parentVal, childVal) {
  *                     an instantiation merge.
  */
 
-exports.mergeOptions = function (parent, child, vm) {
+module.exports = function (parent, child, vm) {
+  guardComponents(child.components)
   var options = {}
   var key
   for (key in parent) {