Views

Views are svelte components exported by app/exports/server.ts and/or app/exports/client.ts.

main.go
Directoryapp
- Directoryexports
  - client.ts
  - server.ts
  - …

Server exports
Client exports

Views that are meant to be rendered on the server should be exported by app/exports/server.ts.

import Welcome from '$lib/views/Welcome.svelte'
import Profile from '$lib/views/Profile.svelte'

export const views = {
    "Welcome": Welcome,
    "Profile": Profile,
}

Views that are meant to be rendered on the client should be exported by app/exports/client.ts.

export const views = {
    "Welcome": import('$lib/views/Welcome.svelte'),
    "Profile": import('$lib/views/Profile.svelte'),
}

These views are being imported asynchronously in order to split them in different bundles, however you can simply create fake promises in order to bundle them all together and eliminate network latency when transitioning between views.

import Welcome from '$lib/views/Welcome.svelte'
import Profile from '$lib/views/Profile.svelte'

export const views = {
    "Welcome": Promise.resolve(Welcome),
    "Profile": Promise.resolve(Profile),
}

Send Views

Use SendView() to send a view from a route handler.

package lib

import (
    "github.com/razshare/frizzante/connections"
    "github.com/razshare/frizzante/views"
)

func Welcome(con *connections.Connection) {
    // Sends file "app/lib/components/views/Welcome.svelte"
    con.SendView(views.View{Name: "Welcome"})
}

The Name of the view will be used to lookup the view component exported by server.ts and/or client.ts.

Default View

There is no way to specify a “default view”.

However, you can use SendFileOrElse() in order to send a file or run custom logic if it doesn’t exist.

package lib

import (
    "github.com/razshare/frizzante/connections"
    "github.com/razshare/frizzante/views"
)

func Welcome(con *connections.Connection) {
    con.SendFileOrElse(func () {
        con.SendView(views.View{Name: "Welcome"})
    })
}

Usually you would map this handler to the default GET / pattern, which automatically captures all unmatched requests.

package main

import (
    "embed"
    "github.com/razshare/frizzante/web"
)

//go:embed app/dist
var efs embed.FS
var server = servers.New()

func main() {
    server.Efs = efs
    server.AddRoute(routes.Route{
        Pattern: "GET /",
        Handler: handlers.Welcome,
    })
    server.Start()
}

Data

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

package lib

import (
    "github.com/razshare/frizzante/connections"
    "github.com/razshare/frizzante/views"
)

func Welcome(con *connections.Connection) {
    con.SendView(views.View{
        Name: "Welcome",
        Data: map[string]string{
            "name": "world",
        },
    })
}

These properties are passed down to your view component.

<script lang="ts">
    type Props = { name: string }
    let {name}:Props = $props()
</script>

<h1>Hello {name}</h1>

You can also use getContext(“view”) to retrieve your data.

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

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

Render Modes

You can choose how to render views with the RenderMode property.

Using RenderModeFull, the view is rendered on both the server and the client.
This is the default mode.

package lib

import (
    "github.com/razshare/frizzante/connections"
    "github.com/razshare/frizzante/views"
)

func Welcome(con *connections.Connection) {
    con.SendView(views.View{
        Name: "Welcome",
        RenderMode: views.RenderModeFull, // Renders on server
                                          // and client.
    })
}

Using RenderModeServer, the view is rendered only on the server.
You’ll have to deal away with apis such as fetch; your new best friend is form.

package lib

import (
    "github.com/razshare/frizzante/connections"
    "github.com/razshare/frizzante/views"
)

func Welcome(con *connections.Connection) {
    con.SendView(views.View{
        Name: "Welcome",
        RenderMode: views.RenderModeServer, // Renders on server.
    })
}

While using RenderModeServer the view 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/file.js" />
</svelte:head>

Using RenderModeClient, the view is rendered only on the client by loading a JavaScript bundle asynchronously.

package lib

import (
    "github.com/razshare/frizzante/connections"
    "github.com/razshare/frizzante/views"
)

func Welcome(con *connections.Connection) {
    con.SendView(views.View{
        Name: "Welcome",
        RenderMode: views.RenderModeClient, // Renders on client.
    })
}