@thomas.f/prnext 0.1.0-alpha.1

package/compat/draft.cjs

@@ -0,0 +1,28 @@
+'use strict';
+const { parseCookieHeader } = require('./cookies.cjs');
+const COOKIE_NAME = '__prerender_bypass';
+
+function previewId(input) { return input.previewModeId || input.manifest?.previewModeId; }
+// Native/Pages requests carry plain header records. Do not initialize Node's
+// entire Web Request implementation just to check an absent preview cookie.
+function cookieHeader(headers) {
+  return typeof headers?.get === 'function' ? headers.get('cookie')
+    : Object.entries(headers || {}).find(([key]) => key.toLowerCase() === 'cookie')?.[1];
+}
+function isDraftRequest(input) {
+  if (input.staticGeneration || input.staticState || input.renderMode === 'isr' || input.isFallback) return false;
+  const id = previewId(input);
+  if (!id) return false;
+  const header = cookieHeader(input.headers);
+  if (!header || !String(header).includes(COOKIE_NAME)) return false;
+  return parseCookieHeader(header).get(COOKIE_NAME)?.value === id;
+}
+function draftCookie(input, enabled, { path = '/', keepValue = false } = {}) {
+  const id = previewId(input);
+  if (!id) throw new Error('Draft Mode requires a build with a previewModeId');
+  return { name: COOKIE_NAME, value: enabled || keepValue ? id : '', path, httpOnly: true,
+    sameSite: input.production === false || input.manifest?.dev ? 'lax' : 'none',
+    secure: !(input.production === false || input.manifest?.dev),
+    ...(!enabled ? { expires: new Date(0) } : {}) };
+}
+module.exports = { COOKIE_NAME, previewId, isDraftRequest, draftCookie, cookieHeader };

package/compat/dynamic-bailout.cjs

@@ -0,0 +1,13 @@
+'use strict';
+const DYNAMIC_BAILOUT = 'BAILOUT_TO_CLIENT_SIDE_RENDERING';
+
+class DynamicBailout extends Error {
+  constructor() {
+    super('Bail out to client-side rendering: next/dynamic');
+    this.digest = DYNAMIC_BAILOUT;
+  }
+}
+
+function isDynamicBailout(error) { return error?.digest === DYNAMIC_BAILOUT; }
+
+module.exports = { DynamicBailout, isDynamicBailout };

package/compat/dynamic.cjs

@@ -0,0 +1,119 @@
+'use strict';
+const React = require('react');
+
+const DynamicContext = React.createContext(null);
+const serverInitializers = new Set();
+const readyInitializers = new Map();
+const server = typeof window === 'undefined';
+let preloading;
+
+function componentOf(module) { return module && module.default ? module.default : module; }
+function DefaultLoading({ error, pastDelay }) {
+  if (process.env.NODE_ENV !== 'production' && pastDelay && error) {
+    return React.createElement('p', null, error.message, React.createElement('br'), error.stack);
+  }
+  return null;
+}
+
+function resource(loader, options) {
+  const listeners = new Set();
+  let state, promise, delay, timeout, attempt = 0;
+  const clear = () => { clearTimeout(delay); clearTimeout(timeout); };
+  const update = patch => {
+    state = { ...state, ...patch };
+    for (const listener of listeners) listener();
+  };
+  const retry = () => {
+    clear();
+    const version = ++attempt;
+    state = { loading: true, loaded: null, error: null, pastDelay: options.delay === 0, timedOut: false };
+    promise = Promise.resolve().then(loader);
+    if (typeof options.delay === 'number' && options.delay > 0) delay = setTimeout(() => update({ pastDelay: true }), options.delay);
+    if (typeof options.timeout === 'number') timeout = setTimeout(() => update({ timedOut: true }), options.timeout);
+    void promise.then(loaded => {
+      if (version !== attempt) return;
+      clear(); update({ loading: false, loaded });
+    }, error => {
+      if (version !== attempt) return;
+      clear(); update({ loading: false, error });
+    });
+    for (const listener of listeners) listener();
+    return promise;
+  };
+  retry();
+  return { retry, promise: () => promise, snapshot: () => state,
+    subscribe(callback) { listeners.add(callback); return () => listeners.delete(callback); } };
+}
+
+function dynamic(input, options) {
+  const normalized = input instanceof Promise ? { loader: () => input }
+    : typeof input === 'function' ? { loader: input } : input || {};
+  const opts = { loading: DefaultLoading, delay: 200, timeout: null, ...normalized, ...options };
+  Object.assign(opts, opts.loadableGenerated);
+  const Loading = opts.loading || DefaultLoading;
+  if (opts.ssr === false && server) {
+    return function NoSSR() {
+      return React.createElement(Loading, { error: null, isLoading: true, pastDelay: false, timedOut: false });
+    };
+  }
+  const loader = opts.loader || (() => Promise.resolve(() => null));
+  if (typeof loader !== 'function') throw new TypeError('dynamic loader must be a function returning a Promise');
+  let loaded;
+  const init = () => { loaded ||= resource(loader, opts); return loaded.promise(); };
+  const ids = opts.ssr === false ? [] : Array.isArray(opts.modules) ? opts.modules : [];
+  if (server) serverInitializers.add(init);
+  else if (ids.length) readyInitializers.set(init, ids);
+  const Component = React.forwardRef(function DynamicComponent(props, ref) {
+    init();
+    const modules = React.useContext(DynamicContext);
+    if (modules) for (const id of ids) modules.add(id);
+    const state = React.useSyncExternalStore(loaded.subscribe, loaded.snapshot, loaded.snapshot);
+    React.useImperativeHandle(ref, () => ({ retry: loaded.retry }), []);
+    if (state.loading || state.error) return React.createElement(Loading, {
+      isLoading: state.loading, pastDelay: state.pastDelay, timedOut: state.timedOut,
+      error: state.error, retry: loaded.retry,
+    });
+    return state.loaded ? React.createElement(componentOf(state.loaded), props) : null;
+  });
+  Component.displayName = 'LoadableComponent';
+  return Component;
+}
+
+async function preloadAll() {
+  if (preloading) return preloading;
+  preloading = (async () => {
+    while (serverInitializers.size) {
+      const pending = [...serverInitializers];
+      serverInitializers.clear();
+      await Promise.all(pending.map(init => init()));
+    }
+  })();
+  try { await preloading; }
+  finally { preloading = undefined; }
+}
+
+async function preloadReady(ids = []) {
+  const rendered = new Set(ids);
+  while (true) {
+    const pending = [];
+    for (const [init, modules] of readyInitializers) {
+      if (!modules.some(id => rendered.has(id))) continue;
+      readyInitializers.delete(init);
+      pending.push(init());
+    }
+    if (!pending.length) return;
+    // Loading components display failures. Nested imports may register more
+    // components whose IDs were also present in the server-rendered document.
+    await Promise.allSettled(pending);
+  }
+}
+
+function DynamicProvider({ modules, children }) {
+  return React.createElement(DynamicContext.Provider, { value: modules }, children);
+}
+
+module.exports = dynamic;
+module.exports.default = dynamic;
+module.exports.preloadAll = preloadAll;
+module.exports.preloadReady = preloadReady;
+module.exports.DynamicProvider = DynamicProvider;

package/compat/dynamic.d.cts

@@ -0,0 +1,32 @@
+import type { ComponentType, ReactNode } from 'react';
+
+export type LoaderComponent<P = {}> = Promise<ComponentType<P> | { default: ComponentType<P> }>;
+export type Loader<P = {}> = (() => LoaderComponent<P>) | LoaderComponent<P>;
+
+export interface DynamicOptionsLoadingProps {
+  error?: Error | null;
+  isLoading?: boolean;
+  pastDelay?: boolean;
+  retry?: () => void;
+  timedOut?: boolean;
+}
+
+export interface DynamicOptions<P = {}> {
+  loading?: (props: DynamicOptionsLoadingProps) => ReactNode;
+  loader?: Loader<P>;
+  ssr?: boolean;
+  /** Pages loading-state delay in milliseconds; ignored by the App Router. */
+  delay?: number;
+  /** Pages timedOut indicator in milliseconds; does not cancel the loader. Ignored by App. */
+  timeout?: number;
+}
+
+export type LoadableOptions<P = {}> = DynamicOptions<P>;
+export type LoadableFn<P = {}> = (options: LoadableOptions<P>) => ComponentType<P>;
+export type LoadableComponent<P = {}> = ComponentType<P>;
+
+/** App Router usage requires a loader function; ssr:false belongs in a Client Component. */
+export default function dynamic<P = {}>(
+  loader: Loader<P> | DynamicOptions<P>,
+  options?: DynamicOptions<P>,
+): ComponentType<P>;

package/compat/error.cjs

@@ -0,0 +1,36 @@
+'use strict';
+const React = require('react');
+const Head = require('./head.cjs');
+
+const titles = { 400: 'Bad Request', 404: 'This page could not be found', 405: 'Method Not Allowed', 500: 'Internal Server Error' };
+
+function getInitialProps({ req, res, err }) {
+  const statusCode = res?.statusCode || (err ? err.statusCode : 404);
+  let hostname;
+  if (typeof window !== 'undefined') hostname = window.location.hostname;
+  else if (req?.headers?.host) {
+    try { hostname = new URL(`http://${req.headers.host}`).hostname; } catch { /* An invalid Host is not page content. */ }
+  }
+  return { statusCode, hostname };
+}
+
+class ErrorPage extends React.Component {
+  static displayName = 'ErrorPage';
+  static getInitialProps = getInitialProps;
+  static origGetInitialProps = getInitialProps;
+  render() {
+    const { statusCode, hostname, withDarkMode = true } = this.props;
+    const title = this.props.title || titles[statusCode] || 'An unexpected error has occurred';
+    const clientTitle = 'Application error: a client-side exception has occurred';
+    const description = this.props.title || statusCode ? title
+      : `${clientTitle}${hostname ? ` while loading ${hostname}` : ''} (see the browser console for more information)`;
+    return React.createElement('div', { style: { fontFamily: 'system-ui, sans-serif', height: '100vh', display: 'flex', alignItems: 'center', justifyContent: 'center', textAlign: 'center' } },
+      React.createElement(Head, null, React.createElement('title', null, statusCode ? `${statusCode}: ${title}` : clientTitle)),
+      React.createElement('style', null, `body{margin:0;color:#000;background:#fff}.prnext-error-code{border-right:1px solid rgba(0,0,0,.3)}${withDarkMode ? '@media(prefers-color-scheme:dark){body{color:#fff;background:#000}.prnext-error-code{border-color:rgba(255,255,255,.3)}}' : ''}`),
+      React.createElement('div', null,
+        statusCode ? React.createElement('h1', { className: 'prnext-error-code', style: { display: 'inline-block', margin: '0 20px 0 0', paddingRight: 23, fontSize: 24, fontWeight: 500, lineHeight: '48px', verticalAlign: 'top' } }, statusCode) : null,
+        React.createElement('div', { style: { display: 'inline-block' } }, React.createElement('h2', { style: { fontSize: 14, fontWeight: 400, lineHeight: '28px' } }, `${description}.`))));
+  }
+}
+module.exports = ErrorPage;
+module.exports.default = ErrorPage;

package/compat/error.d.cts

@@ -0,0 +1,15 @@
+import { Component, type ReactElement } from 'react';
+import type { NextPageContext } from './index.d.ts';
+
+export interface ErrorProps {
+  statusCode: number;
+  hostname?: string;
+  title?: string;
+  withDarkMode?: boolean;
+}
+export default class ErrorPage<Props = {}> extends Component<Props & ErrorProps> {
+  static displayName: string;
+  static getInitialProps(context: NextPageContext): ErrorProps | Promise<ErrorProps>;
+  static origGetInitialProps: typeof ErrorPage.getInitialProps;
+  render(): ReactElement;
+}

package/compat/fetch.d.cts

@@ -0,0 +1,10 @@
+export {};
+
+declare global {
+  interface RequestInit {
+    next?: {
+      revalidate?: number | false;
+      tags?: string[];
+    };
+  }
+}

package/compat/font/google.d.cts

@@ -0,0 +1 @@
+export * from '../font-google.cjs';

package/compat/font/local.d.cts

@@ -0,0 +1,2 @@
+import localFont = require('../font-local.cjs');
+export = localFont;

package/compat/font-google.cjs

@@ -0,0 +1,2 @@
+'use strict';
+throw new Error('prnext/font/google must be compiled by PRNext. Import a named Google font and call it in a module-level const with literal options.');