Merge pull request #131 from tomoyukikashiro/feat/preload

Removal preload tags

README.md

@@ -124,12 +124,13 @@ This library ...
   - original url comes from canonical's href attribute
   - e.g. `<a href="/test">` is replaced with `<a href="https//original-url.com/test">`
   - NOTE: If the canonical url in your html is not absolute url this function would be passed
+- remove all `<link ref="preload" type="script">`, `<link ref="preload" type="fetch">`
 - optimize html by using [@ampproject/toolbox-optimizer](https://github.com/ampproject/amp-toolbox/tree/master/packages/optimizer)
 
 ## Preparation
 
 To make your html valid AMP your html also should ...
 
 - have canonical meta tag to regular HTML
-- not have any problem if all scripts are removed
-- not have any problem if all `!imporant` syntax are removed in css
+- Don't have any problem if all scripts are removed
+- Don't have any problem if all `!imporant` syntax are removed in css

index.js

@@ -11,7 +11,8 @@ const ga = require('./lib/googleanalytics')
 const iframe = require('./lib/iframe')
 const boilerplate = require('./lib/boilerplate')
 const serviceworker = require('./lib/serviceWorker')
-const link = require('./lib/link')
+const link = require('./lib/link/canonical')
+const preload = require('./lib/link/preload')
 const toolbox = require('./lib/toolbox')
 const html = require('./lib/html')
 
@@ -27,6 +28,7 @@ const html2amp = async (htmlString, options = {}) => {
   $ = ga($, options)
   $ = iframe($, options)
   $ = link($)
+  $ = preload($)
   $ = serviceworker($, options)
   $ = boilerplate($, options)
   htmlString = html($, options)

lib/link.js → lib/link/canonical.js

@@ -14,11 +14,11 @@ const replaceOriginal = ($, elems, url) => {
   })
 }
 
-const link = ($) => {
+const canonical = ($) => {
   const canonicalUrl = $('link[rel=canonical]').attr('href')
   if (!canonicalUrl) return $
   replaceOriginal($, $('a[href]'), canonicalUrl)
   return $
 }
 
-module.exports = link
+module.exports = canonical

lib/link/preload.js

@@ -0,0 +1,7 @@
+const preload = ($) => {
+  $('link[rel="preload"][as="script"]').remove()
+  $('link[rel="preload"][as="fetch"]').remove()
+  return $
+}
+
+module.exports = preload

test/link.test.js → test/link/canonical.test.js

@@ -1,55 +1,55 @@
 const cheerio = require('cheerio')
-const assert = require('./assert')
-const link = require('../lib/link')
-const htmlFactory = require('./html')
+const assert = require('../assert')
+const canonical = require('../../lib/link/canonical')
+const htmlFactory = require('../html')
 
-describe('link', function () {
+describe('canonical', function () {
   const head = '<link rel="canonical" href="https://example.com/test/article/">'
 
   describe('if there is a link which href starts with /', function () {
     const html = htmlFactory({ head, body: '<a href="/test"></a>' })
     it('should be replaced with origin in canonical', function () {
-      const $ = link(cheerio.load(html))
+      const $ = canonical(cheerio.load(html))
       assert($, htmlFactory({ head, body: '<a href="https://example.com/test"></a>' }))
     })
   })
 
   describe('if there is a link which href starts with ./test', function () {
     const html = htmlFactory({ head, body: '<a href="./bar"></a>' })
     it('should be replaced with origin in canonical', function () {
-      const $ = link(cheerio.load(html))
+      const $ = canonical(cheerio.load(html))
       assert($, htmlFactory({ head, body: '<a href="https://example.com/test/article/bar"></a>' }))
     })
   })
 
   describe('if there is a link which href starts with ../test', function () {
     const html = htmlFactory({ head, body: '<a href="../test"></a>' })
     it('should be replaced with origin in canonical', function () {
-      const $ = link(cheerio.load(html))
+      const $ = canonical(cheerio.load(html))
       assert($, htmlFactory({ head, body: '<a href="https://example.com/test/test"></a>' }))
     })
   })
 
   describe('if there is a link which href starts with `test`', function () {
     const html = htmlFactory({ head, body: '<a href="test"></a>' })
     it('should be replaced with origin in canonical', function () {
-      const $ = link(cheerio.load(html))
+      const $ = canonical(cheerio.load(html))
       assert($, htmlFactory({ head, body: '<a href="https://example.com/test/article/test"></a>' }))
     })
   })
 
   describe('if there is a link which href starts with http', function () {
     const html = htmlFactory({ head, body: '<a href="https://example.com"></a>' })
     it('should be replaced with origin in canonical', function () {
-      const $ = link(cheerio.load(html))
+      const $ = canonical(cheerio.load(html))
       assert($, htmlFactory({ head, body: '<a href="https://example.com"></a>' }))
     })
   })
 
   describe('if there is a link which href starts with //', function () {
     const html = htmlFactory({ head, body: '<a href="//example.com"></a>' })
     it('should be replaced with origin in canonical', function () {
-      const $ = link(cheerio.load(html))
+      const $ = canonical(cheerio.load(html))
       assert($, htmlFactory({ head, body: '<a href="//example.com"></a>' }))
     })
   })

test/link/preload.test.js

@@ -0,0 +1,28 @@
+const cheerio = require('cheerio')
+const assert = require('../assert')
+const canonical = require('../../lib/link/preload')
+const htmlFactory = require('../html')
+
+describe('preload', function () {
+  describe('If there is link tag for preloading script', function () {
+    const html = htmlFactory({ head: '<link rel="preload" as="script" href="https://example.com/test.js">' })
+    it('should be removed', function () {
+      const $ = canonical(cheerio.load(html))
+      assert($, htmlFactory({ head: '' }))
+    })
+  })
+  describe('If there is link tag for preloading fetch resource', function () {
+    const html = htmlFactory({ head: '<link rel="preload" as="fetch" href="https://example.com/test.json">' })
+    it('should be removed', function () {
+      const $ = canonical(cheerio.load(html))
+      assert($, htmlFactory({ head: '' }))
+    })
+  })
+  describe('If there is link tag for preloading style', function () {
+    const html = htmlFactory({ head: '<link rel="preload" as="style" href="https://example.com/test.css">' })
+    it('shouldn\'t be removed', function () {
+      const $ = canonical(cheerio.load(html))
+      assert($, htmlFactory({ head: '<link rel="preload" as="style" href="https://example.com/test.css">' }))
+    })
+  })
+})