Complete Rewrite

As of version 2.0.0, Haipa has been completely rewritten, including a completely new syntax. As I was using Haipa more and more for side projects, I quickly found a two glaring pain points I wasn't happy with.

If you'd like to read the original readme from version 1, here ya go.

Problem 1. Imports

In Haipa 1, everything was a loose function you imported by destructuring either from the base haipa import. For example:

const { tags, attr } = require('haipa');
const { html, head, body, div } = tags;
const { classes, id } = attr;

As you can see, these imports quickly blow up in size when making a pretty standard template and I hated it. For version 2, I switched to importing a complete haipa function once, with all of the related functions internally. This was something I was deliberately trying to avoid with the design of version 1 as I thought it'd be cumbersome, but combined with the syntax changes I'll go over below, the flow of writing haipa code improved quite a bit.

Problem 2. Syntax

Brackets! Haipa's basic tag structure was a function that took two arrays.

Ex: div([], [])

This means there are brackets littered absolutely everywhere, which I quickly found out was both a pain to write and read. In Haipa 2, everything is just function call on a base haipa object that you pass into a parent tag.

For example:

const temp = h().html(h()
	.body(h()
		.id('test')
		.div()
	)
)

In this example, we create a very basic html document, with a body that has the id, 'test', and an internal div child. The order actually doesn't matter either, putting the div before the id call will still result in the same structure (Order of child tags is still preserved). However, that's mainly an accidental result of implementation and I don't think it should typically used.

Casual 3.0 Update

Haipa has been completely rewritten again in version 3.0. This time the syntax remains the same, but the implementation is has been cleaned up and allows for a few features I've meant to square away for a while. Also I managed to almost halve the library size using some typescript decorator tricks.