From 2677afb46fc4a950d62f32e6172aeaa2fdcc5a8b Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?S=C3=A9bastien=20Chopin?= <seb@chopin.io>
Date: Thu, 17 Nov 2016 11:57:02 +0100
Subject: [PATCH] Fix due 2.0.6~7 and add error() in context

---
 examples/custom-routes/pages/_user.vue |  5 ++-
 examples/hello-world/pages/about.vue   | 11 ++++++
 examples/with-ava/test/index.test.js   |  2 +
 lib/app/client.js                      | 52 ++++++++++++++++----------
 lib/app/server.js                      |  6 +++
 lib/app/utils.js                       |  3 +-
 package.json                           | 12 +++---
 7 files changed, 63 insertions(+), 28 deletions(-)

diff --git a/examples/custom-routes/pages/_user.vue b/examples/custom-routes/pages/_user.vue
index 4375b79bb9..4e6985d537 100644
--- a/examples/custom-routes/pages/_user.vue
+++ b/examples/custom-routes/pages/_user.vue
@@ -11,9 +11,12 @@
 import axios from 'axios'
 
 export default {
-  data ({ params }) {
+  data ({ params, error }) {
     return axios.get(`http://jsonplaceholder.typicode.com/users/${params.id}`)
     .then((res) => res.data)
+    .catch(() => {
+      error({ message: 'User not found', statusCode: 404 })
+    })
   }
 }
 </script>
diff --git a/examples/hello-world/pages/about.vue b/examples/hello-world/pages/about.vue
index 5fa5f7abbc..4d605252c4 100755
--- a/examples/hello-world/pages/about.vue
+++ b/examples/hello-world/pages/about.vue
@@ -2,10 +2,21 @@
   <div class="container">
     <img src="~static/nuxt-black.png" />
     <h2>Thank you for testing nuxt.js</h2>
+    <p>Loaded from the {{ name }}</p>
     <p><router-link to="/">Back home</router-link></p>
   </div>
 </template>
 
+<script>
+export default {
+  data ({ req, error }) {
+    return {
+      name: req ? 'server' : 'client'
+    }
+  }
+}
+</script>
+
 <style scoped>
 .container {
   position: absolute;
diff --git a/examples/with-ava/test/index.test.js b/examples/with-ava/test/index.test.js
index 39ee43ad3a..5d3f76364b 100755
--- a/examples/with-ava/test/index.test.js
+++ b/examples/with-ava/test/index.test.js
@@ -30,6 +30,7 @@ test.before('Init nuxt.js', (t) => {
 
 // Function used to do dom checking via jsdom
 async function renderAndGetWindow (route) {
+  const virtualConsole = jsdom.createVirtualConsole().sendTo(console)
   return new Promise((resolve, reject) => {
     const url = 'http://localhost:4000' + route
     jsdom.env({
@@ -38,6 +39,7 @@ async function renderAndGetWindow (route) {
         FetchExternalResources: ['script', 'link'],
         ProcessExternalResources: ['script']
       },
+      virtualConsole,
       done (err, window) {
         if (err) return reject(err)
         // If Nuxt could not be loaded (error from the server-side)
diff --git a/lib/app/client.js b/lib/app/client.js
index dea6096c49..a5a00e73a0 100644
--- a/lib/app/client.js
+++ b/lib/app/client.js
@@ -14,13 +14,20 @@ function loadAsyncComponents (to, ___, next) {
       return new Promise(function (resolve, reject) {
         const _resolve = (Component) => {
           // console.log('Component loaded', Component, match.path, key)
+          Component = Vue.extend(Component) // fix issue #6
+          Component._Ctor = Component
           match.components[key] = Component
           resolve(Component)
         }
         Component().then(_resolve).catch(reject)
       })
     }
-    // console.log('Return Component', match)
+    if (typeof Component === 'object' && !Component.options) {
+      // Updated via vue-router resolveAsyncComponents()
+      Component = Vue.extend(Component)
+      Component._Ctor = Component
+      match.components[key] = Component
+    }
     return Component
   })
   <%= (loading ? 'this.$loading.start && this.$loading.start()' : '') %>
@@ -42,12 +49,12 @@ function render (to, ___, next) {
   // Update ._data and other properties if hot reloaded
   Components.forEach(function (Component) {
     if (!Component._data) {
-      Component._data = Component.data || noopData
+      Component._data = Component.options.data || noopData
     }
-    if (Component._Ctor && Component._Ctor.options) {
-      Component.fetch = Component._Ctor.options.fetch
+    if (Component._Ctor && Component._Ctor.options && Component._dataFn) {
+      Component.options.fetch = Component._Ctor.options.fetch
       const originalDataFn = Component._data.toString().replace(/\s/g, '')
-      const dataFn = (Component.data || noopData).toString().replace(/\s/g, '')
+      const dataFn = Component._dataFn
       const newDataFn = (Component._Ctor.options.data || noopData).toString().replace(/\s/g, '')
       // If component data method changed
       if (newDataFn !== originalDataFn && newDataFn !== dataFn) {
@@ -64,21 +71,22 @@ function render (to, ___, next) {
       nextCalled = true
       next(path)
     }
-    const context = getContext({ to<%= (store ? ', store' : '') %>, isClient: true, next: _next.bind(this) })
+    const context = getContext({ to<%= (store ? ', store' : '') %>, isClient: true, next: _next.bind(this), error: this.error.bind(this) })
     if (Component._data && typeof Component._data === 'function') {
       var promise = Component._data(context)
       if (!(promise instanceof Promise)) promise = Promise.resolve(promise)
       promise.then((data) => {
-        Component.data = () => data
+        Component.options.data = () => data || {}
+        Component._dataFn = Component.options.data.toString().replace(/\s/g, '')
         if (Component._Ctor && Component._Ctor.options) {
-          Component._Ctor.options.data = Component.data
+          Component._Ctor.options.data = Component.options.data
         }
         <%= (loading ? 'this.$loading.increase && this.$loading.increase(30)' : '') %>
       })
       promises.push(promise)
     }
-    if (Component.fetch) {
-      var p = Component.fetch(context)
+    if (Component.options.fetch) {
+      var p = Component.options.fetch(context)
       if (!(p instanceof Promise)) { p = Promise.resolve(p) }
       <%= (loading ? 'p.then(() => this.$loading.increase && this.$loading.increase(30))' : '') %>
       promises.push(p)
@@ -110,7 +118,7 @@ function hotReloadAPI (_app) {
       <%= (loading ? 'this.$loading.finish && this.$loading.finish()' : '') %>
       router.push(path)
     }
-    const context = getContext({ route: router.currentRoute<%= (store ? ', store' : '') %>, isClient: true, next: next.bind(this) })
+    const context = getContext({ route: router.currentRoute<%= (store ? ', store' : '') %>, isClient: true, next: next.bind(this), error: _app.error.bind(_app) })
     // Check if data has been updated
     const originalDataFn = (Component._data || noopData).toString().replace(/\s/g, '')
     const newDataFn = (Component._Ctor.options.data || noopData).toString().replace(/\s/g, '')
@@ -119,19 +127,20 @@ function hotReloadAPI (_app) {
       let p = Component._data(context)
       if (!(p instanceof Promise)) { p = Promise.resolve(p) }
       p.then((data) => {
-        Component.data = () => data
-        Component._Ctor.options.data = Component.data
+        Component.options.data = () => data || {}
+        Component._dataFn = Component.options.data.toString().replace(/\s/g, '')
+        Component._Ctor.options.data = Component.options.data
         <%= (loading ? 'this.$loading.increase && this.$loading.increase(30)' : '') %>
       })
       promises.push(p)
     }
     // Check if fetch has been updated
-    const originalFetchFn = (Component.fetch || noopFetch).toString().replace(/\s/g, '')
+    const originalFetchFn = (Component.options.fetch || noopFetch).toString().replace(/\s/g, '')
     const newFetchFn = (Component._Ctor.options.fetch || noopFetch).toString().replace(/\s/g, '')
     // Fetch has been updated, we call it to update the store
     if (originalFetchFn !== newFetchFn) {
-      Component.fetch = Component._Ctor.options.fetch || noopFetch
-      let p = Component.fetch(context)
+      Component.options.fetch = Component._Ctor.options.fetch || noopFetch
+      let p = Component.options.fetch(context)
       if (!(p instanceof Promise)) { p = Promise.resolve(p) }
       <%= (loading ? 'p.then(() => this.$loading.increase && this.$loading.increase(30))' : '') %>
       promises.push(p)
@@ -160,13 +169,16 @@ const resolveComponents = flatMapComponents(router.match(path), (Component, _, m
   if (typeof Component === 'function' && !Component.options) {
     return new Promise(function (resolve, reject) {
       const _resolve = (Component) => {
-        if (Component.data && typeof Component.data === 'function') {
-          Component._data = Component.data
+        Component = Vue.extend(Component) // fix issue #6
+        Component._Ctor = Component
+        if (Component.options.data && typeof Component.options.data === 'function') {
+          Component._data = Component.options.data
           if (NUXT.serverRendered) {
-            Component.data = () => NUXT.data[index]
+            Component.options.data = () => NUXT.data[index] || {}
+            Component._dataFn = Component.options.data.toString().replace(/\s/g, '')
           }
           if (Component._Ctor && Component._Ctor.options) {
-            Component._Ctor.options.data = Component.data
+            Component._Ctor.options.data = Component.options.data
           }
         }
         match.components[key] = Component
diff --git a/lib/app/server.js b/lib/app/server.js
index 2bcbd2093e..65d7cb2c55 100644
--- a/lib/app/server.js
+++ b/lib/app/server.js
@@ -45,6 +45,8 @@ export default context => {
   context.route = router.currentRoute
   // Add meta infos
   context.meta = _app.$meta()
+  // Error function
+  context.error = _app.error.bind(_app)
 
   <%= (isDev ? 'const s = isDev && Date.now()' : '') %>
   // Call data & fecth hooks on components matched by the route.
@@ -62,6 +64,9 @@ export default context => {
       if (!(promise instanceof Promise)) promise = Promise.resolve(promise)
       promise.then((data) => {
         Component.data = () => data
+        if (Component._Ctor) {
+          Component._Ctor = Vue.extend(Component)
+        }
       })
       promises.push(promise)
     } else {
@@ -78,6 +83,7 @@ export default context => {
     <% } %>
     // datas are the first row of each
     context.nuxt.data = res.map((tab) => tab[0])
+    context.nuxt.error = _app.err
     <%= (store ? '// Add the state from the vuex store' : '') %>
     <%= (store ? 'context.nuxt.state = store.state' : '') %>
     return _app
diff --git a/lib/app/utils.js b/lib/app/utils.js
index d65a42a1a4..f7e3361e59 100644
--- a/lib/app/utils.js
+++ b/lib/app/utils.js
@@ -21,7 +21,8 @@ export function getContext (context) {
     isServer: !!context.isServer,
     isClient: !!context.isClient,
     <%= (store ? 'store: context.store,' : '') %>
-    route: (context.to ? context.to : context.route)
+    route: (context.to ? context.to : context.route),
+    error: context.error
   }
   ctx.params = ctx.route.params || {}
   ctx.query = ctx.route.query || {}
diff --git a/package.json b/package.json
index 4fd373b311..5c0f8b1552 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "nuxt",
-  "version": "0.4.3",
+  "version": "0.4.4",
   "description": "A minimalistic framework for server-rendered Vue.js applications (inspired by Next.js)",
   "main": "index.js",
   "license": "MIT",
@@ -41,11 +41,11 @@
     "serialize-javascript": "^1.3.0",
     "serve-static": "^1.11.1",
     "url-loader": "^0.5.7",
-    "vue": "^2.0.5",
-    "vue-loader": "^9.8.0",
-    "vue-meta": "^0.4.1",
-    "vue-router": "^2.0.1",
-    "vue-server-renderer": "^2.0.5",
+    "vue": "^2.0.7",
+    "vue-loader": "^9.9.5",
+    "vue-meta": "^0.4.4",
+    "vue-router": "^2.0.2",
+    "vue-server-renderer": "^2.0.7",
     "vuex": "^2.0.0",
     "webpack": "2.1.0-beta.26",
     "webpack-dev-middleware": "^1.8.4",