fix: force hid to support client-side only

nuxt-modules · Oct 20, 2020 · 46ed9ec · 46ed9ec
1 parent 815b417
commit 46ed9ec
Show file tree

Hide file tree

Showing 4 changed files with 25 additions and 5 deletions.
diff --git a/lib/module.js b/lib/module.js
@@ -84,6 +84,7 @@ module.exports = function (moduleOptions) {
     // https://developer.mozilla.org/en-US/docs/Web/Performance/dns-prefetch
     if (options.prefetch) {
       this.options.head.link.push({
+        hid: 'gf-prefetch',
         once: true,
         rel: 'dns-prefetch',
         href: 'https://fonts.gstatic.com/'
@@ -94,6 +95,7 @@ module.exports = function (moduleOptions) {
     // connect to domain of font files
     if (options.preconnect) {
       this.options.head.link.push({
+        hid: 'gf-preconnect',
         once: true,
         rel: 'preconnect',
         href: 'https://fonts.gstatic.com/',
@@ -105,6 +107,7 @@ module.exports = function (moduleOptions) {
     // optionally increase loading priority
     if (options.preload) {
       this.options.head.link.push({
+        hid: 'gf-preload',
         once: true,
         rel: 'preload',
         as: 'style',
@@ -114,6 +117,7 @@ module.exports = function (moduleOptions) {
 
     // async CSS
     this.options.head.link.push({
+      hid: 'gf-stylesheet',
       once: true,
       rel: 'stylesheet',
       href: url,
@@ -124,6 +128,7 @@ module.exports = function (moduleOptions) {
     // no-JS fallback
     this.options.head.noscript = this.options.head.noscript || []
     this.options.head.noscript.push({
+      hid: 'gf-noscript',
       once: true,
       innerHTML: `<link rel="stylesheet" href="${url}">`
     })

diff --git a/test/basic.test.js b/test/basic.test.js
@@ -14,10 +14,10 @@ describe('basic', () => {
   test('render', async () => {
     const url = 'https://fonts.googleapis.com/css2?family=Roboto&family=Lato'
     const html = await get('/')
-    expect(html).toContain('<link rel="dns-prefetch" href="https://fonts.gstatic.com/">')
-    expect(html).toContain('<link rel="preconnect" href="https://fonts.gstatic.com/" crossorigin="true">')
-    expect(html).toContain(`<link rel="preload" as="style" href="${url}">`)
-    expect(html).toContain(`<link rel="stylesheet" href="${url}" media="print" onload="this.onload=null;this.removeAttribute('media');`)
-    expect(html).toContain(`<noscript><link rel="stylesheet" href="${url}"></noscript>`)
+    expect(html).toContain('<link data-hid="gf-prefetch" rel="dns-prefetch" href="https://fonts.gstatic.com/">')
+    expect(html).toContain('<link data-hid="gf-preconnect" rel="preconnect" href="https://fonts.gstatic.com/" crossorigin="true">')
+    expect(html).toContain(`<link data-hid="gf-preload" rel="preload" as="style" href="${url}">`)
+    expect(html).toContain(`<link data-hid="gf-stylesheet" rel="stylesheet" href="${url}" media="print" onload="this.onload=null;this.removeAttribute('media');`)
+    expect(html).toContain(`<noscript data-hid="gf-noscript"><link rel="stylesheet" href="${url}"></noscript>`)
   })
 })
diff --git a/test/fixture/basic/pages/about.vue b/test/fixture/basic/pages/about.vue
@@ -0,0 +1,10 @@
+<template>
+  <div>
+    About
+    <p>
+      <NuxtLink to="/">
+        Home
+      </NuxtLink>
+    </p>
+  </div>
+</template>
diff --git a/test/fixture/basic/pages/index.vue b/test/fixture/basic/pages/index.vue
@@ -1,6 +1,11 @@
 <template>
   <div>
     Works!
+    <p>
+      <NuxtLink to="/about">
+        About
+      </NuxtLink>
+    </p>
   </div>
 </template>