From c4aca0b4228fd3b5453a689e07a640c5e2ee52a6 Mon Sep 17 00:00:00 2001
From: Stuart Clark <stu@rtclark.net>
Date: Tue, 12 Jul 2022 14:09:27 +1000
Subject: [PATCH] fix(#154): add docgen alias (#532)

* fix(#154): add docgen alias

* feat(#154): add extend props

* chore: add workaround for node 17+

* chore(#154): update documentation

* chore(#154): fix docgen
---
 docs/package.json                             |  2 +-
 .../src/components/DruxtBreadcrumb.vue        |  4 +--
 packages/docgen/src/index.js                  | 25 ++++++++++++++++++-
 packages/druxt/src/components/DruxtModule.vue | 17 ++++++++++---
 4 files changed, 41 insertions(+), 7 deletions(-)

diff --git a/docs/package.json b/docs/package.json
index 2619dee3d..651fb8a0c 100644
--- a/docs/package.json
+++ b/docs/package.json
@@ -4,7 +4,7 @@
   "version": "0.1.0",
   "private": true,
   "scripts": {
-    "dev": "nuxt",
+    "dev": "NODE_OPTIONS='--openssl-legacy-provider' nuxt",
     "build": "nuxt build",
     "start": "nuxt start",
     "generate": "nuxt generate",
diff --git a/packages/breadcrumb/src/components/DruxtBreadcrumb.vue b/packages/breadcrumb/src/components/DruxtBreadcrumb.vue
index ab80a44d3..6811e087d 100644
--- a/packages/breadcrumb/src/components/DruxtBreadcrumb.vue
+++ b/packages/breadcrumb/src/components/DruxtBreadcrumb.vue
@@ -44,7 +44,7 @@ export default {
      * @type {boolean}
      * @default true
      * @example @lang vue
-     * <DruxtBreacrumb :home="false" />
+     * <DruxtBreadcrumb :home="false" />
      */
     home: {
       type: Boolean,
@@ -59,7 +59,7 @@ export default {
      * @type {string}
      *
      * @example @lang vue
-     * <DruxtBreacrumb path="/node/1" />
+     * <DruxtBreadcrumb path="/node/1" />
      */
     path: {
       type: String,
diff --git a/packages/docgen/src/index.js b/packages/docgen/src/index.js
index c3accb762..fdc8e15bf 100644
--- a/packages/docgen/src/index.js
+++ b/packages/docgen/src/index.js
@@ -206,7 +206,30 @@ _Note: The contents of this file where automatically generated by the [Druxt Doc
    */
   async processVue(file, templateData) {
     // Get data from vue-docgen-api.
-    const data = await vueDocs.parse(file)
+    const data = await vueDocs.parse(file, {
+      alias: {
+        druxt: path.resolve('packages/druxt')
+      }
+    })
+
+    // Inject extends from vue-docgen-api into jsdoc data.
+    const prefixId = (templateData[0] || {}).id || ''
+    // Props.
+    for (const prop of (data.props || []).filter((prop) => !templateData.map((o) => o.id).includes(`${prefixId}.props.${prop.name}`))) {
+      const item = {
+        id: `${prefixId}.props.${prop.name}`,
+        longname: `${prefixId}.props.${prop.name}`,
+        name: prop.name,
+        kind: 'member',
+        scope: 'static',
+        description: prop.description,
+        memberof: `${prefixId}.props`,
+      }
+      if ((prop.tags || {}).example) {
+        item.examples = [prop.tags.example[0].description.replace('DruxtModule', prefixId.split(':')[1])]
+      }
+      templateData.push(item)
+    }
 
     templateData.map(item => {
       const parts = item.id.split('.')
diff --git a/packages/druxt/src/components/DruxtModule.vue b/packages/druxt/src/components/DruxtModule.vue
index c80a4577b..1a20a1d8e 100644
--- a/packages/druxt/src/components/DruxtModule.vue
+++ b/packages/druxt/src/components/DruxtModule.vue
@@ -39,6 +39,11 @@ export default {
   props: {
     /**
      * The resource langcode.
+     *
+     * @example
+     * <DruxtModule langcode="en" />
+     *
+     * @type {string}
      */
     langcode: {
       type: String,
@@ -46,9 +51,15 @@ export default {
     },
 
     /**
-     * The module value.
+     * The module component model value.
+     *
+     * Used to bypass the Drupal JSON:API fetch, setting the module data
+     * directly.
+     *
+     * @example
+     * <DruxtModule v-model="{ foo: bar }" />
      *
-     * @type {(Array|Boolean|Date|Number|Object|String)}
+     * @type {*}
      * @model
      */
     value: {
@@ -70,7 +81,7 @@ export default {
      *   }"
      * />
      *
-     * @type {(Boolean|Object)}
+     * @type {(boolean|object)}
      */
     wrapper: {
       type: [Boolean, Object],