Golte: Svelte SSR and Hydration for Go

Golte enables Server-Side Rendering (SSR) and hydration for Svelte components within a Go application without requiring NodeJS in production.

The Workflow:

1. Compilation: During development, Svelte source files are compiled to client and server JavaScript (requires NodeJS).
2. Embedding: The generated code is embedded into your Go binary using Go's embed package.
3. Middleware: A middleware is generated from the build, which you register with your Go router.
4. Rendering: You use functions like golte.RenderPage and golte.AddLayout to serve components.
5. Deployment: After go build, you get a single, self-contained binary containing the full web app.

To use Golte, you must install both the Go module and the npm package. Ensure they are the same version to maintain compatibility.

Prerequisites:

• Go installed.
• NodeJS installed (required for development/compilation only).

Setup Steps:

1. Initialize your project:

   go mod init <projectname>
   npm init

2. Set "type": "module" in your package.json.
3. Install the packages:

   go get github.com/nichady/golte@latest
   npm install golte@latest

The examples directory contains sample applications to demonstrate Golte's capabilities. You can explore different implementations such as routers (demonstrating different router configurations) and blog (a simple blog application).

To run an example, first install the dependencies, then use the npm run command followed by the specific example name.

npm install
npm run routers
npm run blog

You can customize the build process (e.g., changing source or build directories) by creating a configuration file in your project root. Golte supports .js, .mjs, .ts, or .mts extensions.

Supported Config Files:

• golte.config.js
• golte.config.mjs
• golte.config.ts
• golte.config.mts

Note: You must have "type": "module" set in your package.json for the configuration file to work. If using TypeScript, you can also include a standard svelte.config.js for Svelte preprocessors.

import { Config } from "golte/config"

export default {
	template: "web/template.html",
	srcDir: "web/components/",
	outDir: "dist/",
} satisfies Config;

The preload action from the golte npm package can be applied to <a> tags in Svelte components. This converts standard links into Golte links, enabling client-side navigation and preventing full page reloads.

<script>
  import { preload } from "golte";
</script>

<a href="/route1" use:preload>Route1</a>
<a href="/route2" use:preload={|"mount"|}>Route2</a>

The url store provided by golte/stores allows Svelte components to reactively access information about the current URL.

<script>
  import { url } from "golte/stores";
</script>

<p>The current url is {$url.href}</p>

The Render method on *RenderContext executes the actual rendering process. It takes all components stored in the context's Components slice and renders them to the provided http.ResponseWriter. Each subsequent component in the slice is treated as a child of the previous one.

If the rendering process encounters an error, Render will respond to the client with an http.StatusInternalServerError and the error message.

func (r *RenderContext) Render(w http.ResponseWriter)

The Page(component string) function returns an http.HandlerFunc that renders a specific component. This is a convenience wrapper for RenderPage when no custom props are required.

Use this for simple routes where the component does not need dynamic data passed via props.

mux.HandleFunc("/about", golte.Page("AboutPage"))

Layouts are components that contain a <slot>. You can wrap pages in layouts using two methods:

1. Middleware approach: Use Layout(component string) as middleware to apply a layout to all routes handled by the subsequent handlers. This is ideal when no props are needed for the layout.
2. Manual approach: Use AddLayout(r, component, props) within a handler to append a layout to the current request. This allows you to pass specific Props to the layout.

Calling AddLayout multiple times on the same request will result in nested layouts.

// Using middleware
mux.Handle("/dashboard", golte.Layout("DashboardLayout")(dashboardHandler))

// Using manual addition in a handler
func dashboardHandler(w http.ResponseWriter, r *http.Request) {
	golte.AddLayout(r, "SidebarLayout", golte.Props{"theme": "dark"})
	golte.RenderPage(w, r, "DashboardPage", nil)
}