From f6b4a664e4f6e22bede68f44c13e9cf133ce0822 Mon Sep 17 00:00:00 2001
From: Stuart Clark <stu@rtclark.net>
Date: Fri, 28 Oct 2022 11:40:14 +1100
Subject: [PATCH] feat(#578): add missing theme component helper (#580)

* feat(#578): add DruxtDevelTemplate component

* feat(#578): update missing template message

* chore(#578): update template formatting

* chore(#578): fix broken test

* feat(#578): update missing template message

* chore: update entity mixin

* feat(#578): update missing default slot message

* chore(#578): validate path

* chore(#578): update test coverage

* chore(#578): add rate limiter

* chore: fix breaking test

* chore(#578): add test coverage for template tool

* chore(#578): update ci

* chore(#578): update slot message and description

* feat(#578): added support for devel template tool

* chore(#578): update template string validation

* chore(#578): add conditional defaults

* feat(#578): add template support to block region

* feat(#578): add support for template tool

* feat(#578): update debug value

* feat(#578): add support for template tool

* feat(#578): add support for the template tool

* feat(#547): add support for the template tool

* chore(#578): fix router slots
---
 .changeset/cyan-kings-wonder.md               |   5 +
 .changeset/lemon-oranges-marry.md             |   5 +
 .changeset/long-bottles-bake.md               |   5 +
 .changeset/long-weeks-pay.md                  |   5 +
 .changeset/metal-clouds-collect.md            |   5 +
 .changeset/rude-lizards-pretend.md            |   5 +
 .changeset/selfish-scissors-wink.md           |   5 +
 .changeset/sharp-glasses-ring.md              |   5 +
 .changeset/slow-owls-burn.md                  |   5 +
 .circleci/config.yml                          |   4 +-
 .../e2e/nuxt/druxt-devel-template.cy.js       |  36 ++++++
 .../e2e/{ => nuxt}/umami-homepage.cy.js       |   0
 .../e2e/{ => storybook}/storybook.cy.js       |   0
 package.json                                  |   4 +-
 packages/blocks/src/components/DruxtBlock.vue |  27 +++--
 .../src/components/DruxtBlockRegion.vue       |  12 +-
 .../blocks/test/components/DruxtBlock.test.js |   2 +
 .../src/components/DruxtBreadcrumb.vue        |  10 ++
 packages/druxt/package.json                   |   6 +-
 packages/druxt/src/components/DruxtDebug.vue  |  29 ++++-
 .../src/components/DruxtDevelTemplate.vue     |  51 ++++++++
 packages/druxt/src/components/DruxtModule.vue |   9 +-
 packages/druxt/src/nuxt/index.js              |   9 ++
 .../druxt/src/server-middleware/template.js   | 111 ++++++++++++++++++
 packages/druxt/test/nuxt/index.test.js        |  17 ++-
 .../entity/src/components/DruxtEntity.vue     |  29 ++++-
 packages/entity/src/components/DruxtField.vue |  22 +++-
 packages/entity/src/mixins/entity.js          |   8 +-
 .../test/components/DruxtEntity.test.js       |  10 +-
 .../entity/test/components/DruxtField.test.js |   2 +
 .../__snapshots__/DruxtEntity.test.js.snap    |  30 +++--
 packages/menu/src/components/DruxtMenu.vue    |  10 ++
 .../router/src/components/DruxtRouter.vue     |  10 ++
 packages/site/src/components/DruxtSite.vue    |   7 ++
 packages/views/src/components/DruxtView.vue   |  10 ++
 .../views/src/components/DruxtViewsFilter.vue |  12 +-
 .../src/components/DruxtViewsFilters.vue      |  10 ++
 .../views/src/components/DruxtViewsPager.vue  |  10 ++
 .../views/src/components/DruxtViewsSorts.vue  |  10 ++
 yarn.lock                                     |  28 +++++
 40 files changed, 536 insertions(+), 44 deletions(-)
 create mode 100644 .changeset/cyan-kings-wonder.md
 create mode 100644 .changeset/lemon-oranges-marry.md
 create mode 100644 .changeset/long-bottles-bake.md
 create mode 100644 .changeset/long-weeks-pay.md
 create mode 100644 .changeset/metal-clouds-collect.md
 create mode 100644 .changeset/rude-lizards-pretend.md
 create mode 100644 .changeset/selfish-scissors-wink.md
 create mode 100644 .changeset/sharp-glasses-ring.md
 create mode 100644 .changeset/slow-owls-burn.md
 create mode 100644 examples/druxt-site/test/cypress/e2e/nuxt/druxt-devel-template.cy.js
 rename examples/druxt-site/test/cypress/e2e/{ => nuxt}/umami-homepage.cy.js (100%)
 rename examples/druxt-site/test/cypress/e2e/{ => storybook}/storybook.cy.js (100%)
 create mode 100644 packages/druxt/src/components/DruxtDevelTemplate.vue
 create mode 100644 packages/druxt/src/server-middleware/template.js

diff --git a/.changeset/cyan-kings-wonder.md b/.changeset/cyan-kings-wonder.md
new file mode 100644
index 000000000..3b66482a4
--- /dev/null
+++ b/.changeset/cyan-kings-wonder.md
@@ -0,0 +1,5 @@
+---
+"druxt-views": minor
+---
+
+feat(#578): updated components to support the DruxtDevelTemplate tool.
diff --git a/.changeset/lemon-oranges-marry.md b/.changeset/lemon-oranges-marry.md
new file mode 100644
index 000000000..ac2cfec36
--- /dev/null
+++ b/.changeset/lemon-oranges-marry.md
@@ -0,0 +1,5 @@
+---
+"druxt": minor
+---
+
+feat(#578): added DruxtDevelTemplate component to simplify template creation in development mode.
diff --git a/.changeset/long-bottles-bake.md b/.changeset/long-bottles-bake.md
new file mode 100644
index 000000000..e85dab4c6
--- /dev/null
+++ b/.changeset/long-bottles-bake.md
@@ -0,0 +1,5 @@
+---
+"druxt-site": minor
+---
+
+feat(#578): updated component to support the DruxtDevelTemplate tool.
diff --git a/.changeset/long-weeks-pay.md b/.changeset/long-weeks-pay.md
new file mode 100644
index 000000000..7c1a349e5
--- /dev/null
+++ b/.changeset/long-weeks-pay.md
@@ -0,0 +1,5 @@
+---
+"druxt-entity": minor
+---
+
+feat(#578): updated missing schema/vue component message with DruxtDevelTemplate tool.
diff --git a/.changeset/metal-clouds-collect.md b/.changeset/metal-clouds-collect.md
new file mode 100644
index 000000000..53a8d6ff5
--- /dev/null
+++ b/.changeset/metal-clouds-collect.md
@@ -0,0 +1,5 @@
+---
+"druxt-menu": minor
+---
+
+feat(#578): updated components to support the DruxtDevelTemplate tool.
diff --git a/.changeset/rude-lizards-pretend.md b/.changeset/rude-lizards-pretend.md
new file mode 100644
index 000000000..c70c2b3f9
--- /dev/null
+++ b/.changeset/rude-lizards-pretend.md
@@ -0,0 +1,5 @@
+---
+"druxt-router": minor
+---
+
+feat(#578): updated component to support the DruxtDevelTemplate tool.
diff --git a/.changeset/selfish-scissors-wink.md b/.changeset/selfish-scissors-wink.md
new file mode 100644
index 000000000..a9bb8ba2e
--- /dev/null
+++ b/.changeset/selfish-scissors-wink.md
@@ -0,0 +1,5 @@
+---
+"druxt": minor
+---
+
+feat(#578): updated missing default slot message with DruxtDevelTemplate tool.
diff --git a/.changeset/sharp-glasses-ring.md b/.changeset/sharp-glasses-ring.md
new file mode 100644
index 000000000..1069116be
--- /dev/null
+++ b/.changeset/sharp-glasses-ring.md
@@ -0,0 +1,5 @@
+---
+"druxt-breadcrumb": minor
+---
+
+feat(#578): updated component to support the DruxtDevelTemplate tool.
diff --git a/.changeset/slow-owls-burn.md b/.changeset/slow-owls-burn.md
new file mode 100644
index 000000000..589910a71
--- /dev/null
+++ b/.changeset/slow-owls-burn.md
@@ -0,0 +1,5 @@
+---
+"druxt-blocks": minor
+---
+
+feat(#578): updated missing vue component message with DruxtDevelTemplate tool.
diff --git a/.circleci/config.yml b/.circleci/config.yml
index b67b6b7ef..0636ae7d6 100644
--- a/.circleci/config.yml
+++ b/.circleci/config.yml
@@ -117,10 +117,10 @@ jobs:
 
       - run:
           name: Run DruxtSite end-to-end tests
-          command: yarn start-server-and-test 'yarn example:druxt-site' http://localhost:3000 'npx cypress run --project examples/druxt-site/test --spec examples/druxt-site/test/cypress/e2e/umami-*.cy.js --record --tag examples-druxt-site'
+          command: yarn start-server-and-test 'yarn example:druxt-site' http://localhost:3000 'npx cypress run --project examples/druxt-site/test --spec "examples/druxt-site/test/cypress/e2e/nuxt/*.cy.js" --record --tag examples-druxt-site'
       - run:
           name: Run DruxtSite storybook end-to-end tests
-          command: yarn start-server-and-test 'yarn example:druxt-site:storybook --port 3000' http://localhost:3000 'npx cypress run --project examples/druxt-site/test --spec examples/druxt-site/test/cypress/e2e/storybook.cy.js --record --tag examples-druxt-site-storybook'
+          command: yarn start-server-and-test 'yarn example:druxt-site:storybook --port 3000' http://localhost:3000 'npx cypress run --project examples/druxt-site/test --spec "examples/druxt-site/test/cypress/e2e/storybook/*.cy.js" --record --tag examples-druxt-site-storybook'
       - store_artifacts:
           path: ./examples/druxt-site/test/cypress/screenshots
       - store_artifacts:
diff --git a/examples/druxt-site/test/cypress/e2e/nuxt/druxt-devel-template.cy.js b/examples/druxt-site/test/cypress/e2e/nuxt/druxt-devel-template.cy.js
new file mode 100644
index 000000000..5aae7b63c
--- /dev/null
+++ b/examples/druxt-site/test/cypress/e2e/nuxt/druxt-devel-template.cy.js
@@ -0,0 +1,36 @@
+/* global cy, it */
+
+it('DruxtDevelTemplate tool', () => {
+  // Given I visit the homepage.
+  cy.visit('/')
+
+  // Umami Search block.
+  const searchBlock = '[data-fetch-key^="DruxtBlock:dc9cc806-d5d5-4187-af7a-f9d5b13fea8b:0"]'
+
+  // I see a DruxtDebug component.
+  cy.get(searchBlock)
+    .find('details summary')
+    .first()
+    .should('contain.text', "[DruxtBlock] Missing Vue template for the 'umami_search' block")
+    .click()
+
+  // It has 5 theme component options.
+  cy.get(searchBlock)
+    .find('select option')
+    .should('have.length', 5)
+
+  // I create the DruxtBlockSearchFormBlock component
+  cy.get(searchBlock)
+    .find('select')
+    .select('DruxtBlockSearchFormBlock')
+  cy.get(searchBlock)
+    .find('button')
+    .click()
+
+  // cy.wait(5000)
+  // cy.get(searchBlock)
+  //   .find('details summary')
+  //   .first()
+  //   .should('contain.text', "[DruxtBlockSearchFormBlock] Debug")
+  //   .click()
+})
diff --git a/examples/druxt-site/test/cypress/e2e/umami-homepage.cy.js b/examples/druxt-site/test/cypress/e2e/nuxt/umami-homepage.cy.js
similarity index 100%
rename from examples/druxt-site/test/cypress/e2e/umami-homepage.cy.js
rename to examples/druxt-site/test/cypress/e2e/nuxt/umami-homepage.cy.js
diff --git a/examples/druxt-site/test/cypress/e2e/storybook.cy.js b/examples/druxt-site/test/cypress/e2e/storybook/storybook.cy.js
similarity index 100%
rename from examples/druxt-site/test/cypress/e2e/storybook.cy.js
rename to examples/druxt-site/test/cypress/e2e/storybook/storybook.cy.js
diff --git a/package.json b/package.json
index cfd069877..de911d31b 100644
--- a/package.json
+++ b/package.json
@@ -23,9 +23,9 @@
     "docs:test:open": "start-server-and-test docs:dev http://localhost:3000 'npx cypress open --project docs/nuxt/test'",
     "example:druxt-site": "cd examples/druxt-site && yarn && yarn dev",
     "example:druxt-site:storybook": "cd examples/druxt-site && yarn && yarn storybook",
-    "example:druxt-site:storybook:test": "start-server-and-test 'yarn example:druxt-site:storybook --port 3000' http://localhost:3000 'npx cypress run --project examples/druxt-site/test --spec examples/druxt-site/test/cypress/e2e/storybook.cy.js'",
+    "example:druxt-site:storybook:test": "start-server-and-test 'yarn example:druxt-site:storybook --port 3000' http://localhost:3000 'npx cypress run --project examples/druxt-site/test --spec \"examples/druxt-site/test/cypress/e2e/storybook/*.cy.js\"'",
     "example:druxt-site:storybook:test:open": "start-server-and-test 'yarn example:druxt-site:storybook --port 3000' http://localhost:3000 'npx cypress open --project examples/druxt-site/test'",
-    "example:druxt-site:test": "start-server-and-test 'yarn example:druxt-site' http://localhost:3000 'npx cypress run --project examples/druxt-site/test --spec examples/druxt-site/test/cypress/e2e/umami-*.cy.js'",
+    "example:druxt-site:test": "start-server-and-test 'yarn example:druxt-site' http://localhost:3000 'npx cypress run --project examples/druxt-site/test --spec \"examples/druxt-site/test/cypress/e2e/nuxt/*.cy.j\"s'",
     "example:druxt-site:test:open": "start-server-and-test 'yarn example:druxt-site' http://localhost:3000 'npx cypress open --project examples/druxt-site/test'",
     "lint": "eslint --ext .js,.vue packages/*/src",
     "lint:commit": "commitlint",
diff --git a/packages/blocks/src/components/DruxtBlock.vue b/packages/blocks/src/components/DruxtBlock.vue
index e256bda0a..703003687 100644
--- a/packages/blocks/src/components/DruxtBlock.vue
+++ b/packages/blocks/src/components/DruxtBlock.vue
@@ -212,14 +212,15 @@ export default {
       // Debug data.
       /* @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.'),
-        ]
+        let summary, description
 
+        if ((this.block || {}).attributes) {
+          summary = `Missing Vue template for the '${this.block.attributes.drupal_internal__id}' block`
+          description = [
+            h('p', `Create a Druxt theme component to render the "${this.block.attributes.settings.label}" block.`),
+          ]
         // Ensure an ID or UUID.
-        if (!this.id && !this.uuid) {
+        } else 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.")]
         }
@@ -228,14 +229,24 @@ export default {
           { 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, '  ')])])
+            !!this.component.options.length && h('DruxtDevelTemplate', { props: { options: this.component.options }}),
+            !!this.block && h('details', [h('summary', 'JSON:API resource'), h('pre', [h('code', [JSON.stringify(this.block, null, '  ')])])])
           ]
         )
       }
 
       return scopedSlots
     },
+
+    /**
+     * Druxt development template tool configuration.
+     */
+    template: {
+      debug: 'block',
+      mixins: {
+        'DruxtBlocksBlockMixin': 'druxt-blocks'
+      }
+    }
   },
 }
 
diff --git a/packages/blocks/src/components/DruxtBlockRegion.vue b/packages/blocks/src/components/DruxtBlockRegion.vue
index 28514aa37..e70d78349 100644
--- a/packages/blocks/src/components/DruxtBlockRegion.vue
+++ b/packages/blocks/src/components/DruxtBlockRegion.vue
@@ -231,7 +231,17 @@ export default {
 
       return scopedSlots
     },
-  },
+
+    /**
+     * Druxt development template tool configuration.
+     */
+    template: {
+      debug: '{ blocks, name, theme }',
+      mixins: {
+        'DruxtBlocksRegionMixin': 'druxt-blocks'
+      }
+    }
+  }
 }
 
 /**
diff --git a/packages/blocks/test/components/DruxtBlock.test.js b/packages/blocks/test/components/DruxtBlock.test.js
index 6fd85f59e..5b3fa3567 100644
--- a/packages/blocks/test/components/DruxtBlock.test.js
+++ b/packages/blocks/test/components/DruxtBlock.test.js
@@ -1,3 +1,5 @@
+/* global beforeEach, describe, expect, jest, test */
+
 import 'regenerator-runtime/runtime'
 import { createLocalVue, mount } from '@vue/test-utils'
 import Vuex from 'vuex'
diff --git a/packages/breadcrumb/src/components/DruxtBreadcrumb.vue b/packages/breadcrumb/src/components/DruxtBreadcrumb.vue
index b18fcb470..92e83f2d9 100644
--- a/packages/breadcrumb/src/components/DruxtBreadcrumb.vue
+++ b/packages/breadcrumb/src/components/DruxtBreadcrumb.vue
@@ -224,6 +224,16 @@ export default {
 
       return scopedSlots
     },
+
+    /**
+     * Druxt development template tool configuration.
+     */
+    template: {
+      debug: 'crumbs',
+      mixins: {
+        'DruxtBreadcrumbMixin': 'druxt-breadcrumb'
+      }
+    }
   },
 }
 
diff --git a/packages/druxt/package.json b/packages/druxt/package.json
index 80ddeb47d..4c5206689 100644
--- a/packages/druxt/package.json
+++ b/packages/druxt/package.json
@@ -28,7 +28,9 @@
       "require": "./dist/druxt.ssr.js",
       "import": "./dist/druxt.esm.js"
     },
-    "./components/*": "./dist/components/*"
+    "./components/*": "./dist/components/*",
+    "./server-middleware/*": "./dist/server-middleware/*",
+    "./dist/server-middleware/template.mjs": "./dist/server-middleware/template.mjs"
   },
   "main": "dist/druxt.ssr.js",
   "module": "dist/druxt.esm.js",
@@ -42,6 +44,8 @@
     "chalk": "^4.1.2",
     "deepmerge": "^4.2.2",
     "drupal-jsonapi-params": "^2.1.0",
+    "express-rate-limit": "^6.6.0",
+    "launch-editor": "^2.6.0",
     "md5": "^2.3.0",
     "querystring": "^0.2.1",
     "scule": "^0.3.2"
diff --git a/packages/druxt/src/components/DruxtDebug.vue b/packages/druxt/src/components/DruxtDebug.vue
index 122d23429..f606ee662 100644
--- a/packages/druxt/src/components/DruxtDebug.vue
+++ b/packages/druxt/src/components/DruxtDebug.vue
@@ -1,11 +1,15 @@
 <template>
-  <details v-if="$nuxt.context.isDev">
+  <details
+    v-if="$nuxt.context.isDev"
+    title="Expand for details"
+  >
     <summary v-text="title" />
     <pre v-if="json"><!--
       --><code>{{ JSON.stringify(json, null, '  ') }}</code><!--
     --></pre>
     <!-- @slot Debug content -->
     <slot />
+    <small>Note: This message is only visible when development mode is enabled.</small>
   </details>
 
   <div v-else />
@@ -81,7 +85,30 @@ details {
   padding: 1rem;
 }
 
+details > summary {
+  cursor: pointer;
+  font-weight: 600;
+}
+
+details > summary::after {
+  content: '(expand)';
+  font-size: 0.75rem;
+  color: blue;
+  vertical-align: super;
+  text-decoration: underline;
+  margin-left: 0.25rem;
+}
+
 details[open] > summary {
   margin-bottom: 1rem;
 }
+
+details[open] > summary::after {
+  content: ''
+}
+
+details small:last-of-type {
+  display: block;
+  margin-top: 2rem;
+}
 </style>
diff --git a/packages/druxt/src/components/DruxtDevelTemplate.vue b/packages/druxt/src/components/DruxtDevelTemplate.vue
new file mode 100644
index 000000000..8d5f49a23
--- /dev/null
+++ b/packages/druxt/src/components/DruxtDevelTemplate.vue
@@ -0,0 +1,51 @@
+<template>
+  <div>
+    <select v-model="option">
+      <option
+        v-for="(label, key) of options"
+        :key="key"
+        v-text="label"
+      />
+    </select>
+    <button @click="onClick">
+      Create
+    </button>
+  </div>
+</template>
+
+<script>
+export default {
+  data: () => ({
+    option: undefined,
+  }),
+
+  computed: {
+    module: ({ $parent }) => ($parent.component || {}).options
+      ? $parent
+      : ($parent.$parent || {}).$parent || {},
+    options: ({ module }) => (module.component || {}).options || []
+  },
+
+  created() {
+    this.option = this.options[0]
+  },
+
+  methods: {
+    onClick() {
+      this.$axios({
+        url: '/_druxt/template/add',
+        baseURL: '/',
+        method: 'post',
+        data: {
+          path: this.option,
+          settings: {
+            component: this.module.$options._componentTag,
+            props: Object.entries(this.module.component.propsData || {}).map(([key, value]) => ({ key, type: typeof value })),
+            ...((this.module.$options.druxt || {}).template || {}),
+          }
+        }
+      })
+    }
+  }
+}
+</script>
diff --git a/packages/druxt/src/components/DruxtModule.vue b/packages/druxt/src/components/DruxtModule.vue
index 1a20a1d8e..6f0910de1 100644
--- a/packages/druxt/src/components/DruxtModule.vue
+++ b/packages/druxt/src/components/DruxtModule.vue
@@ -384,12 +384,15 @@ export default {
       // Provide debug data if Nuxt is running in dev mode.
       if (!scopedSlots.default && this.$nuxt.context.isDev)  {
         if (!scopedSlots.debug) {
+          const summary = 'Missing default slot'
+          const description = [h('p', `The "${this.$options._componentTag}" component does not provide a default slot.`), h('p', 'Create a Druxt theme component to render the data as required.')]
           scopedSlots.debug = () => h(
             'DruxtDebug',
-            { props: { summary: 'Missing default slot' } },
+            { props: { summary } },
             [
-              h('label', ['Component options:', h('ul', this.component.options.map((s) => h('li', [s])))]),
-              h('label', ['propsData:', h('pre', [h('code', [JSON.stringify(this.component.propsData, null, '  ')])])])
+              h('div', description),
+              this.component.is === 'DruxtWrapper' && !!this.component.options.length && h('DruxtDevelTemplate', { props: { options: this.component.options }}),
+              h('details', [h('summary', 'Data'), h('pre', [h('code', [JSON.stringify(this.component.propsData, null, '  ')])])])
             ]
           )
         }
diff --git a/packages/druxt/src/nuxt/index.js b/packages/druxt/src/nuxt/index.js
index bb1a065b2..fe26ca0a2 100644
--- a/packages/druxt/src/nuxt/index.js
+++ b/packages/druxt/src/nuxt/index.js
@@ -162,6 +162,15 @@ const DruxtNuxtModule = async function (moduleOptions = {}) {
   this.options.cli.badgeMessages.push(`${chalk.blue.bold('Druxt')} @ v${meta.version}`)
   this.options.cli.badgeMessages.push(`${chalk.bold('API:')} ${chalk.blue.underline(options.baseUrl + options.endpoint)}`)
 
+  // Development mode features.
+  if (this.options.dev) {
+    // Add the template stubber server middleware.
+    this.addServerMiddleware({
+      path: '/_druxt/template',
+      handler: 'druxt/dist/server-middleware/template.mjs'
+    })
+  }
+
   // Nuxt Storybook.
   const self = this
   this.nuxt.hook('storybook:config', async ({ stories }) => {
diff --git a/packages/druxt/src/server-middleware/template.js b/packages/druxt/src/server-middleware/template.js
new file mode 100644
index 000000000..f90c85380
--- /dev/null
+++ b/packages/druxt/src/server-middleware/template.js
@@ -0,0 +1,111 @@
+const bodyParser = require('body-parser')
+const app = require('express')()
+const rateLimit = require('express-rate-limit')
+const fs = require('fs')
+const launch = require('launch-editor')
+const { kebabCase } = require('scule')
+
+const limiter = rateLimit({
+  windowMs: 1 * 60 * 1000, // 1 minute
+  max: 60
+})
+
+app.use(bodyParser.json())
+app.use(limiter)
+
+app.post('/add', async (req, res) => {
+  const { path, settings } = req.body
+  if (!path) throw new Error('Missing required path attribute.')
+  if (typeof path !== 'string' || !/^[a-zA-Z0-1]+$/.test(path)) throw new Error('Unsupported value provided for the path attribute.')
+
+  const prefix = kebabCase(settings.component).replace('-', '/') + '/'
+  const dest = 'components/' + path.replace(settings.component, prefix) + '.vue'
+  const dir = `components/${prefix}`
+
+  let imports = ''
+  let exports = []
+
+  // Use mixin if provided by the module.
+  if (settings.mixins) {
+    imports = Object.entries(settings.mixins).map(([mixin, module]) => `import { ${mixin} } from '${module}'\r\n`) + '\r\n'
+    const mixins = Object.keys(settings.mixins).map((mixin) => mixin)
+    exports.push(`  mixins: [${mixins.join(', ')}],`)
+  }
+
+  // Otherwise define props manually.
+  else if (settings.props) {
+    exports = [
+      '  data: ({ value }) => ({ model: value }),',
+      '  props: [',
+      ...settings.props.map((o) => `    '${o.key}',`),
+      '  ],'
+    ]
+  }
+
+  // Build Druxt settings.
+  if (typeof settings.druxt === 'object') {
+    const druxt = {}
+    for (const [key, value] of Object.entries(settings.druxt)) {
+      const parts = key.split('.')
+      let pointer = druxt
+      let comment = false
+      while (parts.length) {
+        let part = parts.shift()
+        if (part.includes('//')) {
+          part = part.replace('//', '')
+          comment = true
+        }
+        if (parts.length) {
+          pointer[part] = pointer[part] || {}
+          pointer = pointer[part]
+        }
+        else {
+          pointer[part] = (comment ? '// ' : '') + `${part}: ${JSON.stringify(value)}`
+        }
+      }
+    }
+    const formatRecrusive = (item, depth = 2) => {
+      for (const [key, value] of Object.entries(item)) {
+        if (typeof value === 'object') {
+          exports.push(`${" ".repeat(depth * 2)}${key}: {`)
+          formatRecrusive(value, depth + 1)
+          exports.push(`${" ".repeat(depth * 2)}},`)
+        }
+        else if (typeof value === 'string') {
+          exports.push(`${" ".repeat(depth * 2)}${value},`)
+        }
+      }
+    }
+
+    exports.push('\r\n  druxt: {')
+    formatRecrusive(druxt)
+    exports.push('  },')
+  }
+
+  const template = `<!-- Generated by the Druxt devel template server middleware. -->
+<template>
+  <div>
+    <DruxtDebug :json="${settings.debug || 'model'}" />
+  </div>
+</template>
+
+<script>
+${imports}export default {
+${exports.join('\r\n')}
+}
+</script>
+`
+
+  await fs.promises.mkdir(dir, { recursive: true })
+  fs.writeFile(dest, template, (err) => {
+    if (err) {
+      console.error(err.message)
+      res.status(500)
+      return
+    }
+    launch(dest)
+    res.json({ file: dest })
+  })
+})
+
+module.exports = app
diff --git a/packages/druxt/test/nuxt/index.test.js b/packages/druxt/test/nuxt/index.test.js
index e2e6dcf25..475db53a9 100644
--- a/packages/druxt/test/nuxt/index.test.js
+++ b/packages/druxt/test/nuxt/index.test.js
@@ -1,7 +1,9 @@
+/* global beforeEach, describe, expect, jest, test */
+
 import DruxtNuxtModule from '../../src'
 
 const options = {
-  baseUrl: 'https://demo-api.druxtjs.org',
+  baseUrl: 'https://api.umami.demo.druxtjs.org',
   endpoint: '/jsonapi',
 }
 
@@ -12,6 +14,7 @@ describe('DruxtJS Nuxt module', () => {
     mock = {
       addModule: jest.fn(),
       addPlugin: jest.fn(),
+      addServerMiddleware: jest.fn(),
       addTemplate: jest.fn(),
       nuxt: {
         hook: jest.fn((hook, fn) => {
@@ -23,10 +26,10 @@ describe('DruxtJS Nuxt module', () => {
         }),
       },
       options: {
+        buildDir: 'build',
         druxt: options,
         cli: {
           badgeMessages: [],
-          buildDir: 'build',
         }
       },
       DruxtNuxtModule
@@ -180,4 +183,14 @@ describe('DruxtJS Nuxt module', () => {
       '/router/translate-path': options.baseUrl
     })
   })
+
+  test('Devel - Server middleware', () => {
+    // Enable development mode.
+    mock.options.dev = true
+    DruxtNuxtModule.call(mock)
+    expect(mock.addServerMiddleware).toHaveBeenCalledWith({
+      handler: 'druxt/dist/server-middleware/template.mjs',
+      path: '/_druxt/template'
+    })
+  })
 })
diff --git a/packages/entity/src/components/DruxtEntity.vue b/packages/entity/src/components/DruxtEntity.vue
index 90742fbec..87f9a0eed 100644
--- a/packages/entity/src/components/DruxtEntity.vue
+++ b/packages/entity/src/components/DruxtEntity.vue
@@ -376,11 +376,17 @@ export default {
       const scopedSlots = {}
 
       if (!this.schema) {
+        const summary = `Missing display settings for resource type: '${this.type}--${this.mode}'`
+        const description = [
+          h('p', 'Create a Druxt theme component to render the entity.'),
+        ]
+
         scopedSlots.debug = () => h('DruxtDebug',
-          { props: { summary: `Missing schema for '${this.type}--${this.mode}'`} },
+          { props: { summary } },
           [
-            h('label', ['Component options:', h('ul', this.component.options.map((s) => h('li', [s])))]),
-            h('label', ['Entity:', h('pre', [JSON.stringify(this.entity, null, '  ')])]),
+            h('div', description),
+            !!this.component.options.length && h('DruxtDevelTemplate', { props: { options: this.component.options }}),
+            h('details', [h('summary', 'JSON:API resource'), h('pre', [h('code', [JSON.stringify(this.model, null, '  ')])])])
           ]
         )
         return scopedSlots
@@ -413,7 +419,22 @@ export default {
 
       return scopedSlots
     },
-  },
+
+    /**
+     * Druxt development template tool configuration.
+     */
+    template: {
+      debug: '{ entity, schema }',
+      mixins: {
+        'DruxtEntityMixin': 'druxt-entity'
+      },
+      druxt: {
+        'query.//fields': ['name', 'path', 'title'],
+        'query.//include': [],
+        'query.//schema': true
+      }
+    }
+  }
 }
 
 /**
diff --git a/packages/entity/src/components/DruxtField.vue b/packages/entity/src/components/DruxtField.vue
index 5f009f054..2590c60a8 100644
--- a/packages/entity/src/components/DruxtField.vue
+++ b/packages/entity/src/components/DruxtField.vue
@@ -415,12 +415,17 @@ export default {
 
           // Fallback: Provide debug data.
           if (this.$nuxt.context.isDev) {
+            const summary = `Missing Vue template for '${this.schema.id} (${this.schema.type}')`
+            const description = [
+              h('p', 'Create a Druxt theme component to render the field.'),
+            ]
             return h('DruxtDebug',
-              { props: { summary: `Missing wrapper component for '${this.schema.id} (${this.schema.type}')`} },
+              { props: { summary } },
               [
-                h('label', ['Component options:', h('ul', this.component.options.map((s) => h('li', [s])))]),
-                h('label', ['Data:', h('pre', [JSON.stringify(item, null, '  ')])]),
-                h('label', ['Schema:', h('pre', [JSON.stringify(this.schema, null, '  ')])])
+                h('div', description),
+                !!this.component.options.length && h('DruxtDevelTemplate', { props: { options: this.component.options }}),
+                h('details', [h('summary', 'Data'), h('pre', [h('code', [JSON.stringify(item, null, '  ')])])]),
+                !!this.schema && h('details', [h('summary', 'Schema'), h('pre', [h('code', [JSON.stringify(this.schema, null, '  ')])])])
               ]
             )
           }
@@ -445,6 +450,15 @@ export default {
 
       return scopedSlots
     },
+
+    /**
+     * Druxt development template tool configuration.
+     */
+    template: {
+      mixins: {
+        'DruxtFieldMixin': 'druxt-entity'
+      }
+    }
   },
 }
 
diff --git a/packages/entity/src/mixins/entity.js b/packages/entity/src/mixins/entity.js
index 04ed3bf19..7737ca8b8 100644
--- a/packages/entity/src/mixins/entity.js
+++ b/packages/entity/src/mixins/entity.js
@@ -33,8 +33,8 @@ const DruxtEntityMixin = {
      * @type {object}
      */
     fields: {
-      type: Object,
-      required: true,
+      type: [Object, Boolean],
+      default: undefined,
     },
 
     /**
@@ -53,7 +53,7 @@ const DruxtEntityMixin = {
      */
     schema: {
       type: Object,
-      required: true,
+      default: undefined,
     },
 
     /**
@@ -78,7 +78,7 @@ const DruxtEntityMixin = {
      * Array of CSS classes.
      * @type {string[]}
      */
-    classes: ({ schema }) => [
+    classes: ({ schema }) => schema && [
       schema.id,
       schema.resourceType,
       schema.config.entityType,
diff --git a/packages/entity/test/components/DruxtEntity.test.js b/packages/entity/test/components/DruxtEntity.test.js
index 031818ee6..f36523f41 100644
--- a/packages/entity/test/components/DruxtEntity.test.js
+++ b/packages/entity/test/components/DruxtEntity.test.js
@@ -8,6 +8,7 @@ import { DruxtClient, DruxtStore } from '../../../druxt/src'
 import { DruxtSchemaStore } from '../../../schema/src'
 import DruxtEntity from '../../src/components/DruxtEntity.vue'
 import DruxtField from '../../src/components/DruxtField.vue'
+import DruxtDevelTemplate from '../../../druxt/src/components/DruxtDevelTemplate.vue'
 
 let localVue
 
@@ -30,7 +31,14 @@ const mocks = {
 }
 
 const mountComponent = (propsData) => {
-  return mount(DruxtEntity, { localVue, mocks, propsData, store, stubs })
+  return mount(DruxtEntity, {
+    components: { DruxtDevelTemplate },
+    localVue,
+    mocks,
+    propsData,
+    store,
+    stubs
+  })
 }
 
 describe('DruxtEntity', () => {
diff --git a/packages/entity/test/components/DruxtField.test.js b/packages/entity/test/components/DruxtField.test.js
index ce7e01e6c..a8f996efc 100644
--- a/packages/entity/test/components/DruxtField.test.js
+++ b/packages/entity/test/components/DruxtField.test.js
@@ -1,3 +1,5 @@
+/* global beforeEach, describe, expect, jest, test */
+
 import 'regenerator-runtime/runtime'
 import { createLocalVue, mount } from '@vue/test-utils'
 import { getMockResource } from 'druxt-test-utils'
diff --git a/packages/entity/test/components/__snapshots__/DruxtEntity.test.js.snap b/packages/entity/test/components/__snapshots__/DruxtEntity.test.js.snap
index 6cbcadeac..57e18bc9c 100644
--- a/packages/entity/test/components/__snapshots__/DruxtEntity.test.js.snap
+++ b/packages/entity/test/components/__snapshots__/DruxtEntity.test.js.snap
@@ -21,15 +21,23 @@ exports[`DruxtEntity component defaults 2`] = `
 exports[`DruxtEntity missing schema 1`] = `
 "<div>
   <div entity=\\"[object Object]\\" value=\\"[object Object]\\">
-    <druxtdebug-stub summary=\\"Missing schema for 'file--file--default'\\"><label>Component options:<ul>
-          <li>DruxtEntityFileFileDefaultView</li>
-          <li>DruxtEntityFileDefaultView</li>
-          <li>DruxtEntityFileFileDefault</li>
-          <li>DruxtEntityFileDefault</li>
-          <li>DruxtEntityFileFile</li>
-          <li>DruxtEntityFile</li>
-          <li>DruxtEntityDefault</li>
-        </ul></label><label>Entity:<pre>{
+    <druxtdebug-stub summary=\\"Missing display settings for resource type: 'file--file--default'\\">
+      <div>
+        <p>Create a Druxt theme component to render the entity.</p>
+      </div>
+      <div><select>
+          <option>DruxtEntityFileFileDefaultView</option>
+          <option>DruxtEntityFileDefaultView</option>
+          <option>DruxtEntityFileFileDefault</option>
+          <option>DruxtEntityFileDefault</option>
+          <option>DruxtEntityFileFile</option>
+          <option>DruxtEntityFile</option>
+          <option>DruxtEntityDefault</option>
+        </select> <button>
+          Create
+        </button></div>
+      <details>
+        <summary>JSON:API resource</summary><pre><code>{
   \\"type\\": \\"file--file\\",
   \\"id\\": \\"7adbf02c-6e41-40ae-9124-8b4781f9c160\\",
   \\"links\\": {
@@ -64,7 +72,9 @@ exports[`DruxtEntity missing schema 1`] = `
       }
     }
   }
-}</pre></label></druxtdebug-stub>
+}</code></pre>
+      </details>
+    </druxtdebug-stub>
   </div>
 </div>"
 `;
diff --git a/packages/menu/src/components/DruxtMenu.vue b/packages/menu/src/components/DruxtMenu.vue
index fcd26f957..b17c764aa 100644
--- a/packages/menu/src/components/DruxtMenu.vue
+++ b/packages/menu/src/components/DruxtMenu.vue
@@ -342,6 +342,16 @@ export default {
         })),
       }
     },
+
+    /**
+     * Druxt development template tool configuration.
+     */
+    template: {
+      debug: 'items',
+      mixins: {
+        'DruxtMenuMixin': 'druxt-menu'
+      }
+    }
   },
 }
 
diff --git a/packages/router/src/components/DruxtRouter.vue b/packages/router/src/components/DruxtRouter.vue
index 3a235e377..69bc18189 100644
--- a/packages/router/src/components/DruxtRouter.vue
+++ b/packages/router/src/components/DruxtRouter.vue
@@ -267,6 +267,16 @@ export default {
       }
 
       return scopedSlots
+    },
+
+    /**
+     * Druxt development template tool configuration.
+     */
+    template: {
+      debug: '{ path, route }',
+      mixins: {
+        'DruxtRouterMixin': 'druxt-router'
+      }
     }
   }
 }
diff --git a/packages/site/src/components/DruxtSite.vue b/packages/site/src/components/DruxtSite.vue
index 7f21054d7..13727916a 100644
--- a/packages/site/src/components/DruxtSite.vue
+++ b/packages/site/src/components/DruxtSite.vue
@@ -191,6 +191,13 @@ export default {
 
       return scopedSlots
     },
+
+    /**
+     * Druxt development template tool configuration.
+     */
+    template: {
+      debug: '{ props, regions, theme }',
+    }
   }
 }
 
diff --git a/packages/views/src/components/DruxtView.vue b/packages/views/src/components/DruxtView.vue
index f97a9af9b..bc066e186 100644
--- a/packages/views/src/components/DruxtView.vue
+++ b/packages/views/src/components/DruxtView.vue
@@ -640,6 +640,16 @@ export default {
 
       return scopedSlots
     },
+
+    /**
+     * Druxt development template tool configuration.
+     */
+    template: {
+      debug: "{ view, results }",
+      mixins: {
+        'DruxtViewsViewMixin': 'druxt-views'
+      }
+    }
   }
 }
 
diff --git a/packages/views/src/components/DruxtViewsFilter.vue b/packages/views/src/components/DruxtViewsFilter.vue
index 8b5304897..ff9d5e671 100644
--- a/packages/views/src/components/DruxtViewsFilter.vue
+++ b/packages/views/src/components/DruxtViewsFilter.vue
@@ -43,7 +43,17 @@ export default {
      * @param {object} context - The module component ViewModel.
      * @returns {PropsData}
      */
-    propsData: ({ filter, model }) => ({ filter, value: model })
+    propsData: ({ filter, model }) => ({ filter, value: model }),
+
+    /**
+     * Druxt development template tool configuration.
+     */
+    template: {
+      debug: "{ filter, model }",
+      mixins: {
+        'DruxtViewsFilterMixin': 'druxt-views'
+      }
+    }
   },
 }
 
diff --git a/packages/views/src/components/DruxtViewsFilters.vue b/packages/views/src/components/DruxtViewsFilters.vue
index 40db22e19..41885bff3 100644
--- a/packages/views/src/components/DruxtViewsFilters.vue
+++ b/packages/views/src/components/DruxtViewsFilters.vue
@@ -114,6 +114,16 @@ export default {
 
       return scopedSlots
     },
+
+    /**
+     * Druxt development template tool configuration.
+     */
+    template: {
+      debug: "{ options, filters, model, type }",
+      mixins: {
+        'DruxtViewsFiltersMixin': 'druxt-views'
+      }
+    }
   },
 }
 
diff --git a/packages/views/src/components/DruxtViewsPager.vue b/packages/views/src/components/DruxtViewsPager.vue
index 4b6d7b1c3..91291be4b 100644
--- a/packages/views/src/components/DruxtViewsPager.vue
+++ b/packages/views/src/components/DruxtViewsPager.vue
@@ -166,6 +166,16 @@ export default {
           ]),
         ])
       }
+    },
+
+    /**
+     * Druxt development template tool configuration.
+     */
+    template: {
+      debug: "{ count, options, resource, type, model }",
+      mixins: {
+        'DruxtViewsPagerMixin': 'druxt-views'
+      }
     }
   }
 }
diff --git a/packages/views/src/components/DruxtViewsSorts.vue b/packages/views/src/components/DruxtViewsSorts.vue
index d61be5fce..38c1d3b04 100644
--- a/packages/views/src/components/DruxtViewsSorts.vue
+++ b/packages/views/src/components/DruxtViewsSorts.vue
@@ -111,6 +111,16 @@ export default {
           ])))
         ]),
       }
+    },
+
+    /**
+     * Druxt development template tool configuration.
+     */
+    template: {
+      debug: "{ model, options, sorts, type }",
+      mixins: {
+        'DruxtViewsSortsMixin': 'druxt-views'
+      }
     }
   }
 }
diff --git a/yarn.lock b/yarn.lock
index 3021209a0..31ac87982 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -10489,6 +10489,8 @@ __metadata:
     core-js: ^3.25.1
     deepmerge: ^4.2.2
     drupal-jsonapi-params: ^2.1.0
+    express-rate-limit: ^6.6.0
+    launch-editor: ^2.6.0
     md5: ^2.3.0
     querystring: ^0.2.1
     scule: ^0.3.2
@@ -11717,6 +11719,15 @@ __metadata:
   languageName: node
   linkType: hard
 
+"express-rate-limit@npm:^6.6.0":
+  version: 6.6.0
+  resolution: "express-rate-limit@npm:6.6.0"
+  peerDependencies:
+    express: ^4 || ^5
+  checksum: 056e26c30af5eb3904036e6bb912fe485cf2e23eb21e3bb500f0c165fba5ffe0eebc94991b25f1457f78c25185c282a26f2a1dfce0ec3245f7ee2eb5c954ef99
+  languageName: node
+  linkType: hard
+
 "express@npm:^4.17.1":
   version: 4.17.2
   resolution: "express@npm:4.17.2"
@@ -15550,6 +15561,16 @@ fsevents@^1.2.7:
   languageName: node
   linkType: hard
 
+"launch-editor@npm:^2.6.0":
+  version: 2.6.0
+  resolution: "launch-editor@npm:2.6.0"
+  dependencies:
+    picocolors: ^1.0.0
+    shell-quote: ^1.7.3
+  checksum: 48e4230643e8fdb5c14c11314706d58d9f3fbafe2606be3d6e37da1918ad8bfe39dd87875c726a1b59b9f4da99d87ec3e36d4c528464f0b820f9e91e5cb1c02d
+  languageName: node
+  linkType: hard
+
 "lazy-ass@npm:1.6.0, lazy-ass@npm:^1.6.0":
   version: 1.6.0
   resolution: "lazy-ass@npm:1.6.0"
@@ -19737,6 +19758,13 @@ resolve@^1.3.2:
   languageName: node
   linkType: hard
 
+"shell-quote@npm:^1.7.3":
+  version: 1.7.4
+  resolution: "shell-quote@npm:1.7.4"
+  checksum: 2874ea9c1a7c3ebfc9ec5734a897e16533d0d06f2e4cddc22ba3d1cab5cdc07d0f825364c1b1e39abe61236f44d8e60e933c7ad7349ce44de4f5dddc7b4354e9
+  languageName: node
+  linkType: hard
+
 "shlex@npm:2.1.0":
   version: 2.1.0
   resolution: "shlex@npm:2.1.0"