REFACTOR/function broken down

AugustinSorel · Dec 24, 2023 · 028ac30 · 028ac30
1 parent 9e3ddbe
commit 028ac30
Show file tree

Hide file tree

Showing 2 changed files with 75 additions and 38 deletions.
diff --git a/packages/runtime/src/h.ts b/packages/runtime/src/h.ts
@@ -1,4 +1,4 @@
-export type HElement = {
+export type H = {
   type: "element";
   tagName: string;
   props: Record<string, any>;
@@ -15,8 +15,31 @@ export type HFragment = {
   children: VNodes[];
 };
 
-export type VNodes = HElement | HString | HFragment;
+export type VNodes = H | HString | HFragment;
 
-export const h = (node: VNodes) => {
-  return { ...node };
+export const h = (
+  tagName: H["tagName"],
+  props?: H["props"],
+  children?: H["children"],
+): H => {
+  return {
+    type: "element",
+    tagName,
+    props: props ?? {},
+    children: children ?? [],
+  };
+};
+
+export const hString = (value: HString["value"]): HString => {
+  return {
+    type: "text",
+    value,
+  };
+};
+
+export const hFragment = (children: HFragment["children"]): HFragment => {
+  return {
+    type: "fragment",
+    children,
+  };
 };
diff --git a/packages/runtime/tests/h.test.ts b/packages/runtime/tests/h.test.ts
@@ -1,40 +1,38 @@
 import { describe, expect, test } from "vitest";
-import { HElement, HFragment, HString, h } from "../src/h";
+import { H, HFragment, HString, h, hFragment, hString } from "../src/h";
 
 describe("testing HElement", () => {
   test("the creation of a vdom element", () => {
-    const candidateDiv = h({
+    const candidateDiv = h("div");
+
+    const correctDiv: H = {
       type: "element",
-      tagName: "div",
-      props: { class: "super" },
       children: [],
-    });
+      props: {},
+      tagName: "div",
+    };
+
+    expect(candidateDiv).toStrictEqual(correctDiv);
+  });
+
+  test("the creation of a vdom element", () => {
+    const candidateDiv = h("div", { class: "container" });
 
-    const correctDiv: HElement = {
+    const correctDiv: H = {
       type: "element",
       children: [],
-      props: { class: "super" },
+      props: { class: "container" },
       tagName: "div",
     };
 
     expect(candidateDiv).toStrictEqual(correctDiv);
   });
 
   test("the creation of nested vdom element", () => {
-    const title = h({
-      type: "element",
-      children: [],
-      props: {},
-      tagName: "h1",
-    });
-    const header = h({
-      type: "element",
-      tagName: "header",
-      props: { class: "main-header" },
-      children: [title],
-    });
+    const title = h("h1");
+    const header = h("header", { class: "main-header" }, [title]);
 
-    const correctHeader: HElement = {
+    const correctHeader: H = {
       type: "element",
       children: [
         {
@@ -54,10 +52,7 @@ describe("testing HElement", () => {
 
 describe("testing HString", () => {
   test("the creation of a string element", () => {
-    const candidateString = h({
-      type: "text",
-      value: "hello",
-    });
+    const candidateString = hString("hello");
 
     const correctString: HString = {
       type: "text",
@@ -70,10 +65,7 @@ describe("testing HString", () => {
 
 describe("testing HFragment", () => {
   test("the creation of a fragment element", () => {
-    const candidateFragment = h({
-      type: "fragment",
-      children: [],
-    });
+    const candidateFragment = hFragment([]);
 
     const correctFragment: HFragment = {
       type: "fragment",
@@ -84,19 +76,41 @@ describe("testing HFragment", () => {
   });
 
   test("the creation of a fragment element with children", () => {
-    const candidateFragment = h({
+    const candidateFragment = hFragment([h("div"), hString("hello")]);
+
+    const correctFragment: HFragment = {
       type: "fragment",
       children: [
-        h({ type: "element", children: [], props: {}, tagName: "div" }),
-        h({ type: "text", value: "hello" }),
+        { type: "element", children: [], props: {}, tagName: "div" },
+        { type: "text", value: "hello" },
       ],
-    });
+    };
+
+    expect(candidateFragment).toStrictEqual(correctFragment);
+  });
+
+  test("the creation of nested fragments", () => {
+    const candidateFragment = hFragment([
+      hFragment([h("div"), hString("hello")]),
+      h("header", { class: "header" }, [hString("world")]),
+    ]);
 
     const correctFragment: HFragment = {
       type: "fragment",
       children: [
-        { type: "element", children: [], props: {}, tagName: "div" },
-        { type: "text", value: "hello" },
+        {
+          type: "fragment",
+          children: [
+            { type: "element", children: [], props: {}, tagName: "div" },
+            { type: "text", value: "hello" },
+          ],
+        },
+        {
+          type: "element",
+          tagName: "header",
+          props: { class: "header" },
+          children: [{ type: "text", value: "world" }],
+        },
       ],
     };