sveltedfire 0.0.8 → 0.1.3

package/README.md

@@ -26,6 +26,18 @@ This guarantees that firebase has been initialized prior to any data loading cal
 
 ### Authentication
 
+In order to fully utilize the helper components sveltedfire contains, you must wrap your app at a high level with the `SveltedAuth` component. This initializes the firebase authentication system and provides a context that provides access to the current user. To access the auth context, use the `getAuthContext` helper. Additional keys can be injected onto the context by adding them as props on `SveltedAuth` with the prefix `extra_` and the value being a function that accepts user and token. This function will be called with user and token of null in the case of a logged out user to initialize default values. E.g., to add the key `claimLevel` to the sveltedAuth context:
+
+```svelte
+<script lang="ts">
+  import { SveltedAuth } from 'sveltedfire'
+</script>
+
+<SveltedAuth extra_claimLevel={(user, token) => token!.claims.level || ''}>
+  ...rest of application
+</SveltedAuth>
+```
+
 You can use the SignedIn/SignoutOut components to selectively render based on the user's authentication state. In addition, the `signOut` and `signInWithGoogle` helpers are available. Note that the signInWithGoogle automatically performs a signInWithPopup. If you would rather use signInWithRedirect, you will need to implement that manually.
 
 ### Fetching/Querying
@@ -37,11 +49,12 @@ fetchDoc('pages', params.slug)
 fetchDoc('pages', 'home', 'posts', params.postId)
 ```
 
-To perform a query for one or more documents, use the `fetchDocs` method. This is a double-invoked function. The first invocation sets the collection path. The second invocation accepts either three arguments (field name, comparator, value), no arguments for a simple collection fetch, or a single argument of an already formed QueryFieldFilterConstraint or a QueryCompositeFilterConstraint. E.g., 
+To perform a query for one or more documents, use the `fetchDocs` method. This is a double-invoked function. The first invocation sets the collection path. The second invocation accepts either a variable number of arguments. It accepts three arguments specifically for a simpler form of a where condition. Otherwise, you can pass one or more firestore constraints (where, limit, orderBy, startAt, endAt) and up to one composite filter (and, or)
 ```typescript
 fetchDocs('pages')() // fetch all pages
 fetchDocs('pages')('public', '==', true) // fetch all public pages
 fetchDocs('pages')(and(where('published_at', '>=', '2025-01-01'), where('published_at', '<=', '2025-01-31'))) // fetch all pages published in the month of January
+fetchDocs('pages')(where('public', '==', true), limit(10), orderBy('published_at', 'desc'))
 ```
 
 To listen for the snapshots of an object, use `listenDoc`. This takes the same parameters as `fetchDoc`, but returns a store. This should be used with rune syntax as below:

package/dist/index.d.ts

@@ -7,6 +7,10 @@ export { listenDoc } from './sveltedfire/utilities/listenDoc.js';
 export { listenDocs } from './sveltedfire/utilities/listenDocs.js';
 export { kindlyFetchDoc } from './sveltedfire/utilities/kindlyFetchDoc.js';
 export { kindlyFetchDocs } from './sveltedfire/utilities/kindlyFetchDocs.js';
+export { type AuthSig } from './sveltedfire/auth/AuthSig.js';
+export { getAuthContext } from './sveltedfire/auth/getAuthContext.js';
 import SignedIn from './sveltedfire/components/SignedIn.svelte';
 import SignedOut from './sveltedfire/components/SignedOut.svelte';
-export { SignedIn, SignedOut };
+import SveltedAuth from "./sveltedfire/components/SveltedAuth.svelte";
+import FireForm from "./sveltedfire/components/FireForm.svelte";
+export { SignedIn, SignedOut, SveltedAuth, FireForm };

package/dist/index.js

@@ -8,6 +8,10 @@ export { listenDoc } from './sveltedfire/utilities/listenDoc.js';
 export { listenDocs } from './sveltedfire/utilities/listenDocs.js';
 export { kindlyFetchDoc } from './sveltedfire/utilities/kindlyFetchDoc.js';
 export { kindlyFetchDocs } from './sveltedfire/utilities/kindlyFetchDocs.js';
+export {} from './sveltedfire/auth/AuthSig.js';
+export { getAuthContext } from './sveltedfire/auth/getAuthContext.js';
 import SignedIn from './sveltedfire/components/SignedIn.svelte';
 import SignedOut from './sveltedfire/components/SignedOut.svelte';
-export { SignedIn, SignedOut };
+import SveltedAuth from "./sveltedfire/components/SveltedAuth.svelte";
+import FireForm from "./sveltedfire/components/FireForm.svelte";
+export { SignedIn, SignedOut, SveltedAuth, FireForm };

package/dist/sveltedfire/auth/AuthSig.d.ts

@@ -0,0 +1,7 @@
+import { type User } from "firebase/auth";
+export type AuthSig = {
+    currentUser: User | null;
+    signInWithGoogle: any;
+    signOut: any;
+    [k: string]: any;
+};

package/dist/sveltedfire/auth/AuthSig.js

@@ -0,0 +1 @@
+import {} from "firebase/auth";

package/dist/sveltedfire/auth/getAuthContext.d.ts

@@ -0,0 +1 @@
+export declare const getAuthContext: () => unknown;

package/dist/sveltedfire/auth/getAuthContext.js

@@ -0,0 +1,3 @@
+import { getContext } from "svelte";
+import { AUTH_CONTEXT_NAME } from '../constants.js';
+export const getAuthContext = () => getContext(AUTH_CONTEXT_NAME);

package/dist/sveltedfire/components/FireForm.svelte

@@ -0,0 +1,54 @@
+<script lang="ts">
+  import { getFirestore, collection, doc, getDoc, updateDoc, setDoc, addDoc, deleteField } from "firebase/firestore"
+
+  let { collectionName, docId = null, docIdField = null, onSubmit, children, beforeSubmit = null, ...rest } = $props()
+  const db = getFirestore()
+
+  const submitTheForm = async (ev: SubmitEvent) => {
+    console.log('Attempting to save')
+    ev.preventDefault()
+    const formData = new FormData(ev.target as HTMLFormElement)
+    let col = collection(db, collectionName)
+    let objData = Object.fromEntries(formData.entries())
+    if (beforeSubmit) {
+      objData = beforeSubmit(objData, ev)
+    }
+    Object.keys(objData).forEach(k => {
+      if (objData[k] === '_deleteme_') {
+        if (!k.match(/\[/)) {
+          objData[k] = deleteField()
+        }
+      }
+      let matcher = k.match(/^(.*)\[(.*)\]$/)
+      if (matcher) {
+        if (!(matcher[1] in objData)) {
+          objData[matcher[1]] = []
+        }
+        if (objData[k] === '_deleteme_') {
+          console.log('Deletion override')
+          objData[matcher[1]] = deleteField()
+        } else {
+          objData[matcher[1]][parseInt(matcher[2], 10)] = objData[k]
+        }
+        delete objData[k]
+      }
+    })
+    console.log('Object data is', objData)
+    let docRefId
+    if (docId) {
+      await updateDoc(doc(col, docId), objData)
+      docRefId = docId
+    } else if (docIdField) {
+      await updateDoc(doc(col, formData.get(docIdField) as string), objData)
+      docRefId = formData.get(docIdField) as string
+    } else {
+      let docRef = await addDoc(col, objData)
+      docRefId = docRef.id
+    }
+    onSubmit(docRefId)
+  }
+</script>
+
+<form onsubmit={submitTheForm} {...rest}>
+  {@render children()}
+</form>

package/dist/sveltedfire/components/FireForm.svelte.d.ts

@@ -0,0 +1,10 @@
+declare const FireForm: import("svelte").Component<{
+    collectionName: any;
+    docId?: any;
+    docIdField?: any;
+    onSubmit: any;
+    children: any;
+    beforeSubmit?: any;
+} & Record<string, any>, {}, "">;
+type FireForm = ReturnType<typeof FireForm>;
+export default FireForm;

package/dist/sveltedfire/components/SignedIn.svelte

@@ -1,14 +1,11 @@
 <script lang="ts">
   const { children } = $props()
-  import { getAuth } from 'firebase/auth'
+  import { getContext } from 'svelte';
+  import { AuthSig } from '../auth/AuthSig.js';
 
-  const auth = getAuth()
-  let user = $state(null)
-  auth.onAuthStateChanged(u => {
-    user = u
-  })
+  let fullAuth = getContext<AuthSig>('sveltedAuth')
 </script>
 
-{#if user}
+{#if fullAuth!.currentUser}
   {@render children()}
 {/if}

package/dist/sveltedfire/components/SignedOut.svelte

@@ -1,14 +1,11 @@
 <script lang="ts">
   const { children } = $props()
-  import { getAuth } from 'firebase/auth'
+  import { getContext } from 'svelte';
+  import { type AuthSig } from '../auth/AuthSig.js';
 
-  const auth = getAuth()
-  let user = $state(null)
-  auth.onAuthStateChanged(u => {
-    user = u
-  })
+  let fullAuth = getContext<AuthSig>('sveltedAuth')
 </script>
 
-{#if !user}
+{#if fullAuth && !fullAuth!.currentUser}
   {@render children()}
 {/if}

package/dist/sveltedfire/components/SveltedAuth.svelte

@@ -0,0 +1,43 @@
+<script lang="ts">
+  import { setContext } from 'svelte'
+  import { getAuth, type User } from 'firebase/auth'
+  import { signOut } from '../auth/signOut.js'
+  import { signInWithGoogle } from '../auth/signInWithGoogle.js'
+  import { type AuthSig } from '../auth/AuthSig.js';
+  import { AUTH_CONTEXT_NAME } from '../constants.js'
+
+  const { children, ...rest } = $props()
+
+  let additionalKeys: {[k: string]: any} = {}
+  Object.keys(rest).forEach(k => {
+    if (k.startsWith('extra_')) {
+      const actualKey = k.replace('^extra_', '')
+      additionalKeys[actualKey] = k
+    }
+  })
+
+  const auth = getAuth()
+
+  let fullAuth = $state<AuthSig>({
+    currentUser: null,
+    signOut,
+    signInWithGoogle
+  })
+
+  auth.onAuthStateChanged(user => {
+    fullAuth.currentUser = user
+    Object.keys(additionalKeys).forEach((k: string) => {
+      fullAuth[k] = rest[additionalKeys[k]](null, null)
+    })
+    user?.getIdTokenResult().then(token => {
+      Object.keys(additionalKeys).forEach((k: string) => {
+        fullAuth[k] = rest[additionalKeys[k]](user, token)
+      })
+    })
+  })
+
+  setContext<AuthSig>(AUTH_CONTEXT_NAME, fullAuth)
+
+</script>
+
+{@render children()}

package/dist/sveltedfire/components/SveltedAuth.svelte.d.ts

@@ -0,0 +1,5 @@
+declare const SveltedAuth: import("svelte").Component<{
+    children: any;
+} & Record<string, any>, {}, "">;
+type SveltedAuth = ReturnType<typeof SveltedAuth>;
+export default SveltedAuth;

package/dist/sveltedfire/constants.d.ts

@@ -0,0 +1 @@
+export declare const AUTH_CONTEXT_NAME = "sveltedAuth";

package/dist/sveltedfire/constants.js

@@ -0,0 +1 @@
+export const AUTH_CONTEXT_NAME = 'sveltedAuth';

package/dist/sveltedfire/utilities/fetchDocs.d.ts

@@ -1,8 +1,11 @@
-import { QueryCompositeFilterConstraint } from "firebase/firestore";
-export declare const fetchDocs: (...collectionPath: Array<string>) => (qOrField?: QueryCompositeFilterConstraint | string | null, comparator?: string | null, value?: string | boolean | number | null) => Promise<{
+import { QueryFieldFilterConstraint, QueryCompositeFilterConstraint, type QueryNonFilterConstraint, type WhereFilterOp } from "firebase/firestore";
+type QueryFieldsType = QueryCompositeFilterConstraint | QueryFieldFilterConstraint | QueryNonFilterConstraint;
+type TheFieldsType = string | QueryFieldsType | WhereFilterOp | number | boolean;
+export declare const fetchDocs: (...collectionPath: Array<string>) => (...fields: TheFieldsType[]) => Promise<{
     docs: {
         _id: string;
         id: string;
     }[];
     count: number;
 }>;
+export {};

package/dist/sveltedfire/utilities/fetchDocs.js

@@ -1,5 +1,5 @@
-import { getFirestore, collection, doc, getDocs, Query, QueryFieldFilterConstraint, where, query, QueryCompositeFilterConstraint } from "firebase/firestore";
-export const fetchDocs = (...collectionPath) => async (qOrField = null, comparator = null, value = null) => {
+import { getFirestore, collection, getDocs, QueryFieldFilterConstraint, where, query, QueryCompositeFilterConstraint, QueryConstraint, QueryOrderByConstraint, QueryLimitConstraint, QueryStartAtConstraint, QueryEndAtConstraint } from "firebase/firestore";
+export const fetchDocs = (...collectionPath) => async (...fields) => {
     const db = getFirestore();
     let theRef;
     if (collectionPath.length > 1) {
@@ -9,16 +9,38 @@ export const fetchDocs = (...collectionPath) => async (qOrField = null, comparat
         theRef = collection(db, collectionPath[0]);
     }
     let theQuery = query(theRef);
-    if (qOrField) {
-        if (comparator) {
-            theQuery = query(theRef, where(qOrField, comparator, value));
+    if (fields.length > 0) {
+        if ((fields.length === 3) && (typeof fields[1] === "string")) {
+            theQuery = query(theRef, where(fields[0], fields[1], fields[2]));
         }
         else {
-            if (qOrField instanceof QueryFieldFilterConstraint) {
-                theQuery = query(theRef, qOrField);
+            const builtFields = [];
+            let compositeConstraint = null;
+            fields.forEach(k => {
+                if (k instanceof QueryCompositeFilterConstraint) {
+                    compositeConstraint = k;
+                }
+                else if (k instanceof QueryFieldFilterConstraint) {
+                    builtFields.push(k);
+                }
+                else if (k instanceof QueryOrderByConstraint) {
+                    builtFields.push(k);
+                }
+                else if (k instanceof QueryLimitConstraint) {
+                    builtFields.push(k);
+                }
+                else if (k instanceof QueryStartAtConstraint) {
+                    builtFields.push(k);
+                }
+                else if (k instanceof QueryEndAtConstraint) {
+                    builtFields.push(k);
+                }
+            });
+            if (compositeConstraint) {
+                theQuery = query(theRef, compositeConstraint, ...builtFields);
             }
-            else if (qOrField instanceof QueryCompositeFilterConstraint) {
-                theQuery = query(theRef, qOrField);
+            else {
+                theQuery = query(theRef, ...builtFields);
             }
         }
     }

package/dist/sveltedfire/utilities/listenDocs.d.ts

@@ -1,6 +1,9 @@
-import { QueryCompositeFilterConstraint } from "firebase/firestore";
+import { QueryFieldFilterConstraint, QueryCompositeFilterConstraint, type WhereFilterOp, type QueryNonFilterConstraint } from "firebase/firestore";
 import { type DocumentData } from "firebase/firestore";
-export declare const listenDocs: (...collectionPath: Array<string>) => (qOrField?: QueryCompositeFilterConstraint | string | null, comparator?: string | null, value?: string | boolean | number | null) => Promise<import("svelte/store").Readable<{
+type QueryFieldsType = QueryCompositeFilterConstraint | QueryFieldFilterConstraint | QueryNonFilterConstraint;
+type TheFieldsType = string | QueryFieldsType | WhereFilterOp | number | boolean;
+export declare const listenDocs: (...collectionPath: Array<string>) => (...fields: TheFieldsType[]) => import("svelte/store").Readable<{
     docs: DocumentData[];
     count: number;
-} | null>>;
+} | null>;
+export {};

package/dist/sveltedfire/utilities/listenDocs.js

@@ -1,7 +1,7 @@
-import { getFirestore, collection, doc, getDocs, Query, QueryFieldFilterConstraint, where, query, QueryCompositeFilterConstraint } from "firebase/firestore";
+import { getFirestore, collection, doc, getDocs, Query, QueryFieldFilterConstraint, where, query, QueryCompositeFilterConstraint, QueryConstraint, QueryOrderByConstraint, QueryLimitConstraint, QueryStartAtConstraint, QueryEndAtConstraint } from "firebase/firestore";
 import { onSnapshot } from "firebase/firestore";
 import { readable } from 'svelte/store';
-export const listenDocs = (...collectionPath) => async (qOrField = null, comparator = null, value = null) => {
+export const listenDocs = (...collectionPath) => (...fields) => {
     const db = getFirestore();
     let theRef;
     if (collectionPath.length > 1) {
@@ -11,16 +11,38 @@ export const listenDocs = (...collectionPath) => async (qOrField = null, compara
         theRef = collection(db, collectionPath[0]);
     }
     let theQuery = query(theRef);
-    if (qOrField) {
-        if (comparator) {
-            theQuery = query(theRef, where(qOrField, comparator, value));
+    if (fields.length > 0) {
+        if ((fields.length === 3) && (typeof fields[1] === "string")) {
+            theQuery = query(theRef, where(fields[0], fields[1], fields[2]));
         }
         else {
-            if (qOrField instanceof QueryFieldFilterConstraint) {
-                theQuery = query(theRef, qOrField);
+            const builtFields = [];
+            let compositeConstraint = null;
+            fields.forEach(k => {
+                if (k instanceof QueryCompositeFilterConstraint) {
+                    compositeConstraint = k;
+                }
+                else if (k instanceof QueryFieldFilterConstraint) {
+                    builtFields.push(k);
+                }
+                else if (k instanceof QueryOrderByConstraint) {
+                    builtFields.push(k);
+                }
+                else if (k instanceof QueryLimitConstraint) {
+                    builtFields.push(k);
+                }
+                else if (k instanceof QueryStartAtConstraint) {
+                    builtFields.push(k);
+                }
+                else if (k instanceof QueryEndAtConstraint) {
+                    builtFields.push(k);
+                }
+            });
+            if (compositeConstraint) {
+                theQuery = query(theRef, compositeConstraint, ...builtFields);
             }
-            else if (qOrField instanceof QueryCompositeFilterConstraint) {
-                theQuery = query(theRef, qOrField);
+            else {
+                theQuery = query(theRef, ...builtFields);
             }
         }
     }

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "sveltedfire",
-	"version": "0.0.8",
+	"version": "0.1.3",
 	"scripts": {
 		"dev": "vite dev",
 		"build": "vite build && npm run prepack",