@wular/pnext 0.0.4 → 0.0.7

package/src/compat/next/headers.ts

@@ -4,18 +4,18 @@ import {
   getWorkUnit,
   requireRequest,
   requestApiPromise,
-} from '../../request/context';
-import type { NextRequestCookies } from '../../types';
+} from '../../request/context'
+import type { NextRequestCookies } from '../../types'
 import {
   assertDraftModeToggleAllowedInAfter,
   assertRequestApiAllowedInAfter,
   lifecycleError,
-} from '../lifecycle/after-scope';
-import { assertNoDynamicApiInsideCache, currentRenderCacheMeta } from '../cache/revalidate';
+} from '../lifecycle/after-scope'
+import { assertNoDynamicApiInsideCache, currentRenderCacheMeta } from '../cache/revalidate'
 
 const COOKIE_MUTATION_ERROR =
   'Cookies can only be modified in a Server Action or Route Handler. ' +
-  'Read more: https://nextjs.org/docs/app/api-reference/functions/cookies#options';
+  'Read more: https://nextjs.org/docs/app/api-reference/functions/cookies#options'
 
 /**
  * Cookie writes are only legal while the request is executing a Server Action or a Route Handler. Every
@@ -27,15 +27,15 @@ const COOKIE_MUTATION_ERROR =
  * instead; an action sets phase 'action' explicitly. Outside any work unit mutation is left alone.
  */
 function assertCookieMutationAllowed(): void {
-  const unit = getWorkUnit();
-  if (!unit) return;
-  if (unit.phase === 'action') return;
-  if (unit.phase !== 'after' && unit.routeKind === 'route-handler') return;
-  throw new Error(COOKIE_MUTATION_ERROR);
+  const unit = getWorkUnit()
+  if (!unit) return
+  if (unit.phase === 'action') return
+  if (unit.phase !== 'after' && unit.routeKind === 'route-handler') return
+  throw new Error(COOKIE_MUTATION_ERROR)
 }
 
 const HEADERS_MUTATION_ERROR =
-  'Headers cannot be modified. Read more: https://nextjs.org/docs/app/api-reference/functions/headers';
+  'Headers cannot be modified. Read more: https://nextjs.org/docs/app/api-reference/functions/headers'
 
 /**
  * headers() exposes the REQUEST headers, which Next makes read-only: append(), set() and delete() throw
@@ -47,35 +47,37 @@ function readonlyHeaders(source: Headers): Headers {
     get(target, prop) {
       if (prop === 'append' || prop === 'set' || prop === 'delete') {
         return () => {
-          throw new Error(HEADERS_MUTATION_ERROR);
-        };
+          throw new Error(HEADERS_MUTATION_ERROR)
+        }
       }
-      if (prop === 'getSetCookie') return () => [];
-      const value: unknown = Reflect.get(target, prop, target);
-      return typeof value === 'function' ? (value as (...args: unknown[]) => unknown).bind(target) : value;
+      if (prop === 'getSetCookie') return () => []
+      const value: unknown = Reflect.get(target, prop, target)
+      return typeof value === 'function'
+        ? (value as (...args: unknown[]) => unknown).bind(target)
+        : value
     },
-  });
+  })
 }
 
 export function headers() {
-  assertRequestApiAllowedInAfter('headers()');
-  assertDynamicErrorRequestApi('headers()');
-  assertNoDynamicApiInsideCache('headers()');
+  assertRequestApiAllowedInAfter('headers()')
+  assertDynamicErrorRequestApi('headers()')
+  assertNoDynamicApiInsideCache('headers()')
   return requestApiPromise('headers()', () =>
     readonlyHeaders(new Headers(requireRequest('headers()').headers)),
-  );
+  )
 }
 
 export interface CookieSetOptions {
-  name?: string;
-  value?: string;
-  path?: string;
-  maxAge?: number;
-  expires?: Date | number;
-  httpOnly?: boolean;
-  secure?: boolean;
-  sameSite?: 'strict' | 'lax' | 'none' | boolean;
-  domain?: string;
+  name?: string
+  value?: string
+  path?: string
+  maxAge?: number
+  expires?: Date | number
+  httpOnly?: boolean
+  secure?: boolean
+  sameSite?: 'strict' | 'lax' | 'none' | boolean
+  domain?: string
 }
 
 /**
@@ -86,75 +88,81 @@ export interface CookieSetOptions {
  * set({ name, value, ...options }).
  */
 export function cookies() {
-  assertRequestApiAllowedInAfter('cookies()');
-  assertDynamicErrorRequestApi('cookies()');
-  assertNoDynamicApiInsideCache('cookies()');
-  return requestApiPromise('cookies()', () => wrapCookieJar(requireRequest('cookies()').cookies));
+  assertRequestApiAllowedInAfter('cookies()')
+  assertDynamicErrorRequestApi('cookies()')
+  assertNoDynamicApiInsideCache('cookies()')
+  return requestApiPromise('cookies()', () => wrapCookieJar(requireRequest('cookies()').cookies))
 }
 
-export function assertDynamicErrorRequestApi(api: 'headers()' | 'cookies()' | 'connection()'): void {
-  const meta = currentRenderCacheMeta();
-  if (!meta?.dynamicError) return;
+export function assertDynamicErrorRequestApi(
+  api: 'headers()' | 'cookies()' | 'connection()',
+): void {
+  const meta = currentRenderCacheMeta()
+  if (!meta?.dynamicError) return
   throw lifecycleError(
     `Route ${meta.route ?? ''} with \`dynamic = "error"\` couldn't be rendered statically because it used \`${api}\`.`,
-  );
+  )
 }
 
 function wrapCookieJar(jar: NextRequestCookies) {
   return {
     get: (name: CookieNameArg) => jar.get(cookieName(name)),
-    getAll: (name?: CookieNameArg) => (name === undefined ? jar.getAll() : jar.getAll(cookieName(name))),
+    getAll: (name?: CookieNameArg) =>
+      name === undefined ? jar.getAll() : jar.getAll(cookieName(name)),
     has: (name: CookieNameArg) => jar.has(cookieName(name)),
     get size() {
-      return jar.getAll().length;
+      return jar.getAll().length
     },
     [Symbol.iterator]() {
-      return jar.getAll().map(cookie => [cookie.name, cookie] as const)[Symbol.iterator]();
+      return jar
+        .getAll()
+        .map(cookie => [cookie.name, cookie] as const)
+        [Symbol.iterator]()
     },
     set(nameOrOptions: string | CookieSetOptions, value?: unknown, options?: CookieSetOptions) {
-      assertCookieMutationAllowed();
-      const parsed = normalizeSetArgs(nameOrOptions, value, options);
-      jar.set(parsed.name, parsed.value);
-      currentResponseHeaders()?.append('set-cookie', serializeSetCookie(parsed));
-      return this;
+      assertCookieMutationAllowed()
+      const parsed = normalizeSetArgs(nameOrOptions, value, options)
+      jar.set(parsed.name, parsed.value)
+      currentResponseHeaders()?.append('set-cookie', serializeSetCookie(parsed))
+      return this
     },
     delete(name: CookieNameArg) {
-      assertCookieMutationAllowed();
-      const resolved = cookieName(name);
-      const existed = jar.delete(resolved);
+      assertCookieMutationAllowed()
+      const resolved = cookieName(name)
+      const existed = jar.delete(resolved)
       currentResponseHeaders()?.append(
         'set-cookie',
         serializeSetCookie({ name: resolved, value: '', path: '/', maxAge: 0 }),
-      );
-      return existed;
+      )
+      return existed
     },
     clear() {
-      for (const cookie of jar.getAll()) this.delete(cookie.name);
-      return this;
+      for (const cookie of jar.getAll()) this.delete(cookie.name)
+      return this
     },
     toString() {
       return jar
         .getAll()
         .map(cookie => `${cookie.name}=${encodeURIComponent(cookie.value)}`)
-        .join('; ');
+        .join('; ')
     },
-  };
+  }
 }
 
 interface NormalizedCookie extends CookieSetOptions {
-  name: string;
-  value: string;
+  name: string
+  value: string
 }
 
 /**
  * Next's RequestCookies accessors take a name OR a cookie-shaped object, so
  * `cookies().get({ name: 'x', value: undefined })` reads the same entry as `cookies().get('x')`.
  */
-type CookieNameArg = string | { name?: string };
+type CookieNameArg = string | { name?: string }
 
 function cookieName(arg: CookieNameArg): string {
-  if (typeof arg === 'string') return arg;
-  return typeof arg?.name === 'string' ? arg.name : '';
+  if (typeof arg === 'string') return arg
+  return typeof arg?.name === 'string' ? arg.name : ''
 }
 
 function normalizeSetArgs(
@@ -163,85 +171,85 @@ function normalizeSetArgs(
   options?: CookieSetOptions,
 ): NormalizedCookie {
   if (typeof nameOrOptions === 'string') {
-    return { ...(options ?? {}), name: nameOrOptions, value: stringifyCookieValue(value) };
+    return { ...(options ?? {}), name: nameOrOptions, value: stringifyCookieValue(value) }
   }
   return {
     ...nameOrOptions,
     name: String(nameOrOptions.name ?? ''),
     value: String(nameOrOptions.value ?? ''),
-  };
+  }
 }
 
 function stringifyCookieValue(raw: unknown): string {
-  if (raw === undefined || raw === null) return '';
-  if (typeof raw === 'string') return raw;
+  if (raw === undefined || raw === null) return ''
+  if (typeof raw === 'string') return raw
   if (typeof raw === 'number' || typeof raw === 'boolean' || typeof raw === 'bigint') {
-    return String(raw);
+    return String(raw)
   }
-  return JSON.stringify(raw) ?? '';
+  return JSON.stringify(raw) ?? ''
 }
 
 function serializeSetCookie(cookie: NormalizedCookie): string {
-  const parts = [`${cookie.name}=${encodeURIComponent(cookie.value)}`];
-  parts.push(`Path=${cookie.path ?? '/'}`);
-  if (cookie.maxAge !== undefined) parts.push(`Max-Age=${cookie.maxAge}`);
+  const parts = [`${cookie.name}=${encodeURIComponent(cookie.value)}`]
+  parts.push(`Path=${cookie.path ?? '/'}`)
+  if (cookie.maxAge !== undefined) parts.push(`Max-Age=${cookie.maxAge}`)
   if (cookie.expires !== undefined) {
-    const date = cookie.expires instanceof Date ? cookie.expires : new Date(cookie.expires);
-    parts.push(`Expires=${date.toUTCString()}`);
+    const date = cookie.expires instanceof Date ? cookie.expires : new Date(cookie.expires)
+    parts.push(`Expires=${date.toUTCString()}`)
   }
-  if (cookie.domain) parts.push(`Domain=${cookie.domain}`);
-  if (cookie.httpOnly) parts.push('HttpOnly');
-  if (cookie.secure) parts.push('Secure');
+  if (cookie.domain) parts.push(`Domain=${cookie.domain}`)
+  if (cookie.httpOnly) parts.push('HttpOnly')
+  if (cookie.secure) parts.push('Secure')
   if (cookie.sameSite) {
-    const value = cookie.sameSite === true ? 'Strict' : capitalize(cookie.sameSite);
-    parts.push(`SameSite=${value}`);
+    const value = cookie.sameSite === true ? 'Strict' : capitalize(cookie.sameSite)
+    parts.push(`SameSite=${value}`)
   }
-  return parts.join('; ');
+  return parts.join('; ')
 }
 
 function capitalize(value: string) {
-  return value.charAt(0).toUpperCase() + value.slice(1);
+  return value.charAt(0).toUpperCase() + value.slice(1)
 }
 
-const draftCookieName = '__prerender_bypass';
+const draftCookieName = '__prerender_bypass'
 
 export interface DraftMode {
-  readonly isEnabled: boolean;
-  enable(): void;
-  disable(): void;
+  readonly isEnabled: boolean
+  enable(): void
+  disable(): void
 }
 
 export function draftMode(): Promise<DraftMode> {
   // Unlike cookies()/headers(), draftMode() never opts a page into dynamic
   // rendering: during build/partial prerender there is no (real) request and
   // draft is simply off, so reading isEnabled must not postpone or throw.
-  const request = currentRequest();
-  const requestCookies = request?.cookies;
+  const request = currentRequest()
+  const requestCookies = request?.cookies
   return Promise.resolve({
     get isEnabled() {
-      return requestCookies?.has(draftCookieName) ?? false;
+      return requestCookies?.has(draftCookieName) ?? false
     },
     enable() {
-      assertDraftModeToggleAllowedInAfter('enable');
-      const cookies = requireRequest('draftMode().enable()').cookies;
-      const value = cookies.get(draftCookieName)?.value || bypassToken();
-      cookies.set(draftCookieName, value);
+      assertDraftModeToggleAllowedInAfter('enable')
+      const cookies = requireRequest('draftMode().enable()').cookies
+      const value = cookies.get(draftCookieName)?.value || bypassToken()
+      cookies.set(draftCookieName, value)
       currentResponseHeaders()?.append(
         'set-cookie',
         `${draftCookieName}=${value}; Path=/; HttpOnly; SameSite=None; Secure`,
-      );
+      )
     },
     disable() {
-      assertDraftModeToggleAllowedInAfter('disable');
-      requireRequest('draftMode().disable()').cookies.delete(draftCookieName);
+      assertDraftModeToggleAllowedInAfter('disable')
+      requireRequest('draftMode().disable()').cookies.delete(draftCookieName)
       currentResponseHeaders()?.append(
         'set-cookie',
         `${draftCookieName}=; Path=/; Max-Age=0; HttpOnly; SameSite=None; Secure`,
-      );
+      )
     },
-  });
+  })
 }
 
 function bypassToken() {
-  return globalThis.crypto?.randomUUID?.().replace(/-/g, '') ?? Math.random().toString(36).slice(2);
+  return globalThis.crypto?.randomUUID?.().replace(/-/g, '') ?? Math.random().toString(36).slice(2)
 }

package/src/compat/next/image/client.tsx

@@ -0,0 +1,220 @@
+'use client'
+
+import {
+  forwardRef,
+  useCallback,
+  useEffect,
+  useLayoutEffect,
+  useRef,
+  useState,
+} from 'preact/compat'
+import type { Ref } from 'preact/compat'
+import type { JSX } from 'preact'
+import { getImagesConfig, resolveImageProps } from './props'
+import type { ImageProps, ResolvedImagesConfig } from './props'
+
+const useSettleEffect =
+  !process.browser && typeof window === 'undefined' ? useEffect : useLayoutEffect
+
+// The initial hydration pass, before the entry flips __NEXT_HYDRATED (a
+// microtask after the island mounts). Layout effects run inside it, so an image
+// seen here came from the server document — one rendered by a later client
+// update (a click) did not.
+function hydrating(): boolean {
+  return (
+    (process.browser || typeof window !== 'undefined') &&
+    !(window as { __NEXT_HYDRATED?: boolean }).__NEXT_HYDRATED
+  )
+}
+
+type OnLoad = NonNullable<ImageProps['onLoad']>
+type OnLoadingComplete = NonNullable<ImageProps['onLoadingComplete']>
+type ImageClientProps = ImageProps & { __pnextConfig?: ResolvedImagesConfig }
+
+function handleLoading(
+  img: HTMLImageElement | null,
+  placeholder: string,
+  onLoadRef: { current: OnLoad | undefined },
+  onLoadingCompleteRef: { current: OnLoadingComplete | undefined },
+  setBlurComplete: (b: boolean) => void,
+): void {
+  if (!img) return
+  const src = img.src
+  const marker = img as HTMLImageElement & { 'data-loaded-src'?: string }
+  if (marker['data-loaded-src'] === src) return
+  marker['data-loaded-src'] = src
+  const p = 'decode' in img ? img.decode() : Promise.resolve()
+  void p
+    .catch(() => undefined)
+    .then(() => {
+      if (!img.parentElement || !img.isConnected) return
+      if (placeholder !== 'empty') setBlurComplete(true)
+      if (onLoadRef.current) {
+        const event = new Event('load')
+        Object.defineProperty(event, 'target', { writable: false, value: img })
+        let prevented = false
+        let stopped = false
+        onLoadRef.current({
+          ...(event as unknown as Record<string, unknown>),
+          nativeEvent: event,
+          currentTarget: img,
+          target: img,
+          isDefaultPrevented: () => prevented,
+          isPropagationStopped: () => stopped,
+          persist: () => undefined,
+          preventDefault: () => {
+            prevented = true
+            event.preventDefault()
+          },
+          stopPropagation: () => {
+            stopped = true
+            event.stopPropagation()
+          },
+        } as unknown as JSX.TargetedEvent<HTMLImageElement, Event>)
+      }
+      if (onLoadingCompleteRef.current) onLoadingCompleteRef.current(img)
+    })
+}
+
+function useMergedRef<T>(
+  refA: Ref<T> | undefined,
+  refB: Ref<T> | undefined,
+): (el: T | null) => void {
+  const cleanupA = useRef<(() => void) | null>(null)
+  const cleanupB = useRef<(() => void) | null>(null)
+  return useCallback(
+    (current: T | null) => {
+      if (current === null) {
+        cleanupA.current?.()
+        cleanupA.current = null
+        cleanupB.current?.()
+        cleanupB.current = null
+      } else {
+        if (refA) cleanupA.current = applyRef(refA, current)
+        if (refB) cleanupB.current = applyRef(refB, current)
+      }
+    },
+    [refA, refB],
+  )
+}
+
+function applyRef<T>(ref: NonNullable<Ref<T>>, current: T): () => void {
+  if (typeof ref === 'function') {
+    const cleanup = ref(current)
+    return typeof cleanup === 'function' ? cleanup : () => (ref as (v: T | null) => void)(null)
+  }
+  ;(ref as { current: T | null }).current = current
+  return () => {
+    ;(ref as { current: T | null }).current = null
+  }
+}
+
+const Image = forwardRef<HTMLImageElement, ImageClientProps>(function Image(
+  { __pnextConfig, ...imageProps },
+  forwardedRef,
+) {
+  const config = __pnextConfig ?? getImagesConfig()
+  const [blurComplete, setBlurComplete] = useState(false)
+  const [showAltText, setShowAltText] = useState(false)
+  const { props, meta } = resolveImageProps(imageProps, config, blurComplete, showAltText)
+
+  const { onLoad, onError, onLoadingComplete } = imageProps
+  const onLoadRef = useRef(onLoad)
+  useEffect(() => {
+    onLoadRef.current = onLoad
+  }, [onLoad])
+  const onLoadingCompleteRef = useRef(onLoadingComplete)
+  useEffect(() => {
+    onLoadingCompleteRef.current = onLoadingComplete
+  }, [onLoadingComplete])
+
+  const placeholder = meta.placeholder
+  const renderedSrc = typeof props.src === 'string' ? props.src : ''
+  const insertedImgRef = useRef<HTMLImageElement | null>(null)
+  const settledSrcRef = useRef<string | undefined>(undefined)
+  // True while an error the app must not see is outstanding: the server-rendered
+  // request that was already in flight when this component mounted. See below.
+  const swallowErrorRef = useRef(false)
+  useSettleEffect(() => {
+    const img = insertedImgRef.current
+    if (img === null || settledSrcRef.current === renderedSrc) return
+    settledSrcRef.current = renderedSrc
+    // An error on a server-rendered image happens before onError is attached,
+    // so it is lost — Next re-issues the request once at mount to surface it.
+    if (onError) {
+      if (img.complete) {
+        const currentSrc = img.src
+        img.src = currentSrc
+      } else if (hydrating()) {
+        // Same situation, mid-flight: the request started with the document,
+        // so its outcome still predates this mount. Swallow it and re-issue
+        // once it lands, so onError sees an error raised against this mount.
+        swallowErrorRef.current = true
+        img.addEventListener(
+          'error',
+          () => {
+            swallowErrorRef.current = false
+            const failedSrc = img.src
+            img.src = failedSrc
+          },
+          { once: true },
+        )
+      }
+    }
+    const settle = () =>
+      handleLoading(img, placeholder, onLoadRef, onLoadingCompleteRef, setBlurComplete)
+    if (img.complete) settle()
+  }, [renderedSrc, placeholder, onError])
+
+  const ref = useMergedRef<HTMLImageElement>(forwardedRef, insertedImgRef)
+  const extra = imageProps as unknown as {
+    crossOrigin?: string
+    referrerPolicy?: string
+    fetchPriority?: string
+  }
+  const preloadLink = meta.preload ? (
+    <link
+      rel="preload"
+      as="image"
+      href={meta.imgAttributes.srcSet ? undefined : meta.imgAttributes.src}
+      {...({
+        imagesrcset: meta.imgAttributes.srcSet,
+        imagesizes: meta.imgAttributes.sizes,
+        crossOrigin: extra.crossOrigin,
+        referrerPolicy: extra.referrerPolicy,
+        fetchpriority: extra.fetchPriority,
+      } as Record<string, unknown>)}
+    />
+  ) : null
+
+  return (
+    <>
+      {preloadLink}
+      <img
+        {...props}
+        data-nimg={meta.fill ? 'fill' : '1'}
+        ref={ref}
+        onLoad={event => {
+          handleLoading(
+            event.currentTarget,
+            placeholder,
+            onLoadRef,
+            onLoadingCompleteRef,
+            setBlurComplete,
+          )
+        }}
+        onError={event => {
+          setShowAltText(true)
+          if (placeholder !== 'empty') setBlurComplete(true)
+          // The pre-mount failure is re-issued by the settle effect; the app
+          // hears about the retry, not the request that predated its handler.
+          if (swallowErrorRef.current) return
+          onError?.(event)
+        }}
+      />
+    </>
+  )
+})
+
+export default Image
+export { Image }