refactor: pass wsImageLoader directly (#4567)

Split our saas image loader into separate function which is passed
directly everywhere without createImageLoader.

Author: TrySound

apps/builder/app/builder/builder.tsx

@@ -6,7 +6,6 @@ import type { Build } from "@webstudio-is/project-build";
 import type { Project } from "@webstudio-is/project";
 import { theme, Box, type CSS, Flex, Grid } from "@webstudio-is/design-system";
 import type { AuthPermit } from "@webstudio-is/trpc-interface/index.server";
-import { createImageLoader } from "@webstudio-is/image";
 import { registerContainers, createObjectPool } from "~/shared/sync";
 import {
   ServerSyncStorage,
@@ -31,7 +30,6 @@ import {
   subscribeResources,
   $authTokenPermissions,
   $publisherHost,
-  $imageLoader,
   $isDesignMode,
   $isContentMode,
   $userPlanFeatures,
@@ -236,7 +234,6 @@ export const Builder = ({
     // additional data stores
     $project.set(project);
     $publisherHost.set(publisherHost);
-    $imageLoader.set(createImageLoader({}));
     $authPermit.set(authPermit);
     $authToken.set(authToken);
     $userPlanFeatures.set(userPlanFeatures);

apps/builder/app/builder/features/marketplace/card.tsx

@@ -1,5 +1,4 @@
 import { forwardRef } from "react";
-import { useStore } from "@nanostores/react";
 import {
   Flex,
   Text,
@@ -8,9 +7,8 @@ import {
   css,
   rawTheme,
 } from "@webstudio-is/design-system";
-import { Image } from "@webstudio-is/image";
+import { Image, wsImageLoader } from "@webstudio-is/image";
 import { SpinnerIcon } from "@webstudio-is/icons";
-import { $imageLoader } from "~/shared/nano-states";
 
 const focusOutline = focusRingStyle();
 
@@ -60,7 +58,6 @@ type ThumbnailProps = {
 };
 
 const Thumbnail = ({ image, state, alt }: ThumbnailProps) => {
-  const imageLoader = useStore($imageLoader);
   return (
     <Flex className={imageContainerStyle()}>
       {image === "" || image === undefined ? (
@@ -79,7 +76,7 @@ const Thumbnail = ({ image, state, alt }: ThumbnailProps) => {
         <Image
           src={image.name}
           width={rawTheme.spacing[28]}
-          loader={imageLoader}
+          loader={wsImageLoader}
           className={imageStyle({ hasAsset: true })}
         />
       )}

apps/builder/app/builder/features/pages/search-preview.tsx

@@ -1,7 +1,5 @@
-import { useStore } from "@nanostores/react";
 import { Box, Flex, Grid } from "@webstudio-is/design-system";
-import { Image } from "@webstudio-is/image";
-import { $imageLoader } from "~/shared/nano-states";
+import { Image, wsImageLoader } from "@webstudio-is/image";
 import { formatUrl, truncateByWords, truncate } from "./social-utils";
 
 /**
@@ -67,8 +65,6 @@ const VerticalThreePointIcon = () => (
 );
 
 export const SearchPreview = (props: SearchPreviewProps) => {
-  const imageLoader = useStore($imageLoader);
-
   return (
     <Grid
       gap={1}
@@ -99,7 +95,7 @@ export const SearchPreview = (props: SearchPreviewProps) => {
           <Image
             width={18}
             height={18}
-            loader={imageLoader}
+            loader={wsImageLoader}
             src={props.faviconUrl}
           />
         </Flex>

apps/builder/app/builder/features/pages/social-preview.tsx

@@ -1,8 +1,6 @@
 import { Box, Grid, Label, css, theme } from "@webstudio-is/design-system";
-import { Image } from "@webstudio-is/image";
+import { Image, wsImageLoader } from "@webstudio-is/image";
 import { truncateByWords, truncate } from "./social-utils";
-import { useStore } from "@nanostores/react";
-import { $imageLoader } from "~/shared/nano-states";
 
 type SocialPreviewProps = {
   ogImageUrl?: string;
@@ -33,8 +31,6 @@ export const SocialPreview = ({
   ogTitle,
   ogUrl,
 }: SocialPreviewProps) => {
-  const imageLoader = useStore($imageLoader);
-
   return (
     <Grid gap={1}>
       <Label>Social Sharing Preview</Label>
@@ -49,7 +45,7 @@ export const SocialPreview = ({
       >
         <Image
           src={ogImageUrl}
-          loader={imageLoader}
+          loader={wsImageLoader}
           className={imgStyle({
             hasImage:
               ogImageUrl === undefined || ogImageUrl === "" ? false : true,

apps/builder/app/builder/features/project-settings/section-general.tsx

@@ -17,15 +17,10 @@ import {
   TextArea,
 } from "@webstudio-is/design-system";
 import { InfoCircleIcon } from "@webstudio-is/icons";
-import { ImageControl } from "./image-control";
-import { Image } from "@webstudio-is/image";
+import { Image, wsImageLoader } from "@webstudio-is/image";
 import type { ProjectMeta } from "@webstudio-is/sdk";
-import {
-  $assets,
-  $imageLoader,
-  $pages,
-  $userPlanFeatures,
-} from "~/shared/nano-states";
+import { ImageControl } from "./image-control";
+import { $assets, $pages, $userPlanFeatures } from "~/shared/nano-states";
 import { serverSyncStore } from "~/shared/sync";
 import { sectionSpacing } from "./utils";
 import { CodeEditor } from "~/builder/shared/code-editor";
@@ -96,7 +91,6 @@ export const SectionGeneral = () => {
   const assets = useStore($assets);
   const asset = assets.get(meta.faviconAssetId ?? "");
   const favIconUrl = asset ? `${asset.name}` : undefined;
-  const imageLoader = useStore($imageLoader);
 
   const handleSave = <Name extends keyof ProjectMeta>(
     name: keyof ProjectMeta
@@ -176,7 +170,7 @@ export const SectionGeneral = () => {
             height={72}
             className={imgStyle()}
             src={favIconUrl}
-            loader={imageLoader}
+            loader={wsImageLoader}
           />
 
           <Grid gap={2}>

apps/builder/app/builder/features/project-settings/section-marketplace.tsx

@@ -16,22 +16,17 @@ import {
   Select,
   Box,
 } from "@webstudio-is/design-system";
-import { ImageControl } from "./image-control";
-import {
-  $assets,
-  $imageLoader,
-  $marketplaceProduct,
-  $project,
-} from "~/shared/nano-states";
-import { Image } from "@webstudio-is/image";
-import { useIds } from "~/shared/form-utils";
+import { Image, wsImageLoader } from "@webstudio-is/image";
 import { useState } from "react";
 import {
   MarketplaceProduct,
   marketplaceCategories,
 } from "@webstudio-is/project-build";
-import { serverSyncStore } from "~/shared/sync";
+import { ImageControl } from "./image-control";
+import { $assets, $marketplaceProduct, $project } from "~/shared/nano-states";
+import { useIds } from "~/shared/form-utils";
 import { MarketplaceApprovalStatus } from "@webstudio-is/project";
+import { serverSyncStore } from "~/shared/sync";
 import { trpcClient } from "~/shared/trpc/trpc-client";
 import { rightPanelWidth, sectionSpacing } from "./utils";
 
@@ -123,7 +118,6 @@ const useMarketplaceApprovalStatus = () => {
 
 export const SectionMarketplace = () => {
   const project = useStore($project);
-  const imageLoader = useStore($imageLoader);
   const approval = useMarketplaceApprovalStatus();
   const [data, setData] = useState(() => $marketplaceProduct.get());
   const ids = useIds([
@@ -221,7 +215,7 @@ export const SectionMarketplace = () => {
                   hasAsset: asset !== undefined,
                 })}
                 src={asset ? `${asset.name}` : undefined}
-                loader={imageLoader}
+                loader={wsImageLoader}
               />
             </Box>
 

apps/builder/app/builder/features/style-panel/sections/backgrounds/background-thumbnail.tsx

@@ -1,13 +1,13 @@
 import { useStore } from "@nanostores/react";
 import type { Assets } from "@webstudio-is/sdk";
-import { Image as WebstudioImage } from "@webstudio-is/image";
+import { Image as WebstudioImage, wsImageLoader } from "@webstudio-is/image";
 import { styled, theme } from "@webstudio-is/design-system";
 import {
   StyleValue,
   toValue,
   type StyleProperty,
 } from "@webstudio-is/css-engine";
-import { $assets, $imageLoader } from "~/shared/nano-states";
+import { $assets } from "~/shared/nano-states";
 import brokenImage from "~/shared/images/broken-image-placeholder.svg";
 import { toPascalCase } from "../../shared/keyword-utils";
 import { useComputedStyles } from "../../shared/model";
@@ -115,7 +115,6 @@ type RepeatedProperty = (typeof repeatedProperties)[number];
 
 export const BackgroundThumbnail = ({ index }: { index: number }) => {
   const assets = useStore($assets);
-  const imageLoader = useStore($imageLoader);
   const styles = useComputedStyles(repeatedProperties);
   const [backgroundImage] = styles;
   const backgroundImageValue = getComputedRepeatedItem(backgroundImage, index);
@@ -131,7 +130,7 @@ export const BackgroundThumbnail = ({ index }: { index: number }) => {
     return (
       <StyledWebstudioImage
         key={asset.id}
-        loader={imageLoader}
+        loader={wsImageLoader}
         src={asset.name}
         width={thumbSize}
         optimize={true}
@@ -146,7 +145,7 @@ export const BackgroundThumbnail = ({ index }: { index: number }) => {
     return (
       <StyledWebstudioImage
         key={backgroundImageValue.value.url}
-        loader={imageLoader}
+        loader={wsImageLoader}
         src={backgroundImageValue.value.url}
         width={thumbSize}
         optimize={true}

apps/builder/app/builder/shared/assets/use-assets.tsx

@@ -1,4 +1,5 @@
 import { useMemo } from "react";
+import { computed } from "nanostores";
 import { useStore } from "@nanostores/react";
 import warnOnce from "warn-once";
 import type { Asset } from "@webstudio-is/sdk";
@@ -19,19 +20,16 @@ import {
   $uploadingFilesDataStore,
   type UploadingFileData,
 } from "~/shared/nano-states";
-import { computed } from "nanostores";
 import { serverSyncStore } from "~/shared/sync";
-
 import {
   getFileName,
   getMimeType,
   getSha256Hash,
   getSha256HashOfFile,
   uploadingFileDataToAsset,
 } from "./asset-utils";
-import { Image } from "@webstudio-is/image";
+import { Image, wsImageLoader } from "@webstudio-is/image";
 import invariant from "tiny-invariant";
-import { $imageLoader } from "~/shared/nano-states";
 import { fetch } from "~/shared/fetch.client";
 
 export const deleteAssets = (assetIds: Asset["id"][]) => {
@@ -251,16 +249,14 @@ const imageWidth = css({
 });
 
 const ToastImageInfo = ({ objectURL }: { objectURL: string }) => {
-  const imageLoader = useStore($imageLoader);
-
   return (
     <Box css={{ width: theme.spacing[18] }}>
       <Image
         className={imageWidth()}
         src={objectURL}
         optimize={false}
         width={64}
-        loader={imageLoader}
+        loader={wsImageLoader}
       />
     </Box>
   );

apps/builder/app/builder/shared/image-manager/image.tsx

@@ -1,8 +1,4 @@
-import { useStore } from "@nanostores/react";
-
-import { Image as WebstudioImage } from "@webstudio-is/image";
-
-import { $imageLoader } from "~/shared/nano-states";
+import { Image as WebstudioImage, wsImageLoader } from "@webstudio-is/image";
 
 type ImageProps = {
   assetId: string;
@@ -22,7 +18,6 @@ export const Image = ({
   width,
 }: ImageProps) => {
   const optimize = objectURL === undefined;
-  const imageLoader = useStore($imageLoader);
 
   // Avoid image flickering on switching from preview to asset (during upload)
   // Possible optimisation, we can set it to "sync" only if asset.path has changed or add isNew prop to UploadedAssetContainer
@@ -43,7 +38,7 @@ export const Image = ({
         maxWidth: "100%",
       }}
       key={assetId}
-      loader={imageLoader}
+      loader={wsImageLoader}
       decoding={decoding}
       src={src}
       width={width}

apps/builder/app/canvas/canvas.tsx

@@ -8,6 +8,7 @@ import {
   coreMetas,
   corePropsMetas,
 } from "@webstudio-is/react-sdk";
+import { wsImageLoader } from "@webstudio-is/image";
 import { ReactSdkContext } from "@webstudio-is/react-sdk/runtime";
 import * as baseComponents from "@webstudio-is/sdk-components-react";
 import * as baseComponentMetas from "@webstudio-is/sdk-components-react/metas";
@@ -61,7 +62,6 @@ import { subscribeInstanceHovering } from "./instance-hovering";
 import { useHashLinkSync } from "~/shared/pages";
 import { useMount } from "~/shared/hook-utils/use-mount";
 import { subscribeInterceptedEvents } from "./interceptor";
-import { createImageLoader } from "@webstudio-is/image";
 import { subscribeCommands } from "~/canvas/shared/commands";
 import { updateCollaborativeInstanceRect } from "./collaborative-instance";
 import { $params } from "./stores";
@@ -102,7 +102,6 @@ const useElementsTree = (
   const page = useStore($selectedPage);
   const isPreviewMode = useStore($isPreviewMode);
   const rootInstanceId = page?.rootInstanceId ?? "";
-  const imageLoader = useMemo(() => createImageLoader({}), []);
 
   if (typeof window === "undefined") {
     // @todo remove after https://github.com/webstudio-is/webstudio/issues/1313 now its needed to be sure that no leaks exists
@@ -120,7 +119,7 @@ const useElementsTree = (
         value={{
           renderer: isPreviewMode ? "preview" : "canvas",
           assetBaseUrl: params.assetBaseUrl,
-          imageLoader,
+          imageLoader: wsImageLoader,
           resources: {},
         }}
       >
@@ -135,14 +134,7 @@ const useElementsTree = (
         })}
       </ReactSdkContext.Provider>
     );
-  }, [
-    params,
-    instances,
-    rootInstanceId,
-    components,
-    isPreviewMode,
-    imageLoader,
-  ]);
+  }, [params, instances, rootInstanceId, components, isPreviewMode]);
 };
 
 const DesignMode = () => {