@moltendb-web/angular 1.0.0-rc.5 → 1.0.0

package/package.json

@@ -1,28 +1,34 @@
 {
   "name": "@moltendb-web/angular",
-  "version": "1.0.0-rc.5",
+  "version": "1.0.0",
   "description": "Official Angular Signals wrapper for MoltenDb",
   "type": "module",
   "author": "Maximilian Both <maximilian.both27@outlook.com>",
   "license": "MIT",
-  "scripts": {
-    "build": "ng-packagr -p ng-package.json",
-    "dev": "ng-packagr -p ng-package.json --watch",
-    "prepublishOnly": "npm run build"
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/maximilian27/moltendb-web/tree/master/packages/angular"
   },
   "peerDependencies": {
     "@angular/core": ">=16.0.0",
-    "@moltendb-web/core": "^1.0.0-rc.5",
-    "@moltendb-web/query": "^1.0.0-rc.4"
+    "@moltendb-web/core": "^1.0.0",
+    "@moltendb-web/query": "^1.0.0"
   },
-  "devDependencies": {
-    "@angular/compiler": "^17.0.0",
-    "@angular/compiler-cli": "^17.0.0",
-    "@angular/core": "^17.0.0",
-    "@moltendb-web/core": "^1.0.0-rc.5",
-    "@moltendb-web/query": "^1.0.0-rc.4",
-    "ng-packagr": "^17.0.0",
-    "typescript": "^5.2.2",
+  "module": "fesm2022/moltendb-web-angular.mjs",
+  "typings": "index.d.ts",
+  "exports": {
+    "./package.json": {
+      "default": "./package.json"
+    },
+    ".": {
+      "types": "./index.d.ts",
+      "esm2022": "./esm2022/moltendb-web-angular.mjs",
+      "esm": "./esm2022/moltendb-web-angular.mjs",
+      "default": "./fesm2022/moltendb-web-angular.mjs"
+    }
+  },
+  "sideEffects": false,
+  "dependencies": {
     "tslib": "^2.3.0"
   }
 }

package/dist/angular/README.md

@@ -1,189 +0,0 @@
-# @moltendb-web/angular
-
-The official Angular integration for MoltenDb, providing a seamless, highly reactive developer experience using modern Angular Signals.
-
-This package bridges the gap between MoltenDb's powerful Web Worker/WASM engine and your Angular UI, offering auto-updating data resources, built-in loading states, and elegant functional dependency injection.
-
----
-
-## Installation
-
-```bash
-npm install @moltendb-web/core @moltendb-web/query @moltendb-web/angular
-```
-
----
-
-## Step 1: Configure Assets (Crucial)
-
-MoltenDb runs its database engine inside a background Web Worker and relies on WebAssembly (WASM). You must tell Angular to serve these compiled files as public assets so the browser can load them.
-
-Update the `assets` array in your `angular.json` to include the MoltenDb distribution files:
-
-```json
-"assets": [
-  {
-    "glob": "moltendb-worker.js",
-    "input": "node_modules/@moltendb-web/core/dist",
-    "output": "/"
-  },
-  {
-    "glob": "moltendb.js",
-    "input": "node_modules/@moltendb-web/core/dist/wasm",
-    "output": "/wasm/"
-  },
-  {
-    "glob": "*.wasm",
-    "input": "node_modules/@moltendb-web/core/dist/wasm",
-    "output": "/wasm/"
-  }
-]
-```
-
-> **Note:** Restart your Angular dev server after modifying `angular.json`.
-
----
-
-## Step 2: Provide MoltenDb
-
-Initialize MoltenDb in your app's root configuration (`app.config.ts`). This boots the engine, handles leader election across tabs, and makes the database available to your entire application.
-
-```typescript
-import { ApplicationConfig } from '@angular/core';
-import { provideMoltenDb } from '@moltendb-web/angular';
-
-export const appConfig: ApplicationConfig = {
-  providers: [
-    provideMoltenDb({
-      name: 'local_test_db',
-      workerUrl: '/moltendb-worker.js' // Points to the asset we exposed in Step 1
-    })
-  ]
-};
-```
-
----
-
-## Step 3: Fetching and Mutating Data
-
-This library provides two distinct ways to interact with your database, depending on whether you are binding data to the UI or performing background mutations.
-
-### 1. The Reactive Way: `moltenDbResource`
-
-Use `moltenDbResource` when you want to display data in your template. It automatically handles loading states, catches errors, and listens for live database changes to keep your UI instantly synced across tabs.
-
-It pre-binds the collection for you, keeping your queries incredibly clean. The query function receives the pre-bound `collection` and the full `client` as arguments:
-
-```typescript
-import { Component } from '@angular/core';
-import { moltenDbResource } from '@moltendb-web/angular';
-
-interface UserDoc {
-  _key: string;
-  name: string;
-  role: string;
-}
-
-@Component({
-  selector: 'app-users',
-  template: `
-    @if (users.isLoading() && !users.value()) {
-      <p>Loading...</p>
-    }
-
-    @if (users.value(); as userList) {
-      <ul>
-        @for (user of userList; track user._key) {
-          <li>{{ user.name }} ({{ user.role }})</li>
-        }
-      </ul>
-    }
-
-    @if (users.error()) {
-      <div class="alert">{{ users.error().message }}</div>
-    }
-  `
-})
-export class UsersComponent {
-  // ⚡ The resource automatically fetches and updates when 'users' changes!
-  users = moltenDbResource<UserDoc[]>('users', async (collection) => {
-    console.log('Fetching users...');
-    const result = await collection.get().exec();
-    return result as unknown as UserDoc[];
-  });
-}
-```
-
-The returned `MoltenDbResource<T>` object exposes three readonly signals:
-
-| Signal | Type | Description |
-|---|---|---|
-| `value` | `Signal<T \| undefined>` | The latest query result |
-| `isLoading` | `Signal<boolean>` | `true` while a fetch is in progress |
-| `error` | `Signal<any \| null>` | The last error, or `null` if none |
-
-### 2. The Imperative Way: `moltendbClient()`
-
-Use the `moltendbClient()` injection hook when you need to write data, perform one-off queries in response to user actions (like button clicks), or run complex logic outside of the reactive UI flow.
-
-```typescript
-import { Component } from '@angular/core';
-import { moltendbClient } from '@moltendb-web/angular';
-
-@Component({
-  // ...
-})
-export class AdminComponent {
-  // ⚡ Grab direct, imperative access to the Query Client
-  private client = moltendbClient();
-
-  async addUser() {
-    const randomId = Math.random().toString(36).substring(2, 9);
-
-    // Direct, imperative database mutation
-    await this.client.collection('users').set({
-      [randomId]: {
-        name: 'Angular Dev ' + randomId,
-        role: 'Admin'
-      }
-    }).exec();
-
-    // Note: Any moltenDbResource listening to the 'users' collection
-    // will automatically refresh instantly after this set()!
-  }
-
-  async getUsers() {
-    // One-off imperative commands
-    const allUsers = await this.client.collection('users').get().exec();
-  }
-}
-```
-
----
-
-## API Reference
-
-### `provideMoltenDb(config)`
-
-Registers MoltenDb as an Angular environment provider. Call this once in your root `app.config.ts`.
-
-| Option | Type | Description |
-|---|---|---|
-| `name` | `string` | The name of the database |
-| `workerUrl` | `string` | URL to the `moltendb-worker.js` asset |
-
-### `moltenDbResource<T>(collection, queryFn)`
-
-Creates a reactive resource bound to a collection. Must be called in an injection context (e.g. inside a component class field initializer).
-
-| Parameter | Type | Description |
-|---|---|---|
-| `collection` | `string` | The collection name to bind to |
-| `queryFn` | `(collection, client) => Promise<T>` | Async function receiving the pre-bound collection and the full `MoltenDbClient` |
-
-Returns a `MoltenDbResource<T>` with `value`, `isLoading`, and `error` signals.
-
-### `moltendbClient()`
-
-An injection hook that returns the underlying `MoltenDbClient` instance for imperative database access. Must be called in an injection context.
-

package/ng-package.json

@@ -1,7 +0,0 @@
-{
-  "$schema": "./node_modules/ng-packagr/ng-package.schema.json",
-  "dest": "./dist/angular",
-  "lib": {
-    "entryFile": "src/public-api.ts"
-  }
-}

package/src/lib/moltendb.client.ts

@@ -1,11 +0,0 @@
-import { inject } from '@angular/core';
-import { MoltenDbClient } from '@moltendb-web/query';
-import { MoltenDbService } from './moltendb.service';
-
-/**
- * Functional injection hook to access the MoltenDb Query Client.
- * Removes the need to manually inject MoltenDbService in components.
- */
-export function moltendbClient(): MoltenDbClient {
-  return inject(MoltenDbService).client;
-}

package/src/lib/moltendb.provider.ts

@@ -1,14 +0,0 @@
-import { EnvironmentProviders, InjectionToken, makeEnvironmentProviders } from '@angular/core';
-import { MoltenDbOptions } from '@moltendb-web/core';
-
-export interface AngularMoltenDbOptions extends MoltenDbOptions {
-  name: string;
-}
-
-export const MOLTEN_CONFIG = new InjectionToken<AngularMoltenDbOptions>('MOLTEN_CONFIG');
-
-export function provideMoltenDb(config: AngularMoltenDbOptions): EnvironmentProviders {
-  return makeEnvironmentProviders([
-    { provide: MOLTEN_CONFIG, useValue: config }
-  ]);
-}

package/src/lib/moltendb.resource.ts

@@ -1,59 +0,0 @@
-import { inject, signal, effect, Signal, untracked } from '@angular/core';
-import { MoltenDbClient } from '@moltendb-web/query';
-import { MoltenDbService } from './moltendb.service';
-
-export interface MoltenDbResource<T> {
-  value: Signal<T | undefined>;
-  isLoading: Signal<boolean>;
-  error: Signal<any | null>;
-}
-
-export function moltenDbResource<T>(
-    collection: string,
-    //  Automatically infer the return type of .collection()
-    queryFn: (collection: ReturnType<MoltenDbClient['collection']>, client: MoltenDbClient) => Promise<T>
-): MoltenDbResource<T> {
-  const molten = inject(MoltenDbService);
-
-  const value = signal<T | undefined>(undefined);
-  const isLoading = signal<boolean>(false);
-  const error = signal<any | null>(null);
-
-  const fetchData = async () => {
-    untracked(() => isLoading.set(true));
-
-    try {
-      // ⚡ Pre-bind the collection and pass it in!
-      const result = await queryFn(molten.client.collection(collection), molten.client);
-      value.set(result);
-      error.set(null);
-    } catch (err: any) {
-      if (err.message?.includes('404')) {
-        value.set([] as any);
-        error.set(null);
-      } else {
-        error.set(err);
-      }
-    } finally {
-      isLoading.set(false);
-    }
-  };
-
-  effect((onCleanup) => {
-    if (!molten.isReady()) return;
-
-    fetchData();
-
-    const unsubscribe = molten.db.subscribe((evt) => {
-      if (evt.collection === collection) fetchData();
-    });
-
-    onCleanup(() => unsubscribe());
-  });
-
-  return {
-    value: value.asReadonly(),
-    isLoading: isLoading.asReadonly(),
-    error: error.asReadonly()
-  };
-}

package/src/lib/moltendb.service.ts

@@ -1,28 +0,0 @@
-import { Injectable, inject, signal } from '@angular/core';
-import { MoltenDb } from '@moltendb-web/core';
-import { MoltenDbClient } from '@moltendb-web/query';
-import { MOLTEN_CONFIG } from './moltendb.provider';
-
-@Injectable({ providedIn: 'root' })
-export class MoltenDbService {
-  public db: MoltenDb;
-  public client: MoltenDbClient;
-
-  // A Signal components can watch to know when WASM is booted and Leader Election is done
-  public isReady = signal<boolean>(false);
-
-  constructor() {
-    // 🚀 Modern Angular Injection (No constructor decorators needed!)
-    const config = inject(MOLTEN_CONFIG);
-
-    this.db = new MoltenDb(config.name, config);
-    this.client = new MoltenDbClient(this.db);
-
-    // Boot the engine and update the signal when done
-    this.db.init().then(() => {
-      this.isReady.set(true);
-    }).catch(err => {
-      console.error('[MoltenDb] Failed to initialize', err);
-    });
-  }
-}

package/src/public-api.ts

@@ -1,7 +0,0 @@
-/*
- * Public API Surface of @moltendb-web/angular
- */
-
-export * from './lib/moltendb.provider';
-export * from './lib/moltendb.resource';
-export * from './lib/moltendb.client';

package/tsconfig.json

@@ -1,21 +0,0 @@
-{
-  "compilerOptions": {
-    "target": "ES2022",
-    "module": "ES2022",
-    "moduleResolution": "node",
-    "lib": ["ES2022", "DOM"],
-    "strict": true,
-    "esModuleInterop": true,
-    "skipLibCheck": true,
-    "forceConsistentCasingInFileNames": true,
-    "experimentalDecorators": true,
-    "declaration": true,
-    "baseUrl": ".",
-    "paths": {
-      "@moltendb-web/core": ["../core/src/index.ts"],
-      "@moltendb-web/query": ["../query/src/index.ts"]
-    }
-  },
-  "include": ["src/**/*.ts"],
-  "exclude": ["node_modules", "dist"]
-}

package/tsconfig.lib.json

@@ -1,10 +0,0 @@
-{
-  "extends": "./tsconfig.json",
-  "compilerOptions": {
-    "outDir": "./out-tsc",
-    "declarationMap": true,
-    "inlineSources": true,
-    "types": []
-  },
-  "exclude": ["src/**/*.spec.ts"]
-}