diff --git a/README.md b/README.md index 492e925..9cdc5e0 100644 --- a/README.md +++ b/README.md @@ -158,6 +158,21 @@ will inject just this: ``` +### Specifying a target element + +By default, ``s are appended to the `` of the `` document. To append them to the ``, supply the `target` option as follows: + +```js +plugins: [ + new HtmlWebpackPlugin(), + new PreloadWebpackPlugin({ + rel: 'preload', + target: 'body' + }) +] +``` +This can be useful for fine-tuning loading behavior in some browser environments. + ### Filtering chunks There may be chunks that you don't want to have preloaded (sourcemaps, for example). Before preloading each chunk, this plugin checks that the file does not match any regex in the `fileBlacklist` option. The default value of this blacklist is `[/\.map/]`, meaning no sourcemaps will be preloaded. You can easily override this: diff --git a/src/index.js b/src/index.js index c0d05da..f4e389e 100644 --- a/src/index.js +++ b/src/index.js @@ -21,7 +21,7 @@ const createHTMLElementString = require('./lib/create-html-element-string'); const defaultOptions = require('./lib/default-options'); const determineAsValue = require('./lib/determine-as-value'); const extractChunks = require('./lib/extract-chunks'); -const insertLinksIntoHead = require('./lib/insert-links-into-head'); +const insertLinksIntoHtml = require('./lib/insert-links-into-html'); class PreloadPlugin { constructor(options) { @@ -98,9 +98,10 @@ class PreloadPlugin { links.push(linkElementString); } - htmlPluginData.html = insertLinksIntoHead({ - links, + htmlPluginData.html = insertLinksIntoHtml({ html: htmlPluginData.html, + links, + target: options.target, }); return htmlPluginData; diff --git a/src/lib/default-options.js b/src/lib/default-options.js index 9011548..d9d64a1 100644 --- a/src/lib/default-options.js +++ b/src/lib/default-options.js @@ -19,7 +19,8 @@ const defaultOptions = { rel: 'preload', include: 'asyncChunks', excludeHtmlNames: [], - fileBlacklist: [/\.map/] + fileBlacklist: [/\.map/], + target: 'head', }; module.exports = defaultOptions; diff --git a/src/lib/insert-links-into-head.js b/src/lib/insert-links-into-head.js deleted file mode 100644 index 9db83fa..0000000 --- a/src/lib/insert-links-into-head.js +++ /dev/null @@ -1,36 +0,0 @@ -/** - * @license - * Copyright 2018 Google Inc. - * - * Licensed under the Apache License, Version 2.0 (the "License"); - * you may not use this file except in compliance with the License. - * You may obtain a copy of the License at - * - * http://www.apache.org/licenses/LICENSE-2.0 - * - * Unless required by applicable law or agreed to in writing, software - * distributed under the License is distributed on an "AS IS" BASIS, - * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. - * See the License for the specific language governing permissions and - * limitations under the License. - */ - -function insertLinksIntoHead({html, links=[]}) { - if (links.length === 0) { - return html; - } - - if (html.includes('')) { - // If a valid closing is found, insert the new s right before it. - return html.replace('', links.join('') + ''); - } - - if (html.includes('')) { - // If there's a but no , create a containing the . - return html.replace('', `${links.join('')}\n`); - } - - throw new Error(`The HTML provided did not contain a or a :\n\n${html}`); -} - -module.exports = insertLinksIntoHead; diff --git a/src/lib/insert-links-into-html.js b/src/lib/insert-links-into-html.js new file mode 100644 index 0000000..8d0c5fe --- /dev/null +++ b/src/lib/insert-links-into-html.js @@ -0,0 +1,49 @@ +/** + * @license + * Copyright 2018 Google Inc. + * + * Licensed under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + */ + +function insertLinksIntoHtml({html, links=[], target}) { + if (links.length === 0) { + return html; + } + if (target === 'head') { + if (html.includes('')) { + // If a valid closing is found, insert the new s right before it. + return html.replace('', `${links.join('')}`); + } + + if (html.includes('')) { + // If there's a but no valid closing , create a containing the s. + return html.replace('', `${links.join('')}`); + } + throw new Error(`The HTML provided did not contain a or a :\n\n${html}`); + } + + if (target === 'body') { + if (html.includes('')) { + // If a valid closing is found, insert the new s right before it. + return html.replace('', `${links.join('')}`); + } + + if (html.includes('')) { + // If there's a valid closing but no valid closing , create a containing the s. + return html.replace('', `${links.join('')}`); + } + throw new Error(`The HTML provided did not contain a or a :\n\n${html}`); + } +} + +module.exports = insertLinksIntoHtml; diff --git a/test/unit/insert-links-into-head.js b/test/unit/insert-links-into-html.js similarity index 51% rename from test/unit/insert-links-into-head.js rename to test/unit/insert-links-into-html.js index d54fbbc..3835d04 100644 --- a/test/unit/insert-links-into-head.js +++ b/test/unit/insert-links-into-html.js @@ -15,13 +15,13 @@ * limitations under the License. */ -const insertLinksIntoHead = require('../../src/lib/insert-links-into-head'); +const insertLinksIntoHead = require('../../src/lib/insert-links-into-html'); describe(`Edge Conditions:`, function() { it(`should throw when called with HTML lacking a or `, function(done) { const html = ''; expect( - () => insertLinksIntoHead({html, links: ['']}) + () => insertLinksIntoHead({html, links: [''], target: 'head'}) ).toThrowError(`The HTML provided did not contain a or a :\n\n`); done(); @@ -43,6 +43,7 @@ describe(`Normal Conditions:`, function() { const updatedHtml = insertLinksIntoHead({ html, links: [''], + target: 'head', }); expect(updatedHtml).toEqual(``); @@ -55,6 +56,7 @@ describe(`Normal Conditions:`, function() { const updatedHtml = insertLinksIntoHead({ html, links: ['', ''], + target: 'head', }); expect(updatedHtml).toEqual(``); @@ -62,26 +64,81 @@ describe(`Normal Conditions:`, function() { done(); }); - it(`should support inserting a single link prior to the when there is no `, function(done) { + it(`should support creating a and inserting a single link prior to the when there is no `, function(done) { const html = ''; const updatedHtml = insertLinksIntoHead({ html, links: [''], + target: 'head', }); - expect(updatedHtml).toEqual(`\n`); + expect(updatedHtml).toEqual(``); done(); }); - it(`should support inserting multiple links prior to the when there is no `, function(done) { + it(`should support creating a head and inserting multiple links prior to the when there is no `, function(done) { const html = ''; const updatedHtml = insertLinksIntoHead({ html, links: ['', ''], + target: 'head', }); - expect(updatedHtml).toEqual(`\n`); + expect(updatedHtml).toEqual(``); + + done(); + }); + + // target: body + it(`should support inserting a single link prior to the `, function(done) { + const html = ''; + const updatedHtml = insertLinksIntoHead({ + html, + links: [''], + target: 'body', + }); + + expect(updatedHtml).toEqual(``); + + done(); + }); + + it(`should support inserting multiple links prior to the `, function(done) { + const html = ''; + const updatedHtml = insertLinksIntoHead({ + html, + links: ['', ''], + target: 'body', + }); + + expect(updatedHtml).toEqual(``); + + done(); + }); + + it(`should support creating a body and inserting a single link prior to the when there is no `, function(done) { + const html = ''; + const updatedHtml = insertLinksIntoHead({ + html, + links: [''], + target: 'body', + }); + + expect(updatedHtml).toEqual(``); + + done(); + }); + + it(`should support creating a body and inserting multiple links prior to the when there is no `, function(done) { + const html = ''; + const updatedHtml = insertLinksIntoHead({ + html, + links: ['', ''], + target: 'body', + }); + + expect(updatedHtml).toEqual(``); done(); });