From e988ae5833cd5a9232bdcd7fb0350fa38b6e191e Mon Sep 17 00:00:00 2001
From: = <antek.wojcieszyk@gmail.com>
Date: Fri, 19 Jul 2024 15:36:53 +0200
Subject: [PATCH] textNode function

---
 package-lock.json              | 14 ++++++++++++++
 package.json                   |  1 +
 src/Figa/Figa.ts               | 18 ++++++++++++++++++
 src/Figa/Types/HtmlTextNode.ts | 19 +++++++++++++++++++
 src/Screens/Home.ts            | 21 +++++++++------------
 5 files changed, 61 insertions(+), 12 deletions(-)
 create mode 100644 src/Figa/Types/HtmlTextNode.ts

diff --git a/package-lock.json b/package-lock.json
index 960f392..744fac1 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -9,6 +9,7 @@
       "version": "0.0.0",
       "dependencies": {
         "@tauri-apps/api": "^1",
+        "@types/node": "^20.14.11",
         "sass": "^1.77.8"
       },
       "devDependencies": {
@@ -802,6 +803,14 @@
       "integrity": "sha512-/kYRxGDLWzHOB7q+wtSUQlFrtcdUccpfy+X+9iMBpHK8QLLhx2wIPYuS5DYtR9Wa/YlZAbIovy7qVdB1Aq6Lyw==",
       "dev": true
     },
+    "node_modules/@types/node": {
+      "version": "20.14.11",
+      "resolved": "https://registry.npmjs.org/@types/node/-/node-20.14.11.tgz",
+      "integrity": "sha512-kprQpL8MMeszbz6ojB5/tU8PLN4kesnN8Gjzw349rDlNgsSzg90lAVj3llK99Dh7JON+t9AuscPPFW6mPbTnSA==",
+      "dependencies": {
+        "undici-types": "~5.26.4"
+      }
+    },
     "node_modules/anymatch": {
       "version": "3.1.3",
       "resolved": "https://registry.npmjs.org/anymatch/-/anymatch-3.1.3.tgz",
@@ -3248,6 +3257,11 @@
         "node": ">=14.17"
       }
     },
+    "node_modules/undici-types": {
+      "version": "5.26.5",
+      "resolved": "https://registry.npmjs.org/undici-types/-/undici-types-5.26.5.tgz",
+      "integrity": "sha512-JlCMO+ehdEIKqlFxk6IfVoAUVmgz7cU7zD/h9XZ0qzeosSHmUJVOzSQvvYSYWXkFXC+IfLKSIffhv0sVZup6pA=="
+    },
     "node_modules/union-value": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/union-value/-/union-value-1.0.1.tgz",
diff --git a/package.json b/package.json
index a8d2f4a..8e4727b 100644
--- a/package.json
+++ b/package.json
@@ -11,6 +11,7 @@
   },
   "dependencies": {
     "@tauri-apps/api": "^1",
+    "@types/node": "^20.14.11",
     "sass": "^1.77.8"
   },
   "devDependencies": {
diff --git a/src/Figa/Figa.ts b/src/Figa/Figa.ts
index 665eea0..e81c8e5 100644
--- a/src/Figa/Figa.ts
+++ b/src/Figa/Figa.ts
@@ -3,6 +3,7 @@ import Router, { RouterOptions } from "./Router";
 import FigaConfig from "./Interfaces/FigaConfig";
 import { RoutesMap } from "./Types/RoutesMap";
 import { Nullable } from "./Types/Nullable";
+import { HtmlTextNode, HtmlTextNodeProps } from "./Types/HtmlTextNode";
 
 export const removeChildren = (
   el: HTMLElement | FigaComponent | DocumentFragment
@@ -173,3 +174,20 @@ export const img = (src: string, alt?: string): HTMLImageElement => {
 
   return img;
 };
+
+export const textNode = <K extends HtmlTextNode>(
+  type: K,
+  props: HtmlTextNodeProps
+): HTMLElementTagNameMap[K] => {
+  const element = create(type);
+
+  if (props.content) element.textContent = props.content;
+  if (props.innerHtml) element.innerHTML = props.innerHtml;
+  if (props.cssClasses) {
+    if (typeof props.cssClasses === "string")
+      element.classList.add(props.cssClasses);
+    else props.cssClasses.forEach((css) => element.classList.add(css));
+  }
+
+  return element;
+};
diff --git a/src/Figa/Types/HtmlTextNode.ts b/src/Figa/Types/HtmlTextNode.ts
new file mode 100644
index 0000000..b57d3b4
--- /dev/null
+++ b/src/Figa/Types/HtmlTextNode.ts
@@ -0,0 +1,19 @@
+export type HtmlTextNode =
+  | "h1"
+  | "h2"
+  | "h3"
+  | "h4"
+  | "h5"
+  | "h6"
+  | "p"
+  | "code"
+  | "span"
+  | "b"
+  | "i"
+  | "blockquote";
+
+export interface HtmlTextNodeProps {
+  cssClasses?: string | string[];
+  innerHtml?: string;
+  content?: string;
+}
diff --git a/src/Screens/Home.ts b/src/Screens/Home.ts
index 182f342..75a862c 100644
--- a/src/Screens/Home.ts
+++ b/src/Screens/Home.ts
@@ -1,9 +1,9 @@
 import { FigaComponentProps } from "../Figa/Interfaces/FigaComponentProps";
 import { FigaUITemplate } from "../Figa/Components/FigaUITemplate";
-import { boxify, create, cssClass, img } from "../Figa/Figa";
 import ReactiveButton from "../Components/ReactiveButton";
 import FigaScreen from "../Figa/Components/FigaScreen";
-import ReenderStat from "../Components/RenderStat";
+import { boxify, img, textNode } from "../Figa/Figa";
+import RenderStat from "../Components/RenderStat";
 import { Link } from "../Figa/Router";
 import "./Home.scss";
 
@@ -15,23 +15,20 @@ export default class Home extends FigaScreen {
   protected template(): FigaUITemplate<FigaComponentProps> {
     const start = performance.now();
 
-    const i = img("assets/icons/figa-icon.png");
-
-    const p = create("p");
-
-    p.innerHTML = "Edit: <span>src/Screens/Home.ts</span> to modify the page!";
-    cssClass(p, "figa-modify");
-
     return {
       element: boxify(
         [
-          i,
+          img("assets/icons/figa-icon.png"),
           boxify(
             [new ReactiveButton(), new Link("About ✨", "/about")],
             "wrapper"
           ),
-          p,
-          new ReenderStat(start),
+          textNode("p", {
+            innerHtml:
+              "Edit: <span>src/Screens/Home.ts</span> to modify the page!",
+            cssClasses: "figa-modify",
+          }),
+          new RenderStat(start),
         ],
         "figa-content"
       ),