kiricon/blaze-html

A javascript framework

Blaze-HTML

A 3kb micro framework for building reactive custom elements, based on lit-html

Installation

npm i blaze-html

Quick Start

import { html, Blaze, register, linkState } from 'blaze-html';

// Extend the Blaze class to build a custom element
class BlazeInput extends Blaze {
    // Define our default state in the constructor
    constructor() {
        super();
        this.setState({
            text: "default text"
        });
    }
    
    // Defiine our html template using template literals
    template(props, state) {
        return html`
            ${state.text} <br/>
            <input on-input=${linkState(this, 'text')} />
        `;
    }
}

// Register our custom element to the window
register(BlazeInput);

Now you can use your custom elememnt anywhere in your web page.

<blaze-input></blaze-input>

Custom Elements

To create a custom element you need to import Blaze & html from blaze-html

• Blaze is our custom element's base class that we will inherit all our syntax sugar from

• html is our template literal's tag, that will tell our text editor / IDE to identify the text as html

To register the custom element to the window you need to import register and pass the class in as an argument.

import {Blaze, html, register} from 'blaze-html';

class CoolButton extends Blaze {
    // Display a button that says "Click Me" in it
    template() {
        return html`
            <button on-click=${this.sayHello}>Click Me</button>
        `;
    }

    // Action that is fired when a user clicks the button
    sayHello() {
        alert('Hello World');
    }
}
// Register the element to the window as cool-button
register(CoolButton);
// or if you want to specify the name yourself
register(CoolButton, 'uncool-button');

Properties and State

Our base class Blaze has the properties props & `state.

• props: an object containing the values of all custom element attributes
• state: a watched object, what when updated will re-render the custom element's template

Any time state is updated through the setState method or the attributes on the element are changed, the element will re-render the values in real time.

import {Blaze, html, register} from 'blaze-html';

class UserDisplay extends Blaze {
    constructor() {
        super();
        this.setState({
            status: 'Active'
        });
    }
    
    template(props, state) {
        return html`
            ${props.firstName} ${props.lastName}<br/>
            ${state.status}
        `;
    }
}

register(UserDisplay);

<user-display firstName="John" lastName="doe"></user-display>

This will display

John Doe
Active

blaze-html's Issues

Dynamic properties not working correctly when rendered by lit-html

Hi!

Really liking the idea of this project that you made, but I was facing some weird behavior when I tried to render a custom component in an other custom component. It looked something like this:

import {Blaze, html, register} from 'blaze-html';

class UserDisplay extends Blaze {
  template(props) {
    return html`
      <h1>Hello ${props.name}!</h1>
    `;
  }
}
register(UserDisplay);


class MyPage extends Blaze {
  template() {
    const name = 'Jesper'

    return html`
      <h1>Welcome to my page!</h1>
      <user-display name=${name}></user-display>
    `;
  }
}
register(MyPage);

My HTML looks like this

<user-display name="Jesper"></user-display>
<br>
<my-page></my-page>

The first one is rendered properly, but second one is not finding the name-property. I think this is a problem with the way lit-html creates their components but I'm not sure. Have you ever come across this problem or know why it behaves this way?