Guide

Hullo JS

Github Chat

Search…

Hullo JS

Hullo 👋 core

Hullo 👋 browser

Hullo 👋 DOM

Hullo 👋 Node

Guide

Let's start with most minimum application:
import { mount, html } from '@hullo/dom'
​
mount(
  document.getElementById('root'),
  html.div({})
);
All it does is to mount the application into a DOM Node provided as first argument. The second argument of mount function is what the application actually is. Here is a div with no properties.
Let's extract the application to another component, so we can make it more complex more easily.
mount(
  document.getElementById('root'),
  App()
);
​
function App() {
  return html.div({});
}
With this you can see that components in Hullo are nothing more than plain functions. Although App function is inside parenthesis after mount, App function is not the argument of that function - App function execution result is.
Still, That's no application. Two things remain to be explain that hold you now off.
Customizing properties of an element is done through first argument of any html.* function. Attributes, properties, style (as object, otherwise it is just an attribute) and events are set in respective subcategories.
html.*
This will set the background of the element to black.
function App() {
  return html.div({
    style: { background: 'black' }
  });
}
A property might be a stream. Let's fill the node with a single digit that changes every second.
import { map, interval } from '@hullo/core'
​
function App() {
  return html.div({
    style: { background: 'black' },
    props: {
      innerText:
        interval(1000)
          .pipe(map(n => (n % 10).toString()))
    }
  });
}
interval
|> map
Structure is built by providing a list of children to a second argument. It is an optional argument and just as other properties can be a stream of lists of children elements.
This adds two div nodes to application root element. One displays text "a" and the other - "b".
function App() {
  return html.div({
    style: { background: 'black' },
  }, [
    html.div({ props: { innerText: 'a' } }),
    html.div({ props: { innerText: 'b' } }),
  ]);
}
That is all that @hullo/dom adds to the ecosystem. Mix and match other tools from @hullo/core and @hullo/browser to enable yourself to work with Hullo to full extent. You'll most likely use an atom to maintain application state and channel to broadcast events.

Hullo 👋 DOM - Previous

Intro to DOM

Next - Hullo 👋 DOM

API

Last modified 3yr ago

Copy link