Genie Discord forum

I encountered a weird issue when parsing (valid) html code that contains alpine.js directives.

Typically, when using alpine.js you end up with attributes like the following:

x-data="{ open: true }" @keydown.window.escape="open = false" x-init="$watch("open", o => !o && window.setTimeout(() => (open = true), 1000))" x-show="open" class="relative z-10" aria-labelledby="slide-over-title" x-ref="dialog" aria-modal="true"

Now, the Genie HTML renderer produced this output:

Genie.Renderer.Html.div( false = "", class = "relative z-10", htmlsourceindent = "3", ; NamedTuple{( Symbol("x-data"), Symbol("x-show"), Symbol("x-init"), Symbol("aria-modal"), Symbol("x-ref"), Symbol("aria-labelledby"), )}(( "{ open: true }", "open", "$watch('open', o => !o && window.setTimeout(() => (open = true), 1000))", "true", "dialog", "slide-over-title", ))

And the reported error is LoadError: syntax: invalid keyword argument name "false"

Does anybody encounter a similar problem? If there is a known issue, I can work around this - also, I can debug further and maybe create a clear issue on GitHub so it can be adequately addressed (but at this moment, I am not entirely sure if I am doing something wrong or if there is a genuine bug).

After digging through the source code of the html methods, I found a workaround - just wrap the HTML string in ParsedHTMLString - this skips a dispatch step and avoids the whole layout checking, and also avoids the $ character check.

Still, I think the parser can benefit from being more robust and not be crashed by the potential presence of $ in the literal HTML.

$ is reserved keyword in Julia. You'll have to escape it

\\\$ ???