MiniBOB.js

Directives

minibob-mark

<p>
    <span>Hello </span><span minibob-mark="name"><span>
</p>

minibob-bind

<input minibob-bind="name" />

minibob-click

<button minibob-click="methodName">Click</button>

minibob-attr

<div minibob-attr="name"></div>

Methods

import { startMiniBOB, getData, setData, setMethods, setEffect } from "minibob";

startMiniBOB

startMiniBOB();

getData

console.log(getData("name"));

setData

setData({
    name: "bob"
})

setMethods

setMethods({
    add: () => {
        setData({
            age: getData("age") + 1
        })
    },
    sub: () => {
        setData({
            age: getData("age") - 1
        })
    }
});
        

setEffect

setEffect({
    age: (_new, _old) => {
        if (_new === 18) {
            setData({
                msg: "Welcome to adult world !"
            })
        }
    }
});