feat(website): set Early Hints at Image/Source components when preload is set (#1414)

* Add setEarlyHint to image when preload

* fix properties which contains comma

* bump @deco/deco@^1.127.0

* fix task check to not write files

Author: igorbrasileiro

deno.json

@@ -34,11 +34,11 @@
     "fast-json-patch": "npm:fast-json-patch@^3.1.1",
     "simple-git": "npm:simple-git@^3.25.0",
     "https://esm.sh/*preact-render-to-string@6.3.1": "npm:preact-render-to-string@6.4.2",
-    "@deco/deco": "jsr:@deco/deco@^1.98.3"
+    "@deco/deco": "jsr:@deco/deco@^1.127.0"
   },
   "lock": false,
   "tasks": {
-    "check": "deno fmt && deno lint && deno check **/mod.ts",
+    "check": "deno fmt --check && deno lint && deno check **/mod.ts",
     "release": "deno eval 'import \"deco/scripts/release.ts\"'",
     "start": "deno run -A ./scripts/start.ts",
     "bundle": "deno run -A jsr:@deco/deco/scripts/bundle",

website/components/Image.tsx

@@ -6,6 +6,7 @@ import { Manifest } from "../manifest.gen.ts";
 export const PATH: `/live/invoke/${keyof Manifest["loaders"]}` =
   "/live/invoke/website/loaders/image.ts";
 
+export type SetEarlyHint = (hint: string) => void;
 export type Props =
   & Omit<
     JSX.IntrinsicElements["img"],
@@ -23,6 +24,7 @@ export type Props =
     fetchPriority?: "high" | "low" | "auto";
     /** @description Object-fit */
     fit?: FitOptions;
+    setEarlyHint?: SetEarlyHint;
   };
 
 const FACTORS = [1, 2];
@@ -80,8 +82,13 @@ const optimizeVTEX = (opts: OptimizationOptions) => {
   const [slash, arquivos, ids, rawId, ...rest] = src.pathname.split("/");
   const [trueId, _w, _h] = rawId.split("-");
 
-  src.pathname = [slash, arquivos, ids, `${trueId}-${width}-${height}`, ...rest]
-    .join("/");
+  src.pathname = [
+    slash,
+    arquivos,
+    ids,
+    `${trueId}-${width}-${height}`,
+    ...rest,
+  ].join("/");
 
   return src.href;
 };
@@ -161,6 +168,34 @@ export const getSrcSet = (
   return srcSet.length > 0 ? srcSet.join(", ") : undefined;
 };
 
+export const getEarlyHintFromSrcProps = (srcProps: {
+  imagesrcset: string | undefined;
+  imagesizes: string | undefined;
+  fetchpriority: "high" | "low" | "auto" | undefined;
+  media: string | undefined;
+  src: string;
+}) => {
+  const earlyHintParts = [`<${srcProps.src}>; rel=preload; as=image`];
+
+  if (srcProps?.imagesrcset) {
+    earlyHintParts.push(`; imagesrcset="${srcProps.imagesrcset}"`);
+  }
+
+  if (srcProps?.imagesizes) {
+    earlyHintParts.push(`; imagesizes="${srcProps.imagesizes}"`);
+  }
+
+  if (srcProps?.fetchpriority) {
+    earlyHintParts.push(`; fetchpriority=${srcProps.fetchpriority}`);
+  }
+
+  if (srcProps?.media) {
+    earlyHintParts.push(`; media=${srcProps.media}`);
+  }
+
+  return earlyHintParts.join("");
+};
+
 const Image = forwardRef<HTMLImageElement, Props>((props, ref) => {
   const { preload, loading = "lazy" } = props;
 
@@ -173,12 +208,27 @@ const Image = forwardRef<HTMLImageElement, Props>((props, ref) => {
   const srcSet = props.srcSet ??
     getSrcSet(props.src, props.width, props.height, props.fit);
 
-  const linkProps = srcSet && {
-    imagesrcset: srcSet,
-    imagesizes: props.sizes,
-    fetchpriority: props.fetchPriority,
-    media: props.media,
-  };
+  const linkProps = srcSet &&
+    ({
+      imagesrcset: srcSet,
+      imagesizes: props.sizes,
+      fetchpriority: props.fetchPriority,
+      media: props.media,
+    } as
+      | ""
+      | undefined
+      | {
+        imagesrcset: string;
+        imagesizes: string | undefined;
+        fetchpriority: "high" | "low" | "auto" | undefined;
+        media: string | undefined;
+      });
+
+  if (!IS_BROWSER && props.setEarlyHint && preload && linkProps) {
+    props.setEarlyHint(
+      getEarlyHintFromSrcProps({ ...linkProps, src: props.src }),
+    );
+  }
 
   return (
     <>

website/components/Picture.tsx

@@ -1,9 +1,13 @@
 import { useContext, useMemo } from "preact/hooks";
 import { forwardRef } from "preact/compat";
 import { ComponentChildren, createContext, JSX } from "preact";
-import { Head } from "$fresh/runtime.ts";
+import { Head, IS_BROWSER } from "$fresh/runtime.ts";
 
-import { getSrcSet } from "./Image.tsx";
+import {
+  getEarlyHintFromSrcProps,
+  getSrcSet,
+  type SetEarlyHint,
+} from "./Image.tsx";
 
 interface Context {
   preload?: boolean;
@@ -25,6 +29,7 @@ type SourceProps =
     preload?: boolean;
     /** @description Improves Web Vitals (LCP). Use high for LCP image. Auto for other images */
     fetchPriority?: "high" | "low" | "auto";
+    setEarlyHint?: SetEarlyHint;
   };
 
 export const Source = forwardRef<HTMLSourceElement, SourceProps>(
@@ -37,8 +42,19 @@ export const Source = forwardRef<HTMLSourceElement, SourceProps>(
       imagesizes: props.sizes,
       fetchpriority: props.fetchPriority,
       media: props.media,
+    } as {
+      imagesrcset: string | undefined;
+      imagesizes: string | undefined;
+      fetchpriority: "high" | "low" | "auto" | undefined;
+      media: string | undefined;
     };
 
+    if (!IS_BROWSER && preload && linkProps && props.setEarlyHint) {
+      props.setEarlyHint(
+        getEarlyHintFromSrcProps({ ...linkProps, src: props.src }),
+      );
+    }
+
     return (
       <>
         {preload && (