Next: Invalid attribute name: data-test, aria-labelledby

[LeBenLeBen]

I’ve just updated to version 2.0.0-alpha.3 and I get errors on some attributes that shouldn’t probably throw.

[VueLive] Invalid attribute name: data-test
[VueLive] Invalid attribute name: aria-labelledby

When this happens, the code block display is weird as well, an element with the class `VueLive-squiggles-wrapper" seems to be creating some weird white space within the Prism editor.

[LeBenLeBen]

This line seems to be the issue: https://github.com/vue-styleguidist/vue-live/blob/next/src/utils/checkTemplate.js#L52

The regex looks odd to me, especially the ,-, part since it means, I think, all characters between , and , which doesn’t really make sense?!

I’m not sure which characters are allowed in attributes but I guess , isn’t one of them whereas - is. I’d propose to adapt it to something like /^[a-z\-:]+$/g

WDYT?

[elevatebart]

Thank you so much @LeBenLeBen ,

You were absolutely right. I added a couple of additional tests just so things happen smoothly.

[elevatebart]

🎉 This issue has been resolved in version 2.0.0-alpha.4 🎉

The release is available on:

• npm package (@next dist-tag)
• GitHub release

Your semantic-release bot 📦🚀

[LeBenLeBen]

@elevatebart Thank you for fixing and releasing so quickly! 🙇

[github-actions]

🎉 This issue has been resolved in version 2.0.0 🎉

The release is available on:

• npm package (@latest dist-tag)
• GitHub release

Your semantic-release bot 📦🚀

[github-actions]

🎉 This issue has been resolved in version 3.0.0-beta.1 🎉

The release is available on:

• npm package (@next dist-tag)
• GitHub release

Your semantic-release bot 📦🚀