const xAttrRE = /^x-(on|bind|data|text|html|model|if|for|show|cloak|transition|ref|spread)\b/

​

function isXAttr(attr) {

    const name = replaceAtAndColonWithStandardSyntax(attr.name)

​

    return xAttrRE.test(name)

}

​

function replaceAtAndColonWithStandardSyntax(name) {

    if (name.startsWith('@')) {

        return name.replace('@', 'x-on:')

    } else if (name.startsWith(':')) {

        return name.replace(':', 'x-bind:')

    }

​

    return name

}

​

function parseHtmlAttribute({ name, value }) {

    const normalizedName = replaceAtAndColonWithStandardSyntax(name)

​

    const typeMatch = normalizedName.match(xAttrRE)

    const valueMatch = normalizedName.match(/:([a-zA-Z\-:]+)/)

    const modifiers = normalizedName.match(/\.[^.\]]+(?=[^\]]*$)/g) || []

​

    return {

        type: typeMatch ? typeMatch[1] : null,

        value: valueMatch ? valueMatch[1] : null,

        modifiers: modifiers.map(i => i.replace('.', '')),

        expression: value,

    }

}

​

function getXAttrs(el, component, type) {

    let directives = Array.from(el.attributes).filter(isXAttr).map(parseHtmlAttribute)

​

    // Get an object of directives from x-spread.

    let spreadDirective = directives.filter(directive => directive.type === 'spread')[0]

​

    if (spreadDirective) {

        let spreadObject = saferEval(spreadDirective.expression, component.$data)

​

        // Add x-spread directives to the pile of existing directives.

        directives = directives.concat(Object.entries(spreadObject).map(([name, value]) => parseHtmlAttribute({ name, value })))

    }

    if (type) return directives.filter(i => i.type === type)

​

    return directives;

}

​

getXAttrs(document.getElementById('test'), {}, 'data')

const xAttrRE = /^x-(on|bind|data|text|html|model|if|for|show|cloak|transition|ref|spread)\b/

​

function isXAttr(attr) {

    const name = replaceAtAndColonWithStandardSyntax(attr.name)

​

    return xAttrRE.test(name)

}

​

function replaceAtAndColonWithStandardSyntax(name) {

    if (name.startsWith('@')) {

        return name.replace('@', 'x-on:')

    } else if (name.startsWith(':')) {

        return name.replace(':', 'x-bind:')

    }

​

    return name

}

​

function parseHtmlAttribute({ name, value }) {

    const normalizedName = replaceAtAndColonWithStandardSyntax(name)

​

    const typeMatch = normalizedName.match(xAttrRE)

    const valueMatch = normalizedName.match(/:([a-zA-Z\-:]+)/)

    const modifiers = normalizedName.match(/\.[^.\]]+(?=[^\]]*$)/g) || []

​

    return {

        type: typeMatch ? typeMatch[1] : null,

        value: valueMatch ? valueMatch[1] : null,

        modifiers: modifiers.map(i => i.replace('.', '')),

        expression: value,

    }

}

​

function getXAttrs(el, component, type) {

    let directives = Array.from(el.attributes).filter(isXAttr).map(parseHtmlAttribute)

​

    // Get an object of directives from x-spread.

    let spreadDirective = directives.filter(directive => directive.type === 'spread')[0]

​

    if (spreadDirective) {

        let spreadObject = saferEval(spreadDirective.expression, component.$data)

​

        // Add x-spread directives to the pile of existing directives.

        directives = directives.concat(Object.entries(spreadObject).map(([name, value]) => parseHtmlAttribute({ name, value })))

    }

​

    return directives.filter(i => {

        // If no type is passed in for filtering, bypass filter

        if (! type) return true

​

        return i.type === type

    })

}

​

getXAttrs(document.getElementById('test'), {}, 'data')