druxt-blocks 0.12.0 → 0.14.1

package/CHANGELOG.md

@@ -1,5 +1,50 @@
 # druxt-blocks
 
+## 0.14.1
+
+### Patch Changes
+
+- Updated dependencies [9161b38]
+  - druxt-router@0.24.0
+  - druxt-entity@0.21.2
+
+## 0.14.0
+
+### Minor Changes
+
+- e7b1533: Refactored DruxtModule fetch hooks
+
+### Patch Changes
+
+- Updated dependencies [025315a]
+  - druxt-entity@0.21.0
+  - druxt@0.13.0
+  - druxt-router@0.23.0
+
+## 0.13.1
+
+### Patch Changes
+
+- Updated dependencies [4504a2f]
+  - druxt@0.12.0
+  - druxt-router@0.22.0
+  - druxt-entity@0.20.0
+
+## 0.13.0
+
+### Minor Changes
+
+- dae345e: Moved `$druxtBlocks` plugin settings to `$druxt.settings.blocks`
+- dae345e: Added module level options
+- 8d28c18: Updated storybook integration
+
+### Patch Changes
+
+- Updated dependencies [9d905e8]
+  - druxt-router@0.21.0
+  - druxt-entity@0.19.0
+  - druxt@0.11.0
+
 ## 0.12.0
 
 ### Minor Changes

package/README.md

@@ -10,7 +10,7 @@
 ## Links
 
 - DruxtJS: https://druxtjs.org
-- Documentation: https://blocks.druxtjs.org/
+- Documentation: https://druxtjs.org/modules/blocks
 - Community Discord server: https://discord.druxtjs.org
 
 
@@ -51,7 +51,7 @@ The DruxtBlock component renders a Drupal JSON:API Block resource by ID or UUID.
 <DruxtBlock :uuid="uuid" />
 ```
 
-See the [DruxtBlock API Documentation](https://blocks.druxtjs.org/api/components/DruxtBlock.html) for more information.
+See the [DruxtBlock API Documentation](https://druxtjs.org/api/packages/blocks/components/DruxtBlock) for more information.
 
 
 ### DruxtBlockRegion
@@ -62,9 +62,9 @@ The DruxtBlockRegion component renders all visible blocks for the specified them
 <DruxtBlockRegion :name="name" :theme="theme" />
 ```
 
-![Example DruxtBlockRegion component](https://raw.githubusercontent.com/druxt/druxt-blocks/HEAD/docs/images/druxt-block-region.png)
+![Example DruxtBlockRegion component](https://druxtjs.org/images/druxt-block-region.png)
 
-See the [DruxtBlockRegion API Documentation](https://blocks.druxtjs.org/api/components/DruxtBlockRegion.html) for more information.
+See the [DruxtBlockRegion API Documentation](https://druxtjs.org/api/packages/blocks/components/DruxtBlockRegion) for more information.
 
 
 ### Theming
@@ -81,7 +81,7 @@ Both components can be themed by providing a default template:
 
 The module also provides Wrapper components with scoped slots for theming.
 
-See the [Druxt Theming guide](https://druxtjs.org/guide/theming.html) for more information.
+See the [Druxt Theming guide](https://druxtjs.org/guide/theming) for more information.
 
 
 ## Options

package/dist/components/DruxtBlock.stories.mjs

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

package/dist/components/DruxtBlock.vue

@@ -56,41 +56,6 @@ export default {
     resource: {},
   }),
 
-  /**
-   * The Nuxt Fetch hook.
-   *
-   * Fetches the Block JSON:API resource by either UUID or ID.
-   */
-  async fetch() {
-    // Build query.
-    const type = 'block--block'
-    const query = new DrupalJsonApiParams()
-    if (Array.isArray((((this.$druxtBlocks || {}).options || {}).query || {}).fields)) {
-      query.addFields(type, [
-        ...this.$druxtBlocks.options.query.fields,
-        'plugin',
-        'region',
-        'settings',
-        'theme',
-      ])
-    }
-
-    // Fetch Block by UUID.
-    if (this.uuid) {
-      const id = this.uuid
-      this.resource = await this.getResource({ type, id, query })
-    }
-
-    // Fetch Block by Drupal internal ID.
-    else if (this.id) {
-      query.addFilter('drupal_internal__id', this.id)
-      const collection = await this.getCollection({ type, query })
-      this.resource = { data: collection.data[0] }
-    }
-
-    await DruxtModule.fetch.call(this)
-  },
-
   fetchKey(getCounter) {
     const parts = ['DruxtBlock', this.uuid || this.id].filter((o) => o)
     return [...parts, getCounter(parts.join(':'))].join(':')
@@ -146,6 +111,39 @@ export default {
       return componentOptions
     },
 
+    /**
+     * Fetches the Block JSON:API resource by either UUID or ID.
+     */
+    async fetchConfig() {
+      // Build query.
+      const type = 'block--block'
+      const query = new DrupalJsonApiParams()
+
+      const fields = ((this.$druxt.settings.blocks || {}).query || {}).fields
+      if (Array.isArray(fields)) {
+        query.addFields(type, [
+          ...fields,
+          'plugin',
+          'region',
+          'settings',
+          'theme',
+        ])
+      }
+
+      // Fetch Block by UUID.
+      if (this.uuid) {
+        const id = this.uuid
+        this.resource = await this.getResource({ type, id, query })
+      }
+
+      // Fetch Block by Drupal internal ID.
+      else if (this.id) {
+        query.addFilter('drupal_internal__id', this.id)
+        const collection = await this.getCollection({ type, query })
+        this.resource = { data: collection.data[0] }
+      }
+    },
+
     /**
      * Provides propsData for the DruxtWrapper.
      *

package/dist/components/DruxtBlockRegion.stories.mjs

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

package/dist/components/DruxtBlockRegion.vue

@@ -58,27 +58,6 @@ export default {
     blocks: []
   }),
 
-  /**
-   * The Nuxt Fetch hook.
-   *
-   * Fetches all blocks by region and theme.
-   */
-  async fetch() {
-    const type = 'block--block'
-    const query = new DrupalJsonApiParams()
-    query
-      .addFilter('region', this.name)
-      .addFilter('status', '1')
-      .addFilter('theme', this.theme)
-      .addSort('weight')
-      .addFields(type, ['drupal_internal__id', 'visibility', 'weight'])
-
-    const collection = await this.getCollection({ type, query })
-    this.blocks = collection.data
-
-    await DruxtModule.fetch.call(this)
-  },
-
   fetchKey(getCounter) {
     const parts = ['DruxtBlockRegion', this.name].filter((o) => o)
     return [...parts, getCounter(parts.join(':'))].join(':')
@@ -146,6 +125,23 @@ export default {
      */
     componentOptions: ({ name, theme }) => [[name, theme], ['default']],
 
+    /**
+     * Fetches all blocks by region and theme.
+     */
+    async fetchConfig() {
+      const type = 'block--block'
+      const query = new DrupalJsonApiParams()
+      query
+        .addFilter('region', this.name)
+        .addFilter('status', '1')
+        .addFilter('theme', this.theme)
+        .addSort('weight')
+        .addFields(type, ['drupal_internal__id', 'visibility', 'weight'])
+
+      const collection = await this.getCollection({ type, query })
+      this.blocks = collection.data
+    },
+
     /**
      * Provides propsData for the DruxtWrapper.
      *

package/dist/druxt-blocks.esm.js

@@ -5,16 +5,16 @@ import { DruxtClient } from 'druxt';
 const titleFn = (parts) => parts.map((part) => part.charAt(0).toUpperCase() + part.slice(1).replace(/_/g, " ")).join("/");
 async function DruxtBlocksStorybook({ stories }) {
   const { addTemplate, options } = this;
-  const druxt = new DruxtClient(options.druxt.baseUrl, options.druxt);
+  const druxt = new DruxtClient(options.druxt.baseUrl, { ...options.druxt, proxy: { api: false } });
   const query = new DrupalJsonApiParams().addFilter("status", true);
   const blocks = (await druxt.getCollectionAll("block--block", query)).map((collection) => collection.data).flat();
   const blockStories = blocks.map((block) => {
     addTemplate({
-      src: resolve(__dirname, `../nuxt/druxt-block.stories.js`),
+      src: resolve(__dirname, `../templates/druxt-block.stories.js`),
       fileName: `stories/druxt-block.${block.attributes.drupal_internal__id}.stories.js`,
       options: {
         block,
-        title: titleFn(["Druxt Blocks", block.attributes.theme, block.attributes.region, block.attributes.drupal_internal__id])
+        title: titleFn(["Druxt", "Blocks", block.attributes.theme, block.attributes.region, block.attributes.drupal_internal__id])
       }
     });
     return resolve(options.buildDir, `./stories/druxt-block.${block.attributes.drupal_internal__id}.stories.js`);
@@ -25,11 +25,11 @@ async function DruxtBlocksStorybook({ stories }) {
     const regions = Array.from(new Set(blocks.filter((o) => o.attributes.theme === theme).map((o) => o.attributes.region)));
     return regions.map((region) => {
       addTemplate({
-        src: resolve(__dirname, `../nuxt/druxt-block-region.stories.js`),
+        src: resolve(__dirname, `../templates/druxt-block-region.stories.js`),
         fileName: `stories/druxt-block-region.${theme}.${region}.stories.js`,
         options: {
           region,
-          title: titleFn(["Druxt Blocks", theme, region]),
+          title: titleFn(["Druxt", "Blocks", theme, region]),
           theme
         }
       });
@@ -39,28 +39,27 @@ async function DruxtBlocksStorybook({ stories }) {
   stories.push.apply(stories, regionStories);
 }
 
-const DruxtBlocksNuxtModule = function() {
-  const { options } = this;
-  if (typeof options === "undefined" || !options.druxt) {
-    throw new TypeError("Druxt settings missing.");
-  }
-  const modules = ["druxt"].filter((module) => !(options.modules || []).includes(module));
-  for (const module of modules) {
-    this.addModule(module);
-  }
+const DruxtBlocksNuxtModule = function(moduleOptions = {}) {
+  const options = {
+    baseUrl: moduleOptions.baseUrl,
+    ...(this.options || {}).druxt || {},
+    blocks: {
+      query: {},
+      ...((this.options || {}).druxt || {}).site,
+      ...moduleOptions
+    }
+  };
+  this.addModule(["druxt", options]);
   this.nuxt.hook("components:dirs", (dirs) => {
     dirs.push({ path: join(__dirname, "components") });
     dirs.push({ path: join(__dirname, "components/blocks") });
   });
-  this.addPlugin({
-    src: resolve(__dirname, "../nuxt/plugin.js"),
-    fileName: "druxt-blocks.js",
-    options: options.druxt
-  });
   this.nuxt.hook("storybook:config", async ({ stories }) => {
+    stories.push("druxt-blocks/dist/components/*.stories.mjs");
     await DruxtBlocksStorybook.call(this, { stories });
   });
 };
+DruxtBlocksNuxtModule.meta = require("../package.json");
 
 const DruxtBlocksBlockMixin = {
   props: {

package/dist/druxt-blocks.ssr.js

@@ -9,16 +9,16 @@ const druxt = require('druxt');
 const titleFn = (parts) => parts.map((part) => part.charAt(0).toUpperCase() + part.slice(1).replace(/_/g, " ")).join("/");
 async function DruxtBlocksStorybook({ stories }) {
   const { addTemplate, options } = this;
-  const druxt$1 = new druxt.DruxtClient(options.druxt.baseUrl, options.druxt);
+  const druxt$1 = new druxt.DruxtClient(options.druxt.baseUrl, { ...options.druxt, proxy: { api: false } });
   const query = new drupalJsonapiParams.DrupalJsonApiParams().addFilter("status", true);
   const blocks = (await druxt$1.getCollectionAll("block--block", query)).map((collection) => collection.data).flat();
   const blockStories = blocks.map((block) => {
     addTemplate({
-      src: path.resolve(__dirname, `../nuxt/druxt-block.stories.js`),
+      src: path.resolve(__dirname, `../templates/druxt-block.stories.js`),
       fileName: `stories/druxt-block.${block.attributes.drupal_internal__id}.stories.js`,
       options: {
         block,
-        title: titleFn(["Druxt Blocks", block.attributes.theme, block.attributes.region, block.attributes.drupal_internal__id])
+        title: titleFn(["Druxt", "Blocks", block.attributes.theme, block.attributes.region, block.attributes.drupal_internal__id])
       }
     });
     return path.resolve(options.buildDir, `./stories/druxt-block.${block.attributes.drupal_internal__id}.stories.js`);
@@ -29,11 +29,11 @@ async function DruxtBlocksStorybook({ stories }) {
     const regions = Array.from(new Set(blocks.filter((o) => o.attributes.theme === theme).map((o) => o.attributes.region)));
     return regions.map((region) => {
       addTemplate({
-        src: path.resolve(__dirname, `../nuxt/druxt-block-region.stories.js`),
+        src: path.resolve(__dirname, `../templates/druxt-block-region.stories.js`),
         fileName: `stories/druxt-block-region.${theme}.${region}.stories.js`,
         options: {
           region,
-          title: titleFn(["Druxt Blocks", theme, region]),
+          title: titleFn(["Druxt", "Blocks", theme, region]),
           theme
         }
       });
@@ -43,28 +43,27 @@ async function DruxtBlocksStorybook({ stories }) {
   stories.push.apply(stories, regionStories);
 }
 
-const DruxtBlocksNuxtModule = function() {
-  const { options } = this;
-  if (typeof options === "undefined" || !options.druxt) {
-    throw new TypeError("Druxt settings missing.");
-  }
-  const modules = ["druxt"].filter((module) => !(options.modules || []).includes(module));
-  for (const module of modules) {
-    this.addModule(module);
-  }
+const DruxtBlocksNuxtModule = function(moduleOptions = {}) {
+  const options = {
+    baseUrl: moduleOptions.baseUrl,
+    ...(this.options || {}).druxt || {},
+    blocks: {
+      query: {},
+      ...((this.options || {}).druxt || {}).site,
+      ...moduleOptions
+    }
+  };
+  this.addModule(["druxt", options]);
   this.nuxt.hook("components:dirs", (dirs) => {
     dirs.push({ path: path.join(__dirname, "components") });
     dirs.push({ path: path.join(__dirname, "components/blocks") });
   });
-  this.addPlugin({
-    src: path.resolve(__dirname, "../nuxt/plugin.js"),
-    fileName: "druxt-blocks.js",
-    options: options.druxt
-  });
   this.nuxt.hook("storybook:config", async ({ stories }) => {
+    stories.push("druxt-blocks/dist/components/*.stories.mjs");
     await DruxtBlocksStorybook.call(this, { stories });
   });
 };
+DruxtBlocksNuxtModule.meta = require("../package.json");
 
 const DruxtBlocksBlockMixin = {
   props: {

package/package.json

@@ -1,20 +1,33 @@
 {
   "name": "druxt-blocks",
-  "version": "0.12.0",
+  "version": "0.14.1",
   "description": "Drupal Block and Block Region Druxt components.",
   "keywords": [
     "block",
     "blocks",
+    "cms",
+    "decoupled",
     "drupal",
     "druxt",
-    "nuxt"
+    "druxtjs",
+    "headless",
+    "jsonapi",
+    "json:api",
+    "nuxt",
+    "nuxtjs",
+    "module",
+    "storybook",
+    "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-blocks.ssr.js",
@@ -26,14 +39,14 @@
   "module": "dist/druxt-blocks.esm.js",
   "files": [
     "dist",
-    "nuxt"
+    "templates"
   ],
   "dependencies": {
     "axios": "^0.21.1",
     "drupal-jsonapi-params": "^1.1.12",
-    "druxt": "^0.10.0",
-    "druxt-entity": "^0.18.0",
-    "druxt-router": "^0.20.0"
+    "druxt": "^0.13.0",
+    "druxt-entity": "^0.21.2",
+    "druxt-router": "^0.24.0"
   },
   "optionalDependencies": {
     "vue": "^2.6.14",

package/nuxt/plugin.js

@@ -1,11 +0,0 @@
-export default (context, inject) => {
-  const options = {}
-
-  <% if (Array.isArray(((options.blocks || {}).query || {}).fields)) { %>
-  options.query = {
-    fields: [<%= options.blocks.query.fields.map((s) => `"${s}"`).join(', ') %>],
-  }
-  <% } %>
-
-  inject('druxtBlocks', { options })
-}