svelte-firekit 0.0.24 → 0.1.0

package/dist/components/custom-guard.svelte.d.ts

@@ -0,0 +1,31 @@
+import type { UserProfile } from '../types/auth.js';
+import type { Auth } from 'firebase/auth';
+import type { Snippet } from 'svelte';
+type $$ComponentProps = {
+    /**
+     * Children content to render when all checks pass
+     */
+    children: Snippet<[UserProfile, Auth, () => Promise<void>]>;
+    /**
+     * Whether authentication is required to view the content
+     * @default true
+     */
+    requireAuth?: boolean;
+    /**
+     * Path to redirect to if checks fail
+     * @default '/'
+     */
+    redirectTo?: string;
+    /**
+     * Fallback content to show while checking auth state
+     */
+    fallback?: Snippet<[]>;
+    /**
+     * Array of verification functions that must return true to allow access
+     * Each function receives the user profile and auth instance
+     */
+    verificationChecks?: ((user: UserProfile, auth: Auth) => boolean | Promise<boolean>)[];
+};
+declare const CustomGuard: import("svelte").Component<$$ComponentProps, {}, "">;
+type CustomGuard = ReturnType<typeof CustomGuard>;
+export default CustomGuard;

package/dist/components/download-url.svelte

@@ -0,0 +1,92 @@
+<script lang="ts">
+	import { ref, type StorageReference } from 'firebase/storage';
+	import { firebaseService } from '../firebase.js';
+	import { firekitDownloadUrl } from '../services/storage.svelte.js';
+	import { browser } from '$app/environment';
+	import type { Snippet } from 'svelte';
+
+	/**
+	 * Props for DownloadURL component
+	 */
+	let {
+		ref: path,
+		children,
+		loading
+	}: {
+		/**
+		 * Storage reference path string (e.g. 'images/pic.png')
+		 */
+		ref: string;
+		/**
+		 * Content to render when URL is loaded
+		 */
+		children: Snippet<[string, StorageReference, any]>;
+		/**
+		 * Content to render while loading
+		 */
+		loading?: Snippet<[]>;
+	} = $props();
+
+	// Get Storage instance and create references
+	let storage: any = $state(null);
+	let storageRef: StorageReference | null = $state(null);
+	let downloadUrlService: ReturnType<typeof firekitDownloadUrl> | null = $state(null);
+
+	// Track URL state
+	let urlState = $state({
+		loading: true,
+		url: null as string | null,
+		error: null as Error | null
+	});
+
+	// Subscribe to URL changes
+	$effect(() => {
+		if (!browser) {
+			urlState = {
+				loading: false,
+				url: null,
+				error: new Error('Storage not available in SSR')
+			};
+			return;
+		}
+
+		// Initialize storage and service
+		storage = firebaseService.getStorageInstance();
+		if (!storage) {
+			urlState = {
+				loading: false,
+				url: null,
+				error: new Error('Storage instance not available')
+			};
+			return;
+		}
+
+		// Create storage reference
+		storageRef = ref(storage, path);
+
+		// Create download URL service
+		downloadUrlService = firekitDownloadUrl(path);
+
+		// The service state is reactive, so we can directly access it
+		// The effect will re-run when the service state changes
+		urlState = {
+			loading: downloadUrlService.loading,
+			url: downloadUrlService.url,
+			error: downloadUrlService.error
+		};
+	});
+</script>
+
+{#if !browser}
+	<div>Storage not available in SSR</div>
+{:else if urlState.loading}
+	{#if loading}
+		{@render loading()}
+	{:else}
+		<div>Loading...</div>
+	{/if}
+{:else if urlState.error}
+	<div class="error">Error: {urlState.error.message}</div>
+{:else if urlState.url}
+	{@render children(urlState.url, storageRef!, storage)}
+{/if}

package/dist/components/download-url.svelte.d.ts

@@ -0,0 +1,19 @@
+import { type StorageReference } from 'firebase/storage';
+import type { Snippet } from 'svelte';
+type $$ComponentProps = {
+    /**
+     * Storage reference path string (e.g. 'images/pic.png')
+     */
+    ref: string;
+    /**
+     * Content to render when URL is loaded
+     */
+    children: Snippet<[string, StorageReference, any]>;
+    /**
+     * Content to render while loading
+     */
+    loading?: Snippet<[]>;
+};
+declare const DownloadUrl: import("svelte").Component<$$ComponentProps, {}, "">;
+type DownloadUrl = ReturnType<typeof DownloadUrl>;
+export default DownloadUrl;

package/dist/components/firebase-app.svelte

@@ -0,0 +1,30 @@
+<script lang="ts">
+	import { setContext } from 'svelte';
+	import type { Snippet } from 'svelte';
+	import { browser } from '$app/environment';
+	import { firebaseService } from '../firebase.js';
+
+	/**
+	 * Props for FirebaseApp component
+	 */
+	let { children }: { children: Snippet } = $props();
+
+	// Only initialize Firebase in the browser
+	if (browser) {
+		// Get Firebase app instance from service
+		const app = firebaseService.getFirebaseApp();
+		const auth = firebaseService.getAuthInstance();
+		const firestore = firebaseService.getDbInstance();
+		const storage = firebaseService.getStorageInstance();
+		const rtdb = firebaseService.getDatabaseInstance();
+
+		// Set Firebase instances in context
+		setContext('firebase/app', app);
+		setContext('firebase/auth', auth);
+		setContext('firebase/firestore', firestore);
+		setContext('firebase/storage', storage);
+		setContext('firebase/rtdb', rtdb);
+	}
+</script>
+
+{@render children()}

package/dist/components/firebase-app.svelte.d.ts

@@ -0,0 +1,7 @@
+import type { Snippet } from 'svelte';
+type $$ComponentProps = {
+    children: Snippet;
+};
+declare const FirebaseApp: import("svelte").Component<$$ComponentProps, {}, "">;
+type FirebaseApp = ReturnType<typeof FirebaseApp>;
+export default FirebaseApp;

package/dist/components/node-list.svelte

@@ -0,0 +1,102 @@
+<script lang="ts">
+	import { ref, type DatabaseReference, type Database } from 'firebase/database';
+	import { firebaseService } from '../firebase.js';
+	import { firekitRealtimeList } from '../services/realtime.svelte.js';
+	import { browser } from '$app/environment';
+	import type { Snippet } from 'svelte';
+
+	/**
+	 * Props for NodeList component
+	 */
+	let {
+		path,
+		startWith,
+		children,
+		loading,
+		queryConstraints
+	}: {
+		/**
+		 * Database reference path string (e.g. 'users')
+		 */
+		path: string;
+		/**
+		 * Initial value to use before list is fetched
+		 */
+		startWith?: any[];
+		/**
+		 * Content to render when list is loaded
+		 */
+		children: Snippet<[any[], DatabaseReference, Database]>;
+		/**
+		 * Content to render while loading
+		 */
+		loading?: Snippet<[]>;
+		/**
+		 * Query constraints for the list
+		 */
+		queryConstraints?: any[];
+	} = $props();
+
+	// Get Database instance and create references
+	let database: Database | null = $state(null);
+	let listRef: DatabaseReference | null = $state(null);
+	let listService: ReturnType<typeof firekitRealtimeList> | null = $state(null);
+
+	// Track list state
+	let listState = $state({
+		loading: true,
+		data: startWith ?? [],
+		error: null as Error | null
+	});
+
+	// Subscribe to list changes
+	$effect(() => {
+		if (!browser) {
+			listState = {
+				loading: false,
+				data: startWith ?? [],
+				error: new Error('Realtime Database not available in SSR')
+			};
+			return;
+		}
+
+		// Initialize database and service
+		database = firebaseService.getDatabaseInstance();
+		if (!database) {
+			listState = {
+				loading: false,
+				data: [],
+				error: new Error('Realtime Database instance not available')
+			};
+			return;
+		}
+
+		// Create database reference
+		listRef = ref(database, path);
+
+		// Create list service
+		listService = firekitRealtimeList(path, startWith);
+
+		// The service state is reactive, so we can directly access it
+		// The effect will re-run when the service state changes
+		listState = {
+			loading: listService.loading,
+			data: listService.list, // Use the processed list with IDs
+			error: listService.error
+		};
+	});
+</script>
+
+{#if !browser}
+	{@render children(startWith ?? [], null as any, null as any)}
+{:else if listState.loading}
+	{#if loading}
+		{@render loading()}
+	{:else}
+		<div>Loading...</div>
+	{/if}
+{:else if listState.error}
+	<div class="error">Error: {listState.error.message}</div>
+{:else}
+	{@render children(listState.data, listRef!, database!)}
+{/if}

package/dist/components/node-list.svelte.d.ts

@@ -0,0 +1,27 @@
+import { type DatabaseReference, type Database } from 'firebase/database';
+import type { Snippet } from 'svelte';
+type $$ComponentProps = {
+    /**
+     * Database reference path string (e.g. 'users')
+     */
+    path: string;
+    /**
+     * Initial value to use before list is fetched
+     */
+    startWith?: any[];
+    /**
+     * Content to render when list is loaded
+     */
+    children: Snippet<[any[], DatabaseReference, Database]>;
+    /**
+     * Content to render while loading
+     */
+    loading?: Snippet<[]>;
+    /**
+     * Query constraints for the list
+     */
+    queryConstraints?: any[];
+};
+declare const NodeList: import("svelte").Component<$$ComponentProps, {}, "">;
+type NodeList = ReturnType<typeof NodeList>;
+export default NodeList;

package/dist/components/signed-in.svelte

@@ -0,0 +1,42 @@
+<script lang="ts">
+	import { firekitAuth } from '../services/auth.js';
+	import { firebaseService } from '../firebase.js';
+	import { onDestroy } from 'svelte';
+	import type { UserProfile } from '../types/auth.js';
+	import type { Snippet } from 'svelte';
+
+	/**
+	 * Props for SignedIn component
+	 */
+	let {
+		children
+	}: {
+		/**
+		 * Children content to render when user is signed in
+		 */
+		children: Snippet<[UserProfile]>;
+	} = $props();
+
+	// Get Firebase Auth instance
+	const auth = firebaseService.getAuthInstance();
+	if (!auth) {
+		throw new Error('Firebase Auth instance not available');
+	}
+
+	// Reactive auth state
+	let authState = $state(firekitAuth.getState());
+
+	// Subscribe to auth state changes
+	const unsubscribe = firekitAuth.onAuthStateChanged((state) => {
+		authState = state;
+	});
+
+	// Cleanup subscription on component destruction
+	onDestroy(() => {
+		unsubscribe();
+	});
+</script>
+
+{#if firekitAuth.isAuthenticated() && authState.user}
+	{@render children(authState.user)}
+{/if}

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

@@ -0,0 +1,11 @@
+import type { UserProfile } from '../types/auth.js';
+import type { Snippet } from 'svelte';
+type $$ComponentProps = {
+    /**
+     * Children content to render when user is signed in
+     */
+    children: Snippet<[UserProfile]>;
+};
+declare const SignedIn: import("svelte").Component<$$ComponentProps, {}, "">;
+type SignedIn = ReturnType<typeof SignedIn>;
+export default SignedIn;

package/dist/components/signed-out.svelte

@@ -0,0 +1,42 @@
+<script lang="ts">
+	import { firekitAuth } from '../services/auth.js';
+	import { firebaseService } from '../firebase.js';
+	import { onDestroy } from 'svelte';
+	import type { Auth } from 'firebase/auth';
+	import type { Snippet } from 'svelte';
+
+	/**
+	 * Props for SignedOut component
+	 */
+	let {
+		children
+	}: {
+		/**
+		 * Children content to render when user is signed out
+		 */
+		children: Snippet<[Auth]>;
+	} = $props();
+
+	// Get Firebase Auth instance
+	const auth = firebaseService.getAuthInstance();
+	if (!auth) {
+		throw new Error('Firebase Auth instance not available');
+	}
+
+	// Reactive auth state
+	let authState = $state(firekitAuth.getState());
+
+	// Subscribe to auth state changes
+	const unsubscribe = firekitAuth.onAuthStateChanged((state) => {
+		authState = state;
+	});
+
+	// Cleanup subscription on component destruction
+	onDestroy(() => {
+		unsubscribe();
+	});
+</script>
+
+{#if !firekitAuth.isAuthenticated()}
+	{@render children(auth)}
+{/if}

package/dist/components/signed-out.svelte.d.ts

@@ -0,0 +1,11 @@
+import type { Auth } from 'firebase/auth';
+import type { Snippet } from 'svelte';
+type $$ComponentProps = {
+    /**
+     * Children content to render when user is signed out
+     */
+    children: Snippet<[Auth]>;
+};
+declare const SignedOut: import("svelte").Component<$$ComponentProps, {}, "">;
+type SignedOut = ReturnType<typeof SignedOut>;
+export default SignedOut;

package/dist/components/storage-list.svelte

@@ -0,0 +1,97 @@
+<script lang="ts">
+	import { ref, type StorageReference } from 'firebase/storage';
+	import { firebaseService } from '../firebase.js';
+	import { firekitStorageList } from '../services/storage.svelte.js';
+	import { browser } from '$app/environment';
+	import type { Snippet } from 'svelte';
+
+	/**
+	 * Props for StorageList component
+	 */
+	let {
+		ref: path,
+		children,
+		loading
+	}: {
+		/**
+		 * Storage reference path string (e.g. 'images/uid')
+		 */
+		ref: string;
+		/**
+		 * Content to render when list is loaded
+		 */
+		children: Snippet<
+			[{ items: StorageReference[]; prefixes: StorageReference[] }, StorageReference, any]
+		>;
+		/**
+		 * Content to render while loading
+		 */
+		loading?: Snippet<[]>;
+	} = $props();
+
+	// Get Storage instance and create references
+	let storage: any = $state(null);
+	let storageRef: StorageReference | null = $state(null);
+	let storageListService: ReturnType<typeof firekitStorageList> | null = $state(null);
+
+	// Track list state
+	let listState = $state({
+		loading: true,
+		list: null as { items: StorageReference[]; prefixes: StorageReference[] } | null,
+		error: null as Error | null
+	});
+
+	// Subscribe to list changes
+	$effect(() => {
+		if (!browser) {
+			listState = {
+				loading: false,
+				list: null,
+				error: new Error('Storage not available in SSR')
+			};
+			return;
+		}
+
+		// Initialize storage and service
+		storage = firebaseService.getStorageInstance();
+		if (!storage) {
+			listState = {
+				loading: false,
+				list: null,
+				error: new Error('Storage instance not available')
+			};
+			return;
+		}
+
+		// Create storage reference
+		storageRef = ref(storage, path);
+
+		// Create storage list service
+		storageListService = firekitStorageList(path);
+
+		// The service state is reactive, so we can directly access it
+		// The effect will re-run when the service state changes
+		listState = {
+			loading: storageListService.loading,
+			list: {
+				items: storageListService.items,
+				prefixes: storageListService.prefixes
+			},
+			error: storageListService.error
+		};
+	});
+</script>
+
+{#if !browser}
+	<div>Storage not available in SSR</div>
+{:else if listState.loading}
+	{#if loading}
+		{@render loading()}
+	{:else}
+		<div>Loading...</div>
+	{/if}
+{:else if listState.error}
+	<div class="error">Error: {listState.error.message}</div>
+{:else if listState.list}
+	{@render children(listState.list, storageRef!, storage)}
+{/if}

package/dist/components/storage-list.svelte.d.ts

@@ -0,0 +1,26 @@
+import { type StorageReference } from 'firebase/storage';
+import type { Snippet } from 'svelte';
+type $$ComponentProps = {
+    /**
+     * Storage reference path string (e.g. 'images/uid')
+     */
+    ref: string;
+    /**
+     * Content to render when list is loaded
+     */
+    children: Snippet<[
+        {
+            items: StorageReference[];
+            prefixes: StorageReference[];
+        },
+        StorageReference,
+        any
+    ]>;
+    /**
+     * Content to render while loading
+     */
+    loading?: Snippet<[]>;
+};
+declare const StorageList: import("svelte").Component<$$ComponentProps, {}, "">;
+type StorageList = ReturnType<typeof StorageList>;
+export default StorageList;

package/dist/components/upload-task.svelte

@@ -0,0 +1,108 @@
+<script lang="ts">
+	import { ref, type StorageReference, type UploadTaskSnapshot } from 'firebase/storage';
+	import { firebaseService } from '../firebase.js';
+	import { firekitUploadTask } from '../services/storage.svelte.js';
+	import { browser } from '$app/environment';
+	import type { Snippet } from 'svelte';
+	import type { UploadMetadata } from 'firebase/storage';
+
+	/**
+	 * Props for UploadTask component
+	 */
+	let {
+		ref: path,
+		data,
+		metadata,
+		children
+	}: {
+		/**
+		 * Storage reference path string (e.g. 'myFile.txt')
+		 */
+		ref: string;
+		/**
+		 * File data to upload (Blob, Uint8Array, or ArrayBuffer)
+		 */
+		data: Blob | Uint8Array | ArrayBuffer;
+		/**
+		 * Optional file metadata
+		 */
+		metadata?: UploadMetadata;
+		/**
+		 * Content to render during upload
+		 */
+		children: Snippet<[UploadTaskSnapshot | null, any, number, any]>;
+	} = $props();
+
+	// Get Storage instance and create references
+	let storage: any = $state(null);
+	let uploadTaskService: ReturnType<typeof firekitUploadTask> | null = $state(null);
+
+	// Track upload state
+	let uploadState = $state({
+		loading: true,
+		snapshot: null as UploadTaskSnapshot | null,
+		progress: 0,
+		error: null as Error | null,
+		task: null as any
+	});
+
+	// Subscribe to upload changes
+	$effect(() => {
+		if (!browser) {
+			uploadState = {
+				loading: false,
+				snapshot: null,
+				progress: 0,
+				error: new Error('Storage not available in SSR'),
+				task: null
+			};
+			return;
+		}
+
+		// Initialize storage and service
+		storage = firebaseService.getStorageInstance();
+		if (!storage) {
+			uploadState = {
+				loading: false,
+				snapshot: null,
+				progress: 0,
+				error: new Error('Storage instance not available'),
+				task: null
+			};
+			return;
+		}
+
+		// Convert data to File if it's not already a File
+		let file: File;
+		if (data instanceof File) {
+			file = data;
+		} else if (data instanceof Blob) {
+			file = new File([data], path.split('/').pop() || 'file', { type: metadata?.contentType });
+		} else {
+			// For Uint8Array or ArrayBuffer, create a Blob first
+			const blob = new Blob([data], { type: metadata?.contentType });
+			file = new File([blob], path.split('/').pop() || 'file');
+		}
+
+		// Create upload task service
+		uploadTaskService = firekitUploadTask(path, file);
+
+		// The service state is reactive, so we can directly access it
+		// The effect will re-run when the service state changes
+		uploadState = {
+			loading: !uploadTaskService.completed,
+			snapshot: uploadTaskService.snapshot,
+			progress: uploadTaskService.progress,
+			error: uploadTaskService.error,
+			task: uploadTaskService
+		};
+	});
+</script>
+
+{#if !browser}
+	<div>Storage not available in SSR</div>
+{:else if uploadState.error}
+	<div class="error">Error: {uploadState.error.message}</div>
+{:else}
+	{@render children(uploadState.snapshot, uploadState.task, uploadState.progress, storage)}
+{/if}

package/dist/components/upload-task.svelte.d.ts

@@ -0,0 +1,24 @@
+import { type UploadTaskSnapshot } from 'firebase/storage';
+import type { Snippet } from 'svelte';
+import type { UploadMetadata } from 'firebase/storage';
+type $$ComponentProps = {
+    /**
+     * Storage reference path string (e.g. 'myFile.txt')
+     */
+    ref: string;
+    /**
+     * File data to upload (Blob, Uint8Array, or ArrayBuffer)
+     */
+    data: Blob | Uint8Array | ArrayBuffer;
+    /**
+     * Optional file metadata
+     */
+    metadata?: UploadMetadata;
+    /**
+     * Content to render during upload
+     */
+    children: Snippet<[UploadTaskSnapshot | null, any, number, any]>;
+};
+declare const UploadTask: import("svelte").Component<$$ComponentProps, {}, "">;
+type UploadTask = ReturnType<typeof UploadTask>;
+export default UploadTask;