q-header in HTML file only works when interpolating Julia code

[PGimenez]

When using the q-header tag in HTML I get a UndefVarError: q__header not defined error. This is expected as QHeader is not part of StippleUI.

However, if I interpolate <% quasar(:header) %>, then the header works. This is confusing as the interpolation should inject the <q-header></q-header> tags into the HTML code.

Here's a MWE to test this:

module App
using GenieFramework
@genietools

ui() = """
<q-layout view="hHh Lpr lff">
   <q-header style="background:darkblue">
      <q-toolbar>
         <q-btn flat round label icon="menu" v-on:click="left_drawer_open = !left_drawer_open" dense></q-btn>
         <q-toolbar-title>Genie
            Component Gallery
         </q-toolbar-title>
      </q-toolbar>
   </q-header>
</q-layout>
"""

ui_interp() = """
<q-layout view="hHh Lpr lff">
   <% 
    StippleUI.layout(view="hHh Lpr lff",
                     [
        quasar(:header, style="background:darkblue", toolbar(
            [
            btn(; dense=true, flat=true, round=true, icon="menu"),
            toolbartitle("Genie Component Gallery")
        ],
        ),
        ),
                                                     ])
 %>
</q-layout>
"""
@page("/", ui_interp)
up(8000)
end

Looking at the code here,

function quasar(elem::Symbol, args...; kwargs...)
  xelem(Symbol("q-$elem"), args...; kwargs...)
end

I assume that quasar registers the q__headertag and so there is no error when loading the page.

Should we autoregister q-tags and throw a warning instead of an error when there's tags unsupported by StippleUI?

[hhaensel]

The situation is a bit different. When we use StippleUI to implement any element, the result type is ParsedHTMLString. This type indicates to the parser that the code does not need to be parsed before rendering. So your ui_interp() contains a layout element, which will not be parsed. If you'd pipe your ui content to ParsedHTMLString, you won't see any error:

ui() = """
<q-layout view="hHh Lpr lff">
   <q-header style="background:darkblue">
      <q-toolbar>
         <q-btn flat round label icon="menu" v-on:click="left_drawer_open = !left_drawer_open" dense></q-btn>
         <q-toolbar-title>Genie
            Component Gallery
         </q-toolbar-title>
      </q-toolbar>
   </q-header>
</q-layout>
""" |> ParsedHTMLString

[KatharineME]

Dealing with this as well. We are simply defining a quasar header function in app.jl and calling that function in layout.html.

It would be great to put the q-header html directly into layout.html though since it is not being used twice and does not need to be in a function.