Simple HTML Element

import SimpleHTMLElement from "@tsukina-7mochi/simple-html-element";

const element = new SimpleHTMLElement("div", {}, ["hello"]);
console.log(`${element}`);

import SimpleHTMLElement from "@tsukina-7mochi/simple-html-element";

// empty <div> element
new SimpleHTMLElement("div");

// empty <div> element with attributes
new SimpleHTMLElement("div", { id: "my-div" });

// <div> element with children
new SimpleHTMLElement("div", {}, [
  "text node",
  new SimpleHTMLElement("div");
]);

// create from init object
new SimpleHTMLElement({
  tag: "div",
  attributes: { id: "my-div" },
  children: [
    "text node",
    { tag: "div", children: "nested init object is allowed" },
  ],
});

const anchor = new SimpleHTMLElement(
  "a",
  { href: "https://github.com/Tsukina-7mochi/simple-html-element" },
  ["Simple HTML Element - GitHub"],
);

assertEquals(
  anchor.toString(),
  "<a href="https://github.com/Tsukina-7mochi/simple-html-element">Simple HTML Element - GitHub</a>",
);

const menu = [
  { title: "Page 1", href: "./page1.html" },
  { title: "Page 2", href: "./page2.html" },
  { title: "Page 3", href: "./page3.html" },
];
const menuList = new SimpleHTMLElement({
  tag: "ul",
  children: menu.map(({ title, ...attributes }) => ({
    tag: "a",
    attributes,
    children: title,
  })),
});

assertEquals(
  menuList.toString(),
  "<ul><li><a href="./page1.html">Page 1</a></li><li><a href="./page2.html">Page 2</a></li><li><a href="./page3.html">Page 3</a></li></ul>",
);