chain-depict/main.js

export class pre extends HTMLPreElement {
    constructor() {
        super()
    }
    static text(text) {
        const pre = new this()
        pre.textContent = text
        return pre
    }
    w(width) {
        this.style.width = `${width}px`
        return this
    }
    h(height) {
        this.style.height = `${height}px`
        return this
    }
}

export class div extends HTMLDivElement {
    constructor({ width = 0, height = 0 }) {
        super()
        this.style.width = `${width}px`
        this.style.height = `${height}px`
    }

    static w(width) {
        return new this({ width })
    }
    static h(height) {
        return new this({ height })
    }

    w(width) {
        this.style.width = `${width}px`
        return this
    }
    h(height) {
        this.style.height = `${height}px`
        return this
    }
    text(text) {
        this.textContent = text
        return this
    }

    static get onclick() {
        console.log('onclick event')
        return {
            stop: function (event) {
                console.log(`Stop event: ${event}`)
                return div
            }
        }
    }

    static get onkeydown() {
        console.log('onkeydown event')
        return {
            esc: function () {
                console.log('esc event')
                return {
                    keydown: function () {
                        console.log('keydown event')
                        return div
                    }
                }
            }
        }
    }

    static classList(classes) {
        console.log(`Classes: ${classes}`)
        return this
    }
}

customElements.define('my-div', div, { extends: 'div' })
customElements.define('my-pre', pre, { extends: 'pre' })

//
//export class button extends div { }
//export class span extends div { }
//
//export class header extends div { }
//export class footer extends div { }
//export class main extends div { }
//

export default { div, pre }