initial commit

Signed-off-by: jolheiser <john.olheiser@gmail.com>

.helix/languages.toml

@@ -0,0 +1,16 @@
+use-grammars = { only = ["templ"] }
+
+[[language]]
+name = "templ"
+auto-format = true
+scope = "source.templ"
+injection-regex = "templ"
+file-types = ["templ"]
+roots = ["go.mod"]
+comment-token = "//"
+language-server = { command = "templ", args = ["lsp"] }
+formatter = { command = "templ", args = ["fmt"] }
+
+[[grammar]]
+name = "templ"
+source = { git = "https://github.com/vrischmann/tree-sitter-templ", rev = "9f63037ad08a58050d0582ef1ae0009bd0fbf2f1" }

README.md

@@ -0,0 +1,8 @@
+# templ helix integration
+
+1. Add [.helix/languages.toml](.helix/languages.toml) to your Helix languages config.
+2. Grab the [queries](queries/templ) and place them in `~/.config/helix/runtime/queries/templ`
+
+Note: queries were obtained from [tree-sitter-templ](https://github.com/vrischmann/tree-sitter-templ), which likely will be up-to-date compared to this repo.
+The only extra query is [indents](queries/indents.scm).
+

go.mod

@@ -0,0 +1,5 @@
+module git.jojodev.com/jolheiser/templ-helix
+
+go 1.20
+
+require github.com/a-h/templ v0.2.334 // indirect

go.sum

@@ -0,0 +1,2 @@
+github.com/a-h/templ v0.2.334 h1:/mKupkgHGeSSeC0KiGRvmUoRGQJuku9VGVhRP1CeWgY=
+github.com/a-h/templ v0.2.334/go.mod h1:6Lfhsl3Z4/vXl7jjEjkJRCqoWDGjDnuKgzjYMDSddas=

queries/templ/highlights.scm

@@ -0,0 +1,97 @@
+; TODO(vincent): can we use injection ? I can't get it working
+
+; A bunch of these are taken from:
+; * https://github.com/nvim-treesitter/nvim-treesitter/blob/master/queries/go/highlights.scm
+; * https://github.com/tree-sitter/tree-sitter-go/blob/master/queries/highlights.scm
+
+(package_identifier) @namespace
+
+(parameter_declaration (identifier) @parameter)
+(variadic_parameter_declaration (identifier) @parameter)
+
+(function_declaration
+  name: (identifier) @function)
+
+(type_spec name: (type_identifier) @type.definition)
+(type_identifier) @type
+(field_identifier) @property
+(identifier) @variable
+
+; Function calls
+
+(call_expression
+  function: (identifier) @function.call)
+
+(call_expression
+  function: (selector_expression
+    field: (field_identifier) @method.call))
+
+;
+; These are Templ specific
+;
+
+(component_declaration
+  name: (component_identifier) @function)
+
+(tag_start) @tag
+(tag_end) @tag
+(self_closing_tag) @tag
+(style_element) @tag
+
+(attribute
+  name: (attribute_name) @tag.attribute)
+(attribute
+  value: (quoted_attribute_value) @string)
+
+(element_text) @string.special
+(style_element_text) @string.special
+
+(css_property
+  name: (css_property_name) @attribute)
+
+(expression) @function.method
+(dynamic_class_attribute_value) @function.method
+
+(component_import
+  name: (component_identifier) @function)
+
+(component_render) @function.call
+
+[
+  "@"
+] @operator
+
+[
+  "func"
+  "var"
+  "const"
+  "templ"
+  "css"
+  "type"
+  "return"
+  "struct"
+  "range"
+  "script"
+] @keyword
+
+[
+  "import"
+  "package"
+] @include
+
+[
+  "else"
+  "case"
+  "switch"
+  "if"
+  "default"
+] @conditional
+
+"for" @repeat
+
+[
+  (interpreted_string_literal)
+  (raw_string_literal)
+  (rune_literal)
+] @string
+

queries/templ/indents.scm

@@ -0,0 +1,9 @@
+[
+  (component_declaration)
+] @indent
+
+[
+  "]"
+  ")"
+] @outdent
+

queries/templ/injections.scm

@@ -0,0 +1,5 @@
+((script_block_text) @injection.content (#set! injection.language "javascript"))
+((script_element_text) @injection.content (#set! injection.language "javascript"))
+
+((style_element_text) @injection.content (#set! injection.language "css"))
+

queries/templ/structure.scm

@@ -0,0 +1,10 @@
+(component_declaration
+  "templ" @structure.anchor
+  (parameter_list
+    "(" @structure.open
+    ")" @structure.close
+  )
+)
+
+
+

test.templ

@@ -0,0 +1,24 @@
+package main
+
+import "strconv"
+
+var red = "#ff0000";
+
+css className() {
+	background-color: #ffffff;
+	color: { red };
+}
+
+script graph(data []any) {
+    const chart = LightweightCharts.createChart(document.body, { width: 400, height: 300 });
+    const lineSeries = chart.addLineSeries();
+    lineSeries.setData(data);
+}
+
+templ hello(name string, vars []string) {
+	<div>Hello, { name }</div>
+	for i, path := range vars {
+		<a href={ templ.URL(path) }>lol { strconv.Itoa(i) }/</a>
+	}
+}
+