@wular/pnext 0.0.4 → 0.0.7

package/src/compat/client/errors/control-flow.ts

@@ -20,9 +20,9 @@ import {
   isRedirectError,
   isUnauthorizedError,
   type PNextRedirectError,
-} from '../../../api/navigation';
-import { isPostpone } from '../../../ppr-postpone';
-import { softNavigate } from '../../../api/router';
+} from '../../../api/navigation'
+import { isPostpone } from '../../../render/postpone'
+import { softNavigate } from '../../../client/router'
 
 /** True for a Next control-flow error that a boundary must re-throw, not render. */
 export function isControlFlowError(error: unknown): boolean {
@@ -32,7 +32,7 @@ export function isControlFlowError(error: unknown): boolean {
     isForbiddenError(error) ||
     isUnauthorizedError(error) ||
     isPostpone(error)
-  );
+  )
 }
 
 /**
@@ -42,8 +42,8 @@ export function isControlFlowError(error: unknown): boolean {
  */
 export function handleControlFlowError(error: unknown): boolean {
   if (isRedirectError(error)) {
-    applyRedirect(error);
-    return true;
+    applyRedirect(error)
+    return true
   }
   if (isNotFoundError(error) || isForbiddenError(error) || isUnauthorizedError(error)) {
     // Re-render the current URL server-side: the same control-flow call fires
@@ -52,41 +52,41 @@ export function handleControlFlowError(error: unknown): boolean {
     // avoids a jump. Fall back to a full reload if the soft-nav itself fails.
     if (process.browser || typeof window !== 'undefined') {
       void softNavigate(location.href, { replace: true, scroll: false }).catch(() => {
-        location.reload();
-      });
+        location.reload()
+      })
     }
-    return true;
+    return true
   }
   if (isPostpone(error)) {
     // A postpone escaping to the client has nothing to resume against here; a
     // reload re-renders from the server. Treated as handled so it never lands
     // in an error boundary as a "real" error.
-    if (process.browser || typeof window !== 'undefined') location.reload();
-    return true;
+    if (process.browser || typeof window !== 'undefined') location.reload()
+    return true
   }
-  return false;
+  return false
 }
 
 function applyRedirect(error: PNextRedirectError): void {
-  if (!process.browser && typeof window === 'undefined') return;
-  const target = error.location;
-  let sameOrigin = false;
+  if (!process.browser && typeof window === 'undefined') return
+  const target = error.location
+  let sameOrigin = false
   try {
-    sameOrigin = new URL(target, location.href).origin === location.origin;
+    sameOrigin = new URL(target, location.href).origin === location.origin
   } catch {
-    sameOrigin = false;
+    sameOrigin = false
   }
-  const replace = error.status === 303 || error.status === 307 || error.status === 308;
+  const replace = error.status === 303 || error.status === 307 || error.status === 308
   if (sameOrigin) {
     void softNavigate(target, { replace }).catch(() => {
-      hardNavigate(target, replace);
-    });
+      hardNavigate(target, replace)
+    })
   } else {
-    hardNavigate(target, replace);
+    hardNavigate(target, replace)
   }
 }
 
 function hardNavigate(target: string, replace: boolean): void {
-  if (replace) location.replace(target);
-  else location.assign(target);
+  if (replace) location.replace(target)
+  else location.assign(target)
 }

package/src/compat/client/errors/error-boundary.ts

@@ -16,10 +16,10 @@
 //
 // When no route error component is available the boundary mounts global-error.
 
-import { Component, h, type ComponentChildren, type ComponentType } from 'preact';
-import { isControlFlowError, handleControlFlowError } from './control-flow';
-import { isNotFoundError } from '../../../api/navigation';
-import { normalizeBoundaryError } from './primitive-throw';
+import { Component, h, type ComponentChildren, type ComponentType } from 'preact'
+import { isControlFlowError, handleControlFlowError } from './control-flow'
+import { isNotFoundError } from '../../../api/navigation'
+import { normalizeBoundaryError } from './primitive-throw'
 
 // ---------------------------------------------------------------------------
 // KNOWN GAP (preact core, not fully fixable from an options hook): a CLIENT
@@ -30,25 +30,25 @@ import { normalizeBoundaryError } from './primitive-throw';
 // ---------------------------------------------------------------------------
 
 export type RouteErrorComponent = ComponentType<{
-  error: unknown;
-  reset: () => void;
-  unstable_retry?: () => void;
-}>;
-export type RouteNotFoundComponent = ComponentType<Record<string, never>>;
+  error: unknown
+  reset: () => void
+  unstable_retry?: () => void
+}>
+export type RouteNotFoundComponent = ComponentType<Record<string, never>>
 
 interface BoundaryProps {
   /** The route's nearest error.js component; when absent the boundary escalates. */
-  errorComponent?: RouteErrorComponent;
-  notFoundComponent?: RouteNotFoundComponent;
+  errorComponent?: RouteErrorComponent
+  notFoundComponent?: RouteNotFoundComponent
   /**
    * Next's default 404 UI, handed in by the generated runtime - and emitted by it ONLY when some route
    * can reach this fallback (no not-found.* of its own). An app whose boundary routes all have one
    * never ships error-ui.ts.
    */
-  builtInNotFound?: RouteNotFoundComponent;
+  builtInNotFound?: RouteNotFoundComponent
   /** Soft-refresh invoked by reset() after clearing the error. */
-  onReset?: () => void;
-  children?: unknown;
+  onReset?: () => void
+  children?: unknown
 }
 
 interface BoundaryState {
@@ -56,9 +56,9 @@ interface BoundaryState {
   // `null`/a string reaches error.js unwrapped (Next passes the raw value on the
   // client channel), so `hasError` — NOT truthiness of `error` — gates rendering:
   // a falsy `undefined`/`null` throw is still a caught error, not "no error".
-  error: unknown;
-  hasError: boolean;
-  notFound: boolean;
+  error: unknown
+  hasError: boolean
+  notFound: boolean
 }
 
 /**
@@ -67,9 +67,9 @@ interface BoundaryState {
  * is ever attached (digests are a server-error-only signal).
  */
 export function toClientError(value: unknown): Error {
-  if (value instanceof Error) return value;
+  if (value instanceof Error) return value
   // `throw undefined` / `throw null` / `throw 'msg'` → message is String(value).
-  return new Error(String(value));
+  return new Error(String(value))
 }
 
 // A boundary that catches (or escalates) a real error marks it here so the
@@ -77,47 +77,47 @@ export function toClientError(value: unknown): Error {
 // by the nearest-boundary path and must NOT also drive it to global-error.
 // WeakSet-keyed (only object throws are markable; a primitive throw that reaches
 // the window is treated as unhandled, matching "the boundary couldn't hold it").
-const handledErrors = new WeakSet<object>();
+const handledErrors = new WeakSet<object>()
 
 export function markErrorHandled(error: unknown): void {
-  if (error !== null && typeof error === 'object') handledErrors.add(error);
+  if (error !== null && typeof error === 'object') handledErrors.add(error)
 }
 
 export function wasErrorHandled(error: unknown): boolean {
-  return error !== null && typeof error === 'object' && handledErrors.has(error);
+  return error !== null && typeof error === 'object' && handledErrors.has(error)
 }
 
 export class ClientErrorBoundary extends Component<BoundaryProps, BoundaryState> {
-  state: BoundaryState = { error: null, hasError: false, notFound: false };
+  state: BoundaryState = { error: null, hasError: false, notFound: false }
 
   static getDerivedStateFromError(error: unknown): Partial<BoundaryState> {
-    if (isNotFoundError(error)) return { notFound: true, hasError: false, error: null };
+    if (isNotFoundError(error)) return { notFound: true, hasError: false, error: null }
     // Control-flow errors must not be captured as state — let componentDidCatch
     // re-throw so they propagate past this boundary.
-    if (isControlFlowError(error)) return {};
+    if (isControlFlowError(error)) return {}
     // Pass the RAW thrown value to error.js (no Error wrapping): a client
     // `throw undefined`/`null`/'msg' renders as `${error}` = 'undefined'/'null'/'msg'.
-    return { error: normalizeBoundaryError(error), hasError: true };
+    return { error: normalizeBoundaryError(error), hasError: true }
   }
 
   componentDidCatch(error: unknown): void {
     if (isNotFoundError(error)) {
-      markErrorHandled(error);
-      return;
+      markErrorHandled(error)
+      return
     }
     if (isControlFlowError(error)) {
       // Re-throw past this boundary: React/Next semantics for control errors.
       // The install layer's window handler catches the propagated error and
       // performs the navigation; we still throw so no error UI renders here.
-      handleControlFlowError(error);
-      throw error;
+      handleControlFlowError(error)
+      throw error
     }
     // A real error the boundary can render (it has a local error.js): mark it so the window-listener
     // last resort ignores it. When there is NO errorComponent this boundary re-throws in render()
     // instead of rendering anything - leave the error UNMARKED so an outer VDOM boundary can still
     // catch it, and so the window-listener last resort recognizes a truly-uncaught error and mounts
     // global-error.
-    if (this.props.errorComponent) markErrorHandled(error);
+    if (this.props.errorComponent) markErrorHandled(error)
   }
 
   /**
@@ -127,8 +127,8 @@ export class ClientErrorBoundary extends Component<BoundaryProps, BoundaryState>
    * holding one of those nodes (a click in flight, a test's element handle) loses it.
    */
   reset = (): void => {
-    this.setState({ error: null, hasError: false, notFound: false });
-  };
+    this.setState({ error: null, hasError: false, notFound: false })
+  }
 
   /**
    * Re-run the SERVER render, then re-render: recovers data-dependent failures. A CLIENT-component
@@ -138,59 +138,59 @@ export class ClientErrorBoundary extends Component<BoundaryProps, BoundaryState>
    * round trip.
    */
   unstable_retry = (): void => {
-    const digest = (this.state.error as { digest?: unknown } | null)?.digest;
-    this.setState({ error: null, hasError: false, notFound: false });
-    if (typeof digest === 'string' && digest.length > 0) this.props.onReset?.();
-  };
+    const digest = (this.state.error as { digest?: unknown } | null)?.digest
+    this.setState({ error: null, hasError: false, notFound: false })
+    if (typeof digest === 'string' && digest.length > 0) this.props.onReset?.()
+  }
 
   // A client-side notFound() that renders a LOCAL not-found.js has no server
   // round trip, so the `<meta name="robots" content="noindex">` the server
   // would emit for a not-found render is missing. Mirror it on the client:
   // inject the tag while the local boundary is showing, remove it on recovery.
-  private addedNoindex = false;
+  private addedNoindex = false
 
   private syncNotFoundRobots(): void {
-    if (typeof document === 'undefined') return;
-    const shouldShow = this.state.notFound && Boolean(this.props.notFoundComponent);
+    if (typeof document === 'undefined') return
+    const shouldShow = this.state.notFound && Boolean(this.props.notFoundComponent)
     if (shouldShow && !this.addedNoindex) {
       // Don't stomp an existing robots tag (SSR/metadata already set one).
       if (!document.querySelector('meta[name="robots"]')) {
-        const meta = document.createElement('meta');
-        meta.setAttribute('name', 'robots');
-        meta.setAttribute('content', 'noindex');
-        meta.setAttribute('data-pnext-notfound-robots', '');
-        document.head.appendChild(meta);
-        this.addedNoindex = true;
+        const meta = document.createElement('meta')
+        meta.setAttribute('name', 'robots')
+        meta.setAttribute('content', 'noindex')
+        meta.setAttribute('data-pnext-notfound-robots', '')
+        document.head.appendChild(meta)
+        this.addedNoindex = true
       }
     } else if (!shouldShow && this.addedNoindex) {
-      document.querySelector('meta[name="robots"][data-pnext-notfound-robots]')?.remove();
-      this.addedNoindex = false;
+      document.querySelector('meta[name="robots"][data-pnext-notfound-robots]')?.remove()
+      this.addedNoindex = false
     }
   }
 
   componentDidMount(): void {
-    this.syncNotFoundRobots();
+    this.syncNotFoundRobots()
   }
 
   componentDidUpdate(): void {
-    this.syncNotFoundRobots();
+    this.syncNotFoundRobots()
   }
 
   componentWillUnmount(): void {
     if (this.addedNoindex) {
-      document.querySelector('meta[name="robots"][data-pnext-notfound-robots]')?.remove();
-      this.addedNoindex = false;
+      document.querySelector('meta[name="robots"][data-pnext-notfound-robots]')?.remove()
+      this.addedNoindex = false
     }
   }
 
   render(): ComponentChildren {
     if (this.state.notFound) {
-      const NotFoundComponent = this.props.notFoundComponent ?? this.props.builtInNotFound;
-      return NotFoundComponent ? h(NotFoundComponent, {}) : null;
+      const NotFoundComponent = this.props.notFoundComponent ?? this.props.builtInNotFound
+      return NotFoundComponent ? h(NotFoundComponent, {}) : null
     }
-    if (!this.state.hasError) return this.props.children;
-    const { error } = this.state;
-    const ErrorComponent = this.props.errorComponent;
+    if (!this.state.hasError) return this.props.children
+    const { error } = this.state
+    const ErrorComponent = this.props.errorComponent
     if (!ErrorComponent) {
       // Preserve primitive throws for global-error.js directly (window `error`
       // loses raw null/undefined/string). Bubble Error objects to the next outer
@@ -198,11 +198,11 @@ export class ClientErrorBoundary extends Component<BoundaryProps, BoundaryState>
       if (error === null || typeof error !== 'object') {
         // global-error rides the deferred tier (see ./lazy) — a primitive throw
         // with no error.js is the one path that reaches it from a render.
-        void import('./global-error').then(m => m.escalateToGlobalError(error));
-        return null;
+        void import('./global-error').then(m => m.escalateToGlobalError(error))
+        return null
       }
-      throw error as Error;
+      throw error as Error
     }
-    return h(ErrorComponent, { error, reset: this.reset, unstable_retry: this.unstable_retry });
+    return h(ErrorComponent, { error, reset: this.reset, unstable_retry: this.unstable_retry })
   }
 }

package/src/compat/client/errors/global-error.ts

@@ -11,21 +11,21 @@
 //
 // Client-escaped errors carry NO digest, so the built-in fallback shows the no-digest message.
 
-import { h, render, type ComponentType } from 'preact';
-import { softNavigate } from '../../../api/router';
+import { h, render, type ComponentType } from 'preact'
+import { softNavigate } from '../../../client/router'
 
-export type GlobalErrorComponent = ComponentType<{ error: unknown; reset: () => void }>;
+export type GlobalErrorComponent = ComponentType<{ error: unknown; reset: () => void }>
 
-let globalErrorMounted = false;
+let globalErrorMounted = false
 
 // The app-root global-error.js component, registered by installClientErrors so the in-tree
 // ClientErrorBoundary can escalate straight to it WITHOUT bouncing a re-throw through the window
 // `error` channel - that channel drops the value for a thrown undefined/null (the ErrorEvent's `.error`
 // is undefined), so a primitive escape would be lost.
-let registeredGlobalError: GlobalErrorComponent | undefined;
+let registeredGlobalError: GlobalErrorComponent | undefined
 
 export function registerGlobalErrorComponent(component?: GlobalErrorComponent): void {
-  registeredGlobalError = component;
+  registeredGlobalError = component
 }
 
 /**
@@ -35,35 +35,35 @@ export function registerGlobalErrorComponent(component?: GlobalErrorComponent):
  * global-error.js unwrapped, so `${error}` renders 'undefined'/'null').
  */
 export function escalateToGlobalError(error: unknown): void {
-  mountGlobalError(error, registeredGlobalError);
+  mountGlobalError(error, registeredGlobalError)
   // A client error that escapes every route boundary is, to the page, an UNCAUGHT error: Next still
   // reports it to the window so window.onerror and Playwright's pageerror observe the original.
   // mountGlobalError swaps the document silently, so surface the throw explicitly here. Skip
   // primitive-sentinel escapes and anything non-Error - only a real Error carries a meaningful pageerror.
   if ((process.browser || typeof window !== 'undefined') && error instanceof Error) {
-    reportUncaught(error);
+    reportUncaught(error)
   }
 }
 
 // Errors already surfaced via reportUncaught: the later natural unhandled
 // rejection of the same value is a duplicate and gets suppressed (install.ts).
-const reportedUncaught = new WeakSet<Error>();
+const reportedUncaught = new WeakSet<Error>()
 
 export function wasReportedUncaught(error: unknown): boolean {
-  return error instanceof Error && reportedUncaught.has(error);
+  return error instanceof Error && reportedUncaught.has(error)
 }
 
 // Report an escaped error to the window as an uncaught exception. Prefer the
 // standard `reportError`; fall back to a synthetic 'error' event for engines
 // without it. Wrapped so a reporting failure never masks the global-error UI.
 function reportUncaught(error: Error): void {
-  reportedUncaught.add(error);
+  reportedUncaught.add(error)
   try {
     if (typeof reportError === 'function') {
-      reportError(error);
-      return;
+      reportError(error)
+      return
     }
-    window.dispatchEvent(new ErrorEvent('error', { error, message: error.message }));
+    window.dispatchEvent(new ErrorEvent('error', { error, message: error.message }))
   } catch {
     // ignore — the global-error document is already shown.
   }
@@ -75,47 +75,47 @@ function reportUncaught(error: Error): void {
  * top-level replacement). A soft refresh via reset() clears the flag.
  */
 export function mountGlobalError(error: unknown, component?: GlobalErrorComponent): void {
-  if (typeof document === 'undefined' || globalErrorMounted) return;
-  globalErrorMounted = true;
+  if (typeof document === 'undefined' || globalErrorMounted) return
+  globalErrorMounted = true
 
-  document.documentElement.id = '__next_error__';
-  const root = document.createElement('div');
-  document.body.replaceChildren(root);
+  document.documentElement.id = '__next_error__'
+  const root = document.createElement('div')
+  document.body.replaceChildren(root)
 
   const reset = () => {
-    globalErrorMounted = false;
-    render(null, root);
+    globalErrorMounted = false
+    render(null, root)
     // Re-render the current URL from the server (recovers server + client errors).
     void softNavigate(location.href, { replace: true, scroll: false }).catch(() => {
-      location.reload();
-    });
-  };
+      location.reload()
+    })
+  }
 
   if (component) {
     try {
       // A user global-error.js owns the whole document (<html>/<body>); render its
       // subtree in place. If it THROWS during render, fall back to the built-in.
-      render(h(component, { error, reset }), root);
-      return;
+      render(h(component, { error, reset }), root)
+      return
     } catch {
-      globalErrorMounted = true; // keep mounted; render the fallback below.
+      globalErrorMounted = true // keep mounted; render the fallback below.
     }
   }
 
-  renderBuiltinFallback(root, error);
+  renderBuiltinFallback(root, error)
 }
 
 // Next's DefaultGlobalError document text/markup. A client-escaped error has no
 // digest, so it always shows the non-server "Reload to try again, or go back."
 // message and no ERROR <digest> footer.
 function renderBuiltinFallback(root: HTMLElement, error: unknown): void {
-  const digest = (error as { digest?: unknown } | null | undefined)?.digest;
-  const isServerError = typeof digest === 'string' && digest.length > 0;
+  const digest = (error as { digest?: unknown } | null | undefined)?.digest
+  const isServerError = typeof digest === 'string' && digest.length > 0
   const message = isServerError
     ? 'A server error occurred. Reload to try again.'
-    : 'Reload to try again, or go back.';
+    : 'Reload to try again, or go back.'
 
-  ensureThemeStyle();
+  ensureThemeStyle()
   Object.assign(root.style, {
     fontFamily:
       'system-ui,"Segoe UI",Roboto,Helvetica,Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji"',
@@ -123,29 +123,32 @@ function renderBuiltinFallback(root: HTMLElement, error: unknown): void {
     display: 'flex',
     alignItems: 'center',
     justifyContent: 'center',
-  } as Partial<CSSStyleDeclaration>);
+  } as Partial<CSSStyleDeclaration>)
 
-  const card = document.createElement('div');
+  const card = document.createElement('div')
   Object.assign(card.style, {
     marginTop: '-32px',
     maxWidth: '325px',
     padding: '32px 28px',
     textAlign: 'left',
-  } as Partial<CSSStyleDeclaration>);
-
-  const icon = document.createElementNS('http://www.w3.org/2000/svg', 'svg');
-  icon.setAttribute('width', '32');
-  icon.setAttribute('height', '32');
-  icon.setAttribute('viewBox', '-0.2 -1.5 32 32');
-  icon.setAttribute('fill', 'none');
-  icon.style.marginBottom = '24px';
-  const path = document.createElementNS('http://www.w3.org/2000/svg', 'path');
-  path.setAttribute('d', 'M16.9328 0C18.0839.000116771 19.1334.658832 19.634 1.69531L31.4299 26.1309C32.0708 27.4588 31.1036 28.9999 29.6291 29H2.00215C.527541 29-.439628 27.4588.201371 26.1309L11.9973 1.69531C12.4979.658823 13.5474 7.75066e-05 14.6984 0H16.9328ZM3.59493 26H28.0363L16.9328 3H14.6984L3.59493 26ZM15.8156 19C16.9202 19.0001 17.8156 19.8955 17.8156 21C17.8156 22.1045 16.9202 22.9999 15.8156 23C14.7111 23 13.8156 22.1046 13.8156 21C13.8156 19.8954 14.7111 19 15.8156 19ZM17.3156 16.5H14.3156V8.5H17.3156V16.5Z');
-  path.setAttribute('fill', 'var(--next-error-title)');
-  icon.append(path);
-
-  const title = document.createElement('h1');
-  title.textContent = "This page couldn’t load";
+  } as Partial<CSSStyleDeclaration>)
+
+  const icon = document.createElementNS('http://www.w3.org/2000/svg', 'svg')
+  icon.setAttribute('width', '32')
+  icon.setAttribute('height', '32')
+  icon.setAttribute('viewBox', '-0.2 -1.5 32 32')
+  icon.setAttribute('fill', 'none')
+  icon.style.marginBottom = '24px'
+  const path = document.createElementNS('http://www.w3.org/2000/svg', 'path')
+  path.setAttribute(
+    'd',
+    'M16.9328 0C18.0839.000116771 19.1334.658832 19.634 1.69531L31.4299 26.1309C32.0708 27.4588 31.1036 28.9999 29.6291 29H2.00215C.527541 29-.439628 27.4588.201371 26.1309L11.9973 1.69531C12.4979.658823 13.5474 7.75066e-05 14.6984 0H16.9328ZM3.59493 26H28.0363L16.9328 3H14.6984L3.59493 26ZM15.8156 19C16.9202 19.0001 17.8156 19.8955 17.8156 21C17.8156 22.1045 16.9202 22.9999 15.8156 23C14.7111 23 13.8156 22.1046 13.8156 21C13.8156 19.8954 14.7111 19 15.8156 19ZM17.3156 16.5H14.3156V8.5H17.3156V16.5Z',
+  )
+  path.setAttribute('fill', 'var(--next-error-title)')
+  icon.append(path)
+
+  const title = document.createElement('h1')
+  title.textContent = 'This page couldn’t load'
   Object.assign(title.style, {
     fontSize: '24px',
     fontWeight: '500',
@@ -153,50 +156,50 @@ function renderBuiltinFallback(root: HTMLElement, error: unknown): void {
     lineHeight: '32px',
     margin: '0 0 12px 0',
     color: 'var(--next-error-title)',
-  } as Partial<CSSStyleDeclaration>);
+  } as Partial<CSSStyleDeclaration>)
 
-  const body = document.createElement('p');
-  body.textContent = message;
+  const body = document.createElement('p')
+  body.textContent = message
   Object.assign(body.style, {
     fontSize: '14px',
     fontWeight: '400',
     lineHeight: '21px',
     margin: '0 0 20px 0',
     color: 'var(--next-error-message)',
-  } as Partial<CSSStyleDeclaration>);
+  } as Partial<CSSStyleDeclaration>)
 
-  const buttonGroup = document.createElement('div');
-  Object.assign(buttonGroup.style, { display: 'flex', gap: '8px', alignItems: 'center' });
-  const reloadForm = document.createElement('form');
-  reloadForm.style.margin = '0';
+  const buttonGroup = document.createElement('div')
+  Object.assign(buttonGroup.style, { display: 'flex', gap: '8px', alignItems: 'center' })
+  const reloadForm = document.createElement('form')
+  reloadForm.style.margin = '0'
   reloadForm.addEventListener('submit', event => {
-    event.preventDefault();
-    location.reload();
-  });
-  const reload = document.createElement('button');
-  reload.type = 'submit';
-  reload.textContent = 'Reload';
-  Object.assign(reload.style, buttonStyle(false));
-  reloadForm.append(reload);
-  buttonGroup.append(reloadForm);
+    event.preventDefault()
+    location.reload()
+  })
+  const reload = document.createElement('button')
+  reload.type = 'submit'
+  reload.textContent = 'Reload'
+  Object.assign(reload.style, buttonStyle(false))
+  reloadForm.append(reload)
+  buttonGroup.append(reloadForm)
   if (!isServerError) {
-    const back = document.createElement('button');
-    back.type = 'button';
-    back.textContent = 'Back';
-    Object.assign(back.style, buttonStyle(true));
+    const back = document.createElement('button')
+    back.type = 'button'
+    back.textContent = 'Back'
+    Object.assign(back.style, buttonStyle(true))
     back.addEventListener('click', () => {
-      if (window.history.length > 1) window.history.back();
-      else window.location.href = '/';
-    });
-    buttonGroup.append(back);
+      if (window.history.length > 1) window.history.back()
+      else window.location.href = '/'
+    })
+    buttonGroup.append(back)
   }
-  card.append(icon, title, body, buttonGroup);
-  root.append(card);
+  card.append(icon, title, body, buttonGroup)
+  root.append(card)
   if (isServerError) {
     // Next's DefaultGlobalError digest footer (`ERROR <digest>`), fixed to the
     // bottom so operators can correlate the redacted UI with server logs.
-    const footer = document.createElement('p');
-    footer.textContent = `ERROR ${digest}`;
+    const footer = document.createElement('p')
+    footer.textContent = `ERROR ${digest}`
     Object.assign(footer.style, {
       position: 'fixed',
       bottom: '32px',
@@ -209,30 +212,37 @@ function renderBuiltinFallback(root: HTMLElement, error: unknown): void {
       fontWeight: '400',
       margin: '0',
       color: 'var(--next-error-digest)',
-    } as Partial<CSSStyleDeclaration>);
-    root.append(footer);
+    } as Partial<CSSStyleDeclaration>)
+    root.append(footer)
   }
-  if (typeof document.title !== 'undefined') document.title = '500: This page couldn’t load';
+  if (typeof document.title !== 'undefined') document.title = '500: This page couldn’t load'
 }
 
 function buttonStyle(secondary: boolean): Partial<CSSStyleDeclaration> {
   return {
-    display: 'inline-flex', alignItems: 'center', justifyContent: 'center', height: '32px',
-    padding: '0 12px', fontSize: '14px', fontWeight: '500', lineHeight: '20px',
-    borderRadius: '6px', cursor: 'pointer',
+    display: 'inline-flex',
+    alignItems: 'center',
+    justifyContent: 'center',
+    height: '32px',
+    padding: '0 12px',
+    fontSize: '14px',
+    fontWeight: '500',
+    lineHeight: '20px',
+    borderRadius: '6px',
+    cursor: 'pointer',
     color: secondary ? 'var(--next-error-btn-secondary-text)' : 'var(--next-error-btn-text)',
     background: secondary ? 'var(--next-error-btn-secondary-bg)' : 'var(--next-error-btn-bg)',
     border: secondary ? 'var(--next-error-btn-secondary-border)' : 'var(--next-error-btn-border)',
-  };
+  }
 }
 
-const THEME_STYLE_ID = '__pnext_global_error_theme__';
+const THEME_STYLE_ID = '__pnext_global_error_theme__'
 
 function ensureThemeStyle(): void {
-  if (document.getElementById(THEME_STYLE_ID)) return;
-  const style = document.createElement('style');
-  style.id = THEME_STYLE_ID;
+  if (document.getElementById(THEME_STYLE_ID)) return
+  const style = document.createElement('style')
+  style.id = THEME_STYLE_ID
   style.textContent =
-    ':root{--next-error-bg:#fff;--next-error-text:#171717;--next-error-title:#171717;--next-error-message:#171717;--next-error-digest:#666666;--next-error-btn-text:#fff;--next-error-btn-bg:#171717;--next-error-btn-border:none;--next-error-btn-secondary-text:#171717;--next-error-btn-secondary-bg:transparent;--next-error-btn-secondary-border:1px solid rgba(0,0,0,.08)}@media (prefers-color-scheme:dark){:root{--next-error-bg:#0a0a0a;--next-error-text:#ededed;--next-error-title:#ededed;--next-error-message:#ededed;--next-error-digest:#a0a0a0;--next-error-btn-text:#0a0a0a;--next-error-btn-bg:#ededed;--next-error-btn-border:none;--next-error-btn-secondary-text:#ededed;--next-error-btn-secondary-bg:transparent;--next-error-btn-secondary-border:1px solid rgba(255,255,255,.14)}}body{margin:0;color:var(--next-error-text);background:var(--next-error-bg);}';
-  document.head.append(style);
+    ':root{--next-error-bg:#fff;--next-error-text:#171717;--next-error-title:#171717;--next-error-message:#171717;--next-error-digest:#666666;--next-error-btn-text:#fff;--next-error-btn-bg:#171717;--next-error-btn-border:none;--next-error-btn-secondary-text:#171717;--next-error-btn-secondary-bg:transparent;--next-error-btn-secondary-border:1px solid rgba(0,0,0,.08)}@media (prefers-color-scheme:dark){:root{--next-error-bg:#0a0a0a;--next-error-text:#ededed;--next-error-title:#ededed;--next-error-message:#ededed;--next-error-digest:#a0a0a0;--next-error-btn-text:#0a0a0a;--next-error-btn-bg:#ededed;--next-error-btn-border:none;--next-error-btn-secondary-text:#ededed;--next-error-btn-secondary-bg:transparent;--next-error-btn-secondary-border:1px solid rgba(255,255,255,.14)}}body{margin:0;color:var(--next-error-text);background:var(--next-error-bg);}'
+  document.head.append(style)
 }