Update readme.md for Gefest

frontend/src/modules/Gefest/README.md

@@ -8,17 +8,18 @@ Gefest is a lightweight, TypeScript-based framework for building and managing HT
 - **Attribute Management**: Easy setting, getting, and removing of HTML attributes
 - **CSS Class Handling**: Add and remove classes dynamically
 - **Style System**: Extensible styling with custom style classes
-- **Event Handling**: Built-in click event management
+- **Event Handling**: Built-in click event management with automatic re-rendering
 - **Element Registration**: Automatic ID generation and DOM integration
 - **Primitive Components**: Pre-built HTML element wrappers
+- **Dynamic Updates**: Re-render elements on the fly
 
 ## Installation
 
 Gefest is included as a module in this project. To use it in your TypeScript files:
 
 ```typescript
-import { GefestEngine, GefestElement } from './modules/Gefest/engine';
+import { GefestEngine, GefestElement } from './engine';
-import { GefestButton } from './modules/Gefest/primitives/button';
+import { GefestButton } from './primitives/button';
 // ... other imports as needed
 ```
 
@@ -33,6 +34,7 @@ The base abstract class for all Gefest elements. It provides:
 - Class management
 - Style application
 - Event binding
+- Automatic re-rendering on updates
 
 ### GefestEngine
 
@@ -41,6 +43,7 @@ Manages the lifecycle of Gefest elements:
 - Registers elements with unique IDs
 - Activates event handlers on DOM elements
 - Provides the main entry point for applications
+- Handles re-rendering of updated elements
 
 ### GefestStyle
 
@@ -89,9 +92,17 @@ button.isHidden = true; // Sets the 'hidden' attribute on the element
 const button = new GefestButton("Click me!");
 button.onClick = () => {
     console.log('Button clicked!');
+    // The framework automatically re-renders after click
 };
 ```
 
+### Updating Elements
+
+```typescript
+const button = new GefestButton("Initial");
+button.update(); // Re-renders the element in the DOM
+```
+
 ### Running the Application
 
 ```typescript
@@ -131,6 +142,15 @@ const link = new GefestA("Visit site", "https://example.com");
 link.setAttribute('target', '_blank');
 ```
 
+### GefestImg
+
+Wraps HTML `<img>` elements.
+
+```typescript
+const image = new GefestImg("", "path/to/image.jpg");
+image.setAttribute('alt', 'Description');
+```
+
 ### Other Primitives
 
 - `GefestP`: Paragraph (`<p>`)
@@ -138,7 +158,7 @@ link.setAttribute('target', '_blank');
 - `GefestHeader`: Header (`<h1>`)
 - `GefestI`: Italic (`<i>`)
 - `GefestSmall`: Small text (`<small>`)
-- `GefestCenter`: Centered content (custom wrapper)
+- `GefestCenter`: Centered content (`<center>`)
 
 ## Advanced Features
 
@@ -202,14 +222,15 @@ const element = GefestElement.fromHTML('<button class="btn">Click</button>');
 ### GefestElement
 
 #### Properties
-- `gefestId: string` - Unique identifier for the element
+- `gefestId: string` - Unique identifier for the element (readonly)
 - `style: GefestStyle | null` - Style to apply to the element
-- `onClick: (() => void) | null` - Click event handler
+- `onClick: (() => void) | null` - Click event handler (getter/setter)
 - `isHidden: boolean` - Whether the element should be hidden (sets the 'hidden' attribute when true)
 
 #### Methods
 - `constructor(content: (GefestElement | string)[] | string)`
 - `build(isFromStyle?: boolean): string`
+- `update(): void` - Re-renders the element in the DOM
 - `setAttribute(key: string, value: string): void`
 - `getAttribute(key: string): string | undefined`
 - `removeAttribute(key: string): void`
@@ -227,6 +248,7 @@ const element = GefestElement.fromHTML('<button class="btn">Click</button>');
 - `register(element: GefestElement): string`
 - `activateOnClick(): Promise<void>`
 - `main(main: () => Promise<void>): Promise<void>`
+- `reRenderByGI(gefestId: string): void`
 
 ### GefestStyle
 
@@ -238,8 +260,8 @@ const element = GefestElement.fromHTML('<button class="btn">Click</button>');
 ### Complete Application
 
 ```typescript
-import { GefestEngine } from './modules/Gefest/engine';
+import { GefestEngine } from './engine';
-import { GefestButton, GefestP } from './modules/Gefest/primitives';
+import { GefestButton, GefestP } from './primitives';
 
 async function main() {
     const title = new GefestP("Welcome to Gefest!");
@@ -251,7 +273,13 @@ async function main() {
         alert('Welcome!');
     };
 
-    const container = new GefestDiv([title, button]);
+    // For custom elements, define them as shown above
+    const container = new (class extends GefestElement {
+        protected wrapHTML(content: string): string {
+            const attrString = this.attributesToString();
+            return `<div ${attrString}>${content}</div>`;
+        }
+    })([title, button]);
     container.addClass('container');
 
     document.body.innerHTML = container.build();