chore: wip

Author: chrisbbreuer

packages/imgx/src/plugins.ts

@@ -1,7 +1,6 @@
 import type { BunPlugin, OnLoadResult } from 'bun'
 import type { Plugin } from 'vite'
 import type { OptimizeResult, ProcessOptions } from './types'
-import { Buffer } from 'node:buffer'
 import process from 'node:process'
 import { process as processImage } from './core'
 import { debugLog } from './utils'
@@ -17,7 +16,7 @@ export function viteImgxPlugin(options: ImgxPluginOptions = {}): Plugin {
   const {
     include = ['**/*.{jpg,jpeg,png,webp,avif,svg}'],
     exclude = ['node_modules/**'],
-    disabled = process.env?.NODE_ENV === 'development',
+    disabled = typeof process !== 'undefined' && process.env?.NODE_ENV === 'development',
     ...processOptions
   } = options
 
@@ -31,35 +30,38 @@ export function viteImgxPlugin(options: ImgxPluginOptions = {}): Plugin {
   return {
     name: 'vite-plugin-imgx',
     apply: 'build',
-    async transform(code, id) {
-      if (!id.match(/\.(jpg|jpeg|png|webp|avif|svg)$/i))
-        return null
-
-      // Check include/exclude patterns
-      const shouldInclude = include.some(pattern => id.match(new RegExp(pattern)))
-      const shouldExclude = exclude.some(pattern => id.match(new RegExp(pattern)))
-
-      if (!shouldInclude || shouldExclude)
+    async transform(code: string, id: string) {
+      if (!id.match(/\.(jpe?g|png|webp|avif|svg)$/))
         return null
 
       try {
-        debugLog('vite', `Processing ${id}`)
+        // Filter files based on include/exclude patterns
+        const matchesInclude = include.some(pattern => id.match(new RegExp(pattern.replace(/\*\*/g, '.*').replace(/\*/g, '[^/]*'))))
+        const matchesExclude = exclude.some(pattern => id.match(new RegExp(pattern.replace(/\*\*/g, '.*').replace(/\*/g, '[^/]*'))))
+
+        if (!matchesInclude || matchesExclude) {
+          return null
+        }
 
         const result = await processImage({
           ...processOptions,
           input: id,
         })
 
-        return {
-          code: `export default ${JSON.stringify(result.outputPath)}`,
-          map: null,
+        debugLog('vite-plugin', `Processed ${id}: saved ${result.saved} bytes (${result.savedPercentage.toFixed(2)}%)`)
+
+        if (result.saved > 0) {
+          return {
+            code,
+            map: null,
+          }
         }
       }
-      catch (error: unknown) {
-        const errorMessage = error instanceof Error ? error.message : String(error)
-        debugLog('error', `Failed to process ${id}: ${errorMessage}`)
-        return null
+      catch (error) {
+        console.error(`[imgx] Error processing ${id}:`, error)
       }
+
+      return null
     },
   }
 }
@@ -69,7 +71,7 @@ export function bunImgxPlugin(options: ImgxPluginOptions = {}): BunPlugin {
   const {
     include = ['**/*.{jpg,jpeg,png,webp,avif,svg}'],
     exclude = ['node_modules/**'],
-    disabled = process.env?.NODE_ENV === 'development',
+    disabled = false,
     ...processOptions
   } = options
 
@@ -83,32 +85,35 @@ export function bunImgxPlugin(options: ImgxPluginOptions = {}): BunPlugin {
   return {
     name: 'bun-plugin-imgx',
     setup(build) {
-      build.onLoad({ filter: /\.(jpg|jpeg|png|webp|avif|svg)$/i }, async (args) => {
-        const id = args.path
-
-        // Check include/exclude patterns
-        const shouldInclude = include.some(pattern => id.match(new RegExp(pattern)))
-        const shouldExclude = exclude.some(pattern => id.match(new RegExp(pattern)))
-
-        if (!shouldInclude || shouldExclude)
-          return null as unknown as OnLoadResult
-
+      build.onLoad({ filter: /\.(jpe?g|png|webp|avif|svg)$/ }, async (args) => {
         try {
-          debugLog('bun', `Processing ${id}`)
+          // Filter files based on include/exclude patterns
+          const matchesInclude = include.some(pattern =>
+            args.path.match(new RegExp(pattern.replace(/\*\*/g, '.*').replace(/\*/g, '[^/]*'))),
+          )
+          const matchesExclude = exclude.some(pattern =>
+            args.path.match(new RegExp(pattern.replace(/\*\*/g, '.*').replace(/\*/g, '[^/]*'))),
+          )
+
+          if (!matchesInclude || matchesExclude) {
+            return null as unknown as OnLoadResult
+          }
 
           const result = await processImage({
             ...processOptions,
-            input: id,
+            input: args.path,
           })
 
+          debugLog('bun-plugin', `Processed ${args.path}: saved ${result.saved} bytes (${result.savedPercentage.toFixed(2)}%)`)
+
+          // Return the file contents as is - optimization happens in place
           return {
-            contents: `export default ${JSON.stringify(result.outputPath)}`,
-            loader: 'js',
-          }
+            contents: await Bun.file(args.path).arrayBuffer(),
+            loader: 'file',
+          } as OnLoadResult
         }
-        catch (error: unknown) {
-          const errorMessage = error instanceof Error ? error.message : String(error)
-          debugLog('error', `Failed to process ${id}: ${errorMessage}`)
+        catch (error) {
+          console.error(`[imgx] Error processing ${args.path}:`, error)
           return null as unknown as OnLoadResult
         }
       })

packages/imgx/src/responsive.ts

@@ -1,3 +1,9 @@
+import type { ProcessOptions } from './types'
+import { readFile } from 'node:fs/promises'
+import { join } from 'node:path'
+import sharp from 'sharp'
+import { debugLog } from './utils'
+
 interface ResponsiveImageOptions extends ProcessOptions {
   breakpoints: number[]
   formats: ('webp' | 'avif' | 'jpeg' | 'png')[]
@@ -14,7 +20,7 @@ interface ResponsiveImageResult {
     format: string
     size: number
   }>
-  srcset: Record<string, string>
+  srcset: Record<string, string[]>
   htmlMarkup: string
 }
 
@@ -31,14 +37,24 @@ export async function generateResponsiveImages(
     generateSrcset = true,
   } = options
 
+  if (typeof input !== 'string') {
+    throw new TypeError('Input must be a string path')
+  }
+
   debugLog('responsive', `Generating responsive images for ${input}`)
 
   const inputBuffer = await readFile(input)
   const metadata = await sharp(inputBuffer).metadata()
-  const originalWidth = metadata.width
+  const originalWidth = metadata.width || 0
 
-  const variants = []
-  const srcset: Record<string, string> = {}
+  const variants: Array<{
+    path: string
+    width: number
+    format: string
+    size: number
+  }> = []
+
+  const srcset: Record<string, string[]> = {}
 
   for (const format of formats) {
     srcset[format] = []
@@ -47,8 +63,9 @@ export async function generateResponsiveImages(
       if (width > originalWidth)
         continue
 
+      const inputName = input.split('/').pop()?.split('.')[0] || 'image'
       const filename = filenameTemplate
-        .replace('[name]', input.split('/').pop().split('.')[0])
+        .replace('[name]', inputName)
         .replace('[width]', width.toString())
         .replace('[ext]', format)
 
@@ -64,7 +81,7 @@ export async function generateResponsiveImages(
         path: outputPath,
         width,
         format,
-        size,
+        size: size || 0,
       })
 
       if (generateSrcset) {
@@ -83,12 +100,12 @@ export async function generateResponsiveImages(
     sizes="(max-width: ${Math.max(...breakpoints)}px) 100vw, ${Math.max(...breakpoints)}px"
   />`).join('\n')}
   <img
-    src="${variants[0].path}"
+    src="${variants[0]?.path || ''}"
     alt=""
     loading="lazy"
     decoding="async"
-    width="${variants[0].width}"
-    height="${Math.round(variants[0].width * (metadata.height / metadata.width))}"
+    width="${variants[0]?.width || 0}"
+    height="${Math.round((variants[0]?.width || 0) * ((metadata.height || 0) / (metadata.width || 1)))}"
   />
 </picture>`.trim()
 
@@ -109,12 +126,18 @@ interface ImageSetOptions {
   quality?: number
 }
 
-export async function generateImageSet(options: ImageSetOptions) {
+export async function generateImageSet(options: ImageSetOptions): Promise<Array<{
+  size: { width: number, height?: number, suffix?: string }
+  path: string
+}>> {
   const { input, name, sizes, outputDir, format = 'png', quality = 80 } = options
 
   debugLog('imageset', `Generating image set for ${input}`)
 
-  const results = []
+  const results: Array<{
+    size: { width: number, height?: number, suffix?: string }
+    path: string
+  }> = []
 
   for (const size of sizes) {
     const suffix = size.suffix || `${size.width}x${size.height || size.width}`

packages/imgx/test/output/subdir/subsubdir/test3.jpg

@@ -1,9 +1,6 @@
 import { describe, expect, it } from 'bun:test'
 import { bunImgxPlugin, viteImgxPlugin } from '../src/plugins'
 
-// Mock the process object to avoid process.env.NODE_ENV error
-globalThis.process = globalThis.process || { env: {} }
-
 describe('plugins', () => {
   it('should export viteImgxPlugin function', () => {
     expect(viteImgxPlugin).toBeDefined()
@@ -21,9 +18,22 @@ describe('plugins', () => {
     expect(plugin.apply).toBe('build')
   })
 
+  it('should return a disabled Vite plugin when disabled option is true', () => {
+    const plugin = viteImgxPlugin({ disabled: true })
+    expect(plugin.name).toBe('vite-plugin-imgx')
+    expect(plugin.apply).toBe('build')
+    expect(plugin.transform).toBeUndefined()
+  })
+
   it('should return a valid Bun plugin object', () => {
     const plugin = bunImgxPlugin()
     expect(plugin.name).toBe('bun-plugin-imgx')
     expect(typeof plugin.setup).toBe('function')
   })
+
+  it('should return a disabled Bun plugin when disabled option is true', () => {
+    const plugin = bunImgxPlugin({ disabled: true })
+    expect(plugin.name).toBe('bun-plugin-imgx')
+    expect(typeof plugin.setup).toBe('function')
+  })
 })