diff --git a/README.md b/README.md index a161735..72075ab 100644 --- a/README.md +++ b/README.md @@ -6,8 +6,8 @@ This plugin adds preload links by getting output assets from the build tools you Supporting: - Vite 4 and 5 **(on build only)** -- Webpack 5 (with HTMLWebpackPlugin 5) -- Rspack (with HTMLWebpackPlugin 5) +- Webpack 5 (with HtmlWebpackPlugin 5) +- Rspack (with HtmlWebpackPlugin 5) > [!NOTE] > This plugin combines [vite-plugin-inject-preload](https://github.com/Applelo/vite-plugin-inject-preload) and [html-webpack-inject-preload](https://github.com/principalstudio/html-webpack-inject-preload) into one package. @@ -46,7 +46,7 @@ Example: [`playground/vitejs`](./playground/vitejs)
-Webpack (with HTMLWebpackPlugin)
+Webpack (with HtmlWebpackPlugin)
```ts // webpack.config.js @@ -66,7 +66,7 @@ Example: [`playground/webpack`](./playground/webpack)
-Rspack (with HTMLWebpackPlugin)
+Rspack (with HtmlWebpackPlugin)
```ts // rspack.config.js diff --git a/src/adapter/HTMLWebpackPlugin.ts b/src/adapter/HTMLWebpackPlugin.ts index 592f1ad..7388c4b 100644 --- a/src/adapter/HTMLWebpackPlugin.ts +++ b/src/adapter/HTMLWebpackPlugin.ts @@ -1,6 +1,6 @@ import type { Compilation } from 'webpack' import type { HtmlTagDescriptor } from 'vite' -import { getHTMLWebpackPlugin } from '../helper/getHTMLWebpackPlugin' +import { getHtmlWebpackPlugin } from '../helper/getHtmlWebpackPlugin' import type { Options, UnpluginCompiler } from '../types' import { getTagsAttributes } from '../helper/getTagsAttributes' import { serializeTags } from '../helper/serializer' @@ -16,11 +16,11 @@ export function htmlWebpackPluginAdapter(args: { compiler.hooks.compilation.tap(name, async (compilation) => { const isWebpack = 'assetsInfo' in compilation const logger = compilation.getLogger(name) - const HTMLWebpackPlugin = await getHTMLWebpackPlugin(isWebpack) - if (!HTMLWebpackPlugin) + const HtmlWebpackPlugin = await getHtmlWebpackPlugin(isWebpack) + if (!HtmlWebpackPlugin) return - const hooks = HTMLWebpackPlugin.default.getHooks(compilation as Compilation) + const hooks = HtmlWebpackPlugin.default.getHooks(compilation as Compilation) let tagsAttributes: any[] = [] hooks.alterAssetTagGroups.tapAsync( diff --git a/src/adapter/vite.ts b/src/adapter/vite.ts new file mode 100644 index 0000000..4f1b935 --- /dev/null +++ b/src/adapter/vite.ts @@ -0,0 +1,56 @@ +import type { HtmlTagDescriptor, Logger } from 'vite' +import type { OutputBundle } from 'rollup' +import { getAssetsForViteJS } from '../helper/getAssets' +import type { Options } from '../types' +import { getTagsAttributes } from '../helper/getTagsAttributes' +import { serializeTags } from '../helper/serializer' + +export function viteAdapter(args: { + bundle: OutputBundle + html: string + options: Options + customInject: RegExp + viteBasePath: string + viteLogger: Logger +}) { + const { + bundle, + html, + options, + customInject, + viteBasePath, + viteLogger, + } = args + + const injectTo + = (options.injectTo && options.injectTo !== 'custom') + ? options.injectTo + : 'head-prepend' + + const assets = getAssetsForViteJS(bundle) + const tags: HtmlTagDescriptor[] = [] + const tagsAttributes = getTagsAttributes( + assets, + options, + viteBasePath, + viteLogger, + ) + + tagsAttributes.forEach((attrs) => { + tags.push({ + tag: 'link', + attrs, + injectTo, + }) + }) + + if (options.injectTo === 'custom') { + return html.replace( + customInject, + (match, p1) => `\n${serializeTags(tags, p1)}`, + ) + } + else { + return tags + } +} diff --git a/src/helper/getHTMLWebpackPlugin.ts b/src/helper/getHTMLWebpackPlugin.ts index 3c038a0..828bf66 100644 --- a/src/helper/getHTMLWebpackPlugin.ts +++ b/src/helper/getHTMLWebpackPlugin.ts @@ -1,7 +1,7 @@ -export async function getHTMLWebpackPlugin(throwError = true) { +export async function getHtmlWebpackPlugin(throwError = true) { try { - const HTMLWebpackPlugin = await import('html-webpack-plugin') - return HTMLWebpackPlugin + const HtmlWebpackPlugin = await import('html-webpack-plugin') + return HtmlWebpackPlugin } catch (error) { if (throwError) { diff --git a/src/index.ts b/src/index.ts index 65f98e2..7e7aae7 100644 --- a/src/index.ts +++ b/src/index.ts @@ -1,12 +1,10 @@ import type { UnpluginFactory } from 'unplugin' import { createUnplugin } from 'unplugin' -import type { HtmlTagDescriptor, IndexHtmlTransformContext, Logger } from 'vite' +import type { IndexHtmlTransformContext, Logger } from 'vite' import type { Options } from './types' -import { getTagsAttributes } from './helper/getTagsAttributes' -import { serializeTags } from './helper/serializer' -import { getAssetsForViteJS } from './helper/getAssets' import { htmlRspackPluginAdapter } from './adapter/HtmlRspackPlugin' -import { htmlWebpackPluginAdapter } from './adapter/HTMLWebpackPlugin' +import { htmlWebpackPluginAdapter } from './adapter/HtmlWebpackPlugin' +import { viteAdapter } from './adapter/vite' const customInject = /([ \t]*)/i let viteBasePath: string @@ -26,42 +24,20 @@ export const unpluginFactory: UnpluginFactory = options => ({ order: 'post', handler(html, ctx) { const bundle: IndexHtmlTransformContext['bundle'] = ctx.bundle + // ignore next because the bundle will be always here on build /* c8 ignore next */ if (!bundle) return html - const injectTo - = (options.injectTo && options.injectTo !== 'custom') - ? options.injectTo - : 'head-prepend' - - const assets = getAssetsForViteJS(bundle) - const tags: HtmlTagDescriptor[] = [] - const tagsAttributes = getTagsAttributes( - assets, + return viteAdapter({ + bundle, + html, options, + customInject, viteBasePath, viteLogger, - ) - - tagsAttributes.forEach((attrs) => { - tags.push({ - tag: 'link', - attrs, - injectTo, - }) }) - - if (options.injectTo === 'custom') { - return html.replace( - customInject, - (match, p1) => `\n${serializeTags(tags, p1)}`, - ) - } - else { - return tags - } }, }, }, diff --git a/test/getHTMLWebpackPlugin.test.ts b/test/getHTMLWebpackPlugin.test.ts index 8ce5905..489d682 100644 --- a/test/getHTMLWebpackPlugin.test.ts +++ b/test/getHTMLWebpackPlugin.test.ts @@ -1,16 +1,16 @@ import { describe, expect, it, vi } from 'vitest' -import { getHTMLWebpackPlugin } from '../src/helper/getHTMLWebpackPlugin' +import { getHtmlWebpackPlugin } from '../src/helper/getHtmlWebpackPlugin' -describe('excerpt get HTMLWebpackPlugin', () => { - it('get HTMLWebpackPlugin', async () => { - const HTMLWebpackPlugin = await getHTMLWebpackPlugin() - expect(HTMLWebpackPlugin).not.toBeNull() +describe('excerpt get HtmlWebpackPlugin', () => { + it('get HtmlWebpackPlugin', async () => { + const HtmlWebpackPlugin = await getHtmlWebpackPlugin() + expect(HtmlWebpackPlugin).not.toBeNull() }) - it('failed get HTMLWebpackPlugin', async () => { + it('failed get HtmlWebpackPlugin', async () => { vi.doMock('html-webpack-plugin', () => {}) try { - await getHTMLWebpackPlugin() + await getHtmlWebpackPlugin() } catch (error) { expect(error).toBeDefined()