feat(clerk-js): Optimize image delivery

* fix(clerk-js): Replace deprecated global JSX with React.JSX * fix(clerk-js): Introduce makeResponsive HOC Primitives shouldn't be aware of any Clerk-specific logic. All the image optimizatiion logic is now extracted into its own makeResponsive HOC. * fix(clerk-js): Remove Avatar.optimise prop and isRetina helper * Create wise-turtles-study.md * fix(clerk-js): Remove Avatar.optimse prop and isRetina helper
clerk · Jun 16, 2023 · 59bc649 · 59bc649
1 parent 8b71b46
commit 59bc649
Show file tree

Hide file tree

Showing 14 changed files with 96 additions and 96 deletions.
diff --git a/.changeset/wise-turtles-study.md b/.changeset/wise-turtles-study.md
@@ -0,0 +1,6 @@
+---
+"@clerk/clerk-js": patch
+"@clerk/shared": patch
+---
+
+Optimize all images displayed within the Clerk components, such as Avatars, static OAuth provider assets etc. All images are now resized and compressed. Additionally, all images are automatically converted into more efficient formats (`avif`, `webp`) if they are supported by the user's browser, otherwise all images fall back to `jpeg`.
diff --git a/...ages/clerk-js/src/ui/components/OrganizationProfile/OrganizationProfileAvatarUploader.tsx b/...ages/clerk-js/src/ui/components/OrganizationProfile/OrganizationProfileAvatarUploader.tsx
@@ -16,7 +16,6 @@ export const OrganizationProfileAvatarUploader = (
       avatarPreview={
         <OrganizationAvatar
           size={theme => theme.sizes.$11}
-          optimize
           {...organization}
         />
       }

diff --git a/packages/clerk-js/src/ui/components/UserButton/UserButtonTrigger.tsx b/packages/clerk-js/src/ui/components/UserButton/UserButtonTrigger.tsx
@@ -26,7 +26,6 @@ export const UserButtonTrigger = withAvatarShimmer(
           boxElementDescriptor={descriptors.userButtonAvatarBox}
           imageElementDescriptor={descriptors.userButtonAvatarImage}
           {...user}
-          optimize
           size={theme => theme.sizes.$8}
         />
       </Button>

diff --git a/packages/clerk-js/src/ui/components/UserProfile/UserProfileAvatarUploader.tsx b/packages/clerk-js/src/ui/components/UserProfile/UserProfileAvatarUploader.tsx
@@ -15,7 +15,6 @@ export const UserProfileAvatarUploader = (
       avatarPreview={
         <UserAvatar
           size={theme => theme.sizes.$11}
-          optimize
           {...user}
         />
       }

diff --git a/packages/clerk-js/src/ui/customizables/index.ts b/packages/clerk-js/src/ui/customizables/index.ts
@@ -2,6 +2,7 @@ import { makeLocalizable } from '../localization';
 import * as Primitives from '../primitives';
 import { descriptors } from './elementDescriptors';
 import { makeCustomizable } from './makeCustomizable';
+import { makeResponsive } from './makeResponsive';
 import { sanitizeDomProps } from './sanitizeDomProps';
 
 export * from './Flow';
@@ -24,7 +25,9 @@ export const SimpleButton = makeCustomizable(makeLocalizable(sanitizeDomProps(Pr
 export const Heading = makeCustomizable(makeLocalizable(sanitizeDomProps(Primitives.Heading)));
 export const Link = makeCustomizable(makeLocalizable(sanitizeDomProps(Primitives.Link)));
 export const Text = makeCustomizable(makeLocalizable(sanitizeDomProps(Primitives.Text)));
-export const Image = makeCustomizable(sanitizeDomProps(Primitives.Image));
+
+export const Image = makeCustomizable(sanitizeDomProps(makeResponsive(Primitives.Image)));
+
 export const Alert = makeCustomizable(sanitizeDomProps(Primitives.Alert));
 export const AlertIcon = makeCustomizable(sanitizeDomProps(Primitives.AlertIcon));
 export const Input = makeCustomizable(sanitizeDomProps(Primitives.Input));

diff --git a/packages/clerk-js/src/ui/customizables/makeResponsive.tsx b/packages/clerk-js/src/ui/customizables/makeResponsive.tsx
@@ -0,0 +1,64 @@
+import React from 'react';
+
+import { isDataUri, isValidUrl } from '../../utils';
+
+type Responsive<T = Record<never, never>> = T & {
+  size?: number;
+  xDescriptors?: number[];
+};
+
+type ResponsivePrimitive<T> = React.FunctionComponent<Responsive<T>>;
+
+export const makeResponsive = <P extends React.JSX.IntrinsicElements['img']>(
+  Component: React.FunctionComponent<P>,
+): ResponsivePrimitive<P> => {
+  const responsiveComponent = React.forwardRef((props: Responsive<any>, ref) => {
+    const { src, size = 80, xDescriptors = [1, 2], ...restProps } = props;
+    const shouldOptimize = isClerkImage(src);
+
+    return (
+      <Component
+        srcSet={shouldOptimize ? generateSrcSet({ src, width: size, xDescriptors }) : undefined}
+        src={shouldOptimize ? generateSrc({ src, width: size * 2 }) : src}
+        {...restProps}
+        ref={ref}
+      />
+    );
+  });
+
+  const displayName = Component.displayName || Component.name || 'Component';
+  responsiveComponent.displayName = `Responsive${displayName}`.replace('_', '');
+  return responsiveComponent as ResponsivePrimitive<P>;
+};
+
+const CLERK_IMAGE_URL_BASES = [
+  'https://img.clerk.com/',
+  'https://img.clerk.dev/',
+  'https://img.clerkstage.dev/',
+  'https://img.lclclerk.com/',
+];
+
+const isClerkImage = (src?: string): boolean => {
+  return !!CLERK_IMAGE_URL_BASES.some(base => src?.includes(base));
+};
+
+const generateSrcSet = ({ src, width, xDescriptors }: { src?: string; width: number; xDescriptors: number[] }) => {
+  if (!src) {
+    return '';
+  }
+
+  return xDescriptors.map(i => `${generateSrc({ src, width: width * i })} ${i}x`).toString();
+};
+
+const generateSrc = ({ src, width }: { src?: string; width: number }) => {
+  if (!isValidUrl(src) || isDataUri(src)) {
+    return src;
+  }
+
+  const newSrc = new URL(src);
+  if (width) {
+    newSrc.searchParams.append('width', width?.toString());
+  }
+
+  return newSrc.href;
+};
diff --git a/packages/clerk-js/src/ui/elements/Avatar.tsx b/packages/clerk-js/src/ui/elements/Avatar.tsx
@@ -1,4 +1,3 @@
-import { isRetinaDisplay } from '@clerk/shared';
 import React from 'react';
 
 import { Box, descriptors, Flex, Image, Text } from '../customizables';
@@ -13,7 +12,6 @@ type AvatarProps = PropsOfComponent<typeof Flex> & {
   initials?: string;
   imageUrl?: string | null;
   imageFetchSize?: number;
-  optimize?: boolean;
   rounded?: boolean;
   boxElementDescriptor?: ElementDescriptor;
   imageElementDescriptor?: ElementDescriptor;
@@ -25,36 +23,28 @@ export const Avatar = (props: AvatarProps) => {
     title,
     initials,
     imageUrl,
-    optimize,
     rounded = true,
-    imageFetchSize = 64,
+    imageFetchSize = 80,
     sx,
     boxElementDescriptor,
     imageElementDescriptor,
   } = props;
   const [error, setError] = React.useState(false);
 
-  let src = imageUrl;
-  if (src && !optimize) {
-    const optimizedHeight = Math.max(imageFetchSize) * (isRetinaDisplay() ? 2 : 1);
-    const srcUrl = new URL(src);
-    srcUrl.searchParams.append('height', optimizedHeight.toString());
-    src = srcUrl.toString();
-  }
-
   const ImgOrFallback =
-    initials && (!src || error) ? (
+    initials && (!imageUrl || error) ? (
       <InitialsAvatarFallback initials={initials} />
     ) : (
       <Image
         elementDescriptor={[imageElementDescriptor, descriptors.avatarImage]}
         title={title}
         alt={title}
-        src={src || ''}
+        src={imageUrl || ''}
         width='100%'
         height='100%'
         sx={{ objectFit: 'cover' }}
         onError={() => setError(true)}
+        size={imageFetchSize}
       />
     );
 

diff --git a/packages/clerk-js/src/ui/elements/OrganizationPreview.tsx b/packages/clerk-js/src/ui/elements/OrganizationPreview.tsx
@@ -41,7 +41,6 @@ export const OrganizationPreview = (props: OrganizationPreviewProps) => {
           imageElementDescriptor={descriptors.organizationPreviewAvatarImage}
           {...organization}
           size={t => ({ sm: t.sizes.$8, md: t.sizes.$11, lg: t.sizes.$12x5 }[size])}
-          optimize
           sx={avatarSx}
           rounded={rounded}
         />

diff --git a/packages/clerk-js/src/ui/elements/UserPreview.tsx b/packages/clerk-js/src/ui/elements/UserPreview.tsx
@@ -91,7 +91,6 @@ export const UserPreview = (props: UserPreviewProps) => {
             name={name}
             avatarUrl={imageUrl}
             size={t => ({ sm: t.sizes.$8, md: t.sizes.$11, lg: t.sizes.$12x5 }[size])}
-            optimize
             sx={avatarSx}
             rounded={rounded}
           />

diff --git a/packages/clerk-js/src/ui/primitives/Image.tsx b/packages/clerk-js/src/ui/primitives/Image.tsx
@@ -1,25 +1,15 @@
 import React from 'react';
 
-import { generateSrc, generateSrcSet, isClerkImage } from '../../utils';
 import type { PrimitiveProps, StateProps } from '../styledSystem';
 import { applyDataStateProps } from './applyDataStateProps';
 
-export type ImageProps = PrimitiveProps<'img'> &
-  StateProps & {
-    size?: number;
-    xDescriptors?: number[];
-  };
+export type ImageProps = PrimitiveProps<'img'> & StateProps;
 
 export const Image = React.forwardRef<HTMLImageElement, ImageProps>((props, ref) => {
-  const { src, size = 80, xDescriptors = [1, 2], ...rest } = props;
-  const shouldAdjustSize = isClerkImage(src);
-
   return (
     <img
       crossOrigin='anonymous'
-      srcSet={shouldAdjustSize ? generateSrcSet({ src, width: size, xDescriptors }) : undefined}
-      src={shouldAdjustSize ? generateSrc({ src, width: size * 2 }) : src}
-      {...applyDataStateProps(rest)}
+      {...applyDataStateProps(props)}
       ref={ref}
     />
   );

diff --git a/packages/clerk-js/src/ui/styledSystem/types.ts b/packages/clerk-js/src/ui/styledSystem/types.ts
@@ -1,5 +1,6 @@
 // eslint-disable-next-line no-restricted-imports
 import type { Interpolation as _Interpolation } from '@emotion/react';
+import type React from 'react';
 
 import type { InternalTheme } from '../foundations';
 
@@ -15,21 +16,21 @@ type CssProp = { css?: ThemableCssProp };
 export type AsProp = { as?: React.ElementType };
 
 type ElementProps = {
-  div: JSX.IntrinsicElements['div'];
-  input: JSX.IntrinsicElements['input'];
-  button: JSX.IntrinsicElements['button'];
-  heading: JSX.IntrinsicElements['h1'];
-  p: JSX.IntrinsicElements['p'];
-  a: JSX.IntrinsicElements['a'];
-  label: JSX.IntrinsicElements['label'];
-  img: JSX.IntrinsicElements['img'];
-  form: JSX.IntrinsicElements['form'];
-  table: JSX.IntrinsicElements['table'];
-  thead: JSX.IntrinsicElements['thead'];
-  tbody: JSX.IntrinsicElements['tbody'];
-  th: JSX.IntrinsicElements['th'];
-  tr: JSX.IntrinsicElements['tr'];
-  td: JSX.IntrinsicElements['td'];
+  div: React.JSX.IntrinsicElements['div'];
+  input: React.JSX.IntrinsicElements['input'];
+  button: React.JSX.IntrinsicElements['button'];
+  heading: React.JSX.IntrinsicElements['h1'];
+  p: React.JSX.IntrinsicElements['p'];
+  a: React.JSX.IntrinsicElements['a'];
+  label: React.JSX.IntrinsicElements['label'];
+  img: React.JSX.IntrinsicElements['img'];
+  form: React.JSX.IntrinsicElements['form'];
+  table: React.JSX.IntrinsicElements['table'];
+  thead: React.JSX.IntrinsicElements['thead'];
+  tbody: React.JSX.IntrinsicElements['tbody'];
+  th: React.JSX.IntrinsicElements['th'];
+  tr: React.JSX.IntrinsicElements['tr'];
+  td: React.JSX.IntrinsicElements['td'];
 };
 
 /**

diff --git a/packages/clerk-js/src/utils/url.ts b/packages/clerk-js/src/utils/url.ts
@@ -14,12 +14,6 @@ declare global {
 
 // This is used as a dummy base when we need to invoke "new URL()" but we don't care about the URL origin.
 const DUMMY_URL_BASE = 'http://clerk-dummy';
-const CLERK_IMAGE_URL_BASES = [
-  'https://images.clerk.com/',
-  'https://images.clerk.dev/',
-  'https://images.clerkstage.dev/',
-  'https://images.lclclerk.com/',
-];
 
 export const DEV_OR_STAGING_SUFFIXES = [
   '.lcl.dev',
@@ -258,39 +252,6 @@ export function hasBannedProtocol(val: string | URL) {
   return BANNED_URI_PROTOCOLS.some(bp => bp === protocol);
 }
 
-export const isClerkImage = (src?: string): boolean => {
-  return !!CLERK_IMAGE_URL_BASES.some(base => src?.includes(base));
-};
-
-export const generateSrc = ({ src, width }: { src?: string; width: number }) => {
-  if (!isValidUrl(src) || isDataUri(src)) {
-    return src;
-  }
-
-  const newSrc = new URL(src);
-  if (width) {
-    newSrc.searchParams.append('width', width?.toString());
-  }
-
-  return newSrc.href;
-};
-
-export const generateSrcSet = ({
-  src,
-  width,
-  xDescriptors,
-}: {
-  src?: string;
-  width: number;
-  xDescriptors: number[];
-}) => {
-  if (!src) {
-    return '';
-  }
-
-  return xDescriptors.map(i => `${generateSrc({ src, width: width * i })} ${i}x`).toString();
-};
-
 export const hasUrlInFragment = (_url: URL | string) => {
   return new URL(_url, DUMMY_URL_BASE).hash.startsWith('#/');
 };

diff --git a/packages/shared/src/utils/index.ts b/packages/shared/src/utils/index.ts
@@ -7,7 +7,6 @@ export * from './date';
 export * from './errors';
 export * from './file';
 export * from './keys';
-export * from './isRetinaDisplay';
 export * from './localStorageBroadcastChannel';
 export * from './mimeTypeExtensions';
 export * from './multiDomain';

diff --git a/packages/shared/src/utils/isRetinaDisplay.ts b/packages/shared/src/utils/isRetinaDisplay.ts