sveltedfire 0.0.1

package/LICENSE

@@ -0,0 +1,8 @@
+Copyright 2025 Michael Madison
+
+Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the “Software”), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED “AS IS”, WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+

package/README.md

@@ -0,0 +1,78 @@
+# SveltedFire
+
+Inspired by Sveltefire, but taking a slightly different approach. Due to several changes in Svelte 5, I decided to build this package from the ground up.
+
+SveltedFire is a client-side library intended to facilitate communication with Firebase services (currently Firestore and Firebase Auth). It consists of helper utilities for common tasks and components to handle authentication states. SveltedFire has *not* been tested for use as a server-side library.
+
+This is still a work in progress. Suggestions are welcome. Note that tests are currently *not* configured.
+
+## Usage
+
+### Initializing
+
+In your `hooks.client.ts` file, import initFirebase and initialize with your Firebase configuration:
+
+```typescript
+import type { ClientInit } from "@sveltejs/kit";
+import { initFirebase } from "sveltedfire";
+import firebaseConfig from './config.json'
+
+export const init: ClientInit = async () => {
+  await initFirebase(firebaseConfig)
+}
+```
+
+This guarantees that firebase has been initialized prior to any data loading calls.
+
+### Authentication
+
+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
+
+To fetch a single document, use the `fetchDoc` method which accepts the document path as arguments. E.g., 
+
+```typescript
+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., 
+```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
+```
+
+In the case of both `fetchDoc` and `fetchDocs`, the documents are returned as bare objects with the ID field injected into both the `id` and `_id` fields. If your data already defines an `id` field, it will be returned as-is; the `_id` field will always reference the actual ID of the object.
+
+
+--------------
+
+## Building
+
+To build your library:
+
+```bash
+npm run package
+```
+
+To create a production version of your showcase app:
+
+```bash
+npm run build
+```
+
+You can preview the production build with `npm run preview`.
+
+> To deploy your app, you may need to install an [adapter](https://svelte.dev/docs/kit/adapters) for your target environment.
+
+## Publishing
+
+Go into the `package.json` and give your package the desired name through the `"name"` option. Also consider adding a `"license"` field and point it to a `LICENSE` file which you can create from a template (one popular option is the [MIT license](https://opensource.org/license/mit/)).
+
+To publish your library to [npm](https://www.npmjs.com):
+
+```bash
+npm publish
+```

package/dist/index.d.ts

@@ -0,0 +1,8 @@
+export { initFirebase } from "./sveltedfire/init.js";
+export { fetchDoc } from './sveltedfire/utilities/fetchDoc.js';
+export { fetchDocs } from './sveltedfire/utilities/fetchDocs.js';
+export { signInWithGoogle } from './sveltedfire/auth/signInWithGoogle.js';
+export { signOut } from './sveltedfire/auth/signOut.js';
+import SignedIn from './sveltedfire/components/SignedIn.svelte';
+import SignedOut from './sveltedfire/components/SignedOut.svelte';
+export { SignedIn, SignedOut };

package/dist/index.js

@@ -0,0 +1,9 @@
+// Reexport your entry components here
+export { initFirebase } from "./sveltedfire/init.js";
+export { fetchDoc } from './sveltedfire/utilities/fetchDoc.js';
+export { fetchDocs } from './sveltedfire/utilities/fetchDocs.js';
+export { signInWithGoogle } from './sveltedfire/auth/signInWithGoogle.js';
+export { signOut } from './sveltedfire/auth/signOut.js';
+import SignedIn from './sveltedfire/components/SignedIn.svelte';
+import SignedOut from './sveltedfire/components/SignedOut.svelte';
+export { SignedIn, SignedOut };

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

@@ -0,0 +1 @@
+export declare const signInWithGoogle: () => void;

package/dist/sveltedfire/auth/signInWithGoogle.js

@@ -0,0 +1,6 @@
+import { getAuth, GoogleAuthProvider, signInWithPopup } from "firebase/auth";
+export const signInWithGoogle = () => {
+    const auth = getAuth();
+    const provider = new GoogleAuthProvider();
+    signInWithPopup(auth, provider);
+};

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

@@ -0,0 +1 @@
+export declare const signOut: () => void;

package/dist/sveltedfire/auth/signOut.js

@@ -0,0 +1,5 @@
+import { getAuth } from "firebase/auth";
+export const signOut = () => {
+    const auth = getAuth();
+    auth.signOut();
+};

package/dist/sveltedfire/components/SignedIn.svelte

@@ -0,0 +1,15 @@
+<script lang="ts">
+  const { children } = $props()
+  import { getAuth } from 'firebase/auth'
+
+  const auth = getAuth()
+  let user = $state(null)
+  auth.onAuthStateChanged(u => {
+    console.log('User is', u)
+    user = u
+  })
+</script>
+
+{#if user}
+  {@render children()}
+{/if}

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

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

package/dist/sveltedfire/components/SignedOut.svelte

@@ -0,0 +1,15 @@
+<script lang="ts">
+  const { children } = $props()
+  import { getAuth } from 'firebase/auth'
+
+  const auth = getAuth()
+  let user = $state(null)
+  auth.onAuthStateChanged(u => {
+    console.log('User is', u)
+    user = u
+  })
+</script>
+
+{#if !user}
+  {@render children()}
+{/if}

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

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

package/dist/sveltedfire/init.d.ts

@@ -0,0 +1,2 @@
+import { type FirebaseOptions } from "firebase/app";
+export declare const initFirebase: (firebaseConfig: FirebaseOptions) => Promise<void>;

package/dist/sveltedfire/init.js

@@ -0,0 +1,7 @@
+import { initializeApp } from "firebase/app";
+export const initFirebase = async (firebaseConfig) => {
+    await new Promise((res, rej) => {
+        initializeApp(firebaseConfig);
+        res(null);
+    });
+};

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

@@ -0,0 +1,4 @@
+export declare const fetchDoc: (...docPath: Array<string>) => Promise<{
+    _id: string;
+    id: string;
+} | null>;

package/dist/sveltedfire/utilities/fetchDoc.js

@@ -0,0 +1,20 @@
+import { getFirestore, collection, doc, getDoc } from "firebase/firestore";
+export const fetchDoc = async (...docPath) => {
+    const db = getFirestore();
+    let theRef;
+    if (docPath.length > 2) {
+        theRef = doc(collection(db, docPath[0], ...docPath.slice(1, -1)), docPath[-1]);
+    }
+    else {
+        theRef = doc(collection(db, docPath[0]), docPath[-1]);
+    }
+    const theDoc = await getDoc(theRef);
+    if (!theDoc.exists()) {
+        return null;
+    }
+    return {
+        id: theDoc.id,
+        ...theDoc.data(),
+        _id: theDoc.id
+    };
+};

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

@@ -0,0 +1,8 @@
+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<{
+    docs: {
+        _id: string;
+        id: string;
+    }[];
+    count: number;
+}>;

package/dist/sveltedfire/utilities/fetchDocs.js

@@ -0,0 +1,30 @@
+import { getFirestore, collection, doc, getDocs, Query, QueryFieldFilterConstraint, where, query, QueryCompositeFilterConstraint } from "firebase/firestore";
+export const fetchDocs = (...collectionPath) => async (qOrField = null, comparator = null, value = null) => {
+    const db = getFirestore();
+    let theRef;
+    if (collectionPath.length > 1) {
+        theRef = collection(db, collectionPath[0], ...collectionPath.slice(1));
+    }
+    else {
+        theRef = collection(db, collectionPath[0]);
+    }
+    let theQuery = query(theRef);
+    if (qOrField) {
+        if (comparator) {
+            theQuery = query(theRef, where(qOrField, comparator, value));
+        }
+        else {
+            if (qOrField instanceof QueryFieldFilterConstraint) {
+                theQuery = query(theRef, qOrField);
+            }
+            else if (qOrField instanceof QueryCompositeFilterConstraint) {
+                theQuery = query(theRef, qOrField);
+            }
+        }
+    }
+    const theDocs = await getDocs(theQuery);
+    return {
+        docs: theDocs.docs.map(d => ({ id: d.id, ...d.data(), _id: d.id })),
+        count: theDocs.docs.length
+    };
+};

package/package.json

@@ -0,0 +1,67 @@
+{
+	"name": "sveltedfire",
+	"version": "0.0.1",
+	"scripts": {
+		"dev": "vite dev",
+		"build": "vite build && npm run prepack",
+		"preview": "vite preview",
+		"prepare": "svelte-kit sync || echo ''",
+		"prepack": "svelte-kit sync && svelte-package && publint",
+		"check": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json",
+		"check:watch": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json --watch",
+		"format": "prettier --write .",
+		"lint": "prettier --check . && eslint .",
+		"test:unit": "vitest",
+		"test": "npm run test:unit -- --run && npm run test:e2e",
+		"test:e2e": "playwright test"
+	},
+	"license": "MIT",
+	"files": [
+		"dist",
+		"!dist/**/*.test.*",
+		"!dist/**/*.spec.*"
+	],
+	"sideEffects": [
+		"**/*.css"
+	],
+	"svelte": "./dist/index.js",
+	"types": "./dist/index.d.ts",
+	"type": "module",
+	"exports": {
+		".": {
+			"types": "./dist/index.d.ts",
+			"svelte": "./dist/index.js"
+		}
+	},
+	"peerDependencies": {
+		"svelte": "^5.0.0"
+	},
+	"devDependencies": {
+		"@eslint/compat": "^1.2.5",
+		"@eslint/js": "^9.18.0",
+		"@playwright/test": "^1.49.1",
+		"@sveltejs/adapter-auto": "^4.0.0",
+		"@sveltejs/kit": "^2.16.0",
+		"@sveltejs/package": "^2.0.0",
+		"@sveltejs/vite-plugin-svelte": "^5.0.0",
+		"@testing-library/jest-dom": "^6.6.3",
+		"@testing-library/svelte": "^5.2.4",
+		"eslint": "^9.18.0",
+		"eslint-config-prettier": "^10.0.1",
+		"eslint-plugin-svelte": "^2.46.1",
+		"globals": "^15.14.0",
+		"jsdom": "^25.0.1",
+		"prettier": "^3.4.2",
+		"prettier-plugin-svelte": "^3.3.3",
+		"publint": "^0.3.2",
+		"svelte": "^5.0.0",
+		"svelte-check": "^4.0.0",
+		"typescript": "^5.0.0",
+		"typescript-eslint": "^8.20.0",
+		"vite": "^6.0.0",
+		"vitest": "^3.0.0"
+	},
+	"dependencies": {
+		"firebase": "^11.3.1"
+	}
+}