@wular/pnext 0.0.1

package/src/compat/next/image/config.ts

@@ -0,0 +1,196 @@
+// ---------------------------------------------------------------------------
+// Resolved images config (COMPAT).
+//
+// Mirrors Next's imageConfigDefault, overlaid with the app's next.config
+// `images` block (read through the compat config store). Both the optimizer
+// endpoint and the next/image component read a single resolved config so the
+// srcset the component emits stays in lock-step with the widths the endpoint
+// accepts.
+// ---------------------------------------------------------------------------
+
+import { getNextConfig } from '../config-loader';
+
+export interface LocalPattern {
+  pathname?: string;
+  search?: string;
+}
+
+export interface RemotePattern {
+  protocol?: string;
+  hostname?: string;
+  port?: string;
+  pathname?: string;
+  search?: string;
+}
+
+export interface ResolvedImagesConfig {
+  deviceSizes: number[];
+  imageSizes: number[];
+  /** deviceSizes + imageSizes, sorted ascending (Next's `allSizes`). */
+  allSizes: number[];
+  qualities: number[] | undefined;
+  formats: string[];
+  path: string;
+  loader: string;
+  loaderFile: string;
+  domains: string[];
+  disableStaticImages: boolean;
+  minimumCacheTTL: number;
+  maximumRedirects: number;
+  maximumResponseBody: number;
+  dangerouslyAllowLocalIP: boolean;
+  dangerouslyAllowSVG: boolean;
+  contentSecurityPolicy: string;
+  contentDispositionType: string;
+  localPatterns: LocalPattern[] | undefined;
+  remotePatterns: RemotePattern[];
+  unoptimized: boolean;
+  customCacheHandler: boolean;
+}
+
+const DEFAULTS = {
+  deviceSizes: [640, 750, 828, 1080, 1200, 1920, 2048, 3840],
+  imageSizes: [32, 48, 64, 96, 128, 256, 384],
+  path: '/_next/image',
+  loader: 'default',
+  loaderFile: '',
+  domains: [] as string[],
+  disableStaticImages: false,
+  minimumCacheTTL: 14400,
+  formats: ['image/webp'],
+  maximumRedirects: 3,
+  maximumResponseBody: 50_000_000,
+  dangerouslyAllowLocalIP: false,
+  dangerouslyAllowSVG: false,
+  contentSecurityPolicy: `script-src 'none'; frame-src 'none'; sandbox;`,
+  contentDispositionType: 'attachment',
+  localPatterns: undefined as LocalPattern[] | undefined,
+  remotePatterns: [] as RemotePattern[],
+  qualities: [75] as number[] | undefined,
+  unoptimized: false,
+  customCacheHandler: false,
+} as const;
+
+let cached: { key: unknown; value: ResolvedImagesConfig } | undefined;
+
+function asNumberArray(value: unknown, fallback: number[]): number[] {
+  if (!Array.isArray(value)) return fallback;
+  const nums = value.filter((v): v is number => typeof v === 'number');
+  return nums.length > 0 ? nums : fallback;
+}
+
+/** The app's resolved images config, defaults overlaid with next.config.images. */
+export function getImagesConfig(): ResolvedImagesConfig {
+  const raw = getNextConfig().images;
+  if (cached && cached.key === raw) return cached.value;
+  const images = (raw && typeof raw === 'object' ? raw : {}) as Record<string, unknown>;
+
+  const deviceSizes = asNumberArray(images.deviceSizes, [...DEFAULTS.deviceSizes]).sort(
+    (a, b) => a - b,
+  );
+  const imageSizes = asNumberArray(images.imageSizes, [...DEFAULTS.imageSizes]).sort(
+    (a, b) => a - b,
+  );
+  const qualities =
+    images.qualities === undefined
+      ? [...(DEFAULTS.qualities ?? [])]
+      : asNumberArray(images.qualities, [...(DEFAULTS.qualities ?? [])]).sort((a, b) => a - b);
+
+  const value: ResolvedImagesConfig = {
+    deviceSizes,
+    imageSizes,
+    allSizes: [...deviceSizes, ...imageSizes].sort((a, b) => a - b),
+    qualities,
+    formats: Array.isArray(images.formats)
+      ? (images.formats as string[])
+      : [...DEFAULTS.formats],
+    path: typeof images.path === 'string' ? images.path : DEFAULTS.path,
+    loader: typeof images.loader === 'string' ? images.loader : DEFAULTS.loader,
+    loaderFile: typeof images.loaderFile === 'string' ? images.loaderFile : DEFAULTS.loaderFile,
+    domains: Array.isArray(images.domains) ? (images.domains as string[]) : [...DEFAULTS.domains],
+    disableStaticImages:
+      typeof images.disableStaticImages === 'boolean'
+        ? images.disableStaticImages
+        : DEFAULTS.disableStaticImages,
+    minimumCacheTTL:
+      typeof images.minimumCacheTTL === 'number'
+        ? images.minimumCacheTTL
+        : DEFAULTS.minimumCacheTTL,
+    maximumRedirects:
+      typeof images.maximumRedirects === 'number'
+        ? images.maximumRedirects
+        : DEFAULTS.maximumRedirects,
+    maximumResponseBody:
+      typeof images.maximumResponseBody === 'number'
+        ? images.maximumResponseBody
+        : DEFAULTS.maximumResponseBody,
+    dangerouslyAllowLocalIP:
+      typeof images.dangerouslyAllowLocalIP === 'boolean'
+        ? images.dangerouslyAllowLocalIP
+        : DEFAULTS.dangerouslyAllowLocalIP,
+    dangerouslyAllowSVG:
+      typeof images.dangerouslyAllowSVG === 'boolean'
+        ? images.dangerouslyAllowSVG
+        : DEFAULTS.dangerouslyAllowSVG,
+    contentSecurityPolicy:
+      typeof images.contentSecurityPolicy === 'string'
+        ? images.contentSecurityPolicy
+        : DEFAULTS.contentSecurityPolicy,
+    contentDispositionType:
+      typeof images.contentDispositionType === 'string'
+        ? images.contentDispositionType
+        : DEFAULTS.contentDispositionType,
+    localPatterns: normalizeLocalPatterns(images.localPatterns),
+    remotePatterns: normalizeRemotePatterns(images.remotePatterns),
+    unoptimized:
+      typeof images.unoptimized === 'boolean' ? images.unoptimized : DEFAULTS.unoptimized,
+    customCacheHandler: Boolean(images.customCacheHandler),
+  };
+  cached = { key: raw, value };
+  return value;
+}
+
+function normalizeLocalPatterns(value: unknown): LocalPattern[] | undefined {
+  if (!Array.isArray(value)) return undefined;
+  const patterns = value.map(entry => {
+    if (typeof entry === 'string') return { pathname: entry, search: '' };
+    const obj = (entry ?? {}) as Record<string, unknown>;
+    return {
+      pathname: typeof obj.pathname === 'string' ? obj.pathname : undefined,
+      search: typeof obj.search === 'string' ? obj.search : undefined,
+    };
+  });
+  // Next implicitly allows statically-imported media once localPatterns is
+  // configured, so build-time optimized static images keep loading. Appended to
+  // the normalized list so the runtime check and the images-manifest writer
+  // share one source of truth.
+  patterns.push(
+    { pathname: '/_next/static/media/**', search: '' },
+    { pathname: '/_next/static/immutable/media/**', search: '' },
+  );
+  return patterns;
+}
+
+function normalizeRemotePatterns(value: unknown): RemotePattern[] {
+  if (!Array.isArray(value)) return [];
+  return value.map(entry => {
+    // next.config may pass a URL instance (new URL('https://host/**')).
+    if (entry instanceof URL) {
+      return {
+        protocol: entry.protocol.replace(/:$/, ''),
+        hostname: entry.hostname,
+        ...(entry.port ? { port: entry.port } : {}),
+        pathname: entry.pathname,
+        search: entry.search,
+      };
+    }
+    const obj = (entry ?? {}) as Record<string, unknown>;
+    return {
+      protocol: typeof obj.protocol === 'string' ? obj.protocol : undefined,
+      hostname: typeof obj.hostname === 'string' ? obj.hostname : undefined,
+      port: typeof obj.port === 'string' ? obj.port : undefined,
+      pathname: typeof obj.pathname === 'string' ? obj.pathname : undefined,
+      search: typeof obj.search === 'string' ? obj.search : undefined,
+    };
+  });
+}

package/src/compat/next/image/optimizer.ts

@@ -0,0 +1,96 @@
+// ---------------------------------------------------------------------------
+// next/image optimizer glue (COMPAT).
+//
+// The full /_next/image endpoint lives in ../../image-optimizer/. This module
+// keeps the pieces the rest of the image pipeline uses: the endpoint matcher
+// and the build-time blur-placeholder generator for static imports.
+// ---------------------------------------------------------------------------
+
+import type { ResolvedImagesConfig } from './config';
+
+export { serveImageOptimizer } from '../../image-optimizer';
+
+const BLUR_QUALITY = 70;
+
+interface SharpPipeline {
+  resize(options: { width?: number; height?: number; withoutEnlargement?: boolean }): SharpPipeline;
+  webp(options: { quality: number }): SharpPipeline;
+  avif(options: { quality: number }): SharpPipeline;
+  png(options: { quality: number }): SharpPipeline;
+  jpeg(options: { quality: number; mozjpeg?: boolean }): SharpPipeline;
+  toBuffer(): Promise<Buffer>;
+}
+
+type SharpModule = (input: Buffer | Uint8Array) => SharpPipeline;
+
+let sharpPromise: Promise<SharpModule | undefined> | undefined;
+function loadSharp(): Promise<SharpModule | undefined> {
+  if (!sharpPromise) {
+    sharpPromise = import('sharp')
+      .then(m => (m.default ?? m) as unknown as SharpModule)
+      .catch(() => undefined);
+  }
+  return sharpPromise;
+}
+
+/** True if this request is for the image optimizer endpoint. */
+export function isImageOptimizerRequest(url: URL, config: ResolvedImagesConfig): boolean {
+  // `/_next/image/` (trailingSlash: true apps) is served the same as the bare
+  // path — the interceptor runs before core's trailing-slash normalization.
+  return url.pathname === config.path || url.pathname === `${config.path}/`;
+}
+
+const VALID_BLUR_EXT = new Set(['jpeg', 'jpg', 'png', 'webp', 'avif']);
+
+/** True for animated webp/gif/avif — Next skips blur-placeholder generation for these. */
+function isAnimated(buffer: Buffer): boolean {
+  // WebP: an 'ANIM' chunk under a VP8X container.
+  if (buffer.length > 16 && buffer.toString('ascii', 0, 4) === 'RIFF' && buffer.toString('ascii', 8, 12) === 'WEBP') {
+    return buffer.includes(Buffer.from('ANIM', 'ascii'));
+  }
+  // GIF: more than one image descriptor (0x2C) block before the trailer (0x3B).
+  if (buffer.length > 6 && buffer.toString('ascii', 0, 3) === 'GIF') {
+    let frames = 0;
+    for (let i = 6; i < buffer.length; i++) {
+      if (buffer[i] === 0x2c) frames++;
+      if (frames > 1) return true;
+    }
+    return false;
+  }
+  // AVIF: 'avis' major/compatible brand in the ftyp box signals an image sequence.
+  if (buffer.length > 16 && buffer.toString('ascii', 4, 8) === 'ftyp') {
+    return buffer.toString('ascii', 8, 200).includes('avis');
+  }
+  return false;
+}
+
+/**
+ * Generate a blur data URL from image bytes (build-time static import blur).
+ * Mirrors Next's `getBlurImage`: shrink to an 8px-max thumbnail (aspect-scaled
+ * height passed explicitly so sharp's rounding matches Next's), quality 70,
+ * mozjpeg for JPEG. Returns undefined for extensions/animated images Next
+ * does not generate a placeholder for.
+ */
+export async function generateBlurDataURL(
+  buffer: Buffer,
+  ext: string,
+  blurWidth: number,
+  blurHeight: number,
+): Promise<string | undefined> {
+  const extension = ext === 'jpg' ? 'jpeg' : ext;
+  if (!VALID_BLUR_EXT.has(extension) || isAnimated(buffer)) return undefined;
+  const sharp = await loadSharp();
+  if (!sharp) return undefined;
+  try {
+    const pipeline = sharp(buffer).resize({ width: blurWidth, height: blurHeight });
+    let out: SharpPipeline;
+    if (extension === 'png') out = pipeline.png({ quality: BLUR_QUALITY });
+    else if (extension === 'webp') out = pipeline.webp({ quality: BLUR_QUALITY });
+    else if (extension === 'avif') out = pipeline.avif({ quality: BLUR_QUALITY });
+    else out = pipeline.jpeg({ quality: BLUR_QUALITY, mozjpeg: true });
+    const resized = await out.toBuffer();
+    return `data:image/${extension};base64,${resized.toString('base64')}`;
+  } catch {
+    return undefined;
+  }
+}

package/src/compat/next/image/patterns.ts

@@ -0,0 +1,103 @@
+// ---------------------------------------------------------------------------
+// localPatterns / remotePatterns matching (COMPAT).
+//
+// Mirrors Next's hasLocalMatch / hasRemoteMatch used by the optimizer to decide
+// whether a requested `url` is allowed (else 400).
+// ---------------------------------------------------------------------------
+
+import type { LocalPattern, RemotePattern } from './config';
+
+function makePathnameRegex(pathname: string): RegExp {
+  // Convert a Next path-to-regexp style glob ('/assets/**') into a RegExp.
+  // '**' matches any depth; '*' matches a single segment.
+  let source = '';
+  const escaped = pathname.replace(/[.+?^${}()|[\]\\]/g, '\\$&');
+  // Handle ** then * (double-star must be processed first).
+  source = escaped.replace(/\/\*\*/g, '(?:/.*)?').replace(/\*\*/g, '.*').replace(/\*/g, '[^/]*');
+  return new RegExp(`^${source}$`);
+}
+
+export function hasLocalMatch(
+  localPatterns: LocalPattern[] | undefined,
+  url: URL,
+): boolean {
+  // undefined localPatterns => allow all local images (Next default).
+  if (localPatterns === undefined) return true;
+  return localPatterns.some(pattern => {
+    if (pattern.pathname !== undefined && !makePathnameRegex(pattern.pathname).test(url.pathname)) {
+      return false;
+    }
+    if (pattern.search !== undefined && pattern.search !== url.search) return false;
+    return true;
+  });
+}
+
+export function hasRemoteMatch(
+  domains: string[],
+  remotePatterns: RemotePattern[],
+  url: URL,
+): boolean {
+  if (domains.includes(url.hostname)) return true;
+  return remotePatterns.some(pattern => {
+    if (pattern.protocol !== undefined && pattern.protocol !== url.protocol.replace(/:$/, '')) {
+      return false;
+    }
+    if (pattern.hostname !== undefined && !matchHostname(pattern.hostname, url.hostname)) {
+      return false;
+    }
+    if (pattern.port !== undefined && pattern.port !== '' && pattern.port !== url.port) {
+      return false;
+    }
+    if (
+      pattern.pathname !== undefined &&
+      !makePathnameRegex(pattern.pathname).test(url.pathname)
+    ) {
+      return false;
+    }
+    if (pattern.search !== undefined && pattern.search !== '' && pattern.search !== url.search) {
+      return false;
+    }
+    return true;
+  });
+}
+
+function matchHostname(pattern: string, hostname: string): boolean {
+  if (pattern.startsWith('**.')) {
+    const suffix = pattern.slice(2); // ".example.com"
+    return hostname.endsWith(suffix) && hostname.length > suffix.length;
+  }
+  if (pattern.startsWith('*.')) {
+    const suffix = pattern.slice(1);
+    if (!hostname.endsWith(suffix)) return false;
+    const sub = hostname.slice(0, -suffix.length);
+    return sub.length > 0 && !sub.includes('.');
+  }
+  return pattern === hostname;
+}
+
+/**
+ * Next serializes localPatterns into images-manifest.json as pathname RegExp
+ * source strings (path-to-regexp compiled). We reproduce the exact strings the
+ * e2e suites assert.
+ */
+export function manifestLocalPatterns(
+  localPatterns: LocalPattern[] | undefined,
+): { pathname: string; search: string }[] {
+  const patterns = localPatterns ?? [{ pathname: undefined, search: '' }];
+  const entries = patterns.map(pattern => ({
+    pathname: compileLocalPathname(pattern.pathname),
+    search: pattern.search ?? '',
+  }));
+  return entries;
+}
+
+// path-to-regexp compiled source strings Next emits for local patterns.
+function compileLocalPathname(pathname: string | undefined): string {
+  if (pathname === undefined || pathname === '**') {
+    return '^(?:(?!(?:^|\\/)\\.{1,2}(?:\\/|$))(?:(?:(?!(?:^|\\/)\\.{1,2}(?:\\/|$)).)*?)\\/?)$';
+  }
+  // '/assets/**' style
+  const base = pathname.replace(/\/\*\*$/, '');
+  const escaped = base.replace(/[.+?^${}()|[\]\\]/g, '\\$&').replace(/\//g, '\\/');
+  return `^(?:${escaped}(?:\\/(?!\\.{1,2}(?:\\/|$))(?:(?:(?!(?:^|\\/)\\.{1,2}(?:\\/|$)).)*?)|$))$`;
+}

package/src/compat/next/image/shared.ts

@@ -0,0 +1,141 @@
+// ---------------------------------------------------------------------------
+// Shared next/image URL + srcset logic (COMPAT).
+//
+// Ports Next's get-img-props / image-loader / image-blur-svg so the rendered
+// markup matches Next byte-for-byte where the e2e suites snapshot it.
+// ---------------------------------------------------------------------------
+
+import type { ResolvedImagesConfig } from './config';
+
+export const BLUR_IMG_SIZE = 8;
+export const BLUR_QUALITY = 70;
+
+/** Default loader: build the /_next/image optimizer URL. */
+export function defaultLoader(
+  config: ResolvedImagesConfig,
+  src: string,
+  width: number,
+  quality?: number,
+): string {
+  const q = findClosestQuality(config, quality);
+  return `${config.path}?url=${encodeURIComponent(src)}&w=${width}&q=${q}`;
+}
+
+/**
+ * Coerce the requested quality to the closest allowed value (Next coerces
+ * out-of-list qualities to the nearest configured one; default 75).
+ */
+export function findClosestQuality(config: ResolvedImagesConfig, quality?: number): number {
+  const qualities = config.qualities;
+  if (!qualities || qualities.length === 0) return quality ?? 75;
+  if (quality === undefined) {
+    // Next's default when qualities is configured: 75 if present, else closest to 75.
+    return closest(qualities, 75);
+  }
+  return closest(qualities, quality);
+}
+
+function closest(values: number[], target: number): number {
+  let best = values[0]!;
+  let bestDelta = Math.abs(best - target);
+  for (const value of values) {
+    const delta = Math.abs(value - target);
+    if (delta < bestDelta) {
+      best = value;
+      bestDelta = delta;
+    }
+  }
+  return best;
+}
+
+export interface GenImgAttrsResult {
+  src: string;
+  srcSet: string | undefined;
+  sizes: string | undefined;
+}
+
+interface GetWidthsResult {
+  widths: number[];
+  kind: 'w' | 'x';
+}
+
+function getWidths(
+  config: ResolvedImagesConfig,
+  width: number | undefined,
+  sizes: string | undefined,
+): GetWidthsResult {
+  const { deviceSizes, allSizes } = config;
+  if (sizes) {
+    const viewportWidthRe = /(^|\s)(1?\d?\d)vw/g;
+    const percentSizes: number[] = [];
+    for (let match; (match = viewportWidthRe.exec(sizes)); ) {
+      percentSizes.push(parseInt(match[2]!, 10));
+    }
+    if (percentSizes.length) {
+      const smallestRatio = Math.min(...percentSizes) * 0.01;
+      return {
+        widths: allSizes.filter(s => s >= deviceSizes[0]! * smallestRatio),
+        kind: 'w',
+      };
+    }
+    return { widths: allSizes, kind: 'w' };
+  }
+  if (typeof width !== 'number') {
+    return { widths: deviceSizes, kind: 'w' };
+  }
+  const widths = [
+    ...new Set(
+      [width, width * 2].map(w => allSizes.find(p => p >= w) || allSizes[allSizes.length - 1]!),
+    ),
+  ];
+  return { widths, kind: 'x' };
+}
+
+/** Build src/srcSet/sizes exactly as Next's generateImgAttrs. */
+export function generateImgAttrs(params: {
+  config: ResolvedImagesConfig;
+  src: string;
+  unoptimized: boolean;
+  width: number | undefined;
+  quality: number | undefined;
+  sizes: string | undefined;
+  loader: (args: { config: ResolvedImagesConfig; src: string; width: number; quality?: number }) => string;
+}): GenImgAttrsResult {
+  const { config, src, unoptimized, width, quality, sizes, loader } = params;
+  if (unoptimized) {
+    return { src, srcSet: undefined, sizes: undefined };
+  }
+  const { widths, kind } = getWidths(config, width, sizes);
+  const last = widths.length - 1;
+  return {
+    sizes: !sizes && kind === 'w' ? '100vw' : sizes,
+    srcSet: widths
+      .map((w, i) => `${loader({ config, src, quality, width: w })} ${kind === 'w' ? w : i + 1}${kind}`)
+      .join(', '),
+    src: loader({ config, src, quality, width: widths[last]! }),
+  };
+}
+
+/** Next's getImageBlurSvg — the inline feGaussianBlur SVG placeholder. */
+export function getImageBlurSvg(params: {
+  widthInt?: number;
+  heightInt?: number;
+  blurWidth?: number;
+  blurHeight?: number;
+  blurDataURL: string;
+  objectFit?: string;
+}): string {
+  const { widthInt, heightInt, blurWidth, blurHeight, blurDataURL, objectFit } = params;
+  const std = 20;
+  const svgWidth = blurWidth ? blurWidth * 40 : widthInt;
+  const svgHeight = blurHeight ? blurHeight * 40 : heightInt;
+  const viewBox = svgWidth && svgHeight ? `viewBox='0 0 ${svgWidth} ${svgHeight}'` : '';
+  const preserveAspectRatio = viewBox
+    ? 'none'
+    : objectFit === 'contain'
+      ? 'xMidYMid'
+      : objectFit === 'cover'
+        ? 'xMidYMid slice'
+        : 'none';
+  return `%3Csvg xmlns='http://www.w3.org/2000/svg' ${viewBox}%3E%3Cfilter id='b' color-interpolation-filters='sRGB'%3E%3CfeGaussianBlur stdDeviation='${std}'/%3E%3CfeColorMatrix values='1 0 0 0 0 0 1 0 0 0 0 0 1 0 0 0 0 0 100 -1' result='s'/%3E%3CfeFlood x='0' y='0' width='100%25' height='100%25'/%3E%3CfeComposite operator='out' in='s'/%3E%3CfeComposite in2='SourceGraphic'/%3E%3CfeGaussianBlur stdDeviation='${std}'/%3E%3C/filter%3E%3Cimage width='100%25' height='100%25' x='0' y='0' preserveAspectRatio='${preserveAspectRatio}' style='filter: url(%23b);' href='${blurDataURL}'/%3E%3C/svg%3E`;
+}