textNode function

Author: Just-a-Jason

package-lock.json

@@ -11,6 +11,7 @@
   },
   "dependencies": {
     "@tauri-apps/api": "^1",
+    "@types/node": "^20.14.11",
     "sass": "^1.77.8"
   },
   "devDependencies": {

package.json

@@ -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;
+};

src/Figa/Figa.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;
+}

src/Figa/Types/HtmlTextNode.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"
       ),