svelte-firekit 0.1.9 → 0.2.0

package/dist/components/docs/doc-content.svelte

@@ -1,19 +0,0 @@
-<script lang="ts">
-	import { onMount } from 'svelte';
-	import { TableOfContents } from './toc.svelte.js';
-
-	let contentRef: HTMLElement | undefined = $state();
-	let { data }: { data: any } = $props();
-
-	let toc = $state(TableOfContents.getInstance());
-
-	onMount(() => {
-		if (contentRef) {
-			toc.updateContentRef(contentRef);
-		}
-	});
-</script>
-
-<div class="prose prose-slate dark:prose-invert mx-auto max-w-4xl" bind:this={contentRef}>
-	<data.doc />
-</div>

package/dist/components/docs/doc-content.svelte.d.ts

@@ -1,6 +0,0 @@
-type $$ComponentProps = {
-    data: any;
-};
-declare const DocContent: import("svelte").Component<$$ComponentProps, {}, "">;
-type DocContent = ReturnType<typeof DocContent>;
-export default DocContent;

package/dist/components/docs/doc-header.svelte

@@ -1,24 +0,0 @@
-<script>
-	import { page } from '$app/state';
-
-	let { title, description } = $props();
-</script>
-
-<header class="mb-4 border-b border-gray-200 pb-2 dark:border-neutral-700 sm:mb-4 sm:pb-6">
-	{#if page.params.slug}
-		<p class="mb-2 text-sm font-semibold capitalize text-primary">
-			{page.params.slug
-				.replace(/-/g, ' ')
-				.replace(/\b\w/g, (char) => char.toUpperCase())
-				.replace('/', ': ')}
-		</p>
-	{:else}
-		<p class="mb-2 text-sm font-semibold capitalize text-primary">Docs</p>
-	{/if}
-	<h1 class="mb-2 block text-2xl font-bold sm:text-3xl">
-		{title}
-	</h1>
-	<p class="mt-2 text-gray-800 dark:text-neutral-400 sm:text-lg">
-		{description}
-	</p>
-</header>

package/dist/components/docs/doc-header.svelte.d.ts

@@ -1,13 +0,0 @@
-export default DocHeader;
-type DocHeader = {
-    $on?(type: string, callback: (e: any) => void): () => void;
-    $set?(props: Partial<$$ComponentProps>): void;
-};
-declare const DocHeader: import("svelte").Component<{
-    title: any;
-    description: any;
-}, {}, "">;
-type $$ComponentProps = {
-    title: any;
-    description: any;
-};

package/dist/components/docs/doc-renderer.svelte

@@ -1,27 +0,0 @@
-<script lang="ts">
-	import Separator from '../ui/separator/separator.svelte';
-	import DocContent from './doc-content.svelte';
-	import DocHeader from './doc-header.svelte';
-	import TableOfContents from './table-of-contents.svelte';
-	import MobileTableOfContents from './mobile-table-of-contents.svelte';
-
-	let { title, description, data }: { title: string; description: string; data: any } = $props();
-</script>
-
-<div class="flex flex-col gap-6 sm:flex-row sm:justify-between">
-	<div>
-		<DocHeader {title} {description} />
-		<DocContent {data} />
-	</div>
-	<div>
-		<div class="sticky top-4 flex w-72 flex-col gap-4">
-			<div class="hidden sm:block">
-				<TableOfContents />
-				<Separator />
-			</div>
-			<div class="block sm:hidden">
-				<MobileTableOfContents />
-			</div>
-		</div>
-	</div>
-</div>

package/dist/components/docs/doc-renderer.svelte.d.ts

@@ -1,8 +0,0 @@
-type $$ComponentProps = {
-    title: string;
-    description: string;
-    data: any;
-};
-declare const DocRenderer: import("svelte").Component<$$ComponentProps, {}, "">;
-type DocRenderer = ReturnType<typeof DocRenderer>;
-export default DocRenderer;

package/dist/components/docs/mobile-table-of-contents.svelte

@@ -1,42 +0,0 @@
-<script lang="ts">
-	import * as Dialog from '../ui/dialog/index.js';
-	import { TableOfContents } from './toc.svelte.js';
-	import Button, { buttonVariants } from '../ui/button/button.svelte';
-	import { IconAlignLeft, IconChevronRight } from '@tabler/icons-svelte';
-	import { ScrollArea } from '../ui/scroll-area/index.js';
-
-	let toc = $state(TableOfContents.getInstance());
-	let opened = $state(false);
-</script>
-
-<Dialog.Root bind:open={opened}>
-	<Dialog.Trigger class="fixed right-2 bottom-2 {buttonVariants({ variant: 'default' })}">
-		<IconAlignLeft />
-		On This Page
-	</Dialog.Trigger>
-	<Dialog.Content>
-		<Dialog.Header>
-			<Dialog.Title>On this page</Dialog.Title>
-		</Dialog.Header>
-		<ScrollArea class="h-80">
-			<ul>
-				{#each toc.headings as heading}
-					<li>
-						<Button
-							variant="link"
-							href="#{heading.id}"
-							style="margin-left: {(heading.level - 1) * 1}rem"
-							class="font-base text-sm text-gray-800 dark:text-neutral-300"
-							onclick={() => (opened = false)}
-						>
-							{#if heading.level > 1}
-								<IconChevronRight class="mt-[5px] size-3.5 shrink-0" />
-							{/if}
-							{heading.text}
-						</Button>
-					</li>
-				{/each}
-			</ul>
-		</ScrollArea>
-	</Dialog.Content>
-</Dialog.Root>

package/dist/components/docs/mobile-table-of-contents.svelte.d.ts

@@ -1,3 +0,0 @@
-declare const MobileTableOfContents: import("svelte").Component<Record<string, never>, {}, "">;
-type MobileTableOfContents = ReturnType<typeof MobileTableOfContents>;
-export default MobileTableOfContents;

package/dist/components/docs/table-of-contents.svelte

@@ -1,33 +0,0 @@
-<script lang="ts">
-	import Button from '../ui/button/button.svelte';
-	import { TableOfContents } from './toc.svelte.js';
-
-	import { IconChevronRight } from '@tabler/icons-svelte';
-	let toc = $state(TableOfContents.getInstance());
-</script>
-
-<div>
-	<h5
-		id="docs-on-this-page-sidebar-label"
-		class="mb-3 text-sm font-semibold text-gray-800 dark:text-neutral-300"
-	>
-		On this page
-	</h5>
-	<ul>
-		{#each toc.headings as heading}
-			<li>
-				<Button
-					variant="link"
-					href="#{heading.id}"
-					style="margin-left: {(heading.level - 1) * 1}rem"
-					class="font-base text-sm text-gray-800 dark:text-neutral-300"
-				>
-					{#if heading.level > 1}
-						<IconChevronRight class="mt-[5px] size-3.5 shrink-0" />
-					{/if}
-					{heading.text}
-				</Button>
-			</li>
-		{/each}
-	</ul>
-</div>

package/dist/components/docs/table-of-contents.svelte.d.ts

@@ -1,4 +0,0 @@
-import { TableOfContents } from './toc.svelte.js';
-declare const TableOfContents: import("svelte").Component<Record<string, never>, {}, "">;
-type TableOfContents = ReturnType<typeof TableOfContents>;
-export default TableOfContents;

package/dist/components/docs/toc.svelte.d.ts

@@ -1,16 +0,0 @@
-export declare class TableOfContents {
-    contentRef: HTMLElement | undefined;
-    headings: Array<{
-        id: string;
-        text: string;
-        level: number;
-    }>;
-    private observer;
-    private static instance;
-    private constructor();
-    static getInstance(contentRef?: HTMLElement): TableOfContents;
-    updateContentRef(newRef: HTMLElement | undefined): void;
-    private extractHeadings;
-    private initializeObserver;
-    destroy(): void;
-}

package/dist/components/docs/toc.svelte.js

@@ -1,59 +0,0 @@
-export class TableOfContents {
-    contentRef;
-    headings = $state([]);
-    observer = null;
-    static instance;
-    constructor(contentRef) {
-        this.contentRef = contentRef;
-        if (contentRef) {
-            this.initializeObserver();
-        }
-    }
-    static getInstance(contentRef) {
-        if (!TableOfContents.instance) {
-            TableOfContents.instance = new TableOfContents(contentRef);
-        }
-        else if (contentRef) {
-            TableOfContents.instance.updateContentRef(contentRef);
-        }
-        return TableOfContents.instance;
-    }
-    updateContentRef(newRef) {
-        this.observer?.disconnect();
-        this.contentRef = newRef;
-        if (newRef) {
-            this.initializeObserver();
-        }
-        else {
-            this.headings = [];
-        }
-    }
-    extractHeadings() {
-        if (!this.contentRef)
-            return;
-        const headingElements = this.contentRef.querySelectorAll('h1, h2, h3, h4, h5, h6');
-        this.headings = Array.from(headingElements)
-            .map((heading) => {
-            const level = parseInt(heading.tagName.charAt(1));
-            const text = heading.textContent || '';
-            const id = heading.id || text.toLowerCase().replace(/[^a-z0-9]+/g, '-');
-            if (!heading.id)
-                heading.id = id;
-            return { id, text, level };
-        })
-            .filter((heading) => heading.text !== null && heading.text !== '');
-    }
-    initializeObserver() {
-        this.extractHeadings();
-        this.observer = new MutationObserver(() => this.extractHeadings());
-        if (!this.contentRef)
-            return;
-        this.observer.observe(this.contentRef, {
-            childList: true,
-            subtree: true
-        });
-    }
-    destroy() {
-        this.observer?.disconnect();
-    }
-}

package/dist/components/firekit/Collection.svelte

@@ -1,122 +0,0 @@
-<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 = $derived(browser ? firebaseService.getDbInstance() : null);
-
-	// Create collection reference if path string is provided
-	let collectionRef = $derived(
-		firestore && typeof ref === 'string'
-			? collection(firestore, ref)
-			: (ref as CollectionReference | Query)
-	);
-
-	// Create collection service with derived path
-	let collectionPath = $derived(typeof ref === 'string' ? ref : (ref as CollectionReference).path);
-	let collectionService = $state<ReturnType<typeof firekitCollection> | null>(null);
-
-	// Track collection state using derived computations
-	let collectionState = $derived({
-		loading: !browser
-			? false
-			: !firestore
-				? false
-				: !collectionService
-					? true
-					: collectionService.loading,
-		data: !browser
-			? (startWith ?? [])
-			: !firestore
-				? []
-				: !collectionService
-					? (startWith ?? [])
-					: collectionService.data,
-		error: !browser
-			? null
-			: !firestore
-				? new Error('Firestore instance not available')
-				: !collectionService
-					? null
-					: collectionService.error,
-		count: !browser
-			? (startWith?.length ?? 0)
-			: !firestore
-				? 0
-				: !collectionService
-					? (startWith?.length ?? 0)
-					: collectionService.size
-	});
-
-	// Set up collection service
-	$effect(() => {
-		if (!browser || !collectionPath) {
-			collectionService = null;
-			return;
-		}
-
-		// Create new service when path or constraints change
-		const newService = firekitCollection(collectionPath, queryConstraints);
-		collectionService = newService;
-
-		return () => {
-			newService?.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/firekit/Collection.svelte.d.ts

@@ -1,27 +0,0 @@
-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/firekit/Doc.svelte

@@ -1,140 +0,0 @@
-<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 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 = $derived(browser ? firebaseService.getDbInstance() : null);
-
-	// Create document reference if path string is provided
-	let docRef = $derived(
-		firestore && typeof ref === 'string' ? doc(firestore, ref) : (ref as DocumentReference)
-	);
-
-	// Create document service with derived path
-	let documentPath = $derived(typeof ref === 'string' ? ref : (ref as DocumentReference).path);
-	let documentService = $state<ReturnType<typeof firekitDoc> | null>(null);
-
-	// Track document state using derived computations
-	let documentState = $derived({
-		loading: !browser
-			? false
-			: !firestore
-				? false
-				: !documentService
-					? true
-					: documentService.loading,
-		data: !browser
-			? (startWith ?? null)
-			: !firestore
-				? null
-				: !documentService
-					? (startWith ?? null)
-					: documentService.data,
-		error: !browser
-			? null
-			: !firestore
-				? new Error('Firestore instance not available')
-				: !documentService
-					? null
-					: documentService.error,
-		canRefresh: !browser
-			? false
-			: !firestore
-				? false
-				: !documentService
-					? false
-					: documentService.canRefresh
-	});
-
-	// Set up document service and event listener
-	$effect(() => {
-		if (!browser || !documentPath) {
-			documentService = null;
-			return;
-		}
-
-		// Create new service when path or options change
-		const newService = firekitDoc(documentPath, startWith ?? undefined, options);
-		documentService = newService;
-
-		return () => {
-			newService?.dispose();
-		};
-	});
-</script>
-
-{#if !browser}
-	{@render children(startWith ?? null, null as any, null as any)}
-{:else if !firestore}
-	<div class="flex min-h-screen items-center justify-center">
-		<div class="text-center">
-			<div class="mb-2 text-lg font-semibold text-red-500">Firestore Not Available</div>
-			<p class="text-gray-600">Firestore instance is not available.</p>
-		</div>
-	</div>
-{:else if documentState.loading}
-	{#if loading}
-		{@render loading()}
-	{:else}
-		<div class="flex min-h-screen items-center justify-center">
-			<div class="text-center">
-				<div class="mx-auto h-8 w-8 animate-spin rounded-full border-b-2 border-gray-900"></div>
-				<p class="mt-2 text-gray-600">Loading document...</p>
-			</div>
-		</div>
-	{/if}
-{:else if documentState.error}
-	<div class="flex min-h-screen items-center justify-center">
-		<div class="text-center">
-			<div class="mb-2 text-lg font-semibold text-red-500">Error Loading Document</div>
-			<p class="mb-4 text-gray-600">{documentState.error.message}</p>
-			{#if documentState.canRefresh}
-				<button
-					class="rounded bg-blue-500 px-4 py-2 text-white hover:bg-blue-600"
-					onclick={() => documentService?.refresh()}
-				>
-					Retry
-				</button>
-			{/if}
-		</div>
-	</div>
-{:else}
-	{@render children(documentState.data, docRef!, firestore!)}
-{/if}

package/dist/components/firekit/Doc.svelte.d.ts

@@ -1,28 +0,0 @@
-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 Doc: import("svelte").Component<$$ComponentProps, {}, "">;
-type Doc = ReturnType<typeof Doc>;
-export default Doc;

package/dist/components/firekit/Node.svelte

@@ -1,97 +0,0 @@
-<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}