druxt-router 0.20.0 → 0.24.0

package/CHANGELOG.md

@@ -1,5 +1,74 @@
 # 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

package/README.md

@@ -9,7 +9,7 @@
 ## Links
 
 - DruxtJS: https://druxtjs.org
-- Documentation: https://router.druxtjs.org
+- Documentation: https://druxtjs.org/modules/router
 - Community Discord server: https://discord.druxtjs.org
 
 ## Features
@@ -29,19 +29,13 @@ Add module to `nuxt.config.js`
 
 ```js
 module.exports = {
-  modules: [
-    ...
-    'druxt-router'
-  ],
-
+  modules: ['druxt-router/nuxt'],
   druxt: {
     baseUrl: 'https://demo-api.druxtjs.org'
   }
 }
 ```
 
-Ensure you have activated the [Nuxt Vuex store](https://nuxtjs.org/guide/vuex-store/).
-
 ## Options
 
 ### Druxt Router options

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.route.canonical
+          href: this.canonical || (this.route || {}).canonical
         }
       ]
     }
@@ -51,45 +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()
+    }
   },
 
-  render(h) {
-    return h('div', [
-      h('DruxtRoute', {
-        props: {
-          path: this.$route.fullPath,
-          value: {
-            redirect: this.redirect,
-            route: this.route,
-          }
-        }
+  /** 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']
+    ],
+
+    /**
+     * 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

@@ -1,52 +1,7 @@
-import { join, resolve } from 'path';
 import { DruxtClient } from 'druxt';
 import Url from 'url-parse';
 import { mapState, mapActions } from 'vuex';
 
-const DruxtRouterNuxtModule = function() {
-  if (typeof this.options === "undefined" || !this.options.druxt) {
-    throw new TypeError("Druxt settings missing.");
-  }
-  const options = this.options.druxt;
-  options.router = {
-    pages: true,
-    wildcard: true,
-    ...options.router
-  };
-  this.nuxt.hook("components:dirs", (dirs) => {
-    dirs.push({ path: join(__dirname, "components") });
-  });
-  if (options.router.wildcard) {
-    this.addTemplate({
-      src: resolve(__dirname, "../nuxt/component.js"),
-      fileName: "components/druxt-router.js",
-      options
-    });
-    this.extendRoutes((routes, resolve2) => {
-      routes.push({
-        name: "druxt-router",
-        path: "*",
-        component: resolve2(this.options.buildDir, "components/druxt-router.js"),
-        chunkName: "druxt-router"
-      });
-    });
-  }
-  if (options.router.wildcard && !options.router.pages) {
-    this.nuxt.hook("build:before", () => this.nuxt.options.build.createRoutes = () => []);
-  }
-  this.addPlugin({
-    src: resolve(__dirname, "../nuxt/plugin.js"),
-    fileName: "druxt-router.js",
-    options
-  });
-  this.options.store = true;
-  this.addPlugin({
-    src: resolve(__dirname, "../nuxt/store.js"),
-    fileName: "store/druxt-router.js",
-    options
-  });
-};
-
 class DruxtRouter {
   constructor(baseUrl, options = {}) {
     this.options = {
@@ -96,9 +51,6 @@ class DruxtRouter {
   }
   async get(path) {
     const route = await this.getRoute(path);
-    if (route.error) {
-      return { route };
-    }
     const redirect = this.getRedirect(path, route);
     return { redirect, route };
   }
@@ -195,11 +147,9 @@ class DruxtRouter {
       break;
     }
     if (!(response.status >= 200 && response.status < 300)) {
-      route.error = {
-        statusCode: response.status,
-        message: response.statusText
-      };
-      route.component = "error";
+      const error = new Error();
+      error.response = response;
+      throw error;
     }
     return route;
   }
@@ -271,7 +221,12 @@ const DruxtRouterStore = ({ store }) => {
         if (typeof state.routes[path] !== "undefined") {
           return state.routes[path];
         }
-        const route = await this.$druxtRouter().getRoute(path);
+        let route;
+        try {
+          route = await this.$druxtRouter().getRoute(path);
+        } catch (err) {
+          route = { error: { statusCode: err.response.status, message: err.response.data.message } };
+        }
         commit("addRoute", { path, route });
         return route;
       }
@@ -327,6 +282,10 @@ const DruxtRouterEntityMixin = {
 
 const DruxtRouterMixin = {
   props: {
+    path: {
+      type: String,
+      default: void 0
+    },
     route: {
       type: Object,
       required: true
@@ -334,5 +293,4 @@ const DruxtRouterMixin = {
   }
 };
 
-export default DruxtRouterNuxtModule;
 export { DruxtRouter, DruxtRouterEntityMixin, DruxtRouterMixin, DruxtRouterStore };

package/dist/druxt-router.ssr.js

@@ -2,7 +2,6 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const path = require('path');
 const druxt = require('druxt');
 const Url = require('url-parse');
 const vuex = require('vuex');
@@ -11,50 +10,6 @@ function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'defau
 
 const Url__default = /*#__PURE__*/_interopDefaultLegacy(Url);
 
-const DruxtRouterNuxtModule = function() {
-  if (typeof this.options === "undefined" || !this.options.druxt) {
-    throw new TypeError("Druxt settings missing.");
-  }
-  const options = this.options.druxt;
-  options.router = {
-    pages: true,
-    wildcard: true,
-    ...options.router
-  };
-  this.nuxt.hook("components:dirs", (dirs) => {
-    dirs.push({ path: path.join(__dirname, "components") });
-  });
-  if (options.router.wildcard) {
-    this.addTemplate({
-      src: path.resolve(__dirname, "../nuxt/component.js"),
-      fileName: "components/druxt-router.js",
-      options
-    });
-    this.extendRoutes((routes, resolve2) => {
-      routes.push({
-        name: "druxt-router",
-        path: "*",
-        component: resolve2(this.options.buildDir, "components/druxt-router.js"),
-        chunkName: "druxt-router"
-      });
-    });
-  }
-  if (options.router.wildcard && !options.router.pages) {
-    this.nuxt.hook("build:before", () => this.nuxt.options.build.createRoutes = () => []);
-  }
-  this.addPlugin({
-    src: path.resolve(__dirname, "../nuxt/plugin.js"),
-    fileName: "druxt-router.js",
-    options
-  });
-  this.options.store = true;
-  this.addPlugin({
-    src: path.resolve(__dirname, "../nuxt/store.js"),
-    fileName: "store/druxt-router.js",
-    options
-  });
-};
-
 class DruxtRouter {
   constructor(baseUrl, options = {}) {
     this.options = {
@@ -104,9 +59,6 @@ class DruxtRouter {
   }
   async get(path) {
     const route = await this.getRoute(path);
-    if (route.error) {
-      return { route };
-    }
     const redirect = this.getRedirect(path, route);
     return { redirect, route };
   }
@@ -203,11 +155,9 @@ class DruxtRouter {
       break;
     }
     if (!(response.status >= 200 && response.status < 300)) {
-      route.error = {
-        statusCode: response.status,
-        message: response.statusText
-      };
-      route.component = "error";
+      const error = new Error();
+      error.response = response;
+      throw error;
     }
     return route;
   }
@@ -279,7 +229,12 @@ const DruxtRouterStore = ({ store }) => {
         if (typeof state.routes[path] !== "undefined") {
           return state.routes[path];
         }
-        const route = await this.$druxtRouter().getRoute(path);
+        let route;
+        try {
+          route = await this.$druxtRouter().getRoute(path);
+        } catch (err) {
+          route = { error: { statusCode: err.response.status, message: err.response.data.message } };
+        }
         commit("addRoute", { path, route });
         return route;
       }
@@ -335,6 +290,10 @@ const DruxtRouterEntityMixin = {
 
 const DruxtRouterMixin = {
   props: {
+    path: {
+      type: String,
+      default: void 0
+    },
     route: {
       type: Object,
       required: true
@@ -346,4 +305,3 @@ exports.DruxtRouter = DruxtRouter;
 exports.DruxtRouterEntityMixin = DruxtRouterEntityMixin;
 exports.DruxtRouterMixin = DruxtRouterMixin;
 exports.DruxtRouterStore = DruxtRouterStore;
-exports.default = DruxtRouterNuxtModule;

package/nuxt/index.d.ts

@@ -0,0 +1,30 @@
+/**
+ * The Nuxt.js module function.
+ *
+ * - Extends the Vue router, adding the Druxt wildcard route.
+ * - Adds the Druxt router plugin.
+ * - Adds the Druxt router Vuex store.
+ *
+ * The module function should not be used directly, but rather installed via your Nuxt configuration file.
+ *
+ * Options are set on the root level `druxt` Nuxt config object.
+ *
+ * @example @lang js
+ * // `nuxt.config.js`
+ * module.exports = {
+ *   buildModules: ['druxt-router/nuxt'],
+ *   druxt: {
+ *     baseUrl: 'https://demi-api.druxtjs.org'
+ *   }
+ * }
+ *
+ * @property {object} options.druxt - Druxt root level options.
+ * @property {string} options.druxt.baseUrl - Base URL of Drupal JSON:API backend.
+ * @property {string} options.druxt.router.component - File to custom Router component.
+ */
+declare function DruxtRouterNuxtModule(moduleOptions?: {}): Promise<void>;
+declare namespace DruxtRouterNuxtModule {
+    const meta: any;
+}
+
+export default DruxtRouterNuxtModule;

package/nuxt/index.js

@@ -0,0 +1,57 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+const fs = require('fs');
+const path = require('path');
+
+const DruxtRouterNuxtModule = async function(moduleOptions = {}) {
+  const options = {
+    baseUrl: moduleOptions.baseUrl,
+    ...(this.options || {}).druxt || {},
+    router: {
+      pages: await fs.existsSync(path.resolve(this.options.srcDir, this.options.dir.pages)),
+      wildcard: true,
+      ...((this.options || {}).druxt || {}).router,
+      ...moduleOptions
+    }
+  };
+  this.nuxt.hook("components:dirs", (dirs) => {
+    dirs.push({ path: path.join(__dirname, "../dist/components") });
+  });
+  if (options.router.wildcard) {
+    this.addTemplate({
+      src: path.resolve(__dirname, "../templates/component.js"),
+      fileName: "components/druxt-router.js",
+      options
+    });
+    this.extendRoutes((routes, resolve2) => {
+      routes.push({
+        name: "druxt-router",
+        path: "*",
+        component: resolve2(this.options.buildDir, "components/druxt-router.js"),
+        chunkName: "druxt-router"
+      });
+    });
+  }
+  if (options.router.wildcard && !options.router.pages) {
+    this.nuxt.hook("build:before", () => this.nuxt.options.build.createRoutes = () => []);
+  }
+  this.addPlugin({
+    src: path.resolve(__dirname, "../templates/plugin.js"),
+    fileName: "druxt-router.js",
+    options
+  });
+  this.options.store = true;
+  this.addPlugin({
+    src: path.resolve(__dirname, "../templates/store.js"),
+    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");
+
+exports.default = DruxtRouterNuxtModule;

package/package.json

@@ -1,37 +1,48 @@
 {
   "name": "druxt-router",
-  "version": "0.20.0",
+  "version": "0.24.0",
   "description": "Drupal router for Nuxt, powered by the Drupal Decoupled Router module.",
   "keywords": [
+    "cms",
+    "decoupled",
     "drupal",
     "druxt",
-    "nuxt",
-    "json-api",
+    "druxtjs",
+    "headless",
     "jsonapi",
-    "json api",
-    "router"
+    "json:api",
+    "nuxt",
+    "nuxtjs",
+    "module",
+    "router",
+    "vue"
   ],
-  "license": "MIT",
-  "author": {
-    "name": "Stuart Clark",
-    "email": "stuart@realityloop.com",
-    "url": "https://realityloop.com"
+  "homepage": "https://druxtjs.org",
+  "bugs": {
+    "url": "https://github.com/druxt/druxt.js/issues"
   },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/druxt/druxt.js"
+  },
+  "license": "MIT",
   "exports": {
     ".": {
       "require": "./dist/druxt-router.ssr.js",
       "import": "./dist/druxt-router.esm.js"
     },
-    "./components/*": "./dist/components/*"
+    "./components/*": "./dist/components/*",
+    "./nuxt": "./nuxt/index.js"
   },
   "main": "dist/druxt-router.ssr.js",
   "module": "dist/druxt-router.esm.js",
   "files": [
     "dist",
-    "nuxt"
+    "nuxt",
+    "templates"
   ],
   "dependencies": {
-    "druxt": "^0.10.0",
+    "druxt": "^0.13.0",
     "url-parse": "^1.4.7"
   },
   "optionalDependencies": {

package/{nuxt → templates}/plugin.js

@@ -8,6 +8,14 @@ export default (context, inject) => {
   options.endpoint = '<%= options.endpoint %>'
   <% } %>
 
+  <% if ((options.proxy || {}).api) { %>
+  if (process.client) {
+    options.proxy = {
+      api: <%= options.proxy.api %>
+    }
+  }
+  <% } %>
+
   <% if (options.router && options.router.render) { %>
   // Render component.
   options.render = '<%= options.router.render %>'

package/dist/components/DruxtRoute.vue

@@ -1,73 +0,0 @@
-<script>
-
-import DruxtModule from 'druxt/dist/components/DruxtModule.vue'
-
-/**
- * Renders a Druxt module router component based on the resolved route provided
- * by the Drupal Decoupled Router module.
- *
- * @example @lang vue
- * <DruxtRouter />
- */
-export default {
-  name: 'DruxtRoute',
-
-  extends: DruxtModule,
-
-  props: {
-    path: {
-      type: String,
-      default() {
-        return this.$route.fullPath
-      }
-    }
-  },
-
-  async fetch() {
-    if (!this.value) {
-      this.model = await this.$store.dispatch('druxtRouter/get', this.path)
-    }
-
-    await DruxtModule.fetch.call(this)
-  },
-
-  fetchKey() {
-    return 'MOOOO'
-  },
-
-  data: ({ value }) => ({
-    model: {
-      redirect: false,
-      route: {},
-      ...value
-    },
-  }),
-
-  /** */
-  computed: {
-    module: ({ route }) =>
-      (route || {}).component && route.component.startsWith('druxt-') ? route.component.substring(6) : false,
-
-    redirect: ({ model }) => (model || {}).redirect || false,
-    route: ({ model }) => (model || {}).route || {},
-  },
-
-  watch: {
-    async path() {
-      if (!this.value) {
-        await this.$fetch()
-      }
-    }
-  },
-
-  druxt: {
-    componentOptions: ({ module, route }) => [
-      // @TODO - Add Path options.
-      [module || 'error', (route || {}).isHomePath ? 'front' : 'not-front'],
-      ['default']
-    ],
-
-    propsData: ({ route }) => ({ route })
-  }
-}
-</script>