wirejs/expol.js

import Hemex from "./Hemex.js"

const style = document.createElement("style")
document.head.append(style)

style.sheet.insertRule(`
    .expol-container{
        box-sizing: border-box;
        padding: 5px;
        border: solid 1px black;
        overflow: hidden;
        border-radius: 5px;
    }
`)
style.sheet.insertRule(`
    .expol-container .expol{
        box-sizing: border-box;
        position: relative;
        min-height: 1em;
        font-family: inherit;3em
        font-size: inherit;
        font-weight: inherit;
        white-space: nowrap;
    }
`)

/**
 * @type {CSSRule}
 */
let fontRule = Array.from(style.sheet.cssRules).filter(e => e.selectorText == '.expol-container .expol')[0]

function updateFont(family,size,weight)
{
    fontRule.style.fontFamily = family
    fontRule.style.fontSize = size
    fontRule.style.fontWeight = weight
}

style.sheet.insertRule(`
    .expol .viewport{
        position: absolute;
        top: 0px;
        left:0;
        right:0;
        height:0;
        width: 100%;
        height: 100%;
        padding: 0
        margin: 0;
        color: black;
        z-index: 0;
        font-family: inherit;
        font-size: inherit;
        font-weight: inherit;
    }
`)
style.sheet.insertRule(`
    .expol .textinput{
        position: absolute;
        top: 0px;
        left:0;
        right:0;
        height:0;
        width: 100%;
        height: 100%;
        padding: 0;
        margin: 0;
        color: transparent;
        z-index: 1;
        font-family: inherit;
        font-size: inherit;
        font-weight: inherit;
        outline: none;
        caret-color: black;
    }
`)
style.sheet.insertRule(`
    .expol pre{
        margin: 0;
        font-family: inherit;
        display: inline;
    }
`)
style.sheet.insertRule(`
    .expol .col1{
        color: #00a902;
    }
`)
style.sheet.insertRule(`
    .expol .col2{
        color: #ff0000;
    }
`)
style.sheet.insertRule(`
    .expol .col3{
        color: black;
    }
`)
style.sheet.insertRule(`
    .expol .col4{
        color: black;
        opacity: 0.5;
    }
`)
style.sheet.insertRule(`
    .expol .col5{
        text-decoration: underline;
        color: #0016ff;
    }
`)

updateFont("monospace","2em","500")

let container = document.createElement("div")
container.classList.add("expol-container")
document.body.appendChild(container)

let expol = document.createElement("div")
expol.classList.add("expol")
container.appendChild(expol)

let viewport = document.createElement("pre")
viewport.classList.add("viewport")
expol.appendChild(viewport)

let textinput = document.createElement("pre")
textinput.classList.add("textinput")
textinput.contentEditable = true
expol.appendChild(textinput)
textinput.addEventListener("keyup",synctoViewPort)
textinput.addEventListener("keypress",synctoViewPort)
textinput.addEventListener("keydown",synctoViewPort)
textinput.addEventListener("paste",(pasteevent)=>{
    let text = pasteevent.clipboardData.getData('text/plain')
    textinput.innerText = text
    synctoViewPort()
    pasteevent.preventDefault()
})

function synctoViewPort()
{
    let fragment = renderColorizer(textinput.innerText)
    for (const child of Array.from(viewport.childNodes))
    {
        child.remove()
    }
    viewport.append(fragment)
}

function renderColorizer(text)
{
    let fragment = document.createDocumentFragment()
    let hmx = new Hemex()
    hmx.setText(text)
    let blank = true

    let query = []
    let term = []

    hmx.syntax("term",function(hmx,result){
        if(hmx.isChar('-'))
        {
            hmx.nextChar()
            let name = hmx.of(() => hmx.isLetterRegex() || hmx.isNumber() || hmx.includes(['-','_']))
            let operator = 'has'
            let value = ""
            if(name)
            {
                let pre = document.createElement("pre")
                pre.classList.add("col1")
                pre.setAttribute("role","name")
                let textDoc = document.createTextNode('-' + name)
                pre.appendChild(textDoc);
                fragment.appendChild(pre)
            }else{
                let pre = document.createElement("pre")
                pre.classList.add("col1")
                pre.setAttribute("role","name")
                let textDoc = document.createTextNode('-');
                pre.appendChild(textDoc);
                fragment.appendChild(pre)
            }

            let k
            if(k = hmx.includes([':','>','<','>=','<=','!=']))
            {
                operator = k[0]
                let pre = document.createElement("pre")
                pre.classList.add("col2")
                pre.setAttribute("role","operator")
                let textDoc = document.createTextNode(k[0])
                pre.appendChild(textDoc)
                fragment.appendChild(pre)
                hmx.nextChar()
                value = hmx.give('strorword')
            }

            query.push({
                query:[name,operator,value]
            })

            return true
        }
    })

    hmx.syntax("mention",function(hmx,result){
        if(hmx.isChar('@'))
        {
            hmx.nextChar()
            let name = hmx.of(() => hmx.isLetterRegex() || hmx.isNumber() || hmx.includes(['-','_']))

            if(name)
            {
                let pre = document.createElement("pre")
                pre.classList.add("col5")
                pre.setAttribute("role","mention")
                let textDoc = document.createTextNode('@' + name)
                pre.appendChild(textDoc);
                fragment.appendChild(pre)
            }else{
                let pre = document.createElement("pre")
                pre.classList.add("col5")
                pre.setAttribute("role","mention")
                let textDoc = document.createTextNode('@');
                pre.appendChild(textDoc);
                fragment.appendChild(pre)
            }

            query.push({
                mention: name
            })

            return true
        }
    })

    // cute --username:"absorbe"

    hmx.syntax("strorword",function(hmx,result){
        let k = hmx.includes(['\'','"','`'])
        if(k.length == 0 || k == false){
            let name = hmx.of(() => !hmx.isWhiteSpace())
            if(name)
            {

                let pre = document.createElement("pre")
                pre.classList.add("col3")
                pre.setAttribute("role","value")
                let textDoc = document.createTextNode(name||"");
                pre.appendChild(textDoc)
                fragment.appendChild(pre)
                result(name||false)

            }
            return true
        }else{
            let char = hmx.getChar()
            hmx.nextChar()
            let name = hmx.of(() => !hmx.isChar(char))
            let kt = "";
            if(name)
            {
                result(name||false)

                kt = char + name;
                if(hmx.isChar(char)){
                    hmx.nextChar()
                    kt += char;
                }
            }else{
                kt += char;
                hmx.nextChar()
            }

            let pre = document.createElement("pre")
            pre.classList.add("col3")
            pre.setAttribute("role","value")
            let textDoc = document.createTextNode(kt)
            pre.appendChild(textDoc)
            fragment.appendChild(pre)
            return true
        }
    })

    hmx.syntax("scope",function(hmx,result){
        let description = []
        hmx.while(()=>{
            switch(hmx.getChar())
            {
                case "-":{
                    if(description.length)
                    {
                        let pre = document.createElement("pre")
                        pre.classList.add("col4")
                        pre.setAttribute("role","description")
                        let textDoc = document.createTextNode(description.join(''))
                        pre.appendChild(textDoc)
                        fragment.appendChild(pre)

                        if(description.join('').trim().length) term.push(description.join(''))
                        description = []
                    }
                    if(blank)
                    {
                        hmx.give("term")
                        return true
                    }
                }
                case "@":{
                    if(description.length)
                    {
                        let pre = document.createElement("pre")
                        pre.classList.add("col4")
                        pre.setAttribute("role","description")
                        let textDoc = document.createTextNode(description.join(''))
                        pre.appendChild(textDoc)
                        fragment.appendChild(pre)

                        if(description.join('').trim().length) term.push(description.join(''))
                        description = []
                    }
                    if(blank)
                    {
                        hmx.give("mention")
                        return true
                    }
                }
                default:{
                    blank = hmx.isWhiteSpace()
                    description.push(hmx.getChar())
                    hmx.nextChar()
                    return true
                }
            }
        })

        if(description.length)
        {
            if(description.join('').trim().length) term.push(description.join(''))

            let pre = document.createElement("pre")
            pre.classList.add("col4")
            pre.setAttribute("role","description")
            let textDoc = document.createTextNode(description.join(''))
            pre.appendChild(textDoc)
            fragment.appendChild(pre)
        }

        query.push({
            term
        })
    })

    hmx.give('scope')

    console.log("Query:",query)

    return fragment
}