Skip to content

syntax.md

Latest commit

 

History

History
111 lines (86 loc) · 5.14 KB

syntax.md

File metadata and controls

111 lines (86 loc) · 5.14 KB
Raw

Syntax reference

Use this page to look up .gsx syntax. If you are new to gsx, follow Learn gsx first for a guided path.

Start here

  1. Basic syntax — files, imports, and component declarations
  2. Elements — tags, nesting, void elements, and documents
  3. Interpolation — Go expressions and interpolated literals
  4. Attributes — static, dynamic, conditional, and spread attributes
  5. Control flow — if, for/range, and switch
  6. Composition — component calls, children, slots, and forwarding
  7. Component signatures — exact inputs, options values, and direct Go calls

More topics

Build constraints and //go: directives

File-level Go directives before the package clause apply to the generated Go file. The Go toolchain, not gsx, evaluates build constraints; see the Go documentation for build constraints.

Build-tag variants may declare the same component when their constraints are mutually exclusive and their signatures match:

// platform_linux.gsx
//go:build linux

package views

component PlatformName() {
	<span>Linux</span>
}

// platform_other.gsx
//go:build !linux

package views

component PlatformName() {
	<span>Other</span>
}

Generation processes both files; go build selects the matching variant.

Quick reference

Declarations

Form Meaning
component Card(title string) { … } Component declaration
component List[T any](items []T) { … } Generic component
component (p Page) Header() { … } Method component

Body forms

::: v-pre

Form Meaning
<div>…</div> Element
{ expr } Escaped Go expression
{ if … }, { for … }, { switch … } Control flow
{{ stmt }} GoBlock
<>…</> Fragment
{/* … */} Content comment
{ value |> filter } Pipeline
js`...`, css`...` in Go Contextual Go value
<?marker name=VALUE>, <?start name=VALUE>…<?end> Processing instructions
:::

Attribute forms

::: v-pre

Form Meaning
name="value" Static attribute
name={expr} Expression attribute
disabled, disabled={cond} Boolean attribute
{ if cond { name="value" } } Conditional attributes
{ attrs... } Attribute spread
attrs={{ "name": value }} Ordered attribute literal
name=f`prefix-@{value}` Interpolated literal
class={ … }, style={ … } Composable styling
@click=js`save(@{id})` JavaScript attribute
:::

Component forms

Form Meaning
<Card title="Hi"/> Component call
<ui.Button/> Cross-package call
<List[string] items={items}/> Explicit type arguments
<Card>…</Card> Nested children
header={ <h2>Title</h2> } Named slot
{children} Children placement
<Inner { attrs... }/> Attribute forwarding
<Card opts={opts}/> Explicit value forwarding

Status — alpha. Check Status and the roadmap before relying on deferred features.