Add support of rendering to Gefest

frontend/src/modules/Gefest/element.ts

@@ -65,6 +65,13 @@ export abstract class GefestElement {
         this.content = content;
     }
 
+    /** 
+     * Call to GefestEngine for rerender element
+    */
+    update (): void {
+        GefestEngine.reRenderByGI(this.gefestId);
+    }
+
     /** 
      * Builds the element and returns it as a string. If the element has a style, it applies the style to the rendered HTML.
      * @param isFromStyle Indicates if the build is being called from a style application. This prevents infinite recursion when applying styles.
@@ -73,6 +80,9 @@ export abstract class GefestElement {
     build (isFromStyle: boolean = false): string {
         if (this.isHidden)
             this.setAttribute('hidden', '');
+        else
+            this.removeAttribute('hidden');
+
         if (!isFromStyle)
             return this.applyStyle(this.render(), this);
         return this.render();
@@ -84,7 +94,9 @@ export abstract class GefestElement {
      */
     checkReservedAttribute(key: string): void {
         if (({ "style": true, "class": true })[key]) 
-            throw new Error(`The attribute "${key}" is reserved. Use the setStyle method for styles and setClass method for classes.`);
+            throw new Error(`The attribute "${
+                key
+            }" is reserved. Use the setPersonalStyle method for styles and setClass method for classes.`);
     }
 
     /**

frontend/src/modules/Gefest/engine.ts

@@ -2,12 +2,14 @@ import { GefestElement } from "./element";
 
 // For protecting the set of elements from direct access
 const elements: Set<GefestElement> = new Set();
+const elementsMapping: Map<string, GefestElement> = new Map<string, GefestElement> ();
 export class GefestEngine {
     static register (element: GefestElement) : string {
         elements.add(element);
         // Generate GefestID for the element
         const gefestId = `gefest-${Math.random().toString(36).substr(2, 9)}`;
         element.setAttribute('data-gefest-id', gefestId);
+        elementsMapping.set(gefestId, element);
 
         return gefestId;
     }
@@ -26,4 +28,16 @@ export class GefestEngine {
         await main();
         await GefestEngine.activateOnClick();
     }
+
+    static reRenderByGI (gefestId: string) {
+        const gefestElement = elementsMapping.get(gefestId);
+        if (!gefestElement) return;
+        const elementHTML = document.querySelectorAll(`[data-gefest-id="${gefestId}"]`);
+
+        if (elementHTML.length > 0) {
+            const htmlElement = elementHTML[0] as HTMLElement;
+            htmlElement.outerHTML = gefestElement.build();
+            GefestEngine.activateOnClick();
+        }
+    }
 }