feat: add "includeRelated" option to also copy all related files (#63)

This will allow us to generically all "related files", such as gzipped ones, instead of just source maps.

BREAKING CHANGE: Remove `includeSourcemap` option

Author: ndbroadbent

CHANGELOG.md

@@ -8,6 +8,11 @@ https://github.com/SimenB/add-asset-html-webpack-plugin/releases
 
 ## [Unreleased]
 
+### Features
+
+- Replace `includeSourcemap` with a more generic `includeRelatedFiles` which
+  support adding all sort of files, not just source maps
+
 ### Changed
 
 - Drop support for Node 4 and html-webpack-plugin@2
@@ -153,20 +158,37 @@ https://github.com/SimenB/add-asset-html-webpack-plugin/releases
 
 Initial release
 
-[unreleased]: https://github.com/SimenB/add-asset-html-webpack-plugin/compare/v2.1.3...HEAD
-[2.1.3]: https://github.com/SimenB/add-asset-html-webpack-plugin/compare/v2.1.2...v2.1.3
-[2.1.2]: https://github.com/SimenB/add-asset-html-webpack-plugin/compare/v2.1.1...v2.1.2
-[2.1.1]: https://github.com/SimenB/add-asset-html-webpack-plugin/compare/v2.1.0...v2.1.1
-[2.1.0]: https://github.com/SimenB/add-asset-html-webpack-plugin/compare/v2.0.1...v2.1.0
-[2.0.1]: https://github.com/SimenB/add-asset-html-webpack-plugin/compare/v2.0.0...v2.0.1
-[2.0.0]: https://github.com/SimenB/add-asset-html-webpack-plugin/compare/v1.0.2...v2.0.0
-[1.0.2]: https://github.com/SimenB/add-asset-html-webpack-plugin/compare/v1.0.1...v1.0.2
-[1.0.1]: https://github.com/SimenB/add-asset-html-webpack-plugin/compare/v1.0.0...v1.0.1
-[1.0.0]: https://github.com/SimenB/add-asset-html-webpack-plugin/compare/v0.4.0...v1.0.0
-[0.4.0]: https://github.com/SimenB/add-asset-html-webpack-plugin/compare/v0.3.0...v0.4.0
-[0.3.0]: https://github.com/SimenB/add-asset-html-webpack-plugin/compare/v0.2.0...v0.3.0
-[0.2.0]: https://github.com/SimenB/add-asset-html-webpack-plugin/compare/v0.1.0...v0.2.0
-[0.1.0]: https://github.com/SimenB/add-asset-html-webpack-plugin/compare/v0.0.3...v0.1.0
-[0.0.3]: https://github.com/SimenB/add-asset-html-webpack-plugin/compare/v0.0.2...v0.0.3
-[0.0.2]: https://github.com/SimenB/add-asset-html-webpack-plugin/compare/v0.0.1...v0.0.2
-[0.0.1]: https://github.com/SimenB/add-asset-html-webpack-plugin/commit/02e262d47b56934b714f71d92b557ba3204eae22
+[unreleased]:
+  https://github.com/SimenB/add-asset-html-webpack-plugin/compare/v2.1.3...HEAD
+[2.1.3]:
+  https://github.com/SimenB/add-asset-html-webpack-plugin/compare/v2.1.2...v2.1.3
+[2.1.2]:
+  https://github.com/SimenB/add-asset-html-webpack-plugin/compare/v2.1.1...v2.1.2
+[2.1.1]:
+  https://github.com/SimenB/add-asset-html-webpack-plugin/compare/v2.1.0...v2.1.1
+[2.1.0]:
+  https://github.com/SimenB/add-asset-html-webpack-plugin/compare/v2.0.1...v2.1.0
+[2.0.1]:
+  https://github.com/SimenB/add-asset-html-webpack-plugin/compare/v2.0.0...v2.0.1
+[2.0.0]:
+  https://github.com/SimenB/add-asset-html-webpack-plugin/compare/v1.0.2...v2.0.0
+[1.0.2]:
+  https://github.com/SimenB/add-asset-html-webpack-plugin/compare/v1.0.1...v1.0.2
+[1.0.1]:
+  https://github.com/SimenB/add-asset-html-webpack-plugin/compare/v1.0.0...v1.0.1
+[1.0.0]:
+  https://github.com/SimenB/add-asset-html-webpack-plugin/compare/v0.4.0...v1.0.0
+[0.4.0]:
+  https://github.com/SimenB/add-asset-html-webpack-plugin/compare/v0.3.0...v0.4.0
+[0.3.0]:
+  https://github.com/SimenB/add-asset-html-webpack-plugin/compare/v0.2.0...v0.3.0
+[0.2.0]:
+  https://github.com/SimenB/add-asset-html-webpack-plugin/compare/v0.1.0...v0.2.0
+[0.1.0]:
+  https://github.com/SimenB/add-asset-html-webpack-plugin/compare/v0.0.3...v0.1.0
+[0.0.3]:
+  https://github.com/SimenB/add-asset-html-webpack-plugin/compare/v0.0.2...v0.0.3
+[0.0.2]:
+  https://github.com/SimenB/add-asset-html-webpack-plugin/compare/v0.0.1...v0.0.2
+[0.0.1]:
+  https://github.com/SimenB/add-asset-html-webpack-plugin/commit/02e262d47b56934b714f71d92b557ba3204eae22

README.md

@@ -108,11 +108,12 @@ Type: `boolean`, default: `false`
 If `true`, will append a unique hash of the file to the filename. This is useful
 for cache busting.
 
-#### `includeSourcemap`
+#### `includeRelatedFiles`
 
 Type: `boolean`, default: `true`
 
-If `true`, will add `filepath + '.map'` to the compilation as well.
+If `true`, will add `filepath + '.*'` to the compilation as well. E.g
+`filepath.map` and `filepath.gz`.
 
 #### `outputPath`
 
@@ -200,16 +201,26 @@ const webpackConfig = {
 [npm-url]: https://npmjs.org/package/add-asset-html-webpack-plugin
 [npm-image]: https://img.shields.io/npm/v/add-asset-html-webpack-plugin.svg
 [travis-url]: https://travis-ci.org/SimenB/add-asset-html-webpack-plugin
-[travis-image]: https://img.shields.io/travis/SimenB/add-asset-html-webpack-plugin/master.svg
-[appveyor-url]: https://ci.appveyor.com/project/SimenB/add-asset-html-webpack-plugin
-[appveyor-image]: https://ci.appveyor.com/api/projects/status/dim5hcl49h3pi332/branch/master?svg=true
+[travis-image]:
+  https://img.shields.io/travis/SimenB/add-asset-html-webpack-plugin/master.svg
+[appveyor-url]:
+  https://ci.appveyor.com/project/SimenB/add-asset-html-webpack-plugin
+[appveyor-image]:
+  https://ci.appveyor.com/api/projects/status/dim5hcl49h3pi332/branch/master?svg=true
 [codecov-url]: https://codecov.io/gh/SimenB/add-asset-html-webpack-plugin
-[codecov-image]: https://img.shields.io/codecov/c/github/SimenB/add-asset-html-webpack-plugin/master.svg
+[codecov-image]:
+  https://img.shields.io/codecov/c/github/SimenB/add-asset-html-webpack-plugin/master.svg
 [david-url]: https://david-dm.org/SimenB/add-asset-html-webpack-plugin
-[david-image]: https://img.shields.io/david/SimenB/add-asset-html-webpack-plugin.svg
-[david-dev-url]: https://david-dm.org/SimenB/add-asset-html-webpack-plugin?type=dev
-[david-dev-image]: https://img.shields.io/david/dev/SimenB/add-asset-html-webpack-plugin.svg
-[david-peer-url]: https://david-dm.org/SimenB/add-asset-html-webpack-plugin?type=peer
-[david-peer-image]: https://img.shields.io/david/peer/SimenB/add-asset-html-webpack-plugin.svg
+[david-image]:
+  https://img.shields.io/david/SimenB/add-asset-html-webpack-plugin.svg
+[david-dev-url]:
+  https://david-dm.org/SimenB/add-asset-html-webpack-plugin?type=dev
+[david-dev-image]:
+  https://img.shields.io/david/dev/SimenB/add-asset-html-webpack-plugin.svg
+[david-peer-url]:
+  https://david-dm.org/SimenB/add-asset-html-webpack-plugin?type=peer
+[david-peer-image]:
+  https://img.shields.io/david/peer/SimenB/add-asset-html-webpack-plugin.svg
 [greenkeeper-url]: https://greenkeeper.io/
-[greenkeeper-image]: https://badges.greenkeeper.io/SimenB/add-asset-html-webpack-plugin.svg
+[greenkeeper-image]:
+  https://badges.greenkeeper.io/SimenB/add-asset-html-webpack-plugin.svg

__snapshots__/test.js.snap

@@ -43,7 +43,7 @@ Object {
 }
 `;
 
-exports[`should add sourcemap to compilation 1`] = `
+exports[`should add sourcemap and gzipped files to compilation 1`] = `
 Object {
   "css": Array [],
   "js": Array [
@@ -86,12 +86,12 @@ exports[`should replace compilation assets key if \`outputPath\` is set 1`] = `
 Object {
   "css": Array [],
   "js": Array [
-    "my-file.js",
+    "some-file.js",
   ],
 }
 `;
 
-exports[`should skip adding sourcemap to compilation if set to false 1`] = `
+exports[`should skip adding sourcemap and gzipped files to compilation if set to false 1`] = `
 Object {
   "css": Array [],
   "js": Array [

fixture/some-file.js

@@ -1,50 +1,52 @@
 declare namespace AddAssetHtmlPlugin {
   interface Options {
     /**
-    * The absolute path of the file you want to add to the compilation, and resulting HTML file.
-    * Mandatory.
-    */
+     * The absolute path of the file you want to add to the compilation, and resulting HTML file.
+     * Mandatory.
+     */
     filepath: string;
 
     /**
-    * Files that the assets will be added to.
-    * By default the assets will be included in all files. If files are defined, the
-    * assets will only be included in specified file globs.
-    */
+     * Files that the assets will be added to.
+     * By default the assets will be included in all files. If files are defined, the
+     * assets will only be included in specified file globs.
+     */
     files?: string | string[];
 
     /**
-    * If true, will append a unique hash of the file to the filename. This is useful for cache busting.
-    * Default false.
-    */
+     * If true, will append a unique hash of the file to the filename. This is useful for cache busting.
+     * Default false.
+     */
     hash?: boolean;
 
     /**
-    * If true, will add filepath + '.map' to the compilation as well.
-    * Default true.
-    */
-    includeSourcemap?: boolean;
+     * If `true`, will add `filepath + '.*'` to the compilation as well. E.g `filepath.map` and `filepath.gz`.
+     * Default true.
+     */
+    includeRelatedFiles?: boolean;
 
     /**
-    * If set, will be used as the output directory of the file.
-    */
+     * If set, will be used as the output directory of the file.
+     */
     outputPath?: string;
 
     /**
-    * If set, will be used as the public path of the script or link tag.
-    */
+     * If set, will be used as the public path of the script or link tag.
+     */
     publicPath?: string;
 
     /**
-    * Can be set to css to create a link-tag instead of a script-tag.
-    * Default 'js'
-    */
+     * Can be set to css to create a link-tag instead of a script-tag.
+     * Default 'js'
+     */
     typeOfAsset?: string;
   }
 }
 
 declare class AddAssetHtmlPlugin {
-  constructor(options: AddAssetHtmlPlugin.Options | AddAssetHtmlPlugin.Options[]);
+  constructor(
+    options: AddAssetHtmlPlugin.Options | AddAssetHtmlPlugin.Options[],
+  );
   apply(compiler: any): void;
 }
 

fixture/some-file.js.gz

@@ -63,6 +63,7 @@
     "licensor": "^4.0.0",
     "lint-staged": "^7.0.0",
     "prettier": "^1.8.2",
+    "slash": "^2.0.0",
     "webpack": "^4.0.0",
     "webpack-cli": "^3.1.0"
   },
@@ -92,7 +93,7 @@
       "eslint --fix",
       "git add"
     ],
-    "*.{md,json}": [
+    "*.{md,json,ts}": [
       "prettier --write",
       "git add"
     ],
@@ -104,6 +105,7 @@
   "prettier": {
     "singleQuote": true,
     "trailingComma": "all",
+    "proseWrap": "always",
     "overrides": [
       {
         "files": [

fixture/some-file.js.map

@@ -2,6 +2,7 @@ import path from 'path';
 import crypto from 'crypto';
 import pEachSeries from 'p-each-series';
 import micromatch from 'micromatch';
+import globby from 'globby';
 import handleUrl from './handleUrl';
 
 function ensureTrailingSlash(string) {
@@ -39,7 +40,7 @@ async function addFileToAssets(
   {
     filepath,
     typeOfAsset = 'js',
-    includeSourcemap = true,
+    includeRelatedFiles = true,
     hash = false,
     publicPath,
     outputPath,
@@ -86,12 +87,17 @@ async function addFileToAssets(
 
   resolveOutput(compilation, addedFilename, outputPath);
 
-  if (includeSourcemap) {
-    const addedMapFilename = await htmlPluginData.plugin.addFileToAssets(
-      `${filepath}.map`,
-      compilation,
+  if (includeRelatedFiles) {
+    const relatedFiles = await globby(`${filepath}.*`);
+    await Promise.all(
+      relatedFiles.sort().map(async relatedFile => {
+        const addedMapFilename = await htmlPluginData.plugin.addFileToAssets(
+          relatedFile,
+          compilation,
+        );
+        resolveOutput(compilation, addedMapFilename, outputPath);
+      }),
     );
-    resolveOutput(compilation, addedMapFilename, outputPath);
   }
 
   return Promise.resolve(null);

index.d.ts

@@ -1,8 +1,11 @@
 import path from 'path';
+import slash from 'slash';
 import AddAssetHtmlPlugin from './src/index';
 import addAllAssetsToCompilation from './src/addAllAssetsToCompilation';
 import handleUrl from './src/handleUrl';
 
+const testFile = slash(require.resolve('./fixture/some-file'));
+
 const pluginMock = {
   plugin: {
     addFileToAssets: filename => Promise.resolve(path.basename(filename)),
@@ -20,7 +23,7 @@ test('assets should should be reversed', () => {
   expect(new AddAssetHtmlPlugin(['a', 'b']).assets).toEqual(['b', 'a']);
 });
 
-test('should not reject success', async () => {
+test('should not reject on success', async () => {
   expect(await addAllAssetsToCompilation([], {}, pluginMock)).toEqual(
     pluginMock,
   );
@@ -90,7 +93,7 @@ test('should add file missing "/" to public path', async () => {
   expect(pluginData.assets).toMatchSnapshot();
 });
 
-test('should add sourcemap to compilation', async () => {
+test('should add sourcemap and gzipped files to compilation', async () => {
   const addFileToAssetsStub = jest.fn();
   const compilation = { options: { output: {} } };
   const pluginData = {
@@ -100,25 +103,26 @@ test('should add sourcemap to compilation', async () => {
   addFileToAssetsStub.mockReturnValue(Promise.resolve('my-file.js'));
 
   await addAllAssetsToCompilation(
-    [{ filepath: 'my-file.js' }],
+    [{ filepath: testFile }],
     compilation,
     pluginData,
   );
 
   expect(pluginData.assets).toMatchSnapshot();
 
-  expect(addFileToAssetsStub).toHaveBeenCalledTimes(2);
-  expect(addFileToAssetsStub.mock.calls[0]).toEqual([
-    'my-file.js',
+  expect(addFileToAssetsStub).toHaveBeenCalledTimes(3);
+  expect(addFileToAssetsStub.mock.calls[0]).toEqual([testFile, compilation]);
+  expect(addFileToAssetsStub.mock.calls[1]).toEqual([
+    `${testFile}.gz`,
     compilation,
   ]);
-  expect(addFileToAssetsStub.mock.calls[1]).toEqual([
-    'my-file.js.map',
+  expect(addFileToAssetsStub.mock.calls[2]).toEqual([
+    `${testFile}.map`,
     compilation,
   ]);
 });
 
-test('should skip adding sourcemap to compilation if set to false', async () => {
+test('should skip adding sourcemap and gzipped files to compilation if set to false', async () => {
   const addFileToAssetsStub = jest.fn();
   const compilation = { options: { output: {} } };
   const pluginData = {
@@ -128,7 +132,7 @@ test('should skip adding sourcemap to compilation if set to false', async () =>
   addFileToAssetsStub.mockReturnValue(Promise.resolve('my-file.js'));
 
   await addAllAssetsToCompilation(
-    [{ filepath: 'my-file.js', includeSourcemap: false }],
+    [{ filepath: 'my-file.js', includeRelatedFiles: false }],
     compilation,
     pluginData,
   );
@@ -192,17 +196,18 @@ test('should replace compilation assets key if `outputPath` is set', async () =>
   };
 
   await addAllAssetsToCompilation(
-    [{ filepath: 'my-file.js', outputPath: 'assets' }],
+    [{ filepath: testFile, outputPath: 'assets' }],
     compilation,
     pluginData,
   );
 
   expect(pluginData.assets).toMatchSnapshot();
 
-  expect(compilation.assets['my-file.js']).toBeUndefined();
-  expect(compilation.assets['assets/my-file.js']).toEqual(source);
-  expect(compilation.assets['my-file.js.map']).toBeUndefined();
-  expect(compilation.assets['assets/my-file.js.map']).toEqual(source);
+  expect(compilation.assets).toEqual({
+    'assets/some-file.js': source,
+    'assets/some-file.js.gz': source,
+    'assets/some-file.js.map': source,
+  });
 });
 
 test('filter option should exclude some files', async () => {