Add conditional variables

[mohamedsalem401]

Features Implemented

• Add Traits Conditional Variables
• Add Components Conditional Variables
• Add Styles Conditional Variables

---

Notes

1. Handling Conditional Components

   • The return value for a conditional component will be added as a child of the conditional component.

   Example:

   const component = cmpRoot.append({
     type: ConditionalVariableType,
     condition: true,
     ifTrue: '<div>This will be a child of the conditional component</div>',
   })[0];

2. Saving Changes to Conditional Component Children

   • Any changes made to the child of a conditional component will be persisted to storage.

   Example (with updated styles):

   {
     type: ConditionalVariableType,
     condition: true,
     ifTrue: {
       type: 'div',
       content: 'This will be a child of the conditional component',
       style: {
         color: 'red',
       },
     },
   }

---

Explanation

• In the example above, if you add or modify styles (e.g., setting color: red) on the child <div>, the changes will be saved to storage and reflected whenever the component is reloaded or rendered again.

[artf]

overall looks really good 👏

[artf]

🚀