QwikPress v2 - Évolutions Architecture

Date : 29/12/2024 Priorite : HAUTE - CETTE SEMAINE Status : BACKLOG

1. Data Catchers Bidirectionnels

Actuellement

Les catchers sont unidirectionnels : fetch only (GET)

{
  "id": "products",
  "connector": "fakestore",
  "endpoint": "products",
  "method": "GET"  // Implicite
}

Évolution proposée

Catchers bidirectionnels : fetch + send (GET, POST, PUT, DELETE)

{
  "id": "create-product",
  "connector": "fakestore",
  "endpoint": "products",
  "method": "POST",
  "type": "action",  // "fetch" | "action" | "mutation"
  "payload": {
    "from": "formData",  // "formData" | "props" | "context"
    "transform": { ... }
  },
  "onSuccess": {
    "invalidate": ["products"],  // Invalide le cache
    "redirect": "/products/{id}"
  },
  "onError": {
    "fallback": { "error": true }
  }
}

Use Cases

• Formulaire contact : Envoie email via API
• Création de ressource : POST vers backend
• Mise à jour : PUT/PATCH
• Suppression : DELETE

2. Admin - Visualisation Orchestration

Objectif

Afficher le flow complet des données dans l'admin :

Connectors → Catchers → Layouts → Pages → Modules

Vue Flow (à implémenter)

┌─────────────────────────────────────────────────────────────┐
│ Page: /documentation/api                                    │
├─────────────────────────────────────────────────────────────┤
│                                                             │
│  Layout Chain: root → docs                                  │
│  ┌─────────┐    ┌─────────┐                                │
│  │  root   │ → │  docs   │                                 │
│  │ header  │    │ sidebar │                                │
│  │ footer  │    │         │                                │
│  └─────────┘    └─────────┘                                │
│                                                             │
│  Data Catchers:                                             │
│  ┌──────────────┐    ┌──────────────┐                      │
│  │ docs-pages   │ → │ api-endpoints│                       │
│  │ Connector: fs│    │ Connector: sw│                      │
│  └──────────────┘    └──────────────┘                      │
│                                                             │
│  Modules:                                                   │
│  ┌──────────┐ ┌──────────┐ ┌──────────┐                    │
│  │   Hero   │ │ TextBlock│ │ CodeBlock│                    │
│  │ data: {} │ │ data: {} │ │ catcher: │                    │
│  └──────────┘ └──────────┘ │api-endpts│                    │
│                             └──────────┘                    │
└─────────────────────────────────────────────────────────────┘

Routes Admin à créer

/admin/flow/                    # Vue globale des flows
/admin/flow/page/[pageId]       # Flow d'une page spécifique
/admin/flow/layout/[layoutId]   # Flow d'un layout
/admin/flow/catcher/[catcherId] # Dépendances d'un catcher

Données à afficher par module

3. Règles Slug Pages

Convention actuelle

Le slug contient le chemin complet :

Page: doc-api
Slug: /documentation/api

Page: v2-architecture
Slug: /documentation/v2-architecture

À documenter dans README

## Règles des Slugs

1. Le slug d'une page contient son chemin complet depuis la racine
2. Ne pas construire le chemin en remontant les parents - utiliser le slug directement
3. Le slug doit commencer par `/` et finir par le nom de la page
4. Pour les pages enfants : `/parent/child` (pas besoin de remonter la hiérarchie)

### Exemple
- Page home → slug: `/`
- Page about → slug: `/about`
- Page doc-api (enfant de documentation) → slug: `/documentation/api`

4. Prochaines étapes

1. [ ] Implémenter catchers bidirectionnels (type: "action")
2. [ ] Créer vue admin /admin/flow pour visualisation orchestration
3. [ ] Ajouter validation des flows (cycles, dépendances manquantes)
4. [ ] Documenter les règles de slug dans README principal

Fichiers concernés

src/types/data-catcher.ts       # Ajouter method, type, onSuccess, onError
src/services/data-catchers/     # Implémenter exécution actions
src/routes/admin/flow/          # Nouvelle section admin
docs/ARCHITECTURE.md            # Documentation complète