gotodev-image-optimizer 0.1.0 → 0.1.2

package/dist/index.d.ts

@@ -0,0 +1,19 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import { ImgHTMLAttributes } from 'react';
+import { M as ManifestEntry } from './vite-plugin-CpGEB8EW.js';
+export { B as BuildManifest, D as DeviceFingerprint, I as ImageFormat, a as ImageMetadata, O as OutputFormat, P as PluginOptions, Q as QualityTier, g as gotodevImageOptimizer } from './vite-plugin-CpGEB8EW.js';
+import 'vite';
+
+interface GImageProps extends Omit<ImgHTMLAttributes<HTMLImageElement>, 'src' | 'srcSet' | 'width' | 'height'> {
+    src: ManifestEntry | string;
+    alt: string;
+    priority?: boolean;
+    sizes?: string;
+    disableAdaptive?: boolean;
+    placeholder?: 'blur' | 'none';
+    onLoad?: () => void;
+    onError?: () => void;
+}
+declare function GImage({ src, alt, priority, sizes, disableAdaptive, placeholder: placeholderMode, className, style, loading: loadingProp, onLoad, onError, ...imgProps }: GImageProps): react_jsx_runtime.JSX.Element;
+
+export { GImage, type GImageProps, ManifestEntry, GImage as default };

package/dist/index.js

@@ -0,0 +1,348 @@
+import {
+  gotodevImageOptimizer,
+  isAnimatedFormat
+} from "./chunk-JJABKWGE.js";
+
+// src/components/GImage.tsx
+import { useCallback, useEffect, useRef, useState } from "react";
+
+// src/adaptive/fingerprint.ts
+function getConnectionType() {
+  try {
+    const conn = navigator.connection;
+    if (conn?.effectiveType) {
+      const type = conn.effectiveType;
+      if (["slow-2g", "2g", "3g", "4g"].includes(type)) {
+        return type;
+      }
+    }
+  } catch {
+  }
+  return "unknown";
+}
+function getDeviceMemory() {
+  try {
+    const mem = navigator.deviceMemory;
+    return mem ?? 4;
+  } catch {
+    return 4;
+  }
+}
+function getHardwareConcurrency() {
+  try {
+    return navigator.hardwareConcurrency ?? 4;
+  } catch {
+    return 4;
+  }
+}
+function getDevicePixelRatio() {
+  try {
+    return window.devicePixelRatio ?? 1;
+  } catch {
+    return 1;
+  }
+}
+function getSaveData() {
+  try {
+    const sd = navigator.connection;
+    return sd?.saveData ?? false;
+  } catch {
+    return false;
+  }
+}
+function computeTier(fp) {
+  if (fp.saveData) return "low";
+  if (fp.effectiveType === "slow-2g" || fp.effectiveType === "2g") {
+    return "low";
+  }
+  const score = (fp.effectiveType === "4g" ? 40 : fp.effectiveType === "3g" ? 20 : 0) + Math.min(fp.deviceMemory / 8, 1) * 25 + Math.min(fp.hardwareConcurrency / 8, 1) * 20 + Math.min(fp.devicePixelRatio / 3, 1) * 15;
+  if (score >= 80) return "ultra";
+  if (score >= 55) return "high";
+  if (score >= 30) return "medium";
+  return "low";
+}
+var cachedFingerprint = null;
+function getDeviceFingerprint() {
+  if (cachedFingerprint) return cachedFingerprint;
+  const base = {
+    effectiveType: getConnectionType(),
+    deviceMemory: getDeviceMemory(),
+    hardwareConcurrency: getHardwareConcurrency(),
+    devicePixelRatio: getDevicePixelRatio(),
+    saveData: getSaveData()
+  };
+  cachedFingerprint = {
+    ...base,
+    tier: computeTier(base)
+  };
+  return cachedFingerprint;
+}
+function clearFingerprintCache() {
+  cachedFingerprint = null;
+}
+function listenForChanges(onChange) {
+  const handler = () => {
+    clearFingerprintCache();
+    onChange(getDeviceFingerprint());
+  };
+  try {
+    const conn = navigator.connection;
+    conn?.addEventListener?.("change", handler);
+    return () => {
+      try {
+        ;
+        conn?.removeEventListener?.("change", handler);
+      } catch {
+      }
+    };
+  } catch {
+    return () => {
+    };
+  }
+}
+
+// src/adaptive/predictive.ts
+var MIN_PRELOAD = 600;
+var MAX_PRELOAD = 3e3;
+var VELOCITY_SAMPLES = 5;
+var PredictiveLoader = class {
+  state = {
+    velocity: 0,
+    direction: "none",
+    lastScrollY: 0,
+    lastTimestamp: Date.now(),
+    preloadDistance: MIN_PRELOAD
+  };
+  velocities = [];
+  observer = null;
+  constructor() {
+    if (typeof window !== "undefined") {
+      this.state.lastScrollY = window.scrollY;
+      window.addEventListener("scroll", this.onScroll, { passive: true });
+    }
+  }
+  onScroll = () => {
+    const now = Date.now();
+    const dt = Math.max(1, now - this.state.lastTimestamp);
+    const dy = Math.abs(window.scrollY - this.state.lastScrollY);
+    const velocity = dy / dt;
+    this.velocities.push(velocity);
+    if (this.velocities.length > VELOCITY_SAMPLES) {
+      this.velocities.shift();
+    }
+    const avgVelocity = this.velocities.reduce((a, b) => a + b, 0) / this.velocities.length;
+    this.state.velocity = avgVelocity;
+    this.state.direction = window.scrollY > this.state.lastScrollY ? "down" : window.scrollY < this.state.lastScrollY ? "up" : "none";
+    this.state.lastScrollY = window.scrollY;
+    this.state.lastTimestamp = now;
+    this.state.preloadDistance = Math.min(MAX_PRELOAD, MIN_PRELOAD + avgVelocity * 5e3);
+  };
+  getPreloadMargin() {
+    return `${this.state.preloadDistance}px`;
+  }
+  observe(element, callback) {
+    this.observer?.disconnect();
+    this.observer = new IntersectionObserver(
+      (entries) => {
+        for (const entry of entries) {
+          if (entry.isIntersecting) {
+            callback(entry);
+            this.observer?.unobserve(entry.target);
+          }
+        }
+      },
+      {
+        rootMargin: this.getPreloadMargin(),
+        threshold: 0.01
+      }
+    );
+    this.observer.observe(element);
+  }
+  unobserve(element) {
+    this.observer?.unobserve(element);
+  }
+  destroy() {
+    this.observer?.disconnect();
+    if (typeof window !== "undefined") {
+      window.removeEventListener("scroll", this.onScroll);
+    }
+    this.observer = null;
+  }
+};
+
+// src/components/GImage.tsx
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+function GImage({
+  src,
+  alt,
+  priority = false,
+  sizes = "100vw",
+  disableAdaptive = false,
+  placeholder: placeholderMode = "blur",
+  className,
+  style,
+  loading: loadingProp,
+  onLoad,
+  onError,
+  ...imgProps
+}) {
+  const imgRef = useRef(null);
+  const containerRef = useRef(null);
+  const predictiveRef = useRef(null);
+  const [loadState, setLoadState] = useState({
+    loaded: false,
+    error: false,
+    currentTier: "ultra"
+  });
+  const metadata = typeof src === "string" ? null : {
+    src: src.src,
+    width: src.width,
+    height: src.height,
+    format: src.format,
+    placeholder: src.placeholder,
+    variants: src.variants,
+    tiers: src.tiers
+  };
+  useEffect(() => {
+    if (disableAdaptive || !metadata) {
+      setLoadState((prev) => ({ ...prev, currentTier: "ultra" }));
+      return;
+    }
+    const fp = getDeviceFingerprint();
+    setLoadState((prev) => ({ ...prev, currentTier: fp.tier }));
+    const cleanup = listenForChanges((newFp) => {
+      setLoadState((prev) => ({ ...prev, currentTier: newFp.tier }));
+    });
+    return cleanup;
+  }, [disableAdaptive, metadata]);
+  useEffect(() => {
+    if (priority || loadingProp === "eager") {
+      setLoadState((prev) => ({ ...prev, loaded: true }));
+      return;
+    }
+    if (!containerRef.current) return;
+    predictiveRef.current = new PredictiveLoader();
+    predictiveRef.current.observe(containerRef.current, () => {
+      setLoadState((prev) => ({ ...prev, loaded: true }));
+    });
+    return () => {
+      predictiveRef.current?.destroy();
+    };
+  }, [priority, loadingProp]);
+  const handleLoad = useCallback(() => {
+    setLoadState((prev) => ({ ...prev, loaded: true }));
+    onLoad?.();
+  }, [onLoad]);
+  const handleError = useCallback(() => {
+    setLoadState((prev) => ({ ...prev, error: true }));
+    onError?.();
+  }, [onError]);
+  if (!metadata) {
+    return /* @__PURE__ */ jsx(
+      "img",
+      {
+        ref: imgRef,
+        ...imgProps,
+        src: typeof src === "string" ? src : "",
+        alt: alt ?? "",
+        className,
+        style,
+        loading: priority ? "eager" : loadingProp ?? "lazy",
+        onLoad: handleLoad,
+        onError: handleError
+      }
+    );
+  }
+  const aspectRatio = metadata.width && metadata.height ? metadata.height / metadata.width * 100 : 0;
+  const tier = loadState.currentTier;
+  const tierVariants = metadata.variants.filter((v) => {
+    const tierWidths = {
+      ultra: 99999,
+      high: 1920,
+      medium: 1024,
+      low: 768
+    };
+    return v.width <= tierWidths[tier];
+  });
+  const hasPlaceholder = placeholderMode === "blur" && !!metadata.placeholder && !loadState.loaded;
+  const isAnimated = isAnimatedFormat(metadata.format);
+  const pictureContent = /* @__PURE__ */ jsxs("picture", { children: [
+    !isAnimated && tierVariants.length > 0 && /* @__PURE__ */ jsxs(Fragment, { children: [
+      /* @__PURE__ */ jsx(
+        "source",
+        {
+          type: "image/avif",
+          srcSet: tierVariants.filter((v) => v.format === "avif").map((v) => `${v.src} ${v.width}w`).join(", "),
+          sizes
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        "source",
+        {
+          type: "image/webp",
+          srcSet: tierVariants.filter((v) => v.format === "webp").map((v) => `${v.src} ${v.width}w`).join(", "),
+          sizes
+        }
+      )
+    ] }),
+    /* @__PURE__ */ jsx(
+      "img",
+      {
+        ref: imgRef,
+        ...imgProps,
+        src: tierVariants.find((v) => v.format === "jpeg")?.src ?? metadata.src,
+        srcSet: tierVariants.filter((v) => v.format === "jpeg" || v.format === "png").map((v) => `${v.src} ${v.width}w`).join(", ") || void 0,
+        sizes,
+        alt: alt ?? "",
+        width: metadata.width,
+        height: metadata.height,
+        loading: loadState.loaded && !priority ? "lazy" : "eager",
+        fetchPriority: priority ? "high" : void 0,
+        decoding: priority ? "auto" : "async",
+        className,
+        style: {
+          width: "100%",
+          height: "auto",
+          display: "block",
+          background: hasPlaceholder ? `${metadata.placeholder} center/cover no-repeat` : void 0,
+          filter: hasPlaceholder ? "blur(20px)" : void 0,
+          transition: "filter 0.4s ease-out, opacity 0.4s ease-out",
+          opacity: loadState.loaded ? 1 : 0.99,
+          ...style
+        },
+        onLoad: handleLoad,
+        onError: handleError
+      }
+    )
+  ] });
+  if (aspectRatio > 0) {
+    return /* @__PURE__ */ jsx(
+      "div",
+      {
+        ref: containerRef,
+        style: {
+          position: "relative",
+          width: "100%",
+          paddingBottom: `${aspectRatio}%`,
+          overflow: "hidden"
+        },
+        children: /* @__PURE__ */ jsx(
+          "div",
+          {
+            style: {
+              position: "absolute",
+              inset: 0
+            },
+            children: pictureContent
+          }
+        )
+      }
+    );
+  }
+  return /* @__PURE__ */ jsx("div", { ref: containerRef, children: pictureContent });
+}
+export {
+  GImage,
+  GImage as default,
+  gotodevImageOptimizer
+};

package/dist/vite-plugin-CpGEB8EW.d.ts

@@ -0,0 +1,63 @@
+import { Plugin } from 'vite';
+
+type ImageFormat = 'jpeg' | 'png' | 'webp' | 'avif' | 'gif' | 'svg' | 'bmp' | 'tiff' | 'ico';
+type OutputFormat = 'avif' | 'webp' | 'jpeg' | 'png';
+type QualityTier = 'ultra' | 'high' | 'medium' | 'low';
+interface TierConfig {
+    quality: number;
+    widths: number[];
+}
+interface PluginOptions {
+    tiers?: Partial<Record<QualityTier, TierConfig>>;
+    adaptive?: boolean;
+    autoTune?: boolean;
+    formats?: OutputFormat[];
+    maxFileSize?: number;
+    widths?: number[];
+    verbose?: boolean;
+    preprocess?: boolean;
+    faceDetection?: boolean;
+}
+interface ImageVariant {
+    src: string;
+    width: number;
+    format: OutputFormat;
+    size: number;
+    integrity: string;
+}
+interface ImageMetadata {
+    src: string;
+    width: number;
+    height: number;
+    format: ImageFormat;
+    placeholder: string;
+    variants: ImageVariant[];
+    tiers: Record<QualityTier, string>;
+    blurHash?: string;
+}
+interface DeviceFingerprint {
+    effectiveType: 'slow-2g' | '2g' | '3g' | '4g' | 'unknown';
+    deviceMemory: number;
+    hardwareConcurrency: number;
+    devicePixelRatio: number;
+    saveData: boolean;
+    tier: QualityTier;
+}
+interface ManifestEntry {
+    src: string;
+    width: number;
+    height: number;
+    format: ImageFormat;
+    placeholder: string;
+    tiers: Record<QualityTier, string>;
+    variants: ImageVariant[];
+}
+interface BuildManifest {
+    version: string;
+    generatedAt: string;
+    entries: Record<string, ManifestEntry>;
+}
+
+declare function gotodevImageOptimizer(userOptions?: PluginOptions): Plugin;
+
+export { type BuildManifest as B, type DeviceFingerprint as D, type ImageFormat as I, type ManifestEntry as M, type OutputFormat as O, type PluginOptions as P, type QualityTier as Q, type ImageMetadata as a, gotodevImageOptimizer as g };

package/dist/vite-plugin.d.ts

@@ -0,0 +1,2 @@
+import 'vite';
+export { g as default } from './vite-plugin-CpGEB8EW.js';

package/dist/vite-plugin.js

@@ -0,0 +1,6 @@
+import {
+  gotodevImageOptimizer
+} from "./chunk-JJABKWGE.js";
+export {
+  gotodevImageOptimizer as default
+};

package/package.json

@@ -1,34 +1,41 @@
 {
   "name": "gotodev-image-optimizer",
-  "version": "0.1.0",
+  "version": "0.1.2",
   "description": "Content-aware, device-adaptive image optimizer for React + Vite projects",
   "type": "module",
   "exports": {
-    ".": "./src/index.ts",
-    "./vite-plugin": "./src/vite-plugin.ts"
+    ".": {
+      "types": "./dist/index.d.ts",
+      "default": "./dist/index.js"
+    },
+    "./vite-plugin": {
+      "types": "./dist/vite-plugin.d.ts",
+      "default": "./dist/vite-plugin.js"
+    }
   },
-  "types": "./src/index.ts",
+  "types": "./dist/index.d.ts",
   "files": [
-    "src",
-    "!src/**/*.test.ts",
-    "!src/**/*.test.tsx",
+    "dist",
+    "!dist/**/*.test.*",
     "!playground"
   ],
   "scripts": {
     "dev": "vite playground",
-    "build": "vite build playground",
+    "build": "tsup --clean",
+    "build:playground": "vite build playground",
     "preview": "vite preview playground",
     "typecheck": "tsc --noEmit",
     "lint": "biome check src/",
     "lint:fix": "biome check --apply src/",
     "test": "vitest run",
     "test:watch": "vitest",
+    "prepublishOnly": "npm run build",
     "prepare": "echo 'ready'"
   },
   "license": "MIT",
   "repository": {
     "type": "git",
-    "url": "https://github.com/gotodev/image-optimizer.git"
+    "url": "git+https://github.com/gotodev/image-optimizer.git"
   },
   "engines": {
     "node": ">=22"
@@ -38,7 +45,7 @@
   },
   "peerDependencies": {
     "react": "^19.0.0",
-    "vite": "^7.0.0"
+    "vite": "^7.0.0 || ^8.0.0"
   },
   "devDependencies": {
     "@biomejs/biome": "^2.4.15",
@@ -49,6 +56,7 @@
     "happy-dom": "^20.9.0",
     "react": "^19.2.6",
     "react-dom": "^19.2.6",
+    "tsup": "^8.5.1",
     "typescript": "^6.0.3",
     "vite": "^8.0.13",
     "vitest": "^4.1.6"

package/src/adaptive/fingerprint.ts

@@ -1,117 +0,0 @@
-import type { DeviceFingerprint, QualityTier } from '../core/types.ts'
-
-function getConnectionType(): 'slow-2g' | '2g' | '3g' | '4g' | 'unknown' {
-  try {
-    const conn = (navigator as unknown as { connection?: { effectiveType?: string } }).connection
-    if (conn?.effectiveType) {
-      const type = conn.effectiveType
-      if (['slow-2g', '2g', '3g', '4g'].includes(type)) {
-        return type as 'slow-2g' | '2g' | '3g' | '4g'
-      }
-    }
-  } catch {}
-  return 'unknown'
-}
-
-function getDeviceMemory(): number {
-  try {
-    const mem = (navigator as unknown as { deviceMemory?: number }).deviceMemory
-    return mem ?? 4
-  } catch {
-    return 4
-  }
-}
-
-function getHardwareConcurrency(): number {
-  try {
-    return navigator.hardwareConcurrency ?? 4
-  } catch {
-    return 4
-  }
-}
-
-function getDevicePixelRatio(): number {
-  try {
-    return window.devicePixelRatio ?? 1
-  } catch {
-    return 1
-  }
-}
-
-function getSaveData(): boolean {
-  try {
-    const sd = (navigator as unknown as { connection?: { saveData?: boolean } }).connection
-    return sd?.saveData ?? false
-  } catch {
-    return false
-  }
-}
-
-function computeTier(fp: Omit<DeviceFingerprint, 'tier'>): QualityTier {
-  if (fp.saveData) return 'low'
-
-  if (fp.effectiveType === 'slow-2g' || fp.effectiveType === '2g') {
-    return 'low'
-  }
-
-  const score =
-    (fp.effectiveType === '4g' ? 40 : fp.effectiveType === '3g' ? 20 : 0) +
-    Math.min(fp.deviceMemory / 8, 1) * 25 +
-    Math.min(fp.hardwareConcurrency / 8, 1) * 20 +
-    Math.min(fp.devicePixelRatio / 3, 1) * 15
-
-  if (score >= 80) return 'ultra'
-  if (score >= 55) return 'high'
-  if (score >= 30) return 'medium'
-  return 'low'
-}
-
-let cachedFingerprint: DeviceFingerprint | null = null
-
-export function getDeviceFingerprint(): DeviceFingerprint {
-  if (cachedFingerprint) return cachedFingerprint
-
-  const base = {
-    effectiveType: getConnectionType(),
-    deviceMemory: getDeviceMemory(),
-    hardwareConcurrency: getHardwareConcurrency(),
-    devicePixelRatio: getDevicePixelRatio(),
-    saveData: getSaveData(),
-  }
-
-  cachedFingerprint = {
-    ...base,
-    tier: computeTier(base),
-  }
-
-  return cachedFingerprint
-}
-
-export function clearFingerprintCache(): void {
-  cachedFingerprint = null
-}
-
-export function listenForChanges(onChange: (fp: DeviceFingerprint) => void): () => void {
-  const handler = () => {
-    clearFingerprintCache()
-    onChange(getDeviceFingerprint())
-  }
-
-  try {
-    const conn = (
-      navigator as unknown as {
-        connection?: { addEventListener?: (type: string, handler: () => void) => void }
-      }
-    ).connection
-    conn?.addEventListener?.('change', handler)
-    return () => {
-      try {
-        ;(
-          conn as { removeEventListener?: (t: string, h: () => void) => void }
-        )?.removeEventListener?.('change', handler)
-      } catch {}
-    }
-  } catch {
-    return () => {}
-  }
-}