init typescript project

.gitignore

@@ -0,0 +1,2 @@
+dist/
+node_modules/

package-lock.json

@@ -0,0 +1,25 @@
+{
+  "name": "Gefest",
+  "lockfileVersion": 3,
+  "requires": true,
+  "packages": {
+    "": {
+      "devDependencies": {
+        "typescript": "^6.0.3"
+      }
+    },
+    "node_modules/typescript": {
+      "version": "6.0.3",
+      "resolved": "https://registry.npmjs.org/typescript/-/typescript-6.0.3.tgz",
+      "integrity": "sha512-y2TvuxSZPDyQakkFRPZHKFm+KKVqIisdg9/CZwm9ftvKXLP8NRWj38/ODjNbr43SsoXqNuAisEf1GdCxqWcdBw==",
+      "dev": true,
+      "bin": {
+        "tsc": "bin/tsc",
+        "tsserver": "bin/tsserver"
+      },
+      "engines": {
+        "node": ">=14.17"
+      }
+    }
+  }
+}

package.json

@@ -0,0 +1,5 @@
+{
+  "devDependencies": {
+    "typescript": "^6.0.3"
+  }
+}

src/element.ts

@@ -0,0 +1,104 @@
+import { GefestStyle } from './style';
+
+// The general class of Gefest
+export abstract class GefestElement {
+    style: GefestStyle | null = null;
+    protected content: (GefestElement | string)[] | string;
+    protected attributes: Record<string, string> = {};
+
+    /**
+     * Creates a new instance of the element.
+     * @param content The content for the element. Can be a string, an array of strings, an array of GefestElements or a combination of both.
+     */
+    constructor (content : (GefestElement | string)[] | string = []) {
+        this.content = content;
+    }
+
+    /**
+     * The build method is used to build the element and return it as a string. Dont't redefine this method in the child class, if you want to add some styles to the element, use the setStyle method and then call the render method in the build method of the child class.  
+     * @return {string} The built element as a string.
+     */
+    build (): string {
+        return this.applyStyle(this.render());
+    };
+
+    /**
+     * Sets an attribute for the element.
+     * @param key The attribute key.
+     * @param value The attribute value.
+     */
+    setAttribute (key: string, value: string): void {
+        this.attributes[key] = value;
+    }
+
+    /**
+     * Gets an attribute value by its key.
+     * @param key The attribute key.
+     * @returns The attribute value or undefined if not found.
+     */
+    getAttribute (key: string): string | undefined {
+        return this.attributes[key];
+    }
+
+    /**
+     * Removes an attribute by its key.
+     * @param key The attribute key.
+     */
+    removeAttribute (key: string): void {
+        delete this.attributes[key];
+    }
+
+    /**
+     * Applies the element's style to the given HTML.
+     * @param html The HTML to apply the style to.
+     * @returns The styled HTML.
+     */
+    protected applyStyle(html: string): string {
+        if (this.style)
+            return this.style.applyStyle(html);
+        return html;
+    }
+
+    /**
+     * Converts the element's attributes to a string.
+     * @returns The attributes string.
+     */
+    protected attributesToString (): string {
+        return Object.entries(this.attributes)
+            .map(([key, value]) => `${key}="${value}"`)
+            .join(' ');
+    }
+
+    /**
+     * Wraps the given content in HTML tags.
+     * @param content The content to wrap.
+     * @returns The wrapped HTML.
+     */
+    protected wrapHTML (content: string): string {
+        const attrString = this.attributesToString();
+        return `<div class="gefest-element" ${attrString}>${content}</div>`;
+    }
+
+    /**
+     * Renders the element and returns it as a string.
+     * @returns The rendered element as a string.
+     */
+    protected render (): string {
+        if (typeof this.content === 'string') {
+            return this.wrapHTML(this.content);
+        }
+        const rendered : string[] = [];
+        for (const item of this.content) {
+            if (typeof item === 'string') {
+                rendered.push(this.applyStyle(this.wrapHTML(item)));
+            }
+            else if (item instanceof GefestElement) {
+                if (!item.style && this.style) {
+                    item.style = this.style;
+                }
+                rendered.push(item.build());
+            }
+        }
+        return this.wrapHTML(rendered.join(''));
+    }
+}

src/primitives/a.ts

@@ -0,0 +1,13 @@
+import { GefestElement } from "../element";
+
+export class GefestA extends GefestElement {
+    constructor(content : (GefestElement | string)[] | string, href: string) {
+        super(content);
+        this.setAttribute('href', href);
+    }
+
+    protected wrapHTML (content: string): string {
+        const attrString = this.attributesToString();
+        return `<a ${attrString}>${content}</a>`;
+    }
+}

src/primitives/button.ts

@@ -0,0 +1,12 @@
+import { GefestElement } from "../element";
+
+export class GefestButton extends GefestElement {
+    constructor(content : (GefestElement | string)[] | string) {
+        super(content);
+    }
+
+    protected wrapHTML (content: string): string {
+        const attrString = this.attributesToString();
+        return `<button ${attrString}>${content}</button>`;
+    }
+}

src/primitives/center.ts

@@ -0,0 +1,12 @@
+import { GefestElement } from "../element";
+
+export class GefestCenter extends GefestElement {
+    constructor(content : (GefestElement | string)[] | string) {
+        super(content);
+    }
+
+    protected wrapHTML (content: string): string {
+        const attrString = this.attributesToString();
+        return `<center ${attrString}>${content}</center>`;
+    }
+}

src/primitives/p.ts

@@ -0,0 +1,12 @@
+import { GefestElement } from "../element";
+
+export class GefestP extends GefestElement {
+    constructor(content : (GefestElement | string)[] | string) {
+        super(content);
+    }
+
+    protected wrapHTML (content: string): string {
+        const attrString = this.attributesToString();
+        return `<p ${attrString}>${content}</p>`;
+    }
+}

src/style.ts

@@ -0,0 +1,5 @@
+export abstract class GefestStyle {
+    applyStyle (html: string): string {
+        throw new Error('You need to implement the applyStyle method in the child class');
+    }
+}

tsconfig.json

@@ -0,0 +1,44 @@
+{
+  // Visit https://aka.ms/tsconfig to read more about this file
+  "compilerOptions": {
+    // File Layout
+    "rootDir": "./src",
+    "outDir": "./dist",
+
+    // Environment Settings
+    // See also https://aka.ms/tsconfig/module
+    "module": "nodenext",
+    "target": "esnext",
+    "types": [],
+    // For nodejs:
+    // "lib": ["esnext"],
+    // "types": ["node"],
+    // and npm install -D @types/node
+
+    // Other Outputs
+    "sourceMap": true,
+    "declaration": true,
+    "declarationMap": true,
+
+    // Stricter Typechecking Options
+    "noUncheckedIndexedAccess": true,
+    "exactOptionalPropertyTypes": true,
+
+    // Style Options
+    // "noImplicitReturns": true,
+    // "noImplicitOverride": true,
+    // "noUnusedLocals": true,
+    // "noUnusedParameters": true,
+    // "noFallthroughCasesInSwitch": true,
+    // "noPropertyAccessFromIndexSignature": true,
+
+    // Recommended Options
+    "strict": true,
+    "jsx": "react-jsx",
+    "verbatimModuleSyntax": false,
+    "isolatedModules": true,
+    "noUncheckedSideEffectImports": true,
+    "moduleDetection": "force",
+    "skipLibCheck": true,
+  }
+}