chore: wip

Author: chrisbbreuer

.cursor/mcp.json

@@ -0,0 +1,10 @@
+{
+  "mcpServers": {
+    "context7": {
+      "command": "bunx",
+      "args": [
+        "@upstash/context7-mcp"
+      ]
+    }
+  }
+}

.cursor/rules/readme.mdc

@@ -1,9 +1,8 @@
 ---
 description: General information based on the latest ./README.md content
-globs: 
+globs:
+alwaysApply: false
 ---
-Update it if APIs change:
-
 # imgx
 
 > A powerful image optimization toolkit for modern web development.
@@ -195,4 +194,4 @@ Examples:
   $ imgx optimize input.jpg -t --thumbhash-size 64x64
   $ imgx sprite ./icons ./dist --retina --optimize
   $ imgx analyze ./images --ci --threshold 500KB
-```
+```

bun.lock

@@ -1,6 +1,7 @@
 export * from './analyze'
 export * from './app-icon'
 export { config } from './config'
+export * from './core'
 export * from './favicon'
 export * from './og'
 export * from './plugins'

packages/imgx/src/index.ts

@@ -1,11 +1,12 @@
+import type { BunPlugin, OnLoadResult } from 'bun'
 import type { Plugin } from 'vite'
-import type { Compiler } from 'webpack'
-import type { ProcessOptions } from './types'
+import type { OptimizeResult, ProcessOptions } from './types'
 import { Buffer } from 'node:buffer'
-import { process } from './core'
+import process from 'node:process'
+import { process as processImage } from './core'
 import { debugLog } from './utils'
 
-interface ImgxPluginOptions extends ProcessOptions {
+interface ImgxPluginOptions extends Partial<ProcessOptions> {
   include?: string[]
   exclude?: string[]
   disabled?: boolean
@@ -16,7 +17,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 = process.env?.NODE_ENV === 'development',
     ...processOptions
   } = options
 
@@ -44,7 +45,7 @@ export function viteImgxPlugin(options: ImgxPluginOptions = {}): Plugin {
       try {
         debugLog('vite', `Processing ${id}`)
 
-        const result = await process({
+        const result = await processImage({
           ...processOptions,
           input: id,
         })
@@ -54,67 +55,63 @@ export function viteImgxPlugin(options: ImgxPluginOptions = {}): Plugin {
           map: null,
         }
       }
-      catch (error) {
-        debugLog('error', `Failed to process ${id}: ${error.message}`)
+      catch (error: unknown) {
+        const errorMessage = error instanceof Error ? error.message : String(error)
+        debugLog('error', `Failed to process ${id}: ${errorMessage}`)
         return null
       }
     },
   }
 }
 
-// Webpack plugin
-export class WebpackImgxPlugin {
-  private options: ImgxPluginOptions
+// Bun plugin
+export function bunImgxPlugin(options: ImgxPluginOptions = {}): BunPlugin {
+  const {
+    include = ['**/*.{jpg,jpeg,png,webp,avif,svg}'],
+    exclude = ['node_modules/**'],
+    disabled = process.env?.NODE_ENV === 'development',
+    ...processOptions
+  } = options
 
-  constructor(options: ImgxPluginOptions = {}) {
-    this.options = {
-      include: ['**/*.{jpg,jpeg,png,webp,avif,svg}'],
-      exclude: ['node_modules/**'],
-      disabled: process.env.NODE_ENV === 'development',
-      ...options,
+  if (disabled) {
+    return {
+      name: 'bun-plugin-imgx',
+      setup() {},
     }
   }
 
-  apply(compiler: Compiler) {
-    if (this.options.disabled)
-      return
-
-    const { include, exclude, ...processOptions } = this.options
-
-    compiler.hooks.emit.tapAsync('WebpackImgxPlugin', async (compilation, callback) => {
-      const assets = compilation.assets
-      const promises = []
+  return {
+    name: 'bun-plugin-imgx',
+    setup(build) {
+      build.onLoad({ filter: /\.(jpg|jpeg|png|webp|avif|svg)$/i }, async (args) => {
+        const id = args.path
 
-      for (const filename in assets) {
-        const shouldInclude = include.some(pattern => filename.match(new RegExp(pattern)))
-        const shouldExclude = exclude.some(pattern => filename.match(new RegExp(pattern)))
+        // 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)
-          continue
-
-        const source = assets[filename].source()
+          return null as unknown as OnLoadResult
 
         try {
-          debugLog('webpack', `Processing ${filename}`)
+          debugLog('bun', `Processing ${id}`)
 
-          const result = await process({
+          const result = await processImage({
             ...processOptions,
-            input: Buffer.from(source),
-            isSvg: filename.endsWith('.svg'),
+            input: id,
           })
 
-          compilation.assets[filename] = {
-            source: () => result.outputBuffer,
-            size: () => result.outputSize,
+          return {
+            contents: `export default ${JSON.stringify(result.outputPath)}`,
+            loader: 'js',
           }
         }
-        catch (error) {
-          debugLog('error', `Failed to process ${filename}: ${error.message}`)
+        catch (error: unknown) {
+          const errorMessage = error instanceof Error ? error.message : String(error)
+          debugLog('error', `Failed to process ${id}: ${errorMessage}`)
+          return null as unknown as OnLoadResult
         }
-      }
-
-      await Promise.all(promises)
-      callback()
-    })
+      })
+    },
   }
 }

packages/imgx/src/plugins.ts

@@ -0,0 +1,114 @@
+import { afterAll, afterEach, beforeAll, describe, expect, it } from 'bun:test'
+import { mkdir, rm } from 'node:fs/promises'
+import { join } from 'node:path'
+import sharp from 'sharp'
+import { analyzeImage, generateReport } from '../src/analyze'
+
+const FIXTURES_DIR = join(import.meta.dir, 'fixtures')
+const OUTPUT_DIR = join(import.meta.dir, 'output')
+
+describe('analyze', () => {
+  beforeAll(async () => {
+    await mkdir(OUTPUT_DIR, { recursive: true })
+  })
+
+  afterAll(async () => {
+    await rm(OUTPUT_DIR, { recursive: true, force: true })
+  })
+
+  afterEach(async () => {
+    await rm(OUTPUT_DIR, { recursive: true, force: true })
+      .catch(() => {})
+    await mkdir(OUTPUT_DIR, { recursive: true })
+  })
+
+  describe('analyzeImage', () => {
+    it('should analyze a PNG image', async () => {
+      const input = join(FIXTURES_DIR, 'app-icon.png')
+
+      const stats = await analyzeImage(input)
+
+      expect(stats.path).toBe(input)
+      expect(stats.format).toBe('png')
+      expect(stats.width).toBeGreaterThan(0)
+      expect(stats.height).toBeGreaterThan(0)
+      expect(stats.size).toBeGreaterThan(0)
+      expect(stats.aspectRatio).toBeCloseTo(stats.width / stats.height)
+      expect(typeof stats.optimizationPotential).toBe('string')
+    })
+
+    it('should analyze a JPEG image', async () => {
+      // Create a test JPEG
+      const output = join(OUTPUT_DIR, 'test.jpg')
+      await sharp({
+        create: {
+          width: 100,
+          height: 100,
+          channels: 3,
+          background: { r: 255, g: 0, b: 0 },
+        },
+      }).jpeg().toFile(output)
+
+      const stats = await analyzeImage(output)
+
+      expect(stats.format).toBe('jpeg')
+      expect(stats.width).toBe(100)
+      expect(stats.height).toBe(100)
+      expect(stats.aspectRatio).toBe(1)
+      expect(stats.hasAlpha).toBe(false)
+    })
+
+    it('should flag large images as having high optimization potential', async () => {
+      // Create a large unoptimized image
+      const output = join(OUTPUT_DIR, 'large.png')
+      await sharp({
+        create: {
+          width: 3000,
+          height: 3000,
+          channels: 4,
+          background: { r: 255, g: 0, b: 0, alpha: 1 },
+        },
+      }).png({ quality: 100 }).toFile(output)
+
+      const stats = await analyzeImage(output)
+
+      expect(stats.optimizationPotential).toBe('high')
+      expect(stats.warnings).toContain('Image dimensions are very large')
+    })
+  })
+
+  describe('generateReport', () => {
+    it('should generate a report for multiple images', async () => {
+      // Create test images
+      const output1 = join(OUTPUT_DIR, 'test1.jpg')
+      const output2 = join(OUTPUT_DIR, 'test2.png')
+
+      await sharp({
+        create: {
+          width: 100,
+          height: 100,
+          channels: 3,
+          background: { r: 255, g: 0, b: 0 },
+        },
+      }).jpeg().toFile(output1)
+
+      await sharp({
+        create: {
+          width: 200,
+          height: 200,
+          channels: 4,
+          background: { r: 0, g: 255, b: 0, alpha: 1 },
+        },
+      }).png().toFile(output2)
+
+      const report = await generateReport([output1, output2])
+
+      expect(report.stats.length).toBe(2)
+      expect(report.summary.totalImages).toBe(2)
+      expect(report.summary.totalSize).toBeGreaterThan(0)
+      expect(report.summary.formatBreakdown).toHaveProperty('jpeg', 1)
+      expect(report.summary.formatBreakdown).toHaveProperty('png', 1)
+      expect(report.summary.potentialSavings).toMatch(/\d+KB/)
+    })
+  })
+})

packages/imgx/test/analyze.test.ts

@@ -0,0 +1,98 @@
+import { afterAll, afterEach, beforeAll, describe, expect, it } from 'bun:test'
+import { mkdir, readFile, rm } from 'node:fs/promises'
+import { join } from 'node:path'
+import sharp from 'sharp'
+import { generateAppIcons, generateIOSAppIcons, generateMacOSAppIcons } from '../src/app-icon'
+
+const FIXTURES_DIR = join(import.meta.dir, 'fixtures')
+const OUTPUT_DIR = join(import.meta.dir, 'output')
+
+describe('app-icon', () => {
+  beforeAll(async () => {
+    await mkdir(OUTPUT_DIR, { recursive: true })
+  })
+
+  afterAll(async () => {
+    await rm(OUTPUT_DIR, { recursive: true, force: true })
+  })
+
+  afterEach(async () => {
+    await rm(OUTPUT_DIR, { recursive: true, force: true })
+      .catch(() => {})
+    await mkdir(OUTPUT_DIR, { recursive: true })
+  })
+
+  describe('generateMacOSAppIcons', () => {
+    it('should generate macOS app icons', async () => {
+      const input = join(FIXTURES_DIR, 'app-icon.png')
+      const result = await generateMacOSAppIcons(input, OUTPUT_DIR)
+
+      expect(result.platform).toBe('macos')
+      expect(result.sizes.length).toBeGreaterThan(0)
+      expect(result.contentsJson).toBeDefined()
+
+      // Check if Contents.json exists
+      const contentsJsonPath = join(OUTPUT_DIR, 'AppIcon.appiconset', 'Contents.json')
+      const contentsJson = await Bun.file(contentsJsonPath).text()
+      expect(contentsJson).toBeDefined()
+
+      // Check if at least one icon was generated
+      const firstIcon = result.sizes[0]
+      const iconExists = await Bun.file(firstIcon.path).exists()
+      expect(iconExists).toBe(true)
+
+      // Check if README was generated
+      const readmePath = join(OUTPUT_DIR, 'README.md')
+      const readmeExists = await Bun.file(readmePath).exists()
+      expect(readmeExists).toBe(true)
+    })
+  })
+
+  describe('generateIOSAppIcons', () => {
+    it('should generate iOS app icons', async () => {
+      const input = join(FIXTURES_DIR, 'app-icon.png')
+      const result = await generateIOSAppIcons(input, OUTPUT_DIR)
+
+      expect(result.platform).toBe('ios')
+      expect(result.sizes.length).toBeGreaterThan(0)
+      expect(result.contentsJson).toBeDefined()
+
+      // Check if Contents.json exists
+      const contentsJsonPath = join(OUTPUT_DIR, 'AppIcon.appiconset', 'Contents.json')
+      const contentsJson = await Bun.file(contentsJsonPath).text()
+      expect(contentsJson).toBeDefined()
+
+      // Check if at least one icon was generated
+      const firstIcon = result.sizes[0]
+      const iconExists = await Bun.file(firstIcon.path).exists()
+      expect(iconExists).toBe(true)
+    })
+  })
+
+  describe('generateAppIcons', () => {
+    it('should generate icons for specified platform', async () => {
+      const input = join(FIXTURES_DIR, 'app-icon.png')
+
+      const results = await generateAppIcons(input, {
+        outputDir: OUTPUT_DIR,
+        platform: 'macos',
+      })
+
+      expect(results.length).toBe(1)
+      expect(results[0].platform).toBe('macos')
+    })
+
+    it('should generate icons for all platforms when specified', async () => {
+      const input = join(FIXTURES_DIR, 'app-icon.png')
+
+      const results = await generateAppIcons(input, {
+        outputDir: OUTPUT_DIR,
+        platform: 'all',
+      })
+
+      expect(results.length).toBe(2)
+      expect(results.some(r => r.platform === 'macos')).toBe(true)
+      expect(results.some(r => r.platform === 'ios')).toBe(true)
+    })
+  })
+})