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

packages/entity/README.md

@@ -24,7 +24,7 @@ Add module to `nuxt.config.js`
 
 ```js
 module.exports = {
-  modules: ['druxt-entity'],
+  modules: ['druxt-entity/nuxt'],
   druxt: {
     baseUrl: 'https://demo-api.druxtjs.org',
     entity: {

packages/entity/package.json

@@ -35,15 +35,18 @@
       "require": "./dist/druxt-entity.ssr.js",
       "import": "./dist/druxt-entity.esm.js"
     },
-    "./components/*": "./dist/components/*"
+    "./components/*": "./dist/components/*",
+    "./nuxt": "./nuxt/index.js"
   },
   "main": "dist/druxt-entity.ssr.js",
   "module": "dist/druxt-entity.esm.js",
   "files": [
     "dist",
+    "nuxt",
     "templates"
   ],
   "dependencies": {
+    "@nuxt/kit": "^3.12.2",
     "deepmerge": "^4.3.1",
     "drupal-jsonapi-params": "^2.3.1",
     "druxt": "^0.24.0",

packages/entity/src/index.js

@@ -1,17 +1,3 @@
-import { DruxtEntityNuxtModule } from './nuxtModule'
-
-/**
- * The Nuxt.js module function.
- *
- * Installs the module functionality in a Nuxt application.
- *
- * @type {Function}
- * @exports default
- * @name DruxtEntityNuxtModule
- * @see {@link ./nuxtModule|DruxtEntityNuxtModule}
- */
-export default DruxtEntityNuxtModule
-
 /**
  * Vue.js mixins.
  *
@@ -22,3 +8,12 @@ export default DruxtEntityNuxtModule
  * @see {@link ./mixins/field|DruxtFieldMixin}
  */
 export * from './mixins'
+
+/**
+ * Default function to alert user to incorrectly installed module.
+ *
+ * This was added as part of the @nuxt/kit update due to breaking changes.
+ */
+export default () => {
+  throw new Error("DruxtEntity Nuxt module must be installed as 'druxt-entity/nuxt'")
+}

packages/entity/src/nuxt/index.js

@@ -0,0 +1,81 @@
+import { defineNuxtModule, installModule } from '@nuxt/kit'
+import { join } from 'path'
+// import DruxtEntityStorybook from '../nuxtStorybook'
+
+/**
+ * The Nuxt.js module function.
+ *
+ * - Adds dependant modules.
+ * - Adds Nuxt plugin.
+ * - Adds Nuxt Storybook integration.
+ *
+ * The module function should not be used directly, but rather installed via your Nuxt configuration file.
+ *
+ * Options are set on the root level `druxt` Nuxt config object.
+ *
+ * @example @lang js
+ * // `nuxt.config.js`
+ * module.exports = {
+ *   modules: [
+ *     'druxt-entity'
+ *   ],
+ *   druxt: {
+ *     baseUrl: 'https://demo-api.druxtjs.org'
+ *   }
+ * }
+ *
+ * @todo Document options.
+ *
+ * @property {object} options.druxt - DruxtJS root level options.
+ * @property {string} options.druxt.baseUrl - Base URL of Drupal JSON:API backend.
+ */
+const DruxtEntityNuxtModule = defineNuxtModule({
+  meta: {
+    name: 'druxt-entity',
+  },
+  defaults: {
+    baseUrl: '',
+    endpoint: '/jsonapi'
+  },
+
+  async setup(moduleOptions, nuxt) {
+    // Set default options.
+    const options = {
+      baseUrl: moduleOptions.baseUrl,
+      ...nuxt.options?.druxt,
+      entity: {
+        query: {},
+        ...nuxt.options?.druxt?.entity,
+        ...moduleOptions,
+        components: {
+          fields: false,
+          ...nuxt.options?.druxt?.entity?.components,
+          ...moduleOptions?.components
+        }
+      }
+    }
+
+    // Add dependant modules.
+    await installModule('druxt/nuxt', options, nuxt)
+    await installModule('druxt-schema/nuxt', { baseUrl: options.baseUrl }, nuxt)
+
+    // Register components directories.
+    nuxt.hook('components:dirs', dirs => {
+      dirs.push({
+        path: join(__dirname, '../dist/components'),
+        ignore: ['fields']
+      })
+      if (options.entity.components.fields) {
+        dirs.push({ path: join(__dirname, '../dist/components/fields') })
+      }
+    })
+
+    // Nuxt Storybook.
+    // @TODO - @nuxt/kit and @nuxt/storybook aren't compatible.
+    // this.nuxt.hook('storybook:config', async ({ stories }) => {
+    //   await DruxtEntityStorybook.call(this, { stories })
+    // })
+  }
+})
+
+export default DruxtEntityNuxtModule

packages/entity/test/components/__snapshots__/DruxtEntity.test.js.snap

@@ -50,9 +50,7 @@ exports[`DruxtEntity missing schema 1`] = `
           <option>DruxtEntityFileFile</option>
           <option>DruxtEntityFile</option>
           <option>DruxtEntityDefault</option>
-        </select> <button>
-          Create
-        </button></div>
+        </select></div>
       <details>
         <summary>JSON:API resource</summary><pre><code>{
   "type": "file--file",

packages/entity/test/nuxt/index.test.js

@@ -0,0 +1,26 @@
+import DruxtEntityNuxtModule from '../../src/nuxt'
+
+// jest.mock('../src/nuxtStorybook')
+
+jest.mock('@nuxt/kit', () => ({
+  defineNuxtModule: (module) => module,
+  installModule: jest.fn(),
+}))
+
+const nuxtMock = {
+  hook: jest.fn((hook, fn) => {
+    const arg = {
+      'components:dirs': [],
+      'storybook:config': { stories: [] }
+    }
+    return fn(arg[hook])
+  }),
+}
+
+test('Nuxt module', async () => {
+  nuxtMock.options = {
+    druxt: {},
+    modules: [],
+  }
+  await DruxtEntityNuxtModule.setup({}, nuxtMock)
+})

packages/entity/test/nuxtStorybook.test.js → packages/entity/test/nuxt/storybook.test.js

@@ -1,4 +1,4 @@
-import DruxtEntityStorybook from '../src/nuxtStorybook'
+import DruxtEntityStorybook from '../../src/nuxt/storybook'
 
 jest.mock('axios')