object-dom v0.7.0

object-dom

Declarative dom with 1:1 mapping of objects and tags, typed css, reactive updates and no bundler needed.

• ✅ No Dependencies
• ✅ ES Modules
• ✅ Full Browser Support
• ✅ Full types for CSS
• ✅ Full types for DOM Events
• ✅ Full types for Attributes
• ✅ 100% Typescript

Supported Tags

https://www.w3schools.com/TAGS/default.ASP

Available Methods

• jsonTable
• render
• generateHtml
• parseHtml
• textContent

Getting Started

Functional Approach

<div id="root"></div>
<script type="module">
  import { Div, P, Button, Row, Column, render } from "object-dom";

  const label = new P({ text: "Hello World!" });
  const button = new Button({
    text: "Update",
    styles: { width: "100px" },
  });
  const app = new Div({
    children: [
      new Column({
        children: [
          label,
          button,
          new Row({
            styles: { padding: "10px" },
            children: ["A", "B", "C"],
          }),
        ],
      }),
    ],
  });
  button.addEventListener('click', () => {
     label.text = "New Update!";
  }, false);
  render(app, document.body.querySelector("#root"));
</script>

Class Approach

import { ObjectDom, Div, H1, Button, Row, Canvas } from "object-dom";

export class MyApp extends ObjectDom {
  render = () => {
    return new Div({
      children: [new H1({ text: "Counter Example" }), new Counter(), new CanvasExample()],
    });
  };
}

class Counter extends ObjectDom {
  value = 0;
  render() {
    return new Div({
      styles: { margin: "5px" },
      children: [
        `${this.value}`,
        new Row({
          children: [
            new Button({
              text: "-",
              styles: { width: "50px" },
              events: {
                click: () => {
                  this.value -= 1;
                  this.update();
                },
              },
            }),
            new Button({
              text: "+",
              styles: { width: "50px", marginLeft: "5px" },
              events: {
                click: () => {
                  this.value += 1;
                  this.update();
                },
              },
            }),
          ],
        }),
      ],
    });
  }
}

class CanvasExample extends ObjectDom {
  render() {
    return new Canvas({
      styles: { width: "200px", height: "200px" },
      onCreate: (node) => {
        const canvas = node as HTMLCanvasElement;
        const ctx = canvas.getContext("2d")!;

        // Create gradient
        const grd = ctx.createRadialGradient(75, 50, 5, 90, 60, 100);
        grd.addColorStop(0, "red");
        grd.addColorStop(1, "white");

        // Fill with gradient
        ctx.fillStyle = grd;
        ctx.fillRect(10, 10, 150, 80);
      },
    });
  }
}

render(new MyApp(), document.body.querySelector("#root"));

JSON Table

jsonTable(
  [
    {
      first_name: "John",
      last_name: "Smith",
      company: "N/A",
    },
    {
      first_name: "Steve",
      last_name: "Jobs",
      company: "Apple",
    },
    {
      first_name: "Bill",
      last_name: "Gates",
      company: "Microsoft",
    },
    {
      first_name: "Elon",
      last_name: "Musk",
      company: "Tesla",
    },
  ],
  { style: { margin: "10px" } }
);

Which renders the following html:

<table>
  <tr>
    <th>first_name</th>
    <th>last_name</th>
    <th>company</th>
  </tr>
  <tr>
    <td>John</td>
    <td>Smith</td>
    <td>N/A</td>
  </tr>
  <tr>
    <td>Steve</td>
    <td>Jobs</td>
    <td>Apple</td>
  </tr>
  <tr>
    <td>Bill</td>
    <td>Gates</td>
    <td>Microsoft</td>
  </tr>
  <tr>
    <td>Elon</td>
    <td>Musk</td>
    <td>Tesla</td>
  </tr>
</table>