@absolutejs/absolute 0.19.0-beta.1043 → 0.19.0-beta.1045

package/dist/svelte/components/Image.svelte

@@ -0,0 +1,164 @@
+<script lang="ts">
+	import type { ImageProps } from '@absolutejs/absolute/image';
+	import {
+		DEFAULT_QUALITY,
+		buildOptimizedUrl,
+		generateBlurSvg,
+		generateSrcSet
+	} from '@absolutejs/absolute/image';
+
+	let {
+		src,
+		alt,
+		width,
+		height,
+		fill,
+		quality = DEFAULT_QUALITY,
+		sizes,
+		loader,
+		unoptimized,
+		loading,
+		priority,
+		placeholder,
+		blurDataURL,
+		className,
+		style,
+		onLoad,
+		onError,
+		crossOrigin,
+		referrerPolicy,
+		fetchPriority,
+		overrideSrc
+	}: ImageProps = $props();
+
+	const resolvedSrc = $derived.by(() => {
+		if (overrideSrc) return overrideSrc;
+		if (unoptimized) return src;
+		if (loader) return loader({ src, width: width ?? 0, quality });
+		if (!width) return buildOptimizedUrl(src, 0, quality);
+		return buildOptimizedUrl(src, width, quality);
+	});
+
+	const srcSet = $derived(
+		unoptimized ? undefined : generateSrcSet(src, width, sizes)
+	);
+
+	const resolvedSizes = $derived(sizes ?? (fill ? '100vw' : undefined));
+
+	const resolvedLoading = $derived(priority ? 'eager' : (loading ?? 'lazy'));
+
+	const resolvedFetchPriority = $derived(priority ? 'high' : fetchPriority);
+
+	const hasBlur = $derived(
+		placeholder === 'blur' ||
+			(typeof placeholder === 'string' &&
+				placeholder !== 'empty' &&
+				placeholder.startsWith('data:'))
+	);
+
+	const blurBackground = $derived.by(() => {
+		if (!hasBlur) return undefined;
+		if (
+			typeof placeholder === 'string' &&
+			placeholder !== 'blur' &&
+			placeholder.startsWith('data:')
+		) {
+			return generateBlurSvg(placeholder);
+		}
+		if (blurDataURL) return generateBlurSvg(blurDataURL);
+		return undefined;
+	});
+
+	const imgStyle = $derived.by(() => {
+		const base: Record<string, string | number> = {
+			...(style ?? {}),
+			color: 'transparent'
+		};
+		if (blurBackground) {
+			base.backgroundImage = blurBackground;
+			base.backgroundSize = 'cover';
+			base.backgroundPosition = 'center';
+			base.backgroundRepeat = 'no-repeat';
+		}
+		if (fill) {
+			base.position = 'absolute';
+			base.height = '100%';
+			base.width = '100%';
+			base.inset = 0;
+			base.objectFit = 'cover';
+		}
+		return Object.entries(base)
+			.map(
+				([k, v]) =>
+					`${k.replace(/[A-Z]/g, (m) => `-${m.toLowerCase()}`)}:${v}`
+			)
+			.join(';');
+	});
+
+	const handleLoad = (e: Event) => {
+		const target = e.currentTarget;
+		if (blurBackground) {
+			if (target instanceof HTMLImageElement) {
+				target.style.backgroundImage = 'none';
+			}
+		}
+		onLoad?.(e);
+	};
+
+	const handleError = (e: Event) => {
+		onError?.(e);
+	};
+</script>
+
+<svelte:head>
+	{#if priority}
+		<link
+			rel="preload"
+			as="image"
+			href={resolvedSrc}
+			imagesrcset={srcSet}
+			imagesizes={resolvedSizes}
+			crossorigin={crossOrigin}
+		/>
+	{/if}
+</svelte:head>
+
+{#if fill}
+	<span
+		style="position:relative;overflow:hidden;display:block;width:100%;height:100%"
+	>
+		<img
+			{alt}
+			src={resolvedSrc}
+			srcset={srcSet}
+			sizes={resolvedSizes}
+			loading={resolvedLoading}
+			class={className}
+			style={imgStyle}
+			crossorigin={crossOrigin}
+			referrerpolicy={referrerPolicy}
+			fetchpriority={resolvedFetchPriority}
+			decoding="async"
+			onload={handleLoad}
+			onerror={handleError}
+		/>
+	</span>
+{:else}
+	<img
+		{alt}
+		src={resolvedSrc}
+		srcset={srcSet}
+		sizes={resolvedSizes}
+		{width}
+		{height}
+		loading={resolvedLoading}
+		class={className}
+		style={imgStyle}
+		crossorigin={crossOrigin}
+		referrerpolicy={referrerPolicy}
+		fetchpriority={resolvedFetchPriority}
+		decoding="async"
+		onload={handleLoad}
+		onerror={handleError}
+	/>
+{/if}

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

@@ -0,0 +1,5 @@
+import type { ImageProps } from '../../types/image';
+import { SvelteComponent } from 'svelte';
+declare const __propDef: { props: ImageProps };
+type Props = typeof __propDef.props;
+export default class Image extends SvelteComponent<Props> {}

package/dist/svelte/components/Island.svelte

@@ -0,0 +1,71 @@
+<script context="module" lang="ts">
+	let islandSlotIndex = 0;
+
+	const createSlotId = () => {
+		const current = islandSlotIndex;
+		islandSlotIndex += 1;
+
+		return `absolute-svelte-island-${current.toString(36)}`;
+	};
+</script>
+
+<script lang="ts">
+	import type { RuntimeIslandRenderProps } from '../../../types/island';
+
+	let {
+		component,
+		framework,
+		hydrate = 'load',
+		props
+	}: RuntimeIslandRenderProps = $props();
+
+	const slotId = createSlotId();
+
+	const escapeHtmlAttribute = (value: string) =>
+		value
+			.replaceAll('&', '&amp;')
+			.replaceAll('"', '&quot;')
+			.replaceAll('<', '&lt;')
+			.replaceAll('>', '&gt;');
+
+	const buildFallbackMarkup = (runtimeProps: RuntimeIslandRenderProps) => {
+		const attributes = [
+			['data-component', runtimeProps.component],
+			['data-framework', runtimeProps.framework],
+			['data-hydrate', runtimeProps.hydrate ?? 'load'],
+			['data-island', 'true'],
+			['data-props', JSON.stringify(runtimeProps.props ?? {})]
+		];
+
+		const serialized = attributes
+			.map(([name, value]) => `${name}="${escapeHtmlAttribute(value)}"`)
+			.join(' ');
+
+		return `<div ${serialized}></div>`;
+	};
+
+	const html = $derived(
+		(() => {
+			const runtimeProps = {
+				component,
+				framework,
+				hydrate,
+				props
+			};
+
+			if (typeof document === 'undefined') {
+				return buildFallbackMarkup(runtimeProps);
+			}
+
+			const slot = document.querySelector<HTMLElement>(
+				`[data-absolute-island-slot="${slotId}"]`
+			);
+
+			return slot?.innerHTML ?? buildFallbackMarkup(runtimeProps);
+		})()
+	);
+</script>
+
+<div data-absolute-island-slot={slotId} style="display: contents">
+	{@html html}
+</div>

package/dist/svelte/components/Island.svelte.d.ts

@@ -0,0 +1,5 @@
+import type { RuntimeIslandRenderProps } from '../../types/metadata';
+import { SvelteComponent } from 'svelte';
+declare const __propDef: { props: RuntimeIslandRenderProps };
+type Props = typeof __propDef.props;
+export default class Island extends SvelteComponent<Props> {}

package/dist/svelte/components/JsonLd.svelte

@@ -0,0 +1,21 @@
+<script lang="ts">
+	import type { JsonLdSchema, WithContext } from '../../../types/jsonLd';
+
+	let { schema }: { schema: JsonLdSchema | JsonLdSchema[] } = $props();
+	const schemaOrgContext = 'https://schema.org';
+
+	const data = $derived<
+		WithContext<JsonLdSchema> | WithContext<JsonLdSchema>[]
+	>(
+		Array.isArray(schema)
+			? schema.map((s) => ({
+					'@context': schemaOrgContext,
+					...s
+				}))
+			: { '@context': schemaOrgContext, ...schema }
+	);
+</script>
+
+<svelte:head>
+	{@html `<script type="application/ld+json">${JSON.stringify(data)}</script>`}
+</svelte:head>

package/dist/svelte/components/JsonLd.svelte.d.ts

@@ -0,0 +1,2 @@
+import { SvelteComponent } from 'svelte';
+export default class JsonLd extends SvelteComponent {}

package/dist/svelte/components/StreamSlot.svelte

@@ -0,0 +1,41 @@
+<script lang="ts">
+	import {
+		isStreamingSlotCollectionActive,
+		registerStreamingSlot,
+		warnMissingStreamingSlotCollector
+	} from '../../core/streamingSlotRegistrar';
+
+	type Resolver = () => Promise<string> | string;
+
+	let {
+		className,
+		errorHtml,
+		fallbackHtml = '',
+		id,
+		resolve,
+		timeoutMs
+	}: {
+		className?: string;
+		errorHtml?: string;
+		fallbackHtml?: string;
+		id: string;
+		resolve: Resolver;
+		timeoutMs?: number;
+	} = $props();
+
+	if (isStreamingSlotCollectionActive()) {
+		registerStreamingSlot({
+			errorHtml,
+			fallbackHtml,
+			id,
+			resolve,
+			timeoutMs
+		});
+	} else {
+		warnMissingStreamingSlotCollector('StreamSlot');
+	}
+</script>
+
+<div class={className} data-absolute-slot="true" {id}>
+	{@html fallbackHtml}
+</div>

package/dist/svelte/components/StreamSlot.svelte.d.ts

@@ -0,0 +1,2 @@
+import { SvelteComponent } from 'svelte';
+export default class StreamSlot extends SvelteComponent {}