@prismicio/svelte 0.0.11 → 0.1.0

package/README.md

@@ -1,13 +1,3 @@
-<!--
-
-Replace all on all files (README.md, CONTRIBUTING.md, bug_report.md, package.json):
-- @prismicio/svelte
-- Svelte components and helpers to fetch and present Prismic content
-- prismicio/prismic-svelte
-- prismic-svelte
-
--->
-
 # @prismicio/svelte
 
 [![npm version][npm-version-src]][npm-version-href]
@@ -17,15 +7,24 @@ Replace all on all files (README.md, CONTRIBUTING.md, bug_report.md, package.jso
 [![Conventional Commits][conventional-commits-src]][conventional-commits-href]
 [![License][license-src]][license-href]
 
-<!-- TODO: Replacing link to Prismic with [Prismic][prismic] is useful here -->
-
 > ⚠ &nbsp;This project is in an experimental state. Use it at your own risk or stay tuned for the official release!
 
-[Svelte][svelte] components and helpers to fetch and present [Prismic][prismic] content.
+[Svelte][svelte] components to present [Prismic][prismic] content.
 
 - 📝 &nbsp;Display content from Prismic like [Rich Text][prismic-rich-text] and [Link][prismic-link] fields;
 - 🍡 &nbsp;Render Prismic [Slice Zones][prismic-slices] declaratively with Svelte components;
-- 🎣 &nbsp;Fetch Prismic content.
+
+<!--
+
+TODO: Create a small list of package features:
+
+- 🤔 &nbsp;A useful feature;
+- 🥴 &nbsp;Another useful feature;
+- 🙃 &nbsp;A final useful feature.
+
+Non-breaking space: &nbsp; are here on purpose to fix emoji rendering on certain systems.
+
+-->
 
 ## Install
 
@@ -54,34 +53,34 @@ For more clarity on this project and its structure you can also check out the de
 ## License
 
 ```
-   Copyright 2013-2022 Prismic <contact@prismic.io> (https://prismic.io)
+Copyright 2013-2023 Prismic <contact@prismic.io> (https://prismic.io)
 
-   Licensed under the Apache License, Version 2.0 (the "License");
-   you may not use this file except in compliance with the License.
-   You may obtain a copy of the License at
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
 
-       http://www.apache.org/licenses/LICENSE-2.0
+http://www.apache.org/licenses/LICENSE-2.0
 
-   Unless required by applicable law or agreed to in writing, software
-   distributed under the License is distributed on an "AS IS" BASIS,
-   WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
-   See the License for the specific language governing permissions and
-   limitations under the License.
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
 ```
 
 <!-- Links -->
 
 [prismic]: https://prismic.io
+[svelte]: https://svelte.dev
+[prismic-rich-text]: https://prismic.io/docs/core-concepts/rich-text-title
+[prismic-link]: https://prismic.io/docs/core-concepts/link-content-relationship
+[prismic-slices]: https://prismic.io/docs/core-concepts/slices
 
 <!-- TODO: Replace link with a more useful one if available -->
 
-[prismic-docs]: https://prismic.io/docs/technical-reference/prismicio-svelte
+[prismic-docs]: https://prismic.io/docs
 [changelog]: ./CHANGELOG.md
 [contributing]: ./CONTRIBUTING.md
-[svelte]: https://svelte.dev
-[prismic-rich-text]: https://prismic.io/docs/core-concepts/rich-text-title
-[prismic-link]: https://prismic.io/docs/core-concepts/link-content-relationship
-[prismic-slices]: https://prismic.io/docs/core-concepts/slices
 
 <!-- TODO: Replace link with a more useful one if available -->
 
@@ -100,7 +99,7 @@ For more clarity on this project and its structure you can also check out the de
 [github-actions-ci-href]: https://github.com/prismicio/prismic-svelte/actions?query=workflow%3Aci
 [codecov-src]: https://img.shields.io/codecov/c/github/prismicio/prismic-svelte.svg
 [codecov-href]: https://codecov.io/gh/prismicio/prismic-svelte
-[conventional-commits-src]: https://img.shields.io/badge/Conventional%20Commits-1.0.0-yellow.svg
+[conventional-commits-src]: https://img.shields.io/badge/Conventional%20Commits-1.0.0-%23FE5196?logo=conventionalcommits&logoColor=white
 [conventional-commits-href]: https://conventionalcommits.org
 [license-src]: https://img.shields.io/npm/l/@prismicio/svelte.svg
 [license-href]: https://npmjs.com/package/@prismicio/svelte

package/dist/PrismicEmbed.svelte

@@ -1,23 +1,24 @@
-<script>import * as prismicH from "@prismicio/helpers";
+<script>import { isFilled } from "@prismicio/client";
 export let field;
 </script>
 
-<!-- 
+<!--
   @component
-  Component to render a Prismic Embed field.
-  
-  @example Rendering an Embed field:
+  Component to render a Prismic embed field.
+
+  @example Rendering an embed field:
 	```svelte
 		<PrismicEmbed field={document.data.example_embed} />
-  ```
+	```
 -->
 
-{#if prismicH.isFilled.embed(field)}
+{#if isFilled.embed(field)}
 	<div
 		data-oembed={field.embed_url}
 		data-oembed-type={field.type}
 		data-oembed-provider={field.provider_name}
 	>
+		<!-- eslint-disable-next-line svelte/no-at-html-tags -->
 		{@html field.html}
 	</div>
 {/if}

package/dist/PrismicEmbed.svelte.d.ts

@@ -1,10 +1,10 @@
-import { SvelteComponentTyped } from "svelte";
-import type * as prismicT from "@prismicio/types";
+import { SvelteComponent } from "svelte";
+import type { EmbedField } from "@prismicio/client";
 declare const __propDef: {
     props: {
         /**
              * An Embed field from Prismic.
-             */ field: prismicT.EmbedField;
+             */ field: EmbedField;
     };
     events: {
         [evt: string]: CustomEvent<any>;
@@ -15,13 +15,13 @@ export type PrismicEmbedProps = typeof __propDef.props;
 export type PrismicEmbedEvents = typeof __propDef.events;
 export type PrismicEmbedSlots = typeof __propDef.slots;
 /**
- * Component to render a Prismic Embed field.
+ * Component to render a Prismic embed field.
  *
- *  @example Rendering an Embed field:
+ *  @example Rendering an embed field:
  * ```svelte
  * 	<PrismicEmbed field={document.data.example_embed} />
- *  ```
+ * ```
  */
-export default class PrismicEmbed extends SvelteComponentTyped<PrismicEmbedProps, PrismicEmbedEvents, PrismicEmbedSlots> {
+export default class PrismicEmbed extends SvelteComponent<PrismicEmbedProps, PrismicEmbedEvents, PrismicEmbedSlots> {
 }
 export {};

package/dist/PrismicImage.svelte

@@ -1,89 +1,83 @@
-<script>import * as prismicH from "@prismicio/helpers";
-import { DEV } from "esm-env";
+<script>import {
+  asImageWidthSrcSet,
+  asImagePixelDensitySrcSet,
+  isFilled
+} from "@prismicio/client";
 export let field;
 export let imgixParams = {};
-export let widths = void 0;
-export let pixelDensities = void 0;
-export let width = void 0;
-export let height = void 0;
 export let alt = void 0;
 export let fallbackAlt = void 0;
-delete $$restProps.src;
-delete $$restProps.srcset;
-const castInt = (input) => {
-  if (typeof input === "number" || typeof input === "undefined" || input === null) {
-    return input;
-  } else {
-    const parsed = Number.parseInt(input);
-    if (Number.isNaN(parsed)) {
-      return void 0;
-    } else {
-      return parsed;
+export let width = void 0;
+export let height = void 0;
+export let widths = void 0;
+export let pixelDensities = void 0;
+let src = void 0;
+let srcset = void 0;
+let resolvedWidth = void 0;
+let resolvedHeight = void 0;
+$: {
+  if (isFilled.imageThumbnail(field)) {
+    const castInt = (input) => {
+      if (typeof input === "number" || typeof input === "undefined" || input === null) {
+        return input;
+      } else {
+        const parsed = Number.parseInt(input);
+        if (Number.isNaN(parsed)) {
+          return void 0;
+        } else {
+          return parsed;
+        }
+      }
+    };
+    const ar = field.dimensions.width / field.dimensions.height;
+    const castedWidth = castInt(width);
+    const castedHeight = castInt(height);
+    resolvedWidth = castedWidth ?? field.dimensions.width;
+    resolvedHeight = castedHeight ?? field.dimensions.height;
+    if (castedWidth != null && castedHeight == null) {
+      resolvedHeight = castedWidth / ar;
+    } else if (castedWidth == null && castedHeight != null) {
+      resolvedWidth = castedHeight * ar;
+    }
+    if (widths || !pixelDensities) {
+      const res = asImageWidthSrcSet(field, {
+        ...imgixParams,
+        widths: widths === "defaults" ? void 0 : widths
+      });
+      src = res.src;
+      srcset = res.srcset;
+    } else if (pixelDensities) {
+      const res = asImagePixelDensitySrcSet(field, {
+        ...imgixParams,
+        pixelDensities: pixelDensities === "defaults" ? void 0 : pixelDensities
+      });
+      src = res.src;
+      srcset = res.srcset;
     }
-  }
-};
-const ar = field.dimensions && field.dimensions.width / field.dimensions.height;
-const castedWidth = castInt(width);
-const castedHeight = castInt(height);
-let resolvedWidth = castedWidth ?? (field.dimensions && field.dimensions.width);
-let resolvedHeight = castedHeight ?? (field.dimensions && field.dimensions.height);
-if (ar && castedWidth != null && (castedHeight == null || typeof castedWidth !== "undefined")) {
-  resolvedHeight = castedWidth / ar;
-} else if (ar && castedHeight != null && (castedWidth == null || typeof castedWidth !== "undefined")) {
-  resolvedWidth = castedHeight * ar;
-}
-if (DEV) {
-  if (widths && pixelDensities) {
-    console.warn(
-      `[PrismicImage] Only one of "widths" or "pixelDensities" props can be provided. You can resolve this warning by removing either the "widths" or "pixelDensities" prop. "widths" will be used in this case.`
-    );
-  }
-  if (typeof alt === "string" && alt !== "") {
-    console.warn(
-      `[PrismicImage] The "alt" prop can only be used to declare an image as decorative by passing an empty string (alt="") but was provided a non-empty string. You can resolve this warning by removing the "alt" prop or changing it to alt="".`
-    );
-  }
-  if (typeof fallbackAlt === "string" && fallbackAlt !== "") {
-    console.warn(
-      `[PrismicImage] The "fallbackAlt" prop can only be used to declare an image as decorative by passing an empty string (fallbackAlt="") but was provided a non-empty string. You can resolve this warning by removing the "fallbackAlt" prop or changing it to fallbackAlt="".`
-    );
   }
 }
 </script>
 
 <!--
   @component
-  Component to render a Prismic Image field as an `img` element with `width`, `height`, `alt`, `src`, and `srcset` attributes.
+  Component to render a Prismic image field as an `img` element with `width`, `height`, `alt`, `src`, and `srcset` attributes.
 
-  @example Rendering an Image field:
+  @example Rendering an image field:
 	```svelte
 		<PrismicImage
 			field={document.data.example_image}
 			imgixParams={{ sat: -100 }}
 		/>
-  ```
+	```
 -->
 
-{#if prismicH.isFilled.image(field)}
-	{@const { src, srcset } =
-		pixelDensities && !widths
-			? prismicH.asImagePixelDensitySrcSet(field, {
-					pixelDensities:
-						pixelDensities === "defaults" ? undefined : pixelDensities,
-					...imgixParams,
-			  })
-			: prismicH.asImageWidthSrcSet(field, {
-					widths: widths === "defaults" ? undefined : widths,
-					...imgixParams,
-			  })}
+{#if isFilled.imageThumbnail(field)}
 	<img
 		{src}
 		{srcset}
-		alt={alt ?? field.alt ?? fallbackAlt}
-		width={width || height ? resolvedWidth : field.dimensions.width}
-		height={height || (width ? resolvedHeight : field.dimensions.height)}
+		alt={alt ?? (field.alt || fallbackAlt)}
+		width={resolvedWidth}
+		height={resolvedHeight}
 		{...$$restProps}
 	/>
-{:else}
-	<img alt={field.alt || ""} {...$$restProps} />
 {/if}