@qzsy/vinext 0.1.7 → 0.1.9

package/dist/index.js

@@ -731,6 +731,7 @@ function vinext(options = {}) {
 				}
 				defines["process.env.__VINEXT_IMAGE_DANGEROUSLY_ALLOW_SVG"] = JSON.stringify(String(nextConfig.images?.dangerouslyAllowSVG ?? false));
 				defines["process.env.__VINEXT_IMAGE_DANGEROUSLY_ALLOW_LOCAL_IP"] = JSON.stringify(String(nextConfig.images?.dangerouslyAllowLocalIP ?? false));
+				defines["process.env.__VINEXT_IMAGE_LOADER_CONFIGURED"] = JSON.stringify(nextConfig.images?.loaderFile ? "true" : "false");
 				defines["process.env.__VINEXT_BUILD_ID"] = JSON.stringify(nextConfig.buildId);
 				defines["process.env.__VINEXT_RSC_COMPATIBILITY_ID"] = JSON.stringify(rscCompatibilityId);
 				defines["process.env.__VINEXT_DEPLOYMENT_ID"] = JSON.stringify(nextConfig.deploymentId ?? "");
@@ -826,6 +827,9 @@ function vinext(options = {}) {
 					overlay: false
 				};
 				const cssModulesOverride = config.css?.modules === false || typeof config.css?.modules === "object" && "Loader" in config.css.modules ? {} : { modules: { Loader: sassComposesLoader.Loader } };
+				const defaultImageLoaderShimPath = resolveShimModulePath(shimsDir, "default-image-loader");
+				const imageLoaderFile = nextConfig.images?.loaderFile;
+				const imageLoaderAlias = imageLoaderFile != null ? { [defaultImageLoaderShimPath]: imageLoaderFile } : {};
 				const viteConfig = {
 					appType: "custom",
 					build: {
@@ -873,7 +877,8 @@ function vinext(options = {}) {
 						alias: {
 							...tsconfigPathAliases,
 							...nextConfig.aliases,
-							...nextShimMap
+							...nextShimMap,
+							...imageLoaderAlias
 						},
 						dedupe: [
 							"react",
@@ -920,6 +925,7 @@ function vinext(options = {}) {
 					resolveId(id) {
 						const shimBase = _reactServerShims.get(id);
 						if (shimBase !== void 0) return resolveShimModulePath(shimsDir, shimBase);
+						if (imageLoaderFile != null && id === defaultImageLoaderShimPath) return imageLoaderFile;
 					}
 				};
 				const depOptimizeNodeEnvOptions = getDepOptimizeNodeEnvOptions(viteMajorVersion, nodeEnvDefine);

package/dist/server/app-rsc-handler.js

@@ -17,11 +17,11 @@ import "./app-page-response.js";
 import { buildNextDataNotFoundResponse, normalizePagesDataRequest } from "./pages-data-route.js";
 import { matchPrerenderRouteParamsPayload, readTrustedPrerenderRouteParams, serializePrerenderRouteParamsHeader } from "./prerender-route-params.js";
 import { getRenderedConcreteUrlPathsForRoute } from "./pregenerated-concrete-paths.js";
-import { flattenErrorCauses } from "../utils/error-cause.js";
 import { pickRootParams, setRootParams } from "../shims/root-params.js";
 import { createServerActionNotFoundResponse, getServerActionNotFoundMessage } from "./server-action-not-found.js";
 import { buildPageCacheTags } from "./implicit-tags.js";
 import { buildPostMwRequestContext } from "./app-post-middleware-context.js";
+import { flattenErrorCauses } from "../utils/error-cause.js";
 import { finalizeAppRscResponse } from "./app-rsc-response-finalizer.js";
 import { normalizeRscRequest } from "./app-rsc-request-normalization.js";
 import { runWithPrerenderWorkUnit } from "./prerender-work-unit-setup.js";

package/dist/shims/default-image-loader.d.ts

@@ -0,0 +1,12 @@
+//#region src/shims/default-image-loader.d.ts
+declare function defaultImageLoader({
+  src,
+  width,
+  quality
+}: {
+  src: string;
+  width: number;
+  quality?: number;
+}): string;
+//#endregion
+export { defaultImageLoader as default };

package/dist/shims/default-image-loader.js

@@ -0,0 +1,13 @@
+import { imageOptimizationUrl } from "./image-optimization-url.js";
+//#region src/shims/default-image-loader.ts
+/**
+* Default image loader for next/image.
+*
+* When `images.loaderFile` is configured in next.config.js, vinext aliases
+* this module to the user's custom loader at build time (mirroring Next.js).
+*/
+function defaultImageLoader({ src, width, quality = 75 }) {
+	return imageOptimizationUrl(src, width, quality);
+}
+//#endregion
+export { defaultImageLoader as default };

package/dist/shims/image-optimization-url.d.ts

@@ -0,0 +1,10 @@
+//#region src/shims/image-optimization-url.d.ts
+/**
+ * Build a `/_next/image` optimization URL.
+ *
+ * Shared by the next/image shim and the default image loader module so
+ * `images.loaderFile` aliasing does not create a circular import.
+ */
+declare function imageOptimizationUrl(src: string, width: number, quality?: number): string;
+//#endregion
+export { imageOptimizationUrl };

package/dist/shims/image-optimization-url.js

@@ -0,0 +1,12 @@
+//#region src/shims/image-optimization-url.ts
+/**
+* Build a `/_next/image` optimization URL.
+*
+* Shared by the next/image shim and the default image loader module so
+* `images.loaderFile` aliasing does not create a circular import.
+*/
+function imageOptimizationUrl(src, width, quality = 75) {
+	return `/_next/image?url=${encodeURIComponent(src)}&w=${width}&q=${quality}`;
+}
+//#endregion
+export { imageOptimizationUrl };

package/dist/shims/image.d.ts

@@ -1,3 +1,4 @@
+import { imageOptimizationUrl } from "./image-optimization-url.js";
 import React from "react";
 
 //#region src/shims/image.d.ts
@@ -35,14 +36,6 @@ type ImageProps = {
   overrideSrc?: string;
   loading?: "lazy" | "eager";
 };
-/**
- * Build a `/_next/image` optimization URL.
- *
- * In production (Cloudflare Workers), the worker intercepts this path and uses
- * the Images binding to resize/transcode on the fly. In dev, the Vite dev
- * server handles it as a passthrough (serves the original file).
- */
-declare function imageOptimizationUrl(src: string, width: number, quality?: number): string;
 declare const Image: React.ForwardRefExoticComponent<ImageProps & React.RefAttributes<HTMLImageElement>>;
 /**
  * getImageProps — for advanced use cases (picture elements, background images).

package/dist/shims/image.js

@@ -1,4 +1,6 @@
 "use client";
+import { imageOptimizationUrl } from "./image-optimization-url.js";
+import defaultImageLoader from "./default-image-loader.js";
 import { useMergedRef } from "./use-merged-ref.js";
 import { hasRemoteMatch, isPrivateIp } from "./image-config.js";
 import { forwardRef, useEffect, useLayoutEffect, useRef, useState } from "react";
@@ -68,6 +70,14 @@ const __dangerouslyAllowSVG = process.env.__VINEXT_IMAGE_DANGEROUSLY_ALLOW_SVG =
 * are blocked to mitigate SSRF risk.
 */
 const __dangerouslyAllowLocalIP = process.env.__VINEXT_IMAGE_DANGEROUSLY_ALLOW_LOCAL_IP === "true";
+/** Set when next.config.js configures images.loaderFile. */
+const __imageLoaderConfigured = process.env.__VINEXT_IMAGE_LOADER_CONFIGURED === "true";
+function resolveEffectiveLoader(loader) {
+	if (loader) return loader;
+	if (!__imageLoaderConfigured) return void 0;
+	if (typeof defaultImageLoader !== "function") throw new Error("images.loaderFile detected but the file is missing default export.\nRead more: https://nextjs.org/docs/messages/invalid-images-config");
+	return defaultImageLoader;
+}
 /**
 * Validate that a remote URL is allowed by the configured remote patterns.
 * Returns true if the URL is allowed, false otherwise.
@@ -211,16 +221,6 @@ function resolveImageSource(v) {
 * Configurable via `images.deviceSizes` in next.config.js.
 */
 const RESPONSIVE_WIDTHS = __imageDeviceSizes;
-/**
-* Build a `/_next/image` optimization URL.
-*
-* In production (Cloudflare Workers), the worker intercepts this path and uses
-* the Images binding to resize/transcode on the fly. In dev, the Vite dev
-* server handles it as a passthrough (serves the original file).
-*/
-function imageOptimizationUrl(src, width, quality = 75) {
-	return `/_next/image?url=${encodeURIComponent(src)}&w=${width}&q=${quality}`;
-}
 function preloadImageResource(input) {
 	if (!input.shouldPreload) return;
 	if (typeof ReactDOM.preload !== "function") return;
@@ -270,6 +270,7 @@ const Image = forwardRef(function Image({ src: srcProp, alt, width, height, fill
 	const shouldPreload = preload === true || priority === true;
 	const priorityFetchPriority = priority ? "high" : void 0;
 	const imageLoading = priority ? "eager" : shouldPreload ? loading : loading ?? "lazy";
+	const effectiveLoader = resolveEffectiveLoader(loader);
 	const [completedBlurSrc, setCompletedBlurSrc] = useState(void 0);
 	const blurComplete = completedBlurSrc === src;
 	const markBlurComplete = () => {
@@ -360,8 +361,8 @@ const Image = forwardRef(function Image({ src: srcProp, alt, width, height, fill
 			...rest
 		});
 	}
-	if (loader) {
-		const resolvedSrc = loader({
+	if (effectiveLoader) {
+		const resolvedSrc = effectiveLoader({
 			src,
 			width: imgWidth ?? 0,
 			quality: quality ?? 75
@@ -508,6 +509,7 @@ function getImageProps(props) {
 		blurDataURL: blurDataURLProp
 	});
 	const shouldPreload = _preload === true || priority === true;
+	const effectiveLoader = resolveEffectiveLoader(loader);
 	if (_unoptimized === true) {
 		const renderedSrc = overrideSrc || src;
 		const sanitizedBlurURL = imgBlurDataURL ? sanitizeBlurDataURL(imgBlurDataURL) : void 0;
@@ -544,14 +546,14 @@ function getImageProps(props) {
 		}
 	}
 	const imgQuality = _quality ?? 75;
-	const resolvedSrc = blockedInProd ? "" : loader ? loader({
+	const resolvedSrc = blockedInProd ? "" : effectiveLoader ? effectiveLoader({
 		src,
 		width: imgWidth ?? 0,
 		quality: imgQuality
 	}) : src;
-	const skipOpt = isSvgUrl(resolvedSrc) && !__dangerouslyAllowSVG || blockedInProd || !!loader || isRemoteUrl(resolvedSrc);
+	const skipOpt = isSvgUrl(resolvedSrc) && !__dangerouslyAllowSVG || blockedInProd || !!effectiveLoader || isRemoteUrl(resolvedSrc);
 	const optimizedSrc = skipOpt ? resolvedSrc : imgWidth ? imageOptimizationUrl(resolvedSrc, imgWidth, imgQuality) : imageOptimizationUrl(resolvedSrc, RESPONSIVE_WIDTHS[0], imgQuality);
-	const srcSet = imgWidth && !fill && !isRemoteUrl(resolvedSrc) && !loader && !skipOpt ? generateSrcSet(resolvedSrc, imgWidth, imgQuality) : void 0;
+	const srcSet = imgWidth && !fill && !isRemoteUrl(resolvedSrc) && !effectiveLoader && !skipOpt ? generateSrcSet(resolvedSrc, imgWidth, imgQuality) : void 0;
 	const sanitizedBlurURL = imgBlurDataURL ? sanitizeBlurDataURL(imgBlurDataURL) : void 0;
 	const blurStyle = placeholder === "blur" && sanitizedBlurURL ? {
 		backgroundImage: `url(${sanitizedBlurURL})`,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@qzsy/vinext",
-  "version": "0.1.7",
+  "version": "0.1.9",
   "description": "Run Next.js apps on Vite. Drop-in replacement for the next CLI.",
   "license": "MIT",
   "repository": {