From 46ed9ecd53c283c1f3dccdc8b364aa300eb4ab7e Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?S=C3=A9bastien=20Chopin?= <seb@nuxtjs.com>
Date: Tue, 20 Oct 2020 18:34:42 +0200
Subject: [PATCH] fix: force hid to support client-side only

---
 lib/module.js                      |  5 +++++
 test/basic.test.js                 | 10 +++++-----
 test/fixture/basic/pages/about.vue | 10 ++++++++++
 test/fixture/basic/pages/index.vue |  5 +++++
 4 files changed, 25 insertions(+), 5 deletions(-)
 create mode 100644 test/fixture/basic/pages/about.vue

diff --git a/lib/module.js b/lib/module.js
index 48b0bee..8220229 100644
--- 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
index a8b979e..cbf03d7 100644
--- 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
new file mode 100644
index 0000000..70c2abc
--- /dev/null
+++ 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
index 6218ede..b73aa70 100644
--- 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>