release v0.17.0

.gitpod.yml

@@ -2,11 +2,11 @@ image:
   file: .gitpod/Dockerfile
 
 tasks:
-  - before: git pull -f origin main:main
+  - before: git pull -f origin main:main || true
     init: |
       # DDev prebuild tasks
       .gitpod/scripts/ddev-download.sh
-      .gitpod/scripts/drupal-setup.sh
+      .gitpod/scripts/ddev-setup.sh
 
       # druxt.js build install and build
       yarn install
@@ -16,7 +16,6 @@ tasks:
       cd $GITPOD_REPO_ROOT/docs && yarn
       cd $GITPOD_REPO_ROOT && yarn build:docs
     command: |
-      .gitpod/scripts/ddev-setup.sh && clear
       cat .gitpod/WELCOME.md
 
 # VScode xdebug extension

.gitpod/scripts/ddev-setup.sh

@@ -1,38 +1,4 @@
 #!/usr/bin/env bash
-if [ -n "$DEBUG_DRUXTJS" ]; then
-    set -x
-fi
-
-# Set up ddev for use on gitpod
-
-set -eu -o pipefail
-
-DDEV_DIR="${GITPOD_REPO_ROOT}/examples/drupal/drupal-9/.ddev"
-shortgpurl="${GITPOD_WORKSPACE_URL#'https://'}"
-
-# Generate a config.gitpod.yaml that adds the gitpod
-# proxied ports so they're known to ddev.
-
-cat <<CONFIGEND > "${DDEV_DIR}"/config.gitpod.yaml
-#ddev-gitpod-generated
-bind_all_interfaces: true
-host_webserver_port: 8080
-CONFIGEND
-
-# We need host.docker.internal inside the container,
-# So add it via docker-compose.host-docker-internal.yaml
-hostip=$(awk "\$2 == \"$HOSTNAME\" { print \$1; }" /etc/hosts)
-
-cat <<COMPOSEEND >"${DDEV_DIR}"/docker-compose.host-docker-internal.yaml
-#ddev-gitpod-generated
-version: "3.6"
-services:
-  web:
-    environment:
-      - DRUSH_OPTIONS_URI=$(gp url 8080)
-    extra_hosts:
-    - "host.docker.internal:${hostip}"
-COMPOSEEND
 
 # Misc housekeeping before start
-ddev config global --instrumentation-opt-in=true --omit-containers=ddev-router
+ddev config global --instrumentation-opt-in=true

.gitpod/scripts/drupal-setup.sh

@@ -9,14 +9,6 @@ set -eu -o pipefail
 
 DRUPAL_DIR="${GITPOD_REPO_ROOT}/examples/drupal/drupal-9"
 
-# Set up DDEV
-cd "$GITPOD_REPO_ROOT" && .gitpod/scripts/ddev-setup.sh
-
 # Set up Drupal website
 cd "$DRUPAL_DIR" && ddev start
-cd "$DRUPAL_DIR" && ddev composer install
-cd "$DRUPAL_DIR" && ddev drush si -y --account-pass=admin demo_umami
-cd "$DRUPAL_DIR" && ddev drush -y en druxt
-cd "$DRUPAL_DIR" && ddev drush "rap anonymous 'access druxt resources'"
-cd "$DRUPAL_DIR" && ddev drush -y config:set jsonapi.settings read_only 0
-cd "$DRUPAL_DIR" && ddev stop
+cd "$DRUPAL_DIR" && ddev drupal-install

.yarnrc.yml

@@ -4,4 +4,4 @@ plugins:
   - path: .yarn/plugins/@yarnpkg/plugin-interactive-tools.cjs
     spec: "@yarnpkg/plugin-interactive-tools"
 
-yarnPath: .yarn/releases/yarn-3.0.0.cjs
+yarnPath: .yarn/releases/yarn-3.1.1.cjs

examples/drupal/drupal-9/.ddev/commands/web/drupal-install

@@ -0,0 +1,11 @@
+#!/bin/bash
+
+## Description: Install Drupal
+## Usage: drupal-install
+## Example: "ddev drupal-install"
+
+composer install
+drush si -y --account-pass=admin demo_umami
+drush -y en druxt
+drush rap anonymous 'access druxt resources'
+drush -y config:set jsonapi.settings read_only 0

examples/drupal/drupal-9/.ddev/config.yaml

@@ -13,7 +13,7 @@ mysql_version: ""
 nfs_mount_enabled: false
 mutagen_enabled: false
 use_dns_when_possible: true
-composer_version: ""
+composer_version: "2"
 web_environment: []
 
 # Key features of ddev's config.yaml:
@@ -25,7 +25,7 @@ web_environment: []
 
 # docroot: <relative_path> # Relative path to the directory containing index.php.
 
-# php_version: "7.4"  # PHP version to use, "5.6", "7.0", "7.1", "7.2", "7.3", "7.4" "8.0"
+# php_version: "7.4"  # PHP version to use, "5.6", "7.0", "7.1", "7.2", "7.3", "7.4", "8.0", "8.1"
 
 # You can explicitly specify the webimage, dbimage, dbaimage lines but this
 # is not recommended, as the images are often closely tied to ddev's' behavior,
@@ -62,10 +62,10 @@ web_environment: []
 # see https://en.wikipedia.org/wiki/List_of_tz_database_time_zones
 # For example Europe/Dublin or MST7MDT
 
-# composer_version: ""
-# if composer_version:"" it will use the current ddev default composer release.
+# composer_version: "2"
+# if composer_version:"2" it will use the most recent composer v2
 # It can also be set to "1", to get most recent composer v1
-# or "2" for most recent composer v2.
+# or "" for the default v2 created at release time.
 # It can be set to any existing specific composer version.
 # After first project 'ddev start' this will not be updated until it changes
 
@@ -82,7 +82,7 @@ web_environment: []
 # Please take care with this because it can cause great confusion.
 
 # upload_dir: custom/upload/dir
-# would set the destination path for ddev import-files to custom/upload/dir.
+# would set the destination path for ddev import-files to <docroot>/custom/upload/dir 
 
 # working_dir:
 #   web: /var/www/html

examples/drupal/drupal-9/README.md

@@ -0,0 +1,11 @@
+# Drupal 9
+
+This directory contains an example Drupal 9 repository, setup for Druxt.
+
+## Get started
+
+```
+ddev start
+ddev drupal-install
+ddev drush user:login
+```

examples/drupal/drupal-9/composer.json

@@ -31,7 +31,12 @@
     "minimum-stability": "dev",
     "prefer-stable": true,
     "config": {
-        "sort-packages": true
+        "sort-packages": true,
+        "allow-plugins": {
+            "composer/installers": true,
+            "drupal/core-composer-scaffold": true,
+            "drupal/core-project-message": true
+        }
     },
     "extra": {
         "drupal-scaffold": {

package.json

@@ -52,5 +52,6 @@
     "vue": "2.6.14",
     "vue-jest": "3.0.7",
     "vue-template-compiler": "2.6.14"
-  }
+  },
+  "packageManager": "[email protected]"
 }

packages/blocks/CHANGELOG.md

@@ -1,5 +1,38 @@
 # druxt-blocks
 
+## 0.15.0
+
+### Minor Changes
+
+- b79701c: Added detailed debug information for the DruxtBlock component.
+- 1db9584: feat(#429): Added watch for `id` and `uuid` to the DruxtBlock component.
+- b79701c: feat(#249): Improved DruxtBlock and DruxtBlockRegion storybook stories and documentation.
+- 6d763ce: feat(#112): Added DruxtBlocksRegionMixin
+
+  ```js
+  import { DruxtBlocksRegionMixin } from "druxt-blocks";
+  export default {
+    mixins: [DruxtBlocksRegionMixin]
+  };
+  ```
+
+- 34d8397: feat(#429): Added watch for `name` and `theme` to the DruxtBlockRegion component.
+
+### Patch Changes
+
+- d7e92b2: feat(#249): Fixed errors in storybook.
+- Updated dependencies [b79701c]
+- Updated dependencies [b79701c]
+- Updated dependencies [b79701c]
+- Updated dependencies [b79701c]
+- Updated dependencies [b79701c]
+- Updated dependencies [d7e92b2]
+- Updated dependencies [b79701c]
+- Updated dependencies [b79701c]
+  - [email protected]
+  - [email protected]
+  - [email protected]
+
 ## 0.14.5
 
 ### Patch Changes

packages/blocks/package.json

@@ -1,6 +1,6 @@
 {
   "name": "druxt-blocks",
-  "version": "0.14.5",
+  "version": "0.15.0",
   "description": "Drupal Block and Block Region Druxt components.",
   "keywords": [
     "block",
@@ -44,9 +44,9 @@
   "dependencies": {
     "axios": "^0.21.1",
     "drupal-jsonapi-params": "^1.1.12",
-    "druxt": "^0.16.0",
-    "druxt-entity": "^0.23.0",
-    "druxt-router": "^0.25.0"
+    "druxt": "^0.17.0",
+    "druxt-entity": "^0.24.0",
+    "druxt-router": "^0.26.0"
   },
   "optionalDependencies": {
     "vue": "^2.6.14",

packages/blocks/src/components/DruxtBlock.vue

@@ -4,13 +4,37 @@ import DruxtModule from 'druxt/dist/components/DruxtModule.vue'
 import { mapActions } from 'vuex'
 
 /**
- * Renders a Drupal Block by UUID or Drupal's internal ID.
+ * The DruxtBlock component is used to render a Drupal Block by UUID or Drupal's
+ * internal ID.
  *
- * @example @lang vue
+ * While the DruxtBlock component can't automatically render every Drupal block,
+ * it does provide the Block settings to a targetted Druxt wrapper component for
+ * manual theming.
+ *
+ * @example <caption>Render a block using **id**</caption> @lang vue
  * <DruxtBlock id="umami_branding" />
  *
- * @example @lang vue
+ * @example <caption>Render a block using **uuid**</caption> @lang vue
  * <DruxtBlock uuid="59104acd-88e1-43c3-bd5f-35800f206394" />
+ *
+ * @example <caption>DruxtBlock Wrapper component boilerplate</caption> @lang vue
+ * <template>
+ *   <DruxtDebug :json="block" />
+ * </template>
+ *
+ * <script>
+ * import { DruxtBlocksBlockMixin } from 'druxt-blocks'
+ * export default {
+ *   mixins: [DruxtBlocksBlockMixin]
+ * }
+ *
+ * @example <caption>DruxtBlock with template injection</caption> @lang vue
+ * <DruxtBlock id="umami_branding">
+ *   <template #default="{ block }">
+ *     <!-- Do whatever you want here -->
+ *     <DruxtDebug :json="block" />
+ *   </template>
+ * </DruxtBlock>
  */
 export default {
   name: 'DruxtBlock',
@@ -37,6 +61,8 @@ export default {
     /**
      * The Block Entity UUID.
      *
+     * If used, the **id** prop will be ignored.
+     *
      * @type {string}
      *
      * @example @lang vue
@@ -70,6 +96,16 @@ export default {
     block: ({ resource }) => (resource || {}).data,
   },
 
+  watch: {
+    id() {
+      this.$fetch()
+    },
+
+    uuid() {
+      this.$fetch()
+    }
+  },
+
   methods: {
     /**
      * Maps Vuex action to methods.
@@ -91,6 +127,8 @@ export default {
      * @returns {ComponentOptions}
      */
     componentOptions: ({ block }) => {
+      if (!block) return []
+
       // Get Plugin and Plugin ID data.
       let plugin = block.attributes.plugin || ''
       let pluginId = null
@@ -163,13 +201,29 @@ export default {
       const scopedSlots = {}
 
       // Debug data.
-      scopedSlots.debug = () => h('DruxtDebug',
-        { props: { summary: `Missing wrapper component for '${((this.block || {}).attributes || {}).drupal_internal__id}'`} },
-        [
-          h('label', ['Component options:', h('ul', this.component.options.map((s) => h('li', [s])))]),
-          h('label', ['Block settings:', h('pre', [JSON.stringify(((this.block || {}).attributes || {}).settings, null, '  ')])])
+      /* @slot Debug information */
+      scopedSlots.default = () => {
+        let summary = `Placeholder for the '${((this.block || {}).attributes || {}).drupal_internal__id}' block.`
+        let description = [
+          h('p', 'DruxtBlocks knows that a block can be rendered, and has information provided by Drupal, but not enough to automatically determine the behaviour of the block.'),
+          h('p', 'To render this block manually, create a Nuxt component with one of the following component options.'),
         ]
-      )
+
+        // Ensure an ID or UUID.
+        if (!this.id && !this.uuid) {
+          summary = "Missing required 'id' or 'uuid' prop."
+          description = [h('p', "The DruxtBlock component requires either the 'id' or 'uuid' prop to be set.")]
+        }
+
+        return h('DruxtDebug',
+          { props: { summary } },
+          [
+            h('div', description),
+            !!this.component.options.length && h('label', ['Component options:', h('ul', this.component.options.map((s) => h('li', [s])))]),
+            ((this.block || {}).attributes || {}).settings && h('label', ['Block settings:', h('pre', [JSON.stringify(this.block.attributes.settings, null, '  ')])])
+          ]
+        )
+      }
 
       return scopedSlots
     },