Web Standards

You can use href() and action() in order to make your hyperlinks and forms adapt to the client’s browser capabilities and/or the server’s rendering configuration.

Adaptive Hyperlinks

<script lang="ts">
    import { href } from "$lib/scripts/core/href.ts"
</script>
<!--
Defines a link, which when triggered will either
directly navigate to the given path, or do so using 
fetch, depending on wether JavaScript is enabled or not.
-->
<a {...href("/some-other-page")}> Go to some other page </a>

When JavaScript is disabled, <a> will render as a traditional anchor, which by default will navigate the client away to /some-other-page .
On the other hand, when JavaScript is enabled, <a> will render to an anchor that overrides the default behavior of the browser. Instead of navigating away immediately, fetch is used to retrieve the contents of /some-other-page and update the current state and view based on the server’s response.
For example, given the following handler using view.RenderModeServer

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 name of the view.
        RenderMode: view.RenderModeServer, // Renders view only on the server.
    })
}

The view will ultimately render the following in the client’s browser.

<a href="/some-other-page"> Go to some other page </a>

But using view.RenderModeFull will instead render

<a href="/some-other-page" onclick="onclick(event)"> Go to some other page </a>

Adaptive Forms

<script lang="ts">
    import { action } from "$lib/scripts/core/action.ts"
</script>
<form {...action("/process")}>
    <input type="text" name="name" />
    <!--
    Defines a button, which when triggered will either
    directly submit the form, or do so using fetch(),
    depending on wether JavaScript is enabled or not.
    -->
    <button type="submit">Submit</button>
</form>

When JavaScript is disabled, <form> will render as a traditional form, which by default will submit to /process and navigate the client away.
On the other hand, when JavaScript is enabled, <form> will render to a form that overrides the default behavior of the browser. Instead of navigating away immediately, fetch is used to submit the form to /process and update the current state and view based on the server’s response.
For example, given the following handler using view.RenderModeServer .

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 name of the view.
        RenderMode: view.RenderModeServer, // Renders view only on the server.
    })
}

The view will ultimately render the following in the client’s browser.

<form action="/process">
    <input type="text" name="name" />
    <button type="submit">Submit</button>
</form>

But using view.RenderModeFull will instead render.

<form action="/process" onsubmit="onsubmit(event)">
    <input type="text" name="name" />
    <button type="submit">Submit</button>
</form>

Where onsubmit(event) takes care of submitting the form and fetching the new state and view from /process .