druxt-router 0.24.0 → 0.26.0

package/dist/components/DruxtRouter.vue

@@ -6,12 +6,9 @@ import DruxtModule from 'druxt/dist/components/DruxtModule.vue'
  * The DruxtRouter component renders a Drupal decoupled route, or path, using
  * the appropriate Druxt component.
  *
- * `<DruxtRouter path="/" />`
+ * For instance, using the path `/node/1` would render a DruxtEntity component.
  *
- * If no Path is specified, the Vue router path will be used by default.
- *
- * For instance, using the `/node/1` route would result in a DruxtRouter
- * component for the content in Drupal with the Node ID of 1.
+ * The Vue router path will be used if not path is defined.
  *
  * @example <caption>Render using the Vue router path</caption> @lang vue
  * <DruxtRouter />
@@ -22,10 +19,22 @@ import DruxtModule from 'druxt/dist/components/DruxtModule.vue'
  * @example <caption>Render the result of the model, bypasses Drupal backend</caption> @lang vue
  * <DruxtRouter v-model="route" />
  *
- * @example <caption>Render via a template</caption> @lang vue
+ * @example <caption>DruxtRouter Wrapper component boilerplate</caption> @lang vue
+ * <template>
+ *   <DruxtDebug :json="route" />
+ * </template>
+ *
+ * <script>
+ * import { DruxtRouterMixin } from 'druxt-router'
+ * export default {
+ *   mixins: [DruxtRouterMixin]
+ * }
+ *
+ * @example <caption>DruxtRouter with template injection</caption> @lang vue
  * <DruxtRouter>
  *   <template #default="{ route }">
- *     <DruxtRouter v-bind="route.props" />
+ *     <!-- Do whatever you want here -->
+ *     <DruxtDebug :json="route" open />
  *   </template>
  * </DruxtRouter>
  */
@@ -99,6 +108,9 @@ export default {
    * @property {object} model - The model object.
    */
   data: ({ value }) => ({
+    debug: {
+      path: undefined,
+    },
     model: value,
   }),
 
@@ -197,7 +209,7 @@ export default {
       // Get the route from the Drupal decoupled router module via the
       // druxtRouter store.
       // Use the Path prop or the Vue Router as the route to lookup.
-      const path = this.path || this.$route.fullPath
+      const path = this.debug.path || this.path || this.$route.fullPath
       const route = await this.$store.dispatch('druxtRouter/getRoute', path)
       this.model = route
 
@@ -219,7 +231,37 @@ export default {
     propsData: ({ $route, path, model }) => ({
       path: path || $route.fullPath,
       route: model
-    })
+    }),
+
+    /**
+     * Provides the scoped slots object for the Module render function.
+     *
+     * - **debug**: A Debug component with a Path override field.
+     * - **default**: Default error handling.
+     *
+     * @example <caption>DruxtRouter**Module**.vue</caption> @lang vue
+     * <template>
+     *   <div>
+     *     <slot name="debug" />
+     *     {{ route.props }}
+     *   </div>
+     * </template>
+     *
+     * @return {ScopedSlots} The Scoped slots object.
+     */
+    slots(h) {
+      const scopedSlots = {}
+
+      // Provide defualt error message.
+      if (this.model.error) {
+        scopedSlots.default = () => h('div', [
+          h('h1', [`Error ${this.model.error.statusCode}`]),
+          h('p', [this.model.error.message]),
+        ])
+      }
+
+      return scopedSlots
+    }
   }
 }
 
@@ -267,4 +309,20 @@ export default {
  *   }
  * }
  */
+
+/**
+ * Provides scoped slots for use in the Wrapper component.
+ *
+ * @typedef {object} ScopedSlots
+ * @param {function} debug - A Debug component with a Path override field.
+ * @param {function} default - Default error handling.
+ *
+ * @example <caption>DruxtRouter**Module**.vue</caption> @lang vue
+ * <template>
+ *   <div>
+ *     <slot name="debug" />
+ *     {{ route.props }}
+ *   </div>
+ * </template>
+ */
 </script>

package/dist/druxt-router.esm.js

@@ -104,7 +104,7 @@ class DruxtRouter {
   }
   async getRoute(path) {
     const url = `/router/translate-path?path=${path}`;
-    const response = await this.druxt.axios.get(url, {
+    const response = await this.druxt.get(url, {
       validateStatus: (status) => status < 500
     });
     const data = {
@@ -147,9 +147,16 @@ class DruxtRouter {
       break;
     }
     if (!(response.status >= 200 && response.status < 300)) {
-      const error = new Error();
-      error.response = response;
-      throw error;
+      if (response.status === 404) {
+        if (typeof response.data !== "object") {
+          response.data = { errors: [{
+            detail: "Please ensure the Decoupled Router module is installed and configured correctly."
+          }] };
+        } else if (response.data.message || response.data.details) {
+          response.data.errors = [{ detail: [response.data.message, response.data.details].filter((s) => s).join("\n") }];
+        }
+      }
+      this.druxt.error({ response }, { url });
     }
     return route;
   }

package/dist/druxt-router.ssr.js

@@ -112,7 +112,7 @@ class DruxtRouter {
   }
   async getRoute(path) {
     const url = `/router/translate-path?path=${path}`;
-    const response = await this.druxt.axios.get(url, {
+    const response = await this.druxt.get(url, {
       validateStatus: (status) => status < 500
     });
     const data = {
@@ -155,9 +155,16 @@ class DruxtRouter {
       break;
     }
     if (!(response.status >= 200 && response.status < 300)) {
-      const error = new Error();
-      error.response = response;
-      throw error;
+      if (response.status === 404) {
+        if (typeof response.data !== "object") {
+          response.data = { errors: [{
+            detail: "Please ensure the Decoupled Router module is installed and configured correctly."
+          }] };
+        } else if (response.data.message || response.data.details) {
+          response.data.errors = [{ detail: [response.data.message, response.data.details].filter((s) => s).join("\n") }];
+        }
+      }
+      this.druxt.error({ response }, { url });
     }
     return route;
   }

package/nuxt/index.js

@@ -49,7 +49,12 @@ const DruxtRouterNuxtModule = async function(moduleOptions = {}) {
     options
   });
   this.nuxt.hook("storybook:config", async ({ stories }) => {
-    stories.push("druxt-router/dist/components/*.stories.mjs");
+    this.addTemplate({
+      src: path.resolve(__dirname, "../templates/druxt-router.stories.js"),
+      fileName: "stories/druxt-router.stories.js",
+      options: {}
+    });
+    stories.push(path.resolve(this.options.buildDir, "./stories/druxt-router.stories.js"));
   });
 };
 DruxtRouterNuxtModule.meta = require("../package.json");

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "druxt-router",
-  "version": "0.24.0",
+  "version": "0.26.0",
   "description": "Drupal router for Nuxt, powered by the Drupal Decoupled Router module.",
   "keywords": [
     "cms",
@@ -42,7 +42,7 @@
     "templates"
   ],
   "dependencies": {
-    "druxt": "^0.13.0",
+    "druxt": "^0.17.0",
     "url-parse": "^1.4.7"
   },
   "optionalDependencies": {

package/templates/druxt-router.stories.js

@@ -0,0 +1,65 @@
+import DruxtRouter from 'druxt-router/dist/components/DruxtRouter.vue'
+
+export default {
+  title: 'Druxt/Router/DruxtRouter',
+  component: DruxtRouter
+}
+
+// Default story.
+export const Default = (args, { argTypes }) => ({
+  components: { DruxtRouter },
+  props: Object.keys(argTypes),
+  template: `<DruxtRouter v-bind="$props" />`
+})
+Default.args = { path: '/' }
+
+let code
+
+// Wrapper story.
+code = `<template>
+  <DruxtDebug :json="route" />
+</template>
+
+<script>
+import { DruxtRouterMixin } from 'druxt-router'
+export default {
+  mixins: [DruxtRouterMixin]
+}
+</script>`
+export const Wrapper = (args, { argTypes }) => ({
+  components: { DruxtRouter },
+  props: Object.keys(argTypes),
+  template: `<DruxtRouter v-bind="$props" ref="module">
+  <template #default>
+    Component options:
+    <ul>
+      <li v-for="option of $refs.module.getModuleComponents()" :key="option.name">{{ option.name }}</li>
+    </ul>
+  </template>
+</DruxtRouter>`
+})
+Wrapper.parameters = {
+  docs: {
+    storyDescription: 'The DruxtRouter component can be themed by using a Druxt Wrapper component.\n\nCreate an appropriately named component, using the relevant component option, with the following boilerplate:\n\n```jsx\n' + code + '\n```',
+    source: { code }
+  }
+}
+
+// Template injection story.
+code = `<DruxtRouter path="">
+  <template #default="{ route }">
+    <!-- Do whatever you want here -->
+    <DruxtDebug :json="route" open />
+  </template>
+</DruxtRouter>`
+export const TemplateInjection = (args, { argTypes }) => ({
+  components: { DruxtRouter },
+  props: Object.keys(argTypes),
+  template: code.replace('path=""', 'v-bind="$props"')
+})
+TemplateInjection.parameters = {
+  docs: {
+    storyDescription: 'The DruxtRouter component can be themed by injecting the default template into the compomnent.\n\n```jsx\n' + code + '\n```',
+    source: { code }
+  }
+}

package/CHANGELOG.md

@@ -1,286 +0,0 @@
-# druxt-router
-
-## 0.24.0
-
-### Minor Changes
-
-- 9161b38: Added Storybook integration for the DruxtRouter component.
-- 9161b38: Added ability to render a specific route using the Path property.
-
-  ```jsx
-  <DruxtRouter path="/node/1" />
-  ```
-
-- 9161b38: Added fetch hook to DruxtRouter component.
-- 9161b38: Added option to disable the DruxtRouter page middleware.
-
-  ```js
-  export default {
-    druxt: {
-      router: {
-        middleware: false
-      }
-    }
-  };
-  ```
-
-  Note: This is experimental and your results may vary.
-
-## 0.23.0
-
-### Minor Changes
-
-- 77ab204: Added support for API Proxy
-
-### Patch Changes
-
-- Updated dependencies [77ab204]
-  - druxt@0.13.0
-
-## 0.22.0
-
-### Minor Changes
-
-- c7b267a: Throw Error on router errors
-
-### Patch Changes
-
-- Updated dependencies [4504a2f]
-  - druxt@0.12.0
-
-## 0.21.0
-
-### Minor Changes
-
-- 9d905e8: Set router `pages` option default based on presence of `pages/` directory.
-- 9d905e8: Moved Nuxt module to `druxt-router/nuxt`
-
-  ⚠ Potential breaking change
-
-  ```diff
-  -modules: ['druxt-router']
-  +modules: ['druxt-router/nuxt']
-  ```
-
-- dae345e: Added module level options
-
-### Patch Changes
-
-- Updated dependencies [dae345e]
-  - druxt@0.11.0
-
-## 0.20.0
-
-### Minor Changes
-
-- 1ab762c: Enabled Nuxt Vuex store by default
-- ecefef5: Added option to disable wildcard route
-- 715e5ef: Updated component registration method to use the Nuxt `components:dirs` hook
-- cbc66cd: Added option to disable `pages/` routes
-
-### Patch Changes
-
-- Updated dependencies [715e5ef]
-  - druxt@0.10.0
-
-## 0.19.1
-
-### Patch Changes
-
-- c4616df: Fixed dependencies
-
-## 0.19.0
-
-### Minor Changes
-
-- 21170fb: Moved Vue components out of bundle
-
-  ⚠ Potential breaking change
-
-  _**Note:** This only effects custom Druxt modules and implementations._
-
-  ```diff
-  -import { DruxtRouter } from 'druxt-router'
-  +import DruxtRouter from 'druxt-router/dist/components/DruxtRouter.vue'
-  ```
-
-### Patch Changes
-
-- Updated dependencies [21170fb]
-  - druxt@0.9.0
-
-## 0.18.1
-
-### Patch Changes
-
-- Added `hid` to canonical meta tag
-- Fixed issue with metatags
-
-## 0.18.0
-
-### Minor Changes
-
-- Deprecated client methods in favour of DruxtClient
-
-## 0.17.3
-
-### Patch Changes
-
-- Fixed issue with querystring and getRedirect()
-
-## 0.17.2
-
-### Patch Changes
-
-- Updated dependencies
-
-## 0.17.1
-
-### Patch Changes
-
-- Fixed issue with permission check
-
-## 0.17.0
-
-### Minor Changes
-
-- Added support for DruxtComponentMixin
-
-## 0.16.1
-
-### Patch Changes
-
-- Updated Nuxt module
-- Updated dependencies
-
-## 0.16.0
-
-### Minor Changes
-
-- Added documentation
-- Updated dependencies
-
-## 0.15.0
-
-### Minor Changes
-
-- Added resolved path to router information
-- Added `all` option to getResources
-
-## 0.14.0
-
-### Minor Changes
-
-- Added support for Drupal JSON:API Params
-- Added addHeaders() method
-
-## 0.13.0
-
-### Minor Changes
-
-- Added resource index
-- Added support for remapped resources
-- Added getResources method
-
-## 0.12.0
-
-### Minor Changes
-
-- Added support for customisable endpoint
-- Added type and uuid data
-- Fixed hydration issue
-
-## 0.11.1
-
-### Patch Changes
-
-- Fixed hydration issue
-
-## 0.11.0
-
-### Minor Changes
-
-- Added support for additional router types
-- Added support for JSON:API Views routes
-
-## 0.10.1
-
-### Patch Changes
-
-- Fixed router WSOD error
-
-## 0.10.0
-
-### Minor Changes
-
-- Add configurable Router component
-- Refactored DruxtRouterEntityMixin
-- Removed support for JSON API Deserializer
-
-## 0.9.0
-
-### Minor Changes
-
-- Updated module to use shared Druxt configruation
-
-## 0.8.0
-
-### Minor Changes
-
-- Improved error handling for missing routes
-
-## 0.7.0
-
-### Minor Changes
-
-- Added getRoute action to Vuex store
-- Refactored Nuxt plugin
-
-## 0.6.0
-
-### Minor Changes
-
-- Added Axios settings support
-
-## 0.5.0
-
-### Minor Changes
-
-- Added support for redirects
-- Added support for JSON API resourceName
-
-## 0.4.2
-
-### Patch Changes
-
-- Fixed various issues
-
-## 0.4.1
-
-### Patch Changes
-
-- Fixed various issues
-
-## 0.4.0
-
-### Minor Changes
-
-## 0.3.0
-
-### Minor Changes
-
-## 0.2.2
-
-### Patch Changes
-
-## 0.2.1
-
-### Patch Changes
-
-## 0.2.0
-
-### Minor Changes
-
-## 0.1.0
-
-### Initial release

package/dist/components/DruxtRouter.stories.mjs

@@ -1,16 +0,0 @@
-import DruxtRouter from './DruxtRouter.vue'
-
-export default {
-  title: 'Druxt/Router/DruxtRouter',
-  component: DruxtRouter
-}
-
-const Template = (args, { argTypes }) => ({
-  components: { DruxtRouter },
-  props: Object.keys(argTypes),
-  template: `<DruxtRouter v-bind="$props" />`
-})
-
-export const Default = Template.bind({})
-Default.storyName = 'DruxtRouter'
-Default.args = { path: '/' }