Merge pull request #96 from tinloof/feat/add-fetch-priority-to-sanity…

…-image

feat: Add fetchPriority to SanityImage

.changeset/thin-icons-fix.md

@@ -0,0 +1,5 @@
+---
+"@tinloof/sanity-web": minor
+---
+
+Expose fetchPriority from SanityImage to preload images

README.md

@@ -2,4 +2,28 @@
 
 Packages to help developing powerful content management experiences with Sanity.
 
+## How to contribute
+
+1. Make sure to install dependencies from the root folder, this will assure all deps are installed for sub-projects
+
+2. Start turbo dev server for all packages by running
+
+   ```
+   npm run dev
+   ```
+
+   from the root folder
+
+3. To preview changes we have `/apps`
+
+   a. `/apps/next` is used to preview `sanity-web` changes
+
+   b. `apps/studio` is used to preview `sanity-studio` changes
+
+   depending on which package you are working on you can spawn the respective app, each app needs `.env` file to link to a sanity project.
+
+   after updating the `.env` file for the needed app, just `npm run dev` from its directory.
+
+_After everything is set, whenever a change is made to the package in dev will reflect in the preview app when it's in dev mode._
+
 Check out [@tinloof/sanity-studio](https://github.com/tinloof/sanity-kit/tree/main/packages/sanity-studio) for more details.

apps/next/next-env.d.ts

@@ -2,4 +2,4 @@
 /// <reference types="next/image-types/global" />
 
 // NOTE: This file should not be edited
-// see https://nextjs.org/docs/basic-features/typescript for more information.
+// see https://nextjs.org/docs/app/building-your-application/configuring/typescript for more information.

apps/studio/sanity.config.ts

@@ -7,7 +7,7 @@ import {pages} from '@tinloof/sanity-studio'
 export default defineConfig({
   name: 'default',
   title: 'Vite studio',
-  projectId: 'ptjmyfc9',
+  projectId: 'qfrmq8mg',
   dataset: 'production',
   plugins: [
     structureTool(),

examples/hello-world/next-env.d.ts

@@ -2,4 +2,4 @@
 /// <reference types="next/image-types/global" />
 
 // NOTE: This file should not be edited
-// see https://nextjs.org/docs/basic-features/typescript for more information.
+// see https://nextjs.org/docs/app/building-your-application/configuring/typescript for more information.

packages/sanity-web/src/components/SanityImage.tsx

@@ -3,6 +3,8 @@ import type { ImageUrlBuilder } from "sanity";
 import { getImageDimensions, getExtension } from "@sanity/asset-utils";
 import imageUrlBuilder from "@sanity/image-url";
 import React from "react";
+// @ts-ignore
+import { preload } from "react-dom";
 
 const isDev = process.env.NODE_ENV === "development";
 
@@ -52,7 +54,8 @@ export type SanityImageProps = {
     crop?: ImageCrop;
     hotspot?: ImageHotspot;
   } | null;
-} & React.ComponentPropsWithRef<"img">;
+  fetchPriority?: "high" | "default";
+} & Omit<React.ComponentPropsWithRef<"img">, "loading" | "fetchPriority">;
 
 /**
  * Sanity’s Image component is a wrapper around the HTML image element.
@@ -78,14 +81,15 @@ export type SanityImageProps = {
  * />
  * ```
  */
+
 const SanityImage = React.forwardRef<HTMLImageElement, SanityImageProps>(
   (
     {
       aspectRatio,
       className,
       data,
       decoding = "async",
-      loading = "lazy",
+      fetchPriority,
       sizes,
       style,
       config,
@@ -207,11 +211,21 @@ const SanityImage = React.forwardRef<HTMLImageElement, SanityImageProps>(
         objectPosition: `var(--focalX) var(--focalY)`,
       } as React.CSSProperties);
 
+    if (fetchPriority === "high") {
+      preload(urlDefault as string, {
+        fetchPriority: "high",
+        imageSizes: sizes ?? sizes,
+        imageSrcSet: srcSet ?? srcSet,
+        // @ts-ignore
+        as: "image",
+      });
+    }
+
     return (
       <img
         alt={data.alt || ""}
         decoding={decoding}
-        loading={loading}
+        loading={fetchPriority !== "high" ? "lazy" : "eager"}
         className={className}
         height={aspectRatioHeight ? aspectRatioHeight * 100 : height}
         ref={ref}