druxt 0.13.0 → 0.17.0

package/dist/druxt.ssr.js

@@ -6,6 +6,7 @@ const chalk = require('chalk');
 const path = require('path');
 const axios = require('axios');
 const querystring = require('querystring');
+const consola = require('consola');
 const merge = require('deepmerge');
 const md5 = require('md5');
 const Vue = require('vue');
@@ -15,10 +16,93 @@ function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'defau
 
 const chalk__default = /*#__PURE__*/_interopDefaultLegacy(chalk);
 const axios__default = /*#__PURE__*/_interopDefaultLegacy(axios);
+const consola__default = /*#__PURE__*/_interopDefaultLegacy(consola);
 const merge__default = /*#__PURE__*/_interopDefaultLegacy(merge);
 const md5__default = /*#__PURE__*/_interopDefaultLegacy(md5);
 const Vue__default = /*#__PURE__*/_interopDefaultLegacy(Vue);
 
+var name = "druxt";
+var version = "0.17.0";
+var description = "The Fully Decoupled Drupal Framework for Nuxt.js.";
+var keywords = [
+	"cms",
+	"decoupled",
+	"drupal",
+	"druxt",
+	"headless",
+	"jsonapi",
+	"json:api",
+	"nuxt",
+	"module",
+	"vue"
+];
+var homepage = "https://druxtjs.org";
+var bugs = {
+	url: "https://github.com/druxt/druxt.js/issues"
+};
+var repository = {
+	type: "git",
+	url: "git+https://github.com/druxt/druxt.js"
+};
+var license = "MIT";
+var exports$1 = {
+	".": {
+		require: "./dist/druxt.ssr.js",
+		"import": "./dist/druxt.esm.js"
+	},
+	"./components/*": "./dist/components/*"
+};
+var main = "dist/druxt.ssr.js";
+var module$1 = "dist/druxt.esm.js";
+var files = [
+	"dist",
+	"stories",
+	"templates"
+];
+var dependencies = {
+	"@nuxtjs/proxy": "^2.1.0",
+	axios: "^0.21.1",
+	chalk: "^4.1.2",
+	deepmerge: "^4.2.2",
+	"drupal-jsonapi-params": "^1.2.1",
+	md5: "^2.3.0",
+	querystring: "^0.2.0",
+	scule: "^0.2.0"
+};
+var devDependencies = {
+	"@storybook/addon-docs": "^6.4.13"
+};
+var peerDependencies = {
+	consola: "*"
+};
+var optionalDependencies = {
+	"core-js": "^3.16.1",
+	vue: "^2.6.14",
+	vuex: "^3.6.2"
+};
+var publishConfig = {
+	access: "public"
+};
+const meta = {
+	name: name,
+	version: version,
+	description: description,
+	keywords: keywords,
+	homepage: homepage,
+	bugs: bugs,
+	repository: repository,
+	license: license,
+	exports: exports$1,
+	main: main,
+	module: module$1,
+	files: files,
+	dependencies: dependencies,
+	devDependencies: devDependencies,
+	peerDependencies: peerDependencies,
+	optionalDependencies: optionalDependencies,
+	publishConfig: publishConfig
+};
+
 const DruxtNuxtModule = function(moduleOptions = {}) {
   var _a;
   const options = {
@@ -61,6 +145,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",
@@ -68,12 +161,20 @@ const DruxtNuxtModule = function(moduleOptions = {}) {
   });
   this.options.store = true;
   this.options.components = (_a = this.options.components) != null ? _a : true;
-  this.options.cli.badgeMessages.push(`${chalk__default['default'].bold("Druxt API:")} ${chalk__default['default'].blue.underline(options.baseUrl + options.endpoint)}`);
+  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)}`);
+  this.nuxt.hook("storybook:config", async ({ stories }) => {
+    stories.push("druxt/stories/*.stories.mdx");
+    stories.push("druxt/dist/components/*.stories.mdx");
+    stories.push("druxt/dist/components/*.stories.mjs");
+  });
 };
-DruxtNuxtModule.meta = require("../package.json");
 
 class DruxtClient {
   constructor(baseUrl, options = {}) {
+    this.log = consola__default['default'].create({ defaults: {
+      tag: "DruxtClient"
+    } });
     if (!baseUrl) {
       throw new Error("The 'baseUrl' parameter is required.");
     }
@@ -85,6 +186,16 @@ class DruxtClient {
       axiosSettings = Object.assign(axiosSettings, options.axios);
     }
     this.axios = axios__default['default'].create(axiosSettings);
+    if (options.debug) {
+      const log = this.log;
+      this.axios.interceptors.request.use((config) => {
+        log.info(config.url);
+        return config;
+      }, (error) => {
+        log.error(error);
+        return Promise.reject(error);
+      });
+    }
     this.options = {
       endpoint: "/jsonapi",
       jsonapiResourceConfig: "jsonapi_resource_config--jsonapi_resource_config",
@@ -126,9 +237,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;
       }
     }
   }
@@ -148,19 +266,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 = [];
@@ -180,16 +328,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,
@@ -205,11 +364,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) {
@@ -220,12 +375,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) {
@@ -235,13 +386,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);
@@ -257,7 +404,7 @@ class DruxtClient {
         }
       });
     } catch (err) {
-      response = (err.response || {}).data || err.message;
+      this.error(err);
     }
     return response;
   }
@@ -268,7 +415,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", {
@@ -459,6 +606,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.13.0",
+  "version": "0.17.0",
   "description": "The Fully Decoupled Drupal Framework for Nuxt.js.",
   "keywords": [
     "cms",
@@ -34,6 +34,7 @@
   "module": "dist/druxt.esm.js",
   "files": [
     "dist",
+    "stories",
     "templates"
   ],
   "dependencies": {
@@ -46,6 +47,12 @@
     "querystring": "^0.2.0",
     "scule": "^0.2.0"
   },
+  "devDependencies": {
+    "@storybook/addon-docs": "^6.4.13"
+  },
+  "peerDependencies": {
+    "consola": "*"
+  },
   "optionalDependencies": {
     "core-js": "^3.16.1",
     "vue": "^2.6.14",

package/stories/README.stories.mdx

@@ -0,0 +1,74 @@
+import { Meta } from '@storybook/addon-docs'
+
+<Meta title="Druxt/README" />
+
+# Druxt Storybook
+
+> Druxt + @nuxtjs/Storybook
+
+The following documentation and stories are provided by
+[DruxtJS](https://druxtjs.org) and the installed Druxt modules.
+
+The stories are connected to your Drupal JSON:API via the DruxtClient; this
+allows you to test your Druxt Wrapper components using live data.
+
+- For more information, refer to the
+[Druxt Storybook guide](https://druxtjs.org/guide/storybook).
+
+---
+
+## Introduction
+
+This is a live Druxt Storybook, with autogenerated stories based on the
+configuration of your Drupal backend.
+
+---
+
+### Autogenerated stories
+
+Each Druxt module is able to use configuration from your Drupal backend to craft
+site specific stories.
+
+For instance, the DruxtEntity module will create a story for each Entity type,
+Bundle and Display mode, while the Block module will create a story for each
+backend Theme, Region and Block.
+
+Search or navigate through the Druxt components and stories in the Storybook
+sidebar.
+
+---
+
+### What is Druxt?
+
+> Drupal + Nuxt = Druxt
+
+Druxt is a framework for building Fully Decoupled Drupal and Nuxt.js
+applications and sites. It allows you to leverage the content modelling and
+management power of Drupal, and build elegant user experiences with Nuxt.js.
+
+- Find out more @ [DruxtJS.org](https://druxtjs.org)
+
+---
+
+### Druxt components
+
+Druxt components are provided by Druxt modules to provide targetted decoupled
+Drupal functionality; A **DruxtEntity** component to render Drupal Content
+entities, or a **DruxtMenu** component to render a Drupal menu, etc.
+
+- See the core Druxt components @
+  [https://druxtjs.org/api/components](https://druxtjs.org/api/components)
+
+---
+
+### Druxt Wrapper theme system
+
+Druxt components that extend the **DruxtModule** use slot based wrapper system,
+providing the frontend developer the ability to create theme templates per
+Content type, or Display mode, and many more component options depending on the
+module.
+
+The available component options are provided via the `component.options` data
+on the relevant Druxt module component.
+
+- For more information, see the [Themeing guide](https://druxtjs.org/guide/theming)