@soulyard/shared-state-manager v1.0.1

Voici un exemple de README.md clair et structuré pour ta bibliothèque shared-state-manager, adaptée pour une utilisation avec des microfrontends en Angular ou tout autre framework moderne supportant ESM.

📦 shared-state-manager

Librairie TypeScript + RxJS pour gérer un état d'application partagé entre plusieurs microfrontends.

✅ Fonctionnalités

• 📤 Chaque microfrontend peut écrire uniquement dans son propre espace de noms.
• 👀 Tous les microfrontends peuvent lire l’état global ou s’abonner uniquement à leur propre état.
• ⚡️ Réactif grâce à RxJS.
• 📦 Compatible CommonJS (Node) et ESM (Angular, Vite…).

🚀 Installation

npm install shared-state-manager

Assurez-vous que rxjs est aussi installé dans le projet hôte :

npm install rxjs

📚 Utilisation

1. 🔁 Mettre à jour l’état de son propre microfrontend

import sharedStateManager from 'shared-state-manager';

sharedStateManager.setMfeState('dataChooser', {
  selectedIds: [1, 2, 3]
});

2. 👀 Lire un état (snapshot)

const current = sharedStateManager.getMfeState('dataChooser');

3. 🔔 S’abonner aux changements de son propre espace

sharedStateManager.selectMfeState('dataChooser').subscribe(state => {
  console.log('Nouveau state pour dataChooser:', state);
});

4. 📡 S’abonner à l’état global

sharedStateManager.selectAll().subscribe(globalState => {
  console.log('État complet :', globalState);
});

🧱 Exemple d'intégration dans un microfrontend Angular

// app.component.ts
import { Component, OnInit } from '@angular/core';
import sharedStateManager from 'shared-state-manager';

@Component({
  selector: 'app-root',
  template: `<p>État : {{ data | json }}</p>`
})
export class AppComponent implements OnInit {
  data: any;

  ngOnInit(): void {
    sharedStateManager.selectMfeState('dataChooser').subscribe(state => {
      this.data = state;
    });

    sharedStateManager.setMfeState('dataChooser', { active: true });
  }
}

📦 Build local

npm run build

📤 Publication sur npm

npm login
npm publish --access public

Souhaites-tu également un exemple d’intégration dans un projet monorepo Nx ou Turborepo avec Angular et plusieurs microfrontends ?