Views

What are views?

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

• Directoryapp

  • exports.client.ts
  • exports.server.ts
  • …

Server Exports

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

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,
}

Client Exports

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

app/exports.client.ts

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

Note

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.

app/exports.client.ts

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),
}

Note

Keys in app/exports.server.ts and app/exports.client.ts are not mutually exclusive.
You can render the same component on both the server and the client at the same time.
See Render Modes below.

Send Views

Use send.View() to send a view.

lib/routes/welcome/view.go

package welcome

import (
    "main/lib/core/clients"
    "main/lib/core/send"
    "main/lib/core/views"
)

func View(client *clients.Client) {
    send.View(client, views.View{Name: "Welcome"}) // Sends view "Welcome".
}

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

Default View

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

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

lib/routes/welcome/view.go

package welcome

import (
    "os"

    "main/lib/core/clients"
    "main/lib/core/send"
    "main/lib/core/views"
    "main/lib/routes/welcome"
)

func View(client *clients.Client) {
    if !send.RequestedFile() {
        welcome.View(client)
    }
}

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

package main

import (
    "embed"
    "main/lib/core/clients"
    "main/lib/core/servers"
    "main/lib/routes/welcome"
)

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

func main() {
    defer servers.Start(server)                         // Starts server.
    server.Efs = efs                                    // Sets embedded file system.
    server.Routes = append(server.Routes, routes.Route{ // Adds route to the server.
        Pattern: "GET /",
        Handler: welcome.View,
    })
}

View Properties

Optionally, you can specify properties for your View with the Props field.

lib/routes/welcome/view.go

package welcome

import (
    "main/lib/core/clients"
    "main/lib/core/send"
    "main/lib/core/views"
)

func View(client *clients.Client) {
    send.View(client, views.View{ // Sends view.
       Name: "Welcome",           // Sets view name.
       Props: map[string]string{  // Sets view props, which will be injected into the svelte component.
          "name": "world",        // Adds property "name" with value "world".
       },
    })
}

These properties are passed down to your view component.

app/lib/views/Hello.svelte

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

<h1>Hello {name}</h1>

Note

View properties are initialized with $state() and thus are reactive by default.

Tip

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

app/lib/views/Hello.svelte

<script lang="ts">
    import type { View } from "$lib/scripts/core/types.ts"
    const view = getContext("view") as View<{ name: string }> // Retrieves the same server props,
                                                              // but can be used anywhere in the project
                                                              // regardless of the component hierarchy.
</script>

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

Note

view is initialized with $state() and thus is reactive.

Tip

Instead of manually defining TypeScript/JSDoc type definitions, use the cli to automatically generate them.
Read more about type definitions.

Render Modes

You can choose how to render views by setting the RenderMode field in your View.

RenderModeFull

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

lib/routes/welcome/view.go

package welcome

import (
    "main/lib/core/clients"
    "main/lib/core/send"
    "main/lib/core/views"
)

func View(client *clients.Client) {
    send.View(client, views.View{       // Sends view.
       Name: "Welcome",                 // Sets view name.
       RenderMode: view.RenderModeFull, // Renders view on server and client.
    })
}

RenderModeServer

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.

lib/routes/welcome/view.go

package welcome

import (
    "main/lib/core/clients"
    "main/lib/core/send"
    "main/lib/core/views"
)

func View(client *clients.Client) {
    send.View(client, views.View{         // Sends view.
       Name: "Welcome",                   // Sets view name.
       RenderMode: view.RenderModeServer, // Renders view only on server.
    })
}

Tip

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>

RenderModeClient

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

lib/routes/welcome/view.go

package welcome

import (
    "main/lib/core/clients"
    "main/lib/core/send"
    "main/lib/core/views"
)

func View(client *clients.Client) {
    send.View(client, views.View{         // Sends view.
       Name: "Welcome",                   // Sets view name.
       RenderMode: view.RenderModeClient, // Renders view only on client.
    })
}

Tip

You can combine any of these render modes with adaptive hyperlinks and forms.
Read more about web standards.

Tip

When using RenderModeFull or RenderModeServer, You can configure how many JavaScript runtimes are executed in parallel by setting the FRIZZANTE_JS_RUNTIME_LIMIT environment variable.

.gen/bin

FRIZZANTE_JS_RUNTIME_LIMIT=3 ./app

Caution

Settings this limit too high could lead to large memory usage by your JavaScript runtimes.
For most use cases a limit of 1 runtime (the default) is more than enough, after all, the Svelte compiler is simply concatenating strings together when rendering pages on the server.
Modify this field based on actual performance measurements.

Disabling the server-side JavaScript runtime.

You can add the no_js_runtime tag to your build process to completely disable the server-side JavaScript runtime.

frizzante --build --tags="no_js_runtime"

This will reduce the minimum size of the final binary from 25MB to 10MB.