Merge pull request #1 from will-wow/progress-bar

Progress bar and extensions

.vscode/examples.code-snippets

@@ -12,8 +12,6 @@
     "body": [
       "package ${TM_DIRECTORY/.*\\/(.*)$/$1/}",
       "",
-      "package activesearch",
-      "",
       "import (",
       "	\"net/http\"",
       "",
@@ -45,36 +43,42 @@
     "scope": "templ",
     "prefix": "page",
     "body": [
-      "package ${TM_DIRECTORY/.*\\/(.*)$/$1/}",
+      "package \"extempl\"",
       "",
       "import (",
       "  	\"embed\"",
       "",
       "  	\"github.com/will-wow/typed-htmx-go/examples/web/layout/templ/layout\"",
-      "  	\"github.com/will-wow/typed-htmx-go/examples/web/${$2}/shared\"",
+      "  	\"github.com/will-wow/typed-htmx-go/examples/web/${TM_DIRECTORY/.*\\/(.*)$/$1/}/shared\"",
       "  	\"github.com/will-wow/typed-htmx-go/examples/web/exprint\"",
       "  	\"github.com/will-wow/typed-htmx-go/htmx\"",
       ")",
       "",
-      "",
       "var hx = htmx.NewTempl()",
       "",
-      "//go:embed activesearch.templ",
+      "//go:embed ${TM_DIRECTORY/.*\\/(.*)$/$1/}.templ",
       "var fs embed.FS",
       "var ex = exprint.New(fs, \"//\", \"\")",
       "",
       "templ Page() {",
       "	@layout.Base(\"$1\") {",
-      "		<h1>$1</h1>",
-      "		<p>",
-      "			Desc",
-      "		</p>",
-      "		<pre>",
-      "			<code>",
-      "   		{ ex.PrintOrErr(\"$2.templ\", \"$2\") }",
-      "			</code>",
-      "		</pre>",
-      "	}",
+      "	 	<h1>$1</h1>",
+      "	 	<p>",
+      "	 		Desc",
+      "	 	</p>",
+      "	 	<pre>",
+      "	 		<code class=\"language-go\">",
+      "    		{ ex.PrintOrErr(\"${TM_DIRECTORY/.*\\/(.*)$/$1/}.templ\", \"demo\") }",
+      "	 		</code>",
+      "	 	</pre>",
+      " 	<h2>Demo</h2>",
+      " 	{ demo() }",
+      "	 }",
+      "}",
+      "",
+      "templ demo() {",
+      "  //ex:start:demo",
+      "  //ex:end:demo",
       "}",
     ],
   },
@@ -99,7 +103,7 @@
       "",
       "var hx = htmx.NewGomponents()",
       "",
-      "//go:embed activesearch.gom.go",
+      "//go:embed ${TM_DIRECTORY/.*\\/(.*)$/$1/}.gom.go",
       "var fs embed.FS",
       "var ex = exprint.New(fs, \"//\", \"\")",
       "",
@@ -113,9 +117,18 @@
       "		Pre(",
       "			Code(",
       "				Class(\"language-go\"),",
-      "				g.Text(ex.PrintOrErr(\"$2.gom.go\", \"$2\")),",
+      "				g.Text(ex.PrintOrErr(\"$TM_FILENAME_BASE.gom.go\", \"demo\")),",
       "			),",
-      "		),",
+      "		 ),",
+      "    H2(g.Text(\"Demo\")),",
+      "    demo(),",
+      "  )",
+      "}",
+      "",
+      "func demo() g.Node {",
+      "  //ex:start:demo",
+      "  //ex:end:demo",
+      "}",
     ],
     "description": "gom",
   },

.vscode/settings.json

@@ -1,5 +1,5 @@
 {
   "go.lintTool": "golangci-lint",
   "go.lintFlags": ["--fast"],
-  "cSpell.words": ["gomponents"]
+  "cSpell.words": ["classtools", "gomponents"]
 }

README.md

@@ -65,13 +65,33 @@ templ search() {
 }
 ```
 
+## Extensions
+
+htmx includes a set of extensions out of the box that address common developer needs. These extensions are tested against htmx in each distribution.
+
+While you can always use any extension by adding standard HTML attributes, `typed-htmx-go` has typed support for some extensions.
+
+These extensions each have their own package, and expose function that take a configured `hx` as a first parameter, and return a full attribute.
+
+`hx` also includes an `hx.Ext()` method to register an extension on an element (ie: `{ hx.Ext(classtools.Extension)... }` instead of `hx-ext="class-tools"`.
+
+### Current Extensions supported
+
+See [htmx/ext](./htmx/ext) for a full list of extensions.
+
+- [`class-tools`](https://htmx.org/extensions/class-tools/)
+- [`preload`](https://htmx.org/extensions/preload/)
+- [`remove-me`](https://htmx.org/extensions/remove-me/)
+
 ## Examples
 
 Usage examples are in [examples](./examples) (hosted at [typed-htmx-go.vercel.app](https://typed-htmx-go.vercel.app/))
 
+These are mostly ported from the [HTMX examples](https://htmx.org/examples/), but include a Templ and Gomponents implementation, and working server code to borrow from.
+
 ## HTMX Version
 
-`typed-hx-go` strives to keep up with HTMX releases. It currently supports HTMX `v1.9.10`.
+`typed-htmx-go` strives to keep up with HTMX releases. It currently supports HTMX `v1.9.10`.
 
 ## Goals
 
@@ -183,26 +203,6 @@ Form(
 
 Every attribute function should have a test to make sure it's printing valid HTMX. And every function and option should include an example test, to make it easy to see usage in the godocs. These are also a good opportunity to try out the API and make sure it's ergonomic in practice.
 
-## Notable attributes
-
-Most of the attributes in HTMX are pretty straightforward to use - you just pass in CSS selector that the attribute should apply to, or nothing at all. A few are more complicated though, and are listed here:
-
-### Config
-
-TODO
-
-### On
-
-TODO
-
-### Swap
-
-TODO
-
-### Trigger
-
-TODO
-
 ## Contributing
 
 ### Install Tasklist

examples/Taskfile.yml

@@ -25,8 +25,8 @@ tasks:
   fmt:
     desc: Run goimports
     cmds:
-      # - go mod tidy
-      - go run golang.org/x/tools/cmd/goimports@v0.18.0 -w -local github.com/will-wow/typed-htmx-go/examples .
+      - go mod tidy
+      - go run golang.org/x/tools/cmd/goimports@v0.20.0 -w -local github.com/will-wow/typed-htmx-go/examples .
 
   test:
     desc: Run test suite

examples/go.mod

@@ -5,13 +5,14 @@ go 1.22.0
 require github.com/a-h/templ v0.2.663
 
 require (
-	github.com/PuerkitoBio/goquery v1.8.1
+	github.com/PuerkitoBio/goquery v1.9.1
+	github.com/angelofallars/htmx-go v0.5.0
 	github.com/lithammer/dedent v1.1.0
 	github.com/maragudk/gomponents v0.20.2
-	github.com/will-wow/typed-htmx-go v0.1.0
+	github.com/will-wow/typed-htmx-go v0.1.1
 )
 
 require (
-	github.com/andybalholm/cascadia v1.3.1 // indirect
-	golang.org/x/net v0.19.0 // indirect
+	github.com/andybalholm/cascadia v1.3.2 // indirect
+	golang.org/x/net v0.24.0 // indirect
 )

examples/go.sum

@@ -1,46 +1,52 @@
-github.com/PuerkitoBio/goquery v1.8.1 h1:uQxhNlArOIdbrH1tr0UXwdVFgDcZDrZVdcpygAcwmWM=
-github.com/PuerkitoBio/goquery v1.8.1/go.mod h1:Q8ICL1kNUJ2sXGoAhPGUdYDJvgQgHzJsnnd3H7Ho5jQ=
+github.com/PuerkitoBio/goquery v1.9.1 h1:mTL6XjbJTZdpfL+Gwl5U2h1l9yEkJjhmlTeV9VPW7UI=
+github.com/PuerkitoBio/goquery v1.9.1/go.mod h1:cW1n6TmIMDoORQU5IU/P1T3tGFunOeXEpGP2WHRwkbY=
 github.com/a-h/templ v0.2.663 h1:aa0WMm27InkYHGjimcM7us6hJ6BLhg98ZbfaiDPyjHE=
 github.com/a-h/templ v0.2.663/go.mod h1:SA7mtYwVEajbIXFRh3vKdYm/4FYyLQAtPH1+KxzGPA8=
-github.com/andybalholm/cascadia v1.3.1 h1:nhxRkql1kdYCc8Snf7D5/D3spOX+dBgjA6u8x004T2c=
-github.com/andybalholm/cascadia v1.3.1/go.mod h1:R4bJ1UQfqADjvDa4P6HZHLh/3OxWWEqc0Sk8XGwHqvA=
+github.com/andybalholm/cascadia v1.3.2 h1:3Xi6Dw5lHF15JtdcmAHD3i1+T8plmv7BQ/nsViSLyss=
+github.com/andybalholm/cascadia v1.3.2/go.mod h1:7gtRlve5FxPPgIgX36uWBX58OdBsSS6lUvCFb+h7KvU=
+github.com/angelofallars/htmx-go v0.5.0 h1:L7M48cCH7nX8cV5wRYn04pN6AE4qNdh86iTbuKxhnIo=
+github.com/angelofallars/htmx-go v0.5.0/go.mod h1:izXk6A+Jllc3vXs1dUvxUJs/jE0weiEC07ZPlCVi4cc=
 github.com/google/go-cmp v0.6.0 h1:ofyhxvXcZhMsU5ulbFiLKl/XBFqE1GSq7atu8tAmTRI=
 github.com/google/go-cmp v0.6.0/go.mod h1:17dUlkBOakJ0+DkrSSNjCkIjxS6bF9zb3elmeNGIjoY=
 github.com/lithammer/dedent v1.1.0 h1:VNzHMVCBNG1j0fh3OrsFRkVUwStdDArbgBWoPAffktY=
 github.com/lithammer/dedent v1.1.0/go.mod h1:jrXYCQtgg0nJiN+StA2KgR7w6CiQNv9Fd/Z9BP0jIOc=
 github.com/maragudk/gomponents v0.20.2 h1:39FhnBNNCJzqNcD9Hmvp/5xj0otweFoyvVgFG6kXoy0=
 github.com/maragudk/gomponents v0.20.2/go.mod h1:nHkNnZL6ODgMBeJhrZjkMHVvNdoYsfmpKB2/hjdQ0Hg=
-github.com/will-wow/typed-htmx-go v0.1.0 h1:KgWRl4SiRI+c8RuOKp9XxdQkPxZBrLtHQKEMto2vD+Q=
-github.com/will-wow/typed-htmx-go v0.1.0/go.mod h1:74VnqtHJBD+KHLksfxCDYROQhEI4OUcb0iOJEuOBVvs=
+github.com/will-wow/typed-htmx-go v0.1.1 h1:Ow2kFDh35S6SplP1uD/gIYKQARm3n3gUmqp83wByvTg=
+github.com/will-wow/typed-htmx-go v0.1.1/go.mod h1:4kTdRyJEy/oSURNcUAUvSiJ90Mf19W0dEhe/ouK7530=
 github.com/yuin/goldmark v1.4.13/go.mod h1:6yULJ656Px+3vBD8DxQVa3kxgyrAnzto9xy5taEt/CY=
 golang.org/x/crypto v0.0.0-20190308221718-c2843e01d9a2/go.mod h1:djNgcEr1/C05ACkg1iLfiJU5Ep61QUkGW8qpdssI0+w=
 golang.org/x/crypto v0.0.0-20210921155107-089bfa567519/go.mod h1:GvvjBRRGRdwPK5ydBHafDWAxML/pGHZbMvKqRZ5+Abc=
 golang.org/x/mod v0.6.0-dev.0.20220419223038-86c51ed26bb4/go.mod h1:jJ57K6gSWd91VN4djpZkiMVwK6gcyfeH4XE8wZrZaV4=
+golang.org/x/mod v0.8.0/go.mod h1:iBbtSCu2XBx23ZKBPSOrRkjjQPZFPuis4dIYUhu/chs=
 golang.org/x/net v0.0.0-20190620200207-3b0461eec859/go.mod h1:z5CRVTTTmAJ677TzLLGU+0bjPO0LkuOLi4/5GtJWs/s=
 golang.org/x/net v0.0.0-20210226172049-e18ecbb05110/go.mod h1:m0MpNAwzfU5UDzcl9v0D8zg8gWTRqZa9RBIspLL5mdg=
-golang.org/x/net v0.0.0-20210916014120-12bc252f5db8/go.mod h1:9nx3DQGgdP8bBQD5qxJ1jj9UTztislL4KSBs9R2vV5Y=
 golang.org/x/net v0.0.0-20220722155237-a158d28d115b/go.mod h1:XRhObCWvk6IyKnWLug+ECip1KBveYUHfp+8e9klMJ9c=
-golang.org/x/net v0.7.0/go.mod h1:2Tu9+aMcznHK/AK1HMvgo6xiTLG5rD5rZLDS+rp2Bjs=
-golang.org/x/net v0.19.0 h1:zTwKpTd2XuCqf8huc7Fo2iSy+4RHPd10s4KzeTnVr1c=
-golang.org/x/net v0.19.0/go.mod h1:CfAk/cbD4CthTvqiEl8NpboMuiuOYsAr/7NOjZJtv1U=
+golang.org/x/net v0.6.0/go.mod h1:2Tu9+aMcznHK/AK1HMvgo6xiTLG5rD5rZLDS+rp2Bjs=
+golang.org/x/net v0.9.0/go.mod h1:d48xBJpPfHeWQsugry2m+kC02ZBRGRgulfHnEXEuWns=
+golang.org/x/net v0.24.0 h1:1PcaxkF854Fu3+lvBIx5SYn9wRlBzzcnHZSiaFFAb0w=
+golang.org/x/net v0.24.0/go.mod h1:2Q7sJY5mzlzWjKtYUEXSlBWCdyaioyXzRB2RtU8KVE8=
 golang.org/x/sync v0.0.0-20190423024810-112230192c58/go.mod h1:RxMgew5VJxzue5/jJTE5uejpjVlOe/izrB70Jof72aM=
 golang.org/x/sync v0.0.0-20220722155255-886fb9371eb4/go.mod h1:RxMgew5VJxzue5/jJTE5uejpjVlOe/izrB70Jof72aM=
+golang.org/x/sync v0.1.0/go.mod h1:RxMgew5VJxzue5/jJTE5uejpjVlOe/izrB70Jof72aM=
 golang.org/x/sys v0.0.0-20190215142949-d0b11bdaac8a/go.mod h1:STP8DvDyc/dI5b8T5hshtkjS+E42TnysNCUPdjciGhY=
 golang.org/x/sys v0.0.0-20201119102817-f84b799fce68/go.mod h1:h1NjWce9XRLGQEsW7wpKNCjG9DtNlClVuFLEZdDNbEs=
-golang.org/x/sys v0.0.0-20210423082822-04245dca01da/go.mod h1:h1NjWce9XRLGQEsW7wpKNCjG9DtNlClVuFLEZdDNbEs=
 golang.org/x/sys v0.0.0-20210615035016-665e8c7367d1/go.mod h1:oPkhp1MJrh7nUepCBck5+mAzfO9JrbApNNgaTdGDITg=
 golang.org/x/sys v0.0.0-20220520151302-bc2c85ada10a/go.mod h1:oPkhp1MJrh7nUepCBck5+mAzfO9JrbApNNgaTdGDITg=
 golang.org/x/sys v0.0.0-20220722155257-8c9f86f7a55f/go.mod h1:oPkhp1MJrh7nUepCBck5+mAzfO9JrbApNNgaTdGDITg=
 golang.org/x/sys v0.5.0/go.mod h1:oPkhp1MJrh7nUepCBck5+mAzfO9JrbApNNgaTdGDITg=
+golang.org/x/sys v0.7.0/go.mod h1:oPkhp1MJrh7nUepCBck5+mAzfO9JrbApNNgaTdGDITg=
 golang.org/x/term v0.0.0-20201126162022-7de9c90e9dd1/go.mod h1:bj7SfCRtBDWHUb9snDiAeCFNEtKQo2Wmx5Cou7ajbmo=
 golang.org/x/term v0.0.0-20210927222741-03fcf44c2211/go.mod h1:jbD1KX2456YbFQfuXm/mYQcufACuNUgVhRMnK/tPxf8=
 golang.org/x/term v0.5.0/go.mod h1:jMB1sMXY+tzblOD4FWmEbocvup2/aLOaQEp7JmGp78k=
+golang.org/x/term v0.7.0/go.mod h1:P32HKFT3hSsZrRxla30E9HqToFYAQPCMs/zFMBUFqPY=
 golang.org/x/text v0.3.0/go.mod h1:NqM8EUOU14njkJ3fqMW+pc6Ldnwhi/IjpwHt7yyuwOQ=
 golang.org/x/text v0.3.3/go.mod h1:5Zoc/QRtKVWzQhOtBMvqHzDpF6irO9z98xDceosuGiQ=
-golang.org/x/text v0.3.6/go.mod h1:5Zoc/QRtKVWzQhOtBMvqHzDpF6irO9z98xDceosuGiQ=
 golang.org/x/text v0.3.7/go.mod h1:u+2+/6zg+i71rQMx5EYifcz6MCKuco9NR6JIITiCfzQ=
 golang.org/x/text v0.7.0/go.mod h1:mrYo+phRRbMaCq/xk9113O4dZlRixOauAjOtrjsXDZ8=
+golang.org/x/text v0.9.0/go.mod h1:e1OnstbJyHTd6l/uOt8jFFHp6TRDWZR/bV3emEE/zU8=
 golang.org/x/tools v0.0.0-20180917221912-90fa682c2a6e/go.mod h1:n7NCudcB/nEzxVGmLbDWY5pfWTLqBcC2KZ6jyYvM4mQ=
 golang.org/x/tools v0.0.0-20191119224855-298f0cb1881e/go.mod h1:b+2E5dAYhXwXZwtnZ6UAqBI28+e2cm9otk0dWdXHAEo=
 golang.org/x/tools v0.1.12/go.mod h1:hNGJHUnrk76NpqgfD5Aqm5Crs+Hm0VOH/i9J2+nxYbc=
+golang.org/x/tools v0.6.0/go.mod h1:Xwgl3UAJ/d3gWutnCtw505GrjyAbvKui8lOU390QaIU=
 golang.org/x/xerrors v0.0.0-20190717185122-a985d3407aa7/go.mod h1:I/5z698sn9Ka8TeJc9MKroUUfqBBauWjQqLJ2OPfmY0=

examples/web/classtools_ex/classtools_ex.go

@@ -0,0 +1,31 @@
+package classtools_ex
+
+import (
+	"net/http"
+
+	"github.com/will-wow/typed-htmx-go/examples/web/classtools_ex/exgom"
+	"github.com/will-wow/typed-htmx-go/examples/web/classtools_ex/extempl"
+)
+
+type example struct {
+	gom bool
+}
+
+func NewHandler(gom bool) http.Handler {
+	mux := http.NewServeMux()
+
+	ex := example{gom: gom}
+
+	mux.HandleFunc("GET /{$}", ex.demo)
+	mux.HandleFunc("GET /foo/{$}", ex.demo)
+
+	return mux
+}
+
+func (ex *example) demo(w http.ResponseWriter, r *http.Request) {
+	if ex.gom {
+		_ = exgom.Page().Render(w)
+	} else {
+		_ = extempl.Page().Render(r.Context(), w)
+	}
+}

examples/web/classtools_ex/exgom/classtools_ex.gom.go

@@ -0,0 +1,74 @@
+package exgom
+
+import (
+	"embed"
+	"time"
+
+	. "github.com/maragudk/gomponents/html"
+
+	g "github.com/maragudk/gomponents"
+
+	"github.com/will-wow/typed-htmx-go/htmx/ext/classtools"
+
+	"github.com/will-wow/typed-htmx-go/examples/web/exprint"
+	"github.com/will-wow/typed-htmx-go/examples/web/layout/gom/layout"
+
+	"github.com/will-wow/typed-htmx-go/htmx"
+)
+
+var hx = htmx.NewGomponents()
+
+//go:embed classtools_ex.gom.go
+var fs embed.FS
+var ex = exprint.New(fs, "//", "")
+
+func Page() g.Node {
+	return layout.Wrapper(
+		"Class Tools",
+		Class("class-tools-ex"),
+		H1(g.Text("Class Tools")),
+		P(
+			g.Text("Demonstrates different uses of class-tools"),
+		),
+		Pre(
+			Code(
+				Class("language-go"),
+				g.Text(ex.PrintOrErr("classtools_ex.gom.go", "demo")),
+			),
+		),
+		H2(g.Text("Demo")),
+		demo(),
+	)
+}
+
+func demo() g.Node {
+	//ex:start:demo
+	return Div(
+		hx.Ext(classtools.Extension),
+		P(g.Text("Add then remove bold after 1 second, then toggle color every second"),
+			classtools.Classes(hx,
+				classtools.Add("bold", time.Second),
+				classtools.Remove("bold", time.Second),
+				classtools.Toggle("color", time.Second),
+			),
+		),
+		P(g.Text("Add then remove bold after 1 second, while toggling color every second"),
+			classtools.ClassesParallel(hx, []classtools.Run{
+				{
+					classtools.Add("bold", time.Second),
+					classtools.Remove("bold", time.Second),
+				},
+				{
+					classtools.Toggle("color", time.Second),
+				},
+			}),
+		),
+		P(g.Text("Add with no delay"),
+			classtools.Classes(hx, classtools.Add("color", 0)),
+		),
+		P(g.Text("Toggle with 0 delay"),
+			classtools.Classes(hx, classtools.Toggle("color", 0)),
+		),
+	)
+	//ex:end:demo
+}