Avoid generating default url loader images

Legend-Master · Aug 15, 2024 · db9aa6e · db9aa6e
1 parent bbd3c02
commit db9aa6e
Show file tree

Hide file tree

Showing 2 changed files with 67 additions and 40 deletions.
diff --git a/src/index.ts b/src/index.ts
@@ -1,21 +1,51 @@
 import path from 'node:path'
 import type { LoadContext, Plugin, OptionValidationContext } from '@docusaurus/types'
-import { DEFAULT_LOADER_OPTIONS, type LoaderOptions } from './loader.js'
+import type { LoaderOptions, Preset, SupportedOutputTypes } from './loader.js'
 // import { Compilation, Compiler, NormalModule, type LoaderContext } from 'webpack'
 // import { fileURLToPath } from 'node:url'
 
 export type { NativeIdealImageProps } from './theme/NativeIdealImage.js'
 export type {
 	NativeIdealImageData,
-	DEFAULT_LOADER_OPTIONS,
 	SrcSetData,
 	SupportedOutputMimeTypes,
 	SupportedOutputTypes,
 	OutputDataForFormat,
 	LoaderOptions,
 	Preset,
 } from './loader.js'
-export type NativeIdealImageOptions = Partial<LoaderOptions>
+
+export type NativeIdealImageOptions = Partial<{
+	/**
+	 * File name template for output files
+	 */
+	fileNameTemplate: string
+	/**
+	 * Image loader presets
+	 */
+	presets: Record<string, Preset>
+	/**
+	 * Low quality image placeholder format
+	 */
+	lqipFormat: SupportedOutputTypes
+	/**
+	 * Disable in dev mode for faster compile time
+	 */
+	disableInDev: boolean
+}>
+
+export const DEFAULT_OPTIONS = {
+	fileNameTemplate: 'assets/native-ideal-image/[name]-[hash:hex:5]-[width].[format]',
+	lqipFormat: 'webp',
+	presets: {
+		default: {
+			formats: ['webp', 'jpeg'],
+			sizes: 2160,
+			lqip: true,
+		},
+	},
+	disableInDev: false,
+} as const satisfies NativeIdealImageOptions
 
 export default function pluginNativeIdealImage(
 	context: LoadContext,
@@ -32,26 +62,31 @@ export default function pluginNativeIdealImage(
 			return '../src/theme'
 		},
 
-		configureWebpack(_config, isServer) {
-			// const { disableInDev, presets, ...loaderOptions } = {
-			// 	...settings,
-			// 	...options,
-			// }
+		configureWebpack(config, isServer) {
+			const { disableInDev, ...optionsRest } = {
+				...DEFAULT_OPTIONS,
+				...options,
+				presets: { ...DEFAULT_OPTIONS.presets, ...options.presets },
+			}
+			const mergedOptions = {
+				disabled: disableInDev && process.env.NODE_ENV !== 'production',
+				...optionsRest,
+			} satisfies LoaderOptions
 
 			return {
 				// plugins: [idealImageUriPlugin],
+				// mergeStrategy: { 'module.rules.test': 'match', 'module.rules.test.use': 'prepend' },
 				// module: {
 				// 	rules: [
 				// 		{
-				// 			test: /\.(?:png|jpe?g|webp)/i,
-				// 			// test: /.*/,
-				// 			// scheme: 'ideal-img',
+				// 			test: /\.(?:ico|jpe?g|png|gif|webp|avif)(?:\?.*)?$/i,
 				// 			use: [
 				// 				{
 				// 					loader: path.resolve(__dirname, './loader.js'),
 				// 					options: {
-				// 						...loaderOptions,
-				// 						presets: { ...DEFAULT_OPTIONS.presets, ...presets },
+				// 						...DEFAULT_LOADER_OPTIONS,
+				// 						...options,
+				// 						presets: { ...DEFAULT_LOADER_OPTIONS.presets, ...options.presets },
 				// 					},
 				// 				},
 				// 			],
@@ -60,11 +95,7 @@ export default function pluginNativeIdealImage(
 				// },
 				resolveLoader: {
 					alias: {
-						'ideal-img': `${path.resolve(__dirname, './loader.js')}?${JSON.stringify({
-							...DEFAULT_LOADER_OPTIONS,
-							...options,
-							presets: { ...DEFAULT_LOADER_OPTIONS.presets, ...options.presets },
-						})}`,
+						'ideal-img': `${path.resolve(__dirname, './loader.js')}?${JSON.stringify(mergedOptions)}`,
 					},
 				},
 			}

diff --git a/src/loader.ts b/src/loader.ts
@@ -1,5 +1,4 @@
 import type { LoaderContext } from 'webpack'
-import { readFile } from 'node:fs/promises'
 import loaderUtils from 'loader-utils'
 import sharp from 'sharp'
 
@@ -38,9 +37,9 @@ export type LoaderOptions = {
 	 */
 	lqipFormat: SupportedOutputTypes
 	/**
-	 * Disable in dev mode for faster compile time
+	 * Should disable the loader
 	 */
-	disableInDev: boolean
+	disabled: boolean
 }
 
 export type SrcSetData = {
@@ -64,33 +63,30 @@ export type NativeIdealImageData = {
 	lqip?: string
 }
 
-export const DEFAULT_LOADER_OPTIONS = {
-	fileNameTemplate: 'assets/native-ideal-image/[name]-[hash:hex:5]-[width].[format]',
-	lqipFormat: 'webp',
-	presets: {
-		default: {
-			formats: ['webp', 'jpeg'],
-			sizes: 2160,
-			lqip: true,
-		},
-	},
-	disableInDev: false,
-} as const satisfies LoaderOptions
-
-export default async function loader(this: LoaderContext<LoaderOptions>, content: string) {
-	const callback = this.async()
+export const raw = true
 
+export function pitch(this: LoaderContext<LoaderOptions>) {
 	const options = this.getOptions()
-	if (options.disableInDev && process.env.NODE_ENV !== 'production') {
+	if (!options.disabled) {
+		// Remove all other loaders,
+		// used for preventing the default url/file loader from generating extra images
+		this.loaders = [this.loaders[this.loaderIndex]!]
+	}
+}
+
+export default async function loader(this: LoaderContext<LoaderOptions>, content: Buffer) {
+	const callback = this.async()
+	const options = this.getOptions()
+
+	if (options.disabled) {
 		// Return the value from default asset loader
-		callback(null, content)
+		this.callback(null, content)
 		return
 	}
 
 	const queryOptions = new URLSearchParams(this.resourceQuery)
 
-	const buffer = await readFile(this.resourcePath)
-	const image = sharp(buffer)
+	const image = sharp(content)
 	const metadata = await image.metadata()
 	const orginalWidth = metadata.width
 	if (!orginalWidth) {