feat(core): added createObjectUrl utility

packages/core/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@sv-use/core",
-	"version": "1.14.0",
+	"version": "1.15.0",
 	"license": "MIT",
 	"description": "A collection of Svelte 5 utilities.",
 	"main": "./dist/index.js",

packages/core/src/create-object-url/index.svelte.ts

@@ -0,0 +1,42 @@
+import { normalizeValue } from '../__internal__/utils.svelte.js';
+import type { CleanupFunction, MaybeGetter } from '../__internal__/types.js';
+
+type CreateObjectUrlReturn = {
+	readonly current: string | null;
+	cleanup: CleanupFunction;
+};
+
+/**
+ * Creates a reactive URL representing the given object.
+ * @param object The object to generate the url for.
+ * @see https://svelte-librarian.github.io/sv-use/docs/create-object-url
+ */
+export function createObjectUrl(
+	object: MaybeGetter<Blob | MediaSource | null | undefined>
+): CreateObjectUrlReturn {
+	let current = $state<string | null>(null);
+	const _object = $derived(normalizeValue(object));
+
+	$effect(() => {
+		if (_object) {
+			current = URL.createObjectURL(_object);
+		}
+
+		return cleanup;
+	});
+
+	function cleanup() {
+		if (current) {
+			URL.revokeObjectURL(current);
+		}
+
+		current = null;
+	}
+
+	return {
+		get current() {
+			return current;
+		},
+		cleanup
+	};
+}

packages/core/src/index.ts

@@ -3,6 +3,7 @@ export * from './auto-reset-state/index.svelte.js';
 export * from './create-drop-zone/index.svelte.js';
 export * from './create-eye-dropper/index.svelte.js';
 export * from './create-file-dialog/index.svelte.js';
+export * from './create-object-url/index.svelte.js';
 export * from './create-share/index.svelte.js';
 export * from './create-speech-recognition/index.svelte.js';
 export * from './create-vibration/index.svelte.js';

packages/website/src/lib/docs/core/create-object-url/Demo.svelte

@@ -0,0 +1,25 @@
+<script lang="ts">
+	import { createObjectUrl } from '$sv-use/core';
+
+	let file = $state<File | null>(null);
+	const url = createObjectUrl(() => file);
+
+	function onFileChange(event: Event & { currentTarget: EventTarget & HTMLInputElement }) {
+		file = event.currentTarget.files?.[0] ?? null;
+	}
+</script>
+
+<div class="relative flex w-full flex-col gap-2">
+	<p class="text-sm text-zinc-500 dark:text-zinc-400">Select file :</p>
+	<input type="file" onchange={onFileChange} class="dark:text-zinc-200" />
+	<p class="text-sm text-zinc-500 dark:text-zinc-400">Object URL :</p>
+	<code>
+		{#if url.current}
+			<a href={url.current} target="_blank" class="text-svelte dark:text-darksvelte underline">
+				{url.current}
+			</a>
+		{:else}
+			<p class="dark:text-zinc-200">none</p>
+		{/if}
+	</code>
+</div>

packages/website/src/lib/docs/core/create-object-url/index.md

@@ -0,0 +1,30 @@
+---
+category: browser
+---
+
+# createObjectUrl
+
+Creates a reactive URL representing the given object.
+
+Automatically releases the URL when the object changes or the component is
+unmounted.
+
+## Usage
+
+> [!NOTE]
+> It uses `$effect`.
+
+```svelte
+<script lang="ts">
+    import { createObjectUrl } from '@sv-use/core';
+
+    // Get a file in some way
+    // e.g. a dropzone, a cdn, etc.
+    const file = $state<File | null>(null);
+    const url = createObjectUrl(() => file);
+</script>
+
+<a href={url.current} download>
+    Upload file
+</a>
+```