sonnetjs/html

sonnetjs/html is a framework for building web applications with a focus on simplicity and performance with native feel. It is built on top of vanilla JavaScript.

Features

• Simple: sonnetjs/html is designed to be simple and easy to use. It is built on top of vanilla JavaScript and does not require any additional dependencies.

• Performance: sonnetjs/html is designed to be fast and lightweight. It is built with performance in mind and does not include any unnecessary features.

• Native feel: sonnetjs/html is designed to provide a native feel to web applications. It uses modern web technologies to provide a smooth and responsive user experience.

Usage

1. Run the following command to create a new SonnetJS project.

npx create-sonnet-app@latest

2. Change directory to the newly created project.

cd [my-sonnet-app]

3. Install the dependencies

npm i

4. Start the development server

npm run dev

Documentation

HTML Elements

sonnetjs/html provides a set of functions to create HTML elements. These functions return an object that represents the HTML element and provides chainable methods to set attributes, properties, and children.

import { div, h1, p } from '@sonnetjs/html';

const element = div()
  .id('container')
  .className('container')
  .children(
    h1().innerText('Hello, World!').get(),
    p().innerText('This is a paragraph.').get(),
  )
  .get();

Attributes and Properties

You can set attributes and properties of an HTML element using chainable methods.

import { a, img } from '@sonnetjs/html';

const element = a()
  .href('https://example.com')
  .target('blank')
  .children(img().src('https://example.com/image.jpg').alt('Image').get())
  .get();

Children

You can add children to an HTML element using children method.

import { div, h1, p } from '@sonnetjs/html';

const element = div()
  .children(
    h1().innerText('Hello, World!').get(),
    p().innerText('This is a paragraph.').get(),
  )
  .get();

Events

You can add event listeners to an HTML element using js method.

import { button } from '@sonnetjs/html';

const element = button()
  .innerText('Click me')
  .js((el) => {
    el.addEventListener('click', () => {
      console.log('Button clicked');
    });
  })
  .get();

Refs

You can create refs to an HTML element using ref method.

import { div, button, useRef } from '@sonnetjs/html';

let counter = 0;

const Component = () => {
  const divRef = useRef<HTMLDivElement>(null);

  return div()
    .children(
      button()
        .innerText('Click me')
        .js((el) => {
          el.addEventListener('click', () => {
            counter++;
            divRef.current.innerText = `Counter: ${counter}`;
          });
        })
        .get(),
      div().ref(divRef).innerText(`Counter: ${counter}`).get(),
    )
    .get();
};

License

sonnetjs/html is licensed under the MIT license.