Using Solid

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

Install Solid

Run the following command from the root of the project:

bash
gox client add solid

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

Created structure

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

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

Create a Solid component

Create the following file:

text
client/solid/menu/menu.jsx

The file must export the component by export default:

jsx
import { createSignal } from "solid-js"

export default function Menu(attributes) {
    const [isOpen, setIsOpen] = createSignal(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:

text
client/solid/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 Solid.

Use the component in GOX

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

gox
client Menu solid {
    src: "menu/menu.jsx"
}

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

text
client/solid/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:

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

In this example:

  • hydrate establishes the hydration strategy.
  • name is sent to the Solid 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 Solid is activated.

Full example

gox
module index

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

client Menu solid {
    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 Solid and the component in the browser.

Best practices

  • Keep the Solid components inside client/solid/.
  • 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/solid/ on the property src.
  • Keep in GOX the initial information to be given from the server.

See also

Next step

Continue with Integration with Vue to learn how to use components Vue with GOX.

Using Vue