☣️ This is a prototype!

Don't go putting this into production.
I'm not super keen on the API yet. Breaking changes will be minors and everything else is a patch.
Until v1. Then I'll keep a CHANGELOG and stick to proper semver.

I'm a Ramblin' Man

Waylon 🌵

HTML string helpers, particularly great in Node.js string template literals.
Lonesome, On'ry, and Mean
waylon on npmjs.org »

Entities: Item • List • Collection

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"]);

Waylon Jennings
Willie Nelson
Kris Kristofferson
Johnny Cash

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

Waylon
Willie
Kris
Johnny

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

1937
1933
1936
1932

const $table = highwaymen.table();

first	last	born
Waylon	Jennings	1937
Willie	Nelson	1933
Kris	Kristofferson	1936
Johnny	Cash	1932

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

Jennings, Waylon
Nelson, Willie
Kristofferson, Kris
Cash, Johnny

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

Waylon Jennings: 1937
Willie Nelson: 1933
Kris Kristofferson: 1936
Johnny Cash: 1932

FAQ

Why "waylon"?

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!

...

It's just strings.
Plus, I've never been to Spain.

tbeseda/waylon