Ambivalent case sensitivity when mounting #1622

Closed
ddillert opened this Issue Feb 24, 2016 · 11 comments

Projects

None yet

6 participants

@ddillert

riot.mount(selector, tagName, [opts])

requires tagName to be all lowercase. However, when using custom tags, this is not needed.

Tag file:

<MyContent>
<h1>Hello World!</h1>
</MyContent>

Not working:
riot.mount("#content", 'MyContent')

Working
riot.mount("#content", 'mycontent')

Working (if a custom tag is defined)
riot.mount('MyContent')

@GianlucaGuarini
Member

@ddillert I agree this issue must be solved

@GianlucaGuarini
Member

@aMarCruz it seems that the compiler converts the tags to lowercase in the compile method. http://plnkr.co/edit/buO0fEJNh8zBMZ9bUikl?p=preview Is there any particular reason we can not change this behavior?

@aMarCruz
Member

@GianlucaGuarini not really, but can be this a breaking change?
There are other parts in the core where names are converted to lowercase and the hash of __tagImpl is using this behavior. I need review it.
We can't have __tagImpl["My-tag"] and __tagImpl["my-tag"] in the same app.

@GianlucaGuarini GianlucaGuarini added this to the 3.0.0 milestone Mar 3, 2016
@ddillert
ddillert commented Mar 5, 2016

Not sure if this is by design or another bug, but passing in opts also gets converted to lowercase.

<Tickets ticketCount={this.ticketCount}></Tickets>

Currently, from within Tickets, these get converted to be accessed as

this.opts.ticketcount

but

this.opts.ticketCount

does not work.

@aMarCruz
Member
aMarCruz commented Mar 5, 2016

@ddillert , it is by design: http://riotjs.com/guide/#tag-syntax

ADD:
Properties with dash are transformed to camel-case for access by JS.
Example: ticket-count will be ticketCount

@GianlucaGuarini
Member

@ddillert it's not riot changing your attribute it's how html works

All attributes on HTML elements in HTML documents get ASCII-lowercased automatically, so the restriction on ASCII uppercase letters doesn't affect such documents.

@aMarCruz
Member
aMarCruz commented Mar 6, 2016

@GianlucaGuarini right. Also, tagNames are not case sensitive, this is why we cannot have "My-tag" and "my-tag" in the same app. I will force these to lowercase in the 2 entry points: riot.mount and riot.tag and push the fix.

@aMarCruz aMarCruz self-assigned this Mar 6, 2016
@GianlucaGuarini GianlucaGuarini pushed a commit that closed this issue Mar 9, 2016
@aMarCruz aMarCruz Revision of riot.mount and riot.tag
Closes #1622 : Ambivalent case sensitivity when mounting
`riot.mount` allows optional spaces after the commas in its first parameter.
Using `data-is` attribute in `riot.mount.pushTags`
Removed unused parameter in `riot.tag2`
Removed dependency in the constructor function for unmount previous instance in lib/browser/tag/tag.js, so you can call `riot.tag` without this parameter.
c4de45c
@GianlucaGuarini GianlucaGuarini referenced this issue Jun 17, 2016
Closed

Case-sensitivity issue #1834

1 of 7 tasks complete
@angryziber

Which version of riot contains the fix?

@simonLouvet
simonLouvet commented Sep 29, 2016 edited

test in 2.6.2 still not working
https://fiddle.jshell.net/52y3xscv/4/

@rsbondi
Contributor
rsbondi commented Sep 29, 2016

Your first div is not closed

@simonLouvet

my fiddle wasn't save, thanks.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment