@pyreon/zero 0.19.0 → 0.21.0

package/src/image-plugin.ts

@@ -23,7 +23,13 @@ function warnSharpMissing() {
 //
 // Usage in code:
 //   import heroImg from "./hero.jpg?optimize"
-//   // → { src, srcset, width, height, placeholder }
+//   // → ProcessedImage { src, srcset, width, height, placeholder }
+//
+// Type the `?optimize` / `?component` / `?raw` imports out of the box —
+// add ONE line to a tsconfig-covered `.d.ts` (e.g. `src/env.d.ts`):
+//   /// <reference types="@pyreon/zero/image-types" />
+// (ships the ambient `declare module "*?optimize"` etc. — reuses this
+//  module's own `ProcessedImage`, so it never drifts.)
 //
 // Or use the component helper:
 //   import { Image } from "@pyreon/zero/image"
@@ -229,23 +235,45 @@ export function imagePlugin(config: ImagePluginConfig = {}): Plugin {
       isBuild = resolvedConfig.command === 'build'
     },
 
-    async resolveId(id) {
-      // SVG as component: import Logo from './logo.svg?component'
-      if (svgOpts && id.includes('?component') && id.split('?')[0]!.endsWith('.svg')) {
-        return `\0virtual:zero-svg:${id}`
-      }
-      // Handle ?optimize query on image imports
-      if (id.includes('?optimize') && include.test(id.split('?')[0]!)) {
-        return `\0virtual:zero-image:${id}`
-      }
-      return null
+    async resolveId(id, importer) {
+      const isSvgComponent =
+        svgOpts && id.includes('?component') && id.split('?')[0]!.endsWith('.svg')
+      const isOptimize =
+        id.includes('?optimize') && include.test(id.split('?')[0]!)
+      if (!isSvgComponent && !isOptimize) return null
+
+      // Resolve the bare specifier to an ABSOLUTE fs path the way Vite
+      // resolves `?url` — importer-relative + alias-aware. The old code
+      // embedded the raw unresolved id, so `load()` had to guess: a
+      // relative `./img.png?optimize` resolved against cwd (≠ the
+      // importer's dir → ENOENT), and an aliased `~/x.png?optimize`
+      // arrived already-absolute and got `join(root,'public',…)`-doubled.
+      // `this.resolve` (skipSelf so we don't recurse into our own
+      // resolveId) handles relative + aliases + extensions. A public-dir
+      // web path (`/foo.png?optimize`) doesn't resolve to a module →
+      // null → keep the original id so load()'s public/ fallback applies.
+      const qIdx = id.indexOf('?')
+      const bare = qIdx === -1 ? id : id.slice(0, qIdx)
+      const query = qIdx === -1 ? '' : id.slice(qIdx)
+      const resolved = await this.resolve(bare, importer, { skipSelf: true })
+      const carried = resolved ? `${resolved.id}${query}` : id
+
+      if (isSvgComponent) return `\0virtual:zero-svg:${carried}`
+      return `\0virtual:zero-image:${carried}`
     },
 
     async load(id) {
       // SVG component loading
       if (id.startsWith('\0virtual:zero-svg:')) {
         const rawPath = id.replace('\0virtual:zero-svg:', '').split('?')[0] ?? id
-        const absPath = rawPath.startsWith('/') ? join(root, rawPath) : rawPath
+        // resolveId now carries an absolute fs path for relative/aliased
+        // imports → trust it if it exists. Only a public-dir web path
+        // (`/logo.svg`, unresolved) falls back to root-join.
+        const absPath = existsSync(rawPath)
+          ? rawPath
+          : rawPath.startsWith('/')
+            ? join(root, rawPath)
+            : rawPath
         if (!existsSync(absPath)) return null
 
         let svg = await readFile(absPath, 'utf-8')
@@ -287,7 +315,16 @@ export default function SvgComponent(props) {
       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
+      // resolveId now carries an absolute fs path for relative/aliased
+      // imports (the `./img.png?optimize` and `~/img.png?optimize` cases
+      // that used to ENOENT / double-`public`). Trust an existing
+      // absolute path; only an unresolved public-dir web path
+      // (`/foo.png?optimize`) falls back to `<root>/public/…`.
+      const absPath = existsSync(rawPath)
+        ? rawPath
+        : rawPath.startsWith('/')
+          ? join(root, 'public', rawPath)
+          : rawPath
 
       // CDN mode — rewrite URLs, no local processing
       if (cdn) {
@@ -358,7 +395,15 @@ async function loadDevImage(
   placeholderSize: number,
 ): Promise<ProcessedImage> {
   const metadata = await getImageMetadata(absPath)
-  const publicPath = rawPath.startsWith('/') ? rawPath : `/@fs/${absPath}`
+  // `rawPath` is a public-dir web path (e.g. `/logo.png`, served from
+  // `public/` at the web root) ONLY when it does NOT resolve to a real
+  // file on disk — the same discriminator the `absPath` derivation uses
+  // above. `resolveId` now hands absolute fs paths for relative/aliased
+  // imports (`/Users/…/img.png`); those ARE real files and must be
+  // served through Vite's `/@fs/` prefix, not as a literal `/Users/…`
+  // URL (which 404s in dev — build mode was unaffected).
+  const isPublicWebPath = rawPath.startsWith('/') && !existsSync(rawPath)
+  const publicPath = isPublicWebPath ? rawPath : `/@fs/${absPath}`
 
   return {
     src: publicPath,

package/src/image-types.ts

@@ -0,0 +1,60 @@
+/**
+ * Ambient type declarations for the custom image-import queries that
+ * `@pyreon/zero`'s `imagePlugin` introduces (`?optimize` / `?component`
+ * / `?raw`). Shipped + exported so the documented usage type-checks out
+ * of the box — no consumer hand-authoring required.
+ *
+ * Add ONE line to any tsconfig-covered `.d.ts` (e.g. `src/env.d.ts`):
+ *   /// <reference types="@pyreon/zero/image-types" />
+ *
+ * Or via tsconfig.json:
+ *   "types": ["@pyreon/zero/image-types"]
+ *
+ * This is an ambient-only **script** (no top-level import/export) so
+ * every `declare module` below is a global module augmentation. The
+ * `ProcessedImage` shape is referenced via the package self-ref
+ * `import('@pyreon/zero/image-plugin')` (resolution-stable in the
+ * published layout, and re-uses the plugin's own type so it can never
+ * drift out of sync).
+ */
+
+declare module '*.jpg?optimize' {
+  const image: import('@pyreon/zero/image-plugin').ProcessedImage
+  export default image
+}
+
+declare module '*.jpeg?optimize' {
+  const image: import('@pyreon/zero/image-plugin').ProcessedImage
+  export default image
+}
+
+declare module '*.png?optimize' {
+  const image: import('@pyreon/zero/image-plugin').ProcessedImage
+  export default image
+}
+
+declare module '*.webp?optimize' {
+  const image: import('@pyreon/zero/image-plugin').ProcessedImage
+  export default image
+}
+
+declare module '*.avif?optimize' {
+  const image: import('@pyreon/zero/image-plugin').ProcessedImage
+  export default image
+}
+
+declare module '*.svg?component' {
+  const component: import('@pyreon/core').ComponentFn<{
+    width?: number
+    height?: number
+    class?: string
+    style?: string
+    [key: string]: unknown
+  }>
+  export default component
+}
+
+declare module '*.svg?raw' {
+  const svg: string
+  export default svg
+}