Using Preact

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

Install Preact

Run the following command from the root of the project:

gox client add preact

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

Created structure

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

client/
└── preact/
    ├── 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/preact/.

Create a Preact component

Create the following file:

client/preact/menu/menu.jsx

The file must export the component by export default:

import { useState } from "preact/hooks"

export default function Menu(attributes) {
    const [isOpen, setIsOpen] = useState(false)

    return <nav>
        <button onClick={() => setIsOpen(!isOpen)}>
            Menú de {attributes.name}
        </button>
        {isOpen && <p>El menú está abierto.</p>}
    </nav>
}

The default export is the component that GOX uses as a assembly point.

Files can also be used .tsx:

client/preact/menu/menu.tsx

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

Use the component in GOX

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

client Menu preact {
    src: "menu/menu.jsx"
}

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

client/preact/menu/menu.jsx

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 Preact component within the object attributes.

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 Preact is activated.

Full example

module index

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

client Menu preact {
    src: "menu/menu.jsx"
}

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 Preact and the component in the browser.

Best practices

• Keep the Preact components inside client/preact/.
• Organizes related components in subdirectories.
• Use .jsx for JavaScript and .tsx for TypeScript.
• Exports the main component by export default.
• Do not manually mount or dismount the component.
• It uses routes relating to client/preact/ 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