Using Svelte

GOX allows you to use Svelte components within GOX templates. The integration automatically manages your compilation, loading, assembly and disassembly in the browser.

Install Svelte

Run the following command from the root of the project:

gox client add svelte

The command creates the environment of Svelte within client/svelte/, installs the necessary dependencies and generates the shared bundle used by the Svelte components.

Created structure

After running the command, the project contains the following structure:

client/
└── svelte/
    ├── node_modules/
    ├── package.json
    ├── pnpm-lock.yaml
    └── pnpm-workspace.yaml

The command prepares the environment of the framework, but does not create example components. The components can be organized freely within the framework. client/svelte/.

Create a Svelte component

Create the following file:

client/svelte/menu/Menu.svelte

Declares the properties of the component and its status within the <script>:

<script>
    let { name } = $props()
    let isOpen = $state(false)
</script>

<nav>
    <button onclick={() => isOpen = !isOpen}>
        Menú de {name}
    </button>
    {#if isOpen}
        <p>El menú está abierto.</p>
    {/if}
</nav>

The file .svelte automatically generates the component that GOX uses as a mounting point.

The developer doesn't need to matter. mount, manually assemble the component or manage its disassembly. GOX automatically performs these operations by integrating Svelte.

Use the component in GOX

Declares the component by indicating its name, framework and source file:

client Menu svelte {
    src: "menu/Menu.svelte"
}

The route of src is resolved from client/svelte/. So, menu/Menu.svelte corresponds to:

client/svelte/menu/Menu.svelte

See Client declarations to know all the properties and rules of a statement.

After declaring it, use a Client tag to include it in the Template:

<@Menu hydrate="idle" name="George" />

In this example:

• hydrate establishes the hydration strategy.
• name is sent to the Svelte component as a prop.

See Props to know how GOX transfers values to the component and Hydrate to know the activation strategies available.

The component may also contain a SSRT to present initial content generated by the server before Svelte is activated.

Full example

module index

import "github.com/gox-lang/gox"

client Menu svelte {
    src: "menu/Menu.svelte"
}

func GET(ctx *gox.Context) gox.Page {
    return <html>
        <head>
            <title>Menú de George</title>
        </head>
        <body>
            <@Menu hydrate="idle" name="George" />
        </body>
    </html>
}

The pages using Client components should include <head>where GOX adds the Import Map necessary to load Svelte and the component in the browser.

Best practices

• Keep the Svelte components inside client/svelte/.
• Organizes related components in subdirectories.
• Use files .svelte for components.
• Declares the properties received by $props().
• Do not manually mount or dismount the component.
• It uses routes relating to client/svelte/ on the property src.
• Keep in GOX the initial information to be given from the server.

See also

• Client declarations
• Props
• SSRT
• Hydrate
• Import Map