refactor: enable isolated declarations for image package (#4500)

React components need to be annotated with ForwardRefExoticComponent
until we migrate to react v19

Author: TrySound

packages/image/src/image-dev.stories.tsx

@@ -9,9 +9,10 @@ import { Image as ImagePrimitive, createImageLoader } from "./";
 // @ts-ignore
 import localLogoImage from "../storybook-assets/logo.webp";
 
-export default {
+const meta: Meta<typeof ImagePrimitive> = {
   title: "Components/ImageDev",
-} satisfies Meta<typeof ImagePrimitive>;
+};
+export default meta;
 
 type ImageProps = React.ComponentProps<typeof ImagePrimitive>;
 

packages/image/src/image-optimize.ts

@@ -104,7 +104,7 @@ export type ImageLoader = (
 const imageSizes = [16, 32, 48, 64, 96, 128, 256, 384];
 const deviceSizes = [640, 750, 828, 1080, 1200, 1920, 2048, 3840];
 
-export const allSizes = [...imageSizes, ...deviceSizes];
+export const allSizes: number[] = [...imageSizes, ...deviceSizes];
 
 /**
  * https://github.com/vercel/next.js/blob/canary/packages/next/client/image.tsx
@@ -235,7 +235,7 @@ const DEFAULT_QUALITY = 80;
 /**
  * URL.canParse(props.src)
  */
-export const UrlCanParse = (url: string) => {
+export const UrlCanParse = (url: string): boolean => {
   try {
     new URL(url);
     return true;

packages/image/src/image.tsx

@@ -1,4 +1,8 @@
-import { forwardRef, type ElementRef, type ComponentProps } from "react";
+import {
+  forwardRef,
+  type ComponentProps,
+  type ForwardRefExoticComponent,
+} from "react";
 import { getImageAttributes, type ImageLoader } from "./image-optimize";
 
 const defaultTag = "img";
@@ -9,7 +13,7 @@ type ImageProps = ComponentProps<typeof defaultTag> & {
   loader: ImageLoader;
 };
 
-export const Image = forwardRef<ElementRef<typeof defaultTag>, ImageProps>(
+export const Image: ForwardRefExoticComponent<ImageProps> = forwardRef(
   (
     {
       quality,
@@ -46,7 +50,7 @@ export const Image = forwardRef<ElementRef<typeof defaultTag>, ImageProps>(
 
 Image.displayName = "Image";
 
-export const imagePlaceholderDataUrl = `data:image/svg+xml;base64,${btoa(`<svg
+export const imagePlaceholderDataUrl: string = `data:image/svg+xml;base64,${btoa(`<svg
   width="140"
   height="140"
   viewBox="0 0 600 600"

packages/image/tsconfig.json

@@ -1,3 +1,6 @@
 {
-  "extends": "@webstudio-is/tsconfig/base.json"
+  "extends": "@webstudio-is/tsconfig/base.json",
+  "compilerOptions": {
+    "isolatedDeclarations": true
+  }
 }