@jamx-framework/renderer 0.1.0

package/test/unit/html/serializer.test.ts

@@ -0,0 +1,141 @@
+// packages/renderer/tests/unit/html/serializer.test.ts
+
+import { describe, it, expect } from "vitest";
+import { HtmlSerializer } from "../../../src/html/serializer.js";
+import { jsx, Fragment } from "../../../src/jsx/jsx-runtime.js";
+import type { JamxNode } from "../../../src/jsx/jsx-runtime.js";
+
+const s = new HtmlSerializer();
+
+describe("HtmlSerializer", () => {
+  describe("nodos primitivos", () => {
+    it("serializa strings con escape", () => {
+      expect(s.serialize("hello <world>")).toBe("hello &lt;world&gt;");
+    });
+
+    it("serializa números", () => {
+      expect(s.serialize(42)).toBe("42");
+    });
+
+    it("ignora null, undefined, false", () => {
+      expect(s.serialize(null)).toBe("");
+      expect(s.serialize(undefined)).toBe("");
+      expect(s.serialize(false)).toBe("");
+    });
+
+    it("ignora true", () => {
+      expect(s.serialize(true)).toBe("");
+    });
+  });
+
+  describe("elementos HTML", () => {
+    it("serializa un div simple", () => {
+      const el = jsx("div", { children: "hello" });
+      expect(s.serialize(el)).toBe("<div>hello</div>");
+    });
+
+    it("serializa atributos", () => {
+      const el = jsx("div", { id: "app", class: "container" });
+      expect(s.serialize(el)).toContain('id="app"');
+      expect(s.serialize(el)).toContain('class="container"');
+    });
+
+    it("convierte className a class", () => {
+      const el = jsx("div", { className: "my-class" });
+      expect(s.serialize(el)).toBe('<div class="my-class"></div>');
+    });
+
+    it("serializa elementos void sin closing tag", () => {
+      const el = jsx("br", {});
+      expect(s.serialize(el)).toBe("<br>");
+    });
+
+    it("serializa input void con atributos", () => {
+      const el = jsx("input", { type: "text", placeholder: "Enter text" });
+      const html = s.serialize(el);
+      expect(html).toContain('type="text"');
+      expect(html).not.toContain("</input>");
+    });
+
+    it("serializa atributos booleanos correctamente", () => {
+      const el = jsx("input", {
+        type: "checkbox",
+        disabled: true,
+        checked: true,
+      });
+      const html = s.serialize(el);
+      expect(html).toContain("disabled");
+      expect(html).toContain("checked");
+      expect(html).not.toContain('disabled="true"');
+    });
+
+    it("omite atributos booleanos false", () => {
+      const el = jsx("input", { type: "checkbox", disabled: false });
+      expect(s.serialize(el)).not.toContain("disabled");
+    });
+
+    it("serializa style como objeto", () => {
+      const el = jsx("div", {
+        style: { backgroundColor: "red", fontSize: "16px" },
+      });
+      const html = s.serialize(el);
+      expect(html).toContain("background-color: red");
+      expect(html).toContain("font-size: 16px");
+    });
+
+    it("escapa el contenido de texto", () => {
+      const el = jsx("p", { children: '<script>alert("xss")</script>' });
+      const html = s.serialize(el);
+      expect(html).not.toContain("<script>");
+      expect(html).toContain("&lt;script&gt;");
+    });
+  });
+
+  describe("componentes funcionales", () => {
+    it("serializa componentes funcionales simples", () => {
+      const Greeting = ({ name }: { name: string }) =>
+        jsx("p", { children: `Hello, ${name}!` });
+
+      const el = jsx(Greeting as never, { name: "James" });
+      expect(s.serialize(el)).toBe("<p>Hello, James!</p>");
+    });
+
+    it("serializa componentes anidados", () => {
+      const Card = ({ children }: { children: JamxNode }) =>
+        jsx("div", { className: "card", children });
+
+      const el = jsx(Card as never, {
+        children: jsx("p", { children: "Content" }),
+      });
+
+      expect(s.serialize(el)).toBe('<div class="card"><p>Content</p></div>');
+    });
+  });
+
+  describe("Fragment", () => {
+    it("serializa Fragment sin wrapper", () => {
+      const el = jsx(Fragment as never, {
+        children: [
+          jsx("li", { children: "Item 1" }),
+          jsx("li", { children: "Item 2" }),
+        ],
+      });
+
+      expect(s.serialize(el)).toBe("<li>Item 1</li><li>Item 2</li>");
+    });
+  });
+
+  describe("arrays de children", () => {
+    it("serializa múltiples children", () => {
+      const el = jsx("ul", {
+        children: [
+          jsx("li", { children: "A" }),
+          jsx("li", { children: "B" }),
+          jsx("li", { children: "C" }),
+        ],
+      });
+
+      expect(s.serialize(el)).toBe("<ul><li>A</li><li>B</li><li>C</li></ul>");
+    });
+  });
+});

package/tsconfig.json

@@ -0,0 +1,15 @@
+{
+  "extends": "../../tsconfig.base.json",
+  "compilerOptions": {
+    "rootDir": "src",
+    "outDir":  "dist",
+    "tsBuildInfoFile": "dist/.tsbuildinfo",
+    "jsx":           "react-jsx",
+    "jsxImportSource": "@jamx-framework/renderer"
+  },
+  "include": ["src/**/*"],
+  "references": [
+    { "path": "../core" }
+  ],
+  "exclude": ["node_modules", "dist", "tests"]
+}

package/vitest.config.ts

@@ -0,0 +1,4 @@
+import { defineConfig } from "vitest/config";
+export default defineConfig({
+  test: { passWithNoTests: true },
+});