@wular/pnext 0.0.4 → 0.0.7

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

@@ -2,101 +2,94 @@
 // block (and the assetPrefix URL check) - the image-optimizer e2e suite asserts these exact strings in
 // the build output of an invalid config. Only the rules Next enforces are checked.
 
-import fs from 'node:fs';
-import path from 'node:path';
+import fs from 'node:fs'
+import path from 'node:path'
 
-const LOADERS = ['default', 'imgix', 'cloudinary', 'akamai', 'custom'] as const;
-const FORMATS = ['image/avif', 'image/webp'] as const;
-const DISPOSITIONS = ['inline', 'attachment'] as const;
-const REMOTE_PATTERN_KEYS = new Set(['protocol', 'hostname', 'port', 'pathname', 'search']);
-const LOCAL_PATTERN_KEYS = new Set(['pathname', 'search']);
+const LOADERS = ['default', 'imgix', 'cloudinary', 'akamai', 'custom'] as const
+const FORMATS = ['image/avif', 'image/webp'] as const
+const DISPOSITIONS = ['inline', 'attachment'] as const
+const REMOTE_PATTERN_KEYS = new Set(['protocol', 'hostname', 'port', 'pathname', 'search'])
+const LOCAL_PATTERN_KEYS = new Set(['pathname', 'search'])
 
 function hasDefaultExport(file: string): boolean {
-  let source: string;
+  let source: string
   try {
-    source = fs.readFileSync(file, 'utf8');
+    source = fs.readFileSync(file, 'utf8')
   } catch {
-    return false;
+    return false
   }
-  return /\bexport\s+default\b/.test(source) || /\bmodule\.exports\s*=/.test(source);
+  return /\bexport\s+default\b/.test(source) || /\bmodule\.exports\s*=/.test(source)
 }
 
 function received(value: unknown): string {
-  if (value === null) return 'null';
-  if (Array.isArray(value)) return 'array';
-  return typeof value;
+  if (value === null) return 'null'
+  if (Array.isArray(value)) return 'array'
+  return typeof value
 }
 
 function quotedUnion(options: readonly string[]): string {
-  return options.map(option => `'${option}'`).join(' | ');
+  return options.map(option => `'${option}'`).join(' | ')
 }
 
 /**
  * Validate the images/assetPrefix portions of a next.config object. Returns
  * Next's exact error strings (empty array when valid).
  */
-export function collectImagesConfigErrors(
-  config: Record<string, unknown>,
-  root: string,
-): string[] {
-  const errors: string[] = [];
+export function collectImagesConfigErrors(config: Record<string, unknown>, root: string): string[] {
+  const errors: string[] = []
 
-  const assetPrefix = config.assetPrefix;
+  const assetPrefix = config.assetPrefix
   if (typeof assetPrefix === 'string' && assetPrefix !== '' && !assetPrefix.startsWith('/')) {
     try {
-      new URL(assetPrefix);
+      new URL(assetPrefix)
     } catch {
       // Bun's URL error text differs from Node's; emit Node's exact phrasing.
-      errors.push('Invalid assetPrefix provided. Original error: TypeError: Invalid URL');
+      errors.push('Invalid assetPrefix provided. Original error: TypeError: Invalid URL')
     }
   }
 
-  const images = config.images;
-  if (images === undefined || images === null) return errors;
+  const images = config.images
+  if (images === undefined || images === null) return errors
   if (typeof images !== 'object' || Array.isArray(images)) {
-    errors.push(`Expected object, received ${received(images)} at "images"`);
-    return errors;
+    errors.push(`Expected object, received ${received(images)} at "images"`)
+    return errors
   }
-  const img = images as Record<string, unknown>;
+  const img = images as Record<string, unknown>
 
-  validateSizeArray(errors, img.deviceSizes, 'images.deviceSizes');
-  validateSizeArray(errors, img.imageSizes, 'images.imageSizes');
+  validateSizeArray(errors, img.deviceSizes, 'images.deviceSizes')
+  validateSizeArray(errors, img.imageSizes, 'images.imageSizes')
 
   if (img.domains !== undefined) {
     if (!Array.isArray(img.domains)) {
-      errors.push(`Expected array, received ${received(img.domains)} at "images.domains"`);
+      errors.push(`Expected array, received ${received(img.domains)} at "images.domains"`)
     } else if (img.domains.length > 50) {
-      errors.push('Array must contain at most 50 element(s) at "images.domains"');
+      errors.push('Array must contain at most 50 element(s) at "images.domains"')
     }
   }
 
   if (img.qualities !== undefined) {
     if (!Array.isArray(img.qualities)) {
-      errors.push(`Expected array, received ${received(img.qualities)} at "images.qualities"`);
+      errors.push(`Expected array, received ${received(img.qualities)} at "images.qualities"`)
     } else {
       if (img.qualities.length < 1) {
-        errors.push('Array must contain at least 1 element(s) at "images.qualities"');
+        errors.push('Array must contain at least 1 element(s) at "images.qualities"')
       }
       if (img.qualities.length > 20) {
-        errors.push('Array must contain at most 20 element(s) at "images.qualities"');
+        errors.push('Array must contain at most 20 element(s) at "images.qualities"')
       }
       img.qualities.forEach((quality, index) => {
         if (typeof quality !== 'number') {
           errors.push(
             `Expected number, received ${received(quality)} at "images.qualities[${index}]"`,
-          );
+          )
         } else if (!Number.isInteger(quality)) {
-          errors.push(`Expected integer, received float at "images.qualities[${index}]"`);
+          errors.push(`Expected integer, received float at "images.qualities[${index}]"`)
         } else if (quality < 1) {
-          errors.push(
-            `Number must be greater than or equal to 1 at "images.qualities[${index}]"`,
-          );
+          errors.push(`Number must be greater than or equal to 1 at "images.qualities[${index}]"`)
         } else if (quality > 100) {
-          errors.push(
-            `Number must be less than or equal to 100 at "images.qualities[${index}]"`,
-          );
+          errors.push(`Number must be less than or equal to 100 at "images.qualities[${index}]"`)
         }
-      });
+      })
     }
   }
 
@@ -104,22 +97,22 @@ export function collectImagesConfigErrors(
     if (!Array.isArray(img.localPatterns)) {
       errors.push(
         `Expected array, received ${received(img.localPatterns)} at "images.localPatterns"`,
-      );
+      )
     } else {
       if (img.localPatterns.length > 25) {
-        errors.push('Array must contain at most 25 element(s) at "images.localPatterns"');
+        errors.push('Array must contain at most 25 element(s) at "images.localPatterns"')
       }
       img.localPatterns.forEach((pattern, index) => {
-        if (!pattern || typeof pattern !== 'object') return;
+        if (!pattern || typeof pattern !== 'object') return
         const unknown = Object.keys(pattern as Record<string, unknown>).filter(
           key => !LOCAL_PATTERN_KEYS.has(key),
-        );
+        )
         if (unknown.length > 0) {
           errors.push(
             `Unrecognized key(s) in object: ${unknown.map(key => `'${key}'`).join(', ')} at "images.localPatterns[${index}]"`,
-          );
+          )
         }
-      });
+      })
     }
   }
 
@@ -127,40 +120,38 @@ export function collectImagesConfigErrors(
     if (!Array.isArray(img.remotePatterns)) {
       errors.push(
         `Expected array, received ${received(img.remotePatterns)} at "images.remotePatterns"`,
-      );
+      )
     } else {
       if (img.remotePatterns.length > 50) {
-        errors.push('Array must contain at most 50 element(s) at "images.remotePatterns"');
+        errors.push('Array must contain at most 50 element(s) at "images.remotePatterns"')
       }
       img.remotePatterns.forEach((pattern, index) => {
         if (pattern instanceof URL) {
-          const protocol = pattern.protocol.replace(/:$/, '');
+          const protocol = pattern.protocol.replace(/:$/, '')
           if (protocol !== 'http' && protocol !== 'https') {
             errors.push(
               `Specified images.remotePatterns must have protocol "http" or "https" received "${protocol}"`,
-            );
+            )
           }
-          return;
+          return
         }
         if (!pattern || typeof pattern !== 'object') {
           errors.push(
             `Expected object, received ${received(pattern)} at "images.remotePatterns[${index}]"`,
-          );
-          return;
+          )
+          return
         }
-        const obj = pattern as Record<string, unknown>;
-        const unknown = Object.keys(obj).filter(key => !REMOTE_PATTERN_KEYS.has(key));
+        const obj = pattern as Record<string, unknown>
+        const unknown = Object.keys(obj).filter(key => !REMOTE_PATTERN_KEYS.has(key))
         if (unknown.length > 0) {
           errors.push(
             `Unrecognized key(s) in object: ${unknown.map(key => `'${key}'`).join(', ')} at "images.remotePatterns[${index}]"`,
-          );
+          )
         }
         if (typeof obj.hostname !== 'string') {
-          errors.push(
-            `"images.remotePatterns[${index}].hostname" is missing, expected string`,
-          );
+          errors.push(`"images.remotePatterns[${index}].hostname" is missing, expected string`)
         }
-      });
+      })
     }
   }
 
@@ -168,18 +159,18 @@ export function collectImagesConfigErrors(
     if (typeof img.loader !== 'string' || !LOADERS.includes(img.loader as never)) {
       errors.push(
         `Expected ${quotedUnion(LOADERS)}, received '${received(img.loader) === 'string' ? (img.loader as string) : received(img.loader)}' at "images.loader"`,
-      );
+      )
     } else if (img.loader !== 'default' && img.loader !== 'custom') {
-      const loader = img.loader;
+      const loader = img.loader
       if (typeof img.path !== 'string' || img.path === '' || img.path === '/_next/image') {
         errors.push(
           `Specified images.loader property (${loader}) also requires images.path property to be assigned to a URL prefix.`,
-        );
+        )
       }
       if (typeof img.loaderFile === 'string' && img.loaderFile !== '') {
         errors.push(
           `Specified images.loader property (${loader}) cannot be used with images.loaderFile property. Please set images.loader to "custom".`,
-        );
+        )
       }
     }
   }
@@ -189,28 +180,28 @@ export function collectImagesConfigErrors(
     // absolute filesystem path — resolve it against the config root.
     const absolute = img.loaderFile.startsWith('/')
       ? path.join(root, img.loaderFile)
-      : path.resolve(root, img.loaderFile);
+      : path.resolve(root, img.loaderFile)
     if (!fs.existsSync(absolute)) {
-      errors.push(`Specified images.loaderFile does not exist at "${absolute}".`);
+      errors.push(`Specified images.loaderFile does not exist at "${absolute}".`)
     } else if (!hasDefaultExport(absolute)) {
       errors.push(
         'images.loaderFile detected but the file is missing default export.\n' +
           'Read more: https://nextjs.org/docs/messages/invalid-images-config',
-      );
+      )
     }
   }
 
   if (img.formats !== undefined) {
     if (!Array.isArray(img.formats)) {
-      errors.push(`Expected array, received ${received(img.formats)} at "images.formats"`);
+      errors.push(`Expected array, received ${received(img.formats)} at "images.formats"`)
     } else {
       img.formats.forEach((format, index) => {
         if (!FORMATS.includes(format as never)) {
           errors.push(
             `Expected ${quotedUnion(FORMATS)}, received '${String(format)}' at "images.formats[${index}]"`,
-          );
+          )
         }
-      });
+      })
     }
   }
 
@@ -220,50 +211,50 @@ export function collectImagesConfigErrors(
   ) {
     errors.push(
       `Expected ${quotedUnion(DISPOSITIONS)}, received '${typeof img.contentDispositionType === 'string' ? img.contentDispositionType : received(img.contentDispositionType)}' at "images.contentDispositionType"`,
-    );
+    )
   }
 
   if (img.contentSecurityPolicy !== undefined && typeof img.contentSecurityPolicy !== 'string') {
     errors.push(
       `Expected string, received ${received(img.contentSecurityPolicy)} at "images.contentSecurityPolicy"`,
-    );
+    )
   }
 
   if (img.minimumCacheTTL !== undefined) {
     if (typeof img.minimumCacheTTL !== 'number') {
       errors.push(
         `Expected number, received ${received(img.minimumCacheTTL)} at "images.minimumCacheTTL"`,
-      );
+      )
     } else if (img.minimumCacheTTL < 0) {
-      errors.push('Number must be greater than or equal to 0 at "images.minimumCacheTTL"');
+      errors.push('Number must be greater than or equal to 0 at "images.minimumCacheTTL"')
     }
   }
 
   for (const key of ['dangerouslyAllowSVG', 'unoptimized', 'disableStaticImages'] as const) {
     if (img[key] !== undefined && typeof img[key] !== 'boolean') {
-      errors.push(`Expected boolean, received ${received(img[key])} at "images.${key}"`);
+      errors.push(`Expected boolean, received ${received(img[key])} at "images.${key}"`)
     }
   }
 
-  return errors;
+  return errors
 }
 
 function validateSizeArray(errors: string[], value: unknown, label: string): void {
-  if (value === undefined) return;
+  if (value === undefined) return
   if (!Array.isArray(value)) {
-    errors.push(`Expected array, received ${received(value)} at "${label}"`);
-    return;
+    errors.push(`Expected array, received ${received(value)} at "${label}"`)
+    return
   }
   if (value.length > 25) {
-    errors.push(`Array must contain at most 25 element(s) at "${label}"`);
+    errors.push(`Array must contain at most 25 element(s) at "${label}"`)
   }
   value.forEach((size, index) => {
     if (typeof size !== 'number') {
-      errors.push(`Expected number, received ${received(size)} at "${label}[${index}]"`);
+      errors.push(`Expected number, received ${received(size)} at "${label}[${index}]"`)
     } else if (size < 1) {
-      errors.push(`Number must be greater than or equal to 1 at "${label}[${index}]"`);
+      errors.push(`Number must be greater than or equal to 1 at "${label}[${index}]"`)
     } else if (size > 10000) {
-      errors.push(`Number must be less than or equal to 10000 at "${label}[${index}]"`);
+      errors.push(`Number must be less than or equal to 10000 at "${label}[${index}]"`)
     }
-  });
+  })
 }

package/src/compat/next/image.tsx

@@ -1,17 +1,17 @@
-import { registerResourceHint } from '../../render/resource-hints';
-import { forwardRef } from 'preact/compat';
-import ClientImage from './image-client';
-import { getImagesConfig, resolveImageProps } from './image-props';
-import type { ImageProps } from './image-props';
+import { registerResourceHint } from '../../render/resource-hints'
+import { forwardRef } from 'preact/compat'
+import ClientImage from './image/client'
+import { getImagesConfig, resolveImageProps } from './image/props'
+import type { ImageProps } from './image/props'
 
 const Image = forwardRef<HTMLImageElement, ImageProps>(function Image(imageProps, forwardedRef) {
-  const config = getImagesConfig();
-  const { props, meta } = resolveImageProps(imageProps, config);
+  const config = getImagesConfig()
+  const { props, meta } = resolveImageProps(imageProps, config)
   const extra = imageProps as ImageProps & {
-    crossOrigin?: string;
-    referrerPolicy?: string;
-    fetchPriority?: string;
-  };
+    crossOrigin?: string
+    referrerPolicy?: string
+    fetchPriority?: string
+  }
 
   if (meta.preload) {
     registerResourceHint({
@@ -25,7 +25,7 @@ const Image = forwardRef<HTMLImageElement, ImageProps>(function Image(imageProps
         ...(extra.referrerPolicy ? { referrerpolicy: extra.referrerPolicy } : {}),
         ...(extra.fetchPriority ? { fetchpriority: extra.fetchPriority } : {}),
       },
-    });
+    })
   }
 
   if (!process.browser && typeof window === 'undefined') {
@@ -40,17 +40,13 @@ const Image = forwardRef<HTMLImageElement, ImageProps>(function Image(imageProps
         {...(meta.loadedStyle !== undefined ? { 'data-nimg-ph': meta.loadedStyle } : {})}
         ref={forwardedRef}
       />
-    );
+    )
   }
 
-  return <ClientImage {...imageProps} ref={forwardedRef} __pnextConfig={config} />;
-});
+  return <ClientImage {...imageProps} ref={forwardedRef} __pnextConfig={config} />
+})
 
-export default Image;
-export { Image };
-export {
-  findClosestQuality,
-  getImageProps,
-  unstable_getImgProps,
-} from './image-props';
-export type { ImageLoader, ImageProps, StaticImageData } from './image-props';
+export default Image
+export { Image }
+export { findClosestQuality, getImageProps, unstable_getImgProps } from './image/props'
+export type { ImageLoader, ImageProps, StaticImageData } from './image/props'

package/src/compat/next/index.ts

@@ -1 +1 @@
-export type { Metadata, MetadataLink, Viewport } from '../../types';
+export type { Metadata, MetadataLink, Viewport } from '../../types'

package/src/compat/next/legacy-image.tsx

@@ -1,7 +1,7 @@
-import { forwardRef } from 'preact/compat';
-import { registerResourceHint } from '../../render/resource-hints';
-import { getImagesConfig, resolveImageProps } from './image-props';
-import type { ImageProps } from './image-props';
+import { forwardRef } from 'preact/compat'
+import { registerResourceHint } from '../../render/resource-hints'
+import { getImagesConfig, resolveImageProps } from './image/props'
+import type { ImageProps } from './image/props'
 
 // next/legacy/image (the pre-13 component).
 //
@@ -18,9 +18,9 @@ import type { ImageProps } from './image-props';
 // still maps to the same styles next/image applies and lands in `data-nimg`.
 
 const EMPTY_DATA_URL =
-  'data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7';
+  'data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7'
 
-const LEGACY_SRC_ATTR = 'data-pnext-legacy-src';
+const LEGACY_SRC_ATTR = 'data-pnext-legacy-src'
 
 // Swaps every blanked legacy image to its real attributes when it nears the
 // viewport (falling back to an immediate swap without IntersectionObserver).
@@ -35,63 +35,62 @@ const LAZY_SWAP_SCRIPT =
   `if(!("IntersectionObserver"in window)){for(i=0;i<l.length;i++)s(l[i]);return}` +
   `var o=new IntersectionObserver(function(es){for(var k=0;k<es.length;k++){if(es[k].isIntersecting){s(es[k].target);o.unobserve(es[k].target)}}},{rootMargin:"200px"});` +
   `for(i=0;i<l.length;i++)o.observe(l[i])}` +
-  `if(document.readyState==="loading")document.addEventListener("DOMContentLoaded",b);else b()}catch(e){}}());`;
+  `if(document.readyState==="loading")document.addEventListener("DOMContentLoaded",b);else b()}catch(e){}}());`
 
-const LegacyImage = forwardRef<HTMLImageElement, ImageProps>(function LegacyImage(
-  imageProps,
-  forwardedRef,
-) {
-  const config = getImagesConfig();
-  // `intrinsic` is the legacy default layout (next/image has no default).
-  const layout = imageProps.layout ?? 'intrinsic';
-  const { props, meta } = resolveImageProps({ ...imageProps, layout }, config);
+const LegacyImage = forwardRef<HTMLImageElement, ImageProps>(
+  function LegacyImage(imageProps, forwardedRef) {
+    const config = getImagesConfig()
+    // `intrinsic` is the legacy default layout (next/image has no default).
+    const layout = imageProps.layout ?? 'intrinsic'
+    const { props, meta } = resolveImageProps({ ...imageProps, layout }, config)
 
-  if (meta.preload) {
-    registerResourceHint({
-      rel: 'preload',
-      as: 'image',
-      ...(meta.imgAttributes.srcSet ? {} : { url: meta.imgAttributes.src }),
-      attributes: {
-        ...(meta.imgAttributes.srcSet ? { imagesrcset: meta.imgAttributes.srcSet } : {}),
-        ...(meta.imgAttributes.sizes ? { imagesizes: meta.imgAttributes.sizes } : {}),
-      },
-    });
-  }
+    if (meta.preload) {
+      registerResourceHint({
+        rel: 'preload',
+        as: 'image',
+        ...(meta.imgAttributes.srcSet ? {} : { url: meta.imgAttributes.src }),
+        attributes: {
+          ...(meta.imgAttributes.srcSet ? { imagesrcset: meta.imgAttributes.srcSet } : {}),
+          ...(meta.imgAttributes.sizes ? { imagesizes: meta.imgAttributes.sizes } : {}),
+        },
+      })
+    }
 
-  const eager = props.loading === 'eager' || Boolean(imageProps.priority);
-  const nimgAttrs = {
-    'data-nimg': layout,
-    ...(meta.loadedStyle !== undefined ? { 'data-nimg-ph': meta.loadedStyle } : {}),
-  };
+    const eager = props.loading === 'eager' || Boolean(imageProps.priority)
+    const nimgAttrs = {
+      'data-nimg': layout,
+      ...(meta.loadedStyle !== undefined ? { 'data-nimg-ph': meta.loadedStyle } : {}),
+    }
 
-  // On the client the component renders its real attributes directly — the
-  // browser's own `loading="lazy"` covers deferral there.
-  if (eager || (process.browser || typeof window !== 'undefined')) {
-    return <img {...props} {...nimgAttrs} ref={forwardedRef} />;
-  }
+    // On the client the component renders its real attributes directly — the
+    // browser's own `loading="lazy"` covers deferral there.
+    if (eager || process.browser || typeof window !== 'undefined') {
+      return <img {...props} {...nimgAttrs} ref={forwardedRef} />
+    }
 
-  const { src, srcSet, sizes, ...blanked } = props;
-  return (
-    <>
-      <img
-        {...blanked}
-        src={EMPTY_DATA_URL}
-        loading="lazy"
-        {...nimgAttrs}
-        {...(typeof src === 'string' ? { [LEGACY_SRC_ATTR]: src } : {})}
-        {...(typeof srcSet === 'string' ? { [`${LEGACY_SRC_ATTR}set`]: srcSet } : {})}
-        {...(typeof sizes === 'string' ? { [`${LEGACY_SRC_ATTR}sizes`]: sizes } : {})}
-        ref={forwardedRef}
-      />
-      <noscript>
-        <img {...props} loading="lazy" {...nimgAttrs} />
-      </noscript>
-      <script dangerouslySetInnerHTML={{ __html: LAZY_SWAP_SCRIPT }} />
-    </>
-  );
-});
+    const { src, srcSet, sizes, ...blanked } = props
+    return (
+      <>
+        <img
+          {...blanked}
+          src={EMPTY_DATA_URL}
+          loading="lazy"
+          {...nimgAttrs}
+          {...(typeof src === 'string' ? { [LEGACY_SRC_ATTR]: src } : {})}
+          {...(typeof srcSet === 'string' ? { [`${LEGACY_SRC_ATTR}set`]: srcSet } : {})}
+          {...(typeof sizes === 'string' ? { [`${LEGACY_SRC_ATTR}sizes`]: sizes } : {})}
+          ref={forwardedRef}
+        />
+        <noscript>
+          <img {...props} loading="lazy" {...nimgAttrs} />
+        </noscript>
+        <script dangerouslySetInnerHTML={{ __html: LAZY_SWAP_SCRIPT }} />
+      </>
+    )
+  },
+)
 
-export default LegacyImage;
-export { LegacyImage as Image };
-export { getImageProps, unstable_getImgProps } from './image-props';
-export type { ImageLoader, ImageProps, StaticImageData } from './image-props';
+export default LegacyImage
+export { LegacyImage as Image }
+export { getImageProps, unstable_getImgProps } from './image/props'
+export type { ImageLoader, ImageProps, StaticImageData } from './image/props'