@akbr/hyperaxe
v0.0.2
Published
Enchanted hyperscript weapon.
Downloads
5
Readme
Modified to rely on @akbr/hyperscipt.
HyperAxe
An enchanted hyperscript weapon.
npm install @akbr/hyperaxevar { body, h1 } = require("hyperaxe");
body(h1("hello world"));
// => <body><h1>hello world</h1></body>Usage
Exports all HTML tags.
var { a, img, video } = require("hyperaxe");
a({ href: "#" }, "click");
// <a href="#">click</a>
img({ src: "cats.gif", alt: "lolcats" });
// <img src="cats.gif" alt="lolcats">
video({ src: "dogs.mp4", autoplay: true });
// <video src="dogs.mp4" autoplay="true"></video>Default export accepts a tag and returns an element factory.
var x = require("hyperaxe");
var p = x("p");
p("over 9000");
// <p>over 9000</p>CSS shorthand works too.
var x = require("hyperaxe");
var horse = x(".horse.with-hands");
horse("neigh");
// <div class="horse with-hands">neigh</div>Makes creating custom components easy.
var x = require("hyperaxe");
var siteNav = (...links) =>
x("nav.site")(
links.map((link) => x("a.link")({ href: link.href }, link.text))
);
x.body(
siteNav({ href: "#apps", text: "apps" }, { href: "#games", text: "games" })
);
// <body>
// <nav class="site">
// <a class="link" href="#apps">apps</a>
// <a class="link" href="#games">games</a>
// </nav>
// </body>Example
Here's a counter increment example using nanochoo:
var { body, button, h1 } = require("hyperaxe");
var nano = require("nanochoo");
var app = nano();
app.use(store);
app.view(view);
app.mount("body");
function view(state, emit) {
return body(h1(`count is ${state.count}`), button({ onclick }, "Increment"));
function onclick() {
emit("increment", 1);
}
}
function store(state, emitter) {
state.count = 0;
emitter.on("increment", function (count) {
state.count += count;
emitter.emit("render");
});
}API
hyperaxe
hyperaxe(tag) => ([props], [...children]) => HTMLElementtagstring - valid HTML tag name or CSS shorthand (required)propsobject - HTML attributes (optional)childrennode, string, number, array - child nodes or primitives (optional)
Returns a function that creates HTML elements.
The factory is variadic, so any number of children are accepted.
x(".variadic")(
x("h1")("hi"),
x("h2")("hello"),
x("h3")("hey"),
x("h4")("howdy")
);Arrays of children also work.
var kids = [
x("p")("Once upon a time,"),
x("p")("there was a variadic function,"),
x("p")("that also accepted arrays."),
];
x(".arrays")(kids);In a browser context, the object returned by the factory is an HTMLElement object. In a server (node) context, the object returned is an instance of html-element. In both contexts, the stringified HTML is accessible via the outerHTML attribute.
hyperaxe[tag]
All HTML tags are attached to hyperaxe as keys.
They return the same function as described above, with the tag argument prefilled.
Think of it as a kind of partial application.
The main motivation for doing this is convenience.
var { p } = require("hyperaxe");
p("this is convenient");You can pass raw HTML by setting the innerHTML property of an element.
var { div } = require("hyperaxe");
div({ innerHTML: "<p>Raw HTML!" });hyperaxe.createFactory(h)
Creates a hyperaxe element factory for a given hyperscript implementation (h).
If you use another implementation than hyperscript proper, you can exclude that dependency by using require('hyperaxe/factory'). For the time being, no other implementations are tested though, so wield at your own peril!
hyperaxe.getFactory(h)
Same as createFactory, except it only creates a new factory on the first call and returns a cached version after that.
Enchantments
- Summons DOM nodes.
- +1 vs. virtual DOM nodes.
- Grants Haste.
See Also
This library's approach and API are heavily inspired by reaxe.
License
Axe image is from emojidex.