`
+- `GefestImg` — `![]()
`
+- `GefestP` — ``
+- `GefestSpan` — ``
+- `GefestHeader` — ``–``
+- `GefestI` — ``
+- `GefestSmall` — ``
+- `GefestCenter` — ``
## API Reference
### GefestElement
#### Properties
-- `gefestId: string` - Unique identifier for the element (readonly)
-- `style: GefestStyle | null` - Style to apply to the element
-- `onClick: (() => void) | null` - Click event handler (getter/setter)
-- `isHidden: boolean` - Whether the element should be hidden (sets the 'hidden' attribute when true)
+- `gefestId: string` — auto-generated unique identifier
+- `style: GefestStyle | (() => GefestStyle) | null`
+- `onClick: (() => void) | null`
+- `isHidden: boolean`
+- `id: string | null`
#### Methods
-- `constructor(content: (GefestElement | string)[] | string)`
+- `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`
-- `addClass(className: string): void`
-- `removeClass(className: string): void`
+- `update(): void`
+- `setAttribute(key, value): void`
+- `getAttribute(key): string | undefined`
+- `removeAttribute(key): void`
+- `addClass(className): void`
+- `removeClass(className): void`
- `getClassList(): string[]`
-- `setPersonalStyle(style: string | null): void` - Set inline styles on the element
-- `emit(event: GefestElementEvents, data?: unknown): void` - Emit custom events
-- `on(event: GefestElementEvents, handler: (data: unknown) => void): void` - Register event listener
-- `once(event: GefestElementEvents, handler: (data: unknown) => void): void` - Register one-time event listener
-- `checkReservedAttribute(key: string): void` - Validate if attribute key is reserved
+- `setPersonalStyle(style: string | null): void`
+- `emit(event, data?): void`
+- `on(event, handler): void`
+- `once(event, handler): void`
+- `checkReservedAttribute(key): void`
#### Static Methods
- `fromHTML(html: string): GefestElement`
@@ -366,69 +105,132 @@ button.removeAttribute('disabled');
- `register(element: GefestElement): string`
- `activateOnClick(): Promise`
- `main(main: () => Promise): Promise`
-- `reRenderByGI(gefestId: string): void`
+- `render(gefestId?: string | string[] | null): void`
### GefestStyle
#### Methods
- `applyStyle(html: string, element?: GefestElement): string`
-## Examples
+## Usage Examples
-### Complete Application
+### Create a button
+
+```typescript
+import { GefestButton } from './primitives/button';
+
+const button = new GefestButton('Submit');
+button.addClass('btn');
+button.setAttribute('type', 'submit');
+button.onClick = () => {
+ console.log('clicked');
+};
+```
+
+### Apply inline styles
+
+```typescript
+button.setPersonalStyle('background-color: blue; color: white; padding: 10px;');
+```
+
+### Hide an element
+
+```typescript
+button.isHidden = true;
+```
+
+### Nested elements
+
+```typescript
+import { GefestA } from './primitives/a';
+
+const link = new GefestA('Read more', '#');
+const button = new GefestButton([link, ' more']);
+```
+
+### Custom element
+
+```typescript
+import { GefestElement } from './element';
+
+class GefestDiv extends GefestElement {
+ protected wrapHTML(content: string): string {
+ const attrString = this.attributesToString();
+ return `${content}
`;
+ }
+}
+```
+
+### Custom style
+
+```typescript
+import { GefestStyle } from './style';
+
+class BootstrapStyle extends GefestStyle {
+ applyStyle(html: string, element?: GefestElement): string {
+ if (element?.getClassList().includes('btn')) {
+ return html.replace(' {
+ console.log('click data', data);
+});
+
+button.once('onClick', () => {
+ console.log('once only');
+});
+
+button.onClick = () => {
+ button.emit('onClick', { value: 1 });
+};
+```
+
+### Rerendering
+
+```typescript
+button.update();
+```
+
+### Complete app
```typescript
import { GefestEngine } from './engine';
-import { GefestButton, GefestP } from './primitives';
+import { GefestButton, GefestHeader, GefestP } from './primitives';
async function main() {
- const title = new GefestP("Welcome to Gefest!");
- title.addClass('title');
-
- const button = new GefestButton("Get Started");
- button.addClass('start-btn');
- button.onClick = () => {
- alert('Welcome!');
- };
-
- // For custom elements, define them as shown above
- const container = new (class extends GefestElement {
- protected wrapHTML(content: string): string {
- const attrString = this.attributesToString();
- return `${content}
`;
- }
- })([title, button]);
- container.addClass('container');
-
- document.body.innerHTML = container.build();
+ const title = new GefestHeader('Welcome', 2);
+ const button = new GefestButton('Start');
+ button.onClick = () => alert('Hello');
+ document.body.innerHTML = title.build() + button.build();
}
GefestEngine.main(main);
```
-### Form Creation
+## Notes
-```typescript
-import { GefestButton } from './primitives/button';
-
-const submitBtn = new GefestButton("Submit");
-submitBtn.setAttribute('type', 'submit');
-submitBtn.addClass('btn-submit');
-
-const form = document.createElement('form');
-form.innerHTML = submitBtn.build();
-document.body.appendChild(form);
-```
+- `class`, `style`, and `data-gefest-id` are reserved.
+- Use `addClass` / `removeClass` for CSS classes.
+- Use `setPersonalStyle` for inline styles.
+- `GefestElement.fromHTML()` is experimental and may not preserve all behavior.
## Contributing
-To add new primitives or extend the framework:
-
-1. Create new classes extending `GefestElement`
-2. Implement the `wrapHTML` method to return the appropriate HTML tag
-3. Add event handling if needed
-4. Test with `GefestEngine.main()`
+To extend Gefest:
+1. Add a class extending `GefestElement`
+2. Implement `wrapHTML()` with the desired tag
+3. Add custom logic, classes, or events
+4. Test with `GefestEngine.main()` in the browser
## License
-This framework is part of the AmeVox project. See project license for details.
+This framework is part of the AmeVox project. See the project license for details.