fluxie 1.0.0-lts

package/CHANGELOG.md

@@ -0,0 +1,22 @@
+# Changelog
+
+## [1.2.1](https://github.com/LesFabricants/Fluxie/compare/v1.2.0...v1.2.1) (2024-06-04)
+
+
+### Bug Fixes
+
+* **store:** do not initialize in the upgrade event ([8a9b42d](https://github.com/LesFabricants/Fluxie/commit/8a9b42dddbee9382bdb10e9601fce9b1e8bd5b42))
+
+## [1.2.0](https://github.com/LesFabricants/Fluxie/compare/v1.1.0...v1.2.0) (2024-06-04)
+
+
+### Features
+
+* **pkg:** add package.json data ([23b1b79](https://github.com/LesFabricants/Fluxie/commit/23b1b79e6a2f5d448cb0e7a6a263b7259a5809c2))
+
+## [1.1.0](https://github.com/LesFabricants/Fluxie/compare/v1.0.0...v1.1.0) (2024-06-04)
+
+
+### Features
+
+* **store:** update store name to prevent conflicts ([5f1662c](https://github.com/LesFabricants/Fluxie/commit/5f1662cae25ba8c70cc3113bd28014c16d8229d9))

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2024 Les Fabricants
+
+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,185 @@
+# Fluxie
+
+Super small helper class meant to greatly simplify the creation of a flux architecture using angular service, complete with redux devtool and caching support
+
+**Warning**  
+**Requires 2Kb of available space, make sure you have the space before installing !**
+
+## Syntax
+
+> The `store.ts` files is a base class that can be extended by services to add the necessary methods and properties required to handle a centralized state
+
+```ts
+interface UsersState {
+  users: IUser[];
+  selection: IUser[];
+}
+
+@Injectable({ providedIn: "root" })
+export class UsersService extends Store<UsersState> {
+  constructor() {
+    super({ users: [], selection: [] }, { cache: true, storeName: "Users" });
+  }
+}
+```
+
+## Parameters
+
+- `initialState`
+  the initial state of the store
+
+- `options` (optional)
+  - `storeName`
+    name to use for the store
+  - `cache`
+    a boolean value, if true, enables the caching of the state via IndexedDB
+
+## Examples
+
+`users.service.ts`
+
+```ts
+interface UsersState {
+  users: IUser[];
+  selection: IUser[];
+}
+
+@Injectable({ providedIn: "root" })
+export class UsersService extends Store<UsersState> {
+  constructor() {
+    super({ users: [], selection: [] });
+  }
+
+  users = computed(() => {
+    return this.store.select().users.map((user) => new User(user));
+  });
+
+  users$: Observable<User[]> = this.store.select$.pipe(
+    map((state) => state.users),
+    map((users) => users.map((user) => new User(user)))
+  );
+
+  get() {
+    this.http.get<IUser[]>(`${URL}/users`).subscribe((users) => {
+      this.setUsers(users);
+    });
+  }
+
+  updateRole(id: string, role: RoleEnum) {
+    this.http.patch<IUser>(`${URL}/users/${id}`, { role }).subscribe((user) => {
+      this.updateUser(id, user);
+    });
+  }
+
+  setUsers(users: IUser[]) {
+    this.setState("set users", (state) => ({
+      ...state,
+      users,
+    }));
+  }
+
+  updateUser(id: string, user: IUser) {
+    this.setState("update user", (state) => {
+      return {
+        ...state,
+        users: state.users.map((currentUser) =>
+          currentUser.id === id ? user : currentUser
+        ),
+      };
+    });
+  }
+
+  toggleUserSelection(user: IUser) {
+    this.setState("toggle user selection", (state) => {
+      const newSelection = state.selection;
+      const index = newSelection.findIndex(({ id }) => id === user.id);
+
+      if (index > -1) {
+        newSelection.splice(index, 1);
+      } else {
+        newSelection.push(user);
+      }
+
+      return {
+        ...state,
+        selection: newSelection,
+      };
+    });
+  }
+
+  emptySelection() {
+    this.setState("empty selection", (state) => ({
+      ...state,
+      selection: [],
+    }));
+  }
+}
+```
+
+`users.component.ts`
+
+```ts
+@Component({
+  selector: "oney-users",
+  templateUrl: "./users.component.html",
+  styleUrls: ["./users.component.scss"],
+})
+export class UsersComponent implements OnInit {
+  protected usersService = inject(UsersService);
+
+  constructor() {}
+
+  ngOnInit(): void {
+    this.usersService.get();
+  }
+}
+```
+
+Via Observables:
+
+```html
+<article>
+  @for (user of usersService.users$ | async) {
+  <app-user [user]="user"></app-user>
+  }
+</article>
+```
+
+Via Signals:
+
+```html
+<article>
+  @for (user of usersService.users()) {
+  <app-user [user]="user"></app-user>
+  }
+</article>
+```
+
+Note: You are free to organize this however you want, although the recommended organization would be to split your service file into 3 files:
+
+- `users.service.ts`
+  makes http calls, and is overall the file your application calls to request state changes
+
+  - in the example above, this would contain get and updateRole
+
+- `users.query.ts`
+  contains all of the variations of the filtered state used throughout the application
+
+  - in the example above, this would contain users and users$
+
+- `users.store.ts`
+  the file that is only called by `users.service.ts` and `users.query.ts`, this is the file that contains the store initialization code, the state typing, and every method that directly alters the state
+
+  - in the example above, this would contain setUsers, updateUser, toggleUserSelection and emptySelection
+
+## Devtool support
+
+In order to add devtool support add this snippet to your `app.module.ts`, right after your imports:
+
+```ts
+if (!environment.production) {
+  enableReduxDevtools();
+}
+```
+
+Your redux devtool menu will now show all your store actions, the option `storeName` will be the store instance name there (defaults to the class name if not provided), and every service extending the `Store` class will be its own instance in the dropdown at the top.

package/dist/devtools.d.ts

@@ -0,0 +1,5 @@
+import { BehaviorSubject } from "rxjs";
+export declare let isDevtoolEnabled: boolean;
+export declare function enableReduxDevtools(): void;
+export declare function initializeReduxDevtools(storeName: string, state: BehaviorSubject<any>, initialState: any): false | undefined;
+export declare function sendActionToDevtools(storeName: string, actionName: string, payload: any): false | undefined;

package/dist/index.d.ts

@@ -0,0 +1,2 @@
+export { Store } from "./store";
+export { enableReduxDevtools, isDevtoolEnabled } from "./devtools";

package/dist/index.js

@@ -0,0 +1 @@
+import{BehaviorSubject as u}from"rxjs";var r={},o=!1;function h(){o=!0}function c(a,t,s){if(!d())return!1;let e=window?.__REDUX_DEVTOOLS_EXTENSION__.connect({name:a});e.init(s),e.subscribe(n=>{n.type==="DISPATCH"&&n.payload.type==="JUMP_TO_ACTION"&&t.next(JSON.parse(n.state))}),r[a]=e}function l(a,t,s){if(!d())return!1;if(!o)throw new Error("Devtools not enabled, please call enableReduxDevtools() in app.module.ts");r[a].send(t,s)}function d(){return window?.__REDUX_DEVTOOLS_EXTENSION__!==void 0}var i=class{options;state;select$;db;constructor(t,s){if(this.options={...s,storeName:s?.storeName??this.constructor.name},this.state=new u(t),this.select$=this.state.asObservable(),s?.cache){let e=globalThis.indexedDB.open("__FLUXIE_STORE",1);e.onerror=()=>{console.error(`IndexedDB error: ${e.error}`)},e.onsuccess=()=>{this.db=e.result,this.initializeFromIndexedDB()},e.onupgradeneeded=n=>{this.db=e.result,n.newVersion===1&&this.db.createObjectStore("cachedData")}}o&&c(this.options.storeName,this.state,this.state.getValue())}setState(t,s){let e=s(this.state.getValue());this.state.next(e),this.options?.cache&&this.sendToIndexedDB(this.state.getValue()),o&&l(this.options.storeName,t,e)}async initializeFromIndexedDB(){let t=this.db.transaction("cachedData").objectStore("cachedData").get(this.options.storeName);t.onsuccess=()=>{let s=t.result;s?this.state.next(s):this.sendToIndexedDB(this.state.getValue())}}async sendToIndexedDB(t){this.db.transaction("cachedData","readwrite").objectStore("cachedData").put(t,this.options.storeName)}};export{i as Store,h as enableReduxDevtools,o as isDevtoolEnabled};

package/dist/main.js

@@ -0,0 +1 @@
+import{BehaviorSubject as p}from"rxjs";var r={},o=!1;function h(){o=!0}function l(i,t,s){if(!d())return!1;let e=window?.__REDUX_DEVTOOLS_EXTENSION__.connect({name:i});e.init(s),e.subscribe(n=>{n.type==="DISPATCH"&&n.payload.type==="JUMP_TO_ACTION"&&t.next(JSON.parse(n.state))}),r[i]=e}function c(i,t,s){if(!d())return!1;if(!o)throw new Error("Devtools not enabled, please call enableReduxDevtools() in app.module.ts");r[i].send(t,s)}function d(){return window?.__REDUX_DEVTOOLS_EXTENSION__!==void 0}import{toSignal as u}from"@angular/core/rxjs-interop";var a=class{options;state;select$;select;db;constructor(t,s){if(this.options={...s,storeName:s?.storeName??this.constructor.name},this.state=new p(t),this.select$=this.state.asObservable(),this.select=u(this.state),s?.cache){let e=globalThis.indexedDB.open("store",1);e.onerror=()=>{console.error(`IndexedDB error: ${e.error}`)},e.onsuccess=()=>{this.db=e.result,this.initializeFromIndexedDB()},e.onupgradeneeded=n=>{this.db=e.result,n.newVersion===1&&this.db.createObjectStore("cachedData"),this.initializeFromIndexedDB()}}o&&l(this.options.storeName,this.state,this.state.getValue())}setState(t,s){let e=s(this.state.getValue());this.state.next(e),this.options?.cache&&this.sendToIndexedDB(this.state.getValue()),o&&c(this.options.storeName,t,e)}async initializeFromIndexedDB(){let t=this.db.transaction("cachedData").objectStore("cachedData").get(this.options.storeName);t.onsuccess=()=>{let s=t.result;s?this.state.next(s):this.sendToIndexedDB(this.state.getValue())}}async sendToIndexedDB(t){this.db.transaction("cachedData","readwrite").objectStore("cachedData").put(t,this.options.storeName)}};export{a as Store,h as enableReduxDevtools,o as isDevtoolEnabled};

package/dist/store.d.ts

@@ -0,0 +1,16 @@
+import { Observable } from "rxjs";
+interface Options {
+    storeName: string;
+    cache?: boolean;
+}
+export declare class Store<T = any> {
+    private options;
+    private state;
+    readonly select$: Observable<T>;
+    private db?;
+    constructor(initialState: T, options?: Partial<Options>);
+    setState(actionName: string, mutationFn: (state: T) => T): void;
+    private initializeFromIndexedDB;
+    private sendToIndexedDB;
+}
+export {};

package/package.json

@@ -0,0 +1,35 @@
+{
+  "name": "fluxie",
+  "description": "Small helper class to easily implement Flux architecture using angular service, complete with redux devtool and caching support",
+  "authors": "Anthony Lenglet",
+  "version": "1.0.0-lts",
+  "type": "module",
+  "main": "dist/index.js",
+  "author": {
+    "name": "Anthony Lenglet",
+    "url": "https://github.com/anthonylenglet"
+  },
+  "license": "MIT",
+  "homepage": "https://github.com/LesFabricants/Fluxie",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/LesFabricants/Fluxie.git"
+  },
+  "keywords": [
+    "angular",
+    "flux",
+    "redux",
+    "devtool",
+    "caching"
+  ],
+  "scripts": {
+    "build": "node esbuild.config.js && ./node_modules/.bin/tsc -p tsconfig.json"
+  },
+  "peerDependencies": {
+    "rxjs": ">=5.0.0"
+  },
+  "devDependencies": {
+    "esbuild": "^0.21.4",
+    "typescript": "^5.4.5"
+  }
+}