@datocms/svelte 0.0.1

package/components/Image/README.md

@@ -0,0 +1,167 @@
+## Progressive responsive image
+
+`<Image>` is a Svelte component specially designed to work seamlessly with DatoCMS’s [`responsiveImage` GraphQL query](https://www.datocms.com/docs/content-delivery-api/uploads#responsive-images) that optimizes image loading for your sites.
+
+### Table of contents
+
+- [Out-of-the-box features](#out-of-the-box-features)
+- [Setup](#setup)
+- [Usage](#usage)
+- [Example](#example)
+- [Props](#props)
+  - [Layout mode](#layout-mode)
+  - [The `ResponsiveImage` object](#the-responsiveimage-object)
+
+### Out-of-the-box features
+
+- Offers optimized version of images for browsers that support WebP/AVIF format
+- Generates multiple smaller images so smartphones and tablets don’t download desktop-sized images
+- Efficiently lazy loads images to speed initial page load and save bandwidth
+- Holds the image position so your page doesn’t jump while images load
+- Uses either blur-up or background color techniques to show a preview of the image while it loads
+
+## Intersection Observer
+
+Intersection Observer is the API used to determine if the image is inside the viewport or not. [Browser support is really good](https://caniuse.com/intersectionobserver) - With Safari adding support in 12.1, all major browsers now support Intersection Observers natively.
+
+If the IntersectionObserver object is not available, the component treats the image as it's always visible in the viewport. Feel free to add a [polyfill](https://www.npmjs.com/package/intersection-observer) so that it will also 100% work on older versions of iOS and IE11.
+
+### Setup
+
+You can import the components like this:
+
+```js
+import { Image } from '@datocms/svelte';
+```
+
+### Usage
+
+1. Use `<Image>` it in place of the regular `<img />` tag
+2. Write a GraphQL query to your DatoCMS project using the [`responsiveImage` query](https://www.datocms.com/docs/content-delivery-api/images-and-videos#responsive-images)
+
+The GraphQL query returns multiple thumbnails with optimized compression. The `<Image>` component automatically sets up the "blur-up" effect as well as lazy loading of images further down the screen.
+
+### Example
+
+For a fully working example take a look at [`routes` directory](https://github.com/datocms/datocms-svelte/tree/main/src/routes/image/+page.svelte).
+
+Here is a minimal starting point:
+
+```svelte
+<script>
+
+import { onMount } from 'svelte';
+
+import { Image } from '@datocms/svelte';
+
+const query = gql`
+  query {
+    blogPost {
+      title
+      cover {
+        responsiveImage(
+          imgixParams: { fit: crop, w: 300, h: 300, auto: format }
+        ) {
+          # always required
+          src
+          width
+          height
+          # not required, but strongly suggested!
+          alt
+          title
+          # blur-up placeholder, JPEG format, base64-encoded, or...
+          base64
+          # background color placeholder
+          bgColor
+          # you can omit `sizes` if you explicitly pass the `sizes` prop to the image component
+          sizes
+        }
+      }
+    }
+  }
+`;
+
+export let data = null;
+
+onMount(async () => {
+  const response = await fetch('https://graphql.datocms.com/', {
+    method: 'POST',
+    headers: {
+      'Content-Type': 'application/json',
+      Authorization: "Bearer faeb9172e232a75339242faafb9e56de8c8f13b735f7090964",
+    },
+    body: JSON.stringify({ query })
+  })
+
+  const json = await response.json()
+
+  data = json.data;
+});
+
+</script>
+
+{#if data}
+  <Image data={data.blogPost.cover.responsiveImage} />
+{/if}
+```
+
+### Props
+
+| prop                  | type                                             | default           | required           | description                                                                                                                                                                                                                                                                                   |
+| --------------------- | ------------------------------------------------ | ----------------- | ------------------ | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| data                  | `ResponsiveImage` object                         |                   | :white_check_mark: | The actual response you get from a DatoCMS `responsiveImage` GraphQL query.                                                                                                                                                                                                                   |
+| class                 | string                                           | null              | :x:                | Additional CSS class of root node                                                                                                                                                                                                                                                             |
+| style                 | CSS properties                                   | null              | :x:                | Additional CSS rules to add to the root node                                                                                                                                                                                                                                                  |
+| pictureClass          | string                                           | null              | :x:                | Additional CSS class for the inner `<picture />` tag                                                                                                                                                                                                                                          |
+| pictureStyle          | CSS properties                                   | null              | :x:                | Additional CSS rules to add to the inner `<picture />` tag                                                                                                                                                                                                                                    |
+| layout                | 'intrinsic' \| 'fixed' \| 'responsive' \| 'fill' | "intrinsic"       | :x:                | The layout behavior of the image as the viewport changes size                                                                                                                                                                                                                                 |
+| fadeInDuration        | integer                                          | 500               | :x:                | Duration (in ms) of the fade-in transition effect upoad image loading                                                                                                                                                                                                                         |
+| intersectionThreshold | float                                            | 0                 | :x:                | Indicate at what percentage of the placeholder visibility the loading of the image should be triggered. A value of 0 means that as soon as even one pixel is visible, the callback will be run. A value of 1.0 means that the threshold isn't considered passed until every pixel is visible. |
+| intersectionMargin    | string                                           | "0px 0px 0px 0px" | :x:                | Margin around the placeholder. Can have values similar to the CSS margin property (top, right, bottom, left). The values can be percentages. This set of values serves to grow or shrink each side of the placeholder element's bounding box before computing intersections.                  |
+| lazyLoad              | Boolean                                          | true              | :x:                | Wheter enable lazy loading or not                                                                                                                                                                                                                                                             |
+| explicitWidth         | Boolean                                          | false             | :x:                | Wheter the image wrapper should explicitely declare the width of the image or keep it fluid                                                                                                                                                                                                   |
+| objectFit             | String                                           | null              | :x:                | Defines how the image will fit into its parent container when using layout="fill"                                                                                                                                                                                                             |
+| objectPosition        | String                                           | null              | :x:                | Defines how the image is positioned within its parent element when using layout="fill".                                                                                                                                                                                                       |
+| priority              | Boolean                                          | false             | :x:                | Disables lazy loading, and sets the image [fetchPriority](https://developer.mozilla.org/en-US/docs/Web/API/HTMLImageElement/fetchPriority) to "high"                                                                                                                         |
+| srcSetCandidates      | Array<number>                                    | [0.25, 0.5, 0.75, 1, 1.5, 2, 3, 4] | :x:                | If `data` does not contain `srcSet`, the candidates for the `srcset` attribute of the image will be auto-generated based on these width multipliers                                                                                                                          |
+| sizes                 | string                                           | undefined         | :x:                | The HTML5 [`sizes`](https://web.dev/learn/design/responsive-images/#sizes) attribute for the image (will be used `data.sizes` as a fallback)                                                                                                                                 |
+| onLoad                | () => void                                       | undefined         | :x:                | Function triggered when the image has finished loading                                                                                                                                                                                                                       |
+| usePlaceholder        | Boolean                                          | true              | :x:                | Whether the component should use a blurred image placeholder                                                                                                                                                                                                                 |
+
+#### Layout mode
+
+With the `layout` property, you can configure the behavior of the image as the viewport changes size:
+
+- When `intrinsic`, the image will scale the dimensions down for smaller viewports, but maintain the original dimensions for larger viewports.
+- When `fixed`, the image dimensions will not change as the viewport changes (no responsiveness) similar to the native `img` element.
+- When `responsive` (default behaviour), the image will scale the dimensions down for smaller viewports and scale up for larger viewports.
+- When `fill`, the image will stretch both width and height to the dimensions of the parent element, provided the parent element is relative.
+  - This is usually paired with the `objectFit` and `objectPosition` properties.
+  - Ensure the parent element has `position: relative` in their stylesheet.
+
+#### The `ResponsiveImage` object
+
+The `data` prop expects an object with the same shape as the one returned by `responsiveImage` GraphQL call. It's up to you to make a GraphQL query that will return the properties you need for a specific use of the `<datocms-image>` component.
+
+- The minimum required properties for `data` are: `src`, `width` and `height`;
+- `alt` and `title`, while not mandatory, are all highly suggested, so remember to use them!
+- If you don't request `srcSet`, the component will auto-generate an `srcset` based on `src` + the `srcSetCandidates` prop (it can help reducing the GraphQL response size drammatically when many images are returned);
+- We strongly to suggest to always specify [`{ auto: format }`](https://docs.imgix.com/apis/rendering/auto/auto#format) in your `imgixParams`, instead of requesting `webpSrcSet`, so that you can also take advantage of more performant optimizations (AVIF), without increasing GraphQL response size;
+- If you request both the `bgColor` and `base64` property, the latter will take precedence, so just avoid querying both fields at the same time, as it will only make the GraphQL response bigger :wink:;
+- You can avoid requesting `sizes` and directly pass a `sizes` prop to the component to reduce the GraphQL response size;
+
+Here's a complete recap of what `responsiveImage` offers:
+
+| property    | type    | required           | description                                                                                     |
+| ----------- | ------- | ------------------ | ----------------------------------------------------------------------------------------------- |
+| src         | string  | :white_check_mark: | The `src` attribute for the image                                                               |
+| width       | integer | :white_check_mark: | The width of the image                                                                          |
+| height      | integer | :white_check_mark: | The height of the image                                                                         |
+| alt         | string  | :x:                | Alternate text (`alt`) for the image (not required, but strongly suggested!)                    |
+| title       | string  | :x:                | Title attribute (`title`) for the image (not required, but strongly suggested!)                 |
+| sizes       | string  | :x:                | The HTML5 `sizes` attribute for the image (omit it if you're already passing a `sizes` prop to the Image component) |
+| base64      | string  | :x:                | A base64-encoded thumbnail to offer during image loading                                        |
+| bgColor     | string  | :x:                | The background color for the image placeholder (omit it if you're already requesting `base64`)  |
+| srcSet      | string  | :x:                | The HTML5 `srcSet` attribute for the image (can be omitted, the Image component knows how to build it based on `src`) |
+| webpSrcSet  | string  | :x:                | The HTML5 `srcSet` attribute for the image in WebP format (deprecated, it's better to use the [`auto=format`](https://docs.imgix.com/apis/rendering/auto/auto#format) Imgix transform instead) |
+| aspectRatio | float   | :x:                | The aspect ratio (width/height) of the image                                                    |

package/components/Image/Sizer.svelte

@@ -0,0 +1,17 @@
+<script>import { encode } from "universal-base64";
+let klass = null;
+export { klass as class };
+export let width;
+export let height;
+export let aspectRatio;
+let svg = `<svg xmlns="http://www.w3.org/2000/svg" width="${width}" height="${height ?? (aspectRatio ? width / aspectRatio : 0)}"></svg>`;
+</script>
+
+<img
+	class={klass}
+	style:display="block"
+	style:width="100%"
+	src="data:image/svg+xml;base64,{encode(svg)}"
+	aria-hidden="true"
+	alt=""
+/>

package/components/Image/Sizer.svelte.d.ts

@@ -0,0 +1,19 @@
+import { SvelteComponentTyped } from "svelte";
+declare const __propDef: {
+    props: {
+        class?: string | null | undefined;
+        width: number;
+        height: number | null | undefined;
+        aspectRatio: number | undefined;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export type SizerProps = typeof __propDef.props;
+export type SizerEvents = typeof __propDef.events;
+export type SizerSlots = typeof __propDef.slots;
+export default class Sizer extends SvelteComponentTyped<SizerProps, SizerEvents, SizerSlots> {
+}
+export {};

package/components/Image/Source.svelte

@@ -0,0 +1,6 @@
+<script>export let srcset;
+export let sizes;
+export let type = null;
+</script>
+
+<source {srcset} {sizes} {type} />

package/components/Image/Source.svelte.d.ts

@@ -0,0 +1,18 @@
+import { SvelteComponentTyped } from "svelte";
+declare const __propDef: {
+    props: {
+        srcset: string | null;
+        sizes: string | null;
+        type?: string | null | undefined;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export type SourceProps = typeof __propDef.props;
+export type SourceEvents = typeof __propDef.events;
+export type SourceSlots = typeof __propDef.slots;
+export default class Source extends SvelteComponentTyped<SourceProps, SourceEvents, SourceSlots> {
+}
+export {};

package/components/Image/__tests__/Image.svelte.test.d.ts

@@ -0,0 +1 @@
+import '@testing-library/jest-dom';

package/components/Image/__tests__/Image.svelte.test.js

@@ -0,0 +1,44 @@
+import { describe, expect, it, vi } from 'vitest';
+import '@testing-library/jest-dom';
+import { act, fireEvent, render, screen } from '@testing-library/svelte';
+import { mockIntersectionObserver } from 'jsdom-testing-mocks';
+import { completeData, minimalData, minimalDataWithRelativeUrl } from './__fixtures__/image';
+import { Image } from '../../..';
+const io = mockIntersectionObserver();
+describe('Image', () => {
+    ['intrinsic', 'fixed', 'responsive', 'fill'].forEach((layout) => {
+        Object.entries({ completeData, minimalData, minimalDataWithRelativeUrl }).forEach(([name, data]) => {
+            describe(`layout=${layout}`, () => {
+                describe(`data=${name}`, () => {
+                    describe("when the component doesn't intersect the viewport", () => {
+                        it('only renders the placeholder elements ', () => {
+                            const onLoad = vi.fn();
+                            const { container, component } = render(Image, { props: { data, layout } });
+                            component.$on('load', onLoad);
+                            const picture = screen.queryByTestId('picture');
+                            expect(picture).not.toBeInTheDocument();
+                            expect(onLoad).not.toHaveBeenCalled();
+                            expect(container).toMatchSnapshot();
+                        });
+                    });
+                    describe('when the component intersects the viewport', () => {
+                        it('shows the image ', async () => {
+                            const onLoad = vi.fn();
+                            const { container, component } = render(Image, { props: { data, layout } });
+                            component.$on('load', onLoad);
+                            await act(async () => {
+                                io.enterNode(await screen.findByTestId('image'));
+                            });
+                            const picture = screen.getByTestId('picture');
+                            const img = screen.getByTestId('img');
+                            fireEvent.load(img);
+                            expect(picture).toBeInTheDocument();
+                            expect(onLoad).toHaveBeenCalled();
+                            expect(container).toMatchSnapshot();
+                        });
+                    });
+                });
+            });
+        });
+    });
+});

package/components/Image/__tests__/__fixtures__/image.d.ts

@@ -0,0 +1,40 @@
+export declare const completeData: {
+    alt: string;
+    aspectRatio: number;
+    base64: string;
+    height: number;
+    sizes: string;
+    src: string;
+    srcSet: string;
+    title: string;
+    width: number;
+};
+export declare const minimalData: {
+    base64: string;
+    height: number;
+    src: string;
+    width: number;
+};
+export declare const minimalDataWithRelativeUrl: {
+    base64: string;
+    height: number;
+    src: string;
+    width: number;
+};
+export declare const completeData2: {
+    alt: null;
+    base64: string;
+    aspectRatio: number;
+    height: number;
+    sizes: string;
+    src: string;
+    srcSet: string;
+    title: null;
+    width: number;
+};
+export declare const minimalData2: {
+    base64: string;
+    height: number;
+    src: string;
+    width: number;
+};

package/components/Image/__tests__/__fixtures__/image.js

@@ -0,0 +1,40 @@
+export const completeData = {
+    alt: 'DatoCMS swag',
+    aspectRatio: 1.7777777777777777,
+    base64: 'data:image/jpeg;base64,/9j/4AAQSkZJRgABAQAAAQABAAD/2wCEAAoHBwgHBgoICAgLFQoLDhgQDg0NDh0eHREYIx8lJCIrHB0dLSs7GikyKSEuKjUlKDk1MjIyHyo4PTc+PDcxPjUBCgsLDg0OHBAQHDsoIig7Ozs7Ozs7OzsvOzs7Ozs7Ozs7Lzs7Ozs7Ozs7OzsvOzs7NTsvLy87NTU1Ly8vLzsvL//AABEIAA0AGAMBIgACEQEDEQH/xAAYAAACAwAAAAAAAAAAAAAAAAAGBwABBP/EACEQAAEEAAYDAAAAAAAAAAAAAAEAAgMEBQYHESEiFWFx/8QAFQEBAQAAAAAAAAAAAAAAAAAAAwL/xAAZEQADAAMAAAAAAAAAAAAAAAAAAQIRITH/2gAMAwEAAhEDEQA/AFxLgDWTsAd1J5TGy7hEYqNAaNgECX7sjLMQAHJTEy1Zcarfia4lJMauAxqBhLY6ZlaOzDurWvUOd3jZPfCiEh4xs//Z',
+    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
+};
+export const minimalData = {
+    base64: 'data:image/jpeg;base64,/9j/4AAQSkZJRgABAQAAAQABAAD/2wCEAAoHBwgHBgoICAgLFQoLDhgQDg0NDh0eHREYIx8lJCIrHB0dLSs7GikyKSEuKjUlKDk1MjIyHyo4PTc+PDcxPjUBCgsLDg0OHBAQHDsoIig7Ozs7Ozs7OzsvOzs7Ozs7Ozs7Lzs7Ozs7Ozs7OzsvOzs7NTsvLy87NTU1Ly8vLzsvL//AABEIAA0AGAMBIgACEQEDEQH/xAAYAAACAwAAAAAAAAAAAAAAAAAGBwABBP/EACEQAAEEAAYDAAAAAAAAAAAAAAEAAgMEBQYHESEiFWFx/8QAFQEBAQAAAAAAAAAAAAAAAAAAAwL/xAAZEQADAAMAAAAAAAAAAAAAAAAAAQIRITH/2gAMAwEAAhEDEQA/AFxLgDWTsAd1J5TGy7hEYqNAaNgECX7sjLMQAHJTEy1Zcarfia4lJMauAxqBhLY6ZlaOzDurWvUOd3jZPfCiEh4xs//Z',
+    height: 421,
+    src: 'https://www.datocms-assets.com/205/image.png?ar=16%3A9&fit=crop&w=750',
+    width: 750
+};
+export const minimalDataWithRelativeUrl = {
+    base64: 'data:image/jpeg;base64,/9j/4AAQSkZJRgABAQAAAQABAAD/2wCEAAoHBwgHBgoICAgLFQoLDhgQDg0NDh0eHREYIx8lJCIrHB0dLSs7GikyKSEuKjUlKDk1MjIyHyo4PTc+PDcxPjUBCgsLDg0OHBAQHDsoIig7Ozs7Ozs7OzsvOzs7Ozs7Ozs7Lzs7Ozs7Ozs7OzsvOzs7NTsvLy87NTU1Ly8vLzsvL//AABEIAA0AGAMBIgACEQEDEQH/xAAYAAACAwAAAAAAAAAAAAAAAAAGBwABBP/EACEQAAEEAAYDAAAAAAAAAAAAAAEAAgMEBQYHESEiFWFx/8QAFQEBAQAAAAAAAAAAAAAAAAAAAwL/xAAZEQADAAMAAAAAAAAAAAAAAAAAAQIRITH/2gAMAwEAAhEDEQA/AFxLgDWTsAd1J5TGy7hEYqNAaNgECX7sjLMQAHJTEy1Zcarfia4lJMauAxqBhLY6ZlaOzDurWvUOd3jZPfCiEh4xs//Z',
+    height: 421,
+    src: '/205/image.png?ar=16%3A9&fit=crop&w=750',
+    width: 750
+};
+export const completeData2 = {
+    alt: null,
+    base64: 'data:image/jpeg;base64,/9j/4AAQSkZJRgABAQAAAQABAAD/2wCEAAoHBwgHBgoIFAgLChEXDg0VDg0NGRUVDREVFxMZHRYVFiEaHysjGh0oHRUWJDUlKC0vMjIyHSI4PTcwPCsxMi8BCgsLDg0OFRAQHC8cIigvLy8vLy8vLy8vLy8vLy8vLy8vLy8vLy8vLy8vLy8vLy8vLy8vLy8vLy8vLy8vLy8vL//AABEIABAAGAMBIgACEQEDEQH/xAAYAAACAwAAAAAAAAAAAAAAAAAABQEDBv/EAB0QAAEEAgMAAAAAAAAAAAAAAAQAAQIDETEFEhP/xAAVAQEBAAAAAAAAAAAAAAAAAAACAf/EABoRAAICAwAAAAAAAAAAAAAAAAABAgMSEzH/2gAMAwEAAhEDEQA/AN2QdCbbVNRUYvtJOXukFX2yo4Ilz3zlVzZFTHrHt17WMhBA3lDKEc5C1Vn/2Q==',
+    aspectRatio: 1.5,
+    height: 3456,
+    sizes: '(max-width: 5184px) 100vw, 5184px',
+    src: 'https://www.datocms-assets.com/23796/1612503468-jairph-ypl0a8v9qgo-unsplash.jpg',
+    srcSet: 'https://www.datocms-assets.com/23796/1612503468-jairph-ypl0a8v9qgo-unsplash.jpg?dpr=0.25 1296w,https://www.datocms-assets.com/23796/1612503468-jairph-ypl0a8v9qgo-unsplash.jpg?dpr=0.5 2592w,https://www.datocms-assets.com/23796/1612503468-jairph-ypl0a8v9qgo-unsplash.jpg?dpr=0.75 3888w,https://www.datocms-assets.com/23796/1612503468-jairph-ypl0a8v9qgo-unsplash.jpg 5184w',
+    title: null,
+    width: 5184
+};
+export const minimalData2 = {
+    base64: 'data:image/jpeg;base64,/9j/4AAQSkZJRgABAQAAAQABAAD/2wCEAAoHBwgHBgoICBELERULDg8VDg0NDxUOFhEPFxgrGRYfFiEaHysjJh0oKRcWJDUxKC0vMjIyGSI4PTcwPCsxMi8BCgsLDg0OHBAQHDslIig7Ozs7NTs7Ly81Lzw7Ozs7Ly8vLy8vLy8vLy8vLy8vLy8vLy8vLy81Ly8vLy8vLy8vL//AABEIABgAGAMBIgACEQEDEQH/xAAaAAACAgMAAAAAAAAAAAAAAAAABQEHAwQG/8QAHxAAAgEEAgMAAAAAAAAAAAAAAAEDAgQFEVFxEiFB/8QAFQEBAQAAAAAAAAAAAAAAAAAAAwT/xAAbEQEAAgMBAQAAAAAAAAAAAAABAAIREiETA//aAAwDAQACEQMRAD8Ap1LdQ/sIW4kJKqfCVHT41JwroNztH4kUZdOOjtgbGfibjTXxgKNoCA8ii79NMe4m43Et8EAM1G8mtdr8xJmv0pVokAH1JB6WXM//2Q==',
+    height: 1994,
+    src: 'https://www.datocms-assets.com/23796/1583844698-gift-habeshaw-pgxxjrtfnjq-unsplash-edited.png',
+    width: 1994
+};