@datocms/svelte 1.4.3 → 2.0.1

package/package/index.d.ts

@@ -1,8 +1,10 @@
 import type { Node } from 'datocms-structured-text-utils';
 import type { SvelteComponent } from 'svelte';
-export { default as StructuredText } from './components/StructuredText/StructuredText.svelte';
-export { default as Image } from './components/Image/Image.svelte';
+export { default as NakedImage } from './components/NakedImage/NakedImage.svelte';
+export type { ResponsiveImageType } from './components/NakedImage/utils';
 export { default as Head } from './components/Head/Head.svelte';
+export { default as Image } from './components/Image/Image.svelte';
+export { default as StructuredText } from './components/StructuredText/StructuredText.svelte';
 export { default as VideoPlayer } from './components/VideoPlayer/VideoPlayer.svelte';
 export type PredicateComponentTuple = [
     (n: Node) => boolean,

package/package/index.js

@@ -1,4 +1,5 @@
-export { default as StructuredText } from './components/StructuredText/StructuredText.svelte';
-export { default as Image } from './components/Image/Image.svelte';
+export { default as NakedImage } from './components/NakedImage/NakedImage.svelte';
 export { default as Head } from './components/Head/Head.svelte';
+export { default as Image } from './components/Image/Image.svelte';
+export { default as StructuredText } from './components/StructuredText/StructuredText.svelte';
 export { default as VideoPlayer } from './components/VideoPlayer/VideoPlayer.svelte';

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@datocms/svelte",
-	"version": "1.4.3",
+	"version": "2.0.1",
 	"description": "A set of components and utilities to work faster with DatoCMS in Svelte",
 	"license": "MIT",
 	"repository": {
@@ -22,7 +22,8 @@
 		"test:unit": "vitest",
 		"test": "npm run test:unit",
 		"lint": "prettier --plugin-search-dir . --check . && eslint .",
-		"format": "prettier --plugin-search-dir . --write ."
+		"format": "npm run toc && prettier --plugin-search-dir . --write .",
+		"toc": "doctoc --github src README.md"
 	},
 	"peerDependencies": {
 		"@mux/mux-player": "*",
@@ -59,13 +60,13 @@
 		"tslib": "^2.6.2",
 		"typescript": "^5.0.0",
 		"vite": "^5.0.0",
-		"vitest": "^1.0.0"
+		"vitest": "^1.0.0",
+		"doctoc": "^2.0.0"
 	},
 	"type": "module",
 	"dependencies": {
 		"datocms-structured-text-utils": "^2.0.4",
-		"svelte-intersection-observer": "^1.0.0",
-		"universal-base64": "^2.1.0"
+		"svelte-intersection-observer": "^1.0.0"
 	},
 	"exports": {
 		"./package.json": "./package.json",

package/package/components/Image/Placeholder.svelte

@@ -1,30 +0,0 @@
-<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"
-	aria-hidden="true"
-	alt=""
-	src={base64}
-	style:background-color={backgroundColor}
-	style:object-fit={objectFit}
-	style:object-position={objectPosition}
-	style:transition
-	style:opacity
-/>
-
-<style>
-	.placeholder {
-		position: absolute;
-		width: 100%;
-		top: 0;
-		scale: 110%;
-	}
-</style>

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

@@ -1,22 +0,0 @@
-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 {};

package/package/components/Image/Sizer.svelte

@@ -1,17 +0,0 @@
-<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/package/components/Image/Sizer.svelte.d.ts

@@ -1,19 +0,0 @@
-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/package/components/Image/Source.svelte

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

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

@@ -1,18 +0,0 @@
-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 {};