@wular/pnext 0.0.1

package/src/compat/next/image.tsx

@@ -0,0 +1,56 @@
+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 extra = imageProps as ImageProps & {
+    crossOrigin?: string;
+    referrerPolicy?: string;
+    fetchPriority?: string;
+  };
+
+  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 } : {}),
+        ...(extra.crossOrigin ? { crossorigin: extra.crossOrigin } : {}),
+        ...(extra.referrerPolicy ? { referrerpolicy: extra.referrerPolicy } : {}),
+        ...(extra.fetchPriority ? { fetchpriority: extra.fetchPriority } : {}),
+      },
+    });
+  }
+
+  if (!process.browser && typeof window === 'undefined') {
+    // `data-nimg-ph` carries the loaded (placeholder-free) style so the inline
+    // placeholder script (register-image) can restore it on load for images
+    // that never hydrate (next/image used directly in a server component).
+    // Hydrating islands strip/ignore it — ClientImage owns the placeholder there.
+    return (
+      <img
+        {...props}
+        data-nimg={meta.fill ? 'fill' : '1'}
+        {...(meta.loadedStyle !== undefined ? { 'data-nimg-ph': meta.loadedStyle } : {})}
+        ref={forwardedRef}
+      />
+    );
+  }
+
+  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';

package/src/compat/next/index.ts

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

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

@@ -0,0 +1,97 @@
+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).
+//
+// Same optimizer/loader pipeline as next/image (resolveImageProps), with the one behavioral difference
+// the legacy component is defined by: a LAZY image server-renders a blank 1x1 gif as `src` (no
+// srcSet/sizes) and only swaps in the real, optimized attributes once it scrolls near the viewport.
+// `priority` / `loading="eager"` images render their real attributes straight away.
+//
+// The legacy component did that swap from its own client bundle; a pnext page need not hydrate at all,
+// so the swap rides on a small idempotent inline script emitted next to the image. Without JS the
+// `<noscript>` copy carries the real image, exactly like Next's.
+//
+// Deliberately minimal: the legacy wrapper/sizer span layout scaffolding is not reproduced - `layout`
+// still maps to the same styles next/image applies and lands in `data-nimg`.
+
+const EMPTY_DATA_URL =
+  'data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7';
+
+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).
+// Guarded by a window flag so N images on a page still install it once, and
+// wrapped in try/catch so it can never throw into the document.
+const LAZY_SWAP_SCRIPT =
+  `window.__pnextLegacyImg||(window.__pnextLegacyImg=1,function(){try{` +
+  `function s(i){var a=i.getAttribute("${LEGACY_SRC_ATTR}set"),z=i.getAttribute("${LEGACY_SRC_ATTR}sizes"),u=i.getAttribute("${LEGACY_SRC_ATTR}");` +
+  `if(z)i.sizes=z;if(a)i.srcset=a;if(u)i.src=u;` +
+  `i.removeAttribute("${LEGACY_SRC_ATTR}");i.removeAttribute("${LEGACY_SRC_ATTR}set");i.removeAttribute("${LEGACY_SRC_ATTR}sizes")}` +
+  `function b(){var l=document.querySelectorAll("img[${LEGACY_SRC_ATTR}]"),i;` +
+  `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){}}());`;
+
+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 } : {}),
+      },
+    });
+  }
+
+  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} />;
+  }
+
+  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';

package/src/compat/next/link-usage.ts

@@ -0,0 +1,29 @@
+import { scanFirstPartySource } from './image-usage';
+
+/**
+ * Build-time app fact: can any first-party source render `<Link legacyBehavior>`? The legacy child path
+ * (child validation, the deprecation notice, the server/lazy child diagnostics, cloneElement) is a
+ * meaningful slice of `next/link`, and next/link is initial on every page that links anywhere.
+ *
+ * One-sided like the blur gate: every unreadable case answers "yes". A wrong "no" renders the legacy
+ * child shape on the server and a plain anchor on the client - a hydration mismatch. The scan sees the
+ * app and its workspace packages, not registry dependencies.
+ */
+const legacyProp = /\blegacyBehavior\b/;
+
+/** A Link re-exported from here can be rendered by a file this scan can't tie
+ * back to `next/link`, so treat the re-export itself as usage. */
+const reexportedLink = /export\s[^;]*from\s*['"]next\/link['"]/;
+
+const cache = new Map<string, boolean>();
+
+export function appUsesLegacyLink(root: string) {
+  const cached = cache.get(root);
+  if (cached !== undefined) return cached;
+  const used = scanFirstPartySource(
+    root,
+    source => legacyProp.test(source) || reexportedLink.test(source),
+  );
+  cache.set(root, used);
+  return used;
+}

package/src/compat/next/link-validation-transform.ts

@@ -0,0 +1,200 @@
+// Legacy `<Link legacyBehavior>` child validation (COMPAT): annotate the single child of a Link-shaped
+// element with what it is (a server sync/async component, a lazy one), so the runtime can report Next's
+// legacy-behavior errors.
+//
+// Folded off `typescript` onto oxc: the old path required the typescript package on first fire, a
+// build-time-only dependency that also shipped into the deployed function. The gate is
+// module-record-shaped (does this file import next/link at all), so the AST is only ever materialized
+// for a file that really uses one.
+import { parseSync } from 'oxc-parser';
+import { rewriteFacts } from '../../resolve/scan-facts';
+
+const marker = '__pnextLegacyChildKind';
+
+interface Node {
+  type: string;
+  start: number;
+  end: number;
+  [key: string]: unknown;
+}
+
+interface JsxName {
+  type: string;
+  name?: string;
+  start: number;
+  end: number;
+}
+
+interface JsxOpeningElement extends Node {
+  name: JsxName;
+  attributes: Node[];
+  selfClosing: boolean;
+}
+
+interface JsxElement extends Node {
+  openingElement: JsxOpeningElement;
+  children: Node[];
+  closingElement: Node | null;
+}
+
+export function rewriteLegacyLinkValidation(source: string, file: string): string {
+  if (!source.includes('Link') && !source.includes('legacyBehavior')) return source;
+  const imports = rewriteFacts(file, source).imports;
+  const directLink =
+    imports.some(statement => statement.specifier === 'next/link') &&
+    source.includes('legacyBehavior');
+  const asyncLinkWrapper =
+    imports.some(statement =>
+      statement.bindings.some(binding => !binding.type && binding.local.endsWith('Link')),
+    ) &&
+    /<[A-Za-z_$][\w$]*Link\b/.test(source) &&
+    /\basync\s+function\b/.test(source);
+  if (!directLink && !asyncLinkWrapper) return source;
+
+  const program = parseSync(file, source, { lang: langForFile(file) }).program as unknown as {
+    body: Node[];
+  };
+  const linkNames = new Set<string>();
+  const asyncNames = new Set<string>();
+  const functionNames = new Set<string>();
+  const lazyNames = new Set<string>();
+  const edits: { at: number; text: string }[] = [];
+  const isClient = program.body.some(
+    statement =>
+      statement.type === 'ExpressionStatement' && statement.directive === 'use client',
+  );
+
+  for (const statement of program.body) {
+    if (statement.type === 'ImportDeclaration' && sourceValue(statement) === 'next/link') {
+      for (const specifier of (statement.specifiers as Node[] | undefined) ?? []) {
+        const local = identifierName(specifier.local);
+        if (!local) continue;
+        if (specifier.type === 'ImportDefaultSpecifier') linkNames.add(local);
+        else if (identifierName(specifier.imported) === 'Link') linkNames.add(local);
+      }
+    }
+    if (statement.type === 'FunctionDeclaration') {
+      const name = identifierName(statement.id);
+      if (name) {
+        functionNames.add(name);
+        if (statement.async === true) asyncNames.add(name);
+      }
+    }
+    if (statement.type === 'VariableDeclaration') {
+      for (const declarator of (statement.declarations as Node[] | undefined) ?? []) {
+        const name = identifierName(declarator.id);
+        const init = declarator.init as Node | null;
+        if (!name || !init) continue;
+        if (init.type === 'ArrowFunctionExpression' || init.type === 'FunctionExpression') {
+          functionNames.add(name);
+          if (init.async === true) asyncNames.add(name);
+        }
+        if (isLazyCall(init)) lazyNames.add(name);
+      }
+    }
+  }
+
+  // Only elements with a body can have the single child this annotates.
+  walk(program.body, node => {
+    if (node.type !== 'JSXElement') return;
+    const element = node as unknown as JsxElement;
+    if (element.closingElement === null) return;
+    annotate(element);
+  });
+
+  function annotate(element: JsxElement): void {
+    const opening = element.openingElement;
+    if (opening.name.type !== 'JSXIdentifier' || hasMarker(opening)) return;
+    const parent = opening.name.name ?? '';
+    const isLink = linkNames.has(parent);
+    if (!isLink && !parent.endsWith('Link')) return;
+    const children = element.children.filter(isMeaningfulChild);
+    if (children.length !== 1) return;
+    const kind = childKind(children[0]!);
+    if (!kind || (!isLink && kind !== 'server-async')) return;
+    const annotatedKind = !isLink
+      ? 'server-async-through-client'
+      : isClient && kind === 'lazy'
+        ? 'client-lazy'
+        : kind;
+    edits.push({ at: opening.name.end, text: ` ${marker}="${annotatedKind}"` });
+  }
+
+  function childKind(child: Node): 'server-sync' | 'server-async' | 'lazy' | undefined {
+    let name: string | undefined;
+    if (child.type === 'JSXElement') {
+      const opening = (child as unknown as JsxElement).openingElement;
+      if (opening.name.type === 'JSXIdentifier') name = opening.name.name;
+    } else if (child.type === 'JSXExpressionContainer') {
+      const expression = child.expression as Node | undefined;
+      if (expression?.type === 'Identifier') name = expression.name as string;
+    }
+    if (!name) return undefined;
+    if (lazyNames.has(name)) return 'lazy';
+    if (asyncNames.has(name)) return 'server-async';
+    if (!isClient && functionNames.has(name)) return 'server-sync';
+    return undefined;
+  }
+
+  if (edits.length === 0) return source;
+  let output = source;
+  for (const edit of edits.sort((a, b) => b.at - a.at)) {
+    output = output.slice(0, edit.at) + edit.text + output.slice(edit.at);
+  }
+  return output;
+}
+
+function isMeaningfulChild(child: Node): boolean {
+  if (child.type === 'JSXText') {
+    return typeof child.value === 'string' && child.value.trim().length > 0;
+  }
+  if (child.type === 'JSXExpressionContainer') {
+    return (child.expression as Node | undefined)?.type !== 'JSXEmptyExpression';
+  }
+  return true;
+}
+
+function hasMarker(opening: JsxOpeningElement): boolean {
+  return opening.attributes.some(
+    attribute =>
+      attribute.type === 'JSXAttribute' && (attribute.name as JsxName | undefined)?.name === marker,
+  );
+}
+
+function isLazyCall(expression: Node): boolean {
+  if (expression.type !== 'CallExpression') return false;
+  const callee = expression.callee as Node | undefined;
+  if (!callee) return false;
+  if (callee.type === 'Identifier') return callee.name === 'lazy';
+  return callee.type === 'MemberExpression' && identifierName(callee.property) === 'lazy';
+}
+
+function identifierName(node: unknown): string | undefined {
+  const named = node as { type?: string; name?: unknown } | null | undefined;
+  return typeof named?.name === 'string' ? named.name : undefined;
+}
+
+function sourceValue(statement: Node): string | undefined {
+  const literal = statement.source as { value?: unknown } | undefined;
+  return typeof literal?.value === 'string' ? literal.value : undefined;
+}
+
+/** Depth-first over every AST node — this only runs for a file that uses Link. */
+function walk(node: unknown, visit: (node: Node) => void): void {
+  if (Array.isArray(node)) {
+    for (const item of node) walk(item, visit);
+    return;
+  }
+  if (!node || typeof node !== 'object') return;
+  const candidate = node as Node;
+  if (typeof candidate.type === 'string') visit(candidate);
+  for (const key in candidate) {
+    if (key !== 'type') walk(candidate[key], visit);
+  }
+}
+
+// `.ts` forbids JSX (`<T>value` is a type assertion); everything else parses as
+// the tsx superset, matching the scan-facts language rule.
+function langForFile(file: string): 'ts' | 'tsx' {
+  return /\.[cm]?ts$/.test(file) ? 'ts' : 'tsx';
+}