fhtml
v0.0.4
Published
Never write HTML again. (WIP)
Downloads
10
Readme
fhtml
Never write HTML again.
Over the years, the way we dealt with HTML was with new templating engines and languages. More recently, language transformers enabled another approach, melding HTML inside code. fhtml is yet another aproach to dealing with the failing pile of garbage that is HTML.
The goal is to eliminate ever working with angle brackets or HTML as raw string data.. without adding a new language. Native functions are made available to procedurally produce HTML for you, and it's testable and extendable. A future 'fhtml-bootstrap' module can provide an easy to use set of methods for their components and workflow.
How does it work?
An instance of fhtml is like an HMTL builder. Create an instance of fhtml, and call methods on it to generate your component or page. When you want the output, call render(). It also supports method chaining.
The simplest expression of it might look something like this:
let a = new fhtml()
a.html().body().h1('Hello, World')
// '<html><body><h1>Hello, World</h1>'Most tags provide a few methods:
1. The tag name itself, i.e. html:
// function html(attributes)let a = new fhtml()
a.html({ 'lang': 'en' }) // or a.html('lang="en"')
// a.render() = '<html lang="en">'2. The tag name with a capital X at the end... Yeah. So far this is the first thing people cringe at. Here's the thing, you need a way to close the tag later.
// function htmlX()let a = new fhtml()
a.div().ul()
a.ulX().divX()
// a.render() = '<div><ul></ul></div>'3. The tag name with a capital F at the end... Help me find a better, easier way to notate that this is a Full tag, with content provided, and closes itself.
// function htmlF(content, attributes)let a = new fhtml()
let b = new fhtml()
b.bodyF('w00', { class: 'wrapper' })
a.htmlF(b)
// a.render() = '<html><body class="wrapper">w00</body></html>'4. The tag name with a capital V at the end... Void element (or self-
closing tag). Used in methods like script as a helper.
// function brV(attributes)let a = new fhtml()
a.brV()
// a.render() = '<br/>'Special cases:
script is overridden with a custom method: script('/path/to/js')
h1, title, p and other tags default to the Full tag method. h1('Headline')
When using a Full tag, you can pass an fhtml object as the content.
For special behavior, the root tags are always available:
tag(tag, attributes)
tagX()
tagF(tag, content, attributes)
tagV(tag, attributes)
Why?
I'm starting a new side project, something very important to me, and it's going to involve a lot of websites, a lot of HTML output. I don't want there to be a single .html file in my repository. I want to build fhtml for my own purposes. If it's useful to others, great!, and I'll be open to issue discussion and pull requests, but that's not my top priority.
What's the status?
Just getting started. It's way too early for anyone to use this, I'm mostly writing this to procrastinate actually working on it, and to help myself talk through the goals and the choices. More to come.
github: gfosco/fhtml
npm: fhtml