Client declarations

A Client statement links a name available in the GOX templates to a component located in the directory client/ project.

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

After declaring it, the component can be used by a Client tag:

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

Syntax

A Client statement uses the following structure:

client Nombre framework {
    src: "ruta"
    dev: false
}

Properties are written by nombre: valor. Each property must be written in a separate line and can end optionally with a coma:

client Menu react {
    src: "menu/menu.jsx",
    dev: true,
}

Location

Customer statements should be written at the top level of the module, out of functions, methods, blocks and templates.

module main

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

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

func ShowMenu() gox.Action {
    return <@Menu />
}

The Actions can return Customer components naturally. You do not need to build a full page or declare the tags <html>, <head> and <body>.

A statement within a function is not valid:

func ShowMenu() gox.Action {
    client Menu react {
        src: "menu/menu.jsx"
    }

    return <@Menu />
}

Scope and reuse

A Client statement belongs exclusively to the module where it was defined. It cannot be exported or imported directly from other GOX modules.

To reuse a Client component outside your module, it must be wrapped in a GOX component that returns gox.Component:

// menu.gox
module clientmenu

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

func Navigation(hydrate string, name string) gox.Component {
    return <@Menu hydrate={{hydrate}} name={{name}} />
}

The GOX component can be imported and used from any other module:

// index.gox
module index

import (
    "github.com/gox-lang/gox"
    "menu.gox"
)

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

This structure keeps the Client declaration within its module and exposes a reusable interface using the normal GOX composition rules.

See the documentation for Components to learn how to create and reuse GOX components.

Name

The name appears immediately after client:

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

It must be a valid identifier and distinguishes between capital letters and lower cases. The same name should be used on the Client tag:

<@Menu />

The names must be unique within the same module. Two different modules can declare components with the same name.

Framework

The framework is written after the name:

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

The values accepted are:

The framework must be written in small cases and installed in the project. Each framework has its own page with the installation command, the required structure and the way to create its components.

Property src

src sets the location of the file containing the component:

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

It is a mandatory property and must contain a relative not empty route.

The route is solved from the framework directory. In the example above, GOX uses:

client/react/menu/menu.jsx

Not to be included client/<framework>/ within src.

The route must remain within the framework directory and use a compatible extension. No absolute routes or routes coming out of that directory are allowed.

Property dev

dev determines how the component bundle is generated:

client Menu react {
    src: "menu/menu.jsx"
    dev: true
}

Its value must be true or false. When omitted, use false.

• dev: true generates a development bundle with the included framework and source maps. The code is not minimized.
• dev: false It generates an optimized and minimized bundle for production. The framework is generated as a shared bundle separate from the component code.

Use in templates

A statement is used by a Client tag whose name begins with @:

<@Menu />

The tag may receive properties intended for the component:

<@Menu name="George" />

You may also include reserved GOX properties:

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

In this example:

• name is sent to the component.
• hydrate determines when the component is activated in the browser.

The transfer of values is developed in Props. The activation strategies are explained in Hydrate.

Full example

The React component is on the following route:

client/
└── react/
    └── menu/
        └── menu.jsx

The page declares the component and uses it within its template:

module main

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

client Menu react {
    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 required by the browser. Import Map.

Integration with Go

Client extends the Go syntax using GOX-specific declarations and tags, designed to naturally integrate with the module structure.

Although this syntax does not belong to Go, it maintains a familiar form for Go developers and retains a reading consistent with the rest of the code.

Best practices

• It uses names that describe the function of the component.
• Write the frame in small cases.
• Keep each file inside the directory of your framework.
• It uses relative and short routes in src.
• Organizes related components in subdirectories.
• Active dev only when you need the development bundle.
• Keep a single name for each statement within the module.

To learn more about ClientSee your documentation. To learn more about CLI, check your documentation.

See also

• Client
• Props
• Hydrate
• Actions
• CLI
• Import Map
• Components