Skip to content

Commit

Permalink
Avoid generating default url loader images
Browse files Browse the repository at this point in the history
  • Loading branch information
Legend-Master committed Aug 15, 2024
1 parent bbd3c02 commit db9aa6e
Show file tree
Hide file tree
Showing 2 changed files with 67 additions and 40 deletions.
67 changes: 49 additions & 18 deletions src/index.ts
Original file line number Diff line number Diff line change
@@ -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,
Expand All @@ -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 },
// },
// },
// ],
Expand All @@ -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)}`,
},
},
}
Expand Down
40 changes: 18 additions & 22 deletions src/loader.ts
Original file line number Diff line number Diff line change
@@ -1,5 +1,4 @@
import type { LoaderContext } from 'webpack'
import { readFile } from 'node:fs/promises'
import loaderUtils from 'loader-utils'
import sharp from 'sharp'

Expand Down Expand Up @@ -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 = {
Expand All @@ -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) {
Expand Down

0 comments on commit db9aa6e

Please sign in to comment.