---
import Layout from "../layouts/Layout.astro";
import Highlight from "../components/Highlight.astro";

import VueRoot from "../components/VueRoot.vue";
import ReactRoot from "../components/ReactRoot";
import SvelteRoot from "../components/SvelteRoot.svelte";
import { initNg } from "@ng-org/signals"
const title = "Multi-framework app";
---

<script>
    import { ng, init } from "@ng-org/web";
    import { initNg } from "@ng-org/signals";

    await init(
        (event: {
            status: string;
            session: {
                session_id: unknown;
                protected_store_id: unknown;
                private_store_id: unknown;
                public_store_id: unknown;
            };
        }) => {
            console.log("ng web initialized. event.status, session_id:", event.status, event.session.session_id);
            initNg(ng, session);
        },
        true,
        []
    );
</script>
<Layout title={title}>
    <Highlight vue>
        <VueRoot client:only />
    </Highlight>

    <Highlight react>
        <ReactRoot client:only="react" />
    </Highlight>

    <Highlight svelte>
        <SvelteRoot client:only />
    </Highlight>
</Layout>