Temme usage

Usage

After installing Temme, usage is straightforward: describe the HTML structure you want as a JavaScript object, then pass that hierarchy to parse(...) along with a target HTML element.

Temme will validate the hierarchy, fill in missing defaults, resolve inheritance and references, and render the result into the target.

---

Browser example

Start with a host element:

<div id="target"></div>

Suppose you want to generate the equivalent of this HTML structure:

<h1 class="heading-1 bold">Interesting title.</h1>
<hr>
<div class="container">
  <p>Some random text.</p>
</div>
<hr>

With Temme, the hierarchy object would look like this:

const hierarchy = {
  childNodes: [
    {
      name: "h1",
      classes: ["heading-1", "bold"],
      content: {
        value: "Interesting title."
      }
    },
    {
      name: "hr"
    },
    {
      name: "div",
      classes: ["container"],
      childNodes: [
        {
          name: "p",
          content: {
            value: "Some random text."
          }
        }
      ]
    },
    {
      name: "hr"
    }
  ]
};

Then render it:

import { parse } from "temmejs";

const target = document.getElementById("target");

parse(hierarchy, target);

The resulting DOM becomes:

<div id="target">
  <h1 class="bold heading-1">Interesting title.</h1>
  <hr>
  <div class="container">
    <p>Some random text.</p>
  </div>
  <hr>
</div>

Note that Temme normalizes some values during parsing, such as sorting class arrays and filling in defaults.

---

Script tag example

Without a bundler, load the IIFE build, which exposes a Temme global:

<script src="https://cdn.jsdelivr.net/npm/temmejs/dist/temme.iife.js"></script>
<script>
  Temme.parse(hierarchy, document.getElementById("target"));
</script>

Or import the self-contained browser build from a module script:

<script type="module">
  import { parse } from "https://cdn.jsdelivr.net/npm/temmejs/dist/temme.browser.mjs";
</script>

---

CommonJS / Node-style import example

If you are using CommonJS:

const { parse } = require("temmejs");

If you are using ESM:

import { parse } from "temmejs";

In Node.js, Temme needs a DOM implementation such as happy-dom or jsdom to create the target element. Usage stays the same after import:

const target = document.createElement("div");

const hierarchy = {
  classes: ["red"]
};

try {
  parse(hierarchy, target);
}
catch (e) {
  console.error(e.name, e.message);
}

---

Using callbacks

Temme also supports optional callbacks for end-of-parse handling and per-node observation.

import { parse } from "temmejs";

const target = document.getElementById("target");

const hierarchy = {
  childNodes: [
    {
      name: "h1",
      content: {
        value: "Hello"
      }
    }
  ]
};

parse(
  hierarchy,
  target,
  (sanitizedHierarchy) => {
    console.log("Finished parsing:", sanitizedHierarchy);
  },
  (temmeId, nodeHierarchy) => {
    console.log("Parsed node:", temmeId, nodeHierarchy);
  }
);

---

Validation before parsing

If you want to validate a hierarchy before rendering it, use validate(...):

import { parse, validate } from "temmejs";

const result = validate({
  name: "section",
  classes: ["hero"]
});

if (result.valid) {
  parse(
    {
      name: "section",
      classes: ["hero"]
    },
    document.getElementById("target")
  );
}
else {
  console.error(result.error);
}

---

Parsing the returned hierarchy again

parse completes the hierarchy object in place and returns it. Parsing that object again renders the same tree: inheritance is applied once per object, so appended content isn't appended twice. Children added to it later are completed and resolved on the next parse.

---

More examples

For a concrete project example, refer to examples/index.html in the repository, and to the documentation website, which is itself generated with Temme.