Skip to content

Commit

Permalink
feat(templ): add context support for templ
Browse files Browse the repository at this point in the history
  • Loading branch information
folliehiyuki committed Nov 17, 2023
1 parent c03f8aa commit c1d9c9d
Show file tree
Hide file tree
Showing 3 changed files with 184 additions and 0 deletions.
1 change: 1 addition & 0 deletions README.md
Original file line number Diff line number Diff line change
Expand Up @@ -67,6 +67,7 @@ Note: if you need support for Neovim 0.6.x please use the tag `compat/0.6`.
- [x] `swift`
- [x] `tcl`
- [x] `teal`
- [x] `templ`
- [x] `terraform`
- [x] `toml`
- [x] `tsx`
Expand Down
22 changes: 22 additions & 0 deletions queries/templ/context.scm
Original file line number Diff line number Diff line change
@@ -0,0 +1,22 @@
; inherits: go,html

([
(component_declaration)
(script_declaration)
(css_declaration)
(component_switch_statement)
(component_switch_expression_case)
(component_switch_default_case)
] @context)

(component_if_statement
consequence: (component_block (_) @context.end)
) @context

(component_for_statement
body: (component_block (_) @context.end)
) @context

(component_import
body: (component_block (_) @context.end)
) @context
161 changes: 161 additions & 0 deletions test/test.templ
Original file line number Diff line number Diff line change
@@ -0,0 +1,161 @@
package main

import (
"fmt"





"time"
)

templ headerTemplate(name string) {
<header data-testid="headerTemplate">
switch name {












case "Alice", "Bob":
<h1>{ name }</h1>












default:













<h1>{ "Unknown" }</h1>
}
<script src="https://unpkg.com/lightweight-charts/dist/lightweight-charts.standalone.production.js"></script>
<style type="text/css">
p {
font-family: sans-serif;
}
</style>
</header>
}

templ posts(posts []Post) {
@layout("Posts") {







@postsTemplate(posts)
if len(posts) > 0 {
<div>{ "Not empty" }</div>











} else {










<div>{ "Empty" }</div>
}
}
}

templ postsTemplate(posts []Post) {
<div data-testid="postsTemplate">
for _, p := range posts {

<div data-testid="postsTemplatePost">
<div data-testid="postsTemplatePostName">{ p.Name }</div>
<div data-testid="postsTemplatePostAuthor">{ p.Author }</div>
















</div>
}
</div>
}

script withParameters(a string, b string, c int) {








console.log(a, b, c);
}

css red() {












background-color: #ff0000;
font-family: "Iosevka";
}

0 comments on commit c1d9c9d

Please sign in to comment.