sveltekit-embeds 0.1.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 Sander Ginn
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,90 @@
+# sveltekit-embeds
+
+Svelte 5 embed component library for media and social platforms.
+
+## What you get
+
+- Lazy-loaded embeds via `GeneralObserver` (IntersectionObserver-based)
+- URL parsing and embed URL helpers in `src/lib/utils`
+- Iframe embeds and script-injection embeds in `src/lib/components`
+- TypeScript + Svelte package output (`dist/`) via `svelte-package`
+
+## Exported components
+
+- `GeneralObserver`
+- `YouTube`, `TikTok`, `Twitch`, `Dailymotion`
+- `Spotify`, `AppleMusic`, `ApplePodcasts`, `SoundCloud`, `Deezer`, `Tidal`
+- `XEmbed`, `Instagram`, `Threads`, `Bluesky`, `Mastodon`, `LinkedIn`, `Reddit`, `Pinterest`
+
+Utilities are also re-exported from `src/lib/utils`.
+
+## Usage
+
+```svelte
+<script lang="ts">
+	import { YouTube, Spotify, XEmbed } from 'sveltekit-embeds';
+</script>
+
+<YouTube url="https://www.youtube.com/watch?v=dQw4w9WgXcQ" />
+<Spotify url="https://open.spotify.com/track/4uLU6hMCjMI75M1A2tKUQC" />
+<XEmbed url="https://x.com/jack/status/20" />
+```
+
+Most components support:
+
+- `url` (required)
+- `disable_observer` (optional, bypass lazy loading)
+- sizing/style props (varies per component, see component files)
+
+## Local development
+
+From the repository root:
+
+```bash
+pnpm install
+pnpm --filter sveltekit-embeds dev
+```
+
+Run static checks:
+
+```bash
+pnpm --filter sveltekit-embeds check
+```
+
+Run tests (server utils + browser component tests):
+
+```bash
+pnpm --filter sveltekit-embeds test:unit
+```
+
+Build package output and run publint:
+
+```bash
+pnpm --filter sveltekit-embeds prepack
+```
+
+## Publish to npm
+
+The package is configured for public npm publish (`publishConfig.access=public`).
+
+From repository root:
+
+```bash
+npm login
+pnpm --filter sveltekit-embeds test:unit
+pnpm --filter sveltekit-embeds check
+pnpm --filter sveltekit-embeds pack:dry-run
+pnpm --filter sveltekit-embeds exec npm version patch
+pnpm --filter sveltekit-embeds publish:npm
+```
+
+Use `npm version minor` or `npm version major` when needed.
+
+## Testing notes
+
+- Browser component tests use `vitest-browser-svelte` + Playwright Chromium.
+- First run may download browser binaries:
+
+```bash
+pnpm --filter sveltekit-embeds exec playwright install chromium
+```

package/dist/components/apple-music.svelte

@@ -0,0 +1,39 @@
+<script lang="ts">
+	import GeneralObserver from './general-observer.svelte';
+	import { getAppleMusicEmbedUrl, parseAppleMusicUrl } from '../utils/apple-music.js';
+
+	interface Props {
+		url: string;
+		theme?: 'light' | 'dark';
+		width?: string;
+		height?: string;
+		disable_observer?: boolean;
+		iframe_styles?: string;
+	}
+
+	let {
+		url,
+		theme = 'light',
+		width = '100%',
+		height = '450',
+		disable_observer = false,
+		iframe_styles
+	}: Props = $props();
+
+	const parsed = $derived(parseAppleMusicUrl(url));
+	const embedUrl = $derived(getAppleMusicEmbedUrl(url, theme));
+</script>
+
+<GeneralObserver {disable_observer}>
+	{#if embedUrl && parsed.isValid}
+		<iframe
+			src={embedUrl}
+			{width}
+			{height}
+			title={`apple-music-${parsed.type}-${parsed.id}`}
+			allow="autoplay *; encrypted-media *; fullscreen *; clipboard-write"
+			loading="lazy"
+			style={iframe_styles}
+		></iframe>
+	{/if}
+</GeneralObserver>

package/dist/components/apple-music.svelte.d.ts

@@ -0,0 +1,11 @@
+interface Props {
+    url: string;
+    theme?: 'light' | 'dark';
+    width?: string;
+    height?: string;
+    disable_observer?: boolean;
+    iframe_styles?: string;
+}
+declare const AppleMusic: import("svelte").Component<Props, {}, "">;
+type AppleMusic = ReturnType<typeof AppleMusic>;
+export default AppleMusic;

package/dist/components/apple-podcasts.svelte

@@ -0,0 +1,39 @@
+<script lang="ts">
+	import GeneralObserver from './general-observer.svelte';
+	import { getApplePodcastsEmbedUrl, parseApplePodcastsUrl } from '../utils/apple-podcasts.js';
+
+	interface Props {
+		url: string;
+		theme?: 'light' | 'dark';
+		width?: string;
+		height?: string;
+		disable_observer?: boolean;
+		iframe_styles?: string;
+	}
+
+	let {
+		url,
+		theme = 'light',
+		width = '100%',
+		height = '175',
+		disable_observer = false,
+		iframe_styles
+	}: Props = $props();
+
+	const parsed = $derived(parseApplePodcastsUrl(url));
+	const embedUrl = $derived(getApplePodcastsEmbedUrl(url, theme));
+</script>
+
+<GeneralObserver {disable_observer}>
+	{#if embedUrl && parsed.isValid}
+		<iframe
+			src={embedUrl}
+			{width}
+			{height}
+			title={`apple-podcasts-${parsed.type}-${parsed.id}`}
+			allow="autoplay *; encrypted-media *; fullscreen *"
+			loading="lazy"
+			style={iframe_styles}
+		></iframe>
+	{/if}
+</GeneralObserver>

package/dist/components/apple-podcasts.svelte.d.ts

@@ -0,0 +1,11 @@
+interface Props {
+    url: string;
+    theme?: 'light' | 'dark';
+    width?: string;
+    height?: string;
+    disable_observer?: boolean;
+    iframe_styles?: string;
+}
+declare const ApplePodcasts: import("svelte").Component<Props, {}, "">;
+type ApplePodcasts = ReturnType<typeof ApplePodcasts>;
+export default ApplePodcasts;

package/dist/components/bluesky.svelte

@@ -0,0 +1,75 @@
+<script lang="ts">
+	import GeneralObserver from './general-observer.svelte';
+	import { getBlueskyEmbedUrl, parseBlueskyUrl } from '../utils/bluesky.js';
+
+	interface Props {
+		url: string;
+		width?: string;
+		height?: string;
+		disable_observer?: boolean;
+		iframe_styles?: string;
+	}
+
+	let {
+		url,
+		width = '100%',
+		height = '500',
+		disable_observer = false,
+		iframe_styles
+	}: Props = $props();
+
+	const parsed = $derived(parseBlueskyUrl(url));
+	const embedUrl = $derived(getBlueskyEmbedUrl(url));
+	let iframeElement = $state<HTMLIFrameElement | null>(null);
+	let wrapperHeight = $state('500px');
+
+	$effect(() => {
+		wrapperHeight = height;
+	});
+
+	$effect(() => {
+		if (!embedUrl) {
+			return;
+		}
+
+		const onMessage = (event: MessageEvent) => {
+			if (event.origin !== 'https://embed.bsky.app') {
+				return;
+			}
+
+			if (event.source !== iframeElement?.contentWindow) {
+				return;
+			}
+
+			if (typeof event.data !== 'object' || event.data === null) {
+				return;
+			}
+
+			const payload = event.data as { height?: unknown };
+			if (typeof payload.height !== 'number' || Number.isNaN(payload.height)) {
+				return;
+			}
+
+			wrapperHeight = `${Math.max(payload.height, 100)}px`;
+		};
+
+		window.addEventListener('message', onMessage);
+		return () => window.removeEventListener('message', onMessage);
+	});
+</script>
+
+<GeneralObserver {disable_observer}>
+	{#if embedUrl && parsed.isValid}
+		<div style={`height: ${wrapperHeight}; width: ${width};`}>
+			<iframe
+				bind:this={iframeElement}
+				src={embedUrl}
+				width={width}
+				height={wrapperHeight}
+				title={`bluesky-${parsed.handle}-${parsed.postId}`}
+				loading="lazy"
+				style={iframe_styles}
+			></iframe>
+		</div>
+	{/if}
+</GeneralObserver>

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

@@ -0,0 +1,10 @@
+interface Props {
+    url: string;
+    width?: string;
+    height?: string;
+    disable_observer?: boolean;
+    iframe_styles?: string;
+}
+declare const Bluesky: import("svelte").Component<Props, {}, "">;
+type Bluesky = ReturnType<typeof Bluesky>;
+export default Bluesky;

package/dist/components/dailymotion.svelte

@@ -0,0 +1,70 @@
+<script lang="ts">
+	import GeneralObserver from './general-observer.svelte';
+	import { getPadding } from '../utils/index.js';
+	import { extractDailymotionId, getDailymotionEmbedUrl } from '../utils/dailymotion.js';
+
+	interface Props {
+		url: string;
+		aspectRatio?: string;
+		autoplay?: boolean;
+		mute?: boolean;
+		controls?: boolean;
+		disable_observer?: boolean;
+		iframe_styles?: string;
+	}
+
+	let {
+		url,
+		aspectRatio = '16:9',
+		autoplay = false,
+		mute = false,
+		controls = true,
+		disable_observer = false,
+		iframe_styles
+	}: Props = $props();
+
+	const videoId = $derived(extractDailymotionId(url));
+	const baseEmbedUrl = $derived(getDailymotionEmbedUrl(url));
+	const paddingStyle = $derived(getPadding(aspectRatio));
+	const embedUrl = $derived.by(() => {
+		if (!baseEmbedUrl) {
+			return null;
+		}
+
+		const query = new URL(baseEmbedUrl);
+		query.searchParams.set('autoplay', autoplay ? '1' : '0');
+		query.searchParams.set('mute', mute ? '1' : '0');
+		query.searchParams.set('controls', controls ? '1' : '0');
+		return query.toString();
+	});
+</script>
+
+<GeneralObserver {disable_observer}>
+	{#if embedUrl}
+		<div class="wrapper" style={paddingStyle}>
+			<iframe
+				src={embedUrl}
+				title={`dailymotion-${videoId}`}
+				allow="autoplay; fullscreen; picture-in-picture"
+				allowfullscreen
+				loading="lazy"
+				style={iframe_styles}
+			></iframe>
+		</div>
+	{/if}
+</GeneralObserver>
+
+<style>
+	.wrapper {
+		position: relative;
+		width: 100%;
+	}
+
+	iframe {
+		position: absolute;
+		inset: 0;
+		width: 100%;
+		height: 100%;
+		border: 0;
+	}
+</style>

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

@@ -0,0 +1,12 @@
+interface Props {
+    url: string;
+    aspectRatio?: string;
+    autoplay?: boolean;
+    mute?: boolean;
+    controls?: boolean;
+    disable_observer?: boolean;
+    iframe_styles?: string;
+}
+declare const Dailymotion: import("svelte").Component<Props, {}, "">;
+type Dailymotion = ReturnType<typeof Dailymotion>;
+export default Dailymotion;

package/dist/components/deezer.svelte

@@ -0,0 +1,40 @@
+<script lang="ts">
+	import GeneralObserver from './general-observer.svelte';
+	import { getDeezerEmbedUrl, parseDeezerUrl } from '../utils/deezer.js';
+
+	interface Props {
+		url: string;
+		theme?: 'light' | 'dark';
+		width?: string;
+		height?: string;
+		disable_observer?: boolean;
+		iframe_styles?: string;
+	}
+
+	let {
+		url,
+		theme = 'light',
+		width = '100%',
+		height,
+		disable_observer = false,
+		iframe_styles
+	}: Props = $props();
+
+	const parsed = $derived(parseDeezerUrl(url));
+	const embedUrl = $derived(getDeezerEmbedUrl(url, theme));
+	const resolvedHeight = $derived(height ?? (parsed.type === 'track' ? '150' : '380'));
+</script>
+
+<GeneralObserver {disable_observer}>
+	{#if embedUrl}
+		<iframe
+			src={embedUrl}
+			{width}
+			height={resolvedHeight}
+			title={`deezer-${parsed.type}-${parsed.id}`}
+			allow="encrypted-media; clipboard-write"
+			loading="lazy"
+			style={iframe_styles}
+		></iframe>
+	{/if}
+</GeneralObserver>

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

@@ -0,0 +1,11 @@
+interface Props {
+    url: string;
+    theme?: 'light' | 'dark';
+    width?: string;
+    height?: string;
+    disable_observer?: boolean;
+    iframe_styles?: string;
+}
+declare const Deezer: import("svelte").Component<Props, {}, "">;
+type Deezer = ReturnType<typeof Deezer>;
+export default Deezer;

package/dist/components/general-observer.svelte

@@ -0,0 +1,46 @@
+<script lang="ts">
+	import type { Snippet } from 'svelte';
+
+	interface Props {
+		threshold?: number;
+		disable_observer?: boolean;
+		children: Snippet;
+	}
+
+	let { threshold = 0.5, disable_observer = false, children }: Props = $props();
+	let loaded = $state(false);
+	let root = $state<HTMLElement | null>(null);
+
+	$effect(() => {
+		if (disable_observer || !root || loaded) {
+			return;
+		}
+
+		if (typeof IntersectionObserver === 'undefined') {
+			loaded = true;
+			return;
+		}
+
+		const observer = new IntersectionObserver(
+			([entry]) => {
+				if (!entry?.isIntersecting) {
+					return;
+				}
+
+				loaded = true;
+				observer.disconnect();
+			},
+			{ threshold }
+		);
+
+		observer.observe(root);
+
+		return () => observer.disconnect();
+	});
+</script>
+
+<div bind:this={root} data-testid="general-observer">
+	{#if disable_observer || loaded}
+		{@render children()}
+	{/if}
+</div>

package/dist/components/general-observer.svelte.d.ts

@@ -0,0 +1,9 @@
+import type { Snippet } from 'svelte';
+interface Props {
+    threshold?: number;
+    disable_observer?: boolean;
+    children: Snippet;
+}
+declare const GeneralObserver: import("svelte").Component<Props, {}, "">;
+type GeneralObserver = ReturnType<typeof GeneralObserver>;
+export default GeneralObserver;

package/dist/components/instagram.svelte

@@ -0,0 +1,37 @@
+<script lang="ts">
+	import GeneralObserver from './general-observer.svelte';
+	import { extractInstagramId, getInstagramEmbedUrl } from '../utils/instagram.js';
+
+	interface Props {
+		url: string;
+		width?: string;
+		height?: string;
+		disable_observer?: boolean;
+		iframe_styles?: string;
+	}
+
+	let {
+		url,
+		width = '100%',
+		height = '560',
+		disable_observer = false,
+		iframe_styles
+	}: Props = $props();
+
+	const postId = $derived(extractInstagramId(url));
+	const embedUrl = $derived(getInstagramEmbedUrl(url));
+</script>
+
+<GeneralObserver {disable_observer}>
+	{#if embedUrl}
+		<iframe
+			src={embedUrl}
+			{width}
+			{height}
+			title={`instagram-${postId}`}
+			allow="autoplay; clipboard-write; encrypted-media; picture-in-picture; web-share"
+			loading="lazy"
+			style={iframe_styles}
+		></iframe>
+	{/if}
+</GeneralObserver>

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

@@ -0,0 +1,10 @@
+interface Props {
+    url: string;
+    width?: string;
+    height?: string;
+    disable_observer?: boolean;
+    iframe_styles?: string;
+}
+declare const Instagram: import("svelte").Component<Props, {}, "">;
+type Instagram = ReturnType<typeof Instagram>;
+export default Instagram;

package/dist/components/linked-in.svelte

@@ -0,0 +1,37 @@
+<script lang="ts">
+	import GeneralObserver from './general-observer.svelte';
+	import { extractLinkedInPostId, getLinkedInEmbedUrl } from '../utils/linkedin.js';
+
+	interface Props {
+		url: string;
+		width?: string;
+		height?: string;
+		disable_observer?: boolean;
+		iframe_styles?: string;
+	}
+
+	let {
+		url,
+		width = '100%',
+		height = '399',
+		disable_observer = false,
+		iframe_styles
+	}: Props = $props();
+
+	const postId = $derived(extractLinkedInPostId(url));
+	const embedUrl = $derived(getLinkedInEmbedUrl(url));
+</script>
+
+<GeneralObserver {disable_observer}>
+	{#if embedUrl}
+		<iframe
+			src={embedUrl}
+			{width}
+			{height}
+			title={`linkedin-${postId}`}
+			allowfullscreen
+			loading="lazy"
+			style={iframe_styles}
+		></iframe>
+	{/if}
+</GeneralObserver>

package/dist/components/linked-in.svelte.d.ts

@@ -0,0 +1,10 @@
+interface Props {
+    url: string;
+    width?: string;
+    height?: string;
+    disable_observer?: boolean;
+    iframe_styles?: string;
+}
+declare const LinkedIn: import("svelte").Component<Props, {}, "">;
+type LinkedIn = ReturnType<typeof LinkedIn>;
+export default LinkedIn;

package/dist/components/mastodon.svelte

@@ -0,0 +1,78 @@
+<script lang="ts">
+	import GeneralObserver from './general-observer.svelte';
+	import { getMastodonEmbedInfo } from '../utils/mastodon.js';
+
+	interface Props {
+		url: string;
+		width?: string;
+		height?: string;
+		disable_observer?: boolean;
+		iframe_styles?: string;
+	}
+
+	let {
+		url,
+		width = '100%',
+		height = '400',
+		disable_observer = false,
+		iframe_styles
+	}: Props = $props();
+
+	const embedInfo = $derived(getMastodonEmbedInfo(url));
+
+	const ensureMastodonScript = async (scriptUrl: string) => {
+		if (typeof window === 'undefined') {
+			return;
+		}
+
+		const existingScript = document.querySelector<HTMLScriptElement>(`script[src="${scriptUrl}"]`);
+		if (existingScript) {
+			if (existingScript.dataset.loaded === 'true') {
+				return;
+			}
+
+			await new Promise<void>((resolve, reject) => {
+				existingScript.addEventListener('load', () => resolve(), { once: true });
+				existingScript.addEventListener('error', () => reject(new Error('Failed to load Mastodon script')), {
+					once: true
+				});
+			});
+			return;
+		}
+
+		await new Promise<void>((resolve, reject) => {
+			const script = document.createElement('script');
+			script.src = scriptUrl;
+			script.async = true;
+			script.dataset.sveltekitEmbedsScript = 'mastodon';
+			script.onload = () => {
+				script.dataset.loaded = 'true';
+				resolve();
+			};
+			script.onerror = () => reject(new Error('Failed to load Mastodon script'));
+			document.head.appendChild(script);
+		});
+	};
+
+	$effect(() => {
+		if (!embedInfo) {
+			return;
+		}
+
+		void ensureMastodonScript(embedInfo.scriptUrl);
+	});
+</script>
+
+<GeneralObserver {disable_observer}>
+	{#if embedInfo}
+		<iframe
+			src={embedInfo.embedUrl}
+			{width}
+			{height}
+			title="mastodon-embed"
+			allow="autoplay; encrypted-media; picture-in-picture"
+			loading="lazy"
+			style={iframe_styles}
+		></iframe>
+	{/if}
+</GeneralObserver>

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

@@ -0,0 +1,10 @@
+interface Props {
+    url: string;
+    width?: string;
+    height?: string;
+    disable_observer?: boolean;
+    iframe_styles?: string;
+}
+declare const Mastodon: import("svelte").Component<Props, {}, "">;
+type Mastodon = ReturnType<typeof Mastodon>;
+export default Mastodon;