druxt 0.15.0 → 0.16.0

package/CHANGELOG.md

@@ -1,5 +1,12 @@
 # druxt
 
+## 0.16.0
+
+### Minor Changes
+
+- dc226c2: Made the \$druxt plugin first to be available to all Druxt module plugins.
+- 7b749bd: Added improved error handling.
+
 ## 0.15.0
 
 ### Minor Changes

package/dist/components/DruxtModule.vue

@@ -107,12 +107,16 @@ export default {
 
     // Fetch configuration.
     if ((this.$options.druxt || {}).fetchConfig) {
-      await this.$options.druxt.fetchConfig.call(this)
+      try {
+        await this.$options.druxt.fetchConfig.call(this)
+      } catch(err) {
+        return this.error(err)
+      }
     }
 
     // Build wrapper component object.
     let options = []
-    const hasDefaultTemplate = !!(this.$vnode.data.scopedSlots || {}).default
+    const hasDefaultTemplate = !!(((this.$vnode || {}).data || {}).scopedSlots || {}).default
     // Load wrapper components if:
     if (
       // No default template and wrapper isn't false OR
@@ -138,7 +142,11 @@ export default {
 
     // Fetch resource.
     if ((this.$options.druxt || {}).fetchData) {
-      await this.$options.druxt.fetchData.call(this, component.settings)
+      try {
+        await this.$options.druxt.fetchData.call(this, component.settings)
+      } catch(err) {
+        return this.error(err, { component })
+      }
     }
 
     // Get scoped slots.
@@ -153,7 +161,7 @@ export default {
 
   watch: {
     model() {
-      if (this.component.props.value !== this.model) {
+      if (this.component.props && this.component.props.value !== this.model) {
         this.component.props.value = this.model
 
         // Only emit 'input' if using the default 'DruxtWrapper' component.
@@ -172,6 +180,31 @@ export default {
 
   /** */
   methods: {
+    /**
+     * Sets the component to render a DruxtDebug error message.
+     */
+    error(err, context = {}) {
+      // Build error details.
+      const { url } = err.druxt || {}
+      const title = (err.response || {}).statusText || ((((err.response || {}).data || {}).errors || [])[0] || {}).title
+      const summary = (err.response || {}).status
+        ? [(err.response || {}).status, title].filter((s) => s).join(': ')
+        : err.message
+
+      // Set the component to a Debug component with error details.
+      this.component = {
+        ...context.component || {},
+        is: 'DruxtDebug',
+        props: {
+          json: {
+            url,
+            errors: ((err.response || {}).data || {}).errors
+          },
+          summary
+        }
+      }
+    },
+
     /**
      * Get list of module wrapper components.
      *

package/dist/druxt.esm.js

@@ -9,7 +9,7 @@ import Vue from 'vue';
 import { DrupalJsonApiParams } from 'drupal-jsonapi-params';
 
 var name = "druxt";
-var version = "0.15.0";
+var version = "0.16.0";
 var description = "The Fully Decoupled Drupal Framework for Nuxt.js.";
 var keywords = [
 	"cms",
@@ -127,6 +127,15 @@ const DruxtNuxtModule = function(moduleOptions = {}) {
     fileName: "druxt.js",
     options
   });
+  const extendPlugins = this.options.extendPlugins;
+  this.options.extendPlugins = (plugins) => {
+    plugins = typeof extendPlugins === "function" ? extendPlugins(plugins) : plugins;
+    const index = plugins.findIndex(({ src }) => src === `${this.options.buildDir}/druxt.js`);
+    const plugin = plugins[index];
+    plugins.splice(index, 1);
+    plugins.unshift(plugin);
+    return plugins;
+  };
   this.addPlugin({
     src: resolve(__dirname, "../templates/store.js"),
     fileName: "store/druxt.js",
@@ -137,7 +146,6 @@ const DruxtNuxtModule = function(moduleOptions = {}) {
   this.options.cli.badgeMessages.push(`${chalk.blue.bold("Druxt")} @ v${meta.version}`);
   this.options.cli.badgeMessages.push(`${chalk.bold("API:")} ${chalk.blue.underline(options.baseUrl + options.endpoint)}`);
 };
-DruxtNuxtModule.meta = meta;
 
 class DruxtClient {
   constructor(baseUrl, options = {}) {
@@ -206,9 +214,16 @@ class DruxtClient {
         }
       }
       if (Object.keys(permissions).length) {
-        throw new TypeError(`${res.data.meta.omitted.detail}
-
- Required permissions: ${Object.keys(permissions).join(", ")}.`);
+        const err = {
+          response: {
+            statusText: res.data.meta.omitted.detail,
+            data: {
+              errors: [{ detail: `Required permissions:
+ - ${Object.keys(permissions).join("\n - ")}` }]
+            }
+          }
+        };
+        throw err;
       }
     }
   }
@@ -228,19 +243,49 @@ class DruxtClient {
         }
       });
     } catch (err) {
-      response = (err.response || {}).data || err.message;
+      this.error(err, { url: href });
     }
     return response;
   }
+  error(err, context = {}) {
+    let { url } = context;
+    if (!url && ((err.response || {}).config || {}).url) {
+      url = err.response.config.url;
+    }
+    const title = [
+      (err.response || {}).status,
+      (err.response || {}).statusText || err.message
+    ].filter((s) => s).join(": ");
+    const meta = { url: url && [this.options.baseUrl, url].join("") };
+    let message = [title];
+    if (Object.values(meta).filter((o) => o).length) {
+      message.push(Object.entries(meta).filter(([, v]) => v).map(([key, value]) => `${key.toUpperCase()}: ${value}`).join("\n"));
+    }
+    if (((((err.response || {}).data || {}).errors || [])[0] || {}).detail) {
+      message.push(err.response.data.errors[0].detail);
+    }
+    const error = Error(message.join("\n\n"));
+    error.response = err.response;
+    error.druxt = context;
+    throw error;
+  }
+  async get(url, options) {
+    try {
+      const res = await this.axios.get(url, options);
+      this.checkPermissions(res);
+      return res;
+    } catch (err) {
+      this.error(err, { url });
+    }
+  }
   async getCollection(type, query) {
     const { href } = await this.getIndex(type);
     if (!href) {
       return false;
     }
     const url = this.buildQueryUrl(href, query);
-    const res = await this.axios.get(url);
-    this.checkPermissions(res);
-    return res.data;
+    const { data } = await this.get(url);
+    return data;
   }
   async getCollectionAll(type, query) {
     const collections = [];
@@ -260,16 +305,27 @@ class DruxtClient {
     if (this.index && resource) {
       return this.index[resource] ? this.index[resource] : false;
     }
-    let index = ((await this.axios.get(this.options.endpoint) || {}).data || {}).links;
+    const url = this.options.endpoint;
+    const { data } = await this.get(url);
+    let index = data.links;
+    if (typeof index !== "object") {
+      const err = { response: { statusText: "Invalid JSON:API endpoint" } };
+      this.error(err, { url });
+    }
     const baseUrl = this.options.baseUrl;
     index = Object.fromEntries(Object.entries(index).map(([key, value]) => {
       value.href = value.href.replace(baseUrl, "");
       return [key, value];
     }));
     if (index[this.options.jsonapiResourceConfig]) {
-      const resources = await this.axios.get(index[this.options.jsonapiResourceConfig].href);
-      for (const resourceType in resources.data.data) {
-        const resource2 = resources.data.data[resourceType];
+      let resources = [];
+      try {
+        resources = (await this.get(index[this.options.jsonapiResourceConfig].href)).data.data;
+      } catch (err) {
+        this.log.warn(err.message);
+      }
+      for (const resourceType in resources) {
+        const resource2 = resources[resourceType];
         const internal = resource2.attributes.drupal_internal__id.split("--");
         const item = {
           resourceType: resource2.attributes.resourceType,
@@ -285,11 +341,7 @@ class DruxtClient {
       }
     }
     this.index = index;
-    if (resource) {
-      const response = this.index[resource] ? this.index[resource] : false;
-      return response;
-    }
-    return this.index;
+    return resource ? this.index[resource] || false : this.index;
   }
   async getRelated(type, id, related, query) {
     if (!id || !type || !related) {
@@ -300,12 +352,8 @@ class DruxtClient {
       href = this.options.endpoint + "/" + type.replace("--", "/");
     }
     const url = this.buildQueryUrl(`${href}/${id}/${related}`, query);
-    try {
-      const related2 = await this.axios.get(url);
-      return related2.data;
-    } catch (e) {
-      return false;
-    }
+    const { data } = await this.get(url);
+    return data;
   }
   async getResource(type, id, query) {
     if (!id || !type) {
@@ -315,13 +363,9 @@ class DruxtClient {
     if (!href) {
       href = this.options.endpoint + "/" + type.replace("--", "/");
     }
-    const url = this.buildQueryUrl(`${href}/${id}`, query);
-    try {
-      const resource = await this.axios.get(url);
-      return resource.data;
-    } catch (e) {
-      return false;
-    }
+    const url = this.buildQueryUrl([href, id].join("/"), query);
+    const { data } = await this.get(url);
+    return data;
   }
   async updateResource(resource) {
     const { href } = await this.getIndex(resource.type);
@@ -337,7 +381,7 @@ class DruxtClient {
         }
       });
     } catch (err) {
-      response = (err.response || {}).data || err.message;
+      this.error(err);
     }
     return response;
   }
@@ -348,7 +392,7 @@ const getDrupalJsonApiParams = (query) => {
 };
 
 const dehydrateResources = ({ commit, queryObject, resources }) => {
-  return resources.map((data) => {
+  return (resources || []).map((data) => {
     const link = decodeURI(((data.links || {}).self || {}).href || "");
     const href = typeof (queryObject.fields || {})[data.type] === "string" ? [link.split("?")[0], `fields[${data.type}]=${queryObject.fields[data.type]}`].join("?") : link;
     commit("druxt/addResource", {
@@ -539,5 +583,7 @@ class DruxtClass {
   }
 }
 
+DruxtNuxtModule.meta = require("../package.json");
+
 export default DruxtNuxtModule;
 export { DruxtClass, DruxtClient, DruxtStore };

package/dist/druxt.ssr.js

@@ -22,7 +22,7 @@ const md5__default = /*#__PURE__*/_interopDefaultLegacy(md5);
 const Vue__default = /*#__PURE__*/_interopDefaultLegacy(Vue);
 
 var name = "druxt";
-var version = "0.15.0";
+var version = "0.16.0";
 var description = "The Fully Decoupled Drupal Framework for Nuxt.js.";
 var keywords = [
 	"cms",
@@ -140,6 +140,15 @@ const DruxtNuxtModule = function(moduleOptions = {}) {
     fileName: "druxt.js",
     options
   });
+  const extendPlugins = this.options.extendPlugins;
+  this.options.extendPlugins = (plugins) => {
+    plugins = typeof extendPlugins === "function" ? extendPlugins(plugins) : plugins;
+    const index = plugins.findIndex(({ src }) => src === `${this.options.buildDir}/druxt.js`);
+    const plugin = plugins[index];
+    plugins.splice(index, 1);
+    plugins.unshift(plugin);
+    return plugins;
+  };
   this.addPlugin({
     src: path.resolve(__dirname, "../templates/store.js"),
     fileName: "store/druxt.js",
@@ -150,7 +159,6 @@ const DruxtNuxtModule = function(moduleOptions = {}) {
   this.options.cli.badgeMessages.push(`${chalk__default['default'].blue.bold("Druxt")} @ v${meta.version}`);
   this.options.cli.badgeMessages.push(`${chalk__default['default'].bold("API:")} ${chalk__default['default'].blue.underline(options.baseUrl + options.endpoint)}`);
 };
-DruxtNuxtModule.meta = meta;
 
 class DruxtClient {
   constructor(baseUrl, options = {}) {
@@ -219,9 +227,16 @@ class DruxtClient {
         }
       }
       if (Object.keys(permissions).length) {
-        throw new TypeError(`${res.data.meta.omitted.detail}
-
- Required permissions: ${Object.keys(permissions).join(", ")}.`);
+        const err = {
+          response: {
+            statusText: res.data.meta.omitted.detail,
+            data: {
+              errors: [{ detail: `Required permissions:
+ - ${Object.keys(permissions).join("\n - ")}` }]
+            }
+          }
+        };
+        throw err;
       }
     }
   }
@@ -241,19 +256,49 @@ class DruxtClient {
         }
       });
     } catch (err) {
-      response = (err.response || {}).data || err.message;
+      this.error(err, { url: href });
     }
     return response;
   }
+  error(err, context = {}) {
+    let { url } = context;
+    if (!url && ((err.response || {}).config || {}).url) {
+      url = err.response.config.url;
+    }
+    const title = [
+      (err.response || {}).status,
+      (err.response || {}).statusText || err.message
+    ].filter((s) => s).join(": ");
+    const meta = { url: url && [this.options.baseUrl, url].join("") };
+    let message = [title];
+    if (Object.values(meta).filter((o) => o).length) {
+      message.push(Object.entries(meta).filter(([, v]) => v).map(([key, value]) => `${key.toUpperCase()}: ${value}`).join("\n"));
+    }
+    if (((((err.response || {}).data || {}).errors || [])[0] || {}).detail) {
+      message.push(err.response.data.errors[0].detail);
+    }
+    const error = Error(message.join("\n\n"));
+    error.response = err.response;
+    error.druxt = context;
+    throw error;
+  }
+  async get(url, options) {
+    try {
+      const res = await this.axios.get(url, options);
+      this.checkPermissions(res);
+      return res;
+    } catch (err) {
+      this.error(err, { url });
+    }
+  }
   async getCollection(type, query) {
     const { href } = await this.getIndex(type);
     if (!href) {
       return false;
     }
     const url = this.buildQueryUrl(href, query);
-    const res = await this.axios.get(url);
-    this.checkPermissions(res);
-    return res.data;
+    const { data } = await this.get(url);
+    return data;
   }
   async getCollectionAll(type, query) {
     const collections = [];
@@ -273,16 +318,27 @@ class DruxtClient {
     if (this.index && resource) {
       return this.index[resource] ? this.index[resource] : false;
     }
-    let index = ((await this.axios.get(this.options.endpoint) || {}).data || {}).links;
+    const url = this.options.endpoint;
+    const { data } = await this.get(url);
+    let index = data.links;
+    if (typeof index !== "object") {
+      const err = { response: { statusText: "Invalid JSON:API endpoint" } };
+      this.error(err, { url });
+    }
     const baseUrl = this.options.baseUrl;
     index = Object.fromEntries(Object.entries(index).map(([key, value]) => {
       value.href = value.href.replace(baseUrl, "");
       return [key, value];
     }));
     if (index[this.options.jsonapiResourceConfig]) {
-      const resources = await this.axios.get(index[this.options.jsonapiResourceConfig].href);
-      for (const resourceType in resources.data.data) {
-        const resource2 = resources.data.data[resourceType];
+      let resources = [];
+      try {
+        resources = (await this.get(index[this.options.jsonapiResourceConfig].href)).data.data;
+      } catch (err) {
+        this.log.warn(err.message);
+      }
+      for (const resourceType in resources) {
+        const resource2 = resources[resourceType];
         const internal = resource2.attributes.drupal_internal__id.split("--");
         const item = {
           resourceType: resource2.attributes.resourceType,
@@ -298,11 +354,7 @@ class DruxtClient {
       }
     }
     this.index = index;
-    if (resource) {
-      const response = this.index[resource] ? this.index[resource] : false;
-      return response;
-    }
-    return this.index;
+    return resource ? this.index[resource] || false : this.index;
   }
   async getRelated(type, id, related, query) {
     if (!id || !type || !related) {
@@ -313,12 +365,8 @@ class DruxtClient {
       href = this.options.endpoint + "/" + type.replace("--", "/");
     }
     const url = this.buildQueryUrl(`${href}/${id}/${related}`, query);
-    try {
-      const related2 = await this.axios.get(url);
-      return related2.data;
-    } catch (e) {
-      return false;
-    }
+    const { data } = await this.get(url);
+    return data;
   }
   async getResource(type, id, query) {
     if (!id || !type) {
@@ -328,13 +376,9 @@ class DruxtClient {
     if (!href) {
       href = this.options.endpoint + "/" + type.replace("--", "/");
     }
-    const url = this.buildQueryUrl(`${href}/${id}`, query);
-    try {
-      const resource = await this.axios.get(url);
-      return resource.data;
-    } catch (e) {
-      return false;
-    }
+    const url = this.buildQueryUrl([href, id].join("/"), query);
+    const { data } = await this.get(url);
+    return data;
   }
   async updateResource(resource) {
     const { href } = await this.getIndex(resource.type);
@@ -350,7 +394,7 @@ class DruxtClient {
         }
       });
     } catch (err) {
-      response = (err.response || {}).data || err.message;
+      this.error(err);
     }
     return response;
   }
@@ -361,7 +405,7 @@ const getDrupalJsonApiParams = (query) => {
 };
 
 const dehydrateResources = ({ commit, queryObject, resources }) => {
-  return resources.map((data) => {
+  return (resources || []).map((data) => {
     const link = decodeURI(((data.links || {}).self || {}).href || "");
     const href = typeof (queryObject.fields || {})[data.type] === "string" ? [link.split("?")[0], `fields[${data.type}]=${queryObject.fields[data.type]}`].join("?") : link;
     commit("druxt/addResource", {
@@ -552,6 +596,8 @@ class DruxtClass {
   }
 }
 
+DruxtNuxtModule.meta = require("../package.json");
+
 exports.DruxtClass = DruxtClass;
 exports.DruxtClient = DruxtClient;
 exports.DruxtStore = DruxtStore;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "druxt",
-  "version": "0.15.0",
+  "version": "0.16.0",
   "description": "The Fully Decoupled Drupal Framework for Nuxt.js.",
   "keywords": [
     "cms",