@pyreon/zero 0.4.1 → 0.11.0

package/src/image-plugin.ts

@@ -1,7 +1,7 @@
-import { existsSync } from 'node:fs'
-import { mkdir, readFile, writeFile } from 'node:fs/promises'
-import { basename, extname, join } from 'node:path'
-import type { Plugin } from 'vite'
+import { existsSync } from "node:fs"
+import { mkdir, readFile, writeFile } from "node:fs/promises"
+import { basename, extname, join } from "node:path"
+import type { Plugin } from "vite"
 
 let sharpWarned = false
 function warnSharpMissing() {
@@ -9,7 +9,7 @@ function warnSharpMissing() {
   sharpWarned = true
   // biome-ignore lint/suspicious/noConsole: intentional build-time warning
   console.warn(
-    '\n[zero:image] sharp not installed — images will not be optimized. Install for full support: bun add -D sharp\n',
+    "\n[zero:image] sharp not installed — images will not be optimized. Install for full support: bun add -D sharp\n",
   )
 }
 
@@ -44,7 +44,7 @@ export interface ImagePluginConfig {
   include?: RegExp
 }
 
-export type ImageFormat = 'webp' | 'avif' | 'jpeg' | 'png'
+export type ImageFormat = "webp" | "avif" | "jpeg" | "png"
 
 /** Per-format source set for <picture> <source> elements. */
 export interface FormatSource {
@@ -99,42 +99,39 @@ const IMAGE_EXT_RE = /\.(jpe?g|png|webp|avif)$/i
  */
 export function imagePlugin(config: ImagePluginConfig = {}): Plugin {
   const defaultWidths = config.widths ?? [640, 1024, 1920]
-  const defaultFormats = config.formats ?? ['webp']
+  const defaultFormats = config.formats ?? ["webp"]
   const quality = config.quality ?? 80
   const placeholderSize = config.placeholderSize ?? 16
-  const outSubDir = config.outDir ?? 'assets/img'
+  const outSubDir = config.outDir ?? "assets/img"
   const include = config.include ?? IMAGE_EXT_RE
 
-  let root = ''
-  let outDir = ''
+  let root = ""
+  let outDir = ""
   let isBuild = false
 
   return {
-    name: 'pyreon-zero-images',
-    enforce: 'pre',
+    name: "pyreon-zero-images",
+    enforce: "pre",
 
     configResolved(resolvedConfig) {
       root = resolvedConfig.root
       outDir = resolvedConfig.build.outDir
-      isBuild = resolvedConfig.command === 'build'
+      isBuild = resolvedConfig.command === "build"
     },
 
     async resolveId(id) {
       // Handle ?optimize query on image imports
-      if (id.includes('?optimize') && include.test(id.split('?')[0]!)) {
+      if (id.includes("?optimize") && include.test(id.split("?")[0]!)) {
         return `\0virtual:zero-image:${id}`
       }
       return null
     },
 
     async load(id) {
-      if (!id.startsWith('\0virtual:zero-image:')) return null
+      if (!id.startsWith("\0virtual:zero-image:")) return null
 
-      const rawPath =
-        id.replace('\0virtual:zero-image:', '').split('?')[0] ?? id
-      const absPath = rawPath.startsWith('/')
-        ? join(root, 'public', rawPath)
-        : rawPath
+      const rawPath = id.replace("\0virtual:zero-image:", "").split("?")[0] ?? id
+      const absPath = rawPath.startsWith("/") ? join(root, "public", rawPath) : rawPath
 
       if (!isBuild) {
         const result = await loadDevImage(absPath, rawPath, placeholderSize)
@@ -164,16 +161,16 @@ async function loadDevImage(
   placeholderSize: number,
 ): Promise<ProcessedImage> {
   const metadata = await getImageMetadata(absPath)
-  const publicPath = rawPath.startsWith('/') ? rawPath : `/@fs/${absPath}`
+  const publicPath = rawPath.startsWith("/") ? rawPath : `/@fs/${absPath}`
 
   return {
     src: publicPath,
-    srcset: '',
+    srcset: "",
     width: metadata.width,
     height: metadata.height,
     placeholder: await generateBlurPlaceholder(absPath, placeholderSize),
     formats: [],
-    sources: [{ src: publicPath, width: metadata.width, format: 'original' }],
+    sources: [{ src: publicPath, width: metadata.width, format: "original" }],
   }
 }
 
@@ -181,17 +178,13 @@ async function emitProcessedSources(
   processed: ProcessedImage,
   outSubDir: string,
   ctx: {
-    emitFile: (f: {
-      type: 'asset'
-      fileName: string
-      source: Uint8Array
-    }) => void
+    emitFile: (f: { type: "asset"; fileName: string; source: Uint8Array }) => void
   },
 ) {
   for (const source of processed.sources) {
     const fileName = join(outSubDir, basename(source.src))
     const content = await readFile(source.src)
-    ctx.emitFile({ type: 'asset', fileName, source: content })
+    ctx.emitFile({ type: "asset", fileName, source: content })
     source.src = `/${fileName}`
   }
 }
@@ -208,11 +201,11 @@ function rebuildFormatSrcsets(processed: ProcessedImage, fallbackPath: string) {
   }
   processed.formats = [...formatGroups.entries()].map(([fmt, entries]) => ({
     type: `image/${fmt}`,
-    srcset: entries.join(', '),
+    srcset: entries.join(", "),
   }))
 
   const lastFormat = processed.formats.at(-1)
-  processed.srcset = lastFormat?.srcset ?? ''
+  processed.srcset = lastFormat?.srcset ?? ""
   processed.src = processed.sources.at(-1)?.src ?? fallbackPath
 }
 
@@ -227,10 +220,7 @@ interface ProcessOptions {
   outDir: string
 }
 
-async function processImage(
-  absPath: string,
-  opts: ProcessOptions,
-): Promise<ProcessedImage> {
+async function processImage(absPath: string, opts: ProcessOptions): Promise<ProcessedImage> {
   const metadata = await getImageMetadata(absPath)
   const ext = extname(absPath)
   const name = basename(absPath, ext)
@@ -266,26 +256,21 @@ async function processImage(
     group.push({ src: s.src, width: s.width })
   }
 
-  const formats: FormatSource[] = [...formatGroups.entries()].map(
-    ([fmt, group]) => ({
-      type: `image/${fmt === 'jpeg' ? 'jpeg' : fmt}`,
-      srcset: group.map((s) => `${s.src} ${s.width}w`).join(', '),
-    }),
-  )
+  const formats: FormatSource[] = [...formatGroups.entries()].map(([fmt, group]) => ({
+    type: `image/${fmt === "jpeg" ? "jpeg" : fmt}`,
+    srcset: group.map((s) => `${s.src} ${s.width}w`).join(", "),
+  }))
 
   // Fallback: last format's srcset
   const fallbackFormat = formats[formats.length - 1]
   const fallbackSources = formatGroups.get([...formatGroups.keys()].pop()!)!
 
   // Generate blur placeholder
-  const placeholder = await generateBlurPlaceholder(
-    absPath,
-    opts.placeholderSize,
-  )
+  const placeholder = await generateBlurPlaceholder(absPath, opts.placeholderSize)
 
   return {
     src: fallbackSources[fallbackSources.length - 1]?.src ?? absPath,
-    srcset: fallbackFormat?.srcset ?? '',
+    srcset: fallbackFormat?.srcset ?? "",
     width: metadata.width,
     height: metadata.height,
     placeholder,
@@ -308,23 +293,23 @@ async function getImageMetadata(absPath: string): Promise<ImageMetadata> {
   const buffer = await readFile(absPath)
   const ext = extname(absPath).toLowerCase()
 
-  if (ext === '.png') {
+  if (ext === ".png") {
     // PNG: width at bytes 16-19, height at 20-23 (big-endian)
     const width = buffer.readUInt32BE(16)
     const height = buffer.readUInt32BE(20)
-    return { width, height, format: 'png' }
+    return { width, height, format: "png" }
   }
 
-  if (ext === '.jpg' || ext === '.jpeg') {
+  if (ext === ".jpg" || ext === ".jpeg") {
     // JPEG: scan for SOF markers
     const dimensions = parseJpegDimensions(buffer)
-    return { ...dimensions, format: 'jpeg' }
+    return { ...dimensions, format: "jpeg" }
   }
 
-  if (ext === '.webp') {
+  if (ext === ".webp") {
     // WebP: VP8 header
     const dimensions = parseWebPDimensions(buffer)
-    return { ...dimensions, format: 'webp' }
+    return { ...dimensions, format: "webp" }
   }
 
   // Fallback
@@ -341,13 +326,7 @@ export function parseJpegDimensions(buffer: Buffer): {
     if (buffer[offset] !== 0xff) break
     const marker = buffer[offset + 1]!
     // SOF markers (0xC0-0xCF except 0xC4, 0xC8, 0xCC)
-    if (
-      marker >= 0xc0 &&
-      marker <= 0xcf &&
-      marker !== 0xc4 &&
-      marker !== 0xc8 &&
-      marker !== 0xcc
-    ) {
+    if (marker >= 0xc0 && marker <= 0xcf && marker !== 0xc4 && marker !== 0xc8 && marker !== 0xcc) {
       const height = buffer.readUInt16BE(offset + 5)
       const width = buffer.readUInt16BE(offset + 7)
       return { width, height }
@@ -364,26 +343,24 @@ export function parseWebPDimensions(buffer: Buffer): {
   height: number
 } {
   // RIFF header: bytes 0-3 = "RIFF", 8-11 = "WEBP"
-  const chunk = buffer.toString('ascii', 12, 16)
-  if (chunk === 'VP8 ') {
+  const chunk = buffer.toString("ascii", 12, 16)
+  if (chunk === "VP8 ") {
     // Lossy VP8
     const width = buffer.readUInt16LE(26) & 0x3fff
     const height = buffer.readUInt16LE(28) & 0x3fff
     return { width, height }
   }
-  if (chunk === 'VP8L') {
+  if (chunk === "VP8L") {
     // Lossless VP8L
     const bits = buffer.readUInt32LE(21)
     const width = (bits & 0x3fff) + 1
     const height = ((bits >> 14) & 0x3fff) + 1
     return { width, height }
   }
-  if (chunk === 'VP8X') {
+  if (chunk === "VP8X") {
     // Extended VP8X
-    const width =
-      1 + ((buffer[24]! | (buffer[25]! << 8) | (buffer[26]! << 16)) & 0xffffff)
-    const height =
-      1 + ((buffer[27]! | (buffer[28]! << 8) | (buffer[29]! << 16)) & 0xffffff)
+    const width = 1 + ((buffer[24]! | (buffer[25]! << 8) | (buffer[26]! << 16)) & 0xffffff)
+    const height = 1 + ((buffer[27]! | (buffer[28]! << 8) | (buffer[29]! << 16)) & 0xffffff)
     return { width, height }
   }
   return { width: 0, height: 0 }
@@ -402,20 +379,20 @@ async function resizeImage(
 ): Promise<void> {
   try {
     // Try sharp (the standard Node.js image processing library)
-    const sharp = await import('sharp').then((m) => m.default ?? m)
+    const sharp = await import("sharp").then((m) => m.default ?? m)
     let pipeline = sharp(input).resize(width)
 
     switch (format) {
-      case 'webp':
+      case "webp":
         pipeline = pipeline.webp({ quality })
         break
-      case 'avif':
+      case "avif":
         pipeline = pipeline.avif({ quality })
         break
-      case 'jpeg':
+      case "jpeg":
         pipeline = pipeline.jpeg({ quality, mozjpeg: true })
         break
-      case 'png':
+      case "png":
         pipeline = pipeline.png({ compressionLevel: 9 })
         break
     }
@@ -432,19 +409,16 @@ async function resizeImage(
 /**
  * Generate a tiny blur placeholder as a base64 data URI.
  */
-async function generateBlurPlaceholder(
-  input: string,
-  size: number,
-): Promise<string> {
+async function generateBlurPlaceholder(input: string, size: number): Promise<string> {
   try {
-    const sharp = await import('sharp').then((m) => m.default ?? m)
+    const sharp = await import("sharp").then((m) => m.default ?? m)
     const buffer = await sharp(input)
-      .resize(size, size, { fit: 'inside' })
+      .resize(size, size, { fit: "inside" })
       .blur(2)
       .webp({ quality: 20 })
       .toBuffer()
 
-    return `data:image/webp;base64,${buffer.toString('base64')}`
+    return `data:image/webp;base64,${buffer.toString("base64")}`
   } catch {
     // sharp not available — return a transparent placeholder
     return "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='1' height='1'%3E%3C/svg%3E"

package/src/image.tsx

@@ -1,8 +1,8 @@
-import type { VNodeChild } from '@pyreon/core'
-import { createRef } from '@pyreon/core'
-import { signal } from '@pyreon/reactivity'
-import type { FormatSource } from './image-plugin'
-import { useIntersectionObserver } from './utils/use-intersection-observer'
+import type { VNodeChild } from "@pyreon/core"
+import { createRef } from "@pyreon/core"
+import { signal } from "@pyreon/reactivity"
+import type { FormatSource } from "./image-plugin"
+import { useIntersectionObserver } from "./utils/use-intersection-observer"
 
 // ─── Image optimization component ───────────────────────────────────────────
 //
@@ -30,8 +30,8 @@ export interface ImageProps {
   /** Per-format source sets for <picture>. Provided automatically by imagePlugin. */
   formats?: FormatSource[]
   /** Loading strategy. "lazy" uses IntersectionObserver, "eager" loads immediately. Default: "lazy" */
-  loading?: 'lazy' | 'eager'
-  /** Mark as priority (LCP image). Disables lazy loading, adds fetchpriority="high". */
+  loading?: "lazy" | "eager"
+  /** Mark as priority (LCP image). Disables lazy loading, adds fetchPriority="high". */
   priority?: boolean
   /** Low-quality placeholder image URL or base64 data URI for blur-up effect. */
   placeholder?: string
@@ -40,9 +40,9 @@ export interface ImageProps {
   /** Inline styles. */
   style?: string
   /** CSS object-fit. Default: "cover" */
-  fit?: 'cover' | 'contain' | 'fill' | 'none' | 'scale-down'
+  fit?: "cover" | "contain" | "fill" | "none" | "scale-down"
   /** Decode async. Default: true */
-  decoding?: 'sync' | 'async' | 'auto'
+  decoding?: "sync" | "async" | "auto"
 }
 
 export interface ImageSource {
@@ -64,19 +64,19 @@ export interface ImageSource {
  * <Image src="/hero.jpg" alt="Hero" width={1200} height={630} />
  */
 export function Image(props: ImageProps): VNodeChild {
-  const isEager = props.priority || props.loading === 'eager'
+  const isEager = props.priority || props.loading === "eager"
   const loaded = signal(isEager)
   const inView = signal(isEager)
   const containerRef = createRef<HTMLElement>()
 
   // Resolve srcset from string or array
   const resolvedSrcset =
-    typeof props.srcset === 'string'
+    typeof props.srcset === "string"
       ? props.srcset
-      : props.srcset?.map((s) => `${s.src} ${s.width}w`).join(', ')
+      : props.srcset?.map((s) => `${s.src} ${s.width}w`).join(", ")
 
-  const sizes = props.sizes ?? '100vw'
-  const fit = props.fit ?? 'cover'
+  const sizes = props.sizes ?? "100vw"
+  const fit = props.fit ?? "cover"
   const hasFormats = props.formats && props.formats.length > 0
   const aspectRatio = `${props.width} / ${props.height}`
 
@@ -89,39 +89,37 @@ export function Image(props: ImageProps): VNodeChild {
 
   // Static styles (don't depend on signals)
   const containerStyle = [
-    'position: relative',
-    'overflow: hidden',
+    "position: relative",
+    "overflow: hidden",
     `aspect-ratio: ${aspectRatio}`,
     `max-width: ${props.width}px`,
-    'width: 100%',
+    "width: 100%",
     props.style,
   ]
     .filter(Boolean)
-    .join('; ')
+    .join("; ")
 
   const imgEl = (
     <img
-      src={() => (inView() ? props.src : '')}
-      srcset={() =>
-        !hasFormats && inView() && resolvedSrcset ? resolvedSrcset : ''
-      }
+      src={() => (inView() ? props.src : "")}
+      srcSet={() => (!hasFormats && inView() && resolvedSrcset ? resolvedSrcset : "")}
       sizes={resolvedSrcset ? sizes : undefined}
       alt={props.alt}
       width={props.width}
       height={props.height}
-      loading={isEager ? 'eager' : 'lazy'}
-      decoding={props.decoding ?? 'async'}
-      fetchpriority={props.priority ? 'high' : undefined}
-      onload={() => loaded.set(true)}
+      loading={isEager ? "eager" : "lazy"}
+      decoding={props.decoding ?? "async"}
+      fetchPriority={props.priority ? "high" : undefined}
+      onLoad={() => loaded.set(true)}
       style={() =>
         [
-          'display: block',
-          'width: 100%',
-          'height: 100%',
+          "display: block",
+          "width: 100%",
+          "height: 100%",
           `object-fit: ${fit}`,
-          'transition: opacity 0.3s ease',
-          props.placeholder && !loaded() ? 'opacity: 0' : 'opacity: 1',
-        ].join('; ')
+          "transition: opacity 0.3s ease",
+          props.placeholder && !loaded() ? "opacity: 0" : "opacity: 1",
+        ].join("; ")
       }
     />
   )
@@ -136,16 +134,16 @@ export function Image(props: ImageProps): VNodeChild {
           loading="eager"
           style={() =>
             [
-              'position: absolute',
-              'inset: 0',
-              'width: 100%',
-              'height: 100%',
-              'object-fit: cover',
-              'filter: blur(20px)',
-              'transform: scale(1.1)',
-              'transition: opacity 0.4s ease',
-              loaded() ? 'opacity: 0; pointer-events: none' : 'opacity: 1',
-            ].join('; ')
+              "position: absolute",
+              "inset: 0",
+              "width: 100%",
+              "height: 100%",
+              "object-fit: cover",
+              "filter: blur(20px)",
+              "transform: scale(1.1)",
+              "transition: opacity 0.4s ease",
+              loaded() ? "opacity: 0; pointer-events: none" : "opacity: 1",
+            ].join("; ")
           }
         />
       )}
@@ -154,7 +152,7 @@ export function Image(props: ImageProps): VNodeChild {
           {props.formats?.map((fmt) => (
             <source
               type={fmt.type}
-              srcset={() => (inView() ? fmt.srcset : undefined)}
+              srcSet={() => (inView() ? (fmt.srcset ?? "") : "")}
               sizes={sizes}
             />
           ))}

package/src/index.ts

@@ -1,13 +1,13 @@
 // ─── Core ─────────────────────────────────────────────────────────────────────
 
-export type { CreateAppOptions } from './app'
-export { createApp } from './app'
-export type { CreateServerOptions } from './entry-server'
-export { createServer } from './entry-server'
+export type { CreateAppOptions } from "./app"
+export { createApp } from "./app"
+export type { CreateServerOptions } from "./entry-server"
+export { createServer } from "./entry-server"
 
 // ─── Vite plugin ─────────────────────────────────────────────────────────────
 
-export { zeroPlugin as default } from './vite-plugin'
+export { zeroPlugin as default } from "./vite-plugin"
 
 // ─── File-system routing ─────────────────────────────────────────────────────
 
@@ -17,15 +17,15 @@ export {
   generateRouteModule,
   parseFileRoutes,
   scanRouteFiles,
-} from './fs-router'
+} from "./fs-router"
 
 // ─── Config ──────────────────────────────────────────────────────────────────
 
-export { defineConfig, resolveConfig } from './config'
+export { defineConfig, resolveConfig } from "./config"
 
 // ─── ISR ─────────────────────────────────────────────────────────────────────
 
-export { createISRHandler } from './isr'
+export { createISRHandler } from "./isr"
 
 // ─── Adapters ────────────────────────────────────────────────────────────────
 
@@ -34,21 +34,21 @@ export {
   nodeAdapter,
   resolveAdapter,
   staticAdapter,
-} from './adapters'
+} from "./adapters"
 
 // ─── Components ─────────────────────────────────────────────────────────────
 
-export type { ImageProps, ImageSource } from './image'
-export { Image } from './image'
-export type { LinkProps, LinkRenderProps, UseLinkReturn } from './link'
-export { createLink, Link, useLink } from './link'
-export type { ScriptProps, ScriptStrategy } from './script'
-export { Script } from './script'
+export type { ImageProps, ImageSource } from "./image"
+export { Image } from "./image"
+export type { LinkProps, LinkRenderProps, UseLinkReturn } from "./link"
+export { createLink, Link, useLink } from "./link"
+export type { ScriptProps, ScriptStrategy } from "./script"
+export { Script } from "./script"
 
 // ─── Middleware ──────────────────────────────────────────────────────────────
 
-export type { CacheConfig, CacheRule } from './cache'
-export { cacheMiddleware, securityHeaders, varyEncoding } from './cache'
+export type { CacheConfig, CacheRule } from "./cache"
+export { cacheMiddleware, securityHeaders, varyEncoding } from "./cache"
 
 // ─── Font optimization ─────────────────────────────────────────────────────
 
@@ -60,8 +60,8 @@ export type {
   GoogleFontStatic,
   GoogleFontVariable,
   LocalFont,
-} from './font'
-export { fontPlugin, fontVariables } from './font'
+} from "./font"
+export { fontPlugin, fontVariables } from "./font"
 
 // ─── Image processing ──────────────────────────────────────────────────────
 
@@ -70,12 +70,12 @@ export type {
   ImageFormat,
   ImagePluginConfig,
   ProcessedImage,
-} from './image-plugin'
-export { imagePlugin } from './image-plugin'
+} from "./image-plugin"
+export { imagePlugin } from "./image-plugin"
 
 // ─── Theme ──────────────────────────────────────────────────────────────────
 
-export type { Theme } from './theme'
+export type { Theme } from "./theme"
 export {
   initTheme,
   resolvedTheme,
@@ -84,7 +84,7 @@ export {
   theme,
   themeScript,
   toggleTheme,
-} from './theme'
+} from "./theme"
 
 // ─── SEO ────────────────────────────────────────────────────────────────────
 
@@ -96,14 +96,14 @@ export type {
   SeoPluginConfig,
   SitemapConfig,
   SitemapEntry,
-} from './seo'
+} from "./seo"
 export {
   generateRobots,
   generateSitemap,
   jsonLd,
   seoMiddleware,
   seoPlugin,
-} from './seo'
+} from "./seo"
 
 // ─── API routes ──────────────────────────────────────────────────────────────
 
@@ -113,32 +113,32 @@ export type {
   ApiRouteEntry,
   ApiRouteModule,
   HttpMethod,
-} from './api-routes'
-export { createApiMiddleware, generateApiRouteModule } from './api-routes'
+} from "./api-routes"
+export { createApiMiddleware, generateApiRouteModule } from "./api-routes"
 
 // ─── CORS ────────────────────────────────────────────────────────────────────
 
-export type { CorsConfig } from './cors'
-export { corsMiddleware } from './cors'
+export type { CorsConfig } from "./cors"
+export { corsMiddleware } from "./cors"
 
 // ─── Rate limiting ──────────────────────────────────────────────────────────
 
-export type { RateLimitConfig } from './rate-limit'
-export { rateLimitMiddleware } from './rate-limit'
+export type { RateLimitConfig } from "./rate-limit"
+export { rateLimitMiddleware } from "./rate-limit"
 
 // ─── Compression ────────────────────────────────────────────────────────────
 
-export type { CompressionConfig } from './compression'
+export type { CompressionConfig } from "./compression"
 export {
   compressionMiddleware,
   compressResponse,
   isCompressible,
-} from './compression'
+} from "./compression"
 
 // ─── Actions ─────────────────────────────────────────────────────────────────
 
-export type { Action, ActionContext, ActionHandler } from './actions'
-export { createActionMiddleware, defineAction } from './actions'
+export type { Action, ActionContext, ActionHandler } from "./actions"
+export { createActionMiddleware, defineAction } from "./actions"
 
 // ─── Types ───────────────────────────────────────────────────────────────────
 
@@ -153,4 +153,4 @@ export type {
   RouteMiddlewareEntry,
   RouteModule,
   ZeroConfig,
-} from './types'
+} from "./types"