object-dom

v0.7.0

Published

2 years ago

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

Downloads

0High
0Medium
0Low

rodydavis

object doc html tags web pdf print xml reactive

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

| 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>

Published

Vulnerabilities

Links

Maintainers

Keywords

Readme

object-dom

Supported Tags

Available Methods

Getting Started

Functional Approach

Class Approach

JSON Table