svelte-firekit 0.0.24 → 0.1.0

package/dist/components/Collection.svelte

@@ -0,0 +1,150 @@
+<script lang="ts">
+	import { firekitCollection } from '../services/collection.svelte.js';
+	import { firebaseService } from '../firebase.js';
+	import { collection } from 'firebase/firestore';
+	import { browser } from '$app/environment';
+	import type {
+		CollectionReference,
+		Query,
+		DocumentData,
+		Firestore,
+		QueryConstraint
+	} from 'firebase/firestore';
+	import type { Snippet } from 'svelte';
+
+	/**
+	 * Props for Collection component
+	 */
+	let {
+		ref,
+		startWith,
+		children,
+		loading,
+		queryConstraints = []
+	}: {
+		/**
+		 * Firestore collection reference, query reference, or path string
+		 */
+		ref: CollectionReference | Query | string;
+		/**
+		 * Initial value to use before collection is fetched
+		 */
+		startWith?: DocumentData[];
+		/**
+		 * Content to render when collection is loaded
+		 */
+		children: Snippet<[DocumentData[], CollectionReference | Query, Firestore, number]>;
+		/**
+		 * Content to render while loading
+		 */
+		loading?: Snippet<[]>;
+		/**
+		 * Optional query constraints to apply to the collection
+		 */
+		queryConstraints?: QueryConstraint[];
+	} = $props();
+
+	// Get Firestore instance only in browser environment
+	let firestore: Firestore | null = $state(null);
+	let collectionRef: CollectionReference | Query | null = $state(null);
+	let collectionService: ReturnType<typeof firekitCollection> | null = $state(null);
+
+	// Track collection state
+	let collectionState = $state({
+		loading: true,
+		data: startWith ?? ([] as DocumentData[]),
+		error: null as Error | null,
+		count: startWith?.length ?? 0
+	});
+
+	// Subscribe to collection changes only if in browser and collection service exists
+	$effect(() => {
+		if (!browser) {
+			collectionState = {
+				loading: false,
+				data: startWith ?? [],
+				error: null,
+				count: startWith?.length ?? 0
+			};
+			return;
+		}
+
+		// Initialize Firestore and collection service
+		firestore = firebaseService.getDbInstance();
+		if (!firestore) {
+			collectionState = {
+				loading: false,
+				data: [],
+				error: new Error('Firestore instance not available'),
+				count: 0
+			};
+			return;
+		}
+
+		// Create collection reference if path string is provided
+		collectionRef =
+			typeof ref === 'string' ? collection(firestore, ref) : (ref as CollectionReference | Query);
+
+		// Create collection service
+		collectionService = firekitCollection(
+			typeof ref === 'string' ? ref : (ref as CollectionReference).path,
+			queryConstraints
+		);
+
+		// Update state based on collection service state
+		collectionState = {
+			loading: collectionService.loading,
+			data: collectionService.data,
+			error: collectionService.error,
+			count: collectionService.size
+		};
+
+		// Set up event listener for real-time updates
+		const unsubscribe = collectionService.addEventListener((event) => {
+			if (event.type === 'data_changed') {
+				collectionState = {
+					loading: false,
+					data: event.data || [],
+					error: null,
+					count: event.data?.length || 0
+				};
+			} else if (event.type === 'error') {
+				collectionState = {
+					loading: false,
+					data: [],
+					error: event.error || null,
+					count: 0
+				};
+			} else if (event.type === 'loading_started') {
+				collectionState = {
+					...collectionState,
+					loading: true
+				};
+			} else if (event.type === 'loading_finished') {
+				collectionState = {
+					...collectionState,
+					loading: false
+				};
+			}
+		});
+
+		return () => {
+			unsubscribe();
+			collectionService?.dispose();
+		};
+	});
+</script>
+
+{#if !browser}
+	{@render children(startWith ?? [], null as any, null as any, startWith?.length ?? 0)}
+{:else if collectionState.loading}
+	{#if loading}
+		{@render loading()}
+	{:else}
+		<div>Loading...</div>
+	{/if}
+{:else if collectionState.error}
+	<div class="error">Error: {collectionState.error.message}</div>
+{:else}
+	{@render children(collectionState.data, collectionRef!, firestore!, collectionState.count)}
+{/if}

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

@@ -0,0 +1,27 @@
+import type { CollectionReference, Query, DocumentData, Firestore, QueryConstraint } from 'firebase/firestore';
+import type { Snippet } from 'svelte';
+type $$ComponentProps = {
+    /**
+     * Firestore collection reference, query reference, or path string
+     */
+    ref: CollectionReference | Query | string;
+    /**
+     * Initial value to use before collection is fetched
+     */
+    startWith?: DocumentData[];
+    /**
+     * Content to render when collection is loaded
+     */
+    children: Snippet<[DocumentData[], CollectionReference | Query, Firestore, number]>;
+    /**
+     * Content to render while loading
+     */
+    loading?: Snippet<[]>;
+    /**
+     * Optional query constraints to apply to the collection
+     */
+    queryConstraints?: QueryConstraint[];
+};
+declare const Collection: import("svelte").Component<$$ComponentProps, {}, "">;
+type Collection = ReturnType<typeof Collection>;
+export default Collection;

package/dist/components/Ddoc.svelte

@@ -0,0 +1,131 @@
+<script lang="ts">
+	import { firekitDoc } from '../services/document.svelte.js';
+	import { firebaseService } from '../firebase.js';
+	import { doc } from 'firebase/firestore';
+	import { browser } from '$app/environment';
+	import { onDestroy } from 'svelte';
+	import type { DocumentReference, DocumentData, Firestore } from 'firebase/firestore';
+	import type { Snippet } from 'svelte';
+	import type { DocumentOptions } from '../types/document.js';
+
+	/**
+	 * Props for Doc component
+	 */
+	let {
+		ref,
+		startWith,
+		children,
+		loading,
+		options = {}
+	}: {
+		/**
+		 * Firestore document reference or path string
+		 */
+		ref: DocumentReference | string;
+		/**
+		 * Initial value to use before document is fetched
+		 */
+		startWith?: DocumentData | null;
+		/**
+		 * Content to render when document is loaded
+		 */
+		children: Snippet<[DocumentData | null, DocumentReference, Firestore]>;
+		/**
+		 * Content to render while loading
+		 */
+		loading?: Snippet<[]>;
+		/**
+		 * Document options for configuration
+		 */
+		options?: DocumentOptions;
+	} = $props();
+
+	// Get Firestore instance only in browser environment
+	let firestore: Firestore | null = $state(null);
+	let docRef: DocumentReference | null = $state(null);
+	let documentService: any = $state(null);
+
+	// Reactive document state
+	let componentState = $state({
+		loading: true,
+		data: null as DocumentData | null,
+		error: null as Error | null,
+		exists: false
+	});
+
+	// Initialize in browser environment
+	$effect(() => {
+		if (!browser) return;
+
+		firestore = firebaseService.getDbInstance();
+		if (!firestore) {
+			throw new Error('Firestore instance not available');
+		}
+
+		// Create document reference if path string is provided
+		docRef = typeof ref === 'string' ? doc(firestore, ref) : ref;
+
+		// Create document service
+		documentService = firekitDoc(docRef.path, startWith ?? undefined, options);
+	});
+
+	// Subscribe to document changes only if in browser and document service exists
+	$effect(() => {
+		if (!browser || !documentService) {
+			componentState = {
+				loading: false,
+				data: startWith ?? null,
+				error: null,
+				exists: !!startWith
+			};
+			return;
+		}
+
+		// Update component state based on document service state
+		componentState = {
+			loading: documentService.loading,
+			data: documentService.data,
+			error: documentService.error,
+			exists: documentService.exists
+		};
+	});
+
+	// Cleanup on component destruction
+	onDestroy(() => {
+		if (documentService) {
+			documentService.dispose();
+		}
+	});
+</script>
+
+{#if !browser}
+	{@render children(startWith ?? null, null as any, null as any)}
+{:else if componentState.loading}
+	{#if loading}
+		{@render loading()}
+	{:else}
+		<div class="flex items-center justify-center min-h-screen">
+			<div class="text-center">
+				<div class="animate-spin rounded-full h-8 w-8 border-b-2 border-gray-900 mx-auto"></div>
+				<p class="mt-2 text-gray-600">Loading document...</p>
+			</div>
+		</div>
+	{/if}
+{:else if componentState.error}
+	<div class="flex items-center justify-center min-h-screen">
+		<div class="text-center">
+			<div class="text-red-500 text-lg font-semibold mb-2">Error Loading Document</div>
+			<p class="text-gray-600 mb-4">{componentState.error.message}</p>
+			{#if documentService?.canRefresh}
+				<button
+					class="px-4 py-2 bg-blue-500 text-white rounded hover:bg-blue-600"
+					onclick={() => documentService?.refresh()}
+				>
+					Retry
+				</button>
+			{/if}
+		</div>
+	</div>
+{:else}
+	{@render children(componentState.data ?? null, docRef!, firestore!)}
+{/if}

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

@@ -0,0 +1,28 @@
+import type { DocumentReference, DocumentData, Firestore } from 'firebase/firestore';
+import type { Snippet } from 'svelte';
+import type { DocumentOptions } from '../types/document.js';
+type $$ComponentProps = {
+    /**
+     * Firestore document reference or path string
+     */
+    ref: DocumentReference | string;
+    /**
+     * Initial value to use before document is fetched
+     */
+    startWith?: DocumentData | null;
+    /**
+     * Content to render when document is loaded
+     */
+    children: Snippet<[DocumentData | null, DocumentReference, Firestore]>;
+    /**
+     * Content to render while loading
+     */
+    loading?: Snippet<[]>;
+    /**
+     * Document options for configuration
+     */
+    options?: DocumentOptions;
+};
+declare const Ddoc: import("svelte").Component<$$ComponentProps, {}, "">;
+type Ddoc = ReturnType<typeof Ddoc>;
+export default Ddoc;

package/dist/components/Node.svelte

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

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

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

package/dist/components/auth-guard.svelte

@@ -0,0 +1,89 @@
+<script lang="ts">
+	import { firekitAuth } from '../services/auth.js';
+	import { firebaseService } from '../firebase.js';
+	import { goto } from '$app/navigation';
+	import { onDestroy } from 'svelte';
+	import type { UserProfile } from '../types/auth.js';
+	import type { Auth } from 'firebase/auth';
+	import type { Snippet } from 'svelte';
+
+	/**
+	 * Props for AuthGuard component
+	 */
+	let {
+		children,
+		requireAuth = true,
+		redirectTo = '/',
+		fallback
+	}: {
+		/**
+		 * Children content to render when auth state matches requirements
+		 */
+		children: Snippet<[UserProfile, Auth, () => Promise<void>]>;
+		/**
+		 * Whether authentication is required to view the content
+		 * @default true
+		 */
+		requireAuth?: boolean;
+		/**
+		 * Path to redirect to if auth state doesn't match requirements
+		 * @default '/'
+		 */
+		redirectTo?: string;
+		/**
+		 * Fallback content to show while checking auth state
+		 */
+		fallback?: Snippet<[]>;
+	} = $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;
+	});
+
+	// Sign out function
+	async function signOut() {
+		await firekitAuth.signOut();
+	}
+
+	// Check if current auth state matches requirements
+	$effect(() => {
+		if (authState.loading) return;
+
+		const isAuthenticated = firekitAuth.isAuthenticated();
+		const shouldRedirect = requireAuth ? !isAuthenticated : isAuthenticated;
+
+		if (shouldRedirect) {
+			goto(redirectTo);
+		}
+	});
+
+	// Cleanup subscription on component destruction
+	onDestroy(() => {
+		unsubscribe();
+	});
+</script>
+
+{#if authState.loading}
+	{#if fallback}
+		{@render fallback()}
+	{:else}
+		<div class="flex items-center justify-center min-h-screen">
+			<div class="text-center">
+				<div class="animate-spin rounded-full h-8 w-8 border-b-2 border-gray-900 mx-auto"></div>
+				<p class="mt-2 text-gray-600">Loading...</p>
+			</div>
+		</div>
+	{/if}
+{:else if firekitAuth.isAuthenticated() === requireAuth}
+	{@render children(authState.user!, auth, signOut)}
+{/if}

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

@@ -0,0 +1,26 @@
+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 auth state matches requirements
+     */
+    children: Snippet<[UserProfile, Auth, () => Promise<void>]>;
+    /**
+     * Whether authentication is required to view the content
+     * @default true
+     */
+    requireAuth?: boolean;
+    /**
+     * Path to redirect to if auth state doesn't match requirements
+     * @default '/'
+     */
+    redirectTo?: string;
+    /**
+     * Fallback content to show while checking auth state
+     */
+    fallback?: Snippet<[]>;
+};
+declare const AuthGuard: import("svelte").Component<$$ComponentProps, {}, "">;
+type AuthGuard = ReturnType<typeof AuthGuard>;
+export default AuthGuard;

package/dist/components/custom-guard.svelte

@@ -0,0 +1,122 @@
+<script lang="ts">
+	import { firekitAuth } from '../services/auth.js';
+	import { firebaseService } from '../firebase.js';
+	import { goto } from '$app/navigation';
+	import { onDestroy } from 'svelte';
+	import type { UserProfile } from '../types/auth.js';
+	import type { Auth } from 'firebase/auth';
+	import type { Snippet } from 'svelte';
+
+	/**
+	 * Props for CustomGuard component
+	 */
+	let {
+		children,
+		requireAuth = true,
+		redirectTo = '/',
+		fallback,
+		verificationChecks = []
+	}: {
+		/**
+		 * 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>)[];
+	} = $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());
+	let verificationPassed = $state(true);
+	let isVerifying = $state(false);
+
+	// Subscribe to auth state changes
+	const unsubscribe = firekitAuth.onAuthStateChanged((state) => {
+		authState = state;
+	});
+
+	// Sign out function
+	async function signOut() {
+		await firekitAuth.signOut();
+	}
+
+	// Check if current auth state and verification checks pass
+	$effect(() => {
+		if (authState.loading) return;
+
+		const isAuthenticated = firekitAuth.isAuthenticated();
+		const shouldRedirect = requireAuth ? !isAuthenticated : isAuthenticated;
+
+		if (shouldRedirect) {
+			goto(redirectTo);
+			return;
+		}
+
+		// If authenticated and verification checks exist, run them
+		if (isAuthenticated && verificationChecks.length > 0) {
+			isVerifying = true;
+			Promise.all(verificationChecks.map((check) => check(authState.user!, auth)))
+				.then((results) => {
+					verificationPassed = results.every((result) => result === true);
+					if (!verificationPassed) {
+						goto(redirectTo);
+					}
+				})
+				.catch((error) => {
+					console.error('Verification check failed:', error);
+					verificationPassed = false;
+					goto(redirectTo);
+				})
+				.finally(() => {
+					isVerifying = false;
+				});
+		} else {
+			verificationPassed = true;
+		}
+	});
+
+	// Cleanup subscription on component destruction
+	onDestroy(() => {
+		unsubscribe();
+	});
+</script>
+
+{#if authState.loading || isVerifying}
+	{#if fallback}
+		{@render fallback()}
+	{:else}
+		<div class="flex items-center justify-center min-h-screen">
+			<div class="text-center">
+				<div class="animate-spin rounded-full h-8 w-8 border-b-2 border-gray-900 mx-auto"></div>
+				<p class="mt-2 text-gray-600">
+					{isVerifying ? 'Verifying access...' : 'Loading...'}
+				</p>
+			</div>
+		</div>
+	{/if}
+{:else if firekitAuth.isAuthenticated() === requireAuth && verificationPassed}
+	{@render children(authState.user!, auth, signOut)}
+{/if}