Grace Plugin for using Grace/Grails app with htmx.
Add dependency to the build.gradle
,
repositories {
mavenCentral()
}
dependencies {
implementation "org.graceframework.plugins:htmx:VERSION"
}
Htmx plugin supports controller-specific withFormat()
method,
class BookController {
def list() {
def books = Book.list()
withFormat {
htmx {
render(template: "book", model: [bookList: books])
}
json {
render books as JSON
}
}
}
}
Also, this plugin supports extendsions for Grails Request and Response,
// You can get htmx request headers from Grails Request
request.htmx.boosted == request.getHeader('HX-Boosted')
request.htmx.target == request.getHeader('HX-Target')
// Check htmx request?
if (request.htmx as boolean) { // or use request.isHtmx()
template = 'book-detail'
}
// You can set htmx response headers in Grails
response.htmx.trigger = 'itemAdded'
If you use respond
method introduced in Grails 2.3. The respond method tries to produce the most appropriate response for the requested content type (JSON, XML, HTML etc.)
You can configure mime types for Htmx.
Update the app/conf/application.yml
:
grails:
mime:
types:
htmx: text/html
For example given the show action:
def show(Book book) {
respond book
}
You could supply a show.htmx.gsp
file to render the HTMX:
<div id="${book.id}">
<h1>${book.title}</h1>
<p>${book.description}</p>
</div>
If you use asset-pipeline
plugin, this plugin already includes htmx.js
, hyperscript.js
,
so you can add htmx.js
to the app/assets/application.js
,
//= require hyperscript
//= require htmx
//= require_self
Also, you can use asset
tag in the GSP,
<asset:javascript src="hyperscript.js"/>
<asset:javascript src="htmx.js"/>
Tip
Add hyperscript.js
to assets.minifyOptions.excludes
If your app has an error when compiling assets.
hyperscript.unminified.js:85:24: ERROR - [JSC_PARSE_ERROR] Parse error. '(' expected
85| static OP_TABLE = {
^
1 error(s), 0 warning(s)
Closure uglify JS Exception
asset.pipeline.processors.MinifyException: [JSC_PARSE_ERROR. Parse error. '(' expected at hyperscript.unminified.js line 85 : 24]
at asset.pipeline.processors.ClosureCompilerProcessor.process(ClosureCompilerProcessor.groovy:81)
at asset.pipeline.processors.ClosureCompilerProcessor$process.call(Unknown Source)
at asset.pipeline.AssetCompiler$_compile_closure4.doCall(AssetCompiler.groovy:171)
assets {
minifyJs = true
minifyCss = true
minifyOptions = [
excludes: ['hyperscript.js'],
languageMode: 'ES6',
targetLanguage: 'ES6', //Can go from ES6 to ES5 for those bleeding edgers
optimizationLevel: 'SIMPLE' //Or ADVANCED or WHITESPACE_ONLY
]
}
git clone https://github.com/grace-plugins/grace-htmx.git
cd grace-htmx
./gradlew publishToMavenLocal
- Grace 2022.0.0+
- Grails 3.0+
- Htmx 1.9
- Htmx 2.0
This plugin is available as open source under the terms of the APACHE LICENSE, VERSION 2.0