1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
|
# GSX Language Support for VS Code
Syntax highlighting and language support for `.gsx` files used with the [go-tui](https://github.com/grindlemire/go-tui) framework.
## Features
- **Syntax Highlighting**: Full highlighting support for the GSX DSL
- Component declarations: `templ Name(params) { ... }` and `templ (c *Type) Render() { ... }`
- Keywords: `for`, `if`, `else`, `:=`
- Element tags: `<div>`, `<span>`, `<p>`, `<button>`, `<input>`, `<textarea>`, `<table>`, `<progress>`, etc.
- Ref bindings: `ref={myRef}` on elements
- Reactive state: `tui.NewState()`, `.Get()`, `.Set()`, `.Update()`
- Event attributes: `onFocus`, `onBlur`
- Attributes with string, number, and expression values
- Go expressions inside `{}`
- Comments: `//` and `/* */`
- **Language Configuration**
- Auto-closing brackets and quotes
- Comment toggling
- Code folding
- Smart indentation
- **LSP Support** (via `tui lsp`)
- Real-time diagnostics
- Go-to-definition for components, functions, refs, and state
- Hover documentation for elements, attributes, keywords, and state
- Auto-completion for elements, attributes, Tailwind classes, and Go expressions
- Find references across workspace
- Document and workspace symbols
- Semantic token highlighting
- Code formatting
## Installation
### From Source
1. Clone the go-tui repository:
```bash
git clone https://github.com/grindlemire/go-tui.git
```
2. Copy the extension to your VS Code extensions folder:
```bash
cp -r go-tui/editor/vscode ~/.vscode/extensions/gsx-language
```
3. Reload VS Code
### From VSIX (Package)
1. Build the extension:
```bash
cd go-tui/editor/vscode
npm install
npx vsce package
```
2. Install the `.vsix` file:
- Open VS Code
- Go to Extensions (Ctrl+Shift+X)
- Click the `...` menu and select "Install from VSIX..."
- Select the generated `.vsix` file
## Usage
Simply open any `.gsx` file and the syntax highlighting will be applied automatically.
### Example
```gsx
package main
import (
"fmt"
tui "github.com/grindlemire/go-tui"
)
type counter struct {
count *tui.State[int]
incBtn *tui.Ref
decBtn *tui.Ref
}
func Counter() *counter {
return &counter{
count: tui.NewState(0),
incBtn: tui.NewRef(),
decBtn: tui.NewRef(),
}
}
func (c *counter) KeyMap() tui.KeyMap {
return tui.KeyMap{
tui.On(tui.Rune('+'), func(ke tui.KeyEvent) { c.count.Update(func(v int) int { return v + 1 }) }),
tui.On(tui.Rune('-'), func(ke tui.KeyEvent) { c.count.Update(func(v int) int { return v - 1 }) }),
tui.On(tui.Rune('q'), func(ke tui.KeyEvent) { ke.App().Stop() }),
}
}
func (c *counter) HandleMouse(me tui.MouseEvent) bool {
return tui.HandleClicks(me,
tui.Click(c.incBtn, func() { c.count.Update(func(v int) int { return v + 1 }) }),
tui.Click(c.decBtn, func() { c.count.Update(func(v int) int { return v - 1 }) }),
)
}
templ (c *counter) Render() {
<div class="flex-col gap-2 p-2 border-rounded items-center">
<span class="font-bold">{fmt.Sprintf("Count: %d", c.count.Get())}</span>
<div class="flex gap-2">
<button ref={c.decBtn} class="px-1">{"-"}</button>
<button ref={c.incBtn} class="px-1">{"+"}</button>
</div>
<span class="font-dim">+/- or click buttons, q to quit</span>
</div>
}
```
## Supported Constructs
| Construct | Example |
|-----------|---------|
| Component | `templ Name(params) { ... }` |
| Method component | `templ (c *Type) Render() { ... }` |
| For loop | `for i, v := range items { ... }` |
| If/Else | `if condition { ... } else { ... }` |
| Let binding | `label := <span>text</span>` |
| Component call | `@ComponentName(args)` |
| Element | `<div class="flex-col gap-1">children</div>` |
| Self-closing element | `<hr />`, `<br />`, `<input />`, `<progress />` |
| Ref binding | `<button ref={myRef}>text</button>` |
| State access | `c.count.Get()`, `c.count.Set(v)`, `c.count.Update(fn)` |
| Event attributes | `onFocus={handler}`, `onBlur={handler}` |
| Go expression | `{fmt.Sprintf(...)}` |
| Helper function | `func helper(s string) string { ... }` |
## LSP Configuration
The extension automatically starts the GSX language server when you open a `.gsx` file. Configure via VS Code settings:
| Setting | Default | Description |
|---------|---------|-------------|
| `gsx.lsp.enabled` | `true` | Enable/disable the language server |
| `gsx.lsp.path` | `tui` | Path to the `tui` binary |
| `gsx.lsp.logPath` | `""` | Path for LSP log file (empty = no logging) |
If the `tui` binary is not found, the extension will offer to install it automatically via `go install`.
## Contributing
Contributions are welcome! Please see the [go-tui repository](https://github.com/grindlemire/go-tui) for contribution guidelines.
## License
MIT License. See the [LICENSE](https://github.com/grindlemire/go-tui/blob/main/LICENSE) file for details.
|