feat: use the processAssets webpack api to add assets

.node-version

@@ -1 +1 @@
-10.18.0
+10.13.0

package.json

@@ -51,15 +51,15 @@
  "diffable-html": "4.0.0",
  "eslint": "^6.8.0",
  "fs-extra": "^8.1.0",
- "html-webpack-plugin": "4.3.0",
+ "html-webpack-plugin": "^5.0.0-alpha.7",
  "image-size": "0.8.3",
  "nyc": "^15.0.0",
  "prettier": "1.19.1",
  "standard-version": "8.0.2",
  "typescript": "3.7.4",
  "webpack": "^5.2.0",
- "webpack-cli": "^3.3.10",
- "webpack-dev-server": "^3.10.1",
+ "webpack-cli": "4.1.0",
+ "webpack-dev-server": "3.11.0",
  "webpack-merge": "^4.2.2"
  },
  "dependencies": {
@@ -86,6 +86,6 @@
  }
  },
  "engines": {
- "node": ">=8.9.4"
+ "node": ">=10.13.0"
  }
 }

src/compiler.js

@@ -1,6 +1,7 @@
 const path = require('path');
 const findCacheDir = require('find-cache-dir');
 const entryPlugin = require('webpack/lib/EntryPlugin');
+const Compilation = require('webpack').Compilation;
 
 module.exports.run = (faviconOptions, context, compilation) => {
  const {
@@ -12,7 +13,7 @@ module.exports.run = (faviconOptions, context, compilation) => {
  outputPath
  } = faviconOptions;
  // The entry file is just an empty helper
- const filename = '[fullhash]';
+ const filename = 'favicon-[fullhash]';
  const publicPath = getPublicPath(
  publicPathOption,
  compilation.outputOptions.publicPath
@@ -21,13 +22,16 @@ module.exports.run = (faviconOptions, context, compilation) => {
  // Create an additional child compiler which takes the template
  // and turns it into an Node.JS html factory.
  // This allows us to use loaders during the compilation
- const compiler = compilation.createChildCompiler('favicons-webpack-plugin', {
- filename,
- publicPath,
- libraryTarget: 'var',
- iife: false
- });
- compiler.context = context;
+ const childCompiler = compilation.createChildCompiler(
+ 'favicons-webpack-plugin',
+ {
+ filename,
+ publicPath,
+ libraryTarget: 'var',
+ iife: false
+ }
+ );
+ childCompiler.context = context;
 
  const cacheDirectory =
  cache &&
@@ -53,41 +57,71 @@ module.exports.run = (faviconOptions, context, compilation) => {
  `!${cacheLoader}!${faviconsLoader}!${logo}`,
  path.basename(logo)
  );
- logoCompilationEntry.apply(compiler);
+ logoCompilationEntry.apply(childCompiler);
 
- // Compile and return a promise
- return new Promise((resolve, reject) => {
- compiler.runAsChild((err, [chunk] = [], { hash, errors = [] } = {}) => {
+ /** @type {Promise<{ tags: Array<string>, assets: Array<{name: string, contents: string}> }>} */
+ const compiledFavicons = new Promise((resolve, reject) => {
+ /** @type {Array<import('webpack').sources.CachedSource>} extracted webpack assets */
+ const extractedAssets = [];
+ childCompiler.hooks.thisCompilation.tap(
+ 'FaviconsWebpackPlugin',
+ compilation => {
+ compilation.hooks.processAssets.tap(
+ {
+ name: 'FaviconsWebpackPlugin',
+ stage: Compilation.PROCESS_ASSETS_STAGE_ADDITIONS
+ },
+ assets => {
+ Object.keys(assets)
+ .filter(temporaryTemplateName =>
+ temporaryTemplateName.startsWith('favicon-')
+ )
+ .forEach(temporaryTemplateName => {
+ if (assets[temporaryTemplateName]) {
+ extractedAssets.push(assets[temporaryTemplateName]);
+ compilation.deleteAsset(temporaryTemplateName);
+ }
+ });
+ if (extractedAssets.length > 1) {
+ reject('Unexpected multiplication of favicon generations');
+
+ return;
+ }
+ const extractedAsset = extractedAssets[0];
+ if (extractedAsset) {
+ /**
+ * @type {{ tags: Array<string>, assets: Array<{name: string, contents: string}> }}
+ * The extracted result of the favicon-webpack-plugin loader
+ */
+ const result = eval(extractedAsset.source().toString()); // eslint-disable-line
+ if (result && result.assets) {
+ resolve(result);
+ }
+ }
+ }
+ );
+ }
+ );
+ childCompiler.runAsChild((err, result, { errors = [] } = {}) => {
  if (err || errors.length) {
  return reject(err || errors[0].error);
  }
-
- // Replace [hash] placeholders in filename
- const result = extractAssetFromCompilation(
- compilation,
- compilation.getAssetPath(filename, { hash, chunk })
- );
-
- for (const { name, contents } of result.assets) {
- const binaryContents = Buffer.from(contents, 'base64');
- compilation.assets[name] = {
- source: () => binaryContents,
- size: () => binaryContents.length
- };
- }
-
- return resolve(result.tags);
+ // If no error occured and this promise was not resolved inside the `processAssets` hook
+ // reject the promise although it's unclear why it failed:
+ reject('Could not extract assets');
  });
  });
-};
-
-function extractAssetFromCompilation(compilation, assetPath) {
- const content = compilation.assets[assetPath].source();
- compilation.deleteAsset(assetPath);
 
- /* eslint-disable no-eval */
- return eval(content);
-}
+ return compiledFavicons.then(faviconCompilationResult => {
+ return {
+ assets: faviconCompilationResult.assets.map(({ name, contents }) => ({
+ name,
+ contents: Buffer.from(contents, 'base64')
+ })),
+ tags: faviconCompilationResult.tags
+ };
+ });
+};
 
 /**
  * faviconsPublicPath always wins over compilerPublicPath

src/index.js

@@ -6,7 +6,10 @@ const path = require('path');
 const child = require('./compiler');
 const crypto = require('crypto');
 const Oracle = require('./oracle');
+const Compilation = require('webpack').Compilation;
+const RawSource = require('webpack').sources.RawSource;
 
+/** @type {WeakMap<any, Promise<{tags: string[], assets: Array<{name: string, contents: Buffer | string}>}>>} */
 const faviconCompilations = new WeakMap();
 
 class FaviconsWebpackPlugin {
@@ -102,9 +105,9 @@ class FaviconsWebpackPlugin {
  }
 
  faviconCompilation
- .then(tags => {
+ .then(faviconCompilation => {
  htmlPluginData.assetTags.meta.push(
- ...tags
+ ...faviconCompilation.tags
  .map(tag => parse5.parseFragment(tag).childNodes[0])
  .map(({ tagName, attrs }) => ({
  tagName,
@@ -131,6 +134,25 @@ class FaviconsWebpackPlugin {
  }
  );
 
+ compiler.hooks.thisCompilation.tap('FaviconsWebpackPlugin', compilation => {
+ compilation.hooks.processAssets.tapPromise(
+ {
+ name: 'FaviconsWebpackPlugin',
+ stage: Compilation.PROCESS_ASSETS_STAGE_ADDITIONS
+ },
+ async () => {
+ const faviconCompilation = faviconCompilations.get(compilation);
+ if (!faviconCompilation) {
+ return;
+ }
+ const faviconAssets = (await faviconCompilation).assets;
+ faviconAssets.forEach(({ name, contents }) => {
+ compilation.emitAsset(name, new RawSource(contents, false));
+ });
+ }
+ );
+ });
+
  // Make sure that the build waits for the favicon generation to complete
  compiler.hooks.afterCompile.tapPromise(
  'FaviconsWebpackPlugin',
@@ -157,6 +179,8 @@ class FaviconsWebpackPlugin {
  * The light mode will only add a favicon
  * this is very fast but also very limited
  * it is the default mode for development
+ *
+ * @returns {Promise<{tags: string[], assets: Array<{name: string, contents: Buffer | string}>}>}
  */
  generateFaviconsLight(compilation) {
  return new Promise((resolve, reject) => {
@@ -180,31 +204,34 @@ class FaviconsWebpackPlugin {
  .createHash('sha256')
  .update(content.toString('utf8'))
  .digest('hex');
- const outputPath = compilation.getAssetPath(
- this.options.prefix,
- {
- hash,
- chunk: {
- hash
- }
+ const outputPath = compilation.getAssetPath(this.options.prefix, {
+ hash,
+ chunk: {
+ hash
  }
- );
+ });
  const logoOutputPath = `${outputPath +
  (outputPath.substr(-1) === '/' ? '' : '/')}favicon${faviconExt}`;
- compilation.assets[logoOutputPath] = {
- source: () => content,
- size: () => content.length
- };
- resolve([`<link rel="icon" href="${publicPath}${logoOutputPath}">`]);
+ resolve({
+ assets: [
+ {
+ name: logoOutputPath,
+ contents: content
+ }
+ ],
+ tags: [`<link rel="icon" href="${publicPath}${logoOutputPath}">`]
+ });
  }
  );
  });
  }
 
  /**
- *  The webapp mode will add a variety of icons
+ * The webapp mode will add a variety of icons
  * this is not as fast as the light mode but
  * supports all common browsers and devices
+ *
+ * @returns {Promise<{tags: string[], assets: Array<{name: string, contents: Buffer | string}>}>}
  */
  generateFaviconsWebapp(compilation) {
  // Generate favicons using the npm favicons library

test/failure.test.js

@@ -35,7 +35,10 @@ test('should fail gracefully if the image stream is empty', async t => {
  plugins: [new FaviconsWebpackPlugin({ logo: empty })]
  });
  } catch (err) {
- t.is(err.message, 'Invalid image buffer');
+ const errorMessage = err.message
+ .split('\n')
+ .find(errorLine => errorLine.startsWith('Error:'));
+ t.is(errorMessage, 'Error: Invalid image buffer');
  }
 });
 
@@ -50,7 +53,10 @@ test('should fail gracefully if logo is not a valid image file', async t => {
  plugins: [new FaviconsWebpackPlugin({ logo: invalid })]
  });
  } catch (err) {
- t.is(err.message, 'Invalid image buffer');
+ const errorMessage = err.message
+ .split('\n')
+ .find(errorLine => errorLine.startsWith('Error:'));
+ t.is(errorMessage, 'Error: Invalid image buffer');
  }
 });