druxt 0.20.0 → 0.21.0

package/dist/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 />
@@ -82,7 +86,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>

package/dist/components/DruxtDevelTemplate.vue

@@ -0,0 +1,53 @@
+<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 })),
+            slots: this.module.component.slots,
+            ...((this.module.$options.druxt || {}).template || {}),
+          }
+        }
+      })
+    }
+  }
+}
+</script>

package/dist/components/DruxtModule.vue

@@ -385,12 +385,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, '  ')])])])
             ]
           )
         }

package/dist/druxt.esm.js

@@ -250,7 +250,7 @@ class DruxtClient {
 }
 
 var name = "druxt";
-var version = "0.20.0";
+var version = "0.21.0";
 var description = "The Fully Decoupled Drupal Framework for Nuxt.js.";
 var keywords = [
 	"cms",
@@ -278,7 +278,10 @@ var exports = {
 		require: "./dist/druxt.ssr.js",
 		"import": "./dist/druxt.esm.js"
 	},
-	"./components/*": "./dist/components/*"
+	"./components/*": "./dist/components/*",
+	"./plugins/*": "./dist/plugins/*",
+	"./server-middleware/*": "./dist/server-middleware/*",
+	"./dist/server-middleware/template.mjs": "./dist/server-middleware/template.mjs"
 };
 var main = "dist/druxt.ssr.js";
 var module = "dist/druxt.esm.js";
@@ -289,23 +292,26 @@ var files = [
 var dependencies = {
 	"@nuxtjs/axios": "^5.13.6",
 	"@nuxtjs/proxy": "^2.1.0",
+	"@vue/devtools-api": "^6.4.5",
 	chalk: "^4.1.2",
 	deepmerge: "^4.2.2",
-	"drupal-jsonapi-params": "^2.0.0",
+	"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.2.1"
+	scule: "^0.3.2"
 };
 var devDependencies = {
-	"@storybook/addon-docs": "^6.4.22"
+	"@storybook/addon-docs": "^6.5.10"
 };
 var peerDependencies = {
 	axios: "*",
 	consola: "*"
 };
 var optionalDependencies = {
-	"core-js": "^3.22.5",
-	vue: "^2.6.14",
+	"core-js": "^3.25.1",
+	vue: "^2.7.10",
 	vuex: "^3.6.2"
 };
 var publishConfig = {
@@ -416,6 +422,16 @@ const DruxtNuxtModule = async function(moduleOptions = {}) {
   this.options.components = (_a = this.options.components) != null ? _a : true;
   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)}`);
+  if (this.options.dev) {
+    this.addServerMiddleware({
+      path: "/_druxt/template",
+      handler: "druxt/dist/server-middleware/template.mjs"
+    });
+    this.addPlugin({
+      src: resolve(__dirname, "../dist/plugins/devtools.mjs"),
+      fileName: "druxt-devtools.js"
+    });
+  }
   const self = this;
   this.nuxt.hook("storybook:config", async ({ stories }) => {
     self.addTemplate({

package/dist/druxt.ssr.js

@@ -263,7 +263,7 @@ class DruxtClient {
 }
 
 var name = "druxt";
-var version = "0.20.0";
+var version = "0.21.0";
 var description = "The Fully Decoupled Drupal Framework for Nuxt.js.";
 var keywords = [
 	"cms",
@@ -291,7 +291,10 @@ var exports$1 = {
 		require: "./dist/druxt.ssr.js",
 		"import": "./dist/druxt.esm.js"
 	},
-	"./components/*": "./dist/components/*"
+	"./components/*": "./dist/components/*",
+	"./plugins/*": "./dist/plugins/*",
+	"./server-middleware/*": "./dist/server-middleware/*",
+	"./dist/server-middleware/template.mjs": "./dist/server-middleware/template.mjs"
 };
 var main = "dist/druxt.ssr.js";
 var module$1 = "dist/druxt.esm.js";
@@ -302,23 +305,26 @@ var files = [
 var dependencies = {
 	"@nuxtjs/axios": "^5.13.6",
 	"@nuxtjs/proxy": "^2.1.0",
+	"@vue/devtools-api": "^6.4.5",
 	chalk: "^4.1.2",
 	deepmerge: "^4.2.2",
-	"drupal-jsonapi-params": "^2.0.0",
+	"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.2.1"
+	scule: "^0.3.2"
 };
 var devDependencies = {
-	"@storybook/addon-docs": "^6.4.22"
+	"@storybook/addon-docs": "^6.5.10"
 };
 var peerDependencies = {
 	axios: "*",
 	consola: "*"
 };
 var optionalDependencies = {
-	"core-js": "^3.22.5",
-	vue: "^2.6.14",
+	"core-js": "^3.25.1",
+	vue: "^2.7.10",
 	vuex: "^3.6.2"
 };
 var publishConfig = {
@@ -429,6 +435,16 @@ const DruxtNuxtModule = async function(moduleOptions = {}) {
   this.options.components = (_a = this.options.components) != null ? _a : true;
   this.options.cli.badgeMessages.push(`${chalk__default["default"].blue.bold("Druxt")} @ v${meta.version}`);
   this.options.cli.badgeMessages.push(`${chalk__default["default"].bold("API:")} ${chalk__default["default"].blue.underline(options.baseUrl + options.endpoint)}`);
+  if (this.options.dev) {
+    this.addServerMiddleware({
+      path: "/_druxt/template",
+      handler: "druxt/dist/server-middleware/template.mjs"
+    });
+    this.addPlugin({
+      src: path.resolve(__dirname, "../dist/plugins/devtools.mjs"),
+      fileName: "druxt-devtools.js"
+    });
+  }
   const self = this;
   this.nuxt.hook("storybook:config", async ({ stories }) => {
     self.addTemplate({

package/dist/plugins/devtools.mjs

@@ -0,0 +1,117 @@
+import Vue from 'vue'
+import { setupDevtoolsPlugin } from '@vue/devtools-api'
+
+Vue.mixin({
+  beforeCreate() {
+    if (process.env.NODE_ENV === 'development') {
+      const createAction = (component, payload) => ({
+        icon: 'save',
+        tooltip: `Create ${component} and open in editor`,
+        action: () => payload.app.$axios({
+          url: '/_druxt/template/add',
+          baseURL: '/',
+          method: 'post',
+          data: {
+            path: component,
+            settings: {
+              component: payload.componentInstance.$options._componentTag,
+              props: Object.entries(payload.componentInstance.component.propsData || {}).map(([key, value]) => ({ key, type: typeof value })),
+              slots: payload.componentInstance.component.slots,
+              ...((payload.componentInstance.$options.druxt || {}).template || {}),
+            }
+          }
+        })
+      })
+      const inspectorId = 'druxt'
+      const stateType = 'druxt'
+
+      setupDevtoolsPlugin({
+        id: 'druxt',
+        label: 'DruxtJS',
+        packageName: 'druxt',
+        homepage: 'https://druxtjs.org',
+        componentStateTypes: [stateType],
+        app: this
+      }, api => {
+        api.addInspector({
+          id: inspectorId,
+          label: 'DruxtJS',
+          icon: 'opacity',
+        })
+
+        api.on.inspectComponent((payload) => {
+          if (payload.instanceData.state && payload.componentInstance.component) {
+            payload.instanceData.state.push({
+              type: stateType,
+              key: '$theme',
+              value: {
+                _custom: {
+                  type: null,
+                  readOnly: true,
+                  display: payload.componentInstance.component.is,
+                  value: payload.componentInstance.component.options.map((option) => ({
+                    _custom: {
+                      type: null,
+                      display: option,
+                      actions: !payload.componentInstance.$nuxt.$options.components[option]
+                        ? [createAction(option, payload)]
+                        : [],
+                    }
+                  })),
+                },
+              },
+            })
+          }
+        })
+
+        api.on.getInspectorTree((payload) => {
+          if (payload.inspectorId === inspectorId) {
+            payload.rootNodes = [
+              {
+                id: 'connect',
+                label: 'Connection details',
+              }
+            ]
+          }
+        })
+
+        api.on.getInspectorState((payload) => {
+          if (payload.inspectorId === inspectorId) {
+            if (payload.nodeId === 'connect') {
+              const { baseUrl, endpoint } = payload.app.$druxt.settings
+              payload.state = {
+                settings: [
+                  {
+                    key: 'baseUrl',
+                    value: baseUrl,
+                  },
+                  {
+                    key: 'endpoint',
+                    value: endpoint,
+                  },
+                ],
+                computed: [
+                  {
+                    key: 'jsonApi',
+                    value: baseUrl + endpoint
+                  }
+                ]
+              }
+            }
+          }
+        })
+
+        api.on.visitComponentTree((payload) => {
+          const node = payload.treeNode
+          if (payload.componentInstance.$options.druxt) {
+            node.tags.push({
+              label: 'druxt',
+              textColor: 0xffffff,
+              backgroundColor: 0x3498dB
+            })
+          }
+        })
+      })
+    }
+  }
+})

package/dist/server-middleware/template.d.ts

@@ -0,0 +1,3 @@
+declare const app: any;
+
+export { app as default };

package/dist/server-middleware/template.mjs

@@ -0,0 +1,105 @@
+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 * 1e3,
+  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-9]+$/.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 = [];
+  let slots = "";
+  if (Array.isArray(settings.slots)) {
+    const items = (settings.slots.length > 1 ? settings.slots.filter((name) => name !== "default") : settings.slots).filter((name) => name !== "debug");
+    slots = items.map((name) => `\r
+    <slot name="${name}" />`).join("");
+  } else if (typeof settings.slots === "string") {
+    slots = `\r
+    <slot name="${settings.slot}" />`;
+  }
+  if (settings.mixins) {
+    imports = Object.entries(settings.mixins).map(([mixin, module2]) => `import { ${mixin} } from '${module2}'\r
+`) + "\r\n";
+    const mixins = Object.keys(settings.mixins).map((mixin) => mixin);
+    exports.push(`  mixins: [${mixins.join(", ")}],`);
+  } else if (settings.props) {
+    exports = [
+      "  data: ({ value }) => ({ model: value }),",
+      "  props: [",
+      ...settings.props.map((o) => `    '${o.key}',`),
+      "  ],"
+    ];
+  }
+  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"}" />${slots}
+  </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;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "druxt",
-  "version": "0.20.0",
+  "version": "0.21.0",
   "description": "The Fully Decoupled Drupal Framework for Nuxt.js.",
   "keywords": [
     "cms",
@@ -28,7 +28,10 @@
       "require": "./dist/druxt.ssr.js",
       "import": "./dist/druxt.esm.js"
     },
-    "./components/*": "./dist/components/*"
+    "./components/*": "./dist/components/*",
+    "./plugins/*": "./dist/plugins/*",
+    "./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",
@@ -39,23 +42,26 @@
   "dependencies": {
     "@nuxtjs/axios": "^5.13.6",
     "@nuxtjs/proxy": "^2.1.0",
+    "@vue/devtools-api": "^6.4.5",
     "chalk": "^4.1.2",
     "deepmerge": "^4.2.2",
-    "drupal-jsonapi-params": "^2.0.0",
+    "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.2.1"
+    "scule": "^0.3.2"
   },
   "devDependencies": {
-    "@storybook/addon-docs": "^6.4.22"
+    "@storybook/addon-docs": "^6.5.10"
   },
   "peerDependencies": {
     "axios": "*",
     "consola": "*"
   },
   "optionalDependencies": {
-    "core-js": "^3.22.5",
-    "vue": "^2.6.14",
+    "core-js": "^3.25.1",
+    "vue": "^2.7.10",
     "vuex": "^3.6.2"
   },
   "publishConfig": {