Dom ID's and hashes

[apatil]

Hi all,

In the code below, setting id_char="a" works fine, whereas setting id_char="/" causes a silent failure:

id_char = "/"

hide_thing() =
    Dom.hide(#{id_char})

start =
    | {path = [] ... } ->
        Resource.styled_page("Hello.", ["/resources/css.css"],
            <div id=#{id_char}> Hi. </div>
            <div class="button" onclick={_ -> hide_thing()}>Hide the "Hi."</div>
        )

server = Server.of_bundle([@static_include_directory("resources")])
server = Server.simple_dispatch(start)

I'm sure there are good reasons for forbidding some characters in dom ID's, but the silent failure makes it hard to figure out what's going on. It seems like Opa could catch most of these illegal ID labels at compile time, and give a proper runtime error for the rest.

The way this came up is as follows. I've been labelling the id of the div that pertains to a particular record by the div of that record, for example

badhash(x) =
    Crypto.Base64.encode(Crypto.Hash.sha2(x))

makediv(x, content) =
    <div id=#{"div_of_{badhash(x)}"}> {content} </div>

Once in a while that hash function made a hash with characters "+" or "/", which didn't work. To remedy that, I've made the following hash function, which always makes "URL- and ID- safe hashes". Is something like it available in the standard library?

encode(x) = 
    enc = Crypto.Base64.encode(x)
    rep1 = String.replace("/","s",enc)
    String.replace("+","p",rep1)

goodhash(x) : string = 
    encode(Crypto.Hash.sha2(OpaSerialize.serialize(x)))

Cheers,
Anand

I agree this should ideally "just work", however I don't agree that the failure is silent. With your example, I get "uncaught exception: Syntax error, unrecognized expression: #/" in the JavaScript console of Firefox and Chrome.

Although it's rather unspecified, document.getElementById seems to work correctly on this id, but Opa uses jQuery, in which the $() function is more powerful than a simple selection on id. Maybe we could selectively use document.getElementById or a variant when selecting with an id.

But the problem would be the same with classes, or anything usable for selection.

Ok, I did just that and it seems to work like a charm. It should be even faster. It will land on github and nightlies soon, but here's the patch on opabsl/jsbsl/bslDom.js:

##register select_id: string -> Dom.private.element
##args(name)
{

• return (new $("#"+name))
• return (new $(document.getElementById(name)))
  }

Note: this will break wrong uses of Dom.select_id with complex, non-id, selectors. That's what Dom.select_raw is here for.

[apatil]

Great, thanks!