html-webpack-plugin 3.1.0 → 4.0.0-alpha.2

package/lib/hooks.js

@@ -0,0 +1,116 @@
+// @ts-check
+/* eslint-disable */
+/// <reference path="../typings.d.ts" />
+/* eslint-enable */
+'use strict';
+/**
+ * This file provides access to all public htmlWebpackPlugin hooks
+ */
+
+/** @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 {{
+
+  beforeAssetTagGeneration:
+    AsyncSeriesWaterfallHook<{
+      assets: {
+        publicPath: string,
+        js: Array<string>,
+        css: Array<string>,
+        favicon?: string | undefined,
+        manifest?: string | undefined
+      },
+      outputName: string,
+      plugin: HtmlWebpackPlugin
+    }>,
+
+  alterAssetTags:
+    AsyncSeriesWaterfallHook<{
+      assetTags: {
+        scripts: Array<HtmlTagObject>,
+        styles: Array<HtmlTagObject>,
+        meta: Array<HtmlTagObject>,
+      },
+      outputName: string,
+      plugin: HtmlWebpackPlugin
+    }>,
+
+  alterAssetTagGroups:
+    AsyncSeriesWaterfallHook<{
+      headTags: Array<HtmlTagObject | HtmlTagObject>,
+      bodyTags: Array<HtmlTagObject | HtmlTagObject>,
+      outputName: string,
+      plugin: HtmlWebpackPlugin
+    }>,
+
+  afterTemplateExecution:
+    AsyncSeriesWaterfallHook<{
+      html: string,
+      headTags: Array<HtmlTagObject | HtmlTagObject>,
+      bodyTags: Array<HtmlTagObject | HtmlTagObject>,
+      outputName: string,
+      plugin: HtmlWebpackPlugin,
+    }>,
+
+  beforeEmit:
+    AsyncSeriesWaterfallHook<{
+      html: string,
+      outputName: string,
+      plugin: HtmlWebpackPlugin,
+    }>,
+
+  afterEmit:
+    AsyncSeriesWaterfallHook<{
+      outputName: string,
+      plugin: HtmlWebpackPlugin
+    }>,
+
+  }} HtmlWebpackPluginHooks
+  */
+
+/**
+ * @type {WeakMap<WebpackCompilation, HtmlWebpackPluginHooks>}}
+ */
+const htmlWebpackPluginHooksMap = new WeakMap();
+
+/**
+ * Returns all public hooks of the html webpack plugin for the given compilation
+ *
+ * @param {WebpackCompilation} compilation
+ * @returns {HtmlWebpackPluginHooks}
+ */
+function getHtmlWebpackPluginHooks (compilation) {
+  let hooks = htmlWebpackPluginHooksMap.get(compilation);
+  // Setup the hooks only once
+  if (hooks === undefined) {
+    hooks = createHtmlWebpackPluginHooks();
+    htmlWebpackPluginHooksMap.set(compilation, hooks);
+  }
+  return hooks;
+}
+
+/**
+ * Add hooks to the webpack compilation object to allow foreign plugins to
+ * extend the HtmlWebpackPlugin
+ *
+ * @returns {HtmlWebpackPluginHooks}
+ */
+function createHtmlWebpackPluginHooks () {
+  return {
+    beforeAssetTagGeneration: new AsyncSeriesWaterfallHook(['pluginArgs']),
+    alterAssetTags: new AsyncSeriesWaterfallHook(['pluginArgs']),
+    alterAssetTagGroups: new AsyncSeriesWaterfallHook(['pluginArgs']),
+    afterTemplateExecution: new AsyncSeriesWaterfallHook(['pluginArgs']),
+    beforeEmit: new AsyncSeriesWaterfallHook(['pluginArgs']),
+    afterEmit: new AsyncSeriesWaterfallHook(['pluginArgs'])
+  };
+}
+
+module.exports = {
+  getHtmlWebpackPluginHooks
+};

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,51 +1,33 @@
 /* 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');
 
 module.exports = function (source) {
-  if (this.cacheable) {
-    this.cacheable();
-  }
+  // Get templating options
+  const options = this.query !== '' ? loaderUtils.getOptions(this) : {};
+  const force = options.force || false;
+
   const allLoadersButThisOne = this.loaders.filter(function (loader) {
-    // Loader API changed from `loader.module` to `loader.normal` in Webpack 2.
-    return (loader.module || loader.normal) !== module.exports;
+    return loader.normal !== module.exports;
   });
-  // This loader shouldn't kick in if there is any other loader
-  if (allLoadersButThisOne.length > 0) {
+  // This loader shouldn't kick in if there is any other loader (unless it's explicitly enforced)
+  if (allLoadersButThisOne.length > 0 && !force) {
     return source;
   }
-  // Skip .js files
-  if (/\.js$/.test(this.resourcePath)) {
+  // Skip .js files (unless it's explicitly enforced)
+  if (/\.js$/.test(this.resourcePath) && !force) {
     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) : {};
-  // Webpack 2 does not allow with() statements, which lodash templates use to unwrap
-  // the parameters passed to the compiled template inside the scope. We therefore
-  // need to unwrap them ourselves here. This is essentially what lodash does internally
-  // To tell lodash it should not use with we set a variable
-  const template = _.template(source, _.defaults(options, { variable: 'data' }));
-  // All templateVariables which should be available
-  // @see HtmlWebpackPlugin.prototype.executeTemplate
-  const templateVariables = [
-    'compilation',
-    'webpack',
-    'webpackConfig',
-    'htmlWebpackPlugin'
-  ];
-  return 'var _ = require(' + loaderUtils.stringifyRequest(this, require.resolve('lodash')) + ');' +
-    'module.exports = function (templateParams) {' +
-      // Declare the template variables in the outer scope of the
-      // lodash template to unwrap them
-      templateVariables.map(function (variableName) {
-        return 'var ' + variableName + ' = templateParams.' + variableName;
-      }).join(';') + ';' +
+  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) {' +
       // Execute the lodash template
       'return (' + template.source + ')();' +
-    '}';
+    '}}';
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "html-webpack-plugin",
-  "version": "3.1.0",
+  "version": "4.0.0-alpha.2",
   "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,8 +12,12 @@
   ],
   "scripts": {
     "pretest": "semistandard",
+    "posttest": "tsc",
+    "commit": "git-cz",
     "build-examples": "node examples/build-examples.js",
-    "test": "jasmine",
+    "test": "jest --runInBand --verbose --coverage",
+    "test-watch": "jest --runInBand --watch",
+    "puml": "npx puml generate flow.puml -o flow.png",
     "release": "standard-version"
   },
   "semistandard": {
@@ -22,37 +26,41 @@
     ]
   },
   "devDependencies": {
+    "@types/loader-utils": "1.1.3",
+    "@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",
-    "jade-loader": "^0.8.0",
-    "jasmine": "^2.5.2",
-    "jasmine-diff-matchers": "^2.0.0",
+    "jest": "23.3.0",
+    "pug": "2.0.3",
+    "pug-loader": "2.4.0",
     "rimraf": "^2.5.4",
     "semistandard": "8.0.0",
     "standard-version": "^4.3.0",
     "style-loader": "^0.13.1",
+    "typescript": "2.9.1",
     "underscore-template-loader": "^0.7.3",
     "url-loader": "^0.5.7",
-    "webpack": "^1.14.0",
-    "webpack-recompilation-simulator": "^1.3.0"
+    "webpack": "4.1.0",
+    "webpack-cli": "2.0.12",
+    "webpack-recompilation-simulator": "^3.0.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",
@@ -64,6 +72,17 @@
   "homepage": "https://github.com/jantimon/html-webpack-plugin",
   "repository": "https://github.com/jantimon/html-webpack-plugin.git",
   "engines": {
-    "node": ">=6.11.5"
+    "node": ">=6.9"
+  },
+  "config": {
+    "commitizen": {
+      "path": "./node_modules/cz-conventional-changelog"
+    }
+  },
+  "jest": {
+    "watchPathIgnorePatterns": [
+      "<rootDir>/dist"
+    ],
+    "testEnvironment": "node"
   }
 }