@pyreon/zero 0.11.8 → 0.11.9

package/src/favicon.ts

@@ -0,0 +1,380 @@
+import { existsSync } from 'node:fs'
+import { readFile } from 'node:fs/promises'
+import { join } from 'node:path'
+import type { Plugin } from 'vite'
+
+let sharpWarned = false
+function warnSharpMissing() {
+  if (sharpWarned) return
+  sharpWarned = true
+  // biome-ignore lint/suspicious/noConsole: intentional build-time warning
+  console.warn(
+    '\n[zero:favicon] sharp not installed — favicons will not be generated. Install for full support: bun add -D sharp\n',
+  )
+}
+
+// ─── Favicon generation plugin ──────────────────────────────────────────────
+//
+// Generates all favicon formats from a single source file (SVG or PNG):
+// - favicon.ico (16x16 + 32x32 combined)
+// - favicon.svg (copied if source is SVG)
+// - apple-touch-icon.png (180x180)
+// - icon-192.png (for web manifest)
+// - icon-512.png (for web manifest)
+// - site.webmanifest
+//
+// Usage:
+//   import { faviconPlugin } from "@pyreon/zero"
+//   export default { plugins: [zero(), faviconPlugin({ source: "./icon.svg" })] }
+
+export interface FaviconPluginConfig {
+  /** Path to the source icon (SVG or PNG, at least 512x512 for PNG). */
+  source: string
+  /** Theme color for web manifest. Default: "#ffffff" */
+  themeColor?: string
+  /** Background color for web manifest. Default: "#ffffff" */
+  backgroundColor?: string
+  /** App name for web manifest. Uses package.json name if not set. */
+  name?: string
+  /** Generate web manifest. Default: true */
+  manifest?: boolean
+  /**
+   * Dark mode favicon (SVG only).
+   * When provided, the SVG favicon uses prefers-color-scheme media query
+   * to switch between light and dark variants.
+   */
+  darkSource?: string
+}
+
+interface FaviconSize {
+  size: number
+  name: string
+}
+
+const SIZES: FaviconSize[] = [
+  { size: 16, name: 'favicon-16x16.png' },
+  { size: 32, name: 'favicon-32x32.png' },
+  { size: 180, name: 'apple-touch-icon.png' },
+  { size: 192, name: 'icon-192.png' },
+  { size: 512, name: 'icon-512.png' },
+]
+
+/**
+ * Favicon generation Vite plugin.
+ *
+ * Generates all required favicon formats at build time from a single source.
+ * In dev mode, serves the source directly.
+ *
+ * @example
+ * ```ts
+ * // vite.config.ts
+ * import { faviconPlugin } from "@pyreon/zero"
+ *
+ * export default {
+ *   plugins: [faviconPlugin({ source: "./src/assets/icon.svg" })],
+ * }
+ * ```
+ */
+export function faviconPlugin(config: FaviconPluginConfig): Plugin {
+  const themeColor = config.themeColor ?? '#ffffff'
+  const backgroundColor = config.backgroundColor ?? '#ffffff'
+  const generateManifest = config.manifest !== false
+
+  let root = ''
+  let isBuild = false
+
+  return {
+    name: 'pyreon-zero-favicon',
+    enforce: 'pre',
+
+    configResolved(resolvedConfig) {
+      root = resolvedConfig.root
+      isBuild = resolvedConfig.command === 'build'
+    },
+
+    // Dev server: serve generated favicons on-the-fly
+    configureServer(server) {
+      const sourcePath = join(root, config.source)
+
+      server.middlewares.use(async (req, res, next) => {
+        const url = req.url ?? ''
+
+        // Serve source as favicon.svg in dev
+        if (url === '/favicon.svg' && config.source.endsWith('.svg')) {
+          try {
+            const content = await readFile(sourcePath, 'utf-8')
+            res.setHeader('Content-Type', 'image/svg+xml')
+            res.end(content)
+            return
+          } catch { /* fall through */ }
+        }
+
+        // Serve generated PNGs on-demand
+        const sizeMatch = SIZES.find((s) => url === `/${s.name}`)
+        if (sizeMatch) {
+          const png = await resizeToPng(sourcePath, sizeMatch.size)
+          if (png) {
+            res.setHeader('Content-Type', 'image/png')
+            res.setHeader('Cache-Control', 'no-cache')
+            res.end(Buffer.from(png))
+            return
+          }
+        }
+
+        // Serve generated ICO on-demand
+        if (url === '/favicon.ico') {
+          const ico = await generateIco(sourcePath)
+          if (ico) {
+            res.setHeader('Content-Type', 'image/x-icon')
+            res.setHeader('Cache-Control', 'no-cache')
+            res.end(Buffer.from(ico))
+            return
+          }
+        }
+
+        // Serve manifest
+        if (url === '/site.webmanifest' && generateManifest) {
+          const manifest = {
+            name: config.name ?? 'App',
+            short_name: config.name ?? 'App',
+            icons: [
+              { src: '/icon-192.png', sizes: '192x192', type: 'image/png' },
+              { src: '/icon-512.png', sizes: '512x512', type: 'image/png' },
+            ],
+            theme_color: themeColor,
+            background_color: backgroundColor,
+            display: 'standalone',
+          }
+          res.setHeader('Content-Type', 'application/manifest+json')
+          res.end(JSON.stringify(manifest, null, 2))
+          return
+        }
+
+        next()
+      })
+    },
+
+    // Inject favicon <link> tags into HTML
+    transformIndexHtml() {
+      const isSvg = config.source.endsWith('.svg')
+      const tags: Array<{
+        tag: string
+        attrs: Record<string, string>
+        injectTo: 'head'
+      }> = []
+
+      if (isSvg) {
+        tags.push({
+          tag: 'link',
+          attrs: { rel: 'icon', type: 'image/svg+xml', href: '/favicon.svg' },
+          injectTo: 'head',
+        })
+      }
+
+      tags.push(
+        {
+          tag: 'link',
+          attrs: { rel: 'icon', type: 'image/png', sizes: '32x32', href: '/favicon-32x32.png' },
+          injectTo: 'head',
+        },
+        {
+          tag: 'link',
+          attrs: { rel: 'icon', type: 'image/png', sizes: '16x16', href: '/favicon-16x16.png' },
+          injectTo: 'head',
+        },
+        {
+          tag: 'link',
+          attrs: { rel: 'apple-touch-icon', sizes: '180x180', href: '/apple-touch-icon.png' },
+          injectTo: 'head',
+        },
+      )
+
+      if (generateManifest) {
+        tags.push({
+          tag: 'link',
+          attrs: { rel: 'manifest', href: '/site.webmanifest' },
+          injectTo: 'head',
+        })
+      }
+
+      tags.push({
+        tag: 'meta',
+        attrs: { name: 'theme-color', content: themeColor },
+        injectTo: 'head',
+      })
+
+      return tags
+    },
+
+    async generateBundle() {
+      if (!isBuild) return
+
+      const sourcePath = join(root, config.source)
+      if (!existsSync(sourcePath)) {
+        // eslint-disable-next-line no-console
+        console.warn(`[zero:favicon] Source not found: ${sourcePath}`)
+        return
+      }
+
+      const isSvg = config.source.endsWith('.svg')
+
+      // Copy SVG as favicon.svg
+      if (isSvg) {
+        const svgContent = await readFile(sourcePath, 'utf-8')
+        let finalSvg = svgContent
+
+        // If dark mode variant provided, wrap in media query
+        if (config.darkSource) {
+          const darkPath = join(root, config.darkSource)
+          if (existsSync(darkPath)) {
+            const darkSvg = await readFile(darkPath, 'utf-8')
+            finalSvg = wrapSvgWithDarkMode(svgContent, darkSvg)
+          }
+        }
+
+        this.emitFile({
+          type: 'asset',
+          fileName: 'favicon.svg',
+          source: finalSvg,
+        })
+      }
+
+      // Generate PNG sizes via sharp
+      for (const { size, name } of SIZES) {
+        const pngBuffer = await resizeToPng(sourcePath, size)
+        if (pngBuffer) {
+          this.emitFile({
+            type: 'asset',
+            fileName: name,
+            source: pngBuffer,
+          })
+        }
+      }
+
+      // Generate favicon.ico (16 + 32)
+      const ico = await generateIco(sourcePath)
+      if (ico) {
+        this.emitFile({
+          type: 'asset',
+          fileName: 'favicon.ico',
+          source: ico,
+        })
+      }
+
+      // Generate web manifest
+      if (generateManifest) {
+        const manifest = {
+          name: config.name ?? 'App',
+          short_name: config.name ?? 'App',
+          icons: [
+            { src: '/icon-192.png', sizes: '192x192', type: 'image/png' },
+            { src: '/icon-512.png', sizes: '512x512', type: 'image/png' },
+          ],
+          theme_color: themeColor,
+          background_color: backgroundColor,
+          display: 'standalone',
+        }
+
+        this.emitFile({
+          type: 'asset',
+          fileName: 'site.webmanifest',
+          source: JSON.stringify(manifest, null, 2),
+        })
+      }
+    },
+  }
+}
+
+/**
+ * Wrap two SVGs into a single SVG that switches based on prefers-color-scheme.
+ */
+function wrapSvgWithDarkMode(lightSvg: string, darkSvg: string): string {
+  // Extract viewBox from light SVG
+  const viewBoxMatch = lightSvg.match(/viewBox="([^"]*)"/)
+  const viewBox = viewBoxMatch?.[1] ?? '0 0 32 32'
+
+  return `<svg xmlns="http://www.w3.org/2000/svg" viewBox="${viewBox}">
+  <style>
+    :root { color-scheme: light dark; }
+    @media (prefers-color-scheme: dark) { .light { display: none; } }
+    @media (prefers-color-scheme: light), (prefers-color-scheme: no-preference) { .dark { display: none; } }
+  </style>
+  <g class="light">${stripSvgWrapper(lightSvg)}</g>
+  <g class="dark">${stripSvgWrapper(darkSvg)}</g>
+</svg>`
+}
+
+function stripSvgWrapper(svg: string): string {
+  return svg
+    .replace(/<svg[^>]*>/, '')
+    .replace(/<\/svg>\s*$/, '')
+    .trim()
+}
+
+async function resizeToPng(input: string, size: number): Promise<Uint8Array | null> {
+  try {
+    const sharp = await import('sharp').then((m) => m.default ?? m)
+    return await sharp(input).resize(size, size, { fit: 'contain', background: { r: 0, g: 0, b: 0, alpha: 0 } } as any).png().toBuffer()
+  } catch {
+    warnSharpMissing()
+    return null
+  }
+}
+
+async function generateIco(input: string): Promise<Uint8Array | null> {
+  try {
+    const sharp = await import('sharp').then((m) => m.default ?? m)
+    const png16 = await sharp(input).resize(16, 16, { fit: 'contain', background: { r: 0, g: 0, b: 0, alpha: 0 } } as any).png().toBuffer()
+    const png32 = await sharp(input).resize(32, 32, { fit: 'contain', background: { r: 0, g: 0, b: 0, alpha: 0 } } as any).png().toBuffer()
+
+    // ICO format: header + directory entries + PNG data
+    return createIcoFromPngs([
+      { buffer: png16, size: 16 },
+      { buffer: png32, size: 32 },
+    ])
+  } catch {
+    warnSharpMissing()
+    return null
+  }
+}
+
+export interface IcoEntry {
+  buffer: Buffer
+  size: number
+}
+
+/** @internal Exported for testing */
+export function createIcoFromPngs(entries: IcoEntry[]): Uint8Array {
+  const headerSize = 6
+  const dirEntrySize = 16
+  const dirSize = dirEntrySize * entries.length
+  let dataOffset = headerSize + dirSize
+
+  // ICO header
+  const header = Buffer.alloc(headerSize)
+  header.writeUInt16LE(0, 0)              // reserved
+  header.writeUInt16LE(1, 2)              // type: icon
+  header.writeUInt16LE(entries.length, 4) // count
+
+  // Directory entries
+  const dirEntries = Buffer.alloc(dirSize)
+  const dataBuffers: Buffer[] = []
+
+  for (let i = 0; i < entries.length; i++) {
+    const entry = entries[i]!
+    const offset = i * dirEntrySize
+    dirEntries.writeUInt8(entry.size === 256 ? 0 : entry.size, offset)     // width
+    dirEntries.writeUInt8(entry.size === 256 ? 0 : entry.size, offset + 1) // height
+    dirEntries.writeUInt8(0, offset + 2)                                    // palette
+    dirEntries.writeUInt8(0, offset + 3)                                    // reserved
+    dirEntries.writeUInt16LE(1, offset + 4)                                 // color planes
+    dirEntries.writeUInt16LE(32, offset + 6)                                // bits per pixel
+    dirEntries.writeUInt32LE(entry.buffer.length, offset + 8)               // size
+    dirEntries.writeUInt32LE(dataOffset, offset + 12)                       // offset
+
+    dataOffset += entry.buffer.length
+    dataBuffers.push(entry.buffer)
+  }
+
+  return Buffer.concat([header, dirEntries, ...dataBuffers])
+}

package/src/fs-router.ts

@@ -20,9 +20,12 @@ import type { FileRoute, RenderMode } from './types'
 // Conventions:
 //   [param]     → dynamic segment  → :param
 //   [...param]  → catch-all        → :param*
-//   _layout     → layout wrapper (not a route itself)
+//   _layout     → layout wrapper — must use <RouterView /> to render child routes
+//                 (props.children is NOT passed — the router handles nesting)
 //   _error      → error component
 //   _loading    → loading component
+//   _404        → not-found component (renders on 404)
+//   _not-found  → alias for _404
 //   (group)     → route group (directory ignored in URL)
 
 const ROUTE_EXTENSIONS = ['.tsx', '.jsx', '.ts', '.js']
@@ -54,6 +57,7 @@ function parseFilePath(filePath: string, defaultMode: RenderMode): FileRoute {
   const isLayout = fileName === '_layout'
   const isError = fileName === '_error'
   const isLoading = fileName === '_loading'
+  const isNotFound = fileName === '_404' || fileName === '_not-found'
   const isCatchAll = route.includes('[...')
 
   // Get directory path (strip groups for consistent grouping)
@@ -73,6 +77,7 @@ function parseFilePath(filePath: string, defaultMode: RenderMode): FileRoute {
     isLayout,
     isError,
     isLoading,
+    isNotFound,
     isCatchAll,
     renderMode: defaultMode,
   }
@@ -99,7 +104,7 @@ export function filePathToUrlPath(filePath: string): string {
     if (seg.startsWith('(') && seg.endsWith(')')) continue
 
     // Skip special files
-    if (seg === '_layout' || seg === '_error' || seg === '_loading') continue
+    if (seg === '_layout' || seg === '_error' || seg === '_loading' || seg === '_404' || seg === '_not-found') continue
 
     // "index" maps to the parent path
     if (seg === 'index') continue
@@ -156,6 +161,8 @@ interface RouteNode {
   error?: FileRoute
   /** Loading fallback file (if any). */
   loading?: FileRoute
+  /** Not-found (404) file (if any). */
+  notFound?: FileRoute
   /** Child directories. */
   children: Map<string, RouteNode>
 }
@@ -186,6 +193,7 @@ function placeRoute(node: RouteNode, route: FileRoute) {
   if (route.isLayout) node.layout = route
   else if (route.isError) node.error = route
   else if (route.isLoading) node.loading = route
+  else if (route.isNotFound) node.notFound = route
   else node.pages.push(route)
 }
 
@@ -202,11 +210,26 @@ function buildRouteTree(routes: FileRoute[]): RouteNode {
  * Wires up layouts as parent routes with children, loaders, guards,
  * error/loading components, middleware, and meta from route module exports.
  */
-export function generateRouteModule(files: string[], routesDir: string): string {
+export interface GenerateRouteModuleOptions {
+  /**
+   * When true, skip lazy() for route components and use static imports.
+   * Use for SSG/prerender mode where all routes are rendered at build time
+   * and code splitting provides no benefit. Avoids Rolldown warnings about
+   * static + dynamic imports of the same module.
+   */
+  staticImports?: boolean
+}
+
+export function generateRouteModule(
+  files: string[],
+  routesDir: string,
+  options?: GenerateRouteModuleOptions,
+): string {
   const routes = parseFileRoutes(files)
   const tree = buildRouteTree(routes)
   const imports: string[] = []
   let importCounter = 0
+  const useStaticImports = options?.staticImports ?? false
 
   function nextImport(filePath: string, exportName = 'default'): string {
     const name = `_${importCounter++}`
@@ -222,11 +245,18 @@ export function generateRouteModule(files: string[], routesDir: string): string
   function nextLazy(filePath: string, loadingName?: string, errorName?: string): string {
     const name = `_${importCounter++}`
     const fullPath = `${routesDir}/${filePath}`
-    const opts: string[] = []
-    if (loadingName) opts.push(`loading: ${loadingName}`)
-    if (errorName) opts.push(`error: ${errorName}`)
-    const optsStr = opts.length > 0 ? `, { ${opts.join(', ')} }` : ''
-    imports.push(`const ${name} = lazy(() => import("${fullPath}")${optsStr})`)
+
+    if (useStaticImports) {
+      // SSG mode: static import avoids Rolldown warnings about
+      // static + dynamic imports of the same module
+      imports.push(`import ${name} from "${fullPath}"`)
+    } else {
+      const opts: string[] = []
+      if (loadingName) opts.push(`loading: ${loadingName}`)
+      if (errorName) opts.push(`error: ${errorName}`)
+      const optsStr = opts.length > 0 ? `, { ${opts.join(', ')} }` : ''
+      imports.push(`const ${name} = lazy(() => import("${fullPath}")${optsStr})`)
+    }
     return name
   }
 
@@ -242,6 +272,7 @@ export function generateRouteModule(files: string[], routesDir: string): string
     indent: string,
     loadingName: string | undefined,
     errorName: string | undefined,
+    notFoundName: string | undefined,
   ): string {
     const mod = nextModuleImport(page.filePath)
     const comp = nextLazy(page.filePath, loadingName, errorName)
@@ -254,10 +285,15 @@ export function generateRouteModule(files: string[], routesDir: string): string
       `${indent}  meta: { ...${mod}.meta, renderMode: ${mod}.renderMode }`,
     ]
 
+    // Only emit errorComponent when there's an actual _error file in scope
+    // or the route module exports an error component. Avoids referencing
+    // undefined .error exports that produce noisy bundler warnings.
     if (errorName) {
       props.push(`${indent}  errorComponent: ${mod}.error || ${errorName}`)
-    } else {
-      props.push(`${indent}  errorComponent: ${mod}.error`)
+    }
+
+    if (notFoundName) {
+      props.push(`${indent}  notFoundComponent: ${notFoundName}`)
     }
 
     return `${indent}{\n${props.join(',\n')}\n${indent}}`
@@ -268,6 +304,7 @@ export function generateRouteModule(files: string[], routesDir: string): string
     children: string[],
     indent: string,
     errorName: string | undefined,
+    notFoundName: string | undefined,
   ): string {
     const layout = node.layout as FileRoute
     const layoutMod = nextModuleImport(layout.filePath)
@@ -283,6 +320,9 @@ export function generateRouteModule(files: string[], routesDir: string): string
     if (errorName) {
       props.push(`${indent}errorComponent: ${errorName}`)
     }
+    if (notFoundName) {
+      props.push(`${indent}notFoundComponent: ${notFoundName}`)
+    }
     if (children.length > 0) {
       props.push(`${indent}children: [\n${children.join(',\n')}\n${indent}]`)
     }
@@ -298,6 +338,7 @@ export function generateRouteModule(files: string[], routesDir: string): string
 
     const errorName = node.error ? nextImport(node.error.filePath) : undefined
     const loadingName = node.loading ? nextImport(node.loading.filePath) : undefined
+    const notFoundName = node.notFound ? nextImport(node.notFound.filePath) : undefined
 
     const childRouteDefs: string[] = []
     for (const [, childNode] of node.children) {
@@ -305,13 +346,13 @@ export function generateRouteModule(files: string[], routesDir: string): string
     }
 
     const pageRouteDefs = node.pages.map((page) =>
-      generatePageRoute(page, indent, loadingName, errorName),
+      generatePageRoute(page, indent, loadingName, errorName, notFoundName),
     )
 
     const allChildren = [...pageRouteDefs, ...childRouteDefs]
 
     if (node.layout) {
-      return [wrapWithLayout(node, allChildren, indent, errorName)]
+      return [wrapWithLayout(node, allChildren, indent, errorName, notFoundName)]
     }
     return allChildren
   }
@@ -350,7 +391,7 @@ export function generateMiddlewareModule(files: string[], routesDir: string): st
   let counter = 0
 
   for (const route of routes) {
-    if (route.isLayout || route.isError || route.isLoading) continue
+    if (route.isLayout || route.isError || route.isLoading || route.isNotFound) continue
     const name = `_mw${counter++}`
     const fullPath = `${routesDir}/${route.filePath}`
     imports.push(`import { middleware as ${name} } from "${fullPath}"`)