What is the minimal layout needed for a Genie page to work with StippleUI Components?

[ArgentumVir]

In the sample tutorial for a simple page with a slider, the following displays everything properly

using GenieFramework, PlotlyBase

@genietools


@app begin
    @in N = 0

    @onchange N begin
         # Do something
    end
end

function ui()
    row([
        cell(class="st-col col-3", [
            slider(1:1000, :N),
            p(" {{N}}),
        ])
    ])
end

@page("/", ui)

up(8000, "127.0.0.1")

However, change @page("/", ui) to @page("/", ui, layout=path"./path/to/your/custom/layout) and the slider is now broken/not displayed. Clearly the default layout is doing some work here to load some assets that the slider requires. I tried following the pagemacro -> Stipple.ReactiveTools.DEFAULT_LAYOUT() code but wasn't able to find where and which assets are being injected into the page. I manually included a number of assets that seemed like they might be relevant into my layout but wasn't able to get the slider to work.

How can I add the necessary stock css/js assets (or even better, only the ones being used) to my new custom layout such that I can use the StippleUI/Quasar components out of the box without the default layout?

[PGimenez]

The Stipple assets are injected by the page function in the default layout.
https://learn.genieframework.com/docs/reference/reactive-ui/adding-js-libraries#using-a-layout

Someone from Discord tried to write their own layout without calling page, but they couldn't get it to work
https://discord.com/channels/774897545717219328/1201445306089341039

[ArgentumVir]

Thanks for the very quick response. I see the page function default layout but I don't have a /js/genieapp.js file or any other of the assets it seems to explicitly call out, so its unclear to me how/what/where its actually injecting the assets from the code I've been able to understand

I do want to use the page functionality, and really the barebones default for everything should be fine for my simple use case, I just want the pages to be wrapped in a custom layout of my own but still be able to leverage the library components with a default styling, I'm just having trouble getting the components to stay functional, I've been at it for a few hours looking at the Genie/Stipple/StippleUI docs but haven't been able to figure out how to do this

[ArgentumVir]

Its not ideal, but I've found I can accomplish what I set out to do by monkey patching the Stipple.ReactiveTools.DEFAULT_LAYOUT function to return my desired layout

[essenciary]

It was meant to be pretty simple but looks like for some reason it's not. I'll take a look this week and follow up with an answer -- and maybe we can improve the API / docs.