@sevenfold/setto-client 0.31.0 → 0.32.0

package/dist/index.d.ts

@@ -12,6 +12,7 @@ export { SettoIcon } from './SettoIcon';
 export type { SettoIconProps, SettoIconRenderProps } from './SettoIcon';
 export { SettoImage } from './SettoImage';
 export type { SettoImageProps, ImageToolsProps } from './SettoImage';
+export { SETTO_IMAGE_QUALITY, SETTO_IMAGE_WIDTHS, isOptimizable, optimizedSrcSet, optimizedUrl, settoVercelImagesConfig, } from './lib/optimized-image';
 export { SettoRepeater } from './SettoRepeater';
 export type { SettoRepeaterProps } from './SettoRepeater';
 export { SettoForm, FORM_FIELD_TYPES, FORM_FIELD_TYPE_LABELS, fieldTypeHasOptions, fieldTypeHasPlaceholder, formFieldsPrefix, isFormFieldType, readLocaleFields, settoSubmissionUrl, } from './modules/forms';

package/dist/lib/optimized-image.d.ts

@@ -0,0 +1,40 @@
+/**
+ * Images through Vercel's Image Optimization, for sites that turned it on.
+ *
+ * A site keeps one original per image in its repository; the CDN makes each
+ * width on first request, in AVIF or WebP as the browser accepts, and caches
+ * it by the file's content. A site turns it on with two things that must
+ * agree: `"images": { "optimize": true }` in `setto.config.json`, and an
+ * `images` block in `vercel.json` whose `sizes` and `qualities` are exactly
+ * the constants below — Vercel refuses a `w` or `q` it was not given. The
+ * block, for copying: `settoVercelImagesConfig`.
+ */
+/** Phone, phone at 2–3×, tablet, laptop, wide and retina desktop. */
+export declare const SETTO_IMAGE_WIDTHS: readonly [384, 640, 828, 1080, 1440, 1920, 2560];
+/** One quality for every image, so each width is one cached variant rather than several. */
+export declare const SETTO_IMAGE_QUALITY = 75;
+/** The `images` block of `vercel.json` that matches `SettoImage`. */
+export declare const settoVercelImagesConfig: {
+    readonly sizes: readonly [384, 640, 828, 1080, 1440, 1920, 2560];
+    readonly qualities: readonly [75];
+    readonly formats: readonly ["image/avif", "image/webp"];
+    readonly localPatterns: readonly [{
+        readonly pathname: "^/images/.*$";
+        readonly search: "";
+    }];
+    readonly minimumCacheTTL: 2678400;
+};
+/**
+ * Whether an image can go through the optimizer: a file of this site's own,
+ * under `/images/`, in a format it transforms. A draft's `blob:` preview, an
+ * external address, an SVG logo and a moving GIF cannot.
+ */
+export declare function isOptimizable(src: string | null | undefined): src is string;
+/**
+ * Where there is no optimizer to ask: the Vite dev server and a local
+ * preview. A deployment elsewhere without one (a build sandbox) is caught by
+ * the image's own error instead.
+ */
+export declare function hasNoOptimizer(hostname: string): boolean;
+export declare function optimizedUrl(src: string, width: number): string;
+export declare function optimizedSrcSet(src: string): string;

package/dist/setto-client.js

@@ -37505,6 +37505,29 @@ function SettoIcon({ k, icons, size = 24, className, style }) {
     )
   ] });
 }
+const SETTO_IMAGE_WIDTHS = [384, 640, 828, 1080, 1440, 1920, 2560];
+const SETTO_IMAGE_QUALITY = 75;
+const settoVercelImagesConfig = {
+  sizes: [...SETTO_IMAGE_WIDTHS],
+  qualities: [SETTO_IMAGE_QUALITY],
+  formats: ["image/avif", "image/webp"],
+  localPatterns: [{ pathname: "^/images/.*$", search: "" }],
+  minimumCacheTTL: 2678400
+};
+const OPTIMIZABLE = /\.(jpe?g|png|webp|avif)$/i;
+function isOptimizable(src) {
+  if (!src || !src.startsWith("/images/")) return false;
+  return OPTIMIZABLE.test(src.split(/[?#]/)[0]);
+}
+function hasNoOptimizer(hostname) {
+  return hostname === "localhost" || hostname === "127.0.0.1" || hostname === "[::1]" || hostname.endsWith(".localhost");
+}
+function optimizedUrl(src, width) {
+  return `/_vercel/image?url=${encodeURIComponent(src)}&w=${width}&q=${SETTO_IMAGE_QUALITY}`;
+}
+function optimizedSrcSet(src) {
+  return SETTO_IMAGE_WIDTHS.map((w) => `${optimizedUrl(src, w)} ${w}w`).join(", ");
+}
 const ACCEPT = "image/png,image/jpeg,image/webp,image/svg+xml";
 function setSrcAllLanguages(store, i18n, srcKey, value) {
   const langs = i18n.languages?.length ? i18n.languages : [i18n.language];
@@ -37512,9 +37535,34 @@ function setSrcAllLanguages(store, i18n, srcKey, value) {
     store.set(srcKey, lng, value);
   }
 }
+function PublishedImage({
+  src,
+  optimize,
+  sizes,
+  srcSet,
+  onError,
+  ...rest
+}) {
+  const [direct, setDirect] = useState(false);
+  const optimized = optimize && !direct && !srcSet && isOptimizable(src) && !(typeof window !== "undefined" && hasNoOptimizer(window.location.hostname));
+  if (!optimized) return /* @__PURE__ */ jsx("img", { src, srcSet, sizes, onError, ...rest });
+  return /* @__PURE__ */ jsx(
+    "img",
+    {
+      src: optimizedUrl(src, 1080),
+      srcSet: optimizedSrcSet(src),
+      sizes: sizes ?? "100vw",
+      onError: (e) => {
+        setDirect(true);
+        onError?.(e);
+      },
+      ...rest
+    }
+  );
+}
 function SettoImage({ srcKey, alt, className, style, ...rest }) {
   const { t, i18n } = useTranslation();
-  const { editMode, store, assetStore } = useSetto();
+  const { editMode, store, assetStore, config } = useSetto();
   const fileRef = useRef(null);
   const [hovered, setHovered] = useState(false);
   const [uploading, setUploading] = useState(false);
@@ -37534,7 +37582,17 @@ function SettoImage({ srcKey, alt, className, style, ...rest }) {
   const previewUrl = assetStore?.getPreviewUrl(srcKey);
   const src = previewUrl ?? srcPath;
   if (!editMode) {
-    return /* @__PURE__ */ jsx("img", { src: srcPath, alt, className, style, ...rest });
+    return /* @__PURE__ */ jsx(
+      PublishedImage,
+      {
+        src: srcPath,
+        optimize: config.images?.optimize === true,
+        alt,
+        className,
+        style,
+        ...rest
+      }
+    );
   }
   const isFullWidth = className?.includes("w-full");
   const isFullHeight = className?.includes("h-full");
@@ -40011,6 +40069,8 @@ export {
   PAGES_PATH,
   PageStore,
   SETTO_BASE,
+  SETTO_IMAGE_QUALITY,
+  SETTO_IMAGE_WIDTHS,
   SETTO_MODULES,
   SettoAdminApp,
   SettoAnimation,
@@ -40051,11 +40111,14 @@ export {
   isAdminRoute,
   isFormFieldType,
   isLinkContext,
+  isOptimizable,
   isSafeHref,
   languageFromPath,
   languageName,
   nodeChildren,
   normalisePath,
+  optimizedSrcSet,
+  optimizedUrl,
   pageById,
   pageForPath,
   pageTitleKey,
@@ -40067,6 +40130,7 @@ export {
   redirectForVisitor,
   serialiseManifest,
   settoSubmissionUrl,
+  settoVercelImagesConfig,
   siteHomeUrl,
   siteLanguages,
   useCoarsePointer,