feat(#693): update druxt for @nuxt/kit

druxt · Aug 30, 2024 · 31fa183 · 31fa183
1 parent beecae9
commit 31fa183
Show file tree

Hide file tree

Showing 12 changed files with 298 additions and 639 deletions.
diff --git a/packages/druxt/package.json b/packages/druxt/package.json
@@ -29,6 +29,7 @@
       "import": "./dist/druxt.esm.js"
     },
     "./components/*": "./dist/components/*",
+    "./nuxt/*": "./nuxt/*",
     "./plugins/*": "./dist/plugins/*",
     "./server-middleware/*": "./dist/server-middleware/*",
     "./dist/server-middleware/template.mjs": "./dist/server-middleware/template.mjs"
@@ -37,9 +38,11 @@
   "module": "dist/druxt.esm.js",
   "files": [
     "dist",
+    "nuxt",
     "templates"
   ],
   "dependencies": {
+    "@nuxt/kit": "^3.12.4",
     "@nuxtjs/axios": "^5.13.6",
     "@nuxtjs/proxy": "^2.1.0",
     "@vue/devtools-api": "^6.6.3",

diff --git a/packages/druxt/src/class.js b/packages/druxt/src/class.js
diff --git a/packages/druxt/src/components/Druxt.vue b/packages/druxt/src/components/Druxt.vue
@@ -129,7 +129,7 @@ export default {
      * Sets the module component and propsData.
      */
     setModuleComponent() {
-      const component = `Druxt${this.module.split('-').map(string => string.charAt(0).toUpperCase() + string.slice(1)).join('')}`
+      const component = `Druxt${this.module?.split('-').map(string => string.charAt(0).toUpperCase() + string.slice(1)).join('')}`
       if (!this.$options.components[component]) {
         return
       }

diff --git a/packages/druxt/src/components/DruxtDevelTemplate.vue b/packages/druxt/src/components/DruxtDevelTemplate.vue
@@ -7,9 +7,10 @@
         v-text="label"
       />
     </select>
-    <button @click="onClick">
+    <!-- @TODO - Re-implement this. -->
+    <!-- <button @click="onClick">
       Create
-    </button>
+    </button> -->
   </div>
 </template>
 
@@ -20,10 +21,10 @@ export default {
   }),
 
   computed: {
-    module: ({ $parent }) => ($parent.component || {}).options
+    module: ({ $parent }) => $parent.component?.options
       ? $parent
-      : ($parent.$parent || {}).$parent || {},
-    options: ({ module }) => (module.component || {}).options || []
+      : $parent.$parent?.$parent || {},
+    options: ({ module }) => module.component?.options || []
   },
 
   created() {
@@ -42,7 +43,7 @@ export default {
             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 || {}),
+            ...(this.module.$options.druxt?.template || {}),
           }
         }
       })

diff --git a/packages/druxt/src/components/DruxtModule.vue b/packages/druxt/src/components/DruxtModule.vue
@@ -130,12 +130,12 @@ export default {
    * }
    */
   async fetch() {
-    if (!(this.$options || {}).druxt) {
+    if (!this.$options?.druxt) {
       return false
     }
 
     // Fetch configuration.
-    if ((this.$options.druxt || {}).fetchConfig) {
+    if (this.$options.druxt?.fetchConfig) {
       try {
         await this.$options.druxt.fetchConfig.call(this)
       } catch(err) {
@@ -145,7 +145,7 @@ export default {
 
     // Build wrapper component object.
     let options = []
-    const hasDefaultTemplate = !!(((this.$vnode || {}).data || {}).scopedSlots || {}).default
+    const hasDefaultTemplate = !!this.$vnode?.data?.scopedSlots?.default
     // Load wrapper components if:
     if (
       // No default template and wrapper isn't false OR
@@ -156,7 +156,7 @@ export default {
       options = this.getModuleComponents()
     }
     let component = {
-      is: (((options.filter(o => o.global) || [])[0] || {}).name || 'DruxtWrapper'),
+      is: options.filter(o => o.global)?.[0]?.name || 'DruxtWrapper',
       options: options.map(o => o.name) || [],
     }
 
@@ -165,12 +165,12 @@ export default {
 
     // Build module settings.
     component.settings = wrapperData.druxt || {}
-    if ((this.$options.druxt || {}).settings) {
+    if (this.$options.druxt?.settings) {
       component.settings = this.$options.druxt.settings(this, component.settings)
     }
 
     // Fetch resource.
-    if ((this.$options.druxt || {}).fetchData) {
+    if (this.$options.druxt?.fetchData) {
       try {
         await this.$options.druxt.fetchData.call(this, component.settings)
       } catch(err) {
@@ -189,7 +189,7 @@ export default {
   },
 
   computed: {
-    lang: ({ langcode, $route }) => langcode || ($route.meta || {}).langcode
+    lang: ({ langcode, $route }) => langcode || $route.meta?.langcode
   },
 
   watch: {
@@ -225,9 +225,9 @@ export default {
     error(err, context = {}) {
       // Build error details.
       const { url } = err.druxt || {}
-      const title = (err.response || {}).statusText || ((((err.response || {}).data || {}).errors || [])[0] || {}).title
-      const summary = (err.response || {}).status
-        ? [(err.response || {}).status, title].filter((s) => s).join(': ')
+      const title = err.response?.statusText || err.response?.data?.error?.[0]?.title
+      const summary = err.response?.status
+        ? [err.response?.status, title].filter((s) => s).join(': ')
         : err.message
 
       // Set the component to a Debug component with error details.
@@ -237,7 +237,7 @@ export default {
         props: {
           json: {
             url,
-            errors: ((err.response || {}).data || {}).errors
+            errors: err.response?.data?.errors
           },
           summary
         }
@@ -251,13 +251,13 @@ export default {
      */
     getModuleComponents() {
       // Ensure that the Druxt module component has `druxt.componentOptions`.
-      if (!(this.$options.druxt || {}).componentOptions) {
+      if (!this.$options.druxt?.componentOptions) {
         return []
       }
       const options = this.$options.druxt.componentOptions.call(this, this)
 
       // Ensure that there available component options are returned.
-      if (!(options || []).length) {
+      if (!options?.length) {
         return []
       }
 
@@ -321,7 +321,7 @@ export default {
      * @return {object}
      */
     getModulePropsData(wrapperProps = {}) {
-      if (!(this.$options.druxt || {}).propsData) {
+      if (!this.$options.druxt?.propsData) {
         return {}
       }
 
@@ -391,7 +391,7 @@ export default {
             { props: { summary } },
             [
               h('div', description),
-              this.component.is === 'DruxtWrapper' && !!this.component.options.length && h('DruxtDevelTemplate', { props: { options: this.component.options }}),
+              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, '  ')])])])
             ]
           )
@@ -437,15 +437,15 @@ export default {
     const self = this
 
     const wrapperData = {
-      class: (this.wrapper || {}).class || undefined,
-      style: (this.wrapper || {}).style || undefined,
-      props: (this.wrapper || {}).propsData || undefined,
+      class: this.wrapper?.class || undefined,
+      style: this.wrapper?.style || undefined,
+      props: this.wrapper?.propsData || undefined,
     }
 
     // Return only wrapper if fetch state is still pending and Druxt hasn't set
     // the available component options.
-    if (this.$fetchState.pending && !this.component.options.length) {
-      return h((this.wrapper || {}).component || 'div', wrapperData)
+    if (this.$fetchState.pending && !this.component.options?.length) {
+      return h(this.wrapper?.component || 'div', wrapperData)
     }
 
     // Prepare attributes.
@@ -458,7 +458,7 @@ export default {
     }
 
     // Return component.
-    return h((this.wrapper || {}).component || 'div', wrapperData, [
+    return h(this.wrapper?.component || 'div', wrapperData, [
       h(this.component.is, {
         attrs,
         on: {

diff --git a/packages/druxt/src/index.js b/packages/druxt/src/index.js
@@ -1,6 +1,3 @@
-import { DruxtNuxtModule } from './nuxt'
-DruxtNuxtModule.meta = require('../package.json')
-
 /**
  * The JSON:API client used by the Druxt Nuxt plugin and DruxtStore.
  *
@@ -15,25 +12,6 @@ DruxtNuxtModule.meta = require('../package.json')
  */
 export { DruxtClient } from './client'
 
-/**
- * The Druxt module for Nuxt.
- *
- * @type {Function}
- * @exports default
- * @name DruxtNuxtModule
- * @see {@link /api/packages/druxt/nuxtModule|DruxtNuxtModule}
- *
- * @example <caption>Installing the Druxt module</caption> @lang js
- * // nuxt.config.js
- * export default {
- *   modules: ['druxt'],
- *   druxt: {
- *     baseUrl: 'https://demo-api.druxtjs.org'
- *   }
- * }
- */
-export default DruxtNuxtModule
-
 /**
  * Vuex module used to interface with the DruxtClient and store resource data.
  *
@@ -54,7 +32,10 @@ export default DruxtNuxtModule
 export { DruxtStore } from './stores/druxt'
 
 /**
- * @deprecated
- * @private
+ * Default function to alert user to incorrectly installed module.
+ *
+ * This was added as part of the @nuxt/kit update due to breaking changes.
  */
-export { DruxtClass } from './class'
+export default () => {
+  throw new Error("Druxt Nuxt module must be installed as 'druxt/nuxt'")
+}