refactor: Changed hook names and arguments - the hook order is 'befor…

…eAssetTagGeneration', 'alterAssetTags', 'alterAssetTagGroups', 'afterTemplateExecution', 'beforeEmit', 'afterEmit' BREAKING CHANGE: Renamed beforeHtmlGeneration hook to beforeAssetTagGeneration BREAKING CHANGE: Renamed beforeHtmlProcessing hook to alterAssetTags BREAKING CHANGE: Renamed afterHtmlProcessing hook to beforeEmit
jantimon · Aug 27, 2018 · 14b4456 · 14b4456
1 parent ae8233a
commit 14b4456
Show file tree

Hide file tree

Showing 8 changed files with 583 additions and 244 deletions.
diff --git a/README.md b/README.md
@@ -293,36 +293,101 @@ To allow other [plugins](https://github.com/webpack/docs/wiki/plugins) to alter
 The [lib/hooks.js](https://github.com/jantimon/html-webpack-plugin/blob/master/lib/hooks.js) contains all information
 about which values are passed.
 
-You can tap into the following async hooks:
+[![Concept flow uml](https://raw.githubusercontent.com/jantimon/html-webpack-plugin/master/flow.png)](https://github.com/jantimon/html-webpack-plugin/blob/master/flow.puml)
 
-* `beforeHtmlGeneration`
-* `beforeHtmlProcessing`
-* `alterAssetTags`
-* `afterHtmlProcessing`
-* `afterEmit`
+#### `beforeAssetTagGeneration` hook
 
-Example implementation: [html-webpack-harddisk-plugin](https://github.com/jantimon/html-webpack-harddisk-plugin)
+```
+    AsyncSeriesWaterfallHook<{
+      assets: {
+        publicPath: string,
+        js: Array<{entryName: string, path: string}>,
+        css: Array<{entryName: string, path: string}>,
+        favicon?: string | undefined,
+        manifest?: string | undefined
+      },
+      outputName: string,
+      plugin: HtmlWebpackPlugin
+    }>
+```
 
-**plugin.js**
-```js
-function MyPlugin(options) {
-  // Configure your plugin with options...
-}
+#### `alterAssetTags` hook
+
+```
+    AsyncSeriesWaterfallHook<{
+      assetTags: {
+        scripts: Array<HtmlTagObject>,
+        styles: Array<HtmlTagObject>,
+        meta: Array<HtmlTagObject>,
+      },
+      outputName: string,
+      plugin: HtmlWebpackPlugin
+    }>
+```
 
-MyPlugin.prototype.apply = function (compiler) {
-  compiler.hooks.compilation.tap('MyPlugin', (compilation) => {
-    console.log('The compiler is starting a new compilation...');
+#### `alterAssetTagGroups` hook
 
-    //                                      |      HOOK NAME   |
-    HtmlWebpackPlugin.getHooks(compilation).afterHtmlProcessing.tapAsync(
-      'MyPlugin', // <-- Set a meaningful name here for stacktraces
-      (data, cb) => {
-        data.html += 'The Magic Footer'
+```
+    AsyncSeriesWaterfallHook<{
+      headTags: Array<HtmlTagObject | HtmlTagObject>,
+      bodyTags: Array<HtmlTagObject | HtmlTagObject>,
+      outputName: string,
+      plugin: HtmlWebpackPlugin
+    }>
+```
 
-        cb(null, data)
-      }
-    )
-  })
+#### `afterTemplateExecution` hook
+
+```
+    AsyncSeriesWaterfallHook<{
+      html: string,
+      headTags: Array<HtmlTagObject | HtmlTagObject>,
+      bodyTags: Array<HtmlTagObject | HtmlTagObject>,
+      outputName: string,
+      plugin: HtmlWebpackPlugin,
+    }>
+```
+
+#### `beforeEmit` hook
+
+```
+    AsyncSeriesWaterfallHook<{
+      html: string,
+      outputName: string,
+      plugin: HtmlWebpackPlugin,
+    }>
+```
+
+#### `afterEmit` hook
+
+```
+    AsyncSeriesWaterfallHook<{
+      outputName: string,
+      plugin: HtmlWebpackPlugin
+    }>
+```
+
+Example implementation: [html-webpack-harddisk-plugin](https://github.com/jantimon/html-webpack-harddisk-plugin)
+
+**plugin.js**
+```js
+class MyPlugin {
+  apply (compiler) {
+    compiler.hooks.compilation.tap('MyPlugin', (compilation) => {
+      console.log('The compiler is starting a new compilation...')
+
+      // Staic Plugin interface |compilation |HOOK NAME | register listener 
+      HtmlWebpackPlugin.getHooks(compilation).beforeEmit.tapAsync(
+        'MyPlugin', // <-- Set a meaningful name here for stacktraces
+        (data, cb) => {
+          // Manipulate the content
+          data.html += 'The Magic Footer'
+          // Tell webpack to move on
+          cb(null, data)
+        }
+      )
+    })
+  }
 }
 
 module.exports = MyPlugin
@@ -335,7 +400,7 @@ plugins: [
 ]
 ```
 
-Note that the callback must be passed the HtmlWebpackPluginData in order to pass this onto any other plugins listening on the same `html-webpack-plugin-before-html-processing` event
+Note that the callback must be passed the HtmlWebpackPluginData in order to pass this onto any other plugins listening on the same `beforeEmit` event
 
 <h2 align="center">Maintainers</h2>
 

diff --git a/flow.png b/flow.png
diff --git a/flow.puml b/flow.puml
@@ -0,0 +1,32 @@
+@startuml
+' See docs http://plantuml.com/sequence.html
+'
+' generate png:
+' npm run puml
+autonumber
+
+participant Webpack
+participant ChildCompiler
+participant TagCreator
+participant TemplateExecutor
+participant TagInjector
+
+Webpack -> ChildCompiler : start child compilation
+ChildCompiler -> ChildCompiler : compile html template
+ChildCompiler -> TemplateExecutor : handover compiled template
+Webpack -> TagCreator : hand over compilation\n assets
+note right of TagInjector: beforeAssetTagGeneration
+TagCreator -> TagCreator : create script style\n and meta tags
+note right of TagInjector: alterAssetTags
+TagCreator -> TagCreator : group tags to\n head and body groups
+note right of TagInjector: alterAssetTagGroups
+TagCreator -> TemplateExecutor : handover tag groups
+TemplateExecutor -> TemplateExecutor : execute compiled template
+note right of TagInjector: afterTemplateExecution
+TemplateExecutor -> TagInjector : handover html
+TagInjector -> TagInjector : inject script style\n and meta tags
+note right of TagInjector: beforeEmit
+TagInjector -> Webpack : add generated file to\n assets
+note right of TagInjector: afterEmit
+
+@enduml