Extract findHtmlWebpackPlugin function

jantimon · Jun 8, 2023 · 3a800f0 · 3a800f0
1 parent 7d52c5f
commit 3a800f0
Showing 1 changed file with 115 additions and 97 deletions.
diff --git a/src/index.js b/src/index.js
@@ -198,106 +198,85 @@ class FaviconsWebpackPlugin {
  compilation.fileDependencies.add(this.options.manifest);
  }
 
- // Hook into the html-webpack-plugin processing and add the html
- const HtmlWebpackPlugin = compiler.options.plugins
- .map(({ constructor }) => constructor)
- .find(
- /**
- * Find only HtmlWebpkackPlugin constructors
- * @type {(constructor: Function) => constructor is typeof import('html-webpack-plugin')}
- */
- (constructor) =>
- constructor && constructor.name === 'HtmlWebpackPlugin'
- );
-
- if (HtmlWebpackPlugin && this.options.inject) {
- if (!verifyHtmlWebpackPluginVersion(HtmlWebpackPlugin)) {
- compilation.errors.push(
- new compiler.webpack.WebpackError(
- `${
- 'FaviconsWebpackPlugin - This FaviconsWebpackPlugin version is not compatible with your current HtmlWebpackPlugin version.\n' +
- 'Please upgrade to HtmlWebpackPlugin >= 5 OR downgrade to FaviconsWebpackPlugin 2.x\n'
- }${getHtmlWebpackPluginVersion()}`
- )
- );
+ if (this.options.inject) {
+ // Hook into the html-webpack-plugin processing and add the html
+ findHtmlWebpackPlugin(compilation)
+ ?.getHooks(compilation)
+ .alterAssetTags.tapPromise(
+ 'FaviconsWebpackPlugin',
+ async (htmlPluginData) => {
+ // Skip if a custom injectFunction returns false or if
+ // the htmlWebpackPlugin optuons includes a `favicons: false` flag
+ const isInjectionAllowed =
+ typeof this.options.inject === 'function'
+ ? this.options.inject(htmlPluginData.plugin)
+ : this.options.inject !== false &&
+ htmlPluginData.plugin.userOptions.favicon !== false &&
+ htmlPluginData.plugin.userOptions.favicons !== false;
+
+ if (isInjectionAllowed === false) {
+ return htmlPluginData;
+ }
+
+ const faviconCompilationResult = await faviconCompilation;
+ // faviconCompilation.publicPath and htmlPluginData.publicPath can be:
+ // absolute: http://somewhere.com/app1/
+ // absolute: /demo/app1/
+ // relative: my/app/
+ const publicPathFromHtml = url.resolve(
+ htmlPluginData.publicPath,
+ faviconCompilationResult.publicPath
+ );
+
+ // Prefix links to icons
+ const pathReplacer =
+ !this.options.favicons.path ||
+ this.getCurrentCompilationMode(compiler) === 'light'
+ ? /** @param {string} url */ (url) =>
+ typeof url === 'string' ? publicPathFromHtml + url : url
+ : /** @param {string} url */ (url) => url;
+
+ htmlPluginData.assetTags.meta.push(
+ ...faviconCompilationResult.tags
+ .filter((tag) => tag && tag.length)
+ .map((tag) => parse5.parseFragment(tag).childNodes[0])
+ .map(({ tagName, attrs }) => {
+ const htmlTag = {
+ tagName,
+ voidTag: true,
+ meta: { plugin: 'favicons-webpack-plugin' },
+ attributes: attrs.reduce(
+ (obj, { name, value }) =>
+ Object.assign(obj, { [name]: value }),
+ {}
+ ),
+ };
+ // Prefix link tags
+ if (typeof htmlTag.attributes.href === 'string') {
+ htmlTag.attributes.href = pathReplacer(
+ htmlTag.attributes.href
+ );
+ }
+ // Prefix meta tags
+ if (
+ htmlTag.tagName === 'meta' &&
+ [
+ 'msapplication-TileImage',
+ 'msapplication-config',
+ ].includes(htmlTag.attributes.name)
+ ) {
+ htmlTag.attributes.content = pathReplacer(
+ htmlTag.attributes.content
+ );
+ }
+
+ return htmlTag;
+ })
+ );
 
- return;
- }
- HtmlWebpackPlugin.getHooks(compilation).alterAssetTags.tapPromise(
- 'FaviconsWebpackPlugin',
- async (htmlPluginData) => {
- // Skip if a custom injectFunction returns false or if
- // the htmlWebpackPlugin optuons includes a `favicons: false` flag
- const isInjectionAllowed =
- typeof this.options.inject === 'function'
- ? this.options.inject(htmlPluginData.plugin)
- : this.options.inject !== false &&
- htmlPluginData.plugin.userOptions.favicon !== false &&
- htmlPluginData.plugin.userOptions.favicons !== false;
-
- if (isInjectionAllowed === false) {
  return htmlPluginData;
  }
-
- const faviconCompilationResult = await faviconCompilation;
- // faviconCompilation.publicPath and htmlPluginData.publicPath can be:
- // absolute: http://somewhere.com/app1/
- // absolute: /demo/app1/
- // relative: my/app/
- const publicPathFromHtml = url.resolve(
- htmlPluginData.publicPath,
- faviconCompilationResult.publicPath
- );
-
- // Prefix links to icons
- const pathReplacer =
- !this.options.favicons.path ||
- this.getCurrentCompilationMode(compiler) === 'light'
- ? /** @param {string} url */ (url) =>
- typeof url === 'string' ? publicPathFromHtml + url : url
- : /** @param {string} url */ (url) => url;
-
- htmlPluginData.assetTags.meta.push(
- ...faviconCompilationResult.tags
- .filter((tag) => tag && tag.length)
- .map((tag) => parse5.parseFragment(tag).childNodes[0])
- .map(({ tagName, attrs }) => {
- const htmlTag = {
- tagName,
- voidTag: true,
- meta: { plugin: 'favicons-webpack-plugin' },
- attributes: attrs.reduce(
- (obj, { name, value }) =>
- Object.assign(obj, { [name]: value }),
- {}
- ),
- };
- // Prefix link tags
- if (typeof htmlTag.attributes.href === 'string') {
- htmlTag.attributes.href = pathReplacer(
- htmlTag.attributes.href
- );
- }
- // Prefix meta tags
- if (
- htmlTag.tagName === 'meta' &&
- [
- 'msapplication-TileImage',
- 'msapplication-config',
- ].includes(htmlTag.attributes.name)
- ) {
- htmlTag.attributes.content = pathReplacer(
- htmlTag.attributes.content
- );
- }
-
- return htmlTag;
- })
- );
-
- return htmlPluginData;
- }
- );
+ );
  }
 
  // Save the promise and execute the callback immediately to not block
@@ -629,6 +608,45 @@ function getHtmlWebpackPluginVersion() {
  }
 }
 
+/**
+ * Return `HtmlWebpackPlugin` if it is available.
+ *
+ * @param {import('webpack').Compilation} compilation
+ * @returns {typeof import('html-webpack-plugin') | undefined}
+ */
+function findHtmlWebpackPlugin(compilation) {
+ const compiler = compilation.compiler;
+
+ const HtmlWebpackPlugin = compiler.options.plugins
+ .map(({ constructor }) => constructor)
+ .find(
+ /**
+ * Find only HtmlWebpkackPlugin constructors
+ * @type {(constructor: Function) => constructor is typeof import('html-webpack-plugin')}
+ */
+ (constructor) => constructor && constructor.name === 'HtmlWebpackPlugin'
+ );
+
+ if (!HtmlWebpackPlugin) {
+ return undefined;
+ }
+
+ if (!verifyHtmlWebpackPluginVersion(HtmlWebpackPlugin)) {
+ compilation.errors.push(
+ new compiler.webpack.WebpackError(
+ `${
+ 'FaviconsWebpackPlugin - This FaviconsWebpackPlugin version is not compatible with your current HtmlWebpackPlugin version.\n' +
+ 'Please upgrade to HtmlWebpackPlugin >= 5 OR downgrade to FaviconsWebpackPlugin 2.x\n'
+ }${getHtmlWebpackPluginVersion()}`
+ )
+ );
+
+ return undefined;
+ }
+
+ return HtmlWebpackPlugin;
+}
+
 /**
  * Try to load favicon for the full favicon generation
  *