What is chetsbull?

Chetsbull is a small library which provides a wrapper for your dom. Which means, it will grab html elements and set event listeners for you based on data attributes.

Make use of the attributes

<div data-mount="app">
  <span data-view="text"></span>
  <button data-action="click.setText">Set Text</button>
</div>

Create your instance

const app = new Chetsbull({
  target: "app",
  handlers: {
    setText({ event, view }) {
      event.preventDefault();
      view.text.innerHTML = "Hello World.";
    },
  },
  debug: true,
});

What else does it do?

Glad you asked! Chetsbull allows you to write custom plugins and inject into the instance, besides custom plugins we also provide or own plugins. Which makes it a great library for any project really.

official plugins:

import { WatchDOMContent } from "chetsbull";

experimental plugins:

import { experimental } from "chetsbull";
const { AuthPlugin, InjectComponentsPlugin, StatePlugin } = experimental;

const app = new Chetsbull({
  target: "app",
  plugins: [new WatchDOMPlugin(config)],
});

What does it solve?

It's not aimed to be like any of the SPA frameworks, instead it's main objective is to make building SSR applications easier where you need just a little bit of javascript here and there, or to write quick prototypes. However it does not mean that it can't be used for bigger projects.

API

quick reference

• myHandler({ event, ...context })
• app.on('some-event', ({ payload, ...context }))

.on(eventName, callback)

Every instance makes use of an eventBus, by creating plugins you will be able to register new events and listen to them!

// this event becomes available with the WatchDOMPlugin!
app.on("dom-mutation", ({ payload, ...context }) => console.log(payload));

Context

The context object by default contains:

• view
• logger
• eventBus

But you can expand on it with plugins! Plugins are allowed to register new methods/properties to the context.

Attributes

• data-mount

<div data-mount="app"></div>

Every chetsbull instance requires to be mounted. Specify this on any element. The mounted element will also be available within the View. So there's no need for the data-view attribute.

• data-action<action, handler>

<div data-action="input.handleInput"></div>

This will add an input event listener on the given element which will invoke handleInput when triggered. We specifiy handleInput inside our Chetsbull instance under the key handlers.

• data-view

<div data-view="myElement"></div>

Adds the element to the "view" which is part of the Context object.

Plugins

WatchDOMContent

Automatically adds and deletes event listeners on dom change.

.on()

• 'dom-mutation'

AuthPlugin (experimental, but great example of its limitations)

Does not make any requests but keeps track of the user object for you.

Context

• authenticated()
• login({ username })
• toggleElements(elementA, elementB, className)

Handlers

No need to add handlers to your instance.

• Logout()

.on()

• 'auth-logged-in'
• 'auth-logged-out'

Create a custom plugin

import { Plugin } from "chetsbull";

class CustomPlugin extends Plugin {
  constructor() {
    super();
    // Required
    this.name = "CustomPlugin";
  }

  // gains access to the entire chetsbull instance
  async init({ eventBus, actionHandler, context }) {
    context.register("myFunction", this.myFunction.bind(this));
    eventBus.register("cool-event");
    actionHandler.register("myHandler", this.handleMagic.bind(this));
  }

  myFunction() {
    return 1;
  }

  handleMagic({ event, ...context }) {
    console.log(event);
  }
}

And use it like this:

const customPlugin = new CustomPlugin();

const app = new Chetsbull({
  target: "app",
  plugins: [customPlugin],
});