react-datocms 5.0.3 → 6.0.1

package/src/SRCImage/__tests__/__snapshots__/index.test.tsx.snap

@@ -0,0 +1,274 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Image explicit sizes renders correctly 1`] = `
+<SRCImage
+  data={
+    {
+      "base64": "data:image/jpeg;base64,<IMAGE-DATA>",
+      "height": 421,
+      "src": "https://www.datocms-assets.com/205/image.png?ar=16%3A9&fit=crop&w=750",
+      "width": 750,
+    }
+  }
+  sizes="(max-width: 600px) 200px, 50vw"
+>
+  <picture>
+    <source
+      sizes="(max-width: 600px) 200px, 50vw"
+      srcSet="https://www.datocms-assets.com/205/image.png?ar=16%3A9&fit=crop&w=750&dpr=0.25 187w,https://www.datocms-assets.com/205/image.png?ar=16%3A9&fit=crop&w=750&dpr=0.5 375w,https://www.datocms-assets.com/205/image.png?ar=16%3A9&fit=crop&w=750&dpr=0.75 562w,https://www.datocms-assets.com/205/image.png?ar=16%3A9&fit=crop&w=750 750w,https://www.datocms-assets.com/205/image.png?ar=16%3A9&fit=crop&w=750&dpr=1.5 1125w,https://www.datocms-assets.com/205/image.png?ar=16%3A9&fit=crop&w=750&dpr=2 1500w,https://www.datocms-assets.com/205/image.png?ar=16%3A9&fit=crop&w=750&dpr=3 2250w,https://www.datocms-assets.com/205/image.png?ar=16%3A9&fit=crop&w=750&dpr=4 3000w"
+    />
+    <img
+      alt=""
+      loading="lazy"
+      src="https://www.datocms-assets.com/205/image.png?ar=16%3A9&fit=crop&w=750"
+      style={
+        {
+          "aspectRatio": "750 / 421",
+          "backgroundImage": "url("data:image/jpeg;base64,<IMAGE-DATA>")",
+          "backgroundPosition": "50% 50%",
+          "backgroundRepeat": "no-repeat",
+          "backgroundSize": "cover",
+          "color": "transparent",
+          "height": "auto",
+          "maxWidth": "750px",
+          "width": "100%",
+        }
+      }
+    />
+  </picture>
+</SRCImage>
+`;
+
+exports[`Image full data renders correctly 1`] = `
+<SRCImage
+  data={
+    {
+      "alt": "DatoCMS swag",
+      "aspectRatio": 1.7777777777777777,
+      "base64": "data:image/jpeg;base64,<IMAGE-DATA>",
+      "height": 421,
+      "sizes": "(max-width: 750px) 100vw, 750px",
+      "src": "https://www.datocms-assets.com/205/image.png?ar=16%3A9&fit=crop&w=750",
+      "srcSet": "https://www.datocms-assets.com/205/image.png?ar=16%3A9&dpr=0.25&fit=crop&w=750 187w,↵https://www.datocms-assets.com/205/image.png?ar=16%3A9&dpr=0.5&fit=crop&w=750 375w,↵https://www.datocms-assets.com/205/image.png?ar=16%3A9&dpr=0.75&fit=crop&w=750 562w,↵https://www.datocms-assets.com/205/image.png?ar=16%3A9&dpr=1&fit=crop&w=750 750w,↵https://www.datocms-assets.com/205/image.png?ar=16%3A9&dpr=1.5&fit=crop&w=750 1125w,↵https://www.datocms-assets.com/205/image.png?ar=16%3A9&dpr=2&fit=crop&w=750 1500w,↵https://www.datocms-assets.com/205/image.png?ar=16%3A9&dpr=3&fit=crop&w=750 2250w,↵https://www.datocms-assets.com/205/image.png?ar=16%3A9&dpr=4&fit=crop&w=750 3000w",
+      "title": "These are awesome, we know that.",
+      "width": 750,
+    }
+  }
+>
+  <picture>
+    <source
+      sizes="(max-width: 750px) 100vw, 750px"
+      srcSet="https://www.datocms-assets.com/205/image.png?ar=16%3A9&dpr=0.25&fit=crop&w=750 187w,↵https://www.datocms-assets.com/205/image.png?ar=16%3A9&dpr=0.5&fit=crop&w=750 375w,↵https://www.datocms-assets.com/205/image.png?ar=16%3A9&dpr=0.75&fit=crop&w=750 562w,↵https://www.datocms-assets.com/205/image.png?ar=16%3A9&dpr=1&fit=crop&w=750 750w,↵https://www.datocms-assets.com/205/image.png?ar=16%3A9&dpr=1.5&fit=crop&w=750 1125w,↵https://www.datocms-assets.com/205/image.png?ar=16%3A9&dpr=2&fit=crop&w=750 1500w,↵https://www.datocms-assets.com/205/image.png?ar=16%3A9&dpr=3&fit=crop&w=750 2250w,↵https://www.datocms-assets.com/205/image.png?ar=16%3A9&dpr=4&fit=crop&w=750 3000w"
+    />
+    <img
+      alt="DatoCMS swag"
+      loading="lazy"
+      src="https://www.datocms-assets.com/205/image.png?ar=16%3A9&fit=crop&w=750"
+      style={
+        {
+          "aspectRatio": "750 / 421",
+          "backgroundImage": "url("data:image/jpeg;base64,<IMAGE-DATA>")",
+          "backgroundPosition": "50% 50%",
+          "backgroundRepeat": "no-repeat",
+          "backgroundSize": "cover",
+          "color": "transparent",
+          "height": "auto",
+          "maxWidth": "750px",
+          "width": "100%",
+        }
+      }
+      title="These are awesome, we know that."
+    />
+  </picture>
+</SRCImage>
+`;
+
+exports[`Image minimal data renders correctly 1`] = `
+<SRCImage
+  data={
+    {
+      "base64": "data:image/jpeg;base64,<IMAGE-DATA>",
+      "height": 421,
+      "src": "https://www.datocms-assets.com/205/image.png?ar=16%3A9&fit=crop&w=750",
+      "width": 750,
+    }
+  }
+>
+  <picture>
+    <source
+      srcSet="https://www.datocms-assets.com/205/image.png?ar=16%3A9&fit=crop&w=750&dpr=0.25 187w,https://www.datocms-assets.com/205/image.png?ar=16%3A9&fit=crop&w=750&dpr=0.5 375w,https://www.datocms-assets.com/205/image.png?ar=16%3A9&fit=crop&w=750&dpr=0.75 562w,https://www.datocms-assets.com/205/image.png?ar=16%3A9&fit=crop&w=750 750w,https://www.datocms-assets.com/205/image.png?ar=16%3A9&fit=crop&w=750&dpr=1.5 1125w,https://www.datocms-assets.com/205/image.png?ar=16%3A9&fit=crop&w=750&dpr=2 1500w,https://www.datocms-assets.com/205/image.png?ar=16%3A9&fit=crop&w=750&dpr=3 2250w,https://www.datocms-assets.com/205/image.png?ar=16%3A9&fit=crop&w=750&dpr=4 3000w"
+    />
+    <img
+      alt=""
+      loading="lazy"
+      src="https://www.datocms-assets.com/205/image.png?ar=16%3A9&fit=crop&w=750"
+      style={
+        {
+          "aspectRatio": "750 / 421",
+          "backgroundImage": "url("data:image/jpeg;base64,<IMAGE-DATA>")",
+          "backgroundPosition": "50% 50%",
+          "backgroundRepeat": "no-repeat",
+          "backgroundSize": "cover",
+          "color": "transparent",
+          "height": "auto",
+          "maxWidth": "750px",
+          "width": "100%",
+        }
+      }
+    />
+  </picture>
+</SRCImage>
+`;
+
+exports[`Image minimalDataWithRelativeUrl renders correctly 1`] = `
+<SRCImage
+  data={
+    {
+      "base64": "data:image/jpeg;base64,<IMAGE-DATA>",
+      "height": 421,
+      "src": "/205/image.png?ar=16%3A9&fit=crop&w=750",
+      "width": 750,
+    }
+  }
+>
+  <picture>
+    <source
+      srcSet="/205/image.png?ar=16%3A9&fit=crop&w=750&dpr=0.25 187w,/205/image.png?ar=16%3A9&fit=crop&w=750&dpr=0.5 375w,/205/image.png?ar=16%3A9&fit=crop&w=750&dpr=0.75 562w,/205/image.png?ar=16%3A9&fit=crop&w=750 750w,/205/image.png?ar=16%3A9&fit=crop&w=750&dpr=1.5 1125w,/205/image.png?ar=16%3A9&fit=crop&w=750&dpr=2 1500w,/205/image.png?ar=16%3A9&fit=crop&w=750&dpr=3 2250w,/205/image.png?ar=16%3A9&fit=crop&w=750&dpr=4 3000w"
+    />
+    <img
+      alt=""
+      loading="lazy"
+      src="/205/image.png?ar=16%3A9&fit=crop&w=750"
+      style={
+        {
+          "aspectRatio": "750 / 421",
+          "backgroundImage": "url("data:image/jpeg;base64,<IMAGE-DATA>")",
+          "backgroundPosition": "50% 50%",
+          "backgroundRepeat": "no-repeat",
+          "backgroundSize": "cover",
+          "color": "transparent",
+          "height": "auto",
+          "maxWidth": "750px",
+          "width": "100%",
+        }
+      }
+    />
+  </picture>
+</SRCImage>
+`;
+
+exports[`Image passing className and/or style renders correctly 1`] = `
+<SRCImage
+  className="class-name"
+  data={
+    {
+      "base64": "data:image/jpeg;base64,<IMAGE-DATA>",
+      "height": 421,
+      "src": "https://www.datocms-assets.com/205/image.png?ar=16%3A9&fit=crop&w=750",
+      "width": 750,
+    }
+  }
+  style={
+    {
+      "border": "1px solid red",
+    }
+  }
+>
+  <picture>
+    <source
+      srcSet="https://www.datocms-assets.com/205/image.png?ar=16%3A9&fit=crop&w=750&dpr=0.25 187w,https://www.datocms-assets.com/205/image.png?ar=16%3A9&fit=crop&w=750&dpr=0.5 375w,https://www.datocms-assets.com/205/image.png?ar=16%3A9&fit=crop&w=750&dpr=0.75 562w,https://www.datocms-assets.com/205/image.png?ar=16%3A9&fit=crop&w=750 750w,https://www.datocms-assets.com/205/image.png?ar=16%3A9&fit=crop&w=750&dpr=1.5 1125w,https://www.datocms-assets.com/205/image.png?ar=16%3A9&fit=crop&w=750&dpr=2 1500w,https://www.datocms-assets.com/205/image.png?ar=16%3A9&fit=crop&w=750&dpr=3 2250w,https://www.datocms-assets.com/205/image.png?ar=16%3A9&fit=crop&w=750&dpr=4 3000w"
+    />
+    <img
+      alt=""
+      className="class-name"
+      loading="lazy"
+      src="https://www.datocms-assets.com/205/image.png?ar=16%3A9&fit=crop&w=750"
+      style={
+        {
+          "aspectRatio": "750 / 421",
+          "backgroundImage": "url("data:image/jpeg;base64,<IMAGE-DATA>")",
+          "backgroundPosition": "50% 50%",
+          "backgroundRepeat": "no-repeat",
+          "backgroundSize": "cover",
+          "border": "1px solid red",
+          "color": "transparent",
+          "height": "auto",
+          "maxWidth": "750px",
+          "width": "100%",
+        }
+      }
+    />
+  </picture>
+</SRCImage>
+`;
+
+exports[`Image priority=true renders correctly 1`] = `
+<SRCImage
+  data={
+    {
+      "base64": "data:image/jpeg;base64,<IMAGE-DATA>",
+      "height": 421,
+      "src": "https://www.datocms-assets.com/205/image.png?ar=16%3A9&fit=crop&w=750",
+      "width": 750,
+    }
+  }
+  priority={true}
+>
+  <picture>
+    <source
+      srcSet="https://www.datocms-assets.com/205/image.png?ar=16%3A9&fit=crop&w=750&dpr=0.25 187w,https://www.datocms-assets.com/205/image.png?ar=16%3A9&fit=crop&w=750&dpr=0.5 375w,https://www.datocms-assets.com/205/image.png?ar=16%3A9&fit=crop&w=750&dpr=0.75 562w,https://www.datocms-assets.com/205/image.png?ar=16%3A9&fit=crop&w=750 750w,https://www.datocms-assets.com/205/image.png?ar=16%3A9&fit=crop&w=750&dpr=1.5 1125w,https://www.datocms-assets.com/205/image.png?ar=16%3A9&fit=crop&w=750&dpr=2 1500w,https://www.datocms-assets.com/205/image.png?ar=16%3A9&fit=crop&w=750&dpr=3 2250w,https://www.datocms-assets.com/205/image.png?ar=16%3A9&fit=crop&w=750&dpr=4 3000w"
+    />
+    <img
+      alt=""
+      fetchpriority="high"
+      src="https://www.datocms-assets.com/205/image.png?ar=16%3A9&fit=crop&w=750"
+      style={
+        {
+          "aspectRatio": "750 / 421",
+          "backgroundImage": "url("data:image/jpeg;base64,<IMAGE-DATA>")",
+          "backgroundPosition": "50% 50%",
+          "backgroundRepeat": "no-repeat",
+          "backgroundSize": "cover",
+          "color": "transparent",
+          "height": "auto",
+          "maxWidth": "750px",
+          "width": "100%",
+        }
+      }
+    />
+  </picture>
+</SRCImage>
+`;
+
+exports[`Image usePlaceholder=false renders correctly 1`] = `
+<SRCImage
+  data={
+    {
+      "base64": "data:image/jpeg;base64,<IMAGE-DATA>",
+      "height": 421,
+      "src": "https://www.datocms-assets.com/205/image.png?ar=16%3A9&fit=crop&w=750",
+      "width": 750,
+    }
+  }
+  usePlaceholder={false}
+>
+  <picture>
+    <source
+      srcSet="https://www.datocms-assets.com/205/image.png?ar=16%3A9&fit=crop&w=750&dpr=0.25 187w,https://www.datocms-assets.com/205/image.png?ar=16%3A9&fit=crop&w=750&dpr=0.5 375w,https://www.datocms-assets.com/205/image.png?ar=16%3A9&fit=crop&w=750&dpr=0.75 562w,https://www.datocms-assets.com/205/image.png?ar=16%3A9&fit=crop&w=750 750w,https://www.datocms-assets.com/205/image.png?ar=16%3A9&fit=crop&w=750&dpr=1.5 1125w,https://www.datocms-assets.com/205/image.png?ar=16%3A9&fit=crop&w=750&dpr=2 1500w,https://www.datocms-assets.com/205/image.png?ar=16%3A9&fit=crop&w=750&dpr=3 2250w,https://www.datocms-assets.com/205/image.png?ar=16%3A9&fit=crop&w=750&dpr=4 3000w"
+    />
+    <img
+      alt=""
+      loading="lazy"
+      src="https://www.datocms-assets.com/205/image.png?ar=16%3A9&fit=crop&w=750"
+      style={
+        {
+          "aspectRatio": "750 / 421",
+          "height": "auto",
+          "maxWidth": "750px",
+          "width": "100%",
+        }
+      }
+    />
+  </picture>
+</SRCImage>
+`;

package/src/SRCImage/__tests__/index.test.tsx

@@ -0,0 +1,91 @@
+import { mount } from 'enzyme';
+import * as React from 'react';
+import { SRCImage } from '../index.js';
+
+const data = {
+  alt: 'DatoCMS swag',
+  aspectRatio: 1.7777777777777777,
+  base64: 'data:image/jpeg;base64,<IMAGE-DATA>',
+  height: 421,
+  sizes: '(max-width: 750px) 100vw, 750px',
+  src: 'https://www.datocms-assets.com/205/image.png?ar=16%3A9&fit=crop&w=750',
+  srcSet:
+    'https://www.datocms-assets.com/205/image.png?ar=16%3A9&dpr=0.25&fit=crop&w=750 187w,↵https://www.datocms-assets.com/205/image.png?ar=16%3A9&dpr=0.5&fit=crop&w=750 375w,↵https://www.datocms-assets.com/205/image.png?ar=16%3A9&dpr=0.75&fit=crop&w=750 562w,↵https://www.datocms-assets.com/205/image.png?ar=16%3A9&dpr=1&fit=crop&w=750 750w,↵https://www.datocms-assets.com/205/image.png?ar=16%3A9&dpr=1.5&fit=crop&w=750 1125w,↵https://www.datocms-assets.com/205/image.png?ar=16%3A9&dpr=2&fit=crop&w=750 1500w,↵https://www.datocms-assets.com/205/image.png?ar=16%3A9&dpr=3&fit=crop&w=750 2250w,↵https://www.datocms-assets.com/205/image.png?ar=16%3A9&dpr=4&fit=crop&w=750 3000w',
+  title: 'These are awesome, we know that.',
+  width: 750,
+};
+
+const minimalData = {
+  base64: 'data:image/jpeg;base64,<IMAGE-DATA>',
+  height: 421,
+  src: 'https://www.datocms-assets.com/205/image.png?ar=16%3A9&fit=crop&w=750',
+  width: 750,
+};
+
+const minimalDataWithRelativeUrl = {
+  base64: 'data:image/jpeg;base64,<IMAGE-DATA>',
+  height: 421,
+  src: '/205/image.png?ar=16%3A9&fit=crop&w=750',
+  width: 750,
+};
+
+describe('Image', () => {
+  describe('full data', () => {
+    it('renders correctly', () => {
+      const wrapper = mount(<SRCImage data={data} />);
+      expect(wrapper).toMatchSnapshot();
+    });
+  });
+
+  describe('minimal data', () => {
+    it('renders correctly', () => {
+      const wrapper = mount(<SRCImage data={minimalData} />);
+      expect(wrapper).toMatchSnapshot();
+    });
+  });
+
+  describe('minimalDataWithRelativeUrl', () => {
+    it('renders correctly', () => {
+      const wrapper = mount(<SRCImage data={minimalDataWithRelativeUrl} />);
+      expect(wrapper).toMatchSnapshot();
+    });
+  });
+
+  describe('passing className and/or style', () => {
+    it('renders correctly', () => {
+      const wrapper = mount(
+        <SRCImage
+          data={minimalData}
+          className="class-name"
+          style={{ border: '1px solid red' }}
+        />,
+      );
+      expect(wrapper).toMatchSnapshot();
+    });
+  });
+
+  describe('priority=true', () => {
+    it('renders correctly', () => {
+      const wrapper = mount(<SRCImage data={minimalData} priority={true} />);
+      expect(wrapper).toMatchSnapshot();
+    });
+  });
+
+  describe('usePlaceholder=false', () => {
+    it('renders correctly', () => {
+      const wrapper = mount(
+        <SRCImage data={minimalData} usePlaceholder={false} />,
+      );
+      expect(wrapper).toMatchSnapshot();
+    });
+  });
+
+  describe('explicit sizes', () => {
+    it('renders correctly', () => {
+      const wrapper = mount(
+        <SRCImage data={minimalData} sizes="(max-width: 600px) 200px, 50vw" />,
+      );
+      expect(wrapper).toMatchSnapshot();
+    });
+  });
+});

package/src/SRCImage/index.tsx

@@ -0,0 +1,99 @@
+// biome-ignore lint/style/useImportType: wrong warning
+import React from 'react';
+import type { ResponsiveImageType } from '../Image';
+import { buildRegularSource, buildWebpSource, priorityProp } from './utils.js';
+
+export type SRCImagePropTypes = {
+  /** The actual response you get from a DatoCMS `responsiveImage` GraphQL query */
+  data: ResponsiveImageType;
+  /** Additional CSS className for root node */
+  className?: string;
+  /** Additional CSS rules to add to the root node */
+  style?: React.CSSProperties;
+  /**
+   * When true, the image will be considered high priority. Lazy loading is automatically disabled, and fetchpriority="high" is added to the image.
+   * You should use the priority property on any image detected as the Largest Contentful Paint (LCP) element. It may be appropriate to have multiple priority images, as different images may be the LCP element for different viewport sizes.
+   * Should only be used when the image is visible above the fold.
+   **/
+  priority?: boolean;
+  /** Whether the component should use a blurred image placeholder */
+  usePlaceholder?: boolean;
+  /**
+   * The HTML5 `sizes` attribute for the image
+   *
+   * Learn more about srcset and sizes:
+   * -> https://web.dev/learn/design/responsive-images/#sizes
+   * -> https://developer.mozilla.org/en-US/docs/Web/HTML/Element/img#attr-sizes
+   **/
+  sizes?: HTMLImageElement['sizes'];
+  /**
+   * If `data` does not contain `srcSet`, the candidates for the `srcset` of the image will be auto-generated based on these width multipliers
+   *
+   * Default candidate multipliers are [0.25, 0.5, 0.75, 1, 1.5, 2, 3, 4]
+   **/
+  srcSetCandidates?: number[];
+};
+
+export function SRCImage({
+  className,
+  style,
+  data,
+  usePlaceholder = true,
+  priority = false,
+  sizes,
+  srcSetCandidates = [0.25, 0.5, 0.75, 1, 1.5, 2, 3, 4],
+}: SRCImagePropTypes) {
+  const webpSource = buildWebpSource(data, sizes);
+  const regularSource = buildRegularSource(data, sizes, srcSetCandidates);
+
+  const placeholderStyle: React.CSSProperties | undefined =
+    usePlaceholder && data.base64
+      ? {
+          backgroundImage: `url("${data.base64}")`,
+          backgroundSize: 'cover',
+          backgroundRepeat: 'no-repeat',
+          backgroundPosition: '50% 50%',
+          color: 'transparent',
+        }
+      : usePlaceholder && data.bgColor
+        ? { backgroundColor: data.bgColor ?? undefined, color: 'transparent' }
+        : undefined;
+
+  const { width } = data;
+
+  const height =
+    data.height ?? Math.round(data.aspectRatio ? width / data.aspectRatio : 0);
+
+  const sizingStyle = {
+    aspectRatio: `${width} / ${height}`,
+    width: '100%',
+    maxWidth: `${width}px`,
+    height: 'auto',
+  };
+
+  const loadingBehaviourProps = priority
+    ? priorityProp(priority ? 'high' : undefined)
+    : { loading: 'lazy' };
+
+  return (
+    <picture>
+      {webpSource}
+      {regularSource}
+      {data.src && (
+        // biome-ignore lint/a11y/useAltText: We do with alt the best we can
+        <img
+          src={data.src}
+          alt={data.alt ?? ''}
+          title={data.title ?? undefined}
+          {...loadingBehaviourProps}
+          className={className}
+          style={{
+            ...placeholderStyle,
+            ...sizingStyle,
+            ...style,
+          }}
+        />
+      )}
+    </picture>
+  );
+}

package/src/SRCImage/utils.tsx

@@ -0,0 +1,95 @@
+import React, { version } from 'react';
+import type { ResponsiveImageType } from '../Image';
+
+export function priorityProp(
+  fetchPriority?: string,
+): Record<string, string | undefined> {
+  const [majorStr, minorStr] = version.split('.');
+  const major = Number.parseInt(majorStr, 10);
+  const minor = Number.parseInt(minorStr, 10);
+  if (major > 18 || (major === 18 && minor >= 3)) {
+    // In React 18.3.0 or newer, we must use camelCase
+    // prop to avoid "Warning: Invalid DOM property".
+    // See https://github.com/facebook/react/pull/25927
+    return { fetchPriority };
+  }
+  // In React 18.2.0 or older, we must use lowercase prop
+  // to avoid "Warning: Invalid DOM property".
+  return { fetchpriority: fetchPriority };
+}
+
+const bogusBaseUrl = 'https://example.com/';
+
+export const buildSrcSetFromSrc = (
+  src: string | null | undefined,
+  width: number | undefined,
+  candidateMultipliers: number[],
+) => {
+  if (!(src && width)) {
+    return undefined;
+  }
+
+  return candidateMultipliers
+    .map((multiplier) => {
+      const url = new URL(src, bogusBaseUrl);
+
+      if (multiplier !== 1) {
+        url.searchParams.set('dpr', `${multiplier}`);
+        const maxH = url.searchParams.get('max-h');
+        const maxW = url.searchParams.get('max-w');
+        if (maxH) {
+          url.searchParams.set(
+            'max-h',
+            `${Math.floor(Number.parseInt(maxH) * multiplier)}`,
+          );
+        }
+        if (maxW) {
+          url.searchParams.set(
+            'max-w',
+            `${Math.floor(Number.parseInt(maxW) * multiplier)}`,
+          );
+        }
+      }
+
+      const finalWidth = Math.floor(width * multiplier);
+
+      if (finalWidth < 50) {
+        return null;
+      }
+
+      return `${url.toString().replace(bogusBaseUrl, '/')} ${finalWidth}w`;
+    })
+    .filter(Boolean)
+    .join(',');
+};
+
+export function buildWebpSource(
+  data: ResponsiveImageType,
+  sizes: HTMLImageElement['sizes'] | undefined,
+) {
+  return (
+    data.webpSrcSet && (
+      <source
+        srcSet={data.webpSrcSet}
+        sizes={sizes ?? data.sizes ?? undefined}
+        type="image/webp"
+      />
+    )
+  );
+}
+
+export function buildRegularSource(
+  data: ResponsiveImageType,
+  sizes: HTMLImageElement['sizes'] | undefined,
+  srcSetCandidates: number[],
+) {
+  return (
+    <source
+      srcSet={
+        data.srcSet ??
+        buildSrcSetFromSrc(data.src, data.width, srcSetCandidates)
+      }
+      sizes={sizes ?? data.sizes ?? undefined}
+    />
+  );
+}

package/src/Seo/__tests__/index.test.tsx

@@ -7,7 +7,7 @@ import {
   toRemixMeta,
   toRemixV1Meta,
 } from '../index.js';
-import { TitleMetaLinkTag } from '../types.js';
+import type { TitleMetaLinkTag } from '../types.js';
 
 const metaTags: TitleMetaLinkTag[] = [
   {

package/src/Seo/nextUtils.ts

@@ -76,7 +76,7 @@ export function toNextMetadata(
     const { tag, attributes, content } = datum;
 
     if (tag === 'title') {
-      metadata['title'] = content;
+      metadata.title = content;
     }
 
     if (isSeoOrFaviconTag(datum) && isSeoMetaTag(datum)) {
@@ -88,15 +88,15 @@ export function toNextMetadata(
 
           if (parts?.length === 1) {
             if (parts[0] === 'image') {
-              metadata['openGraph'] ||= {};
+              metadata.openGraph ||= {};
 
-              metadata['openGraph']['images'] = {
-                ...metadata['openGraph']['images'],
+              metadata.openGraph.images = {
+                ...metadata.openGraph.images,
                 url: content,
               };
             } else {
-              metadata['openGraph'] = {
-                ...metadata['openGraph'],
+              metadata.openGraph = {
+                ...metadata.openGraph,
                 [camelize(parts[0])]: content,
               };
             }
@@ -104,17 +104,17 @@ export function toNextMetadata(
 
           if (parts?.length === 2) {
             if (parts[0] === 'image' && parts[1] === 'width') {
-              metadata['openGraph'] ||= {};
+              metadata.openGraph ||= {};
 
-              metadata['openGraph']['images'] = {
-                ...metadata['openGraph']['images'],
+              metadata.openGraph.images = {
+                ...metadata.openGraph.images,
                 width: content,
               };
             } else if (parts[0] === 'image' && parts[1] === 'height') {
-              metadata['openGraph'] ||= {};
+              metadata.openGraph ||= {};
 
-              metadata['openGraph']['images'] = {
-                ...metadata['openGraph']['images'],
+              metadata.openGraph.images = {
+                ...metadata.openGraph.images,
                 height: content,
               };
             }
@@ -131,8 +131,8 @@ export function toNextMetadata(
           const [_, ...parts] = name.split(':');
 
           if (parts?.length === 1) {
-            metadata['twitter'] = {
-              ...metadata['twitter'],
+            metadata.twitter = {
+              ...metadata.twitter,
               [camelize(parts[0])]: content,
             };
           }
@@ -146,10 +146,10 @@ export function toNextMetadata(
       if (isAppleTouchIconAttributes(datum.attributes)) {
         const { sizes, href } = datum.attributes;
 
-        metadata['icons'] ||= {};
+        metadata.icons ||= {};
 
-        metadata['icons']['apple'] = [
-          ...(metadata['icons']['apple'] || []),
+        metadata.icons.apple = [
+          ...(metadata.icons.apple || []),
           { url: href, sizes },
         ];
       }
@@ -157,10 +157,10 @@ export function toNextMetadata(
       if (isFaviconAttributes(datum.attributes)) {
         const { sizes, type, rel, href } = datum.attributes;
 
-        metadata['icons'] ||= {};
+        metadata.icons ||= {};
 
-        metadata['icons']['icon'] = [
-          ...(metadata['icons']['icon'] || []),
+        metadata.icons.icon = [
+          ...(metadata.icons.icon || []),
           { url: href, sizes, type, rel },
         ];
       }

package/src/Seo/remixUtils.ts

@@ -1,4 +1,4 @@
-import { SeoOrFaviconTag, TitleMetaLinkTag } from './types.js';
+import type { SeoOrFaviconTag, TitleMetaLinkTag } from './types.js';
 
 interface RemixV1HtmlMetaDescriptor {
   [name: string]: string | string[];