Run results for: Test getXAttrs

Run details:

User agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/83.0.4103.116 Safari/537.36

Browser: Chrome 83

Operating system: Windows

Device Platform: Desktop

Date tested: 4 years ago

Test name	Executions per second
PR #631	225710.7 Ops/sec
v2.4.0	215026.5 Ops/sec

HTML Preparation code:

<div id="test" x-data="{}" x-bind:test="foo" x-on:click="alert('ok')"></div>

Tests:

PR #631
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'))
v2.4.0
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'))

Run results for: Test getXAttrs

PR #631

v2.4.0