Install

npm i waylon

Usage

📝 Some goals, thoughts, notes:

• Class methods always return a string of HTML
• User never has to author a bracketed HTML tag
• $ generally denotes "this thing is HTML"

Item

When you've got a single object: Item

import { Item } from "waylon";

const data = { first: "Kris", last: "Kristofferson", born: 1936 };

const kris = new Item(data);

const $link = kris.link("https://en.wikipedia.org/wiki/Kris_Kristofferson", data.first);

Kris

const dataAttrs = kris.dataAttrs();

data-first="Kris" data-last="Kristofferson" data-born="1936"

const attrs = kris.attrs();

first="Kris" last="Kristofferson" born="1936"

Suggestions? File an issue.

List

Suggestions? File an issue.

Collection

When you've got an array of objects: Collection

import { Collection } from "waylon";

const data = [
  { first: "Waylon", last: "Jennings", born: 1937 },
  { first: "Willie", last: "Nelson", born: 1933 },
  { first: "Kris", last: "Kristofferson", born: 1936 },
  { first: "Johnny", last: "Cash", born: 1932 },
];

const highwaymen = new Collection(data);

🎶 I Ain't Living Long Like This...

const $list = highwaymen.list(["first", "last"]);

const $ul = highwaymen.ul("first");

const $ol = highwaymen.ol("born");

const $table = highwaymen.table();

const $listSeparated = highwaymen.list(["last", "first"], ", ");

const $listTemplated = highwaymen.list(
  ({ first, last, born }) => `${first} ${last}: ${born}`,
);

FAQ

waylon is pretty scrappy. No dependencies, simple, and straight forward. Not necessarily revolutionary, but not going to conform to the mainstream ~~Nashville Sound~~ way of making HTML.

Also, I was squatting the name on npmjs.org because I'm a big fan of Waylon Jennings. But I don't want to be that guy and just hold a great name. So here we are!