Views

Views are .svelte files located under lib/components/views.

main.go
Directorylib
- Directorycomponents
  - Directoryviews
    Hello.svelte
    Login.svelte
    Profile.svelte
    …

Use res.SendView() to send a view.

package lib

import frz "github.com/razshare/frizzante"

func GetHello(req *frz.Request, res *frz.Response) {
    // Sends file "lib/components/views/Hello.svelte"
    res.SendView(frz.View{Name: "Hello"})
}

Views Data

Optionally, you can send data along with the views by adding a Data property to your View.

package lib

import frz "github.com/razshare/frizzante"

func GetHello(req *frz.Request, res *frz.Response) {
    res.SendView(frz.View{
    Name: "Hello",
    Data: map[string]string{
      "name": "world",
    }
  })
}

Then use getContext(“server”) to retrieve your data.

<script lang="ts">
    import type { ServerContext } from "$frizzante/types.ts"
    const server = getContext("server") as ServerContext<{ name: string }>
</script>

<h1>Hello {server.data.name}</h1>

Since this data is provided using the context api, it can be accessed not only by the root component (your view), but also by any other component.

<script lang="ts">
  import SayHello from "$lib/components/SayHello.svelte"
</script>

<SayHello/>

<script lang="ts">
  import type { SvelteContext } from "$frizzante/types.ts"
  const server = getContext("server") as ServerContext<{ name: string }>
</script>

<h1>Hello {server.data.name}</h1>

As you can see, in this example, view lib/components/views/Example.svelte doesn’t concern itself with passing the name down to <SayHello/>, because <SayHello/> itself can get access to the data directly by simply invoking getContext("server").

Views Render Modes

When sending views, you can choose how to render them with the RenderMode property.

package lib

import frz "github.com/razshare/frizzante"

func GetHello(req *frz.Request, res *frz.Response) {
    res.SendView(frz.View{
        Name: "Hello",
        RenderMode: frz.RenderModeServer, // Renders on server.
    })
}

While using RenderModeServer your application won’t serve a JavaScript bundle, but you can still use the <svelte:head> special tag in order to load scripts dynamically.

<svelte:head>
    <script type="text/javascript" src="https://some.cdn/some.js" />
</svelte:head>

package lib

import frz "github.com/razshare/frizzante"

func GetHello(req *frz.Request, res *frz.Response) {
    res.SendView(frz.View{
        Name: "Hello",
        RenderMode: frz.RenderModeClient, // Renders on client.
    })
}

package lib

import frz "github.com/razshare/frizzante"

func GetHello(req *frz.Request, res *frz.Response) {
    res.SendView(frz.View{
        Name: "Hello",
        RenderMode: frz.RenderModeFull,   // Renders on client and server.
    })
}