Merge pull request #58 from yoriiis/update-hook-parameter

Update customFormatTags parameters Bump to 6.1.0 (see CHANGELOG for details)
yoriiis · May 5, 2020 · 119d5fa · 119d5fa
2 parents b733660 + b00f1f2
commit 119d5fa
Show file tree

Hide file tree

Showing 9 changed files with 72 additions and 49 deletions.
diff --git a/.gitignore b/.gitignore
@@ -2,6 +2,7 @@ node_modules/
 webpack-stats.json
 coverage
 reports
+**/**.map
 
 # stryker temp files
 .stryker-tmp
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -1,5 +1,17 @@
 # CHANGELOG
 
+## 6.1.0
+
+### Fixes
+
+- Fix `isValidCustomFormatTagsDatas` function too strict, `styles` and `scripts` keys can now be empty if no chunks are found.
+
+> HTML files will not be written on the disk for empty chunks
+
+### Updates
+
+- Update the second parameter of the function `customFormatTags`. `files` is replaced by `Entrypoint`. See the dedicated section in the [README](README.md#Entrypoint).
+
 ## 6.0.1
 
 ### Fixes

diff --git a/README.md b/README.md
@@ -1,6 +1,6 @@
 # ChunksWebpackPlugin
 
-![Chunks Webpack Plugin](https://img.shields.io/badge/chunks--webpack--plugin-v6.0.1-546e7a.svg?style=for-the-badge) [![TravisCI](https://img.shields.io/travis/com/yoriiis/chunks-webpack-plugin/master?style=for-the-badge)](https://travis-ci.com/yoriiis/chunks-webpack-plugin) [![Coverage Status](https://img.shields.io/coveralls/github/yoriiis/chunks-webpack-plugin?style=for-the-badge)](https://coveralls.io/github/yoriiis/chunks-webpack-plugin?branch=master) [![Mutation testing badge](https://img.shields.io/endpoint?style=for-the-badge&url=https://badge-api.stryker-mutator.io/github.com/yoriiis/chunks-webpack-plugin/master)](https://dashboard.stryker-mutator.io/reports/github.com/yoriiis/chunks-webpack-plugin/master) ![Node.js](https://img.shields.io/node/v/chunks-webpack-plugin?style=for-the-badge) [![Bundlephobia](https://img.shields.io/bundlephobia/minzip/chunks-webpack-plugin?style=for-the-badge)](https://bundlephobia.com/result?p=fela@latest) [![Npm downloads](https://img.shields.io/npm/dm/chunks-webpack-plugin?color=fb3e44&label=npm%20downloads&style=for-the-badge)](https://npmjs.com/package/chunks-webpack-plugin) [![Chat on Discord](https://img.shields.io/badge/chat-on%20discord-7289da.svg?style=for-the-badge)](https://discordapp.com/invite/uC8FkDn)
+![Chunks Webpack Plugin](https://img.shields.io/badge/chunks--webpack--plugin-v6.1.0-546e7a.svg?style=for-the-badge) [![TravisCI](https://img.shields.io/travis/com/yoriiis/chunks-webpack-plugin/master?style=for-the-badge)](https://travis-ci.com/yoriiis/chunks-webpack-plugin) [![Coverage Status](https://img.shields.io/coveralls/github/yoriiis/chunks-webpack-plugin?style=for-the-badge)](https://coveralls.io/github/yoriiis/chunks-webpack-plugin?branch=master) [![Mutation testing badge](https://img.shields.io/endpoint?style=for-the-badge&url=https://badge-api.stryker-mutator.io/github.com/yoriiis/chunks-webpack-plugin/master)](https://dashboard.stryker-mutator.io/reports/github.com/yoriiis/chunks-webpack-plugin/master) ![Node.js](https://img.shields.io/node/v/chunks-webpack-plugin?style=for-the-badge) [![Bundlephobia](https://img.shields.io/bundlephobia/minzip/chunks-webpack-plugin?style=for-the-badge)](https://bundlephobia.com/result?p=fela@latest) [![Npm downloads](https://img.shields.io/npm/dm/chunks-webpack-plugin?color=fb3e44&label=npm%20downloads&style=for-the-badge)](https://npmjs.com/package/chunks-webpack-plugin) [![Chat on Discord](https://img.shields.io/badge/chat-on%20discord-7289da.svg?style=for-the-badge)](https://discordapp.com/invite/uC8FkDn)
 
 The `ChunksWebpackPlugin` create HTML files to serve your webpack bundles. It is very convenient with multiple entry points and it works without configuration.
 
@@ -145,17 +145,17 @@ The `customFormatTags` function has two parameters:
 
 List of chunks sorted by type: `styles` and `scripts`.
 
-#### `files`
+#### `Entrypoint`
 
-`Array`
+`Object`
 
-List of files unsorted for each entry points.
+Entrypoint object part of a single ChunkGroup. Use this variable only for complete customization if the `chunksSorted` variable does not meet your needs. The variable contains all information about the current entrypoint, log it on the console for more details.
 
 > This function overrides the default behavior, you need to generate yourself your templates, like the example below:
 
 ```javascript
 new ChunksWebpackPlugin({
-    customFormatTags: (chunksSorted, files) => {
+    customFormatTags: (chunksSorted, Entrypoint) => {
         // Generate all HTML style tags with CDN prefix
         const styles = chunksSorted.styles..map(chunkCss =>
           `<link rel="stylesheet" href="https://cdn.domain.com/${chunkCss}" />`

diff --git a/example/webpack.config.js b/example/webpack.config.js
@@ -55,7 +55,7 @@ module.exports = (env, argv) => {
 				fileExtension: '.html',
 				generateChunksManifest: true,
 				generateChunksFiles: true,
-				customFormatTags: (chunksSorted, files) => {
+				customFormatTags: (chunksSorted, Entrypoint) => {
 					// Generate all HTML style tags with CDN prefix
 					const styles = chunksSorted.styles
 						.map(

diff --git a/lib/index.d.ts b/lib/index.d.ts
@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * @name ChunksWebpackPlugin
- * @version 6.0.1
+ * @version 6.1.0
  * @author: Yoriiis aka Joris DANIEL <joris.daniel@gmail.com>
  * @description: ChunksWebpackPlugin create HTML files to serve your webpack bundles. It is very convenient with multiple entrypoints and it works without configuration.
  * {@link https://github.com/yoriiis/chunks-webpack-plugins}
@@ -29,7 +29,7 @@ declare const _default: {
             fileExtension: string;
             templateStyle: string;
             templateScript: string;
-            customFormatTags: boolean | ((chunksSorted: Chunks, files: string[]) => HtmlTags);
+            customFormatTags: boolean | ((chunksSorted: Chunks, Entrypoint: Object) => HtmlTags);
             generateChunksManifest: boolean;
             generateChunksFiles: boolean;
         };
@@ -88,13 +88,13 @@ declare const _default: {
          * Get HTML tags from chunks
          *
          * @param {Object} chunks Chunks sorted by type (style, script)
-         * @param {Array} files List of files associated by entrypoints
+         * @param {Object} Entrypoint Entrypoint object part of a single ChunkGroup
          *
          * @returns {String} HTML tags by entrypoints
          */
-        getHtmlTags({ chunks, files }: {
+        getHtmlTags({ chunks, Entrypoint }: {
             chunks: Chunks;
-            files: string[];
+            Entrypoint: Object;
         }): HtmlTags | undefined;
         /**
          * Sorts all chunks by type (styles or scripts)

diff --git a/lib/index.js b/lib/index.js
@@ -2,7 +2,7 @@
 /**
  * @license MIT
  * @name ChunksWebpackPlugin
- * @version 6.0.1
+ * @version 6.1.0
  * @author: Yoriiis aka Joris DANIEL <joris.daniel@gmail.com>
  * @description: ChunksWebpackPlugin create HTML files to serve your webpack bundles. It is very convenient with multiple entrypoints and it works without configuration.
  * {@link https://github.com/yoriiis/chunks-webpack-plugins}
@@ -63,7 +63,8 @@ module.exports = /** @class */ (function () {
     ChunksWebpackPlugin.prototype.processEntry = function (entryName) {
         var files = this.getFiles(entryName);
         var chunks = this.sortsChunksByType(files);
-        var htmlTags = this.getHtmlTags({ chunks: chunks, files: files });
+        var Entrypoint = this.compilation.entrypoints.get(entryName);
+        var htmlTags = this.getHtmlTags({ chunks: chunks, Entrypoint: Entrypoint });
         // Check if HTML chunk files option is enabled and htmlTags valid
         if (this.options.generateChunksFiles && htmlTags) {
             this.createHtmlChunksFiles({ entryName: entryName, htmlTags: htmlTags });
@@ -119,15 +120,15 @@ module.exports = /** @class */ (function () {
      * Get HTML tags from chunks
      *
      * @param {Object} chunks Chunks sorted by type (style, script)
-     * @param {Array} files List of files associated by entrypoints
+     * @param {Object} Entrypoint Entrypoint object part of a single ChunkGroup
      *
      * @returns {String} HTML tags by entrypoints
      */
     ChunksWebpackPlugin.prototype.getHtmlTags = function (_a) {
-        var chunks = _a.chunks, files = _a.files;
+        var chunks = _a.chunks, Entrypoint = _a.Entrypoint;
         // The user prefers to generate his own HTML tags, use his object
         if (typeof this.options.customFormatTags === 'function') {
-            var htmlTags = this.options.customFormatTags(chunks, files);
+            var htmlTags = this.options.customFormatTags(chunks, Entrypoint);
             // Check if datas are correctly formatted
             if (this.isValidCustomFormatTagsDatas(htmlTags)) {
                 return htmlTags;
@@ -216,9 +217,7 @@ module.exports = /** @class */ (function () {
     ChunksWebpackPlugin.prototype.isValidCustomFormatTagsDatas = function (htmlTags) {
         return (htmlTags !== null &&
             typeof htmlTags.styles !== 'undefined' &&
-            typeof htmlTags.scripts !== 'undefined' &&
-            htmlTags.styles !== '' &&
-            htmlTags.scripts !== '');
+            typeof htmlTags.scripts !== 'undefined');
     };
     /**
      * Update the class property manifest

diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
 	"name": "chunks-webpack-plugin",
-	"version": "6.0.1",
+	"version": "6.1.0",
 	"description": "ChunksWebpackPlugin create HTML files to serve your webpack bundles. It is very convenient with multiple entrypoints and it works without configuration.",
 	"keywords": [
 		"chunks",

diff --git a/src/__tests__/index.test.js b/src/__tests__/index.test.js
@@ -21,6 +21,7 @@ let entryNames;
 let files;
 let chunks;
 let htmlTags;
+let Entrypoint;
 
 const options = {
 	outputPath: '/dist/templates',
@@ -92,18 +93,12 @@ entrypointsMap.set('app-c', {
 });
 
 beforeEach(() => {
+	Entrypoint = entrypointsMap.get('app-a');
 	entryNames = ['app-a', 'app-b', 'app-c'];
-	files = [
-		'css/app-a.css',
-		'js/app-a.js',
-		'css/app-b.css',
-		'js/app-b.js',
-		'css/app-c.css',
-		'js/app-c.js'
-	];
+	files = entrypointsMap.get('app-a').chunks.files;
 	chunks = {
-		styles: ['css/app-a.css', 'css/app-b.css', 'css/app-c.css'],
-		scripts: ['js/app-a.js', 'js/app-b.js', 'js/app-c.js']
+		styles: ['css/vendors~app-a~app-b~app-c.css', 'css/app-a.css'],
+		scripts: ['js/vendors~app-a~app-b~app-c.js', 'js/app-a.js']
 	};
 	htmlTags = {
 		styles:
@@ -220,11 +215,18 @@ describe('ChunksWebpackPlugin processEntry', () => {
 		chunksWebpackPlugin.createHtmlChunksFiles = jest.fn();
 		chunksWebpackPlugin.updateManifest = jest.fn();
 
+		chunksWebpackPlugin.compilation = compilationWebpack;
+		jest.spyOn(chunksWebpackPlugin.compilation.entrypoints, 'get');
+
 		chunksWebpackPlugin.processEntry('app-a');
 
 		expect(chunksWebpackPlugin.getFiles).toHaveBeenCalledWith('app-a');
 		expect(chunksWebpackPlugin.sortsChunksByType).toHaveBeenCalledWith(files);
-		expect(chunksWebpackPlugin.getHtmlTags).toHaveBeenCalledWith({ chunks, files });
+		expect(chunksWebpackPlugin.compilation.entrypoints.get).toHaveBeenCalledWith('app-a');
+		expect(chunksWebpackPlugin.getHtmlTags).toHaveBeenCalledWith({
+			chunks,
+			Entrypoint
+		});
 		expect(chunksWebpackPlugin.createHtmlChunksFiles).toHaveBeenCalledWith({
 			entryName: 'app-a',
 			htmlTags: htmlTags
@@ -244,6 +246,7 @@ describe('ChunksWebpackPlugin processEntry', () => {
 
 		chunksWebpackPlugin.options.generateChunksFiles = false;
 		chunksWebpackPlugin.options.generateChunksManifest = false;
+		chunksWebpackPlugin.compilation = compilationWebpack;
 		chunksWebpackPlugin.processEntry('app-a');
 
 		expect(chunksWebpackPlugin.createHtmlChunksFiles).not.toHaveBeenCalled();
@@ -356,9 +359,12 @@ describe('ChunksWebpackPlugin getHtmlTags', () => {
 		mockCustomFormatTags(chunksWebpackPlugin, htmlTags);
 		mockIsValidCustomFormatTagsDatas(chunksWebpackPlugin, true);
 
-		chunksWebpackPlugin.getHtmlTags({ chunks, files });
+		chunksWebpackPlugin.getHtmlTags({ chunks, Entrypoint });
 
-		expect(chunksWebpackPlugin.options.customFormatTags).toHaveBeenCalledWith(chunks, files);
+		expect(chunksWebpackPlugin.options.customFormatTags).toHaveBeenCalledWith(
+			chunks,
+			Entrypoint
+		);
 		expect(chunksWebpackPlugin.isValidCustomFormatTagsDatas).toHaveBeenCalledWith(htmlTags);
 	});
 
@@ -368,7 +374,7 @@ describe('ChunksWebpackPlugin getHtmlTags', () => {
 		utils.setError = jest.fn();
 		mockIsValidCustomFormatTagsDatas(chunksWebpackPlugin, false);
 
-		chunksWebpackPlugin.getHtmlTags({ chunks, files });
+		chunksWebpackPlugin.getHtmlTags({ chunks, Entrypoint });
 
 		expect(chunksWebpackPlugin.isValidCustomFormatTagsDatas).toHaveBeenCalledWith(htmlTags);
 		expect(utils.setError).toHaveBeenCalledWith(
@@ -386,8 +392,8 @@ describe('ChunksWebpackPlugin sortsChunksByType', () => {
 		chunksWebpackPlugin.publicPath = publicPath;
 
 		expect(chunksWebpackPlugin.sortsChunksByType(files)).toEqual({
-			scripts: ['/dist/js/app-a.js', '/dist/js/app-b.js', '/dist/js/app-c.js'],
-			styles: ['/dist/css/app-a.css', '/dist/css/app-b.css', '/dist/css/app-c.css']
+			scripts: ['/dist/js/vendors~app-a~app-b~app-c.js', '/dist/js/app-a.js'],
+			styles: ['/dist/css/vendors~app-a~app-b~app-c.css', '/dist/css/app-a.css']
 		});
 	});
 });
@@ -396,9 +402,9 @@ describe('ChunksWebpackPlugin formatTags', () => {
 	it('Should call the formatTags function', () => {
 		expect(chunksWebpackPlugin.formatTags(chunks)).toEqual({
 			styles:
-				'<link rel="stylesheet" href="css/app-a.css" /><link rel="stylesheet" href="css/app-b.css" /><link rel="stylesheet" href="css/app-c.css" />',
+				'<link rel="stylesheet" href="css/vendors~app-a~app-b~app-c.css" /><link rel="stylesheet" href="css/app-a.css" />',
 			scripts:
-				'<script src="js/app-a.js"></script><script src="js/app-b.js"></script><script src="js/app-c.js"></script>'
+				'<script src="js/vendors~app-a~app-b~app-c.js"></script><script src="js/app-a.js"></script>'
 		});
 	});
 
@@ -410,9 +416,9 @@ describe('ChunksWebpackPlugin formatTags', () => {
 
 		expect(chunksWebpackPlugin.formatTags(chunks)).toEqual({
 			styles:
-				'<link rel="stylesheet" href="https://cdn.domain.com/css/app-a.css" /><link rel="stylesheet" href="https://cdn.domain.com/css/app-b.css" /><link rel="stylesheet" href="https://cdn.domain.com/css/app-c.css" />',
+				'<link rel="stylesheet" href="https://cdn.domain.com/css/vendors~app-a~app-b~app-c.css" /><link rel="stylesheet" href="https://cdn.domain.com/css/app-a.css" />',
 			scripts:
-				'<script defer src="https://cdn.domain.com/js/app-a.js"></script><script defer src="https://cdn.domain.com/js/app-b.js"></script><script defer src="https://cdn.domain.com/js/app-c.js"></script>'
+				'<script defer src="https://cdn.domain.com/js/vendors~app-a~app-b~app-c.js"></script><script defer src="https://cdn.domain.com/js/app-a.js"></script>'
 		});
 	});
 });

diff --git a/src/index.ts b/src/index.ts
@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * @name ChunksWebpackPlugin
- * @version 6.0.1
+ * @version 6.1.0
  * @author: Yoriiis aka Joris DANIEL <joris.daniel@gmail.com>
  * @description: ChunksWebpackPlugin create HTML files to serve your webpack bundles. It is very convenient with multiple entrypoints and it works without configuration.
  * {@link https://github.com/yoriiis/chunks-webpack-plugins}
@@ -37,7 +37,7 @@ export = class ChunksWebpackPlugin {
 		fileExtension: string;
 		templateStyle: string;
 		templateScript: string;
-		customFormatTags: boolean | ((chunksSorted: Chunks, files: Array<string>) => HtmlTags);
+		customFormatTags: boolean | ((chunksSorted: Chunks, Entrypoint: Object) => HtmlTags);
 		generateChunksManifest: boolean;
 		generateChunksFiles: boolean;
 	};
@@ -106,7 +106,8 @@ export = class ChunksWebpackPlugin {
 	processEntry(entryName: string): void {
 		const files = this.getFiles(entryName);
 		const chunks = this.sortsChunksByType(files);
-		const htmlTags = this.getHtmlTags({ chunks, files });
+		const Entrypoint = this.compilation.entrypoints.get(entryName);
+		const htmlTags = this.getHtmlTags({ chunks, Entrypoint });
 
 		// Check if HTML chunk files option is enabled and htmlTags valid
 		if (this.options.generateChunksFiles && htmlTags) {
@@ -168,14 +169,20 @@ export = class ChunksWebpackPlugin {
 	 * Get HTML tags from chunks
 	 *
 	 * @param {Object} chunks Chunks sorted by type (style, script)
-	 * @param {Array} files List of files associated by entrypoints
+	 * @param {Object} Entrypoint Entrypoint object part of a single ChunkGroup
 	 *
 	 * @returns {String} HTML tags by entrypoints
 	 */
-	getHtmlTags({ chunks, files }: { chunks: Chunks; files: Array<string> }): undefined | HtmlTags {
+	getHtmlTags({
+		chunks,
+		Entrypoint
+	}: {
+		chunks: Chunks;
+		Entrypoint: Object;
+	}): undefined | HtmlTags {
 		// The user prefers to generate his own HTML tags, use his object
 		if (typeof this.options.customFormatTags === 'function') {
-			const htmlTags = this.options.customFormatTags(chunks, files);
+			const htmlTags = this.options.customFormatTags(chunks, Entrypoint);
 
 			// Check if datas are correctly formatted
 			if (this.isValidCustomFormatTagsDatas(htmlTags)) {
@@ -268,9 +275,7 @@ export = class ChunksWebpackPlugin {
 		return (
 			htmlTags !== null &&
 			typeof htmlTags.styles !== 'undefined' &&
-			typeof htmlTags.scripts !== 'undefined' &&
-			htmlTags.styles !== '' &&
-			htmlTags.scripts !== ''
+			typeof htmlTags.scripts !== 'undefined'
 		);
 	}