OpenNoodl/dev-docs/tasks/phase-9-styles-overhaul/STYLE-002-element-configs/MVP2-FIX-AND-RETEST.md

MVP2 Fix & Re-Test Guide

Date: 15 janvier 2026 21:24
Status: 🔧 Fix Applied - Ready for Testing

---

🐛 Problem Identified

Le système ElementConfigs n'était jamais initialisé au démarrage de l'app à cause d'imports asynchrones dans index.ts qui ne se terminaient jamais.

Symptômes observés:

• ❌ Aucun log [ElementConfigs] dans la console
• ❌ Propriété _variant absente des nodes
• ❌ Tokens non résolus (affichage de px bruts au lieu de var(--token))
• ❌ Defaults pas appliqués aux nouveaux nodes

---

✅ Fix Appliqué

Fichier modifié: packages/noodl-editor/src/editor/src/models/ElementConfigs/index.ts

Avant (Cassé):

export function initElementConfigs(): void {
  import('./configs').then(({ ButtonConfig, TextConfig, ... }) => {
    import('./ElementConfigRegistry').then(({ ElementConfigRegistry }) => {
      // Code jamais exécuté car async
    });
  });
}

Après (Corrigé):

import { ButtonConfig, TextConfig, GroupConfig, TextInputConfig, ImageConfig } from './configs';
import { ElementConfigRegistry } from './ElementConfigRegistry';

export function initElementConfigs(): void {
  console.log('[ElementConfigs] Initializing element configs...');

  // Imports synchrones - s'exécutent immédiatement
  ElementConfigRegistry.instance.register(ButtonConfig);
  ElementConfigRegistry.instance.register(TextConfig);
  ElementConfigRegistry.instance.register(GroupConfig);
  ElementConfigRegistry.instance.register(TextInputConfig);
  ElementConfigRegistry.instance.register(ImageConfig);

  console.log('[ElementConfigs] ✅ Initialized with', ElementConfigRegistry.instance.getCount(), 'configs');
  console.log('[ElementConfigs] Registered node types:', summary.nodeTypes);
}

---

🧪 Guide de Test - Projet Existant

⚠️ IMPORTANT: Limitation Connue

Le hook d'application de defaults ne s'applique qu'aux NOUVEAUX nodes créés avec Object.keys(parameters).length === 0.

Cela signifie:

• ✅ Les nodes que tu vas créer MAINTENANT auront les defaults
• ❌ Les nodes déjà existants dans ton projet NE SERONT PAS affectés (c'est normal)

---

📋 Procédure de Test

Étape 1: Lancer l'App (2 min)

npm run dev

⚠️ ATTENDRE que l'app soit complètement lancée avant d'ouvrir la console.

Étape 2: Vérifier la Console (CRITIQUE)

Ouvrir DevTools: Cmd+Option+I (Mac) ou Ctrl+Shift+I (Windows)

Chercher ces logs au démarrage:

[ElementConfigs] Initializing element configs...
[ElementConfigRegistry] Registered config for net.noodl.visual.button (6 variants)
[ElementConfigRegistry] Registered config for net.noodl.visual.text (10 variants)
[ElementConfigRegistry] Registered config for Group (7 variants)
[ElementConfigRegistry] Registered config for net.noodl.controls.textinput (2 variants)
[ElementConfigRegistry] Registered config for net.noodl.visual.image (3 variants)
[ElementConfigs] ✅ Initialized with 5 configs
[ElementConfigs] Registered node types: [...]

Si ces logs n'apparaissent PAS:

• ❌ Le fix n'a pas fonctionné
• ⚠️ Peut-être un problème de cache résiduel
• 📝 Documenter l'erreur et me la transmettre

Si ces logs apparaissent:

• ✅ Le système est initialisé correctement
• 🚀 Passer à l'étape 3

---

Étape 3: Ouvrir Projet & Créer Page/Composant (2 min)

1. Ouvrir un projet existant
2. Créer une NOUVELLE page ou composant (vierge)
3. Ouvrir cette page dans l'éditeur

Pourquoi une nouvelle page?

• Les nodes existants ont déjà des parameters, le hook ne s'applique pas
• Une page vierge garantit des nodes neufs

---

Étape 4: Test Individuel des Nodes (20 min)

Pour chaque type de node, faire ce test complet:

A. Button ✨

Créer un nouveau Button (drag & drop depuis le panneau de gauche)

Dans le Property Panel (panneau de droite), vérifier:

Propriété	Valeur Attendue	Statut
paddingTop	var(--space-2) ou ~8px	[ ]
paddingLeft	var(--space-4) ou ~16px	[ ]
fontSize	var(--text-sm) ou ~14px	[ ]
borderRadius	var(--radius-md) ou ~4-6px	[ ]
backgroundColor	var(--primary) ou couleur	[ ]
_variant	primary	[ ]

📸 Dans le Preview:

• Le button doit avoir du padding visible
• Des coins arrondis
• Une couleur de fond
• ✅ Pas un bouton plat sans style

Console log attendu:

[ElementConfigRegistry] Applied defaults to net.noodl.visual.button (node <id>)

---

B. Text 🆕 (Avec Bug Fix)

Créer un nouveau Text (drag & drop)

Dans le Property Panel, vérifier:

Propriété	Valeur Attendue	Statut
width	auto (PAS 100% !)	[ ]
flexShrink	1	[ ]
fontSize	var(--text-base) ou ~16px	[ ]
_variant	body	[ ]

⚠️ Note: Tu ne verras peut-être pas flexShrink dans le Property Panel standard - c'est OK, il est appliqué en interne.

🧪 Test Critique du Bug Fix:

1. Créer un Group
2. Dans les propriétés du Group, chercher flexDirection et le mettre à row
3. Ajouter DEUX Text elements comme enfants du Group
4. Mettre du texte dans chaque Text (ex: "Hello" et "World")

Résultat attendu:

• ✅ SUCCÈS: Les deux textes sont visibles côte à côte, ils partagent l'espace
• ❌ ÉCHEC: Un texte déborde à droite et n'est pas visible

Console log attendu:

[ElementConfigRegistry] Applied defaults to net.noodl.visual.text (node <id>)

---

C. Group 📦

Créer un nouveau Group

Dans le Property Panel, vérifier:

Propriété	Valeur Attendue	Statut
display	flex	[ ]
flexDirection	column	[ ]
_variant	default	[ ]

Console log attendu:

[ElementConfigRegistry] Applied defaults to Group (node <id>)

---

D. TextInput 📝

Créer un nouveau TextInput

Dans le Property Panel, vérifier:

Propriété	Valeur Attendue	Statut
paddingTop	Token ou ~8px	[ ]
paddingLeft	Token ou ~12px	[ ]
borderWidth	Token ou ~1px	[ ]
borderRadius	Token ou ~4px	[ ]
_variant	default	[ ]

📸 Dans le Preview:

• L'input doit avoir du padding
• Un border visible
• Des coins arrondis

Console log attendu:

[ElementConfigRegistry] Applied defaults to net.noodl.controls.textinput (node <id>)

---

E. Image 🖼️

Créer une nouvelle Image

Dans le Property Panel, vérifier:

Propriété	Valeur Attendue	Statut
width	auto	[ ]
height	auto	[ ]
objectFit	cover (possiblement)	[ ]
_variant	default	[ ]

Note: objectFit peut ne pas être visible selon la config - c'est OK.

Console log attendu:

[ElementConfigRegistry] Applied defaults to net.noodl.visual.image (node <id>)

---

✅ Checklist de Validation Finale

Initialisation

• App démarre sans erreur
• Console affiche [ElementConfigs] ✅ Initialized with 5 configs
• 5 logs de registration (Button, Text, Group, TextInput, Image)

Création de Nodes

• Button créé avec styles par défaut visibles
• Text créé avec width: auto et flexShrink: 1
• Group créé avec display: flex et flexDirection: column
• TextInput créé avec border, padding, et border-radius
• Image créée avec dimensions auto

Propriété _variant

• Chaque nouveau node a une propriété _variant définie
• Les valeurs sont cohérentes: primary, default, body, etc.

Bug Fix Text (CRITIQUE)

• Deux Text elements dans un Group en row sont tous deux visibles
• Ils partagent l'espace équitablement
• Pas de débordement à droite

Logs Console

• Log d'initialisation présent au démarrage
• Log "Applied defaults" pour chaque nouveau node créé
• Aucune erreur rouge dans la console

---

🚨 Si Ça Ne Marche Toujours Pas

Scénario 1: Pas de logs d'initialisation

Diagnostic: Le fix n'a pas été appliqué correctement ou cache résiduel

Actions:

1. Vérifier que le fichier ElementConfigs/index.ts a bien été modifié
2. Re-run npm run clean:all
3. Redémarrer l'app
4. Si toujours rien, vérifier les erreurs TypeScript à la compilation

Scénario 2: Logs présents, mais pas de defaults appliqués

Diagnostic: Le hook dans NodeGraphNode ne se déclenche pas

Causes possibles:

• Les nodes que tu testes ont déjà des parameters (pas vides)
• Tu dupli ques des nodes existants au lieu d'en créer de nouveaux
• Le projet est ancien avec des overrides

Solution:

• Créer une page/composant complètement vierge
• Drag & drop des nodes NEUFS depuis la library
• Ne pas dupliquer des nodes existants

Scénario 3: Defaults appliqués mais pas de _variant visible

Diagnostic: Le property panel ne montre pas les propriétés système (préfixées _)

C'est normal! Les propriétés _variant, _size, etc. sont des propriétés système qui peuvent ne pas apparaître dans le property panel standard.

Vérification alternative:

1. Ouvrir DevTools Console
2. Sélectionner un node
3. Dans la console, taper: ProjectModel.instance.getActiveComponent().selectedNodes[0].parameters
4. Vérifier que _variant est présent dans l'objet

---

🎯 Résultat Attendu

Si tous les tests passent:

• ✅ MVP2 est VALIDÉ
• ✅ Le système ElementConfigs est OPÉRATIONNEL
• ✅ Les defaults sont appliqués automatiquement aux nouveaux nodes
• ✅ Le bug Text sizing est corrigé
• 🚀 Prêt pour MVP3 (VariantSelector UI)

Si des tests échouent:

• 📝 Documenter précisément quel test échoue
• 📸 Screenshot de l'erreur console si applicable
• 🔧 Investiguer et corriger avant MVP3

---

📊 Rapport de Test

Remplir après les tests:

Date du test: ___
Testeur: ___

Résumé

• Initialisation: ✅ / ❌
• Button: ✅ / ❌
• Text: ✅ / ❌
• Group: ✅ / ❌
• TextInput: ✅ / ❌
• Image: ✅ / ❌
• Bug Fix Text: ✅ / ❌

Notes / Problèmes Trouvés:

[Ajouter tes observations ici]

Statut Final:

• MVP2 VALIDÉ - Prêt pour MVP3
• MVP2 BLOQUÉ - Problèmes à corriger

---

Créé par: Cline
Date: 15 janvier 2026 21:24