druxt-router 0.23.0 → 0.25.0

package/CHANGELOG.md

@@ -1,5 +1,56 @@
 # druxt-router
 
+## 0.25.0
+
+### Minor Changes
+
+- 7b749bd: Added improved error handling.
+
+### Patch Changes
+
+- Updated dependencies [7b749bd]
+  - druxt@0.16.0
+
+## 0.24.2
+
+### Patch Changes
+
+- Updated dependencies [2ae1d6d]
+  - druxt@0.15.0
+
+## 0.24.1
+
+### Patch Changes
+
+- Updated dependencies [45bc0b9]
+  - druxt@0.14.0
+
+## 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

package/dist/components/DruxtRouter.stories.mjs

@@ -0,0 +1,16 @@
+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: '/' }

package/dist/components/DruxtRouter.vue

@@ -1,21 +1,61 @@
 <script>
 
 import DruxtModule from 'druxt/dist/components/DruxtModule.vue'
-import { mapState } from 'vuex'
 
 /**
- * Renders a Druxt module router component based on the resolved route provided
- * by the Drupal Decoupled Router module.
+ * The DruxtRouter component renders a Drupal decoupled route, or path, using
+ * the appropriate Druxt component.
  *
- * @example @lang vue
+ * `<DruxtRouter path="/" />`
+ *
+ * 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.
+ *
+ * @example <caption>Render using the Vue router path</caption> @lang vue
  * <DruxtRouter />
+ *
+ * @example <caption>Render a specified path</caption> @lang vue
+ * <DruxtRouter path="/node/1" />
+ *
+ * @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
+ * <DruxtRouter>
+ *   <template #default="{ route }">
+ *     <DruxtRouter v-bind="route.props" />
+ *   </template>
+ * </DruxtRouter>
  */
 export default {
   name: 'DruxtRouter',
 
   extends: DruxtModule,
 
-  async middleware ({ store, redirect, route }) {
+  /**
+   * Nuxt middleware; gets and sets the current route, and processes redirects.
+   *
+   * This can be disabled by setting the `druxt.router.middleware` option to
+   * `false` in `nuxt.config.js`
+   *
+   * @example @lang js
+   * export default {
+   *   druxt: {
+   *     router: {
+   *       middleware: false
+   *     }
+   *   }
+   * }
+   */
+  async middleware ({ $druxt, redirect, route, store }) {
+    // Ensure Router middleware is enabled.
+    if (typeof ($druxt.settings.router || {}).middleware !== 'undefined' && !$druxt.settings.router.middleware) {
+      return
+    }
+
+    // Get and set the current route and redirect information.
     const result = await store.dispatch('druxtRouter/get', route.fullPath)
 
     // Process redirect.
@@ -24,6 +64,44 @@ export default {
     }
   },
 
+  /** */
+  props: {
+    /**
+     * The Decoupled router path.
+     *
+     * If not set, the Vue router value will be used instead.
+     *
+     * @type {string}
+     *
+     * @example @lang vue
+     * <DruxtRouter path="/node/1" />
+     */
+    path: {
+      type: String,
+      default: undefined,
+    },
+
+    /**
+     * The Router object, used to determine the resolved route component.
+     *
+     * Setting this value will bypass the JSON:API.
+     *
+     * @type {object}
+     * @model
+     */
+    value: {
+      type: Object,
+      default: () => undefined
+    }
+  },
+
+  /**
+   * @property {object} model - The model object.
+   */
+  data: ({ value }) => ({
+    model: value,
+  }),
+
   /**
    * Nuxt head method.
    *
@@ -39,7 +117,7 @@ export default {
         {
           hid: 'canonical',
           rel: 'canonical',
-          href: this.canonical || this.route.canonical
+          href: this.canonical || (this.route || {}).canonical
         }
       ]
     }
@@ -51,44 +129,142 @@ export default {
     return head
   },
 
-  /**
-   * Vue.js Computed properties.
-   *
-   * @vue-computed {object} redirect The current Redirect, if applicable.
-   * @vue-computed {object} route The current Route.
-   */
+  /** */
   computed: {
+    /**
+     * The route module.
+     *
+     * @type {string}
+     */
     module: ({ route }) =>
       (route || {}).component && route.component.startsWith('druxt-') ? route.component.substring(6) : false,
 
+    /**
+     * The route object.
+     *
+     * @type {object}
+     */
+    route: ({ model }) => model,
+
     /**
      * Route title.
      * @type {boolean|string}
      * @default false
      */
-    title: ({ route }) => route.label || false,
+    title: ({ route }) => (route || {}).label || false,
 
     /**
      * Route component property data.
      * @type {object|string}
      * @default false
      */
-    props: ({ route }) => route.props || false,
+    props: ({ route }) => (route || {}).props || false,
+  },
 
-    ...mapState({
-      redirect: state => state.druxtRouter.redirect,
-      route: state => state.druxtRouter.route
-    })
+  /** */
+  watch: {
+    /**
+     * Re-fetch on update to Path prop.
+     */
+    async path() {
+      await this.$fetch()
+    }
   },
 
+  /** DruxtModule settings */
   druxt: {
+    /**
+     * Provides the available component naming options for the Druxt Wrapper.
+     *
+     * @param {object} context - The module component ViewModel.
+     * @returns {ComponentOptions}
+     */
     componentOptions: ({ module, route }) => [
       // @TODO - Add Path options.
       [module || 'error', route.isHomePath ? 'front' : 'not-front'],
       ['default']
     ],
 
-    propsData: ({ route }) => ({ route })
+    /**
+     * Fetch the decoupled route.
+     */
+    async fetchConfig() {
+      // Use the v-model value if provided.
+      if (this.value) {
+        return
+      }
+
+      // 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 route = await this.$store.dispatch('druxtRouter/getRoute', path)
+      this.model = route
+
+      // If this the path is the active Vue route, set the active route in the
+      // druxtRouter store for other modules to use.
+      // This is also done when via the middleware if in use.
+      const setActiveRoute = path === this.$route.fullPath
+      if (setActiveRoute) {
+        this.$store.commit('druxtRouter/setRoute', path)
+      }
+    },
+
+    /**
+     * Provides propsData for the DruxtWrapper.
+     *
+     * @param {object} context - The module component ViewModel.
+     * @returns {PropsData}
+     */
+    propsData: ({ $route, path, model }) => ({
+      path: path || $route.fullPath,
+      route: model
+    })
   }
 }
+
+/**
+ * Provides the available naming options for the Wrapper component.
+ *
+ * @typedef {array[]} ComponentOptions
+ *
+ * @example @lang js
+ * [
+ *   'DruxtRouter[Module][IsFront?]',
+ *   'DruxtRouterDefault',
+ * ]
+ *
+ * @example <caption>Entity route</caption> @lang js
+ * [
+ *   'DruxtRouterEntityFront',
+ *   'DruxtRouterEntity',
+ *   'DruxtRouterDefault',
+ *   '',
+ * ]
+ */
+
+/**
+ * Provides property data for use in the Wrapper component.
+ *
+ * @typedef {object} PropsData
+ * @param {string} path - The route path.
+ * @param {object} route - The Decoupled Router object.
+ *
+ * @example @lang js
+ * {
+ *   path: '/',
+ *   route: {
+ *     canonical: 'https://demo-api.druxtjs.org/en/node',
+ *     component: 'druxt-view',
+ *     error: false,
+ *     isHomePath: true,
+ *     jsonapi: {},
+ *     label: 'Home',
+ *     props: {},
+ *     redirect: false,
+ *     resolvedPath: '/en/node',
+ *     type: 'views',
+ *   }
+ * }
+ */
 </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;
   }
@@ -282,6 +289,10 @@ const DruxtRouterEntityMixin = {
 
 const DruxtRouterMixin = {
   props: {
+    path: {
+      type: String,
+      default: void 0
+    },
     route: {
       type: Object,
       required: true

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;
   }
@@ -290,6 +297,10 @@ const DruxtRouterEntityMixin = {
 
 const DruxtRouterMixin = {
   props: {
+    path: {
+      type: String,
+      default: void 0
+    },
     route: {
       type: Object,
       required: true

package/nuxt/index.js

@@ -48,6 +48,9 @@ const DruxtRouterNuxtModule = async function(moduleOptions = {}) {
     fileName: "store/druxt-router.js",
     options
   });
+  this.nuxt.hook("storybook:config", async ({ stories }) => {
+    stories.push("druxt-router/dist/components/*.stories.mjs");
+  });
 };
 DruxtRouterNuxtModule.meta = require("../package.json");
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "druxt-router",
-  "version": "0.23.0",
+  "version": "0.25.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.16.0",
     "url-parse": "^1.4.7"
   },
   "optionalDependencies": {