diff --git a/frontend/src/modules/Gefest/README.md b/frontend/src/modules/Gefest/README.md
index 43e16c6..d0f2563 100644
--- a/frontend/src/modules/Gefest/README.md
+++ b/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 { GefestButton } from './modules/Gefest/primitives/button';
+import { GefestEngine, GefestElement } from './engine';
+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 `` elements.
+
+```typescript
+const image = new GefestImg("", "path/to/image.jpg");
+image.setAttribute('alt', 'Description');
+```
+
### Other Primitives
- `GefestP`: Paragraph (`
`) @@ -138,7 +158,7 @@ link.setAttribute('target', '_blank'); - `GefestHeader`: Header (`