From beecae930ab81730e2e303c2febe67359535318e Mon Sep 17 00:00:00 2001 From: Stuart Clark Date: Tue, 27 Aug 2024 14:08:23 +1000 Subject: [PATCH] feat(#693): update druxt-breadcrumb for @nuxt/kit --- packages/breadcrumb/README.md | 2 +- packages/breadcrumb/package.json | 7 ++- packages/breadcrumb/src/index.js | 23 +++---- packages/breadcrumb/src/nuxt/index.js | 67 +++++++++++++++++++++ packages/breadcrumb/src/nuxtModule.js | 57 ------------------ packages/breadcrumb/test/nuxt/index.test.js | 24 ++++++++ packages/breadcrumb/test/nuxtModule.test.js | 23 ------- 7 files changed, 106 insertions(+), 97 deletions(-) create mode 100644 packages/breadcrumb/src/nuxt/index.js delete mode 100644 packages/breadcrumb/src/nuxtModule.js create mode 100644 packages/breadcrumb/test/nuxt/index.test.js delete mode 100644 packages/breadcrumb/test/nuxtModule.test.js diff --git a/packages/breadcrumb/README.md b/packages/breadcrumb/README.md index 25dcb25f4..8e61a53e2 100644 --- a/packages/breadcrumb/README.md +++ b/packages/breadcrumb/README.md @@ -23,7 +23,7 @@ Add module to `nuxt.config.js` ```js module.exports = { - modules: ['druxt-breadcrumb'], + modules: ['druxt-breadcrumb/nuxt'], druxt: { baseUrl: 'https://demo-api.druxtjs.org', }, diff --git a/packages/breadcrumb/package.json b/packages/breadcrumb/package.json index 7958e1a45..7623d7324 100644 --- a/packages/breadcrumb/package.json +++ b/packages/breadcrumb/package.json @@ -33,17 +33,20 @@ "require": "./dist/druxt-breadcrumb.ssr.js", "import": "./dist/druxt-breadcrumb.esm.js" }, - "./components/*": "./dist/components/*" + "./components/*": "./dist/components/*", + "./nuxt": "./nuxt/index.js" }, "main": "dist/druxt-breadcrumb.ssr.js", "module": "dist/druxt-breadcrumb.esm.js", "files": [ "dist", + "nuxt", "templates" ], "dependencies": { + "@nuxt/kit": "^3.12.2", "druxt": "^0.24.0", - "druxt-blocks": "^0.17.1", + "druxt-blocks": "^0.17.2", "druxt-router": "^0.31.0" }, "optionalDependencies": { diff --git a/packages/breadcrumb/src/index.js b/packages/breadcrumb/src/index.js index 59708b53e..293d30987 100644 --- a/packages/breadcrumb/src/index.js +++ b/packages/breadcrumb/src/index.js @@ -1,17 +1,3 @@ -import { DruxtBreadcrumbModule } from './nuxtModule' - -/** - * The Nuxt.js module function. - * - * Installs the module functionality in a Nuxt.js frontend. - * - * @type {Function} - * @exports default - * @name DruxtBreadcrumbModule - * @see {@link ./module|DruxtBreadcrumbModule} - */ -export default DruxtBreadcrumbModule - /** * Vue.js Mixin. * @@ -20,3 +6,12 @@ export default DruxtBreadcrumbModule * @see {@link ./mixins/breadcrumb|DruxtBreadcrumbMixin} */ export { DruxtBreadcrumbMixin } from './mixins/breadcrumb' + +/** + * 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("DruxtBreadcrumb Nuxt module must be installed as 'druxt-breadcrumb/nuxt'") +} diff --git a/packages/breadcrumb/src/nuxt/index.js b/packages/breadcrumb/src/nuxt/index.js new file mode 100644 index 000000000..f5c8416c2 --- /dev/null +++ b/packages/breadcrumb/src/nuxt/index.js @@ -0,0 +1,67 @@ +import { defineNuxtModule, installModule } from '@nuxt/kit' +import { join } from 'path' + +/** + * The Nuxt.js module function. + * + * - Adds the Vue.js components to the Nuxt.js frontend. + * + * The module function should not be used directly, but rather installed via yout Nuxt.js configuration file. + * + * Options are set on the root level `druxt` Nuxt.js config object. + * +* @example nuxt.config.js @lang js + * module.exports = { + * modules: [ + * 'druxt-breadcrumb' + * ], + * druxt: { + * baseUrl: 'https://example.com' + * } + * } + * + * @param {object} moduleOptions - Nuxt.js module options object. + */ +const DruxtBreadcrumbModule = defineNuxtModule({ + meta: { + name: 'druxt-breadcrumb', + }, + defaults: { + baseUrl: '', + endpoint: '/jsonapi' + }, + + async setup(moduleOptions, nuxt) { + // Set default options. + const options = { + baseUrl: moduleOptions.baseUrl, + ...nuxt.options?.druxt || {}, + breadcrumb: { + ...nuxt.options?.druxt?.breadcrumb, + ...moduleOptions, + } + } + + // Add dependent module. + await installModule('druxt/nuxt', options, nuxt) + await installModule('druxt-router/nuxt', options, nuxt) + + // Register components directories. + nuxt.hook('components:dirs', dirs => { + dirs.push({ path: join(__dirname, '../dist/components') }) + dirs.push({ path: join(__dirname, '../dist/components/blocks') }) + }) + + // Nuxt Storybook. + // @TODO - @nuxt/kit and @nuxt/storybook aren't compatible. + // nuxt.hook('storybook:config', ({ stories }) => { + // addTemplate({ + // src: resolve(__dirname, '../templates/druxt-breadcrumb.stories.js'), + // fileName: 'stories/druxt-breadcrumb.stories.js', + // }) + // stories.push(resolve(nuxt.options.buildDir, './stories/druxt-breadcrumb.stories.js')) + // }) + } +}) + +export default DruxtBreadcrumbModule diff --git a/packages/breadcrumb/src/nuxtModule.js b/packages/breadcrumb/src/nuxtModule.js deleted file mode 100644 index 754a67bb4..000000000 --- a/packages/breadcrumb/src/nuxtModule.js +++ /dev/null @@ -1,57 +0,0 @@ -import { join, resolve } from 'path' - -/** - * The Nuxt.js module function. - * - * - Adds the Vue.js components to the Nuxt.js frontend. - * - * The module function should not be used directly, but rather installed via yout Nuxt.js configuration file. - * - * Options are set on the root level `druxt` Nuxt.js config object. - * -* @example nuxt.config.js @lang js - * module.exports = { - * modules: [ - * 'druxt-breadcrumb' - * ], - * druxt: { - * baseUrl: 'https://example.com' - * } - * } - * - * @param {object} moduleOptions - Nuxt.js module options object. - */ -const DruxtBreadcrumbModule = async function (moduleOptions = {}) { - // Set default options. - const options = { - baseUrl: moduleOptions.baseUrl, - ...(this.options || {}).druxt || {}, - breadcrumb: { - ...((this.options || {}).druxt || {}).breadcrumb, - ...moduleOptions, - } - } - - // Add dependent module. - await this.addModule(['druxt', options]) - await this.addModule(['druxt-router/nuxt', options]) - - // Register components directories. - this.nuxt.hook('components:dirs', dirs => { - dirs.push({ path: join(__dirname, 'components') }) - dirs.push({ path: join(__dirname, 'components/blocks') }) - }) - - // Nuxt Storybook. - this.nuxt.hook('storybook:config', ({ stories }) => { - this.addTemplate({ - src: resolve(__dirname, '../templates/druxt-breadcrumb.stories.js'), - fileName: 'stories/druxt-breadcrumb.stories.js', - }) - stories.push(resolve(this.options.buildDir, './stories/druxt-breadcrumb.stories.js')) - }) -} - -DruxtBreadcrumbModule.meta = require('../package.json') - -export { DruxtBreadcrumbModule } diff --git a/packages/breadcrumb/test/nuxt/index.test.js b/packages/breadcrumb/test/nuxt/index.test.js new file mode 100644 index 000000000..ec8c20201 --- /dev/null +++ b/packages/breadcrumb/test/nuxt/index.test.js @@ -0,0 +1,24 @@ +import DruxtBreadcrumbModule from '../../src/nuxt' + +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 = { + buildDir: 'build', + druxt: {} + } + await DruxtBreadcrumbModule.setup({}, nuxtMock) +}) diff --git a/packages/breadcrumb/test/nuxtModule.test.js b/packages/breadcrumb/test/nuxtModule.test.js deleted file mode 100644 index 17b9eea5e..000000000 --- a/packages/breadcrumb/test/nuxtModule.test.js +++ /dev/null @@ -1,23 +0,0 @@ -import { DruxtBreadcrumbModule } from '../src/nuxtModule' - -const mock = { - addTemplate: jest.fn(), - nuxt: { - hook: jest.fn((hook, fn) => { - const arg = { - 'components:dirs': [], - 'storybook:config': { stories: [] } - } - return fn(arg[hook]) - }), - }, - DruxtBreadcrumbModule -} - -test('Nuxt module', () => { - mock.options = { - buildDir: 'build', - druxt: {} - } - DruxtBreadcrumbModule.call(mock) -})