@datocms/svelte 2.0.0 → 2.0.2

package/README.md

@@ -1,7 +1,9 @@
 <!--datocms-autoinclude-header start-->
+
 <a href="https://www.datocms.com/"><img src="https://www.datocms.com/images/full_logo.svg" height="60"></a>
 
 👉 [Visit the DatoCMS homepage](https://www.datocms.com) or see [What is DatoCMS?](#what-is-datocms)
+
 <!--datocms-autoinclude-header end-->
 
 # @datocms/svelte
@@ -14,11 +16,18 @@ A set of components to work faster with [DatoCMS](https://www.datocms.com/) in S
 - Written in TypeScript;
 - Usable both client and server side;
 
-## Table of Contents
+### Table of Contents
+
+<!-- START doctoc generated TOC please keep comment here to allow auto update -->
+<!-- DON'T EDIT THIS SECTION, INSTEAD RE-RUN doctoc TO UPDATE -->
 
-- [Features](#features)
-- [Installation](#installation)
-- [Development](#development)
+  - [Features](#features)
+  - [Installation](#installation)
+  - [Development](#development)
+  - [Building](#building)
+- [What is DatoCMS?](#what-is-datocms)
+
+<!-- END doctoc generated TOC please keep comment here to allow auto update -->
 
 ## Features
 
@@ -36,6 +45,7 @@ Components:
 ```
 npm install @datocms/svelte
 ```
+
 ## Development
 
 This repository contains some examples in the `app/routes` folder. You can use them to locally test your changes to the package:
@@ -43,6 +53,7 @@ This repository contains some examples in the `app/routes` folder. You can use t
 ```bash
 npm run dev
 ```
+
 ## Building
 
 To create a production version of this library:
@@ -52,8 +63,9 @@ npm run build
 ```
 
 <!--datocms-autoinclude-footer start-->
------------------
+
 # What is DatoCMS?
+
 <a href="https://www.datocms.com/"><img src="https://www.datocms.com/images/full_logo.svg" height="60"></a>
 
 [DatoCMS](https://www.datocms.com/) is the REST & GraphQL Headless CMS for the modern web.
@@ -68,6 +80,7 @@ Trusted by over 25,000 enterprise businesses, agency partners, and individuals a
 - 🆕 Stay up to date on new features and fixes on the [changelog](https://www.datocms.com/product-updates)
 
 **Our featured repos:**
+
 - [datocms/react-datocms](https://github.com/datocms/react-datocms): React helper components for images, Structured Text rendering, and more
 - [datocms/js-rest-api-clients](https://github.com/datocms/js-rest-api-clients): Node and browser JavaScript clients for updating and administering your content. For frontend fetches, we recommend using our [GraphQL Content Delivery API](https://www.datocms.com/docs/content-delivery-api) instead.
 - [datocms/cli](https://github.com/datocms/cli): Command-line interface that includes our [Contentful importer](https://github.com/datocms/cli/tree/main/packages/cli-plugin-contentful) and [Wordpress importer](https://github.com/datocms/cli/tree/main/packages/cli-plugin-wordpress)
@@ -76,4 +89,5 @@ Trusted by over 25,000 enterprise businesses, agency partners, and individuals a
 - Frontend examples in different frameworks: [Next.js](https://github.com/datocms/nextjs-demo), [Vue](https://github.com/datocms/vue-datocms) and [Nuxt](https://github.com/datocms/nuxtjs-demo), [Svelte](https://github.com/datocms/datocms-svelte) and [SvelteKit](https://github.com/datocms/sveltekit-demo), [Astro](https://github.com/datocms/datocms-astro-blog-demo), [Remix](https://github.com/datocms/remix-example). See [all our starter templates](https://www.datocms.com/marketplace/starters).
 
 Or see [all our public repos](https://github.com/orgs/datocms/repositories?q=&type=public&language=&sort=stargazers)
+
 <!--datocms-autoinclude-footer end-->

package/package/components/Head/Head.svelte.d.ts

@@ -1,7 +1,7 @@
 import { SvelteComponentTyped } from "svelte";
 export interface TitleMetaLinkTag {
     /** the tag for the meta information */
-    tag: "title" | "meta" | "link";
+    tag: 'title' | 'meta' | 'link';
     /** the inner content of the meta tag */
     content?: string | null | undefined;
     /** the HTML attributes to attach to the meta tag */

package/package/components/Head/README.md

@@ -1,4 +1,4 @@
-## Social share, SEO and Favicon meta tags
+# Social share, SEO and Favicon meta tags
 
 Just like the image component, `<Head />` is a component specially designed to work seamlessly with DatoCMS’s [`_seoMetaTags` and `faviconMetaTags` GraphQL queries](https://www.datocms.com/docs/content-delivery-api/seo) so that you can handle proper SEO in your pages.
 
@@ -6,27 +6,32 @@ You can use `<Head />` your components, and it will inject title, meta and link
 
 ### Table of contents
 
+<!-- START doctoc generated TOC please keep comment here to allow auto update -->
+<!-- DON'T EDIT THIS SECTION, INSTEAD RE-RUN doctoc TO UPDATE -->
+
 - [Usage](#usage)
 - [Example](#example)
 
-### Usage
+<!-- END doctoc generated TOC please keep comment here to allow auto update -->
+
+## Usage
 
 `<Head />`'s `data` prop takes an array of `Tag`s in the exact form they're returned by the following [DatoCMS GraphQL API](https://www.datocms.com/docs/content-delivery-api/seo) queries:
 
 - `_seoMetaTags` query on any record, or
 - `faviconMetaTags` on the global `_site` object.
 
-### Example
+## Example
 
 Here is an example:
 
 ```svelte
 <script>
-  import { onMount } from 'svelte';
+	import { onMount } from 'svelte';
 
-  import { Head } from '@datocms/svelte';
+	import { Head } from '@datocms/svelte';
 
-  const query = `
+	const query = `
     query {
       page: homepage {
         title
@@ -46,22 +51,22 @@ Here is an example:
     }
   `;
 
-  export let data = null;
+	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 })
-    });
+	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();
+		const json = await response.json();
 
-    data = [...json.data.page.seo, ...json.data.site.favicon];
-  });
+		data = [...json.data.page.seo, ...json.data.site.favicon];
+	});
 </script>
 
 <Head {data} />

package/package/components/Image/Image.svelte

@@ -1,89 +1,23 @@
-<script context="module">import IntersectionObserver from "svelte-intersection-observer";
-const isWindowDefined = typeof window !== "undefined";
-const parseStyleAttributes = (styleString) => {
-  const styleRules = {};
-  styleString.split(";").forEach((rule) => {
-    const [key, value] = rule.split(":").map((part) => part.trim());
-    if (key && value) {
-      styleRules[key] = value;
-    }
-  });
-  return styleRules;
-};
-const noTypeCheck = (x) => x;
-const imageAddStrategy = ({ lazyLoad, intersecting, loaded }) => {
-  const isIntersectionObserverAvailable = isWindowDefined ? !!window.IntersectionObserver : false;
-  if (!lazyLoad) {
-    return true;
-  }
-  if (!isWindowDefined) {
-    return false;
-  }
-  if (isIntersectionObserverAvailable) {
-    return intersecting || loaded;
-  }
-  return true;
-};
-const imageShowStrategy = ({ lazyLoad, loaded }) => {
-  const isIntersectionObserverAvailable = isWindowDefined ? !!window.IntersectionObserver : false;
-  if (!lazyLoad) {
-    return true;
-  }
-  if (!isWindowDefined) {
-    return false;
-  }
-  if (isIntersectionObserverAvailable) {
-    return loaded;
-  }
-  return true;
-};
-const bogusBaseUrl = "https://example.com/";
-const buildSrcSet = (src, width, candidateMultipliers) => {
-  if (!(src && width)) {
-    return void 0;
-  }
-  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(",");
-};
-</script>
-
 <script>import { createEventDispatcher } from "svelte";
-import Sizer from "./Sizer.svelte";
-import Placeholder from "./Placeholder.svelte";
-import Source from "./Source.svelte";
-const dispatch = createEventDispatcher();
-let element;
-let intersecting = false;
-let loaded = false;
-export let alt = null;
+import IntersectionObserver from "svelte-intersection-observer";
+import { imageAddStrategy, imageShowStrategy, absolutePositioning, universalBtoa } from "./utils";
+import {
+  buildSrcSet,
+  dumpStyleAttributes,
+  noTypeCheck,
+  parseStyleAttributes
+} from "../NakedImage/utils";
 export let data;
-let klass = null;
-export { klass as class };
+let rootClass = null;
+export { rootClass as class };
 export let pictureClass = null;
+export let placeholderClass = null;
 export let fadeInDuration = 500;
 export let intersectionThreshold = 0;
 export let intersectionMargin = "0px";
-let rawLazyLoad = true;
-export { rawLazyLoad as lazyLoad };
 export let style = null;
 export let pictureStyle = null;
+export let placeholderStyle = null;
 export let layout = "intrinsic";
 export let objectFit = void 0;
 export let objectPosition = void 0;
@@ -91,105 +25,132 @@ export let usePlaceholder = true;
 export let sizes = null;
 export let priority = false;
 export let srcSetCandidates = [0.25, 0.5, 0.75, 1, 1.5, 2, 3, 4];
+const dispatch = createEventDispatcher();
+let rootEl;
+let inView = false;
+let loaded = false;
 $:
-  ({ width, height, aspectRatio } = data);
-$:
-  lazyLoad = priority ? false : rawLazyLoad;
+  addImage = imageAddStrategy({ priority, inView, loaded });
 $:
-  addImage = imageAddStrategy({
-    lazyLoad,
-    intersecting,
-    loaded
-  });
+  showImage = imageShowStrategy({ priority, inView, loaded });
 $:
-  showImage = imageShowStrategy({
-    lazyLoad,
-    intersecting,
-    loaded
-  });
-const absolutePositioning = {
-  position: "absolute",
-  left: 0,
-  top: 0,
-  width: "100%",
-  height: "100%",
-  "max-width": "none",
-  "max-height": "none"
-};
+  transition = fadeInDuration > 0 ? `opacity ${fadeInDuration}ms` : void 0;
+let basePlaceholderStyle;
 $:
-  computedStyle = {
-    overflow: "hidden",
-    ...layout === "fill" ? absolutePositioning : layout === "intrinsic" ? { position: "relative", width: "100%", "max-width": `${width}px` } : layout === "fixed" ? { position: "relative", width: `${width}px` } : { position: "relative", width: "100%" },
-    ...parseStyleAttributes(style || "")
+  basePlaceholderStyle = {
+    transition,
+    opacity: showImage ? 0 : 1,
+    // During the opacity transition of the placeholder to the definitive version,
+    // hardware acceleration is triggered. This results in the browser trying to render the
+    // placeholder with your GPU, causing blurred edges. Solution: style the placeholder
+    // so the edges overflow the container
+    position: "absolute",
+    left: "-5%",
+    top: "-5%",
+    width: "110%",
+    height: "110%",
+    "max-width": "none",
+    "max-height": "none",
+    ...parseStyleAttributes(placeholderStyle)
   };
-let transition = fadeInDuration > 0 ? `opacity ${fadeInDuration}ms` : void 0;
+$:
+  ({ width, aspectRatio } = data);
+$:
+  height = data.height ?? (aspectRatio ? width / aspectRatio : 0);
+$:
+  svg = `<svg xmlns="http://www.w3.org/2000/svg" width="${width}" height="${height}"></svg>`;
 </script>
 
 <IntersectionObserver
-	{element}
-	bind:intersecting
+	element={rootEl}
+	bind:intersecting={inView}
 	threshold={intersectionThreshold}
 	rootMargin={intersectionMargin}
 >
 	<div
-		bind:this={element}
-		class={klass}
-		{style}
-		style:overflow={computedStyle.overflow}
-		style:position={computedStyle.position}
-		style:width={computedStyle.width}
-		style:height={computedStyle.height}
-		style:max-width={computedStyle['max-width']}
-		style:max-height={computedStyle['max-height']}
+		bind:this={rootEl}
+		class={rootClass}
+		style={dumpStyleAttributes({
+			overflow: 'hidden',
+			...(layout === 'fill'
+				? absolutePositioning
+				: layout === 'intrinsic'
+				? { position: 'relative', width: '100%', 'max-width': `${width}px` }
+				: layout === 'fixed'
+				? { position: 'relative', width: `${width}px` }
+				: { position: 'relative', width: '100%' }),
+			...parseStyleAttributes(style)
+		})}
 		data-testid="image"
 	>
-		{#if layout !== 'fill' && width}
-			<Sizer {width} {height} {aspectRatio} />
+		{#if layout !== 'fill'}
+			<img
+				class={pictureClass}
+				style={dumpStyleAttributes({
+					display: 'block',
+					width: '100%',
+					...parseStyleAttributes(pictureStyle)
+				})}
+				src={`data:image/svg+xml;base64,${universalBtoa(svg)}`}
+				aria-hidden="true"
+				alt=""
+			/>
 		{/if}
 
-		{#if usePlaceholder && (data.bgColor || data.base64)}
-			<Placeholder
-				base64={data.base64}
-				backgroundColor={data.bgColor}
-				{objectFit}
-				{objectPosition}
-				{showImage}
-				{fadeInDuration}
-			/>
+		{#if usePlaceholder}
+			{#if data.base64}
+				<img
+					aria-hidden="true"
+					alt=""
+					src={data.base64}
+					class={placeholderClass}
+					style={dumpStyleAttributes({
+						'object-fit': objectFit,
+						'object-position': objectPosition,
+						...basePlaceholderStyle
+					})}
+				/>
+			{:else if data.bgColor}
+				<div
+					class={placeholderClass}
+					style={dumpStyleAttributes({
+						'background-color': data.bgColor,
+						...basePlaceholderStyle
+					})}
+				/>
+			{/if}
 		{/if}
 
 		{#if addImage}
-			<picture style={pictureStyle} data-testid="picture">
+			<picture data-testid="picture">
 				{#if data.webpSrcSet}
-					<Source srcset={data.webpSrcSet} sizes={sizes ?? data.sizes ?? null} type="image/webp" />
+					<source srcset={data.webpSrcSet} sizes={sizes ?? data.sizes ?? null} type="image/webp" />
 				{/if}
-				<Source
+				<source
 					srcset={data.srcSet ?? buildSrcSet(data.src, data.width, srcSetCandidates) ?? null}
 					sizes={sizes ?? data.sizes ?? null}
 				/>
 				{#if data.src}
 					<img
-						{...noTypeCheck({
-							// See: https://github.com/sveltejs/language-tools/issues/1026#issuecomment-1002839154
-							fetchpriority: priority ? 'high' : undefined
-						})}
 						src={data.src}
-						alt={alt ?? data.alt ?? ''}
+						alt={data.alt ?? ''}
 						title={data.title ?? null}
 						on:load={() => {
 							dispatch('load');
 							loaded = true;
 						}}
+						{...noTypeCheck({
+							fetchpriority: priority ? 'high' : undefined
+						})}
 						class={pictureClass}
-						style:opacity={showImage ? 1 : 0}
-						style:transition
-						style:position="absolute"
-						style:left="0"
-						style:top="0"
-						style:width="100%"
-						style:height="100%"
-						style:object-fit={objectFit}
-						style:object-position={objectPosition}
+						style={dumpStyleAttributes({
+							opacity: showImage ? 1 : 0,
+							transition,
+							...absolutePositioning,
+							'object-fit': objectFit,
+							'object-position': objectPosition,
+							...parseStyleAttributes(pictureStyle)
+						})}
 						data-testid="img"
 					/>
 				{/if}

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

@@ -1,42 +1,18 @@
 import { SvelteComponentTyped } from "svelte";
-export type Maybe<T> = T | null;
-export type ResponsiveImageType = {
-    /** A base64-encoded thumbnail to offer during image loading */
-    base64?: Maybe<string>;
-    /** The height of the image */
-    height?: Maybe<number>;
-    /** The width of the image */
-    width: number;
-    /** The aspect ratio (width/height) of the image */
-    aspectRatio?: number;
-    /** The HTML5 `sizes` attribute for the image */
-    sizes?: Maybe<string>;
-    /** The fallback `src` attribute for the image */
-    src?: Maybe<string>;
-    /** The HTML5 `srcSet` attribute for the image */
-    srcSet?: Maybe<string>;
-    /** The HTML5 `srcSet` attribute for the image in WebP format, for browsers that support the format */
-    webpSrcSet?: Maybe<string>;
-    /** The background color for the image placeholder */
-    bgColor?: Maybe<string>;
-    /** Alternate text (`alt`) for the image */
-    alt?: Maybe<string>;
-    /** Title attribute (`title`) for the image */
-    title?: Maybe<string>;
-};
 import type * as CSS from 'csstype';
+import { type ResponsiveImageType } from '../NakedImage/utils';
 declare const __propDef: {
     props: {
-        alt?: string | null | undefined;
         /** The actual response you get from a DatoCMS `responsiveImage` GraphQL query */ data: ResponsiveImageType;
         /** Additional CSS className for root node */ class?: string | null | undefined;
         /** Additional CSS class for the image inside the `<picture />` tag */ pictureClass?: string | null | undefined;
+        /** Additional CSS class for the placeholder element */ placeholderClass?: string | null | undefined;
         /** Duration (in ms) of the fade-in transition effect upoad image loading */ fadeInDuration?: number | undefined;
         /** 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 */ intersectionThreshold?: number | undefined;
         /** 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 */ intersectionMargin?: string | undefined;
-        /** Whether enable lazy loading or not */ lazyLoad?: boolean | undefined;
         /** Additional CSS rules to add to the root node */ style?: string | null | undefined;
         /** Additional CSS rules to add to the image inside the `<picture />` tag */ pictureStyle?: string | null | undefined;
+        /** Additional CSS rules to add to the placeholder element */ placeholderStyle?: string | null | undefined;
         /**
              * The layout behavior of the image as the viewport changes size
              *
@@ -47,8 +23,8 @@ declare const __propDef: {
              * * `responsive`: the image will scale the dimensions down for smaller viewports and scale up for larger viewports
              * * `fill`: image will stretch both width and height to the dimensions of the parent element, provided the parent element is `relative`
              **/ layout?: "fill" | "intrinsic" | "fixed" | "responsive" | undefined;
-        /** Defines how the image will fit into its parent container when using layout="fill" */ objectFit?: CSS.Properties['objectFit'];
-        /** Defines how the image is positioned within its parent element when using layout="fill". */ objectPosition?: CSS.Properties['objectPosition'];
+        /** Defines how the image will fit into its parent container when using layout="fill" */ objectFit?: CSS.PropertiesHyphen['object-fit'];
+        /** Defines how the image is positioned within its parent element when using layout="fill". */ objectPosition?: CSS.PropertiesHyphen['object-position'];
         /** Whether the component should use a blurred image placeholder */ usePlaceholder?: boolean | undefined;
         /**
              * The HTML5 `sizes` attribute for the image