vue-hot-reload-api - npm Package Compare versions

Comparing version 1.1.0 to 1.2.0

index.js

@@ -51,7 +51,7 @@ var Vue // late bind
       var prevComponent = this.childVM && this.childVM.constructor
-      removeComponent(prevComponent, this)
+      removeView(prevComponent, this)
       // defer = true means we are transitioning to a new
       // Component. Register this new component to the list.
       if (defer) {
-        addComponent(this.Component, this)
+        addView(this.Component, this)
       }
@@ -71,3 +71,3 @@ }
 
-function addComponent (Component, view) {
+function addView (Component, view) {
   var id = Component && Component.options.hotID
@@ -93,3 +93,3 @@ if (id) {
 
-function removeComponent (Component, view) {
+function removeView (Component, view) {
   var id = Component && Component.options.hotID
@@ -110,18 +110,11 @@ if (id) {
 exports.createRecord = function (id, options) {
+  var Component = typeof options === 'function'
+    ? options
+    : Vue.extend(options)
+  options = Component.options
   if (typeof options.el !== 'string' && typeof options.data !== 'object') {
     console.log('[HMR] Hot component detected: ' + format(id))
-    var add = function () {
-      map[id].instances.push(this)
-    }
-    var remove = function () {
-      map[id].instances.$remove(this)
-    }
-    options.created = options.created
-      ? [options.created, add]
-      : add
-    options.beforeDestroy = options.beforeDestroy
-      ? [options.beforeDestroy, remove]
-      : remove
+    makeOptionsHot(id, options)
     map[id] = {
-      Component: Vue.extend(options),
+      Component: Component,
       views: [],
@@ -134,2 +127,37 @@ instances: []
 /**
+ * Make a Component options object hot.
+ *
+ * @param {String} id
+ * @param {Object} options
+ */
+
+function makeOptionsHot (id, options) {
+  options.hotID = id
+  injectHook(options, 'created', function () {
+    map[id].instances.push(this)
+  })
+  injectHook(options, 'beforeDestroy', function () {
+    map[id].instances.$remove(this)
+  })
+}
+
+/**
+ * Inject a hook to a hot reloadable component so that
+ * we can keep track of it.
+ *
+ * @param {Object} options
+ * @param {String} name
+ * @param {Function} hook
+ */
+
+function injectHook (options, name, hook) {
+  var existing = options[name]
+  options[name] = existing
+    ? Array.isArray(existing)
+      ? existing.concat(hook)
+      : [existing, hook]
+    : [hook]
+}
+
+/**
  * Update a hot component.
@@ -162,3 +190,7 @@ *
   if (newOptions) {
-    Component.options = Vue.util.mergeOptions(Vue.options, newOptions)
+    // in case the user exports a constructor
+    Component = record.Component = typeof newOptions === 'function'
+      ? newOptions
+      : Vue.extend(newOptions)
+    makeOptionsHot(id, Component.options)
   }
@@ -170,3 +202,2 @@ if (newTemplate) {
   if (Component.options.name) {
-    console.log(Component.options)
     Component.options.components[Component.options.name] = Component
@@ -177,3 +208,5 @@ }
   // reload all views
-  record.views.forEach(updateView)
+  record.views.forEach(function (view) {
+    updateView(view, Component)
+  })
 }
@@ -185,8 +218,10 @@
  * @param {Directive} view
+ * @param {Function} Component
  */
 
-function updateView (view) {
+function updateView (view, Component) {
   if (!view._bound) {
     return
   }
+  view.Component = Component
   view.hotUpdating = true
@@ -193,0 +228,0 @@ // disable transitions

package.json

 {
   "name": "vue-hot-reload-api",
-  "version": "1.1.0",
+  "version": "1.2.0",
   "description": "hot reload api for *.vue components",
@@ -5,0 +5,0 @@ "main": "index.js",

No alert changes

Improved metrics

Total package byte prevSize

6199

13.2%

Lines of code

215

16.85%

No dependency changes