Views

Writing a view in Bulba can be done with either HTML strings or Snabbdom JSX.

String View

This is the default configuration and easiest way to use Bulba. It enables you to write HTML in your components as string templates.

Simple example:

import { BulbaElement, register } from "@bulba/element"
import { Renderer } from "@bulba/template"

class FirstComponent extends BulbaElement(Renderer) {
  render() {
    return `<p>What a cool component</p>`
  }
}

register("first-component", FirstComponent)

Both template literals (untagged) and regular strings are valid.

Snabbdom JSX View

In this mode, JSX is written with Snabbdom.

First, you'll need an extra plugin:

$ npm i @babel/plugin-transform-react-jsx

Refer to Snabbdom's instructions for adding this to your config.

You might also need to use a babel plugin for your build tool (e.g., @rollup/plugin-babel in Rollup or babel-loader for Webpack.).

Finally, write your component:

import { BulbaElement, register } from "@bulba/element"
import { Renderer, jsx, Fragment } from "@bulba/jsx"

class FirstComponent extends BulbaElement(Renderer) {
  render() {
    return (
      <p
        id="foo"
        className="bar"
        on-mouseenter={(e) => console.log(e.target.innerText)}
      >
        What a cool component
      </p>
    )
  }
}

register("first-component", FirstComponent)

Note: If you use eslint, you might need to exclude jsx and Fragment from the rule no-unused-vars. Otherwise you'll get warnings in every file.

Learn more about Snabbdom's JSX API in the modules section of their documentation.