[✨] Allow data to be passed in StaticGenerateHandler

[adaliszk]

Is your feature request related to a problem?

I'm trying to load non-serializable data, typically JSX, with the statically generated routes. However, when building imports dynamically, the frameworks force serialization, or I must skip that and cannot render with SSR.

Describe the solution you'd like

I would like it if there would be a way to pass a Content JSX function for each statically generated route on build time so that when it gets rendered, there would be a <Content /> component to be used and inlined without trying to serialize into JSON.

So ideally, something like:

export const onStaticGenerate: StaticGenerateHandler = async () => {
    const slugs = ["foo", "bar", "qux"];
    const contents = {}
    for await (const slug of slugs) {
        contents[slug] = await readMarkdown({ file: `../../content/${slug}.md` });
        // ^ yields a { frontmatter: Record<string, unknown>, Content: () => JSXNode }
    }
    return {
        params: slugs.map((slug) => ({ slug })),
        data: contents,
    };
};


export default component$(() => {
    const { params, data } = useLocation();
    const { Content } = data

    return (
        <>
            <h1>/{loc.params.slug}</h1>
            <Content />
        </>
    );
});

Describe alternatives you've considered

The dynamic import works with noSerialize, but when navigating around in development mode, the contents disappear. I considered forcing the compiler somehow, not automatically, to serialize a JSX function, but I found no suitable solution.
As an alternative, I also considered just generating index files with all the contents already imported statically, but before I commit to that solution, I wanted to raise a request here.

Additional context

I have a repository where I am trying to implement this; it can be opened in stackblitz at: https://stackblitz.com/github/adaliszk/web-sandbox/tree/develop/apps/qwik-website