Skip to content

rodydavis/object-dom

BranchesTags

Repository files navigation

object-dom

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

styled with prettier Tests Published on npm

  • âś… 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

Tag Class Description
<a> A Defines a hyperlink
<abbr> Abbr Defines an abbreviation or an acronym
<address> Address Defines contact information for the author/owner of a document
<area> Area Defines an area inside an image map
<article> Article Defines an article
<aside> Aside Defines content aside from the page content
<audio> Audio Defines embedded sound content
<b> B Defines bold text
<base> Base Specifies the base URL/target for all relative URLs in a document
<bdi> Bdi Isolates a part of text that might be formatted in a different direction from other text outside it
<bdo> Bdo Overrides the current text direction
<blockquote> Blockquote Defines a section that is quoted from another source
<body> Body Defines the document's body
<br> Br Defines a single line break
<button> Button Defines a clickable button
<canvas> Canvas Used to draw graphics, on the fly, via scripting (usually JavaScript)
<caption> Caption Defines a table caption
<cite> Cite Defines the title of a work
<code> Code Defines a piece of computer code
<col> Col Specifies column properties for each column within a <colgroup> element
<colgroup> Colgroup Specifies a group of one or more columns in a table for formatting
<data> Data Adds a machine-readable translation of a given content
<datalist> Datalist Specifies a list of pre-defined options for input controls
<dd> Dd Defines a description/value of a term in a description list
<del> Del Defines text that has been deleted from a document
<details> Details Defines additional details that the user can view or hide
<dfn> Dfn Specifies a term that is going to be defined within the content
<dialog> Dialog Defines a dialog box or window
<div> Div Defines a section in a document
<dl> Dl Defines a description list
<dt> Dt Defines a term/name in a description list
<em> Em Defines emphasized text
<embed> Embed Defines a container for an external application
<fieldset> Fieldset Groups related elements in a form
<figcaption> Figcaption Defines a caption for a <figure> element
<figure> Figure Specifies self-contained content
<footer> Footer Defines a footer for a document or section
<form> Form Defines an HTML form for user input
<h1> H1 Defines HTML headings
<h2> H2 Defines HTML headings
<h3> H3 Defines HTML headings
<h4> H4 Defines HTML headings
<h5> H5 Defines HTML headings
<h6> H6 Defines HTML headings
<head> Head Contains metadata/information for the document
<header> Header Defines a header for a document or section
<hr> Hr Defines a thematic change in the content
<html> Html Defines the root of an HTML document
<i> I Defines a part of text in an alternate voice or mood
<iframe> Iframe Defines an inline frame
<img> Img Defines an image
<input> Input Defines an input control
<ins> Ins Defines a text that has been inserted into a document
<kbd> Kbd Defines keyboard input
<label> Label Defines a label for an <input> element
<legend> Legend Defines a caption for a <fieldset> element
<li> Li Defines a list item
<link> Link Defines the relationship between a document and an external resource (most used to link to style sheets)
<main> Main Specifies the main content of a document
<map> Map Defines an image map
<mark> Mark Defines marked/highlighted text
<meta> Meta Defines metadata about an HTML document
<meter> Meter Defines a scalar measurement within a known range (a gauge)
<nav> Nav Defines navigation links
<noscript> Noscript Defines an alternate content for users that do not support client-side scripts
<object> Obj Defines a container for an external application
<ol> Ol Defines an ordered list
<optgroup> Optgroup Defines a group of related options in a drop-down list
<option> Option Defines an option in a drop-down list
<output> Output Defines the result of a calculation
<p> P Defines a paragraph
<param> Param Defines a parameter for an object
<picture> Picture Defines a container for multiple image resources
<pre> Pre Defines preformatted text
<progress> Progress Represents the progress of a task
<q> Q Defines a short quotation
<rp> Rp Defines what to show in browsers that do not support ruby annotations
<rt> Rt Defines an explanation/pronunciation of characters (for East Asian typography)
<ruby> Ruby Defines a ruby annotation (for East Asian typography)
<s> S Defines text that is no longer correct
<samp> Samp Defines sample output from a computer program
<script> Script Defines a client-side script
<section> Section Defines a section in a document
<select> Select Defines a drop-down list
<small> Small Defines smaller text
<source> Source Defines multiple media resources for media elements (<video> and <audio>)
<span> Span Defines a section in a document
<strong> Strong Defines important text
<style> Style Defines style information for a document
<sub> Sub Defines subscripted text
<summary> Summary Defines a visible heading for a <details> element
<sup> Sup Defines superscripted text
<svg> Svg Defines a container for SVG graphics
<table> Table Defines a table
<tbody> Tbody Groups the body content in a table
<td> Td Defines a cell in a table
<template> Template Defines a container for content that should be hidden when the page loads
<textarea> Textarea Defines a multiline input control (text area)
<tfoot> Tfoot Groups the footer content in a table
<th> Th Defines a header cell in a table
<thead> Thead Groups the header content in a table
<time> Time Defines a specific time (or datetime)
<title> Title Defines a title for the document
<tr> Tr Defines a row in a table
<track> Track Defines text tracks for media elements (<video> and <audio>)
<u> U Defines some text that is unarticulated and styled differently from normal text
<ul> Ul Defines an unordered list
<var> Var Defines a variable
<video> Video Defines embedded video content
<wbr> Wbr Defines a possible line-break

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>

About

HTML Object Declarative Dom

rodydavis.github.io/object-dom/

Topics

virtual-dom typescript html5 dom declarative-ui

Resources

Readme

License

View license

Code of conduct

Code of conduct
Activity

Stars

21 stars

Watchers

3 watching

Forks

0 forks
Report repository

Releases 2

0.7.0 Latest
May 24, 2021
+ 1 release

Packages

No packages published

Languages