npm - @datocms/svelte - Versions diffs - 0.0.1 - Mend

@datocms/svelte 0.0.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (71) hide show

package/components/Head/__tests__/__snapshots__/Head.test.ts.snap ADDED Viewed

@@ -0,0 +1,221 @@
+// Vitest Snapshot v1
+exports[`Head > renders meta tags 1`] = `
+<head>
+  <title>
+    Remix CMS - The easiest way to manage content with Remix
+  </title>
+  <meta
+    content="Remix CMS - The easiest way to manage content with Remix"
+    property="og:title"
+  />
+  <meta
+    content="Remix CMS - The easiest way to manage content with Remix"
+    name="twitter:title"
+  />
+  <meta
+    content="Remix makes building scalable and fast React apps simple, pair it with a CMS that shares the same intuitiveness. Start a new Remix + Dato project now."
+    name="description"
+  />
+  <meta
+    content="Remix makes building scalable and fast React apps simple, pair it with a CMS that shares the same intuitiveness. Start a new Remix + Dato project now."
+    property="og:description"
+  />
+  <meta
+    content="Remix makes building scalable and fast React apps simple, pair it with a CMS that shares the same intuitiveness. Start a new Remix + Dato project now."
+    name="twitter:description"
+  />
+  <meta
+    content="https://www.datocms-assets.com/205/1642515293-full-logo.svg?fit=max&fm=jpg&w=1000"
+    property="og:image"
+  />
+  <meta
+    content="746"
+    property="og:image:width"
+  />
+  <meta
+    content="186"
+    property="og:image:height"
+  />
+  <meta
+    content="https://www.datocms-assets.com/205/1642515293-full-logo.svg?fit=max&fm=jpg&w=1000"
+    name="twitter:image"
+  />
+  <meta
+    content="en"
+    property="og:locale"
+  />
+  <meta
+    content="article"
+    property="og:type"
+  />
+  <meta
+    content="DatoCMS"
+    property="og:site_name"
+  />
+  <meta
+    content="2022-01-18T14:02:47Z"
+    property="article:modified_time"
+  />
+  <meta
+    content="summary_large_image"
+    name="twitter:card"
+  />
+  <meta
+    content="@datocms"
+    name="twitter:site"
+  />
+  <link
+    href="https://www.datocms-assets.com/205/1525789775-dato.png?h=16&w=16"
+    rel="icon"
+    sizes="16x16"
+    type="image/png"
+  />
+  <link
+    href="https://www.datocms-assets.com/205/1525789775-dato.png?h=32&w=32"
+    rel="icon"
+    sizes="32x32"
+    type="image/png"
+  />
+  <link
+    href="https://www.datocms-assets.com/205/1525789775-dato.png?h=96&w=96"
+    rel="icon"
+    sizes="96x96"
+    type="image/png"
+  />
+  <link
+    href="https://www.datocms-assets.com/205/1525789775-dato.png?h=192&w=192"
+    rel="icon"
+    sizes="192x192"
+    type="image/png"
+  />
+  <link
+    href="https://www.datocms-assets.com/205/1525789775-dato.png?h=57&w=57"
+    rel="apple-touch-icon"
+    sizes="57x57"
+  />
+  <link
+    href="https://www.datocms-assets.com/205/1525789775-dato.png?h=60&w=60"
+    rel="apple-touch-icon"
+    sizes="60x60"
+  />
+  <link
+    href="https://www.datocms-assets.com/205/1525789775-dato.png?h=72&w=72"
+    rel="apple-touch-icon"
+    sizes="72x72"
+  />
+  <link
+    href="https://www.datocms-assets.com/205/1525789775-dato.png?h=76&w=76"
+    rel="apple-touch-icon"
+    sizes="76x76"
+  />
+  <link
+    href="https://www.datocms-assets.com/205/1525789775-dato.png?h=114&w=114"
+    rel="apple-touch-icon"
+    sizes="114x114"
+  />
+  <link
+    href="https://www.datocms-assets.com/205/1525789775-dato.png?h=120&w=120"
+    rel="apple-touch-icon"
+    sizes="120x120"
+  />
+  <link
+    href="https://www.datocms-assets.com/205/1525789775-dato.png?h=144&w=144"
+    rel="apple-touch-icon"
+    sizes="144x144"
+  />
+  <link
+    href="https://www.datocms-assets.com/205/1525789775-dato.png?h=152&w=152"
+    rel="apple-touch-icon"
+    sizes="152x152"
+  />
+  <link
+    href="https://www.datocms-assets.com/205/1525789775-dato.png?h=180&w=180"
+    rel="apple-touch-icon"
+    sizes="180x180"
+  />
+  <meta
+    content="https://www.datocms-assets.com/205/1525789775-dato.png?h=70&w=70"
+    name="msapplication-square70x70logo"
+  />
+  <meta
+    content="https://www.datocms-assets.com/205/1525789775-dato.png?h=150&w=150"
+    name="msapplication-square150x150logo"
+  />
+  <meta
+    content="https://www.datocms-assets.com/205/1525789775-dato.png?h=310&w=310"
+    name="msapplication-square310x310logo"
+  />
+  <meta
+    content="https://www.datocms-assets.com/205/1525789775-dato.png?h=150&w=310"
+    name="msapplication-square310x150logo"
+  />
+</head>
+`;

package/components/Image/Image.svelte ADDED Viewed

@@ -0,0 +1,172 @@
+<script context="module">import IntersectionObserver from "svelte-intersection-observer";
+const isWindowDefined = typeof window !== "undefined";
+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(parseInt(maxH) * multiplier)}`);
+      }
+      if (maxW) {
+        url.searchParams.set("max-w", `${Math.floor(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;
+export let data;
+let klass = null;
+export { klass as class };
+export let pictureClass = null;
+export let fadeInDuration = 500;
+export let intersectionThreshold = 0;
+export let intersectionMargin = "0px";
+let rawLazyLoad = true;
+export { rawLazyLoad as lazyLoad };
+export let style = {};
+export let pictureStyle = null;
+export let layout = "intrinsic";
+export let objectFit = void 0;
+export let objectPosition = void 0;
+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];
+$:
+  ({ width, height, aspectRatio } = data);
+$:
+  lazyLoad = priority ? false : rawLazyLoad;
+$:
+  addImage = imageAddStrategy({
+    lazyLoad,
+    intersecting,
+    loaded
+  });
+$:
+  showImage = imageShowStrategy({
+    lazyLoad,
+    intersecting,
+    loaded
+  });
+let transition = fadeInDuration > 0 ? `opacity ${fadeInDuration}ms` : void 0;
+</script>
+<IntersectionObserver
+	{element}
+	bind:intersecting
+	threshold={intersectionThreshold}
+	rootMargin={intersectionMargin}
+>
+	<div
+		bind:this={element}
+		class={klass}
+		style:overflow="hidden"
+		style:position={style.position ?? layout === 'fill' ? 'absolute' : 'relative'}
+		style:width={style.width ?? layout === 'fixed' ? data.width : '100%'}
+		style:maxWidth={style.maxWidth ?? layout === 'intrinsic' ? data.width : null}
+		style:height={style.height ?? layout === 'fill' ? '100%' : null}
+		data-testid="image"
+	>
+		{#if layout !== 'fill' && width}
+			<Sizer {width} {height} {aspectRatio} />
+		{/if}
+		{#if usePlaceholder && (data.bgColor || data.base64)}
+			<Placeholder
+				base64={data.base64}
+				backgroundColor={data.bgColor}
+				{objectFit}
+				{objectPosition}
+				{showImage}
+				{fadeInDuration}
+			/>
+		{/if}
+		{#if addImage}
+			<picture style={pictureStyle} data-testid="picture">
+				{#if data.webpSrcSet}
+					<Source srcset={data.webpSrcSet} sizes={sizes ?? data.sizes ?? null} type="image/webp" />
+				{/if}
+				<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 ?? ''}
+						title={data.title ?? null}
+						on:load={() => {
+							dispatch('load');
+							loaded = true;
+						}}
+						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:objectFit
+						style:objectPosition
+						data-testid="img"
+					/>
+				{/if}
+			</picture>
+		{/if}
+	</div>
+</IntersectionObserver>

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

@@ -0,0 +1,83 @@
+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';
+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;
+        /** 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?: Record<string, string> | undefined;
+        /** Additional CSS rules to add to the image inside the `<picture />` tag */ pictureStyle?: string | null | undefined;
+        /**
+             * The layout behavior of the image as the viewport changes size
+             *
+             * Possible values:
+             *
+             * * `intrinsic` (default): the image will scale the dimensions down for smaller viewports, but maintain the original dimensions for larger viewports
+             * * `fixed`: the image dimensions will not change as the viewport changes (no responsiveness) similar to the native img element
+             * * `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'];
+        /** Whether the component should use a blurred image placeholder */ usePlaceholder?: boolean | undefined;
+        /**
+             * 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?: string | null | undefined;
+        /**
+             * 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 | undefined;
+        /**
+             * 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[] | undefined;
+    };
+    events: {
+        load: CustomEvent<any>;
+    } & {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export type ImageProps = typeof __propDef.props;
+export type ImageEvents = typeof __propDef.events;
+export type ImageSlots = typeof __propDef.slots;
+export default class Image extends SvelteComponentTyped<ImageProps, ImageEvents, ImageSlots> {
+}
+export {};

package/components/Image/Placeholder.svelte ADDED Viewed

@@ -0,0 +1,31 @@
+<script>export let base64 = null;
+export let backgroundColor = null;
+export let objectFit;
+export let objectPosition;
+export let showImage;
+export let fadeInDuration = 0;
+let transition = fadeInDuration > 0 ? `opacity ${fadeInDuration}ms` : void 0;
+let opacity = showImage ? 0 : 1;
+</script>
+<img
+	class="placeholder"
+	role="presentation"
+	aria-hidden="true"
+	alt=""
+	src={base64}
+	style:backgroundColor
+	style:objectFit
+	style:objectPosition
+	style:transition
+	style:opacity
+/>
+<style>
+	.placeholder {
+		position: absolute;
+		width: 100%;
+		top: 0;
+		scale: 110%;
+	}
+</style>

package/components/Image/Placeholder.svelte.d.ts ADDED Viewed

@@ -0,0 +1,22 @@
+import { SvelteComponentTyped } from "svelte";
+import type * as CSS from 'csstype';
+declare const __propDef: {
+    props: {
+        base64?: string | null | undefined;
+        backgroundColor?: string | null | undefined;
+        objectFit: CSS.Properties['objectFit'];
+        objectPosition: CSS.Properties['objectPosition'];
+        showImage: boolean;
+        fadeInDuration?: number | undefined;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export type PlaceholderProps = typeof __propDef.props;
+export type PlaceholderEvents = typeof __propDef.events;
+export type PlaceholderSlots = typeof __propDef.slots;
+export default class Placeholder extends SvelteComponentTyped<PlaceholderProps, PlaceholderEvents, PlaceholderSlots> {
+}
+export {};