strdom

Transform Object into html string

Benefit:

• reusable views
• modules based
• easy maintance

Basic Syntax

just import it:

import "strdom";

or load via script tag

wrapper.innerHTML = {
  h1: { text: "This is H1" },
}.strdom();

// or

wrapper.innerHTML = strdom({
  h1: { text: "This is H1" },
});

Just wrap all into one object use text attribute for innerText and html to innerHTML

html attributes

{
    h1:{
        class:"wrapper col-12",
    }
}.strdom() // <h1 class="wrapper col-12"></h1>

element with the same tag name

since strdom use object, we can not use same attributes name

every attributes should be unique name or else it will be replaced

{
  ul: {
    li:{text:"one"}, // will be replaced
    li:{text:"two"},
  }
}

use array instead

{
  ul: {
    li: [{ text: "one" }, { text: "two" }],
  }
}

Tag attributes

to forced object use specific tag name, use tag attribute. For example when need diiferent tag name between array items

{
  p: [
    { text: "this is the first" },
    { text: "this is the 2nd" },
    { tag: "br" }, //different tag name in array
    { text: "this is the 3rd" },
  ],
}

Also we can naming our element:

{
    PersonList:{
        tag:"tbody",
        ...
    },
}

Comment

js comment:

{
  // something
  h1: {
  }
  /*
    multi
    */
}

comment tag:

unnamed

{
  comment: {
    text: "this is a comment";
  }
}

named

{
    nextFeatures:{
        tag:"comment",
        text:"something.."
    }
}

nested element

{
  div: {
    span: {
    }
  }
}

partial

import header from "./header.js"

{
    header,
    div:{
        id:"content"
    }
}

looping