QwikPress v2 - Plan d'implémentation

Date : 29/12/2024 Priorite : HAUTE - CETTE SEMAINE Objectif : Refonte architecture avec Data Catchers, Layouts, Auto Data

Phase 1 : Auto Data (Fondation)

Durée estimée : 1-2 sessions

Tâches

1. Créer src/services/auto-data.ts

   • Collecter toutes les pages (méta uniquement)
   • Construire l'arborescence (tree)
   • Calculer siblings, children, ancestors pour la page courante
   • Exposer site config

2. Injecter dans le contexte

   • Modifier plugin@data.ts pour ajouter auto au sharedMap
   • Disponible dans tous les modules via sharedMap.get('auto')

3. Helpers d'accès

   // src/services/context-helpers.ts
   export function getAutoData(sharedMap): AutoData
   export function getPageTree(sharedMap): PageTreeNode[]
   export function getBreadcrumb(sharedMap): PageMeta[]

Fichiers à créer/modifier

• src/services/auto-data.ts (nouveau)
• src/types/auto-data.ts (nouveau)
• src/routes/plugin@data.ts (modifier)

Phase 2 : Data Catchers (Core)

Durée estimée : 2-3 sessions

Tâches

1. Définir le format Data Catcher

   // src/types/data-catcher.ts
   interface DataCatcher {
     id: string;
     name: string;
     connector: string;
     endpoint: string;
     params?: Record<string, string>;
     depends?: string[];
     transform?: TransformConfig;
     cache?: CacheConfig;
     options?: OptionDefinition[];
   }

2. Créer le resolver

   • src/services/data-catchers/resolver.ts
   • Construire le graphe de dépendances
   • Exécuter en parallèle par niveaux
   • Gérer le cache

3. Stockage des catchers

   • Fichier : STORAGE/data/catchers/*.json
   • Supabase : table qwikpress.data_catchers

4. Assignation multi-niveaux

   • Global : dans config.json → dataCatchers.global
   • Page : dans meta.json → dataCatchers
   • Module : dans le module → catcher

5. Accès dans les modules

   const ctx = useDataContext();
   ctx.global.featuredProducts
   ctx.page.relatedItems
   ctx.module.items

Fichiers à créer

• src/types/data-catcher.ts
• src/services/data-catchers/resolver.ts
• src/services/data-catchers/graph.ts
• src/services/data-catchers/executor.ts
• src/services/data-catchers/cache.ts
• src/hooks/useDataContext.ts

Phase 3 : Layouts (Structure)

Durée estimée : 2-3 sessions

Tâches

1. Définir le format Layout

   interface Layout {
     id: string;
     path: string;  // "/" ou "/docs" ou "/docs/api"
     resetParent?: boolean;
     zones: {
       header?: ZoneConfig | "inherit" | null;
       sidebar?: ZoneConfig | "inherit" | null;
       content?: ContentZoneConfig;
       footer?: ZoneConfig | "inherit" | null;
     };
     dataCatchers?: DataCatcherAssignment[];
   }

2. Résolution des layouts

   • src/services/layouts/resolver.ts
   • Pour un path, trouver tous les layouts applicables
   • Fusionner les zones (inherit, override, null)
   • Fusionner les data catchers

3. Stockage

   • Fichier : STORAGE/data/layouts/*.json
   • Supabase : table qwikpress.layouts

4. Rendu imbriqué

   • Modifier src/routes/(site)/layout.tsx
   • Wrapper récursif des layouts
   • Injection des zones (header, sidebar, footer)

5. Migration Header/Footer

   • Créer HeaderModule et FooterModule si pas existants
   • Migrer config actuelle vers layout racine

Fichiers à créer/modifier

• src/types/layout.ts (nouveau)
• src/services/layouts/resolver.ts (nouveau)
• src/services/layouts/merger.ts (nouveau)
• src/components/layouts/LayoutWrapper.tsx (nouveau)
• src/routes/(site)/layout.tsx (modifier)
• src/modules/header/ (nouveau ou adapter)
• src/modules/footer/ (nouveau ou adapter)

Phase 4 : Admin UI

Durée estimée : 2 sessions

Tâches

1. Section Data Catchers

   • Liste des catchers
   • Éditeur avec sélection connecteur/endpoint
   • Builder de transformation
   • Test en direct

2. Section Layouts

   • Vue arborescence des layouts
   • Éditeur de zones
   • Preview du chaînage

3. Assignation dans pages/modules

   • Dropdown sélection catcher dans éditeur de page
   • Dropdown dans éditeur de module

Fichiers à créer

• src/routes/admin/catchers/ (nouveau)
• src/routes/admin/layouts/ (nouveau)
• src/components/admin/catcher-editor/ (nouveau)
• src/components/admin/layout-editor/ (nouveau)

Phase 5 : Hot Modules (Runtime)

Durée estimée : 3-4 sessions

Tâches

1. Sandbox sécurisé

   • VM isolée pour server JS
   • Iframe sandbox pour client JS
   • API whitelistée

2. Éditeur de code

   • Monaco Editor intégré
   • Onglets : Server JS, Client JS, JSX, CSS
   • Autocomplete contexte QwikPress

3. Stockage Hot Modules

   • Fichier : STORAGE/data/hot-modules/*.json
   • Supabase : table qwikpress.hot_modules

4. Rendu dynamique

   • HotModuleRenderer qui exécute le code
   • Gestion erreurs avec fallback

5. Hot Connectors & Catchers

   • Même principe pour créer connecteurs/catchers en runtime

Fichiers à créer

• src/services/hot-modules/sandbox.ts
• src/services/hot-modules/renderer.ts
• src/components/admin/code-editor/
• src/routes/admin/custom/modules/
• src/routes/admin/custom/connectors/
• src/routes/admin/custom/catchers/

Ordre recommandé

Phase 1 (Auto Data)     ████████░░░░░░░░░░░░  Fondation
         ↓
Phase 2 (Catchers)      ░░░░░░░░████████████  Core logic
         ↓
Phase 3 (Layouts)       ░░░░░░░░░░░░████████  Structure
         ↓
Phase 4 (Admin UI)      ░░░░░░░░░░░░░░░░████  Interface
         ↓
Phase 5 (Hot Modules)   ░░░░░░░░░░░░░░░░░░██  Avancé

Prêt à commencer ?

On attaque Phase 1 : Auto Data maintenant ?