search

bminer / node-blade

Blade - HTML Template Compiler, inspired by Jade & Haml
Other
320 stars 28 forks source link

special characters in attribute names #212

Open punund opened 6 years ago

punund commented 6 years ago

Certain frameworks rely on specifically crafted attributes:

    <button v-on:submit.prevent=foo>

However, blade fails if given

 button(v-on:submit.prevent="foo")

This wouldn't work either:

 button(@attr="foo")
bminer commented 6 years ago

Ewww... : and @ are not supported by XHTML in the attribute name as far as I know. I'm not quite sure about HTML5.

I don't really want to support non-standard attribute names in a HTML templating language. That said, it should be as simple as loosening the Blade parser rules.

Which frameworks use these weird attribute names?

punund commented 6 years ago

This syntax is from vue.js, and I don't think they care about XHTML. As per the HTML5 specs, almost anything is valid in HTML attribute names:

Attribute names must consist of one or more characters other than controls, U+0020 SPACE, U+0022 ("), U+0027 ('), U+003E (>), U+002F (/), U+003D (=), and noncharacters.

Custom attributes are part of the specs, e.g., "data-" attributes, so it is reasonable to support them in a templating language, as I may legally want to have 

    <p data-is.mine="foo">

in a perfectly valid HTML5 document, but blade would fail on the dot. Client-side frameworks all use their own attributes, which are technically invalid, but are stripped before being given to the browser: vue.js uses v-, angular ng-, and sometime they would use '@' or ':' for shortcuts. They won't pass validation, but they are "well-formed" in a sense.

bminer commented 6 years ago

Hm, alright. If it's a Vue thing, I suppose the Blade parser should support it. Have you ever tried Riot.js?

bminer commented 6 years ago

Just following up. Would you be willing to do a PR for this? It would likely involve updating the PEG.js parser rules. If you're uncomfortable doing so, I don't blame you... there's a small learning curve involved.