@uniflowed/web 0.0.0-alpha.18 → 0.14.1

package/cookie.js

@@ -49,7 +49,7 @@ const SERVER_COOKIES: string = "__ufServerCookies";
  * sharing it would mean importing that package here.
  */
 export function parse(header: string | null): { [string]: string } {
-  const out: { [string]: string } = Object.create(null);
+  const out: { [string]: string } = Object.setPrototypeOf({}, null);
   if (header == null || header === "") {
     return out;
   }
@@ -93,7 +93,7 @@ export function serialize(name: string, value: string, options?: CookieOptions):
 
 /** Whatever cookies are readable here, server or browser. */
 function readAll(): { [string]: string } {
-  const host = (globalThis: $FlowFixMe);
+  const host = globalThis as $FlowFixMe;
   if (host.document != null) {
     return parse(host.document.cookie);
   }
@@ -123,7 +123,7 @@ export function useCookie(
 
   const write = React.useCallback(
     (next: string, options?: CookieOptions) => {
-      const host = (globalThis: $FlowFixMe);
+      const host = globalThis as $FlowFixMe;
       if (host.document == null) {
         throw new Error(
           `useCookie: ${name} cannot be written during a server render. ` +

package/head.js

@@ -80,7 +80,7 @@ export function useHead(head: Head): void {
   const key = JSON.stringify(head);
 
   React.useEffect(() => {
-    const document = (globalThis: $FlowFixMe).document;
+    const document = (globalThis as $FlowFixMe).document;
     if (document == null) {
       return undefined;
     }
@@ -124,7 +124,7 @@ export function useHead(head: Head): void {
         document.title = previousTitle;
       }
       for (const element of added) {
-        (element: $FlowFixMe).remove();
+        (element as $FlowFixMe).remove();
       }
     };
     // eslint-disable-next-line react-hooks/exhaustive-deps

package/internal/image-endpoint.js

@@ -0,0 +1,41 @@
+// @flow
+//
+// Internal to `@uniflowed/web`: where `Image` sends a remote `src`.
+//
+// This file is what `Image` reads *outside* a uf build — under `uf test`, in a
+// library that renders one without uf's Vite plugins — and there it says there
+// is no endpoint, so a remote `src` is written into `<img>` as it was given.
+//
+// Inside one, `uf:asset` (`@uniflowed/vite`'s `internal/assets.js`) answers
+// for this module with the project's own values: the endpoint's path under the
+// base path when `app.builtins.images.remotePatterns` lists anything, and the
+// widths and quality the endpoint will accept. Generated rather than read at
+// runtime, because the browser bundle and the server one both render `Image`
+// and have to write the same `srcset`, or hydration disagrees about it.
+//
+// Which is also why nothing but the value lives here: the whole module is
+// replaced, so a function beside it would vanish from the build. What `Image`
+// does with the value is `./remote-image.js`.
+
+/** What `Image` needs to know about `/__uf/image`. */
+export type ImageEndpoint = {|
+  /** The endpoint's path, or `null` when the project has none. */
+  readonly path: string | null,
+  /** The widths it accepts, which are the only ones worth a `srcset` rung. */
+  readonly widths: $ReadOnlyArray<number>,
+  /** The quality it encodes at when a request names none. */
+  readonly quality: number,
+|};
+
+/**
+ * No endpoint, and uf's defaults for the rest.
+ *
+ * The widths and quality are `uf_assets`' defaults, and
+ * `tests/library/image-endpoint.test.js` holds them to the Rust ones and to
+ * `@uniflowed/server/image`'s.
+ */
+export const IMAGE_ENDPOINT: ImageEndpoint = {
+  path: null,
+  widths: [640, 750, 828, 1080, 1200, 1440, 1920],
+  quality: 75,
+};

package/internal/remote-image.js

@@ -0,0 +1,42 @@
+// @flow
+//
+// Internal to `@uniflowed/web`: the `src` and `srcset` `Image` writes for a
+// remote image, from what `./image-endpoint.js` says about the endpoint.
+
+import type { ImageEndpoint } from "./image-endpoint.js";
+
+/**
+ * The `src` and `srcset` for a remote image, through the endpoint.
+ *
+ * One rung per accepted width narrower than the image, and one more — the
+ * narrowest accepted width that covers it, or the widest there is — described
+ * at the width it will actually come back at, because the endpoint never
+ * upscales and a descriptor wider than the file is a browser choosing a rung
+ * for pixels that do not exist.
+ *
+ * `null` when the project has no endpoint, or the URL is not one it fetches.
+ */
+export function remoteSources(
+  endpoint: ImageEndpoint,
+  src: string,
+  intrinsic: number,
+  quality: number,
+): {| readonly src: string, readonly srcSet: string |} | null {
+  const path = endpoint.path;
+  if (path == null) return null;
+  const scheme = src.slice(0, 8).toLowerCase();
+  if (!scheme.startsWith("https://") && !scheme.startsWith("http://")) return null;
+  const widths = [...endpoint.widths].sort((a, b) => a - b);
+  if (widths.length === 0) return null;
+  const at = (width: number): string =>
+    `${path}?url=${encodeURIComponent(src)}&w=${width}&q=${quality}`;
+  const cover = widths.find((width) => width >= intrinsic) ?? widths[widths.length - 1];
+  // Everything narrower than the rung that covers the image is narrower than
+  // the image too, so each of those comes back at its own width.
+  const rungs = widths.filter((width) => width < cover).map((width) => [width, width]);
+  rungs.push([cover, Math.min(cover, intrinsic)]);
+  return {
+    src: at(cover),
+    srcSet: rungs.map(([asked, described]) => `${at(asked)} ${described}w`).join(", "),
+  };
+}

package/media.js

@@ -33,6 +33,13 @@
 // `public/` — and for it the author supplies `width`, `height` and `srcSet`
 // themselves, as they always did.
 //
+// With one exception, which a project opts into: when
+// `app.builtins.images.remotePatterns` lists hosts, an absolute `http(s)` URL
+// is routed through `/__uf/image` — `@uniflowed/server/image` — which fetches,
+// resizes and re-encodes it on request. `Image` then writes the `srcset` for
+// it, one rung per width the endpoint accepts, because now something does
+// know which sizes exist. `unoptimized` keeps one image out of it.
+//
 // # What belongs in this module
 //
 // Anything a page renders in order to make the browser fetch bytes while the
@@ -52,6 +59,10 @@
 // an instant (`time.js`) or about a stored value (`cookie.js`).
 
 import * as React from "@uniflowed/react";
+import type * as ReactTypes from "react";
+
+import { IMAGE_ENDPOINT } from "./internal/image-endpoint.js";
+import { remoteSources } from "./internal/remote-image.js";
 
 /** How an image should be fetched relative to the rest of the page. */
 export type Loading = "eager" | "lazy";
@@ -66,7 +77,7 @@ export type Source = {
 /**
  * What importing an image evaluates to.
  *
- * Produced by `uf:asset`; see `packages/vite/internal/assets.js`. Every field
+ * Produced by `uf:asset`; see `npm/vite/internal/assets.js`. Every field
  * is a fact about files that exist on disk, which is the difference between
  * this and a set of props.
  */
@@ -215,6 +226,14 @@ function defaultSizes(width: number): string {
  * gives it a high fetch priority, and preloads it — a `srcSet` behind a lazy
  * `<img>` is discovered late, and for the largest image on the page that is
  * usually the whole of the Largest Contentful Paint.
+ *
+ * A remote `src` — an absolute `http(s)` URL — is sent through `/__uf/image`
+ * when the project lists remote hosts in `app.builtins.images.remotePatterns`:
+ * `src` and `srcSet` then name the endpoint, one rung per width it accepts,
+ * at `quality` or the project's own. `width` and `height` are still required,
+ * because the endpoint is asked for the image only after the page has laid it
+ * out. A `srcSet` of the author's own, or `unoptimized`, leaves the URL as it
+ * was written.
  */
 export component Image(
   src: string | ImageAsset,
@@ -226,10 +245,12 @@ export component Image(
   sizes?: string,
   srcSet?: string,
   placeholder?: boolean = true,
+  quality?: number,
+  unoptimized?: boolean = false,
   className?: string,
   style?: { readonly [string]: string | number },
-  ...rest: { readonly [string]: mixed }
-) renders React.Node {
+  ...rest: ReactTypes.ElementConfig<"img">
+) {
   // Refined rather than cast: `src` is a union and `typeof` narrows it, so
   // neither branch needs `any`. A cast here would be the one place in this
   // module where the manifest's shape stopped being checked.
@@ -255,7 +276,14 @@ export component Image(
     throw new Error("<Image> was given an imported image with no emitted file.");
   }
 
-  const finalSrcSet = srcSet ?? asset?.srcSet;
+  // A remote URL goes through `/__uf/image` when the project has one, the
+  // author wrote no `srcSet` of their own, and did not opt this image out.
+  const remote =
+    asset == null && srcSet == null && !unoptimized
+      ? remoteSources(IMAGE_ENDPOINT, url, finalWidth, quality ?? IMAGE_ENDPOINT.quality)
+      : null;
+  const finalUrl = remote?.src ?? url;
+  const finalSrcSet = srcSet ?? remote?.srcSet ?? asset?.srcSet;
   const finalSizes =
     sizes ?? (finalSrcSet != null && finalSrcSet !== "" ? defaultSizes(finalWidth) : undefined);
   const finalLoading: Loading = loading ?? (priority ? "eager" : "lazy");
@@ -263,7 +291,8 @@ export component Image(
 
   const image = (
     <img
-      src={url}
+      {...rest}
+      src={finalUrl}
       alt={alt}
       width={finalWidth}
       height={finalHeight}
@@ -286,13 +315,12 @@ export component Image(
               // it needs no element, it cannot be announced twice to a screen
               // reader, and the browser paints over it as the real image
               // decodes instead of swapping one node for another.
-              backgroundImage: `url("${blur}")`,
-              backgroundSize: "cover",
-              backgroundPosition: "center",
               ...style,
+              backgroundImage: style?.backgroundImage ?? `url("${blur}")`,
+              backgroundSize: style?.backgroundSize ?? "cover",
+              backgroundPosition: style?.backgroundPosition ?? "center",
             }
       }
-      {...rest}
     />
   );
 
@@ -307,7 +335,7 @@ export component Image(
       <link
         rel="preload"
         as="image"
-        href={url}
+        href={finalUrl}
         imageSrcSet={finalSrcSet}
         imageSizes={finalSizes}
         fetchPriority="high"
@@ -365,7 +393,7 @@ export component Picture(
   sources?: $ReadOnlyArray<Source> = [],
   loading?: Loading = "lazy",
   className?: string,
-) renders React.Node {
+) {
   return (
     <picture>
       {sources.map((source) => (
@@ -449,7 +477,7 @@ export component Font(
   type?: string,
   crossOrigin?: "anonymous" | "use-credentials" = "anonymous",
   preload?: boolean,
-) renders React.Node {
+) {
   const asset: FontAsset | null = typeof src === "string" ? null : src;
   const url: string = typeof src === "string" ? src : src.src;
   const finalType = type ?? asset?.type ?? "font/woff2";
@@ -527,7 +555,7 @@ export component Font(
  * here is that the string was produced by uf from files in the repository, not
  * by anything at runtime.
  */
-export component IconSprite(sprite: SpriteAsset) renders React.Node {
+export component IconSprite(sprite: SpriteAsset) {
   return (
     <div
       // Out of the flow entirely rather than `display: none`: a `<use>` may
@@ -577,10 +605,11 @@ export component Icon(
   width?: number,
   height?: number,
   className?: string,
-  ...rest: { readonly [string]: mixed }
-) renders React.Node {
+  ...rest: ReactTypes.ElementConfig<"svg">
+) {
   return (
     <svg
+      {...rest}
       viewBox={icon.viewBox}
       width={width ?? size}
       height={height ?? size}
@@ -592,7 +621,6 @@ export component Icon(
       aria-label={label}
       aria-hidden={label == null ? true : undefined}
       focusable="false"
-      {...rest}
     >
       <use href={icon.href} />
     </svg>
@@ -619,7 +647,7 @@ export component Icon(
  * template. It is a template and not a renderer: uf will not turn JSX into an
  * image, and it refuses text it cannot lay out rather than drawing it wrong.
  */
-export component OgImage(card: OgAsset, origin: string, alt?: string) renders React.Node {
+export component OgImage(card: OgAsset, origin: string, alt?: string) {
   const absolute = card.url.startsWith("http")
     ? card.url
     : `${origin.replace(/\/+$/, "")}/${card.url.replace(/^\/+/, "")}`;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@uniflowed/web",
-  "version": "0.0.0-alpha.18",
+  "version": "0.14.1",
   "description": "The primitives a web page is built from, for the Unified Toolchain for Flow.",
   "type": "module",
   "license": "MIT",
@@ -8,7 +8,7 @@
   "repository": {
     "type": "git",
     "url": "git+https://github.com/ubugeeei-prod/uf.git",
-    "directory": "packages/web"
+    "directory": "npm/web"
   },
   "exports": {
     ".": "./index.js",
@@ -21,11 +21,12 @@
   },
   "files": [
     "*.js",
+    "internal/*.js",
     "!*.test.js"
   ],
   "dependencies": {
-    "@uniflowed/core": "0.0.0-alpha.18",
-    "@uniflowed/hooks": "0.0.0-alpha.18",
-    "@uniflowed/react": "0.0.0-alpha.18"
+    "@uniflowed/core": "0.14.1",
+    "@uniflowed/hooks": "0.14.1",
+    "@uniflowed/react": "0.14.1"
   }
 }

package/regions.js

@@ -75,7 +75,7 @@ export component Announcer(
   children?: React.Node,
   urgency?: "polite" | "assertive" = "polite",
   atomic?: boolean = true,
-) renders React.Node {
+) {
   return (
     <div aria-live={urgency} aria-atomic={atomic} style={VISUALLY_HIDDEN}>
       {children}
@@ -90,7 +90,7 @@ export component Announcer(
  * landmark list offers, and there must be exactly one per document — which is
  * why this is not something a layout should also render.
  */
-export component Page(children?: React.Node, className?: string) renders React.Node {
+export component Page(children?: React.Node, className?: string) {
   return (
     <main id={MAIN_ID} className={className}>
       {children}
@@ -110,7 +110,7 @@ export component Page(children?: React.Node, className?: string) renders React.N
  * it takes focus and then shows itself, which is why it does not cost a
  * design anything: the only person who ever sees it is the person using it.
  */
-export component SkipLink(children?: React.Node = "Skip to content") renders React.Node {
+export component SkipLink(children?: React.Node = "Skip to content") {
   const [focused, setFocused] = React.useState(false);
 
   return (
@@ -150,6 +150,6 @@ export component SkipLink(children?: React.Node = "Skip to content") renders Rea
  * inside it — `<nav>`, `<main>`, `<footer>` — are the ones a reader navigates
  * by, and wrapping them in another one adds a level to walk through.
  */
-export component Layout(children?: React.Node, className?: string) renders React.Node {
+export component Layout(children?: React.Node, className?: string) {
   return <div className={className}>{children}</div>;
 }

package/time.js

@@ -159,7 +159,7 @@ export component Time(
   zone?: string,
   locale?: string,
   className?: string,
-) renders React.Node {
+) {
   const at = asInstant(value);
   const machine = at.toString();
   const rendered = useRenderEnvelope();
@@ -171,6 +171,9 @@ export component Time(
 
   React.useEffect(() => {
     if (format === "local") {
+      // The local zone is a browser value; the server text stays deterministic
+      // until the client can replace it after hydration.
+      // uf-lint-disable-next-line react-compiler/set-state-in-effect
       setText(at.toZonedDateTimeISO(Temporal.Now.timeZoneId()).toLocaleString(locale));
     } else if (format === "relative") {
       setText(relative(at));