boltjs-preview/index.js

The modern web framework to build comprehensive web apps with native speeds

//contains the main files, like states, events and so on.

//this is a state indicator based on closures
export function State(initial) {

    var state = initial
    var updateCandidates = [] //the functions that are required to run on update

    //to reset the state variable to something else
    function update(new_state) {
        state = new_state
        //basically udpdate, now run the candidates
        updateCandidates.forEach(i => i())
    }

    //to get the variable itself
    function get() {
        return state
    }

    //assing some function as state
    function onUpdate(fn) {
        updateCandidates.push(fn)
    }

    return {
        update,
        get,
        onUpdate
    }
}

//this function is responsible for re-rendering
//the inner child components if there is some sort
//of state update

export function Component(callback, ...states) {
    //first, a component is also a container, hence it
    //needs to create one
    var component = document.createElement("div")
    //now, if states are not undefined or null, we can go on
    //and work with them!!
    states.forEach(i => i.onUpdate(() => {
        //this basically means for each state this component is bound to,
        //make sure the componet updates whenever the state does.
        component.replaceChildren(callback()) //callback is a function lol
    }))

    component.replaceChildren(callback())

    return component
}

//now this one is easy, just render them lol
export function render(id, app) {
    document.getElementById(id)
    .replaceChildren(app) //make sure the App returns a valid HTML Element

    new MutationObserver((mutations) => {
        Object.keys(mutations).forEach(i => {
            mutations[i].removedNodes.forEach(node => {
                if ( node._bolt_remove_api != undefined ) {
                    node._bolt_remove_api()
                }
            })
        })
    }).observe(app, { childList: true, subtree: true })
}

//Now we are going to define some Property functions, such as
//those which will take a component, do something and then
//return the component

//this one will add properties to any component
export function attribute(child, prop = {}) {
    Object.keys(prop).forEach(i => {
        child.setAttribute(i, prop[i])
    })

    return child
}

//this one will add events to any component
export function event(child, events = {}) {
    Object.keys(events).forEach(i => {
        child.addEventListener(i, (e) => {
            events[i](e)
        })
    })

    return child
}

//this one will add some ID to any component
export function id(child, id = "") {
    child.id = id
    return child
}

//this is more like useEffect on react. This will
//run the callback, and also will run it's return value
//if there is some sort of like finishing touches.

//the dependency list will have the name of all the states
//that are needed to be watched on to re-run this callback
//if they are updated
export async function onLoad(callback, ...dependency) {
    callback()
    dependency.forEach(state => {
        state.onUpdate(callback)
    })
}

export function onRemove(component, callback) {
    component._bolt_remove_api = callback
    return component
}

//this adds a list of classname to the class
export function Class(component, ...classes) {
    return attribute(
        component,
        {
            "class": classes.join(" ")
        }
    )
}

export function When(condition, if_true, if_false) {
    if ( condition ) {
        return if_true
    } else {
        return if_false
    }
}