jsonr.js

addEventListener('click', async function(event){
    const el = event.target

    if(el.hasAttribute('jsonr')){
        event.preventDefault()
        const response = await fetch(el.href)
        render(response, el)
    }
})

addEventListener('submit', async function(event){
    const form = event.target

    if(!form.hasAttribute('jsonr')){
        return
    }

    event.preventDefault()
    const url  = new URL(form.action)
    const body = new FormData(form)

    if(form.method.match(/POST/i)){
        var option = {method: form.method, body}
    }
    else{
        body.forEach((v, k) => url.searchParams.append(k, v))
    }

    const response = await fetch(url, option)
    render(response, form)
})


async function render(response, target){
    const mime = response.headers.get('Content-Type')
    if(mime?.includes('application/json')){
        [await response.json()].flat().forEach(act => evaluate(act, target))
    }
}

function evaluate(act, target){
    if(act.window){
        Object.assign(window, act.window)
    }
    if(act.document){
        Object.assign(document, act.document)
    }
    if(act.$){
        //node.getRootNode()
        var els = act.$.startsWith('*') ? document.querySelectorAll(act.$.slice(1)) : [document.querySelector(act.$)].filter(Boolean)
    }
    else{
        els = [target]
    }
    if(act.find){
        els = act.find.startsWith('*') ? target.querySelectorAll(act.find.slice(1)) : [target.querySelector(act.find)].filter(Boolean)
    }
    if(act.closest){
        els = [target.closest(act.closest)]
    }


    for(const el of els ?? []){
        if(act.escape === true){
            if     ('inner'   in act) el.innerText = act.inner
            else if('append'  in act) el.append(act.append)
            else if('prepend' in act) el.prepend(act.prepend)
            else if('before'  in act) el.before(act.before)
            else if('after'   in act) el.after(act.after)
            else if('replace' in act) el.replaceWith(act.replace)
        }
        else{
            if     ('inner'   in act) el.innerHTML = act.inner
            else if('append'  in act) el.insertAdjacentHTML('beforeend', act.append)
            else if('prepend' in act) el.insertAdjacentHTML('afterbegin', act.prepend)
            else if('before'  in act) el.insertAdjacentHTML('beforebegin', act.before)
            else if('after'   in act) el.insertAdjacentHTML('afterend', act.after)
            else if('replace' in act) el.outerHTML = act.replace
        }

        for(const [k, v] of Object.entries(act.attr ?? {})){
            v !== null ? el.setAttribute(k, v) : el.removeAttribute(k)
        }

        if(act.prop){
            Object.assign(el, act.prop)
        }
    }

    if(act.alert){
        alert(act.alert)
    }
}

/<script/i
/\son\w+\s*=/i