@wular/pnext 0.0.1

package/src/compat/react/server-inserted-html.ts

@@ -0,0 +1,87 @@
+// useServerInsertedHTML (COMPAT - CSS-in-JS SSR).
+//
+// Next exposes `useServerInsertedHTML(callback)`, re-exported from `next/navigation`. CSS-in-JS
+// libraries call it during the server render to register the collected `<style>` markup that must land
+// in the streamed document. React's upstream impl flushes each callback's JSX at every stream boundary;
+// pnext retains callbacks in the request work unit and invokes them for the initial head and each
+// streamed continuation.
+//
+// Server: push the callback. Client: no-op - the hook exists so a shared 'use client' registry component
+// compiles and hydrates, but there is nothing to insert on the client, since the styles are already in
+// the SSR HTML and the library takes over locally.
+//
+// renderServerInsertedHTML() renders each callback's vnode to a string and concatenates it. CSS-in-JS
+// registries clear their emitted rules per call.
+
+import { h, Fragment } from 'preact';
+import type { ComponentChildren, VNode } from 'preact';
+import renderToString from 'preact-render-to-string';
+
+type InsertCallback = () => ComponentChildren;
+
+interface Holder {
+  __PNEXT_SERVER_INSERTED_HTML__?: InsertCallback[];
+}
+
+const collectorKey = Symbol.for('pnext.serverInsertedHTML');
+let getRequestScope: (() => Record<PropertyKey, unknown> | undefined) | undefined;
+
+export function setServerInsertedHTMLScope(
+  getter: () => Record<PropertyKey, unknown> | undefined,
+): void {
+  getRequestScope = getter;
+}
+
+function collector(): { callbacks: InsertCallback[]; scoped: boolean } {
+  const scope = getRequestScope?.();
+  if (scope) {
+    return {
+      callbacks: (scope[collectorKey] ??= []) as InsertCallback[],
+      scoped: true,
+    };
+  }
+  const holder = globalThis as Holder;
+  holder.__PNEXT_SERVER_INSERTED_HTML__ ??= [];
+  return { callbacks: holder.__PNEXT_SERVER_INSERTED_HTML__, scoped: false };
+}
+
+const isServer = typeof document === 'undefined';
+
+/**
+ * Register HTML to be inserted into the server-rendered document. The callback returns JSX (typically
+ * one or more `<style>` elements) evaluated when the document is assembled. A client no-op - the SSR HTML
+ * already carries the styles and the CSS-in-JS runtime rehydrates them itself.
+ */
+export function useServerInsertedHTML(callback: InsertCallback): void {
+  if (!isServer) return;
+  collector().callbacks.push(callback);
+}
+
+/**
+ * Render registered callbacks to HTML. Request-scoped callbacks remain active
+ * for later stream flushes; the non-request fallback is cleared after one use.
+ */
+export function renderServerInsertedHTML(): string {
+  const { callbacks, scoped } = collector();
+  if (!scoped) (globalThis as Holder).__PNEXT_SERVER_INSERTED_HTML__ = [];
+  if (callbacks.length === 0) return '';
+
+  const parts: string[] = [];
+  for (const callback of callbacks) {
+    try {
+      const node = callback();
+      if (node == null || node === false) continue;
+      parts.push(renderToString(h(Fragment, null, node as VNode)));
+    } catch {
+      // A registry that throws during flush is skipped, not fatal.
+    }
+  }
+  return parts.join('');
+}
+
+/** Discard any registered callbacks without rendering (error / reset paths). */
+export function clearServerInsertedHTML(): void {
+  const scope = getRequestScope?.();
+  if (scope) scope[collectorKey] = [];
+  else (globalThis as Holder).__PNEXT_SERVER_INSERTED_HTML__ = [];
+}

package/src/compat/react/server.ts

@@ -0,0 +1,156 @@
+import ReactCompat from './preact';
+import { cache as serverCache } from '../../api/cache';
+import { currentPrerenderScope } from '../../ppr';
+import { currentCacheSignal } from '../../cache/context';
+
+export {
+  Children,
+  Component,
+  Fragment,
+  PureComponent,
+  StrictMode,
+  Suspense,
+  SuspenseList,
+  cloneElement,
+  createContext,
+  createElement,
+  createFactory,
+  createPortal,
+  createRef,
+  findDOMNode,
+  flushSync,
+  forwardRef,
+  hydrate,
+  isFragment,
+  isMemo,
+  isValidElement,
+  lazy,
+  memo,
+  render,
+  startTransition,
+  unmountComponentAtNode,
+  unstable_batchedUpdates,
+  useId,
+  use,
+  useActionState,
+  useOptimistic,
+  version,
+} from './preact';
+export { cache } from '../../api/cache';
+import { ViewTransition, addTransitionType } from './view-transition';
+export { ViewTransition, addTransitionType };
+
+type EffectHook = typeof ReactCompat.useEffect;
+type StateSetter<State> = (value: State | ((previous: State) => State)) => void;
+type Reducer<Action> = (action: Action) => void;
+
+const useEffect: EffectHook = () => undefined;
+const useLayoutEffect: EffectHook = () => undefined;
+const useInsertionEffect: EffectHook = () => undefined;
+const useDebugValue: typeof ReactCompat.useDebugValue = () => undefined;
+const useImperativeHandle: typeof ReactCompat.useImperativeHandle = () => undefined;
+
+function useState<State = undefined>(
+  initialState?: State | (() => State),
+): [State | undefined, StateSetter<State | undefined>] {
+  return [
+    typeof initialState === 'function' ? (initialState as () => State)() : initialState,
+    () => undefined,
+  ];
+}
+
+function useReducer<State, Action>(
+  reducer: (state: State, action: Action) => State,
+  initialArg: State,
+  init?: (value: State) => State,
+): [State, Reducer<Action>] {
+  void reducer;
+  return [init ? init(initialArg) : initialArg, () => undefined];
+}
+
+function useRef<Value = undefined>(initialValue?: Value): { current: Value | undefined } {
+  return { current: initialValue };
+}
+
+function useMemo<Value>(factory: () => Value): Value {
+  return factory();
+}
+
+// eslint-disable-next-line @typescript-eslint/no-unsafe-function-type -- must mirror preact's `<T extends Function>` useCallback signature
+function useCallback<Callback extends Function>(callback: Callback): Callback {
+  return callback;
+}
+
+function useDeferredValue<Value>(value: Value): Value {
+  return value;
+}
+
+function useTransition(): [false, (callback: () => void) => void] {
+  return [false, callback => callback()];
+}
+
+function useSyncExternalStore<Snapshot>(
+  _subscribe: (onStoreChange: () => void) => () => void,
+  getSnapshot: () => Snapshot,
+  getServerSnapshot?: () => Snapshot,
+): Snapshot {
+  return getServerSnapshot ? getServerSnapshot() : getSnapshot();
+}
+
+function useContext<Value>(
+  context: Parameters<typeof ReactCompat.useContext<Value>>[0],
+): Value {
+  return ReactCompat.useContext(context);
+}
+
+// Re-export the server stubs as named exports too. Client-component libraries
+// compiled to CJS (e.g. @next/third-parties) do `const react = require('react')`
+// then `react.useEffect(...)`; when their bundle aliases `react` to this module
+// under the react-server condition, esbuild's `__toCommonJS` only surfaces named
+// exports, so hooks that live solely on the default export read back undefined.
+export {
+  useEffect,
+  useLayoutEffect,
+  useInsertionEffect,
+  useDebugValue,
+  useImperativeHandle,
+  useState,
+  useReducer,
+  useRef,
+  useMemo,
+  useCallback,
+  useDeferredValue,
+  useTransition,
+  useSyncExternalStore,
+  useContext,
+};
+
+export function cacheSignal(): AbortSignal | null {
+  const prerender = currentPrerenderScope();
+  if (prerender) return prerender.signal;
+  return currentCacheSignal();
+}
+
+const ReactServer = { ...ReactCompat } as typeof ReactCompat & {
+  cache: typeof serverCache;
+  cacheSignal: typeof cacheSignal;
+};
+delete (ReactServer as { useState?: unknown }).useState;
+ReactServer.cache = serverCache;
+ReactServer.cacheSignal = cacheSignal;
+ReactServer.useEffect = useEffect;
+ReactServer.useLayoutEffect = useLayoutEffect;
+ReactServer.useInsertionEffect = useInsertionEffect;
+ReactServer.useDebugValue = useDebugValue;
+ReactServer.useImperativeHandle = useImperativeHandle;
+ReactServer.useReducer = useReducer;
+ReactServer.useRef = useRef;
+ReactServer.useMemo = useMemo;
+ReactServer.useCallback = useCallback;
+ReactServer.useDeferredValue = useDeferredValue;
+ReactServer.useTransition = useTransition;
+ReactServer.useSyncExternalStore = useSyncExternalStore;
+ReactServer.useContext = useContext as typeof ReactCompat.useContext;
+Object.assign(ReactServer, { ViewTransition, addTransitionType });
+
+export default ReactServer;

package/src/compat/react/view-transition.ts

@@ -0,0 +1,60 @@
+// React `<ViewTransition>` + `addTransitionType` shim (COMPAT).
+//
+// React's experimental View Transitions API exports a `ViewTransition` component and
+// `addTransitionType` from the `react` entry. Apps import them directly from 'react', so without these
+// exports every render of such a page throws `type is invalid` and the route 500s.
+//
+// React's ViewTransition renders NO DOM of its own - it annotates its single host child so the browser's
+// View Transition API can pair it across an update. Preact has no scheduler hook to drive
+// `document.startViewTransition`, so this shim keeps the same DOM shape (pure passthrough) and records
+// the declared names/types; the router applies the actual transition when the browser supports it.
+
+import { Fragment, h, type ComponentChildren, type VNode } from 'preact';
+
+/**
+ * The class/name a ViewTransition applies for a given trigger. React accepts a
+ * string (a single view-transition-class) or a record keyed by transition type.
+ */
+export type ViewTransitionClass = string | Record<string, string>;
+
+export interface ViewTransitionProps {
+  /** view-transition-name for the child; 'auto' lets React derive one. */
+  name?: string;
+  /** Fallback class applied when no more specific trigger prop matches. */
+  default?: ViewTransitionClass;
+  enter?: ViewTransitionClass;
+  exit?: ViewTransitionClass;
+  update?: ViewTransitionClass;
+  share?: ViewTransitionClass;
+  onEnter?: (element: Element, types: string[]) => void;
+  onExit?: (element: Element, types: string[]) => void;
+  onUpdate?: (element: Element, types: string[]) => void;
+  onShare?: (element: Element, types: string[]) => void;
+  ref?: unknown;
+  children?: ComponentChildren;
+}
+
+export function ViewTransition({ children }: ViewTransitionProps): VNode {
+  // Pure passthrough: React's ViewTransition adds no element to the tree, and
+  // any wrapper here would change every consuming app's DOM/CSS selectors.
+  return h(Fragment, null, children);
+}
+ViewTransition.displayName = 'ViewTransition';
+
+// Transition types declared during the current update (React clears them once
+// the transition commits). `startViewTransition({ types })` consumes them.
+const pendingTransitionTypes: string[] = [];
+
+/**
+ * Declare a view-transition type for the in-flight transition, so
+ * `:active-view-transition-type(...)` CSS rules match while it runs.
+ */
+export function addTransitionType(type: string): void {
+  if (typeof type !== 'string' || pendingTransitionTypes.includes(type)) return;
+  pendingTransitionTypes.push(type);
+}
+
+/** Drain the declared types (the navigation that starts the transition owns them). */
+export function takeTransitionTypes(): string[] {
+  return pendingTransitionTypes.splice(0, pendingTransitionTypes.length);
+}