@qzsy/vinext 0.1.8 → 0.1.10

package/dist/index.js

@@ -341,6 +341,22 @@ const _fontGoogleShimPath = resolveShimModulePath(_shimsDir, "font-google");
 const _appBrowserServerActionClientPath = resolveShimModulePath(normalizePathSeparators(path.resolve(__dirname, "server")), "app-browser-server-action-client");
 const _appRscHandlerPath = resolveShimModulePath(normalizePathSeparators(path.resolve(__dirname, "server")), "app-rsc-handler");
 const _canExternalizeAppRscHandler = _appRscHandlerPath.endsWith(".js");
+const _defaultImageLoaderShimPath = resolveShimModulePath(_shimsDir, "default-image-loader");
+/** Absolute path to `images.loaderFile` when configured; set in vinext:config. */
+let _imageLoaderFile;
+function isImageShimModule(importer) {
+	if (!importer) return false;
+	const normalized = normalizePathSeparators(importer.split("?")[0]);
+	return /\/shims\/image\.(tsx?|jsx?)$/.test(normalized);
+}
+function isDefaultImageLoaderRequest(id, importer) {
+	const cleanId = id.startsWith("\0") ? id.slice(1) : id;
+	const normalizedId = normalizePathSeparators(cleanId.split("?")[0]);
+	if (normalizedId === normalizePathSeparators(_defaultImageLoaderShimPath)) return true;
+	if (/\/shims\/default-image-loader\.(tsx?|jsx?)$/.test(normalizedId)) return true;
+	if (isImageShimModule(importer) && (cleanId === "./default-image-loader.js" || cleanId === "./default-image-loader" || cleanId === "./default-image-loader.ts" || cleanId === "./default-image-loader.tsx")) return true;
+	return false;
+}
 function isValidExportIdentifier(name) {
 	return /^[$A-Z_a-z][$\w]*$/.test(name);
 }
@@ -623,6 +639,16 @@ function vinext(options = {}) {
 			serverOnlyShimPath: resolveShimModulePath(shimsDir, "server-only")
 		}),
 		dataUrlCssPlugin(),
+		{
+			name: "vinext:image-loader-file",
+			enforce: "pre",
+			resolveId: {
+				filter: { id: /default-image-loader/ },
+				handler(id, importer) {
+					if (_imageLoaderFile && isDefaultImageLoaderRequest(id, importer)) return _imageLoaderFile;
+				}
+			}
+		},
 		{
 			name: "vinext:config",
 			enforce: "pre",
@@ -731,6 +757,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 +853,7 @@ 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 } };
+				_imageLoaderFile = nextConfig.images?.loaderFile;
 				const viteConfig = {
 					appType: "custom",
 					build: {
@@ -917,9 +945,10 @@ function vinext(options = {}) {
 				const incomingInclude = config.optimizeDeps?.include ?? [];
 				const depOptimizeAliasPlugin = {
 					name: "vinext:dep-optimize-alias",
-					resolveId(id) {
+					resolveId(id, importer) {
 						const shimBase = _reactServerShims.get(id);
 						if (shimBase !== void 0) return resolveShimModulePath(shimsDir, shimBase);
+						if (_imageLoaderFile && isDefaultImageLoaderRequest(id, importer)) return _imageLoaderFile;
 					}
 				};
 				const depOptimizeNodeEnvOptions = getDepOptimizeNodeEnvOptions(viteMajorVersion, nodeEnvDefine);

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

@@ -17,8 +17,8 @@ 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 { pickRootParams, setRootParams } from "../shims/root-params.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";

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.8",
+  "version": "0.1.10",
   "description": "Run Next.js apps on Vite. Drop-in replacement for the next CLI.",
   "license": "MIT",
   "repository": {
@@ -89,26 +89,31 @@
   "publishConfig": {
     "access": "public"
   },
+  "scripts": {
+    "build": "vp pack",
+    "prepack": "cp ../../README.md README.md && vp run build",
+    "dev": "vp pack --watch"
+  },
   "dependencies": {
-    "@unpic/react": "^1.0.2",
-    "@vercel/og": "^0.8.6",
-    "image-size": "2.0.2",
-    "ipaddr.js": "^2.1.0",
-    "magic-string": "^0.30.21",
-    "vite-plugin-commonjs": "^0.10.4",
-    "web-vitals": "^4.2.4"
+    "@unpic/react": "catalog:",
+    "@vercel/og": "catalog:",
+    "image-size": "catalog:",
+    "ipaddr.js": "catalog:",
+    "magic-string": "catalog:",
+    "vite-plugin-commonjs": "catalog:",
+    "web-vitals": "catalog:"
   },
   "devDependencies": {
-    "@types/node": "^25.9.2",
-    "@types/react": "^19.2.16",
-    "@types/react-dom": "^19.2.3",
-    "@vitejs/plugin-react": "^6.0.1",
-    "@vitejs/plugin-rsc": "^0.5.27",
-    "react-server-dom-webpack": "^19.2.7",
-    "vite": "npm:@voidzero-dev/vite-plus-core@0.2.1",
-    "vite-plus": "0.2.1",
-    "vite-tsconfig-paths": "^6.1.1",
-    "@vinext/cloudflare": "0.1.2"
+    "@types/node": "catalog:",
+    "@types/react": "catalog:",
+    "@types/react-dom": "catalog:",
+    "@vinext/cloudflare": "workspace:*",
+    "@vitejs/plugin-react": "catalog:",
+    "@vitejs/plugin-rsc": "catalog:",
+    "react-server-dom-webpack": "catalog:",
+    "vite": "catalog:",
+    "vite-plus": "catalog:",
+    "vite-tsconfig-paths": "catalog:"
   },
   "peerDependencies": {
     "@mdx-js/rollup": "^3.0.0",
@@ -136,9 +141,5 @@
   },
   "engines": {
     "node": ">=22"
-  },
-  "scripts": {
-    "build": "vp pack",
-    "dev": "vp pack --watch"
   }
-}
+}