Skip to content

v2.0.8

Choose a tag to compare

View all tags
@dharayush7 dharayush7 released this 09 Jul 12:44
v2.0.8
bacabf2

fireclass-react v2.0.8

@dharayush7/fireclass-react — the first public release of the Fireclass suite's firebase client-SDK runtime, with realtime React hooks.

It wraps @dharayush7/fireclass-core with a client-SDK adapter and adds useQuery / useDoc hooks that update live via onSnapshot — so your components re-render on every Firestore change with no manual refetching.

Highlights

  • createFireclass(firestore) — bind Fireclass to a client-SDK Firestore and get back { BaseModel, adapter, useQuery, useDoc }.
  • useQuery(Model, options?) — a live query hook returning hydrated model instances; re-subscribes on change and cleans up on unmount.
  • useDoc(Model, id) — a live single-document hook.
  • ClientAdapter — implements the core FirestoreAdapter over the firebase client SDK, including batchDelete (via writeBatch), aggregate count, and realtime subscribe / subscribeDoc.
  • Re-exports the full core — decorators, QueryOptions, errors, ValidationFailedError.

Install

npm install @dharayush7/fireclass-react firebase react class-validator class-transformer

firebase, react, class-validator, and class-transformer are peer dependencies. @dharayush7/fireclass-core (^2.0.8) is a regular dependency, installed automatically. Enable decorators in tsconfig.json:

{ "compilerOptions": { "experimentalDecorators": true, "emitDecoratorMetadata": true } }

Quick look

import { getFirestore } from "firebase/firestore";
import { createFireclass, Collection } from "@dharayush7/fireclass-react";
import { IsString, IsBoolean } from "class-validator";

export const { BaseModel, useQuery } = createFireclass(getFirestore(app));

@Collection("todos")
class Todo extends BaseModel<Todo> {
  @IsString() title!: string;
  @IsBoolean() done!: boolean;
  constructor(data?: Partial<Todo>) { super(data); Object.assign(this, data); }
}

function Todos() {
  const { data: todos, loading } = useQuery(Todo, { orderBy: { title: "asc" } });
  // ...re-renders live on every Firestore change
}

A complete Vite + React app is in examples/vite-realtime.

Quality

  • 19 tests (jsdom + Testing Library): client-adapter translation (mocked firebase/firestore) and hook behavior — loading → data, realtime updates on write, where filtering, unmount cleanup.
  • Verified live in the browser against a real Firestore project (add/toggle/delete sync via onSnapshot).
  • Dual ESM + CJS build with type declarations. Core is kept external (a shared dependency), not bundled, so the suite uses a single copy.

Notes for local development

Under pnpm link:, a symlinked copy of firebase can produce two @firebase/app registries ("Service firestore is not available"). Installing from npm avoids this; in a linked monorepo, add resolve.dedupe: ["firebase", "@firebase/app", …] to your Vite config.

The Fireclass suite

Package Runtime For
@dharayush7/fireclass-core none (pure TS) shared modeling core
@dharayush7/fireclass-js firebase-admin Node / Express
@dharayush7/fireclass-ssr firebase-admin Next.js (App Router)
@dharayush7/fireclass-react firebase client SDK React (realtime hooks) — this package

Docs: https://fireclass.ayushdhar.com

Full API and examples: see the README. Changelog: see CHANGELOG.md.

Assets 2
Loading