html-webpack-plugin 3.2.0 → 4.0.0-alpha

package/lib/chunksorter.js

@@ -1,139 +1,47 @@
+// @ts-check
+/** @typedef {import("webpack/lib/Compilation.js")} WebpackCompilation */
 'use strict';
 
-const toposort = require('toposort');
-const _ = require('lodash');
+// Import webpack types using commonjs
+// As we use only the type we have to prevent warnings about unused varaibles
+/* eslint-disable */
+const WebpackCompilation = require('webpack/lib/Compilation');
+/* eslint-enable */
 
 /**
-  Sorts dependencies between chunks by their "parents" attribute.
-
-  This function sorts chunks based on their dependencies with each other.
-  The parent relation between chunks as generated by Webpack for each chunk
-  is used to define a directed (and hopefully acyclic) graph, which is then
-  topologically sorted in order to retrieve the correct order in which
-  chunks need to be embedded into HTML. A directed edge in this graph is
-  describing a "is parent of" relationship from a chunk to another (distinct)
-  chunk. Thus topological sorting orders chunks from bottom-layer chunks to
-  highest level chunks that use the lower-level chunks.
-
-  @param {Array} chunks an array of chunks as generated by the html-webpack-plugin.
-  - For webpack < 4, It is assumed that each entry contains at least the properties
-  "id" (containing the chunk id) and "parents" (array containing the ids of the
-  parent chunks).
-  - For webpack 4+ the see the chunkGroups param for parent-child relationships
-
-  @param {Array} chunks an array of ChunkGroups that has a getParents method.
-  Each ChunkGroup contains a list of chunks in order.
-
-  @return {Array} A topologically sorted version of the input chunks
-*/
-module.exports.dependency = (chunks, options, compilation) => {
-  const chunkGroups = compilation.chunkGroups;
-  if (!chunks) {
-    return chunks;
-  }
-
-  // We build a map (chunk-id -> chunk) for faster access during graph building.
-  const nodeMap = {};
-
-  chunks.forEach(chunk => {
-    nodeMap[chunk.id] = chunk;
-  });
-
-  // Next, we add an edge for each parent relationship into the graph
-  let edges = [];
-
-  if (chunkGroups) {
-    // Add an edge for each parent (parent -> child)
-    edges = chunkGroups.reduce((result, chunkGroup) => result.concat(
-      Array.from(chunkGroup.parentsIterable, parentGroup => [parentGroup, chunkGroup])
-    ), []);
-    const sortedGroups = toposort.array(chunkGroups, edges);
-    // flatten chunkGroup into chunks
-    const sortedChunks = sortedGroups
-      .reduce((result, chunkGroup) => result.concat(chunkGroup.chunks), [])
-      .map(chunk => // use the chunk from the list passed in, since it may be a filtered list
-    nodeMap[chunk.id])
-      .filter((chunk, index, self) => {
-        // make sure exists (ie excluded chunks not in nodeMap)
-        const exists = !!chunk;
-        // make sure we have a unique list
-        const unique = self.indexOf(chunk) === index;
-        return exists && unique;
-      });
-    return sortedChunks;
-  } else {
-    // before webpack 4 there was no chunkGroups
-    chunks.forEach(chunk => {
-      if (chunk.parents) {
-        // Add an edge for each parent (parent -> child)
-        chunk.parents.forEach(parentId => {
-          // webpack2 chunk.parents are chunks instead of string id(s)
-          const parentChunk = _.isObject(parentId) ? parentId : nodeMap[parentId];
-          // If the parent chunk does not exist (e.g. because of an excluded chunk)
-          // we ignore that parent
-          if (parentChunk) {
-            edges.push([parentChunk, chunk]);
-          }
-        });
-      }
-    });
-    // We now perform a topological sorting on the input chunks and built edges
-    return toposort.array(chunks, edges);
-  }
-};
-
-/**
- * Sorts the chunks based on the chunk id.
- *
- * @param  {Array} chunks the list of chunks to sort
- * @return {Array} The sorted list of chunks
+ * @type {{[sortmode: string] : (entryPointNames: Array<string>, compilation, htmlWebpackPluginOptions) => Array<string> }}
+ * This file contains different sort methods for the entry chunks names
  */
-module.exports.id = chunks => chunks.sort(function orderEntryLast (a, b) {
-  if (a.entry !== b.entry) {
-    return b.entry ? 1 : -1;
-  } else {
-    return b.id - a.id;
-  }
-});
+const sortFunctions = {};
+module.exports = sortFunctions;
 
 /**
  * Performs identity mapping (no-sort).
  * @param  {Array} chunks the chunks to sort
  * @return {Array} The sorted chunks
  */
-module.exports.none = chunks => chunks;
+sortFunctions.none = chunks => chunks;
 
 /**
  * Sort manually by the chunks
- * @param  {Array} chunks the chunks to sort
- * @return {Array} The sorted chunks
+ * @param  {string[]} entryPointNames the chunks to sort
+ * @param  {WebpackCompilation} compilation the webpack compilation
+ * @param  htmlWebpackPluginOptions the plugin options
+ * @return {string[]} The sorted chunks
  */
-module.exports.manual = (chunks, options) => {
-  const specifyChunks = options.chunks;
-  const chunksResult = [];
-  let filterResult = [];
-  if (Array.isArray(specifyChunks)) {
-    for (var i = 0; i < specifyChunks.length; i++) {
-      filterResult = chunks.filter(chunk => {
-        if (chunk.names[0] && chunk.names[0] === specifyChunks[i]) {
-          return true;
-        }
-        return false;
-      });
-      filterResult.length > 0 && chunksResult.push(filterResult[0]);
-    }
+sortFunctions.manual = (entryPointNames, compilation, htmlWebpackPluginOptions) => {
+  const chunks = htmlWebpackPluginOptions.chunks;
+  if (!Array.isArray(chunks)) {
+    return entryPointNames;
   }
-  return chunksResult;
+  // Remove none existing entries from
+  // htmlWebpackPluginOptions.chunks
+  return chunks.filter((entryPointName) => {
+    return compilation.entrypoints.has(entryPointName);
+  });
 };
 
 /**
  * Defines the default sorter.
  */
-module.exports.auto = module.exports.id;
-
-// In webpack 2 the ids have been flipped.
-// Therefore the id sort doesn't work the same way as it did for webpack 1
-// Luckily the dependency sort is working as expected
-if (Number(require('webpack/package.json').version.split('.')[0]) > 1) {
-  module.exports.auto = module.exports.dependency;
-}
+sortFunctions.auto = module.exports.none;

package/lib/compiler.js

@@ -59,9 +59,7 @@ module.exports.compileTemplate = function compileTemplate (template, context, ou
   // Fix for "Uncaught TypeError: __webpack_require__(...) is not a function"
   // Hot module replacement requires that every child compiler has its own
   // cache. @see https://github.com/ampedandwired/html-webpack-plugin/pull/179
-
-  // Backwards compatible version of: childCompiler.hooks.compilation
-  (childCompiler.hooks ? childCompiler.hooks.compilation.tap.bind(childCompiler.hooks.compilation, 'HtmlWebpackPlugin') : childCompiler.plugin.bind(childCompiler, 'compilation'))(compilation => {
+  childCompiler.hooks.compilation.tap('HtmlWebpackPlugin', compilation => {
     if (compilation.cache) {
       if (!compilation.cache[compilerName]) {
         compilation.cache[compilerName] = {};
@@ -81,19 +79,10 @@ module.exports.compileTemplate = function compileTemplate (template, context, ou
         reject(err);
       } else {
         // Replace [hash] placeholders in filename
-        // In webpack 4 the plugin interface changed, so check for available fns
-        const outputName = compilation.mainTemplate.getAssetPath
-          ? compilation.mainTemplate.hooks.assetPath.call(outputOptions.filename, {
-            hash: childCompilation.hash,
-            chunk: entries[0]
-          })
-          : compilation.mainTemplate.applyPluginsWaterfall(
-              'asset-path',
-              outputOptions.filename,
-            {
-              hash: childCompilation.hash,
-              chunk: entries[0]
-            });
+        const outputName = compilation.mainTemplate.hooks.assetPath.call(outputOptions.filename, {
+          hash: childCompilation.hash,
+          chunk: entries[0]
+        });
 
         // Restore the parent compilation to the state like it
         // was before the child compilation

package/lib/errors.js

@@ -1,8 +1,9 @@
+// @ts-nocheck
 'use strict';
 const PrettyError = require('pretty-error');
 const prettyError = new PrettyError();
 prettyError.withoutColors();
-prettyError.skipPackage(['html-plugin-evaluation']);
+prettyError.skipPackage('html-plugin-evaluation');
 prettyError.skipNodeFiles();
 prettyError.skip(function (traceLine) {
   return traceLine.path === 'html-plugin-evaluation';

package/lib/hooks.js

@@ -0,0 +1,132 @@
+// @ts-check
+/* eslint-disable */
+/// <reference path="../typings.d.ts" />
+/* eslint-enable */
+'use strict';
+/**
+ * This file provides access to all public htmlWebpackPlugin hooks
+ *
+ * Usage:
+ * ```js
+ *  const getHtmlWebpackPluginHooks = require('html-webpack-plugin/lib/hooks').getHtmlWebpackPluginHooks;
+ *
+ *  compiler.hooks.compilation.tap('YOUR_PLUGIN_NAME', (compilation) => {
+ *   const htmlWebpackPluginHooks = getHtmlWebpackPluginHooks(compilation);
+ *   htmlWebpackPluginHooks.htmlWebpackPluginAfterEmit.tap('YOUR_PLUGIN_NAME', (pluginArgs) => {
+ *     // your code
+ *   });
+ *  });
+ * ```
+ */
+
+/** @typedef {import("webpack/lib/Compilation.js")} WebpackCompilation */
+/** @typedef {import("../index.js")} HtmlWebpackPlugin */
+
+const AsyncSeriesWaterfallHook = require('tapable').AsyncSeriesWaterfallHook;
+
+// The following typedef holds the API definition for all available hooks
+// to allow easier access when using ts-check or typescript inside plugins
+/** @typedef {{
+  htmlWebpackPluginBeforeHtmlGeneration:
+    AsyncSeriesWaterfallHook<{
+      assets: {
+        publicPath: string,
+        js: Array<{entryName: string, path: string}>,
+        css: Array<{entryName: string, path: string}>,
+      },
+      outputName: string,
+      plugin: HtmlWebpackPlugin
+    }>,
+  htmlWebpackPluginBeforeHtmlProcessing:
+    AsyncSeriesWaterfallHook<{
+      html: string,
+      assets: {
+        publicPath: string,
+        js: Array<{entryName: string, path: string}>,
+        css: Array<{entryName: string, path: string}>,
+      },
+      outputName: string,
+      plugin: HtmlWebpackPlugin,
+    }>,
+  htmlWebpackPluginAfterHtmlProcessing:
+    AsyncSeriesWaterfallHook<{
+      html: string,
+      assets: {
+        publicPath: string,
+        js: Array<{entryName: string, path: string}>,
+        css: Array<{entryName: string, path: string}>,
+      },
+      outputName: string,
+      plugin: HtmlWebpackPlugin,
+    }>,
+  htmlWebpackPluginAlterAssetTags:
+    AsyncSeriesWaterfallHook<{
+      head: Array<HtmlTagObject>,
+      body: Array<HtmlTagObject>,
+      outputName: string,
+      plugin: HtmlWebpackPlugin
+    }>,
+  htmlWebpackPluginAfterEmit:
+    AsyncSeriesWaterfallHook<{
+      html: string,
+      outputName: string,
+      plugin: HtmlWebpackPlugin
+    }>,
+  }} HtmlWebpackPluginHooks
+  */
+
+/**
+ * Returns all public hooks of the html webpack plugin for the given compilation
+ *
+ * @param {WebpackCompilation} compilation
+ * @returns {HtmlWebpackPluginHooks}
+ */
+function getHtmlWebpackPluginHooks (compilation) {
+  /** @type {HtmlWebpackPluginHooks} */
+  const hooks = compilation.hooks;
+  // Setup the hooks only once
+  if (!hooks.htmlWebpackPluginAfterEmit) {
+    attachHooksToCompilation(compilation);
+  }
+  return {
+    htmlWebpackPluginBeforeHtmlGeneration: hooks.htmlWebpackPluginBeforeHtmlGeneration,
+    htmlWebpackPluginBeforeHtmlProcessing: hooks.htmlWebpackPluginBeforeHtmlProcessing,
+    htmlWebpackPluginAlterAssetTags: hooks.htmlWebpackPluginAlterAssetTags,
+    htmlWebpackPluginAfterHtmlProcessing: hooks.htmlWebpackPluginAfterHtmlProcessing,
+    htmlWebpackPluginAfterEmit: hooks.htmlWebpackPluginAfterEmit
+  };
+}
+
+/**
+ * Add hooks to the webpack compilation object to allow foreign plugins to
+ * extend the HtmlWebpackPlugin
+ *
+ * @param {WebpackCompilation} compilation
+ */
+function attachHooksToCompilation (compilation) {
+  /** @type {HtmlWebpackPluginHooks} */
+  const hooks = compilation.hooks;
+  hooks.htmlWebpackPluginBeforeHtmlGeneration = new AsyncSeriesWaterfallHook(['pluginArgs']);
+  hooks.htmlWebpackPluginBeforeHtmlProcessing = new AsyncSeriesWaterfallHook(['pluginArgs']);
+  hooks.htmlWebpackPluginAlterAssetTags = new AsyncSeriesWaterfallHook(['pluginArgs']);
+  hooks.htmlWebpackPluginAfterHtmlProcessing = new AsyncSeriesWaterfallHook(['pluginArgs']);
+  hooks.htmlWebpackPluginAfterEmit = new AsyncSeriesWaterfallHook(['pluginArgs']);
+}
+
+/**
+ * Small workaround helper to work around https://github.com/Microsoft/TypeScript/issues/1178
+ * Returns the hook of the given name
+ *
+ * @type {
+    <T extends keyof HtmlWebpackPluginHooks>(compilation: WebpackCompilation, hookName: T) => HtmlWebpackPluginHooks[T]
+   }
+ */
+const getHtmlWebpackPluginHook = (compilation, hookName) => {
+  const hooks = getHtmlWebpackPluginHooks(compilation);
+  return /** @type {any} */hooks[hookName];
+};
+
+module.exports = {
+  getHtmlWebpackPluginHooks,
+  getHtmlWebpackPluginHook
+};

package/lib/html-tags.js

@@ -0,0 +1,73 @@
+// @ts-check
+/* eslint-disable */
+/// <reference path="../typings.d.ts" />
+/* eslint-enable */
+/**
+ * @file
+ * This file provides to helper to create html as a object repesentation as
+ * thoses objects are easier to modify than pure string representations
+ *
+ * Usage:
+ * ```
+ * const element = createHtmlTagObject('h1', {class: 'demo'}, 'Hello World');
+ * const html = htmlTagObjectToString(element);
+ * console.log(html) // -> <h1 class="demo">Hello World</h1>
+ * ```
+ */
+
+/**
+ * All html tag elements which must not contain innerHTML
+ * @see https://www.w3.org/TR/html5/syntax.html#void-elements
+ */
+const voidTags = ['area', 'base', 'br', 'col', 'embed', 'hr', 'img', 'input', 'keygen', 'link', 'meta', 'param', 'source', 'track', 'wbr'];
+
+/**
+ * Turn a tag definition into a html string
+ * @param {HtmlTagObject} tagDefinition
+ *  A tag element according to the htmlWebpackPlugin object notation
+ *
+ * @param xhtml {boolean}
+ *   Wether the generated html should add closing slashes to be xhtml compliant
+ */
+function htmlTagObjectToString (tagDefinition, xhtml) {
+  const attributes = Object.keys(tagDefinition.attributes || {})
+    .filter(function (attributeName) {
+      return tagDefinition.attributes[attributeName] !== false;
+    })
+    .map(function (attributeName) {
+      if (tagDefinition.attributes[attributeName] === true) {
+        return xhtml ? attributeName + '="' + attributeName + '"' : attributeName;
+      }
+      return attributeName + '="' + tagDefinition.attributes[attributeName] + '"';
+    });
+  return '<' + [tagDefinition.tagName].concat(attributes).join(' ') + (tagDefinition.voidTag && xhtml ? '/' : '') + '>' +
+    (tagDefinition.innerHTML || '') +
+    (tagDefinition.voidTag ? '' : '</' + tagDefinition.tagName + '>');
+}
+
+/**
+ * Static helper to create a tag object to be get injected into the dom
+ *
+ * @param {string} tagName
+ * the name of the tage e.g. 'div'
+ *
+ * @param {{[attributeName: string]: string|boolean}} [attributes]
+ * tag attributes e.g. `{ 'class': 'example', disabled: true }`
+ *
+ * @param {string} [innerHTML]
+ *
+ * @returns {HtmlTagObject}
+ */
+function createHtmlTagObject (tagName, attributes, innerHTML) {
+  return {
+    tagName: tagName,
+    voidTag: voidTags.indexOf(tagName) !== -1,
+    attributes: attributes || {},
+    innerHTML: innerHTML
+  };
+}
+
+module.exports = {
+  createHtmlTagObject: createHtmlTagObject,
+  htmlTagObjectToString: htmlTagObjectToString
+};

package/lib/loader.js

@@ -1,6 +1,6 @@
 /* This loader renders the template with underscore if no other loader was found */
+// @ts-nocheck
 'use strict';
-
 const _ = require('lodash');
 const loaderUtils = require('loader-utils');
 
@@ -21,11 +21,11 @@ module.exports = function (source) {
     return source;
   }
 
-  // The following part renders the tempalte with lodash as aminimalistic loader
+  // The following part renders the template with lodash as aminimalistic loader
   //
   // Get templating options
-  const options = this.query !== '' ? loaderUtils.parseQuery(this.query) : {};
-  const template = _.template(source, _.defaults(options, { variable: 'data' }));
+  const options = this.query !== '' ? loaderUtils.getOptions(this) : {};
+  const template = _.template(source, _.defaults(options, { interpolate: /<%=([\s\S]+?)%>/g, variable: 'data' }));
   // Require !!lodash - using !! will disable all loaders (e.g. babel)
   return 'var _ = require(' + loaderUtils.stringifyRequest(this, '!!' + require.resolve('lodash')) + ');' +
     'module.exports = function (templateParams) { with(templateParams) {' +

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "html-webpack-plugin",
-  "version": "3.2.0",
+  "version": "4.0.0-alpha",
   "license": "MIT",
   "description": "Simplifies creation of HTML files to serve your webpack bundles",
   "author": "Charles Blaxland <charles.blaxland@gmail.com> (https://github.com/ampedandwired)",
@@ -12,6 +12,7 @@
   ],
   "scripts": {
     "pretest": "semistandard",
+    "posttest": "tsc --pretty",
     "commit": "git-cz",
     "build-examples": "node examples/build-examples.js",
     "test": "jasmine",
@@ -23,13 +24,13 @@
     ]
   },
   "devDependencies": {
+    "@types/node": "10.1.1",
     "appcache-webpack-plugin": "^1.3.0",
     "commitizen": "2.9.6",
     "css-loader": "^0.26.1",
     "cz-conventional-changelog": "2.1.0",
     "dir-compare": "1.3.0",
-    "es6-promise": "^4.0.5",
-    "extract-text-webpack-plugin": "^1.0.1",
+    "extract-text-webpack-plugin": "^4.0.0-beta.0",
     "file-loader": "^0.9.0",
     "html-loader": "^0.4.4",
     "jade": "^1.11.0",
@@ -40,22 +41,24 @@
     "semistandard": "8.0.0",
     "standard-version": "^4.3.0",
     "style-loader": "^0.13.1",
+    "typescript": "2.9.0-dev.20180518",
     "underscore-template-loader": "^0.7.3",
     "url-loader": "^0.5.7",
-    "webpack": "^1.14.0",
+    "webpack": "4.8.3",
+    "webpack-cli": "2.0.12",
     "webpack-recompilation-simulator": "^1.3.0"
   },
   "dependencies": {
+    "@types/tapable": "1.0.2",
     "html-minifier": "^3.2.3",
-    "loader-utils": "^0.2.16",
-    "lodash": "^4.17.3",
+    "loader-utils": "^1.1.0",
+    "lodash": "^4.17.10",
     "pretty-error": "^2.0.2",
     "tapable": "^1.0.0",
-    "toposort": "^1.0.0",
     "util.promisify": "1.0.0"
   },
   "peerDependencies": {
-    "webpack": "^1.0.0 || ^2.0.0 || ^3.0.0 || ^4.0.0"
+    "webpack": "^4.0.0"
   },
   "keywords": [
     "webpack",