feat: use @nuxt/components for auto-registration of helper components

nuxt-modules · Nov 11, 2020 · 4ea5796 · 4ea5796
1 parent 3e8e2f8
commit 4ea5796
Show file tree

Hide file tree

Showing 5 changed files with 72 additions and 39 deletions.
diff --git a/docs/content/en/configuration.md b/docs/content/en/configuration.md
@@ -3,7 +3,7 @@ title: Configuration
 description: 'Access text, images, and other media with Nuxt and the Sanity headless CMS.'
 category: Getting started
 position: 3
-version: 0.23
+version: 0.31
 ---
 
 By default, `@nuxtjs/sanity` will look for a `sanity.json` file in your project root directory, and it will read your `projectId` and `dataset` from there.
@@ -96,13 +96,17 @@ Use an ultra-minimal Sanity client for making requests (a fork of [picosanity](h
 
 Add a global `<SanityImage>` component to assist with URL transformations. See [the docs](/helpers/images) for more information.
 
+If you have `components: true` set in your `nuxt.config` file, then this helper will be registered with `@nuxt/components` and imported only where needed, rather than registered globally.
+
 ### `contentHelper`
 
 - Type: **boolean**
 - Default: **`true`**
 
 Add a global `<SanityContent>` component to display portable text. See [the docs](/helpers/portable-text) for more information.
 
+If you have `components: true` set in your `nuxt.config` file, then this helper will be registered with `@nuxt/components` and imported only where needed, rather than registered globally.
+
 ### `additionalClients`
 
 - Type: **Object**

diff --git a/src/index.ts b/src/index.ts
@@ -111,12 +111,15 @@ const nuxtModule: Module<SanityModuleOptions> = function (moduleOptions) {
     )
   }
 
+  const autoregister = !!this.options.components
+
   this.addPlugin({
     src: resolve(__dirname, '../templates/plugin.js'),
     fileName: 'sanity/plugin.js',
     options: {
       client: useOfficialClient,
       components: {
+        autoregister,
         imageHelper: options.imageHelper,
         contentHelper: options.contentHelper,
       },
@@ -134,14 +137,27 @@ const nuxtModule: Module<SanityModuleOptions> = function (moduleOptions) {
   if (options.imageHelper) {
     this.addTemplate({
       src: resolve(__dirname, '../dist/sanity-image.js'),
-      fileName: 'sanity/sanity-image.js',
+      fileName: 'sanity/components/sanity-image.js',
       options: {
         projectId: options.projectId,
         dataset: options.dataset,
       },
     })
   }
 
+  if (options.contentHelper) {
+    this.addTemplate({
+      src: resolve(__dirname, '../dist/sanity-content.js'),
+      fileName: 'sanity/components/sanity-content.js',
+    })
+  }
+
+  if (autoregister) {
+    this.nuxt.hook('components:dirs', (dirs: string[]) => {
+      dirs.push(resolve(this.nuxt.options.buildDir, './sanity/components'))
+    })
+  }
+
   this.options.build.transpile = this.options.build.transpile || []
   this.options.build.transpile.push(/^@nuxtjs[\\/]sanity/)
 }

diff --git a/templates/plugin.js b/templates/plugin.js
@@ -6,13 +6,13 @@ import defu from 'defu'
   : "import { createClient } from '@nuxtjs/sanity'"
 %>
 
-<% if (options.components.imageHelper) { %>
-import { SanityImage } from './sanity-image'
+<% if (options.components.imageHelper && !options.components.autoregister) { %>
+import { SanityImage } from './components/sanity-image'
 Vue.component('SanityImage', SanityImage)
 <% } %>
 
-<% if (options.components.contentHelper) { %>
-import { SanityContent } from '@nuxtjs/sanity/dist/sanity-content'
+<% if (options.components.contentHelper && !options.components.autoregister) { %>
+import { SanityContent } from './components/sanity-content'
 Vue.component('SanityContent', SanityContent)
 <% } %>
 

diff --git a/test/e2e/browser.test.ts b/test/e2e/browser.test.ts
@@ -1,40 +1,52 @@
 import { setupTest, createPage } from '@nuxt/test-utils'
 
-describe('module with default options', () => {
-  setupTest({
-    testDir: __dirname,
-    browser: true,
-    fixture: '../../example',
-    config: {
-      sanity: {
-        projectId: 'j1o4tmjp',
-      },
+const configs = {
+  base: {
+    sanity: {
+      projectId: 'j1o4tmjp',
     },
-  })
+  },
+  autoregistration: {
+    components: true,
+    sanity: {
+      projectId: 'j1o4tmjp',
+    },
+  },
+}
+
+Object.entries(configs).forEach(([type, config]) =>
+  describe(`module with ${type} options`, () => {
+    setupTest({
+      testDir: __dirname,
+      browser: true,
+      fixture: '../../example',
+      config,
+    })
 
-  test('Sanity image builder works', async () => {
-    const page = await createPage('/')
-    const html = await page.innerHTML('body')
-    expect(html).toContain(
-      'https://cdn.sanity.io/images/j1o4tmjp/production/7aa06723bb01a7a79055b6d6f5be80329a0e5b58-780x1170.jpg?auto=format&amp;w=128',
-    )
-  }, 50000)
+    test('Sanity image builder works', async () => {
+      const page = await createPage('/')
+      const html = await page.innerHTML('body')
+      expect(html).toContain(
+        'https://cdn.sanity.io/images/j1o4tmjp/production/7aa06723bb01a7a79055b6d6f5be80329a0e5b58-780x1170.jpg?auto=format&amp;w=128',
+      )
+    }, 50000)
 
-  test('Sanity config is exposed', async () => {
-    const page = await createPage('/')
-    const html = await page.innerHTML('body')
-    expect(html).toContain('Project ID: j1o4tmjp')
-  }, 50000)
+    test('Sanity config is exposed', async () => {
+      const page = await createPage('/')
+      const html = await page.innerHTML('body')
+      expect(html).toContain('Project ID: j1o4tmjp')
+    }, 50000)
 
-  test('CMS items are fetched', async () => {
-    const page = await createPage('/')
-    const html = await page.innerHTML('body')
-    expect(html).toContain('Guardians of the Galaxy')
-  }, 50000)
+    test('CMS items are fetched', async () => {
+      const page = await createPage('/')
+      const html = await page.innerHTML('body')
+      expect(html).toContain('Guardians of the Galaxy')
+    }, 50000)
 
-  test('Can view single film page', async () => {
-    const page = await createPage('/movie/alien')
-    const html = await page.innerHTML('body')
-    expect(html).toContain('Arthur Dallas')
-  }, 50000)
-})
+    test('Can view single film page', async () => {
+      const page = await createPage('/movie/alien')
+      const html = await page.innerHTML('body')
+      expect(html).toContain('Arthur Dallas')
+    }, 50000)
+  }),
+)
diff --git a/test/e2e/module.test.ts b/test/e2e/module.test.ts
@@ -21,6 +21,7 @@ describe('module with default options', () => {
         client: true,
         additionalClients: JSON.stringify({ another: {} }),
         components: {
+          autoregister: false,
           contentHelper: true,
           imageHelper: true,
         },