htmlmodule

htmlmodule

HtmlModule is a library for creating user interfaces. It implements the "virtual DOM" approach and provides a convenient object-oriented API with a JavaScript-compatible syntax.

Unlike modern React, which has switched to a functional programming style and hooks, HtmlModule relies on the power of object-oriented programming and uses its advantages.

The library provides a set of components, each of which represents one of the HTML elements. These components can be extended by the developer to implement the necessary functionality.

One of the key features is the syntax for describing the component tree. It uses the "new" operator with the name of the component class. It looks natural and more convenient than JSX. No code transpiling is required.

In addition to presenting HTML elements, the library provides a set of components representing WAI-ARIA roles and attributes that help the developer create an accessible user interface.

Main Features

• The power of OOP
• Fast and effective DOM patching algorithm
• No JSX, but convenient JS-compatible syntax
• API to build your own high-level components
• WAI-ARIA role-based components to improve accessibility
• Automatic generation of the className based on inheritance
• Small footprint, 17KB after gzip

Documentation

• Getting started

Examples

Example of a simple authorization form:

import { HtmlForm, HtmlInput, HtmlButton } from 'htmlmodule'

class LoginForm extends HtmlForm
{
  static class = 'LoginForm'

  static defaultProps = { method : 'post' }

  state = {
    login : '',
    password : '',
  }

  render() {
    return [
      new HtmlInput({
        name : 'login',
        placeholder : 'Login',
        value : this.state.login,
        oninput : e => this.setState({ login : e.target.value }),
      }),
      new HtmlInput({
        type : 'password',
        name : 'password',
        placeholder : 'Password',
        value : this.state.password,
        oninput : e => this.setState({ password : e.target.value }),
      }),
      new HtmlButton('Login'),
    ]
  }
}

LoginForm.render({ action : '/login' }, document.body)

This code creates and processes a form with the appropriate DOM structure:

<form class="LoginForm" method="post" action="/login">
  <input name="login" placeholder="Login">
  <input type="password" name="password" placeholder="Password">
  <button>Login</button>
</form>

More complex examples:

• TodoMVC application (source)
• Tic-Tac-Toe game (source)

License

The MIT License (MIT)